/* =========================================================================
   CCNL Metalmeccanici 2021 — UILM
   Foglio 5 di 6: TABELLE

   Minimi, scatti, maggiorazioni, festivita', malattia, reperibilita'.
   ========================================================================= */

/* ------------------------------------- tabelle minimi: previsto/effettivo */
/* Per ogni anno tre colonne: Previsto | IPCA | Effettivo. Le intestazioni
   stanno su fondo blu con testo bianco, e ogni anno e' separato dal successivo
   da un bordo netto, cosi' si distingue a colpo d'occhio. */
table.tabella-minimi { min-width: 900px; border-collapse: separate; border-spacing: 0; }

/* tabella con poche colonne: non serve la larghezza minima e resta compatta */
/* Tabella con poche colonne: larghezza fissa, cosi' il riquadro che la
   contiene puo' stringersi attorno a lei senza comprimerla. */
table.tabella-minimi.tabella-stretta { min-width: 0; width: 440px; max-width: 100%; }
/* la tabella stretta sta al centro del riquadro, non appoggiata a sinistra */
/* Nella tabella stretta il riquadro col bordo si adatta alla larghezza della
   tabella e si centra: altrimenti il bordo resterebbe largo quanto tutta la
   pagina e sembrerebbe un contenitore gigante e vuoto. */
/* Il riquadro col bordo si stringe attorno alla tabella e si centra.
   La tabella mantiene la sua larghezza (la classe stretta la fissa a 440px):
   il wrapper si adatta a lei, non il contrario. */
.tabella-scroll.centrata {
  display: block; width: fit-content; max-width: 100%;
  margin-left: auto; margin-right: auto;
}
.tabella-scroll.centrata > table { margin: 0; }
/* Nella tabella stretta la colonna livello ha lo stesso sfondo azzurro tenue
   delle altre tabelle. L'angolo "Livello" invece resta come nelle altre
   tabelle: blu pieno con testo bianco, cosi' e' identico ovunque. */
.tabella-minimi.tabella-stretta tbody td.livello {
  background: var(--blu-chiaro); border-right: 1px solid var(--bordo-tenue);
  text-align: left; color: var(--tab-livello-testo);
}
.tabella-minimi.tabella-stretta .riga-anni th.angolo-livello {
  background: var(--blu); color: #fff;
  border-right: 1px solid var(--bordo-tenue);
  text-align: left;
}

/* ------------------------------------------------ riga degli anni (in alto) */
.tabella-minimi .riga-anni th {
  background: var(--blu-scuro);
  color: #fff;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 12px 8px;
  border-right: 3px solid var(--superficie);
  border-bottom: 2px solid var(--superficie);
}
.tabella-minimi .riga-anni th:last-child { border-right: 0; }

/* l'angolo "Liv." segue lo stesso stile ma piu' stretto */
.tabella-minimi .riga-anni th.angolo-livello {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--blu); padding-left: 14px; padding-right: 14px;
}
/* anno piu' recente dentro il contratto: stesso blu scuro delle altre,
   per avere intestazioni tutte uniformi */
