/* =====================================================================
   ENOVA JOB — portale unico delle app ENOVA — foglio di stile
   Stessa famiglia visiva di ENOVA APT / LEGALE / FISCALE / RETE VENDITA:
   blu profondo, blu elettrico, verde acqua; sfondo azzurro chiarissimo
   sfumato verso gli angoli; riquadri bianchi con ombra; menu a pillole.
   Sempre tema chiaro.
   ===================================================================== */
:root {
  --blu: #0b2e9e; --blu-scuro: #071c63; --blu-chiaro: #1547d6;
  --acqua: #0fc0aa; --ciano: #14bee0;
  --verde: #1a7f37; --verde-bg: #e4f5e9;
  --rosso: #c0392b; --rosso-bg: #fdecea;
  --giallo: #a8760a; --giallo-bg: #fdf4de;
  --arancio: #c2670f; --arancio-bg: #fdeede;
  --grigio: #6b7a8c; --grigio-bg: #eef1f6;
  --superficie: #ffffff; --superficie-2: #f7f9fc;
  --linea: #e3e9f4; --linea-2: #c1cad6;
  --testo: #1b2530; --testo-2: #5f6f80;
  --blu-bg: #e6ecfa;
  --ombra: 0 6px 18px rgba(11,46,158,.10), 0 1px 3px rgba(11,46,158,.06);
  --ombra-alta: 0 16px 36px rgba(11,46,158,.18);
  --raggio: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #eef3fc; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--testo); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
  min-height: 100vh;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 640px at 102% -8%, rgba(21,71,214,.42), rgba(20,190,224,.22) 40%, transparent 66%),
    radial-gradient(1000px 620px at -8% 106%, rgba(11,46,158,.46), rgba(21,71,214,.18) 45%, transparent 66%),
    radial-gradient(700px 420px at 55% 50%, rgba(15,192,170,.06), transparent 65%),
    linear-gradient(180deg, #e9effb 0%, #f0f4fd 55%, #ecf2fc 100%); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--blu-chiaro); }
:focus-visible { outline: 2px solid var(--acqua); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ SCHERMATE */
#schermata-login, #schermata-password, #schermata-reimposta, #schermata-app { display: none; }
.attiva { display: block !important; }
.schermata-fondo.attiva { display: flex !important; }
.schermata-fondo {
  min-height: 100vh; align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(1000px 520px at 82% 6%, rgba(20,190,224,.35), transparent 62%),
    radial-gradient(760px 460px at 8% 96%, rgba(15,192,170,.30), transparent 60%),
    linear-gradient(146deg, #071c63 0%, #0a2a92 52%, #1547d6 100%);
}
.box-login { background: #fff; width: 100%; max-width: 420px; border-radius: 18px; padding: 34px 32px 28px; box-shadow: 0 20px 50px rgba(4,16,60,.34); }
.logo-login { text-align: center; margin-bottom: 10px; }
.logo-login img { width: 280px; max-width: 86%; height: auto; }
.box-login .sottotitolo { text-align: center; font-size: 13.5px; color: var(--testo-2); margin-bottom: 24px; }
.box-login .piede { margin-top: 18px; font-size: 12.5px; color: var(--testo-2); text-align: center; }
.box-login .piede b { color: var(--blu); }
.login-link { text-align: center; margin-top: 12px; font-size: 13.5px; }

/* ------------------------------------------------------------ CAMPI */
.campo { margin-bottom: 14px; min-width: 0; }
.campo label { display: block; font-size: 12px; font-weight: 700; color: var(--testo-2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--linea-2); border-radius: 10px; background: #fff; font-size: 16px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--blu-chiaro); box-shadow: 0 0 0 3px rgba(21,71,214,.14); }
.campo .aiuto { font-size: 12.5px; color: var(--testo-2); margin-top: 4px; }
.campo-occhio { position: relative; }
.campo-occhio input { padding-right: 44px; }
.occhio { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; font-size: 17px; padding: 4px 6px; opacity: .6; }
.griglia-2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .griglia-2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ PULSANTI */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border: 1px solid transparent; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; background: none; text-decoration: none; transition: filter .15s, transform .06s; }
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--blu); color: #fff; }
.btn-primario:hover { filter: brightness(.92); }
.btn-acqua { background: var(--acqua); color: #052b26; }
.btn-chiaro { background: #fff; color: var(--testo); border-color: var(--linea-2); }
.btn-chiaro:hover { background: var(--superficie-2); }
.btn-rosso { background: var(--rosso-bg); color: var(--rosso); }
.btn-piccolo { padding: 6px 11px; font-size: 13px; border-radius: 9px; }
.btn-largo { width: 100%; }
.btn-faceid { margin-top: 10px; border-color: var(--acqua); background: #e7faf7; color: var(--blu); }
.btn-icona { border: none; background: none; cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 8px; }
.btn-icona:hover { background: var(--grigio-bg); }

.avviso { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
.avviso.errore { background: var(--rosso-bg); color: var(--rosso); }
.avviso.ok { background: var(--verde-bg); color: var(--verde); }
.avviso.info { background: var(--blu-bg); color: var(--blu); }

/* ------------------------------------------------------------ INTESTAZIONE */
.barra-alta { position: sticky; top: 0; z-index: 50; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 22px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--linea), 0 4px 16px rgba(11,46,158,.06); }
.barra-alta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--blu) 0%, var(--blu-chiaro) 45%, var(--acqua) 100%); }
.barra-alta .marchio img { height: 40px; width: auto; display: block; }
.barra-alta .spazio { flex: 1; }
.utente-btn { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: 4px 14px 4px 4px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--blu), var(--acqua)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; letter-spacing: .5px; }
.esci { background: var(--superficie-2); color: var(--blu); border: 1px solid var(--linea); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; }

/* ------------------------------------------------------------ MENU A PILLOLE */
.menu { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 16px 16px 0; }
.menu button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--linea); background: rgba(255,255,255,.85); color: var(--testo-2); font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: var(--ombra); }
.menu button:hover { color: var(--blu); }
.menu button.attivo { background: var(--blu); border-color: var(--blu); color: #fff; }

/* ------------------------------------------------------------ CONTENUTO */
.contenitore { max-width: 1180px; margin: 0 auto; padding: 26px 22px 60px; }
.saluto { text-align: center; margin: 8px 0 28px; }
.saluto h1 { font-size: 30px; color: var(--blu-scuro); letter-spacing: -.02em; line-height: 1.2; }
.saluto p { color: var(--testo-2); margin-top: 6px; font-size: 15px; }
.saluto .data { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--blu-chiaro); background: rgba(255,255,255,.8); border: 1px solid var(--linea); padding: 3px 12px; border-radius: 999px; }

