/* =========================================================================
   SEGRETERIA DEI CENTRI MEDICI: ACCESSO, CODICE SMS, PASSWORD, PROFILO
   (resources/views/segreteria/accesso/*, segreteria/profilo/*)

   Si carica dopo public/css/segreteria.css e ne usa la tavolozza (le
   variabili --sg-*, tema notte e giorno) e i pezzi comuni (sg-campo,
   sg-btn, sg-errore, sg-nota, sg-carta...). Qui solo quello che serve in
   piu': la scheda centrata delle pagine d'accesso, come quella dei
   professionisti (auth/partials/verifica-layout: cerchio con l'icona,
   titolo, campi, pulsante pieno), il campo del codice, il «Mostra» della
   password, la spunta di «Ricorda questo computer», il riquadro della prova
   in locale e i pezzi del profilo (tema, computer ricordati).

   Telefono: 16 px di margine (dal layout), aree di tocco da 44 px, niente
   scorrimento orizzontale. Contrasti come in segreteria.css (AA).
   ========================================================================= */

/* ---------------- La scheda delle pagine d'accesso ---------------- */
.sga-scheda{background:var(--sg-carta);border:1px solid var(--sg-bordo);border-radius:16px;box-shadow:var(--sg-ombra);
    padding:30px 22px 24px;}
.sga-icona{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#0E7490,#2563EB);color:#FFFFFF;font-size:1.3rem;}
.sga-titolo{margin:0 0 8px;text-align:center;font-size:1.5rem;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--sg-forte);}
.sga-sotto{margin:0 0 22px;text-align:center;font-size:.95rem;line-height:1.5;color:var(--sg-tenue);overflow-wrap:anywhere;}
.sga-sotto strong{color:var(--sg-forte);font-weight:700;}
.sga-sotto .sga-num{white-space:nowrap;}
.sga-scheda .sg-errore,.sga-scheda .sg-esito,.sga-scheda .sg-nota,.sga-scheda .sg-attenzione{margin-bottom:18px;line-height:1.45;overflow-wrap:anywhere;}
.sga-scheda form{margin:0;}
.sga-scheda .sg-campo{margin-bottom:16px;}
.sga-scheda .sg-campo label{font-size:.9rem;}
.sga-scheda .sg-campo input{min-height:48px;}
.sg-campo input[aria-invalid="true"]{border-color:var(--sg-per-bordo);}
.sga-scheda .sg-btn + .sg-btn{margin-top:12px;}

/* Il codice: grande, cifre larghe, al centro */
.sg-campo input.sga-codice{font-size:1.6rem;font-weight:800;letter-spacing:.45em;text-align:center;padding:8px 8px 8px calc(8px + .45em);
    font-variant-numeric:tabular-nums;}
.sg-campo input.sga-codice::placeholder{letter-spacing:.45em;color:var(--sg-tenue);opacity:.55;}

/* La password con «Mostra» (lo accende lo script: senza JavaScript resta nascosto) */
.sga-password{position:relative;}
.sga-password input{padding-right:96px;}
.sga-mostra{position:absolute;right:2px;top:2px;bottom:2px;min-width:88px;min-height:44px;padding:0 12px;border:0;border-radius:8px;
    background:transparent;color:var(--sg-link);font:700 .88rem/1 var(--sg-font);cursor:pointer;display:inline-flex;align-items:center;
    justify-content:center;gap:6px;}
.sga-mostra:hover{background:var(--sg-sec-sopra);}
.sga-regole{margin:-6px 0 16px;font-size:.84rem;color:var(--sg-tenue);}

