/* =====================================================================
   Faunis — foglio di stile unico
   Colori, font e componenti presi dagli screenshot della landing.
   Ogni pagina usa SOLO queste classi: niente stili inventati pagina per pagina.
   ===================================================================== */

@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('../fonts/Poppins-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500 600; font-display: swap; src: url('../fonts/Poppins-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../fonts/Poppins-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../fonts/Inter-Bold.woff2') format('woff2'); }

:root {
  /* colori del logo */
  --ink: #073F54;        /* scritta del logo: titoli e testo forte */
  --blu: #015570;        /* onda del logo: azioni principali */
  --blu-2: #04384C;
  --verde: #5AB048;      /* foglia del logo: conferme, crescita */
  --verde-2: #3F8F32;
  --ambra: #E9A23B;      /* avvisi */
  --rosso: #DE5B52;      /* errori, blocchi */
  /* superfici e testo */
  --sfondo: #F3F7F6;
  --card: #FFFFFF;
  --azzurro: #E7F2F5;
  --verde-chiaro: #EEF7EA;
  --bordo: #E3ECEC;
  --bordo-2: #D3DFE0;
  --testo: #0E2A36;
  --testo-2: #5B7380;
  --muto: #8CA0A9;
  --ombra: 0 1px 2px rgba(7,63,84,.05), 0 6px 20px rgba(7,63,84,.06);
  --ombra-forte: 0 16px 48px rgba(7,63,84,.16);
  --raggio: 16px;
  --font-titoli: 'Poppins', 'Inter', system-ui, sans-serif;
  --font-testo: 'Inter', system-ui, sans-serif;
  --font-codici: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  /* nomi usati dal JavaScript portato da TT Manager (allevamento.js), con i colori di Faunis */
  --tx: var(--testo); --tx2: var(--testo-2); --muted: var(--muto); --line: var(--bordo); --line2: var(--bordo-2);
  --ok: var(--verde-2); --warn: #A16207; --bad: #B91C1C; --prop: #FFF7E0; --bg3: var(--sfondo); --cy: var(--blu);
  --info-bg: var(--azzurro); --info-bd: #BFDCE5;   /* FAUNIS: riquadri informativi di TT, su sfondo chiaro */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font-testo); background: var(--sfondo); color: var(--testo); font-size: 14px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .pop { font-family: var(--font-titoli); color: var(--ink); font-weight: 600; }
a { color: var(--blu); }
.codice { font-family: var(--font-codici); font-weight: 600; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- impaginazione ---------- */
.app { display: flex; min-height: 100vh; }
.side { width: 236px; flex: none; background: #fff; border-right: 1px solid var(--bordo); padding: 22px 14px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side .logo { padding: 0 10px 22px; } .side .logo img { height: 36px; display: block; }
.side .sezione { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muto); margin: 16px 12px 8px; }
.nav { display: flex; gap: 11px; align-items: center; padding: 9px 12px; border-radius: 10px; color: #3E5966; font-size: 13.5px; font-weight: 500; margin-bottom: 2px; position: relative; text-decoration: none; }
.nav:hover { background: var(--sfondo); }
.nav.attiva { background: var(--azzurro); color: var(--blu); font-weight: 600; }
.nav.attiva::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--verde); }
.nav.disattiva { color: var(--muto); cursor: default; } .nav.disattiva:hover { background: none; }
.nav .badge { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--muto); border: 1px solid var(--bordo); border-radius: 999px; padding: 0 6px; }
.side .piede { margin-top: auto; border: 1px solid var(--bordo); border-radius: 14px; padding: 12px; background: linear-gradient(180deg, #fff, #F6FAF9); }
.side .piede small { display: block; font-size: 10.5px; color: var(--muto); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.side .piede b { display: block; font-size: 13.5px; margin: 3px 0 8px; color: var(--ink); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.top { height: 68px; display: flex; align-items: center; gap: 12px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 20; }
.top h1 { font-size: 20px; }
.top .sotto { color: var(--muto); font-size: 12.5px; }
.spazio { flex: 1; }
.corpo { flex: 1; padding: 22px 28px; }

/* ---------- componenti ---------- */
.btn { height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bordo-2); background: #fff; color: var(--testo); font: 500 13px var(--font-testo); white-space: nowrap; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--blu); }
.btn.primario { background: var(--blu); border-color: var(--blu); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(1,85,112,.25); }
.btn.conferma { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(90,176,72,.3); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn.pieno { width: 100%; justify-content: center; height: 44px; font-size: 14px; }
select.btn { padding-right: 30px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238CA0A9' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--blu), var(--verde)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; border: none; cursor: pointer; }
.card { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 18px 20px; }
.card h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card .sotto { color: var(--testo-2); font-size: 12.5px; margin-top: 3px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.chip.ok { background: var(--verde-chiaro); color: var(--verde-2); }
.chip.avviso { background: #FDF3E1; color: #B5761C; }
.chip.errore { background: #FCE9E7; color: #B8423A; }
.chip.info { background: var(--azzurro); color: var(--blu); }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini div { background: #F6FAFA; border: 1px solid #EAF1F1; border-radius: 10px; padding: 8px 10px; }
.mini small { display: block; font-size: 11px; color: var(--testo-2); }
.mini b { font-family: var(--font-titoli); font-size: 16px; font-weight: 600; color: var(--ink); }
.vuoto { color: var(--muto); text-align: center; padding: 40px 0; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 12.5px; font-weight: 600; color: var(--testo-2); }
.campo input, .nuova-attivita select { height: 44px; border: 1px solid var(--bordo-2); border-radius: 10px; padding: 0 12px; font: 400 15px var(--font-testo); color: var(--testo); background: #fff; }
.campo input:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(1,85,112,.12); }
.errore-campo { color: #B8423A; font-size: 12.5px; }

/* ---------- login ---------- */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(900px 600px at 85% 10%, rgba(90,176,72,.18), transparent 60%), radial-gradient(1000px 700px at 0% 100%, rgba(1,85,112,.18), transparent 60%), var(--sfondo); }
.accesso .card { width: min(400px, 100%); padding: 32px 28px; box-shadow: var(--ombra-forte); }
.accesso img { height: 44px; display: block; margin: 0 auto 18px; }
.accesso h1 { font-size: 18px; text-align: center; }
.accesso .azienda { text-align: center; color: var(--testo-2); font-size: 13px; margin: 4px 0 22px; }
.accesso .ricorda { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--testo-2); margin: -4px 0 18px; }
.accesso .link-sotto { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--blu); text-decoration: none; }
.accesso .link-sotto:hover { text-decoration: underline; }
.accesso .spiega { font-size: 13.5px; color: var(--testo-2); margin: -8px 0 16px; text-align: center; }
.accesso .avviso { font-size: 13px; }
.accesso input[readonly] { background: var(--sfondo); color: var(--testo-2); }

/* ---------- mappa vasche ---------- */
.mappa-pagina { display: flex; gap: 16px; align-items: flex-start; }
.mappa-wrap { flex: 1; min-width: 0; position: relative; border-radius: var(--raggio); border: 1px solid var(--bordo); overflow: auto; min-height: 560px;
  background: radial-gradient(circle at 1px 1px, #CFDFE0 1px, transparent 1.3px) 0 0/20px 20px, linear-gradient(180deg, #F0F6F6, #E9F2F2); }
.mappa { position: relative; transform-origin: 0 0; margin: 16px; }
.area { position: absolute; background: rgba(255,255,255,.78); border: 1px solid var(--bordo-2); border-radius: 16px; box-shadow: var(--ombra); }
.area-testa { position: absolute; left: 14px; top: 10px; right: 14px; display: flex; align-items: center; gap: 8px; font: 600 12.5px var(--font-titoli); color: var(--ink); pointer-events: none; }
.area-temp { margin-left: auto; font: 600 12px var(--font-testo); color: var(--blu); background: var(--azzurro); padding: 2px 8px; border-radius: 999px; }
.vasca { position: absolute; border-radius: 12px; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; box-shadow: inset 0 0 0 1px rgba(7,63,84,.12), 0 2px 6px rgba(7,63,84,.08); transition: transform .12s ease, box-shadow .12s ease; }
.vasca:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(7,63,84,.2), 0 8px 18px rgba(7,63,84,.16); }
.vasca.rettangolo { border-radius: 3px; } .vasca.ellisse { border-radius: 50%; }
.vasca.vuota { background: repeating-linear-gradient(135deg, #F3F6F6 0 8px, #ECF1F1 8px 16px) !important; }
.vasca.selezionata { box-shadow: 0 0 0 3px var(--blu), 0 8px 24px rgba(1,85,112,.3); }
.vasca .cod { position: absolute; left: 9px; top: 7px; font: 600 12px var(--font-titoli); color: var(--ink); }
.vasca.vuota .cod { color: var(--muto); }
.vasca .tag { position: absolute; bottom: 7px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.vasca .tag.taglia { left: 8px; color: var(--ink); background: rgba(255,255,255,.85); }
.vasca .tag.kg { right: 8px; color: #fff; background: rgba(7,63,84,.78); }
.vasca .rating { position: absolute; right: 8px; top: 7px; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.85); color: var(--ink); }
.vasca svg.pesci { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.etichetta-esterna { position: absolute; font: 600 11px var(--font-titoli); color: var(--ink); display: flex; align-items: center; justify-content: center; pointer-events: none; white-space: nowrap; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; background: #fff; border: 1px solid var(--bordo); border-radius: 12px; padding: 9px 14px; box-shadow: var(--ombra); font-size: 12px; color: var(--testo-2); margin-top: 12px; }
.legenda span { display: flex; align-items: center; gap: 6px; } .legenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.scheda-vasca { width: 330px; flex: none; position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; }
.scheda-vasca .titolo { display: flex; justify-content: space-between; align-items: flex-start; }
.scheda-vasca .titolo small { font-size: 11.5px; color: var(--muto); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.scheda-vasca .titolo b { display: block; font: 600 26px/1.1 var(--font-titoli); color: var(--ink); }
.barra-stato { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--testo-2); margin-top: 10px; }
.barra-stato .pill { background: #fff; border: 1px solid var(--bordo); border-radius: 999px; padding: 3px 10px; color: var(--testo); }

@media (max-width: 1100px) {
  .scheda-vasca { display: none; }
  .scheda-vasca.aperta { display: flex; position: fixed; right: 12px; top: 80px; z-index: 30; box-shadow: var(--ombra-forte); }
}
@media (max-width: 760px) {
  .side { display: none; }
  .top { padding: 0 16px; } .corpo { padding: 16px; }
  .top .sotto { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vasca { transition: none; } }

/* ===================== Finestre della giornata in vasca =====================
   Classi delle finestre portate da allevamento.php di TT Manager (stessi nomi,
   così il JavaScript portato non cambia), disegnate con i colori di Faunis. */
.ovl { position: fixed; inset: 0; background: rgba(7,63,84,.32); backdrop-filter: blur(2px); z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow: auto; }
.ovl.on { display: flex; }
.win { background: var(--card); color: var(--testo); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-forte); width: min(980px, 100%); font: 13px var(--font-testo); overflow: hidden; }
.win.largo { width: min(1250px, 100%); }
.win.stretto { width: min(560px, 100%); }
.win-tit { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--bordo); background: linear-gradient(180deg, #fff, var(--sfondo)); }
.win-tit b { flex: 1; font: 600 15px var(--font-titoli); color: var(--ink); }
.win-x { width: 32px; height: 32px; border: none; background: none; border-radius: 9px; color: var(--testo-2); font-size: 16px; cursor: pointer; }
.win-x:hover { background: #FCE9E7; color: var(--rosso); }
.win-body { padding: 16px 18px; max-height: 80vh; overflow: auto; }
.win fieldset { border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 12px 6px; margin-bottom: 10px; }
.win legend { padding: 0 6px; font: 600 12px var(--font-titoli); color: var(--blu); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 170px; gap: 12px; }
.fr { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.fr label, .fr > span { color: var(--testo-2); }
.btn-col { display: flex; flex-direction: column; gap: 7px; }
.in { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--bordo-2); border-radius: 9px; background: #fff; color: var(--testo); font: 13px var(--font-testo); }
textarea.in { height: auto; min-height: 70px; padding: 8px 10px; resize: vertical; }
.in:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(1,85,112,.12); }
.in:disabled, .in[readonly] { background: var(--sfondo); color: var(--testo-2); }
.in.pre { background: #FDF8EC; }
.btnw { min-width: 90px; height: 34px; padding: 0 14px; border: 1px solid var(--bordo-2); border-radius: 9px; background: #fff; color: var(--testo); font: 500 13px var(--font-testo); cursor: pointer; }
.btnw:hover { border-color: var(--blu); color: var(--blu); }
.btnw.pri { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(90,176,72,.25); }
.btnw.pri:hover { background: var(--verde-2); color: #fff; }
.btnw:disabled { background: var(--sfondo); border-color: var(--bordo); color: var(--muto); box-shadow: none; cursor: not-allowed; }
.specie { font: 600 17px var(--font-titoli); color: var(--blu); text-align: right; margin: 2px 0 6px; }
.avviso { background: #FDF3E1; border: 1px solid #F1D29B; color: #7A4F12; border-radius: 10px; padding: 8px 11px; margin-bottom: 10px; }
.errore { background: #FCE9E7; border: 1px solid #F2BDB8; color: #8E2F28; border-radius: 10px; padding: 8px 11px; margin-bottom: 10px; }
.firma { background: var(--azzurro); border: 1px solid #CFE3EA; color: var(--testo-2); border-radius: 10px; padding: 6px 10px; margin-bottom: 10px; font-size: 12px; }
.firma b { color: var(--ink); } .firma a { margin-left: 8px; color: var(--blu); }
.nota { font-size: 11.5px; color: var(--muto); margin-top: 8px; }
.codice { font-family: var(--font-codici); font-weight: 700; color: var(--verde-2); }
.percorso { font: 600 11px var(--font-testo); color: var(--testo-2); letter-spacing: .06em; }
.solo-admin { display: none; }
.wv-head { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wv-head > div { background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 12px; padding: 7px 14px; min-width: 110px; }
.wv-head small { display: block; color: var(--muto); font-size: 11px; }
.wv-head b { font: 600 15px var(--font-titoli); color: var(--ink); }
.wv-head .wvh-big b { font-size: 19px; color: var(--blu); }
.wv-head .wvh-q { display: flex; gap: 10px; align-items: center; }
.wv-head .wvh-q i { width: 14px; height: 28px; border-radius: 4px; }
.wv-head .wvh-salm { cursor: pointer; border-color: #F4ABA3; background: #FDF1EF; }
.wv-head em { font-size: 10.5px; color: var(--muto); margin-left: 4px; }
.compbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bordo); margin: 4px 0 6px; }
.rt-barra { display: flex; height: 14px; border-radius: 5px; overflow: hidden; min-width: 160px; background: var(--bordo); }
.grid { width: 100%; border-collapse: collapse; font: 12.5px var(--font-testo); }
.grid th { position: sticky; top: 0; z-index: 1; background: var(--azzurro); color: var(--ink); font-weight: 600; font-size: 11.5px; padding: 7px 8px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--bordo-2); }
.grid td { padding: 5px 8px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.grid td.n { text-align: right; font-variant-numeric: tabular-nums; }
.grid tbody tr:hover td { background: #F6FAFB; }
.grid tr.tot td { background: var(--sfondo) !important; font-weight: 700; }
.grid .in { height: 28px; padding: 0 6px; }
.scrollg { max-height: 52vh; overflow: auto; border: 1px solid var(--bordo); border-radius: 12px; }
.mort-tab input.in { width: 90px; text-align: right; }
.reg-tab td.az { text-align: right; }
.btn-ann { min-width: 0; height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid #F1D29B; background: #FDF3E1; color: #7A4F12; font-weight: 600; cursor: pointer; }
.btn-ann[disabled] { opacity: .45; cursor: not-allowed; }
.badge-manca { background: #FCE9E7; color: #B8423A; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.conf-kpi { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.conf-kpi > div { flex: 1; min-width: 130px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--testo-2); }
.conf-kpi b { display: block; font: 600 17px var(--font-titoli); color: var(--ink); }
.wc-oggi { display: flex; gap: 8px; margin-bottom: 10px; }
.wc-oggi > div { flex: 1; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 10px; padding: 6px 10px; font-size: 11.5px; color: var(--testo-2); }
.wc-oggi b { display: block; font-size: 14px; color: var(--ink); }
.wc-modi { display: flex; gap: 16px; margin-bottom: 8px; }
.salm-catena { margin-top: 8px; }
/* menu della vasca (tasto destro) */
.ctx { position: fixed; z-index: 400; display: none; width: 290px; padding: 0 0 6px; background: #fff; border: 1px solid var(--bordo); border-radius: 14px; box-shadow: var(--ombra-forte); font: 13px var(--font-testo); overflow: hidden; }
.ctx button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.ctx button svg { width: 16px; height: 16px; flex: none; color: var(--blu); }
.ctx button:disabled { color: var(--muto); cursor: default; }
.ctx button:disabled svg { color: var(--muto); }
.ctx-testa { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--azzurro); border-bottom: 1px solid var(--bordo); }
.ctx-testa i { width: 12px; height: 34px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.ctx-testa i.vuota { background: repeating-linear-gradient(135deg, #fff 0 4px, var(--bordo) 4px 6px); }
.ctx-testa b { display: block; font: 600 14px var(--font-titoli); color: var(--ink); }
.ctx-testa small { display: block; color: var(--testo-2); font-size: 11.5px; margin-top: 1px; }
.ctx-rapide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 8px 6px; border-bottom: 1px solid var(--bordo); }
.ctx .rap { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 2px; border-radius: 10px; font-size: 11px; font-weight: 500; text-align: center; }
.ctx .rap svg { width: 19px; height: 19px; }
.ctx .rap:hover:not(:disabled) { background: var(--azzurro); color: var(--blu); }
.ctx-gruppo { padding: 4px 6px 0; }
.ctx-gruppo + .ctx-gruppo { border-top: 1px solid var(--bordo); margin-top: 4px; padding-top: 6px; }
.ctx-tit { padding: 2px 8px 3px; font: 600 10.5px var(--font-testo); letter-spacing: .06em; text-transform: uppercase; color: var(--muto); }
.ctx .it { padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.ctx .it:hover:not(:disabled) { background: var(--azzurro); color: var(--blu); }
.ctx-gruppo.due { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2px; }
.ctx-gruppo.due .ctx-tit { grid-column: 1 / -1; }
.ctx-gruppo.due .it { font-size: 12.5px; }
.ctx .rosso, .ctx .rosso svg { color: #C2412D; }
.ctx .rosso:hover:not(:disabled) { background: #FCE9E7; color: #C2412D; }
/* messaggi e barra del giorno */
.toast { position: fixed; right: 20px; bottom: 24px; z-index: 300; display: none; max-width: 420px; padding: 11px 14px; background: #fff; border: 1px solid var(--bordo); border-left: 4px solid var(--verde); border-radius: 12px; box-shadow: var(--ombra-forte); font: 13px var(--font-testo); }
.toast.err { border-left-color: var(--rosso); }
.tb-agg { display: inline-flex; flex-direction: column; justify-content: center; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid; background: #fff; font: 600 12px var(--font-testo); line-height: 1.15; cursor: pointer; }
.tb-agg small { font-weight: 400; font-size: 10.5px; opacity: .85; }
.tb-agg.ok { color: var(--verde-2); border-color: #BFE0B4; background: var(--verde-chiaro); }
.tb-agg.medio { color: #B5761C; border-color: #F1D29B; background: #FDF8EC; }
.tb-agg.vecchio { color: #B8423A; border-color: #F2BDB8; background: #FCE9E7; }
.giorno { display: inline-flex; align-items: center; gap: 4px; }
.giorno input[type=date] { height: 38px; padding: 0 10px; border: 1px solid var(--bordo-2); border-radius: 10px; font: 13px var(--font-testo); color: var(--testo); }
.agg-banner, .ro-banner { display: none; margin-bottom: 12px; padding: 9px 14px; border-radius: 12px; background: #FDF3E1; border: 1px solid #F1D29B; color: #7A4F12; font-size: 12.5px; }
.agg-banner b { color: var(--ink); }
.agg-banner button { margin-left: 8px; height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid #E5B964; background: #fff; color: #7A4F12; cursor: pointer; }
.vasca.sel { outline: 3px solid var(--ink); outline-offset: 2px; z-index: 2; }
@media (max-width: 900px) { .g2, .g3 { grid-template-columns: 1fr; } .fr { grid-template-columns: 120px 1fr; } }
@media print { .noprint, .side, .top, .ctx, .toast { display: none !important; } .ovl.stampa { position: static; background: none; padding: 0; } .ovl:not(.stampa) { display: none !important; } .win { box-shadow: none; border: none; } }
.barra-giornata { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.barra-giornata .spazio { flex: 1; }
.btn-ann.conferma { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.grid tr.annullata td { color: var(--muto); text-decoration: line-through; text-decoration-color: rgba(140,160,169,.5); }
.grid tr.annullata td.az { text-decoration: none; }
.area-temp { cursor: pointer; pointer-events: auto; }   /* l'intestazione dell'area ha pointer-events: none (trascinamento): la temperatura invece si clicca */
.area-temp:hover { background: var(--blu); color: #fff; }
.area-temp.vecchia { opacity: .6; font-style: italic; }
/* trote che nuotano avanti e indietro (da allevamento.php); ferme per chi ha chiesto meno animazioni al sistema */
.vasca .pesci { overflow: hidden; border-radius: inherit; }
.vasca .pesci use { transform-box: fill-box; transform-origin: center; }
.vasca .pesci .nuota { animation: nuoto var(--d, 7s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
@keyframes nuoto { from { transform: translateX(calc(var(--a, 4px) * -1)); } to { transform: translateX(var(--a, 4px)); } }
@media (prefers-reduced-motion: reduce) { .vasca .pesci .nuota { animation: none; } }
.avviso.ok { background: var(--verde-chiaro); border-color: #BFE0B4; color: var(--verde-2); }

/* ============ Finestre di semina, movimenti, pesca, selezione, arrivi, tracciabilità ============
   Classi di allevamento.php (TT Manager) con i colori di Faunis. Dove TT Manager aveva colori pensati
   per il tema scuro si usano quelli della sua versione per la stampa, che è chiara come Faunis. */
.kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12.5px; }
.kv span:nth-child(odd) { color: var(--testo-2); }
.kv span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
.kv .dopo { color: var(--blu); font-weight: 700; }
.mov-col { background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 12px; }
.mov-col h4 { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 600 13px var(--font-titoli); color: var(--ink); }
.mov-col h4 i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--bordo-2); }
.tipo-mov { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 6px; }
.tipo-mov label { display: flex; gap: 6px; align-items: center; }
.box { background: var(--card); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
#wsi-body tr.area-riga td, #wa-body tr.area-riga td { background: var(--azzurro) !important; color: var(--ink); border-top: 2px solid var(--blu); font: 600 11.5px var(--font-testo); letter-spacing: .06em; text-transform: uppercase; padding: 7px 10px; }
#wsi-body tr.area-riga td span, #wa-body tr.area-riga td span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--testo-2); margin-left: 10px; }
.dest-scelta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.dest { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px 46px; border: 1px solid var(--bordo-2); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.dest input { position: absolute; opacity: 0; }
.dest .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 22px; }
.dest b { color: var(--ink); font-size: 13.5px; }
.dest small { color: var(--muto); font-size: 11.5px; }
.dest:hover { border-color: var(--blu); }
.dest.on { border-color: var(--verde); background: var(--verde-chiaro); box-shadow: 0 0 0 1px var(--verde) inset; }
.pesca-kg { display: flex; gap: 12px; align-items: flex-end; margin-top: 8px; }
.in.big { height: 46px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chk-tot { display: flex; flex-direction: column; padding: 6px 12px; border: 1px dashed var(--bordo-2); border-radius: 10px; cursor: pointer; font-weight: 600; }
.chk-tot small { color: var(--muto); font-weight: 400; font-size: 11px; }
.chk-tot:has(input:checked) { border: 1px solid var(--warn); background: var(--prop); }
.lotto-vendita { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px; margin-bottom: 10px; border-radius: 14px; background: var(--verde-chiaro); border: 2px solid var(--verde); }
.lotto-vendita small { color: var(--verde-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.lotto-vendita span { font: 700 30px var(--font-codici); color: var(--ink); letter-spacing: .06em; }
.lotto-vendita em { font-style: normal; color: var(--testo-2); font-size: 12px; }
.kv-pesca { grid-template-columns: 1fr auto auto auto; font-size: 13px; gap: 6px 10px; }
.kv-pesca .h { color: var(--muto); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.kv-pesca .v { text-align: right; font-variant-numeric: tabular-nums; }
.kv-pesca .d { color: var(--blu); font-weight: 700; }
.tot-dest { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.tot-dest div { min-width: 170px; padding: 8px 14px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 12px; }
.tot-dest small { display: block; color: var(--muto); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.tot-dest b { font: 600 17px var(--font-titoli); color: var(--ink); }
.cert-link { color: var(--blu); font-weight: 600; text-decoration: none; white-space: nowrap; }
.btnw.x { min-width: 0; height: 28px; padding: 0 9px; }
.sel-head { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sel-head > div { padding: 6px 12px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 10px; font-size: 12px; color: var(--testo-2); }
.sel-head b { display: block; font: 600 16px var(--font-titoli); color: var(--ink); }
#wse-body tr.resta td { background: var(--azzurro); }
.rep-leg { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0; font-size: 11px; color: var(--testo-2); }
.rep-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.solo-stampa { display: none; }
.graf-box { position: relative; padding: 6px; background: #fff; border: 1px solid var(--bordo); border-radius: 12px; }
/* trascinamento vasca su vasca = movimento */
.ghost { position: fixed; z-index: 450; pointer-events: none; opacity: .75; border: 2px dashed var(--blu); border-radius: 10px; box-shadow: var(--ombra-forte); }
.vasca.drag-src { opacity: .55; }
.vasca.drop-ok { outline: none !important; box-shadow: 0 0 0 3px var(--ambra), 0 0 22px rgba(233,162,59,.6) !important; z-index: 5; }
/* pesce in arrivo da altri impianti: barra lampeggiante e vasche dove si può seminare */
.arrivi { display: none; margin-bottom: 12px; padding: 9px 14px; border-radius: 12px; background: var(--azzurro); border: 1px solid #CFE3EA; }
.arrivo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 3px 0; font-size: 13px; color: var(--testo); }
.arrivo b { color: var(--ink); }
.arrivo .codice { font-size: 14px; }
.arrivo.futuro { opacity: .7; }
.arrivi.lampeggia { padding: 12px 16px; background: #FDF3E1; border: 2px solid var(--ambra); animation: arrivoLuce 1.1s ease-in-out infinite; }
.arrivi.lampeggia .arrivo { font-size: 14.5px; }
.arrivi.lampeggia .arr-tit { display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 7px; background: var(--ambra); color: #3A2402; font: 700 12.5px var(--font-testo); letter-spacing: .08em; animation: arrivoTit 1.1s steps(2, jump-none) infinite; }
.arrivi.lampeggia .btnw.pri { animation: arrivoBtn 1.1s ease-in-out infinite; }
#sel-imp.arrivi-on { border-color: var(--ambra); animation: arrivoBtn 1.1s ease-in-out infinite; }
.vasca.semina-ok { box-shadow: 0 0 0 3px var(--blu), 0 0 18px rgba(1,85,112,.45) !important; cursor: copy; }
@keyframes arrivoLuce { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(233,162,59,0); } 50% { box-shadow: inset 0 0 22px 2px rgba(233,162,59,.45); } }
@keyframes arrivoTit { 0% { opacity: 1; } 100% { opacity: .3; } }
@keyframes arrivoBtn { 0%, 100% { box-shadow: 0 0 0 0 rgba(90,176,72,0); } 50% { box-shadow: 0 0 0 6px rgba(90,176,72,.4); } }
@media (prefers-reduced-motion: reduce) { .arrivi.lampeggia, .arrivi.lampeggia .arr-tit, .arrivi.lampeggia .btnw.pri, #sel-imp.arrivi-on { animation: none; } }
/* tracciabilità */
.st-cerca { display: flex; gap: 8px; margin-bottom: 12px; }
.st-cerca .in { flex: 1; }
.st-vuoto { padding: 40px; text-align: center; color: var(--muto); }
.st-head { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; margin-bottom: 12px; }
.st-id { min-width: 260px; padding: 14px 18px; border-radius: 14px; background: var(--verde-chiaro); border: 2px solid var(--verde); }
.st-id small { display: block; color: var(--verde-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.st-id b { display: block; margin: 2px 0; font: 700 28px var(--font-codici); color: var(--ink); letter-spacing: .04em; }
.st-id span { color: var(--testo-2); font-size: 12.5px; }
.st-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; flex: 1; }
.st-kpi div { padding: 8px 12px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 12px; }
.st-kpi small { display: block; color: var(--muto); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.st-kpi b { font: 600 16px var(--font-titoli); color: var(--ink); }
.st-sez { margin-bottom: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--bordo); border-radius: 14px; }
.st-sez h4 { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font: 600 12.5px var(--font-titoli); color: var(--blu); letter-spacing: .06em; text-transform: uppercase; }
.st-sez h4 small { color: var(--muto); text-transform: none; letter-spacing: 0; font-weight: 400; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; }
.st-albero { overflow: auto; max-height: 62vh; border-radius: 10px; background: radial-gradient(circle at 1px 1px, rgba(7,63,84,.08) 1px, transparent 1.4px) 0 0 / 16px 16px, #fff; border: 1px solid var(--bordo); }
.st-albero svg { display: block; }
.st-albero svg text { fill: var(--testo); }
.st-albero svg text + text { fill: var(--testo-2); }
.st-albero svg rect.box { fill: #fff; }
.st-nodo { cursor: pointer; }
.st-nodo:hover rect.box { stroke: var(--blu); stroke-width: 2; }
.st-uova { display: flex; gap: 10px; flex-wrap: wrap; }
.st-uovo { flex: 1; min-width: 230px; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: 12px; background: var(--prop); }
.st-uovo b { font: 700 16px var(--font-codici); color: var(--warn); }
.st-uovo .pct { float: right; font: 700 20px var(--font-titoli); color: var(--ink); }
.st-uovo .barra { height: 6px; margin: 6px 0; border-radius: 6px; background: var(--bordo); overflow: hidden; }
.st-uovo .barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--ambra), #F5CF7A); }
.st-uovo div { font-size: 12px; color: var(--testo-2); }
.st-crono { position: relative; padding-left: 22px; max-height: 48vh; overflow: auto; }
.st-crono::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--bordo-2); }
.st-ev { position: relative; padding: 4px 0 8px; font-size: 12.5px; color: var(--testo); }
.st-ev::before { content: ''; position: absolute; left: -19px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--blu)); box-shadow: 0 0 0 3px #fff; }
.st-ev time { margin-right: 8px; color: var(--muto); font-variant-numeric: tabular-nums; }
.st-ok { color: var(--verde-2); }
.st-ko { color: #B8423A; }
@media (max-width: 900px) { .dest-scelta { grid-template-columns: 1fr 1fr; } .st-grid { grid-template-columns: 1fr; } }

/* ===== Schede principali, Magazzino mangime e Impostazioni (passo 5, stessi id e classi di allevamento.php) ===== */
.fm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bordo-2); margin: -6px 0 14px; }
.fm-tab { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid transparent; border-bottom: none; border-radius: 12px 12px 0 0; background: none; color: var(--testo-2); font: 500 13.5px var(--font-testo); cursor: pointer; position: relative; top: 1px; }
.fm-tab svg { width: 17px; height: 17px; }
.fm-tab:hover { color: var(--blu); }
.fm-tab.on { background: var(--card); color: var(--ink); font-weight: 600; border-color: var(--bordo-2); border-bottom: 1px solid var(--card); }
.fm-tab.on::after { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px; background: var(--verde); }
.vista { display: none; }
.vista.on { display: block; }
.pann { color: var(--testo); font: 13px var(--font-testo); }
.pann .box { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 16px; box-shadow: var(--ombra); margin-bottom: 14px; }
.pann h3 { font: 600 15px var(--font-titoli); color: var(--ink); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pann .sub { font-size: 12.5px; color: var(--testo-2); margin-bottom: 10px; }
.pann .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pann .fr { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.sep-sott { border-top: 1px solid var(--bordo); margin: 12px 0 8px; }
.badge-ok { background: var(--verde-chiaro); color: var(--verde-2); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.avviso.ok { background: var(--verde-chiaro); border-color: #CDE6C4; color: var(--verde-2); }
.agg-pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 12px; border: 1px solid; }
.agg-pill.ok { color: var(--verde-2); border-color: #CDE6C4; background: var(--verde-chiaro); }
.agg-pill.medio { color: #8A5A12; border-color: #F1D29B; background: #FDF3E1; }
.agg-pill.vecchio { color: #8E2F28; border-color: #F2BDB8; background: #FCE9E7; }
/* silos e sacchi */
.mag-graf { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; padding: 8px 4px 4px; }
.silo { width: 118px; text-align: center; font-size: 12px; color: var(--testo-2); }
.silo svg { display: block; margin: 0 auto; }
.silo .nome { font-weight: 600; color: var(--ink); margin-top: 4px; min-height: 30px; }
.silo .kg { color: var(--testo-2); }
.sacchi-area { display: flex; flex-wrap: wrap; gap: 18px; padding: 6px 2px; }
.pila { min-width: 200px; max-width: 330px; }
.pila .tit { font-weight: 600; font-size: 12px; color: var(--ink); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.pila .tit i { width: 12px; height: 12px; border: 1px solid rgba(7,63,84,.4); border-radius: 3px; display: inline-block; }
.pila .sacchi { display: flex; flex-wrap: wrap; gap: 2px; max-width: 330px; }
.pila .info { font-size: 11px; color: var(--testo-2); margin-top: 3px; }
.leg-mangimi { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; align-items: center; }
.leg-mangimi label { display: flex; align-items: center; gap: 5px; color: var(--testo-2); }
.leg-mangimi input[type=color], .grid input[type=color] { width: 24px; height: 20px; padding: 0; border: 1px solid var(--bordo-2); border-radius: 5px; background: none; cursor: pointer; }
.corr { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 3px 0 4px; font-weight: 400; }
.corr button { width: 26px; height: 22px; border-radius: 7px; border: 1px solid var(--bordo-2); background: var(--card); color: var(--ink); font: 700 14px/1 var(--font-testo); cursor: pointer; padding: 0; }
.corr button:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.corr .pend { font-size: 11px; font-weight: 700; color: var(--warn); min-width: 0; }
.pila .corr { justify-content: flex-start; }
/* FAUNIS: modulo per scrivere a mano i DDT del mangime */
.nuovo-ddt { display: grid; grid-template-columns: 130px 90px 140px minmax(160px, 1fr) 80px 130px 150px auto; gap: 8px; align-items: end; margin-bottom: 10px; padding: 10px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 12px; }
.nuovo-ddt label { display: block; font-size: 11.5px; color: var(--testo-2); margin-bottom: 3px; }
.nuovo-ddt .in { width: 100%; }
.nuovo-ddt .btnw { white-space: nowrap; }
@media (max-width: 1100px) { .nuovo-ddt { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nuovo-ddt .largo, .nuovo-ddt .azione { grid-column: 1 / -1; } }
@media (max-width: 900px) { .pann .row2 { grid-template-columns: minmax(0, 1fr); } .fm-tab { font-size: 12px; padding: 7px 10px; } .silo { width: 100px; } }

/* ===== Trattamenti sulla mappa (FAUNIS): vasca in cura o in sospensione, con il conto alla rovescia ===== */
.vasca.sosp { box-shadow: inset 0 0 0 2.5px var(--rosso), 0 2px 6px rgba(7,63,84,.08); }
.vasca.sosp.selezionata { box-shadow: 0 0 0 3px var(--blu), inset 0 0 0 2.5px var(--rosso), 0 8px 24px rgba(1,85,112,.3); }
.vasca.sosp::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(135deg, rgba(222,91,82,.0) 0 9px, rgba(222,91,82,.16) 9px 13px); }
.vasca.sosp.cura::after { background: repeating-linear-gradient(135deg, rgba(222,91,82,.08) 0 7px, rgba(222,91,82,.28) 7px 11px); }
.sosp-badge { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px 1px 1px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 1px 4px rgba(7,63,84,.18); white-space: nowrap; }
.sosp-badge:not(:has(b)) { padding-right: 1px; }
.sosp-badge b { font: 600 11px var(--font-testo); color: #8E2F28; }
.sosp-badge svg { display: block; }
.sosp-badge .sosp-fondo { fill: #fff; stroke: #F2BDB8; stroke-width: 3; }
.sosp-badge .sosp-arco { fill: none; stroke: var(--rosso); stroke-width: 3; stroke-linecap: round; }
.sosp-badge text { font: 700 9px var(--font-testo); fill: #8E2F28; text-anchor: middle; }
.leg-sosp { background: repeating-linear-gradient(135deg, #fff 0 3px, rgba(222,91,82,.45) 3px 5px) !important; border: 1.5px solid var(--rosso) !important; }
/* FAUNIS: lettura dei documenti con Claude */
.leggi-doc { display: flex; align-items: center; gap: 12px; margin: -2px 0 12px; font-size: 12.5px; color: var(--testo-2); flex-wrap: wrap; }
.ddt-letto { grid-template-columns: 140px 110px minmax(160px, 1fr) 130px minmax(160px, 1fr); }

/* ===== Report (passo 6, stesse classi di allevamento.php) ===== */
.rep-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rep-card { background: var(--card); border: 1px solid var(--bordo); border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.rep-card:hover { border-color: var(--verde); transform: translateY(-2px); box-shadow: var(--ombra); }
.rep-card .ico { font-size: 26px; }
.rep-card b { display: block; font: 600 15px var(--font-titoli); color: var(--ink); margin: 4px 0; }
.rep-card p { font-size: 12.5px; color: var(--testo-2); line-height: 1.4; margin: 0; }
.rep-kpi { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.rep-kpi > div { flex: 1; min-width: 120px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--testo-2); }
.rep-kpi b { display: block; font-size: 18px; color: var(--ink); }
.rep-sez { margin: 14px 0 6px; font: 600 14px var(--font-titoli); color: var(--ink); border-left: 3px solid var(--verde); padding-left: 8px; }
.rep-nota { font-size: 11.5px; color: var(--muto); margin: 4px 0 8px; }
.barra-cl { display: flex; height: 12px; border-radius: 4px; overflow: hidden; min-width: 140px; background: var(--sfondo); box-shadow: inset 0 0 0 1px var(--bordo); }
.barra-cl i { display: block; height: 100%; }
@media print {
  .barra-cl { border: 1px solid #999; }
  /* con una finestra aperta si stampa solo quella, non la pagina sotto */
  body:has(.ovl.on.stampa) .vista, body:has(.ovl.on.stampa) .fm-tabs { display: none !important; }
  @page { size: A4 landscape; margin: 10mm; }   /* come TT Manager */
}

/* ===== Pagina OPERATORI (PC d'impianto e telefono): classi di allevamento-op.php, tutte sotto body.op ===== */
body.op { background: var(--sfondo); color: var(--testo); font: 15px var(--font-testo); margin: 0; }
.op * { box-sizing: border-box; }
.op a { color: var(--blu); }
.op .hdr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--bordo); }
.op .logo-op { width: 30px; height: 30px; }
.op .hdr .tit { font: 600 18px var(--font-titoli); color: var(--ink); }
.op .hdr .tit span { color: var(--verde-2); }
.op .hdr select, .op .hdr .giorni button { font: 15px var(--font-testo); padding: 7px 12px; border-radius: 9px; border: 1px solid var(--bordo-2); background: #fff; color: var(--testo); }
.op .giorni button.on { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.op .hdr .utente { margin-left: auto; color: var(--testo-2); font-size: 13px; }
.op .hdr .esci { border: none; background: none; color: var(--blu); font: inherit; cursor: pointer; text-decoration: underline; padding: 0 0 0 6px; }
.op .tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 4; }
.op .tabs button { flex: 1; padding: 12px 6px; font: 500 15px var(--font-testo); background: none; border: none; border-bottom: 3px solid transparent; color: var(--testo-2); cursor: pointer; }
.op .tabs button.on { color: var(--ink); border-bottom-color: var(--verde); font-weight: 600; }
@media (max-width: 440px) { .op .tabs button { font-size: 13px; padding: 12px 2px; white-space: nowrap; } }
.op .pagina { padding: 12px 14px 90px; max-width: 1200px; margin: 0 auto; }
.op .avviso { background: #FDF3E1; border: 1px solid #F1D29B; color: #7A4F12; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; }
.op .errore { background: #FCE9E7; border: 1px solid #F2BDB8; color: #8E2F28; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; }
.op .area { position: static; margin: 14px 0 6px; padding: 7px 10px; background: var(--azzurro); border: none; border-left: 4px solid var(--blu); border-radius: 8px; box-shadow: none;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; color: var(--ink); }
.op .area span { font-weight: 400; text-transform: none; color: var(--testo-2); margin-left: 8px; letter-spacing: 0; }
.op table.t { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--ombra); }
.op table.t th { background: var(--azzurro); color: var(--ink); font-size: 13px; font-weight: 600; padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--bordo-2); }
.op table.t td { padding: 6px; border-bottom: 1px solid var(--bordo); font-size: 14px; vertical-align: middle; }
.op table.t td.n { text-align: right; white-space: nowrap; }
.op table.t tr.fatto td { background: var(--verde-chiaro); }
.op .q { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(7,63,84,.35); vertical-align: middle; margin-right: 5px; }
.op input.in, .op select.in { height: auto; font: 15px var(--font-testo); padding: 7px 8px; border-radius: 8px; border: 1px solid var(--bordo-2); background: #fff; color: var(--testo); width: 100%; }
.op input.in:focus, .op select.in:focus { outline: 2px solid var(--blu); outline-offset: 0; border-color: var(--blu); }
.op input.kg { width: 100px; text-align: right; font-weight: 700; }
.op input.pre { color: #A16207; font-style: italic; border-color: #E9A23B; background: #FFF9EE; }
.op .btn { height: auto; display: inline-block; font: 600 15px var(--font-testo); padding: 9px 16px; border-radius: 10px; border: 1px solid var(--bordo-2); background: #fff; color: var(--testo); cursor: pointer; }
.op .btn.pri { background: var(--verde); border-color: var(--verde-2); color: #fff; }
.op .btn.pri[disabled] { background: var(--bordo); border-color: var(--bordo); color: var(--muto); cursor: default; }
.op .barra { position: fixed; left: 0; right: 0; bottom: 0; height: auto; background: var(--card); border-top: 1px solid var(--bordo); padding: 10px 14px; display: flex; gap: 10px; align-items: center; z-index: 5; box-shadow: 0 -4px 16px rgba(7,63,84,.08); }
.op .barra .info { flex: 1; color: var(--testo-2); font-size: 13px; }
.op .toast { position: fixed; left: 50%; right: auto; top: 14px; bottom: auto; transform: translateX(-50%); background: #fff; border: 1px solid var(--verde); border-left: 4px solid var(--verde); color: var(--testo);
  padding: 10px 16px; border-radius: 10px; z-index: 20; display: none; max-width: 92%; box-shadow: var(--ombra-forte); }
.op .toast.err { border-color: var(--rosso); }
.op .prop { color: #A16207; cursor: pointer; text-decoration: underline dotted; }
.op .griglia { display: flex; flex-wrap: wrap; gap: 8px; }
.op .vasca { position: static; width: 150px; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--bordo-2); cursor: pointer; overflow: visible; box-shadow: none; }
.op .vasca b { font-size: 16px; color: var(--ink); }
.op .vasca small { display: block; color: var(--testo-2); font-size: 12px; margin-top: 2px; }
.op .vasca.vuota { opacity: .5; cursor: default; background: var(--sfondo) !important; }
.op .vasca.sel { border-color: var(--verde); box-shadow: 0 0 0 2px var(--verde); outline: none; }
.op .pannello { margin-top: 12px; background: var(--card); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px; box-shadow: var(--ombra); }
.op .riga { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 8px 0; }
.op .riga label { display: block; font-size: 12px; color: var(--testo-2); margin-bottom: 3px; }
/* telefono: schede */
.op .card { background: var(--card); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: none; }
.op .card.fatto { border-color: #9FD08F; background: var(--verde-chiaro); }
.op .card .top { display: flex; align-items: center; gap: 8px; height: auto; padding: 0; background: none; border: none; position: static; z-index: auto; }   /* senza le regole di .top della pagina */
.op .card .top b { font-size: 17px; color: var(--ink); }
.op .card .top .bio { margin-left: auto; color: var(--testo-2); font-size: 13px; text-align: right; }
.op .card .campo { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 8px 0 0; }   /* senza le regole di .campo del login */
.op .card .campo input::placeholder { font-weight: 400; font-size: 16px; color: var(--muto); }
.op .card .campo input { flex: 1; min-width: 0; height: auto; font-size: 20px; padding: 10px; text-align: right; font-weight: 700; }
.op .card .sub { font-size: 12px; color: var(--testo-2); margin-top: 5px; }
.op .unita { display: flex; gap: 0; margin: 6px 0 10px; }
.op .unita button { flex: 1; padding: 9px; font: 15px var(--font-testo); background: #fff; border: 1px solid var(--bordo-2); color: var(--testo-2); }
.op .unita button:first-child { border-radius: 10px 0 0 10px; } .op .unita button:last-child { border-radius: 0 10px 10px 0; }
.op .unita button.on { background: var(--verde); color: #fff; font-weight: 600; border-color: var(--verde); }

/* ===== Pannello di amministrazione (staff Faunis) ===== */
.pannello-admin .avviso, .pannello-admin .errore { max-width: 980px; }
.avviso.credenziali .mini { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.avviso.credenziali .mini b { font-size: 14px; word-break: break-all; }
.modulo-admin { max-width: 560px; }
.modulo-admin .ricorda, .griglia-admin .ricorda { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--testo-2); margin: 6px 0 12px; }
.campo .ricorda { margin: 0; }
.campo .ricorda input { height: auto; }
.btn.piccolo { height: 30px; padding: 0 10px; font-size: 12.5px; }
.griglia-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.riga-admin { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.riga-admin .campo { margin-bottom: 0; flex: 1; min-width: 200px; }

/* ===== Editor della mappa (pannello di amministrazione) ===== */
.ed-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ed-barra label.btn { cursor: pointer; }
.ed-sep { width: 1px; height: 26px; background: var(--bordo-2); margin: 0 4px; }
.ed-stato { font-size: 12.5px; color: #A16207; font-weight: 600; }
.editor-mappa { display: flex; gap: 16px; align-items: flex-start; }
.ed-tela { flex: 1; min-height: 620px; max-height: calc(100vh - 220px); }
.ed-pannello { width: 330px; flex-shrink: 0; position: sticky; top: 84px; }
.ed-pannello h3 { margin-bottom: 10px; }
.ed-pannello .campo { margin-bottom: 10px; }
.ed-pannello .campo input { height: 38px; }
.ed-pannello select.btn { width: 100%; }
.ed-griglia2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.ed-pannello .campo input, .ed-pannello .campo select { width: 100%; min-width: 0; }
.ed-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ed-aiuto { margin: 10px 0 0 18px; font-size: 12.5px; color: var(--testo-2); line-height: 1.55; }
.ed-area { cursor: move; touch-action: none; }
.ed-area.ed-sel { outline: 2px dashed var(--blu); outline-offset: 2px; }
.ed-vasca { cursor: move; touch-action: none; display: grid; place-items: center; }
.ed-vasca .cod { position: static; color: var(--ink) !important; }
.ed-vasca.ed-sel { outline: 3px solid var(--blu); outline-offset: 1px; z-index: 3; }
.ed-vasca.ed-pesce { box-shadow: inset 0 0 0 3px var(--blu); }
.ed-etich { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 9px; color: var(--muto); pointer-events: none; }
.ed-maniglia { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 3px; background: var(--blu); border: 2px solid #fff; cursor: nwse-resize; z-index: 4; }
@media (max-width: 1100px) { .editor-mappa { flex-direction: column; } .ed-pannello { width: 100%; position: static; } }

/* ===== Panoramica (resources/views/panoramica.blade.php) ===== */
.kpi-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi small { font-size: 12px; font-weight: 600; color: var(--testo-2); }
.kpi b { display: block; font: 600 26px var(--font-titoli); color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi b span { font: 500 13px var(--font-testo); color: var(--testo-2); }
.kpi .sotto { margin-top: 4px; }
.due-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.due-colonne > .card { min-width: 0; }
.da-fare { list-style: none; margin: 10px 0 0; padding: 0; }
.da-fare li { position: relative; padding: 9px 0 9px 20px; border-bottom: 1px solid var(--bordo); font-size: 13.5px; }
.da-fare li:last-child { border-bottom: 0; }
.da-fare li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--blu); }
.da-fare li.liv-avviso::before { background: var(--ambra); }
.da-fare li.liv-errore::before { background: var(--rosso); }
.da-fare a { color: var(--testo); text-decoration: none; }
.da-fare a:hover { color: var(--blu); text-decoration: underline; }
.tutto-ok { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--verde-chiaro); color: var(--verde-2); font-size: 13.5px; }
.grafico-panoramica { position: relative; height: 260px; margin-top: 12px; }
.muto { color: var(--muto); font-size: 12px; }
@media (max-width: 520px) { .due-colonne { grid-template-columns: 1fr; } }

/* ===== Impostazioni email (resources/views/impostazioni-email.blade.php) ===== */
.scelta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-top: 10px; border: 1px solid var(--bordo-2); border-radius: 12px; font-size: 13.5px; color: var(--testo-2); cursor: pointer; }
.scelta:has(input:checked) { border-color: var(--blu); background: var(--azzurro); }
.scelta input { margin-top: 3px; }
.scelta b { color: var(--testo); }
.griglia-smtp { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; margin-top: 16px; }
.griglia-smtp select { width: 100%; height: 44px; }
.campo textarea { border: 1px solid var(--bordo-2); border-radius: 10px; padding: 10px 12px; font: 400 14px var(--font-testo); color: var(--testo); resize: vertical; }
.campo textarea:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(1,85,112,.12); }

/* ===== Impostazioni (una voce sola; schede in partials/impostazioni-schede) ===== */
.schede-impostazioni { margin-top: 0; }
body.in-impostazioni .fm-tabs[role=tablist], body.in-impostazioni .top .giorno, body.in-impostazioni #d-conf, body.in-impostazioni #tb-agg, body.in-impostazioni #sottotitolo { display: none !important; }

/* ===== STAMPA: pagine e finestre su A4 orizzontale, chiare, senza menu né pulsanti =====
   Intestazione comune (.intesta-stampa nel layout): azienda, titolo della pagina, data e autore della stampa.
   Con una finestra aperta si stampa solo quella (regole delle finestre più sopra). */
.intesta-stampa { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  html, body { background: #fff !important; }
  .app, .main { display: block; min-height: 0; }
  .corpo { padding: 0 !important; }
  .intesta-stampa { display: flex !important; align-items: center; gap: 14px; border-bottom: 2px solid #015570; padding-bottom: 6px; margin-bottom: 12px; }
  .intesta-stampa img { height: 24px; }
  .intesta-stampa b { display: block; font: 600 14px var(--font-titoli); color: #073F54; }
  .intesta-stampa span { font-size: 12px; color: #5B7380; }
  .intesta-stampa small { margin-left: auto; font-size: 10px; color: #5B7380; }
  .card, .box, .win, .kpi { box-shadow: none !important; border-color: #cfd6de !important; }
  .card, .box, .kpi, .rep-kpi > div { break-inside: avoid; }
  .scrollg, .win-body, .mappa-wrap, .st-albero, .st-crono { max-height: none !important; overflow: visible !important; }
  .grid { font-size: 10.5px; }
  .grid th { position: static !important; }
  .grid tr { break-inside: avoid; }
  thead { display: table-header-group; }
  a { color: inherit !important; text-decoration: none !important; }
  .fm-tabs, .barra-giornata, .schede-impostazioni, .win-x, .ed-barra { display: none !important; }
  .win-body .btnw, .win-body button, .card > form button, .modulo-admin button { display: none !important; }
  .kpi-griglia { grid-template-columns: repeat(5, 1fr) !important; gap: 8px; }
  .kpi b { font-size: 20px; }
  .due-colonne { grid-template-columns: 1fr 1fr !important; }
  .grafico-panoramica { height: 200px; }
  .chip { border: 1px solid currentColor; }
  .win { width: 100% !important; border: none !important; }
  .win-tit { border-bottom: 1px solid #cfd6de; }
  /* la mappa sta in una pagina; le finestre larghe (situazione, report) si rimpiccioliscono per non essere tagliate */
  .mappa-wrap { zoom: .72; min-height: 0 !important; border: none !important; }
  .ovl.stampa .win { zoom: .78; }
  .ovl.stampa { display: block !important; }
}

/* Alimentazione calibrata (porting di allevamento.php di TT Manager, 4/11/2026) */
#w-calib { z-index: 125; }
#wcb-tab td { vertical-align: middle; }
#wcb-tab input.in, #wcb-tab select.in { padding: 3px 6px; height: auto; }
#wcb-tab tr.escl td { opacity: .45; }
#wcb-tab input.man { border-color: var(--ambra); box-shadow: 0 0 0 2px rgba(233,162,59,.2); }
.wcb-exp { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border: 1px solid var(--bordo-2); border-radius: 10px; padding: 6px 10px; }
.wcb-exp b { min-width: 150px; }
/* ===== Anagrafica e logo dell'azienda ===== */
.modulo-admin.largo { max-width: 980px; }
.gruppo-anagrafica { margin-top: 14px; }
.gruppo-anagrafica h4, .modulo-admin h4 { font: 600 13px var(--font-titoli); color: var(--ink); margin: 0 0 4px; }
.griglia-smtp .campo.largo { grid-column: 1 / -1; }
.logo-riga { display: flex; gap: 16px; align-items: center; }
.logo-anteprima { max-height: 64px; max-width: 220px; object-fit: contain; border: 1px solid var(--bordo); border-radius: 10px; padding: 6px; background: #fff; }
.side .logo-azienda { display: block; max-height: 44px; max-width: 100%; object-fit: contain; margin: 0 0 8px; }
.accesso .logo-azienda-accesso { height: auto; max-height: 56px; max-width: 70%; margin: 6px auto 4px; object-fit: contain; }
.anagrafica-vista { display: grid; grid-template-columns: minmax(160px, auto) 1fr; gap: 6px 16px; margin: 6px 0 10px; font-size: 13.5px; }
.anagrafica-vista dt { color: var(--testo-2); }
.anagrafica-vista dd { margin: 0; }
@media print { .intesta-stampa img { max-height: 28px; max-width: 160px; object-fit: contain; } }

/* ===== Pannello: dashboard operativa, task e note dello staff ===== */
.task-elenco { margin-top: 10px; }
.task { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--bordo); }
.task:last-child { border-bottom: 0; }
.task.chiuso .task-corpo b { color: var(--muto); text-decoration: line-through; }
.task .prio { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--muto); }
.task .prio-alta { background: var(--rosso); }
.task .prio-normale { background: var(--blu); }
.task-corpo { flex: 1; min-width: 0; font-size: 13.5px; }
.task-meta { font-size: 12px; color: var(--testo-2); margin-top: 2px; }
.task-meta .rosso, .task.scaduto .task-meta .rosso { color: var(--rosso); font-weight: 600; }
.task-descr { font-size: 12.5px; color: var(--testo-2); margin-top: 4px; }
.task-modifica summary, .task-nuovo summary { cursor: pointer; font-size: 12px; color: var(--blu); margin-top: 4px; list-style: none; }
.task-nuovo { margin-top: 12px; }
.task-nuovo summary.btn { display: inline-flex; font-size: 13px; color: var(--testo); }
.task-stato select { height: 30px; font-size: 12px; padding: 0 8px; }
.task-stato .stato-in_corso { border-color: var(--ambra); }
.task-stato .stato-fatto { border-color: var(--verde); }
.note-elenco { margin-top: 12px; }
.nota { padding: 10px 0; border-top: 1px solid var(--bordo); font-size: 13.5px; }
.nota-testa { font-size: 12px; color: var(--testo-2); margin-bottom: 3px; }
.nota-testa a { color: inherit; }
.link-piccolo { border: none; background: none; color: var(--rosso); font: 12px var(--font-testo); cursor: pointer; padding: 0 0 0 6px; text-decoration: underline; }
.nota-testo { color: var(--testo); }

/* ===== Nuovi report da TT Manager (4/11/2026): allerte, previsione mangime, pagella partite, situazione e mappe di tutti gli impianti ===== */
.rep-card.prev { border-color: #D6CCF5; }
.rep-tag { display: inline-block; margin-top: 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #6D4FC2; border: 1px solid #CFC2F2; border-radius: 6px; padding: 1px 6px; }
tr.all-alta td { background: #FCE9E7; }
tr.all-media td { background: #FDF6EA; }
.mappa-print { background: #fff; border: 1px solid var(--bordo-2); border-radius: 12px; padding: 8px; margin: 6px 0; }
.mappa-svg { width: 100%; height: auto; max-height: 72vh; display: block; }
.rep-part { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--testo-2); margin-top: 4px; }
.rep-part span { white-space: nowrap; }
.qsq { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--bordo-2); vertical-align: -1px; }
tr.sub-imp td { background: var(--sfondo); border-bottom: 2px solid var(--bordo-2); }
.mono { font-family: var(--font-codici); }
@media print { .rep-pagina.salto { break-before: page; page-break-before: always; } .mappa-svg { max-height: 165mm; } .mappa-print { border-color: #999; } tr.sub-imp td { background: #f1f5f9 !important; } }

/* ===== Pannello: avvio di un cliente (situazione iniziale) ===== */
.passi-import { margin: 10px 0 12px 18px; padding: 0; font-size: 13.5px; color: var(--testo-2); }
.passi-import li { margin: 6px 0; }
.grid tr.riga-errore td { background: #FCE9E7; }
.rosso { color: var(--rosso); font-weight: 600; }
/* import da FishMakers */
.modulo-fm { margin-top: 12px; }
.griglia-fm { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.griglia-fm .campo { margin-bottom: 0; }
.modulo-fm .riga-admin { align-items: flex-start; margin-bottom: 12px; }
.modulo-fm small { display: block; color: var(--testo-2); font-size: 12px; margin-top: 4px; }
.elenco-anomalie { margin: 8px 0 0 18px; padding: 0; font-size: 13px; color: var(--testo-2); max-height: 420px; overflow: auto; }
.elenco-anomalie li { margin: 3px 0; }
/* attività da fare (panoramica, mappa, operatori) */
.testa-card { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.nuova-attivita { display: none; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; margin: 14px 0 4px; padding: 14px; background: var(--azzurro); border-radius: 12px; }
.nuova-attivita.aperto { display: grid; }
.nuova-attivita .campo { margin: 0; }
.nuova-attivita select { width: 100%; padding: 0 10px; font-size: 14px; }
.nuova-attivita .campo.largo { grid-column: span 2; }
.nuova-attivita .azioni-form { display: flex; align-items: flex-end; }
ul.attivita { list-style: none; margin: 12px 0 0; padding: 0; }
ul.attivita li { display: flex; gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--bordo); }
ul.attivita li:first-child { border-top: none; }
ul.attivita .spunta { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--bordo-2); background: #fff; color: #fff; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
ul.attivita .spunta:hover { border-color: var(--verde); }
ul.attivita li.fatta .spunta { background: var(--verde); border-color: var(--verde); }
ul.attivita li.fatta b { text-decoration: line-through; color: var(--muto); }
ul.attivita li.alta .spunta { border-color: #C2412D; }
ul.attivita .att-testo { flex: 1; min-width: 0; }
ul.attivita .att-testo b { font-weight: 600; margin-right: 6px; }
ul.attivita .att-testo small { display: block; color: var(--testo-2); font-size: 12px; margin-top: 2px; }
ul.attivita .att-scad { display: flex; gap: 8px; align-items: center; }
ul.attivita .x { border: 0; background: none; color: var(--muto); cursor: pointer; font-size: 13px; padding: 4px; }
ul.attivita .x:hover { color: #C2412D; }
.spunta-form, .att-scad form { margin: 0; }
@media (max-width: 700px) { .nuova-attivita .campo.largo { grid-column: auto; } .testa-card { flex-direction: column; } }
.mbadge:empty { display: none; }
.mbadge { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--blu); color: #fff; font-size: 11px; font-weight: 600; text-align: center; line-height: 16px; }
.mbadge.rossa { background: #C2412D; }
/* manutenzioni [allevamento.php 4/11/2026], colori di Faunis */
#w-manf { z-index: 135; }
.mtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--bordo); margin-bottom: 10px; }
.mtabs button { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--testo-2); font: 600 13px var(--font-testo); padding: 8px 12px; cursor: pointer; }
.mtabs button.on { color: var(--ink); border-bottom-color: var(--verde); }
.mbadge.giallo { background: #E8A33D; color: #2b1d05; }
.mbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mbar .in { width: auto; }
.mform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.mform .fr { margin: 0; }
.mform .lungo { grid-column: 1 / -1; }
.mform textarea.in { min-height: 60px; resize: vertical; }
.mform .sez { grid-column: 1 / -1; font: 600 11.5px var(--font-testo); color: var(--verde-scuro, #2f7d32); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--bordo); padding-top: 8px; }
@media (max-width: 700px) { .mform { grid-template-columns: 1fr; } }
.mrow { cursor: pointer; }
.mrow:hover td { background: var(--azzurro); }
.mchip { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.mchip.alta, .mchip.scaduta, .mchip.aperta { background: #C2412D; color: #fff; }
.mchip.media, .mchip.in_scadenza, .mchip.in_corso { background: #F5D9A8; color: #6b4404; }
.mchip.bassa, .mchip.ok, .mchip.chiusa { background: #DDF0DC; color: #2f6b2c; }
.mchip.spento { background: var(--azzurro); color: var(--muto); }
.mall { display: flex; gap: 6px; flex-wrap: wrap; }
.mall a { font-size: 12px; color: var(--blu); }
.mall img { height: 54px; border-radius: 6px; border: 1px solid var(--bordo); }
.vasca .man-tag { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 3; font-size: 11px; line-height: 1; padding: 2px 3px; border-radius: 5px; background: #FDE68A; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.vasca .man-tag.alta { background: #F2A39A; }
.btn .mbadge { margin-left: 4px; }
.pua-box { border: 1px solid #b9dfb7; border-radius: 10px; padding: 8px 10px; background: #f3faf2; }
.pua-tit { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; color: #2f6b2c; margin-bottom: 6px; }
.pua-part { display: flex; flex-wrap: wrap; gap: 4px 10px; max-height: 160px; overflow: auto; }
.pua-part label, .pua-part span { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; background: #fff; border: 1px solid var(--bordo); border-radius: 7px; padding: 2px 7px; }
.pua-part small { color: var(--muto); }
.pua-part.sola { max-height: none; margin: 6px 0; }
.pua-lim { font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: #f3faf2; border: 1px solid #b9dfb7; }
.pua-lim.oltre { background: #FCE9E7; border-color: #C2412D; color: #8a2a1d; }
.pua-sch { border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--azzurro); }
.pua-kpi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pua-kpi > div { flex: 1; min-width: 130px; font-size: 11.5px; color: var(--testo-2); border: 1px solid var(--bordo); border-radius: 9px; padding: 5px 9px; background: #fff; }
.pua-kpi b { display: block; font-size: 14px; color: var(--ink); }
.pua-az { display: flex; gap: 6px; margin-top: 4px; }
.gg-barra { display: block; height: 5px; background: var(--bordo); border-radius: 3px; margin-top: 4px; overflow: hidden; } .gg-barra i { display: block; height: 100%; background: var(--verde); }
/* panoramica: riquadri in alto con un tocco di colore, selettore del grafico */
.kpi-griglia .kpi { border-left: 4px solid transparent; }
.kpi.tinta-blu { background: linear-gradient(135deg, #EAF4F8 0%, #fff 70%); border-left-color: #7FB5C8; }
.kpi.tinta-verde { background: linear-gradient(135deg, #EEF7EA 0%, #fff 70%); border-left-color: #9ACB8D; }
.kpi.tinta-sabbia { background: linear-gradient(135deg, #FBF3E4 0%, #fff 70%); border-left-color: #E2BF7F; }
.kpi.tinta-rosa { background: linear-gradient(135deg, #FBEDEB 0%, #fff 70%); border-left-color: #E5A39D; }
.kpi.tinta-lilla { background: linear-gradient(135deg, #F2EEF9 0%, #fff 70%); border-left-color: #B7A6DB; }
.segmenti { display: inline-flex; padding: 3px; gap: 2px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 10px; flex: none; }
.segmenti button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: 500 12.5px var(--font-testo); color: var(--testo-2); cursor: pointer; }
.segmenti button:hover { color: var(--blu); }
.segmenti button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(7,63,84,.12); }
@media print { .kpi[class*="tinta-"] { background: #fff !important; } }