.titolo-pagina { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.titolo-pagina h2 { font-size: 22px; color: var(--blu-scuro); flex: 1; min-width: 200px; }
.nota { color: var(--testo-2); font-size: 13.5px; }

/* ------------------------------------------------------------ TESSERE DELLE APP */
.griglia-app { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tessera { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--ombra); text-decoration: none; color: inherit; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.tessera:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); border-color: #c9d6f7; }
.tessera .testa { height: 120px; display: flex; align-items: center; justify-content: center; padding: 18px 26px; background: linear-gradient(180deg, #f6f9ff, #fff); border-bottom: 1px solid var(--linea); }
.tessera .testa img { max-width: 100%; max-height: 78px; object-fit: contain; }
.tessera .corpo { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tessera .descr { color: var(--testo-2); font-size: 14px; flex: 1; }
.tessera .piede-t { display: flex; align-items: center; gap: 10px; }
.tessera .apri { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--blu); color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px; }
.tessera:hover .apri { background: var(--blu-chiaro); }
.tessera.spenta { opacity: .6; pointer-events: none; }
.tessera.spenta .apri { background: var(--grigio); }

.stato { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--testo-2); }
.stato::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--linea-2); }
.stato.ok { color: var(--verde); } .stato.ok::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.stato.attenzione { color: var(--arancio); } .stato.attenzione::before { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.stato.ko { color: var(--rosso); } .stato.ko::before { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.16); }
.stato.attesa::before { animation: pulsa 1s infinite alternate; }
@keyframes pulsa { from { opacity: .3; } to { opacity: 1; } }

.faceid-invito { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--acqua); border-radius: 14px; padding: 12px 16px; margin: 0 auto 22px; max-width: 760px; font-size: 13.5px; box-shadow: var(--ombra); }
.faceid-invito .piccolo { color: var(--testo-2); font-size: 12.5px; }

