/* ==========================================================================
   EDITOR DELL'AVATAR DEL MEDICO (public/js/avatar-medico.js)
   Pensato prima per il telefono (360-390 px): anteprima grande fissa in
   alto, schede in una riga che scorre, scelte da almeno 44 px, niente che
   dipenda dal passaggio del mouse. Sul computer tre colonne: anteprima,
   elenco delle schede, scelte. Tema notte (predefinito) e giorno
   (html[data-tema="giorno"]). Nessuna classe Bootstrap.
   Chi integra l'editor puo' cambiare:
     --avm-pannello     colore dietro l'anteprima fissa (deve essere pieno)
     --avm-sticky-top   distanza dall'alto dell'anteprima fissa
   ========================================================================== */
.avm{
    --avm-pannello:#1E293B;
    --avm-campo:#172234;
    --avm-testo:#E2E8F0;
    --avm-forte:#F8FAFC;
    --avm-tenue:#A3B1C6;
    --avm-accento:#22D3EE;
    --avm-bordo-scelta:#71809A;        /* 3,66:1 sul pannello */
    --avm-scelta-attiva:rgba(34,211,238,.12);
    --avm-sec-bordo:rgba(56,189,248,.6);   /* 3,4:1 sul pannello (con .45 sarebbe sotto 3:1) */
    --avm-sec-testo:#7DD3FC;
    --avm-sec-fondo:transparent;
    --avm-sec-sopra:rgba(56,189,248,.12);
    --avm-scheda-testo:#CBD5E1;
    --avm-scheda-attiva-fondo:rgba(34,211,238,.14);
    --avm-scheda-attiva-testo:#F8FAFC;
    --avm-scheda-sopra:rgba(148,163,184,.12);
    --avm-riga:rgba(148,163,184,.18);  /* separa la testata fissa dalle scelte */
    --avm-fuoco:#22D3EE;
    --avm-spunta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230F1929' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --avm-sticky-top:0px;
    container-type:inline-size;
    color:var(--avm-testo);
    font-size:16px;
    line-height:1.4;
    -webkit-text-size-adjust:100%;
}
html[data-tema="giorno"] .avm{
    --avm-pannello:#FFFFFF;
    --avm-campo:#F8FAFC;
    --avm-testo:#1F2937;
    --avm-forte:#0F172A;
    --avm-tenue:#475569;
    --avm-accento:#0E7490;
    --avm-bordo-scelta:#8391A5;        /* 3,2:1 sul bianco */
    --avm-scelta-attiva:#E6F4F7;
    --avm-sec-bordo:#0E7490;
    --avm-sec-testo:#0E7490;
    --avm-sec-fondo:#EAF6F9;
    --avm-sec-sopra:#D5EEF3;
    --avm-scheda-testo:#334155;
    --avm-scheda-attiva-fondo:#E6F4F7;
    --avm-scheda-attiva-testo:#0E7490;
    --avm-scheda-sopra:#F1F5F9;
    --avm-riga:#E2E8F0;
    --avm-fuoco:#0E7490;
    --avm-spunta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.avm *, .avm *::before, .avm *::after{ box-sizing:border-box; }
.avm button{ font-family:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.avm button:focus{ outline:none; }
.avm button:focus-visible, .avm .avm-pannello:focus-visible{
    outline:3px solid var(--avm-fuoco); outline-offset:2px;
}
.avm [hidden]{ display:none !important; }

/* ---------- anteprima grande, fissa, e le due azioni secondarie ---------- */
.avm-testata{
    position:-webkit-sticky; position:sticky; top:var(--avm-sticky-top); z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:12px 0 10px; background:var(--avm-pannello);
}
.avm-anteprima{
    flex:0 0 auto; width:clamp(128px, 40vw, 168px); aspect-ratio:1/1; border-radius:50%; overflow:hidden;
    box-shadow:0 0 0 3px var(--avm-pannello), 0 0 0 5px var(--avm-accento), 0 12px 28px rgba(0,0,0,.28);
    margin:5px;
}
.avm-anteprima svg{ display:block; width:100%; height:100%; }
/* Casuale e Annulla modifica: piccoli, senza fondo, uno accanto all'altro */
.avm-azioni{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.avm-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:44px; padding:0 14px; border-radius:999px; cursor:pointer;
    background:transparent; border:1px solid var(--avm-sec-bordo); color:var(--avm-sec-testo);
    font-size:15px; font-weight:600; line-height:1.2; white-space:nowrap;
}
.avm-btn svg{ flex:0 0 auto; }
.avm-btn:hover:not(:disabled){ background:var(--avm-sec-sopra); }
.avm-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- schede: una sola riga che scorre (telefono) ---------- */
.avm-schede{
    display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; padding:4px 3px 10px; margin:0 -3px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    /* fisse sotto l'anteprima mentre si scorrono le scelte */
    position:-webkit-sticky; position:sticky; top:calc(var(--avm-sticky-top) + var(--avm-alt-testata, 0px)); z-index:2;
    background:var(--avm-pannello); border-bottom:1px solid var(--avm-riga);
}
.avm-schede::-webkit-scrollbar{ display:none; }
/* sfumatura a destra: fa capire che le schede continuano */
.avm-schede::after{
    content:""; position:-webkit-sticky; position:sticky; right:-3px; flex:0 0 40px; margin-left:-40px;
    background:linear-gradient(90deg, rgba(0,0,0,0), var(--avm-pannello) 85%); pointer-events:none;
}
.avm-schede[data-scorre="no"]::after, .avm-schede[data-fine="si"]::after{ display:none; }
.avm-scheda{
    flex:0 0 auto; display:flex; align-items:center; min-height:44px; padding:0 15px; border-radius:999px; cursor:pointer;
    border:1px solid transparent; background:transparent; color:var(--avm-scheda-testo);
    font-size:16px; font-weight:600; line-height:1; white-space:nowrap; scroll-snap-align:start;
}
.avm-scheda:hover:not([aria-selected="true"]){ background:var(--avm-scheda-sopra); }
.avm-scheda[aria-selected="true"]{
    background:var(--avm-scheda-attiva-fondo); border-color:var(--avm-accento);
    color:var(--avm-scheda-attiva-testo); font-weight:700;
}

/* ---------- gruppi di scelte, compatti e in griglie ordinate ---------- */
.avm-pannello{ padding:14px 0 8px; border-radius:12px; }
.avm-gruppo{ margin:0 0 20px; }
.avm-gruppo:last-child{ margin-bottom:4px; }
.avm-gruppo-titolo{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
    margin:0 0 10px; font-size:16px; font-weight:700; color:var(--avm-forte);
}
/* il nome del colore scelto, accanto al titolo */
.avm-valore{ font-weight:500; color:var(--avm-tenue); }
.avm-nota{ margin:0; font-size:15px; line-height:1.45; color:var(--avm-tenue); }
.avm-scelte{ display:grid; gap:8px; }
/* 96 px: "Rettangolare" e "Chiarissima" stanno nella casella senza essere tagliate */
.avm-scelte-mini{ grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); }
.avm-scelta{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px;
    min-width:44px; min-height:44px; padding:7px 3px 9px; border-radius:12px; cursor:pointer;
    border:1px solid var(--avm-bordo-scelta); background:var(--avm-campo); color:var(--avm-testo);
    font-size:15px; font-weight:500; line-height:1.2; text-align:center;
}
.avm-scelta:hover:not([aria-pressed="true"]){ border-color:var(--avm-accento); }
.avm-scelta[aria-pressed="true"]{
    border:2px solid var(--avm-accento); padding:6px 2px 8px; background:var(--avm-scelta-attiva);
    color:var(--avm-forte); font-weight:700;
}
.avm-scelta[aria-pressed="true"]::after{
    content:""; position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%;
    background:var(--avm-accento) var(--avm-spunta) center/14px no-repeat;
}
.avm-scelta-testo{ display:block; max-width:100%; overflow-wrap:normal; word-break:normal; }
.avm-mini{ display:block; width:64px; height:64px; border-radius:10px; overflow:hidden; background:#0E8FAD; }
.avm-mini svg{ display:block; width:100%; height:100%; }

/* la figura: due pulsanti affiancati, un volto piccolo e il nome */
.avm-scelte-base{ grid-template-columns:repeat(2, minmax(0, 172px)); }
.avm-scelte-base .avm-scelta{ flex-direction:row; justify-content:flex-start; gap:10px; min-height:56px; padding:5px 12px 5px 5px; }
.avm-scelte-base .avm-scelta[aria-pressed="true"]{ padding:4px 11px 4px 4px; }
.avm-scelte-base .avm-scelta[aria-pressed="true"]::after{ top:50%; right:10px; margin-top:-10px; }
.avm-scelte-base .avm-mini{ width:44px; height:44px; border-radius:50%; flex:0 0 auto; }
.avm-scelte-base .avm-scelta-testo{ font-size:16px; }

/* i colori: campioni tondi, il nome e' nel titolo del gruppo e nel suggerimento */
/* 7 campioni da 44 px stanno su una riga anche a 360 px */
.avm-scelte-colori{ display:flex; flex-wrap:wrap; gap:2px 3px; }
.avm-scelta.avm-colore,
.avm-scelta.avm-colore[aria-pressed="true"]{
    width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:50%;
    justify-content:center; background:transparent;
}
.avm-campione{
    display:block; width:36px; height:36px; border-radius:50%;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.25), 0 0 0 1px var(--avm-bordo-scelta);
}
.avm-colore:hover:not([aria-pressed="true"]) .avm-campione{ box-shadow:inset 0 0 0 1px rgba(15,23,42,.25), 0 0 0 2px var(--avm-accento); }
/* l'anello resta dentro i 44 px del pulsante: non spunta ai lati della testata fissa */
.avm-colore[aria-pressed="true"] .avm-campione{
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.25), 0 0 0 2px var(--avm-pannello), 0 0 0 4px var(--avm-accento);
}
.avm-scelta.avm-colore[aria-pressed="true"]::after{ top:0; right:0; width:18px; height:18px; background-size:12px; }
.avm .avm-colore:focus-visible{ outline-offset:0; }