.tabella-minimi .riga-anni th.anno-attuale { background: var(--blu-scuro); color: #fff; }
/* anno oltre la scadenza del contratto: distinto con un filo piu' chiaro */
.tabella-minimi .riga-anni th.anno-oltre {
  background: var(--blu-scuro);
  color: #fff;
}

/* ------------------------------------------ riga delle etichette di colonna */
.tabella-minimi .riga-etichette th.et {
  background: var(--blu);
  color: #fff;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-right: 1px solid rgba(255, 255, 255, .18);
}
/* la colonna IPCA ha lo stesso blu delle etichette accanto (Minimo, Effettivo) */
.tabella-minimi .riga-etichette th.et-ipca {
  background: var(--blu);
  color: #fff;
  text-align: center;
}
/* ultima colonna dell'anno: bordo netto verso l'anno successivo */
.tabella-minimi .riga-etichette th.et-effettivo { border-right: 3px solid var(--superficie); }
.tabella-minimi .riga-etichette th:last-child { border-right: 0; }

/* prima colonna quando l'anno non ha l'IPCA (il 2021): una sola colonna */
.tabella-minimi .riga-etichette th.et-minimo {
  background: var(--blu); color: #fff; text-align: right;
  border-right: 3px solid var(--superficie);
}
/* un anno che ha una sola colonna (2021, senza IPCA): l'intestazione deve
   avere lo STESSO blu scuro degli altri anni, altrimenti spicca piu' chiara */
.tabella-minimi .riga-anni th.anno-coincide { background: var(--blu-scuro); color: #fff; }

/* la colonna del valore previsto: piu' tenue dell'effettivo */
.tabella-minimi td.previsto { color: var(--testo-tenue); }

/* titolo di una delle tabelle di reperibilita' */
.titolo-sottotabella {
  font-size: 16px; margin: 24px 0 8px; color: var(--testo);
  font-weight: 600;
}

/* ------------------------------------------------------------- corpo tabella */
.tabella-minimi tbody td {
  border-bottom: 1px solid var(--bordo-tenue);
  border-right: 1px solid var(--bordo-tenue);
  padding: 11px 12px;
}
.tabella-minimi tbody td:last-child { border-right: 0; }

/* separatore netto fra un anno e il successivo */
.tabella-minimi tbody td.fine-anno { border-right: 3px solid var(--bordo); }
/* la stessa divisione fra gli anni anche nella riga delle intestazioni */
.tabella-minimi thead th.fine-anno { border-right: 3px solid var(--bordo-tenue); }

/* il codice livello resta in evidenza a sinistra */
.tabella-minimi td.livello {
  font-weight: 700; font-size: 15px; color: var(--tab-livello-testo);
  background: var(--blu-chiaro); text-align: center;
  border-right: 3px solid var(--bordo);
}

/* Tutte le celle hanno lo STESSO sfondo: si distinguono solo dal carattere.
   La colonna IPCA si riconosce dal testo in oro, non da un riquadro colorato. */
.tabella-minimi td.ipca {
  color: var(--oro-testo); font-weight: 700; text-align: center;
}
/* il valore in vigore */
.tabella-minimi td.effettivo { font-weight: 700; color: var(--testo); }

/* titolo di una tabella dentro la pagina */
.titolo-tabella {
  font-size: 20px; margin: 34px 0 12px; color: var(--blu);
  padding-bottom: 8px; border-bottom: 2px solid var(--bordo);
}
/* prima tabella della pagina: meno spazio sopra */
.titolo-tabella:first-of-type { margin-top: 8px; }

/* nella colonna delle voci il testo va a sinistra e puo' andare a capo */
.tabella-minimi td.voce {
  text-align: left; font-size: 14px; white-space: normal;
  color: var(--testo);
}

/* ------------------------------------------- menu a schede (reperibilità) */
/* Sul telefono le schede stanno su una riga sola e scorrono di lato;
   su schermo largo si vedono tutte senza scorrere. */
.schede-menu {
  display: flex; gap: 8px; margin: 14px 0 18px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.schede-menu::-webkit-scrollbar { height: 6px; }
.schede-menu::-webkit-scrollbar-thumb {
  background: var(--bordo); border-radius: 3px;
}
.scheda {
  flex: 0 0 auto;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--testo-tenue);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.scheda:hover { border-color: var(--blu); color: var(--blu); }
.scheda-attiva,
.scheda-attiva:hover {
  background: var(--blu); border-color: var(--blu); color: #fff;
}
.scheda:focus-visible { outline: 3px solid var(--oro-bordo); outline-offset: 2px; }
.scheda-contenuto[hidden] { display: none; }

/* ------------------------- link alle tabelle dalla pagina dell'articolo */
.azioni-articolo { margin: 16px 0 4px; }

.link-tabella {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--blu); background: var(--blu-chiaro);
  border: 1px solid var(--blu); border-radius: 999px;
  padding: 9px 18px;
  transition: background .15s, color .15s, transform .15s;
}
.link-tabella:hover {
  background: var(--blu); color: #fff; transform: translateY(-1px);
}
.link-tabella:focus-visible { outline: 3px solid var(--oro-bordo); outline-offset: 2px; }
.link-tabella-freccia { font-size: 16px; }
.link-tabella-grande { font-size: 15.5px; padding: 11px 20px; }

/* riquadro che prende il posto della tabella nel testo originale */
.omissis-tabella {
  margin: 18px 0; padding: 16px 18px;
  background: var(--blu-chiaro);
  border: 1px dashed var(--blu);
  border-radius: var(--raggio);
  text-align: center;
}
.omissis-testo {
  font-size: 14.5px; color: var(--testo-tenue);
  font-style: italic; margin: 0 0 12px;
}
.omissis-tabella .link-tabella { background: var(--superficie); }
.omissis-tabella .link-tabella:hover { background: var(--blu); }
.omissis-pdf {
  display: block; margin-top: 10px;
  font-size: 13px; color: var(--testo-debole); text-decoration: underline;
}
.omissis-pdf:hover { color: var(--blu); }

/* la tabella raggiunta da un link si illumina per un attimo */
.tabella-evidenziata {
  animation: lampeggio-tabella 2.2s ease-out;
}
@keyframes lampeggio-tabella {
  0%   { background: var(--oro-tenue, #fdf3cf); box-shadow: 0 0 0 3px var(--oro-bordo); }
  70%  { background: var(--oro-tenue, #fdf3cf); box-shadow: 0 0 0 3px var(--oro-bordo); }
  100% { background: transparent; box-shadow: none; }
}

/* --------------------------------------------- documenti di aggiornamento */
.elenco-documenti { list-style: none; margin: 8px 0 0; padding: 0; }
.elenco-documenti li {
  padding: 10px 0; border-top: 1px solid var(--bordo-tenue);
  display: flex; flex-direction: column; gap: 2px;
}
.documento-link {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
  color: var(--blu); font-weight: 600; font-size: 15px;
  text-decoration: none;
}
.documento-link:hover { text-decoration: underline; }
.documento-data { font-weight: 400; font-size: 13px; color: var(--testo-debole); }
.documento-descr { font-size: 13.5px; color: var(--testo-debole); }
.documenti-titolo { margin-top: 14px; font-weight: 600; }

/* --------------------------------------------------------- tabelle */
.tabella-scroll {
  overflow-x: auto; border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--superficie); margin-bottom: 22px;
  -webkit-overflow-scrolling: touch;
}
table.tabella {
  width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px;
}
table.tabella th, table.tabella td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--bordo-tenue);
}
table.tabella thead th {
  background: var(--blu); color: #fff; font-size: 13px;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
  position: sticky; top: 0;
}
table.tabella tbody tr:last-child td { border-bottom: 0; }
table.tabella tbody tr:nth-child(even) { background: var(--sfondo); }
table.tabella td.livello {
  font-weight: 800; color: var(--blu); font-size: 16px; white-space: nowrap;
}
/* nella tabella minimi il colore del livello segue il tema */
table.tabella-minimi td.livello { color: var(--tab-livello-testo); font-size: 15px; }
table.tabella td.importo { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabella td.importo.evidenza { font-weight: 700; color: var(--blu); }

/* ------------------------------------------- tabella delle maggiorazioni
   due colonne di percentuali: lavoro non a turni e lavoro a turni */
/* la tabella si prende solo lo spazio che le serve, non tutto quello disponibile,
   e il riquadro che la contiene si restringe e si centra come per gli scatti */
table.tabella-minimi.tabella-maggiorazioni {
  min-width: 0;
  width: 780px;
  max-width: 100%;
}
.tabella-scroll.centrata > table.tabella-maggiorazioni { margin: 0; }
table.tabella-minimi.tabella-maggiorazioni td.importo.percentuale {
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tab-percentuale-testo);
  font-size: 15px;
}
/* la colonna "a turni" e' quella che di solito interessa: un filo piu' marcata */
table.tabella-minimi.tabella-maggiorazioni td.importo.percentuale:last-child {
  background: var(--blu-chiaro);
}
/* qui la cella contiene il nome esteso del tipo di lavoro, non solo "C3":
   deve poter andare a capo, altrimenti la tabella non si restringe */
table.tabella-minimi.tabella-maggiorazioni td.livello.voce {
  white-space: normal;
  text-align: left;
  max-width: 420px;
  font-weight: 600;
  line-height: 1.35;
}
/* le percentuali restano su una riga sola */
table.tabella-minimi.tabella-maggiorazioni td.importo.percentuale,
table.tabella-minimi.tabella-maggiorazioni .riga-anni th.anno { white-space: nowrap; }

/* su telefono la tabella deve stare nello schermo senza scorrere:
   stringo i margini e il carattere, cosi' meno righe vanno a capo */
@media (max-width: 640px) {
  table.tabella-minimi.tabella-maggiorazioni { width: 100%; }
  table.tabella-minimi.tabella-maggiorazioni td.livello.voce,
  table.tabella-minimi.tabella-maggiorazioni tbody td,
  table.tabella-minimi.tabella-maggiorazioni thead th {
    padding-left: 7px; padding-right: 7px;
  }
  table.tabella-minimi.tabella-maggiorazioni td.livello.voce { font-size: 13.5px; }
  table.tabella-minimi.tabella-maggiorazioni td.importo.percentuale { font-size: 13.5px; }
  table.tabella-minimi.tabella-maggiorazioni .riga-anni th.anno { font-size: 12px; letter-spacing: 0; }
}

/* ---------------------------------------------------- tabella delle festività
   struttura a due colonne: data e ricorrenza. Non ha gli anni: i giorni
   festivi sono sempre gli stessi, cambia solo la data del Lunedi di Pasqua. */
table.tabella-minimi.tabella-festivita {
  min-width: 0;
  width: 520px;
  max-width: 100%;
}
.tabella-scroll.centrata > table.tabella-festivita { margin: 0; }

/* la colonna della data: stretta, allineata a sinistra */
table.tabella-minimi.tabella-festivita tbody td.data-festivita {
  white-space: nowrap; text-align: left; font-size: 14px;
  font-weight: 700; color: var(--tab-livello-testo);
  background: transparent; border-right: 1px solid var(--bordo-tenue);
  width: 130px;
}
/* quando la data cambia ogni anno lo dico col corsivo */
table.tabella-minimi.tabella-festivita tbody td.data-festivita.data-mobile {
  font-style: italic; color: var(--oro-testo);
}

/* la colonna della ricorrenza: puo' andare a capo */
table.tabella-minimi.tabella-festivita tbody td.nome-festivita {
  text-align: left; font-weight: 600; white-space: normal;
  line-height: 1.35; color: var(--testo);
}
.nota-festivita { font-weight: 400; color: var(--testo-tenue); font-size: 13px; }

/* etichetta "data variabile" accanto alle ricorrenze mobili */
.distintivo-mobile {
  display: inline-block; margin-left: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--oro-testo); background: var(--ambra-chiaro);
  border: 1px solid var(--oro-bordo); border-radius: 999px;
  padding: 1px 8px; vertical-align: middle;
}

/* i riquadri con le regole pratiche */
.regola-festivita {
  margin-bottom: 16px; padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-left: 4px solid var(--oro-bordo);
  border-radius: var(--raggio-piccolo);
}
.regola-festivita strong {
  display: block; margin-bottom: 6px;
  font-size: 15px;
  /* si adatta al tema: il blu pieno sarebbe illeggibile sullo sfondo scuro */
  color: var(--tab-livello-testo);
}
.regola-festivita p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--testo); }