/* ------------------------------------------------------------ RIQUADRI, TABELLE */
.riquadro { background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 18px 20px; margin-bottom: 16px; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--testo-2); padding: 10px 12px; border-bottom: 1px solid var(--linea); background: var(--superficie-2); }
.tabella td { padding: 11px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: none; }
.tabella .azioni { white-space: nowrap; text-align: right; }
.tabella-box { background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden; }
.chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--blu-bg); color: var(--blu); margin: 2px 4px 2px 0; white-space: nowrap; }
.chip.acqua { background: #e2f8f4; color: #0b7a6c; }
.chip.grigio { background: var(--grigio-bg); color: var(--grigio); }
.chip.rosso { background: var(--rosso-bg); color: var(--rosso); }
.debole { color: var(--testo-2); font-size: 12.5px; }

/* scheda applicazione (pagina amministratore) */
.scheda-app { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
.scheda-app .logo-box { background: linear-gradient(180deg, #f6f9ff, #fff); border: 1px solid var(--linea); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 14px; height: 96px; }
.scheda-app .logo-box img { max-width: 100%; max-height: 64px; }
.chiave-riga { display: flex; gap: 8px; align-items: center; background: var(--superficie-2); border: 1px dashed var(--linea-2); border-radius: 10px; padding: 8px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; overflow: hidden; }
.chiave-riga .nome-var { font-weight: 700; color: var(--blu); white-space: nowrap; }
.chiave-riga .valore { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spunte { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.spunta { display: flex; align-items: center; gap: 9px; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: 14px; background: #fff; }
.spunta input { width: 17px; height: 17px; accent-color: var(--blu); }
.spunta img { height: 18px; width: auto; }

/* ------------------------------------------------------------ MODALE, BRINDISI */
.modale-fondo { position: fixed; inset: 0; z-index: 100; background: rgba(7,28,99,.38); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 20px; overflow-y: auto; }
.modale { background: #fff; width: 100%; max-width: 620px; border-radius: 18px; box-shadow: var(--ombra-alta); padding: 24px; }
.modale h3 { font-size: 19px; color: var(--blu-scuro); margin-bottom: 14px; }
.modale .pulsanti { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.brindisi { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--blu-scuro); color: #fff; padding: 11px 20px; border-radius: 999px; z-index: 200; box-shadow: var(--ombra-alta); font-weight: 600; font-size: 14px; max-width: 92vw; text-align: center; }
.brindisi.errore { background: var(--rosso); }
.password-grande { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; font-weight: 800; letter-spacing: 1px; text-align: center; background: var(--blu-bg); color: var(--blu); padding: 12px; border-radius: 12px; margin: 10px 0; user-select: all; }

/* ------------------------------------------------------------ TELEFONO */
@media (max-width: 720px) {
  .barra-alta { height: 58px; padding: 0 12px; gap: 8px; }
  .barra-alta .marchio img { height: 32px; }
  .utente-nome { display: none; }
  .utente-btn { padding: 3px; }
  .menu { display: grid; grid-template-columns: repeat(2, 1fr); padding: 12px 12px 0; }
  .menu button { justify-content: center; padding: 9px 8px; font-size: 13.5px; }
  .contenitore { padding: 18px 14px 50px; }
  .saluto h1 { font-size: 24px; }
  .griglia-app { grid-template-columns: 1fr; gap: 14px; }
  .tessera .testa { height: 96px; }
  .tessera .testa img { max-height: 60px; }
  .scheda-app { grid-template-columns: 1fr; }
  .tabella thead { display: none; }
  .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; width: 100%; }
  .tabella tr { border-bottom: 1px solid var(--linea); padding: 8px 4px; }
  .tabella td { border: none; padding: 4px 10px; }
  .tabella .azioni { text-align: left; }
  .box-login { padding: 28px 22px 24px; }
}
/* caselle di spunta dentro i campi: testo normale, non etichetta maiuscola */
.campo .spunta { display: flex; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--testo); margin: 0; }
.campo .spunta input, .spunta input { width: 17px !important; height: 17px; padding: 0; flex: none; }

/* tabella «chi può aprire cosa» */
.matrice-box { overflow-x: auto; }
.matrice th.centro, .matrice td.centro { text-align: center; }
.matrice th { vertical-align: bottom; }
.matrice .mini-logo { height: 16px; width: auto; display: block; margin: 0 auto 4px; }
.matrice input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--blu); cursor: pointer; }
.matrice input[type=checkbox]:disabled { cursor: not-allowed; opacity: .55; }
.matrice tbody tr:hover td { background: #f6f9ff; }
@media (max-width: 720px) {
  .matrice td.centro { display: inline-flex !important; width: auto !important; align-items: center; gap: 6px; padding: 4px 10px 4px 0 !important; font-size: 13px; }
  .matrice td.centro::before { content: attr(data-etichetta); color: var(--testo-2); font-weight: 600; }
}