.avm-annuncio{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- schermi medi: anteprima a sinistra, schede e scelte a destra ---------- */
@container (min-width: 600px){
    .avm-interno{
        display:grid; grid-template-columns:minmax(180px, 220px) minmax(0, 1fr);
        grid-template-areas:"testata schede" "testata pannello"; grid-template-rows:auto 1fr;
        gap:0 24px; align-items:start;
    }
    .avm-testata{ grid-area:testata; top:calc(var(--avm-sticky-top) + 10px); padding:10px 0 0; background:transparent; }
    .avm-anteprima{ width:calc(100% - 10px); max-width:220px; }
    .avm-azioni{ flex-direction:column; align-items:stretch; width:100%; max-width:220px; gap:6px; }
    .avm-schede{ grid-area:schede; top:var(--avm-sticky-top); padding-top:12px; }
    .avm-pannello{ grid-area:pannello; }
    .avm-mini{ width:68px; height:68px; }
    .avm-scelte-mini{ grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ---------- computer: anteprima | elenco delle schede | scelte ---------- */
@container (min-width: 820px){
    .avm-interno{
        grid-template-columns:minmax(200px, 236px) 172px minmax(0, 1fr);
        grid-template-areas:"testata schede pannello"; grid-template-rows:auto;
    }
    .avm-anteprima{ max-width:226px; }
    .avm-azioni{ max-width:226px; }
    .avm-schede{
        flex-direction:column; gap:4px; overflow:visible; margin:0; padding:14px 0 0;
        top:var(--avm-sticky-top); background:transparent; border:0;
    }
    .avm-schede::after{ display:none; }
    .avm-scheda{ width:100%; border-radius:10px; padding:0 14px; }
    .avm-pannello{ padding-top:14px; }
}

/* ---------- telefoni stretti (fino a 340 px di editor) ---------- */
@container (max-width: 340px){
    .avm-btn{ padding:0 12px; }
    .avm-scelta-testo{ letter-spacing:-.01em; }
}

@media (prefers-reduced-motion: no-preference){
    .avm-scelta, .avm-scheda, .avm-btn, .avm-campione{ transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
}