@media (max-width: 640px) {
  table.tabella-minimi.tabella-festivita { width: 100%; }
  table.tabella-minimi.tabella-festivita tbody td.data-festivita {
    width: 96px; font-size: 13px; padding-left: 7px; padding-right: 7px;
  }
  table.tabella-minimi.tabella-festivita tbody td.nome-festivita {
    font-size: 13.5px; padding-left: 7px; padding-right: 7px;
  }
    .regola-festivita { padding: 12px 13px; }
}

/* ---------------------------------------------------- menu di salto tabelle
   Resta appiccicato sotto l'intestazione mentre si scorre la pagina. */
.menu-tabelle {
  position: sticky;
  /* Valore di riserva, usato solo se il JavaScript non gira: il JS misura
     l'altezza vera dell'intestazione e mette un top esatto, pixel per pixel,
     perche' la muova insieme a lei senza lasciare buchi. */
  top: calc(var(--altezza-intestazione) + env(safe-area-inset-top, 0px));
  z-index: 40;
  /* un po' staccato dal bordo sinistro, e con aria attorno ai pulsanti */
  margin: 0 0 26px;
  padding: 12px 18px 14px;
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio);
}
.menu-tabelle-etichetta {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--testo-debole);
  margin-bottom: 8px;
}
/* Le voci vanno a capo da sole quando lo schermo e' stretto:
   niente scorrimento laterale, si vede tutto subito. */