/* «Ricorda questo computer»: casella e scritta toccabili */
.sga-spunta{display:flex;gap:12px;align-items:flex-start;margin:4px 0 20px;}
.sga-spunta input{width:22px;height:22px;margin:2px 0 0;flex-shrink:0;accent-color:#0E7490;cursor:pointer;}
.sga-spunta label{font-size:.95rem;line-height:1.4;color:var(--sg-testo);cursor:pointer;font-weight:600;}
.sga-spunta small{display:block;margin-top:3px;font-size:.82rem;font-weight:400;color:var(--sg-tenue);}

.sga-sicurezza{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:.84rem;line-height:1.45;color:var(--sg-tenue);}
.sga-sicurezza i{margin-top:3px;color:var(--sg-accento);flex-shrink:0;}

/* Il codice di prova (solo sul computer di sviluppo) */
.sga-scheda .sga-prova-codice{justify-content:center;text-align:center;border-style:dashed;}
.sga-prova-codice strong{font-size:1.15rem;letter-spacing:.15em;color:var(--sg-forte);}

/* Il piede della scheda: aiuto, uscita, link */
.sga-piede{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--sg-bordo);text-align:center;font-size:.88rem;line-height:1.5;color:var(--sg-tenue);}
.sga-piede p{margin:0 0 10px;}
.sga-piede p:last-child{margin-bottom:0;}
.sga-piede a{font-weight:700;white-space:nowrap;}
.sga-piede form{display:inline;margin:0;}
.sga-esci{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;
    color:var(--sg-link);font:700 .9rem/1 var(--sg-font);cursor:pointer;}
.sga-esci:hover{background:var(--sg-sec-sopra);}

/* La prova sul computer di sviluppo, sotto la scheda */
.sga-prova{margin-top:18px;padding:18px 20px;border:1px dashed var(--sg-nota-bordo);border-radius:16px;background:var(--sg-nota-fondo);}
.sga-prova h2{margin:0 0 6px;font-size:1rem;font-weight:800;color:var(--sg-forte);display:flex;align-items:center;gap:8px;}
.sga-prova h2 i{color:var(--sg-accento);}
.sga-prova p{margin:0 0 14px;font-size:.88rem;line-height:1.45;color:var(--sg-tenue);}
.sga-prova form{margin:0;}

/* ---------------- Il profilo ---------------- */
.sga-profilo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start;}
.sga-profilo .sg-carta{margin-bottom:0;}
.sga-colonna{display:flex;flex-direction:column;gap:18px;min-width:0;}
.sga-profilo .sg-dati dd{overflow-wrap:anywhere;}
.sga-profilo .sg-dati dd small{display:block;font-weight:400;font-size:.8rem;color:var(--sg-tenue);}
.sga-testo{margin:0 0 14px;font-size:.9rem;line-height:1.5;color:var(--sg-tenue);}
.sga-testo:last-child{margin-bottom:0;}
.sga-modulo .sg-campo{margin-bottom:14px;}
.sga-modulo .sg-campo:last-of-type{margin-bottom:6px;}

.sga-temi{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sga-tema{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 14px;border-radius:12px;
    border:1px solid var(--sg-bordo-forte);background:var(--sg-carta-2);color:var(--sg-testo);font:700 .95rem/1.2 var(--sg-font);cursor:pointer;}
.sga-tema:hover{border-color:var(--sg-sec-bordo);}
.sga-tema[aria-pressed="true"]{border-color:var(--sg-accento);background:var(--sg-accento-fondo);color:var(--sg-accento);
    box-shadow:inset 0 0 0 1px var(--sg-accento);}
.sga-tema i{font-size:1.05rem;}

.sga-computer{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;}
.sga-computer li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:11px 2px;border-top:1px solid var(--sg-bordo);}
.sga-computer li:first-child{border-top:0;}
.sga-computer-icona{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
    background:var(--sg-accento-fondo);color:var(--sg-accento);}
.sga-computer b{display:block;color:var(--sg-forte);font-size:.93rem;overflow-wrap:anywhere;}
.sga-computer small{display:block;color:var(--sg-tenue);font-size:.8rem;}
.sga-computer .sg-pillola{margin-left:6px;vertical-align:1px;}

@media (min-width: 768px){
    .sga-scheda{padding:38px 40px 30px;}
}
@media (max-width: 1023.98px){
    .sga-profilo{grid-template-columns:1fr;}
}
@media (max-width: 599.98px){
    .sga-titolo{font-size:1.35rem;}
    /* Il telefono: nei dati del profilo la voce sopra il valore (accanto,
       le voci andavano a capo e l'e-mail si spezzava a meta'). */
    .sga-profilo .sg-dati{grid-template-columns:minmax(0,1fr);gap:0;}
    .sga-profilo .sg-dati dt{margin-top:14px;}
    .sga-profilo .sg-dati dt:first-child{margin-top:0;}
    .sga-profilo .sg-dati dd{margin-top:2px;text-align:left;}
}