.menu-tabelle-lista {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 2px;
}
.menu-tabelle-voce {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 14px; font-weight: 600;
  /* segue il tema: il blu pieno sarebbe illeggibile sullo sfondo scuro */
  color: var(--tab-livello-testo);
  background: var(--blu-chiaro);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.menu-tabelle-voce:hover {
  background: var(--blu); color: #fff; border-color: var(--blu);
  text-decoration: none;
}
.menu-tabelle-voce:focus-visible { outline: 3px solid var(--oro-bordo); outline-offset: 2px; }
/* la voce della tabella che stai guardando */
.menu-tabelle-voce.attiva {
  background: var(--blu);
  color: #fff;
  border-color: var(--blu);
  box-shadow: 0 2px 6px rgba(11, 78, 162, .28);
}

/* lascio un margine sopra i titoli: il menu coprirebbe il testo */
#contenuto-tabelle h2.titolo-tabella { scroll-margin-top: calc(var(--altezza-intestazione) + 110px); }

@media (max-width: 640px) {
  /* su telefono il menu si stringe: le voci vanno a capo ma restano compatte */
  .menu-tabelle { padding: 10px 12px 11px; margin-bottom: 18px; }
  /* l'etichetta "Vai alla tabella" e' superflua coi pulsanti a vista */
  .menu-tabelle-etichetta { display: none; }
  .menu-tabelle-lista { gap: 6px; }
  .menu-tabelle-voce { font-size: 12.5px; padding: 6px 13px; }
  /* Il titolo deve fermarsi SOTTO il menu, non sotto l'intestazione: dopo il
     salto l'intestazione si e' gia' ritirata, quindi sopra il titolo resta
     solo il menu (alta circa 90px su due righe di voci). */
  #contenuto-tabelle h2.titolo-tabella { scroll-margin-top: 96px; }
}

/* ---------------------------------------------------- tabella malattia breve
   tre colonne: quante assenze brevi, quanto pagano i primi 3 giorni,
   cosa cambia in pratica. */
table.tabella-minimi.tabella-malattia {
  min-width: 0;
  width: 620px;
  max-width: 100%;
}
.tabella-scroll.centrata > table.tabella-malattia { margin: 0; }

table.tabella-minimi.tabella-malattia tbody td.periodo-malattia {
  white-space: nowrap; text-align: left; font-size: 14px;
  font-weight: 700; color: var(--tab-livello-testo);
  background: transparent; border-right: 1px solid var(--bordo-tenue);
  width: 170px;
}
table.tabella-minimi.tabella-malattia tbody td.percentuale-malattia {
  text-align: center; white-space: nowrap;
  font-size: 16px; font-weight: 800;
  color: var(--tab-livello-testo);
}
/* le righe in cui scatta la riduzione si leggono a colpo d'occhio */
table.tabella-minimi.tabella-malattia tbody td.percentuale-malattia.ridotta {
  color: var(--oro-testo);
}
table.tabella-minimi.tabella-malattia tbody td.nota-riga-malattia {
  text-align: left; white-space: normal; font-size: 13.5px;
  line-height: 1.35; color: var(--testo-tenue);
}

/* elenchi puntati nelle sezioni di spiegazione */
.elenco-punti {
  margin: 0 0 20px; padding-left: 22px;
  font-size: 14px; line-height: 1.6; color: var(--testo);
}
.elenco-punti li { margin-bottom: 8px; }
.elenco-punti li::marker { color: var(--tab-livello-testo); }
/* le eccezioni: restano al 100%, le segno in verde */
.elenco-eccezioni li::marker { color: var(--verde); }
.elenco-eccezioni { margin-bottom: 14px; }

@media (max-width: 640px) {
  table.tabella-minimi.tabella-malattia { width: 100%; }
  table.tabella-minimi.tabella-malattia tbody td.periodo-malattia {
    width: 118px; font-size: 12.5px; padding-left: 7px; padding-right: 7px;
  }
  table.tabella-minimi.tabella-malattia tbody td.percentuale-malattia {
    font-size: 14px; padding-left: 6px; padding-right: 6px;
  }
  table.tabella-minimi.tabella-malattia tbody td.nota-riga-malattia {
    font-size: 12.5px; padding-left: 7px; padding-right: 7px;
  }
  /* le intestazioni a 17px allargavano la tabella oltre lo schermo */
  table.tabella-minimi.tabella-malattia .riga-anni th {
    font-size: 11.5px; letter-spacing: 0; white-space: normal;
    padding: 9px 6px; line-height: 1.25;
  }
  .elenco-punti { font-size: 13.5px; padding-left: 19px; }
}

/* ------------------------------------------- schede a tendina della malattia
   Tre tabelle (comporto, retribuzione, ricovero) una alla volta.
   Ogni pannello contiene la sua tabella e le sue note. */
.schede-tendina {
  margin: 4px 0 20px;
}
.schede-tendina-lista {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.scheda-tendina-voce {
  font: inherit;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  color: var(--tab-livello-testo);
  background: var(--blu-chiaro);
  border: 1px solid var(--bordo-tenue);
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .15s, color .15s, border-color .15s;
}
.scheda-tendina-voce:hover { background: var(--blu); color: #fff; border-color: var(--blu); }
.scheda-tendina-voce:focus-visible { outline: 3px solid var(--oro-bordo); outline-offset: 2px; }
.scheda-tendina-voce.attiva {
  background: var(--blu); color: #fff; border-color: var(--blu);
  box-shadow: 0 2px 6px rgba(11, 78, 162, .28);
}

/* il pannello nascosto deve restare nascosto */
.scheda-pannello-tendina[hidden] { display: none !important; }
.schede-tendina-pannelli { margin-top: 18px; }

/* --- tabella del comporto */
table.tabella-minimi.tabella-comporto {
  min-width: 0; width: 660px; max-width: 100%;
}
.tabella-scroll.centrata > table.tabella-comporto { margin: 0; }
table.tabella-minimi.tabella-comporto tbody td.anzianita-comporto {
  white-space: normal; text-align: left; font-size: 14px;
  font-weight: 700; color: var(--tab-livello-testo);
  background: transparent; border-right: 1px solid var(--bordo-tenue);
  width: 280px; line-height: 1.35;
}
table.tabella-minimi.tabella-comporto tbody td.giorni-comporto {
  text-align: center; white-space: nowrap;
  font-size: 16px; font-weight: 800; width: 150px;
}
/* il prolungato e' il caso raro: lo tengo in oro, come le riduzioni */
table.tabella-minimi.tabella-comporto tbody td.giorni-comporto.breve {
  color: var(--tab-livello-testo);
}
table.tabella-minimi.tabella-comporto tbody td.giorni-comporto.prolungato {
  color: var(--oro-testo);
}
table.tabella-minimi.tabella-comporto .riga-anni th.breve-testata { background: var(--blu-scuro); }
table.tabella-minimi.tabella-comporto .riga-anni th.prolungato-testata { background: var(--blu-scuro); }

/* --- tabella retribuzione + bonus ricovero: tre colonne */
table.tabella-minimi.tabella-retribuzione-malattia {
  min-width: 0; max-width: 100%; width: 780px;
}
.tabella-scroll.centrata > table.tabella-retribuzione-malattia { margin: 0; }

table.tabella-minimi.tabella-retribuzione-malattia tbody td.anzianita-comporto {
  white-space: normal; text-align: left; font-size: 14px;
  font-weight: 700; color: var(--tab-livello-testo);
  background: transparent; border-right: 1px solid var(--bordo-tenue);
  line-height: 1.35; width: 300px;
}
table.tabella-minimi.tabella-retribuzione-malattia tbody td.giorni-pieni {
  text-align: center; white-space: nowrap;
  font-size: 16px; font-weight: 800; color: var(--tab-livello-testo);
  width: 220px;
}
table.tabella-minimi.tabella-retribuzione-malattia tbody td.giorni-ricovero {
  text-align: center; white-space: nowrap;
  font-size: 16px; font-weight: 800; color: var(--oro-testo);
  border-left: 1px solid var(--bordo-tenue);
  width: 230px;
}
/* l'intestazione del ricovero: blu scuro come tutte le altre, testo bianco.
   I suoi valori restano in oro, perche' quelli distinguono la colonna. */
table.tabella-minimi.tabella-retribuzione-malattia .riga-anni th.ricovero-testata {
  background: var(--blu-scuro); color: #fff;
}
/* le intestazioni di questa tabella sono frasi lunghe ("Ricovero: giorni in
   piu' al 100%"): vanno a capo invece di uscire dal bordo della tabella */
table.tabella-minimi.tabella-retribuzione-malattia .riga-anni th {
  white-space: normal; font-size: 14px; line-height: 1.3;
  padding: 12px 14px; vertical-align: middle;
}

@media (max-width: 640px) {
  .scheda-tendina-voce { font-size: 12.5px; padding: 6px 11px; }
  .schede-tendina-lista { gap: 6px; }
  .schede-tendina-pannelli { margin-top: 14px; }
  table.tabella-minimi.tabella-comporto,
  table.tabella-minimi.tabella-retribuzione-malattia { width: 100%; }
  table.tabella-minimi.tabella-comporto tbody td.anzianita-comporto,
  table.tabella-minimi.tabella-retribuzione-malattia tbody td.anzianita-comporto {
    width: auto; font-size: 12.5px;
    padding-left: 7px; padding-right: 7px;
  }
  table.tabella-minimi.tabella-comporto tbody td.giorni-comporto,
  table.tabella-minimi.tabella-retribuzione-malattia tbody td.giorni-pieni,
  table.tabella-minimi.tabella-retribuzione-malattia tbody td.giorni-ricovero {
    font-size: 14px; width: auto; padding-left: 5px; padding-right: 5px;
  }
  table.tabella-minimi.tabella-comporto .riga-anni th,
  table.tabella-minimi.tabella-retribuzione-malattia .riga-anni th {
    font-size: 11px; letter-spacing: 0; white-space: normal;
    padding: 9px 5px; line-height: 1.25;
  }
}

.legenda-tabelle { font-size: 13.5px; color: var(--testo-tenue); margin-bottom: 22px; }

/* -------------------------------------------------------- navigazione */
.navigazione {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--superficie);
  border-top: 1px solid var(--bordo);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 14px rgba(16, 30, 54, .07);
}
.navigazione a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 2px; min-height: var(--altezza-nav);
  color: var(--testo-debole); font-size: 11px; font-weight: 600;
  text-decoration: none; transition: color .15s;
}
.navigazione a:hover { text-decoration: none; color: var(--blu); }
.navigazione a.attivo { color: var(--blu); }
.navigazione a.attivo svg { transform: translateY(-1px); }

@media (min-width: 1000px) {
  .navigazione {
    top: 0; bottom: 0; right: auto; width: 232px;
    flex-direction: column; justify-content: flex-start;
    padding: calc(var(--altezza-intestazione) + 20px) 12px 20px;
    border-top: 0; border-right: 1px solid var(--bordo);
  }
  .navigazione a {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    gap: 13px; min-height: 0; padding: 12px 15px;
    font-size: 15px; border-radius: var(--raggio-piccolo);
  }
  .navigazione a.attivo { background: var(--blu-chiaro); }
  .intestazione-interno { padding-left: 22px; }
}


/* ------------------------------------------- pulsanti "Apri il contratto in PDF"
   Tutti uguali: bianchi (bottone-secondario), stessa misura, con aria sopra e
   sotto, cosi' non restano attaccati al riquadro o al testo vicino. */
.azioni-tabelle {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 22px 0 30px;
}
.azioni-tabelle .bottone-secondario { padding: 11px 18px; }
@media (max-width: 600px) {
  .azioni-tabelle { margin: 18px 0 26px; }
  .azioni-tabelle .bottone-secondario { width: 100%; }
}