/* ==========================================================================
   PediaCall — sistema di design
   --------------------------------------------------------------------------
   FONTE: le mockup di C. Rosafio e L. Venturelli, «MOCK UP POC FASE 1»,
   10 luglio 2026, in `da cristiano rosafio/`. Non sono un riferimento di
   atmosfera: dichiarano la tavolozza con i codici esadecimali, la tipografia,
   il linguaggio dei componenti e l'architettura dell'informazione di entrambe
   le interfacce. Questo file le traduce in codice.

   DUE SCOSTAMENTI, ENTRAMBI MISURATI E DICHIARATI

   1. `#4F7CAC`, il primario delle mockup, ha un contrasto di 4,36:1 sul
      bianco — appena sotto il 4,5:1 che WCAG chiede al testo normale, in
      entrambi i versi. Resta il colore d'identità del prodotto, e lo si usa
      per le superfici grandi e le icone; ciò che porta testo usa
      `--blu-testo` (#3F648C, 6,15:1). Nessuno vede la differenza di tinta;
      chi legge il telefono al buio vede la differenza di leggibilità.

   2. `#6FB98F`, il secondario, sta a 2,33:1. Resta com'è dov'è una
      superficie o un pallino di stato; per il testo esiste `--verde-testo`
      (#347454, 5,57:1).

   Il resto della tavolozza è adottato alla lettera.
   ========================================================================== */

:root {
  /* --- identità: i colori delle mockup, invariati --------------------- */
  --blu: #4f7cac;
  --verde: #6fb98f;
  --neutro-1: #f5f7fa;
  --neutro-2: #eceff3;
  --neutro-3: #374151;
  --avviso: #f6dda1;
  --informativo: #e6f0fa;
  --attenzione: #f7b2b2;
  --bozza: #f6a623;

  /* --- varianti leggibili, derivate dalle stesse tinte ---------------- */
  --blu-testo: #3f648c;   /* 6,15:1 su bianco */
  --blu-scuro: #2f5273;   /* 8,15:1 — stati premuti, titoli */
  --blu-tenue: #dce7f3;   /* superfici e bordi in famiglia */
  --verde-testo: #347454; /* 5,57:1 su bianco */
  --verde-tenue: #e8f4ee;
  --ambra-testo: #8a5a06;
  --rosso: #b4433d;
  --rosso-tenue: #fdeeee;
  --rosso-bordo: #f6d6d6;

  /* --- le sei tinte, in coppie fondo/inchiostro -----------------------
     Erano scritte a mano dentro `.tinta-*`. Sono token perché la barra di
     navigazione usa le stesse coppie senza essere una pastiglia clinica: due
     posti, un valore solo. Ogni coppia è misurata — vedi `.pastiglia`. */
  --tinta-blu-fondo: #d3e4f8;    --tinta-blu-inchiostro: #255f9e;    /* 5,06:1 */
  --tinta-verde-fondo: #d2efdf;  --tinta-verde-inchiostro: #1a7a4c;  /* 4,40:1 */
  --tinta-ambra-fondo: #fbe6bd;  --tinta-ambra-inchiostro: #8a5306;  /* 5,16:1 */
  --tinta-viola-fondo: #e4d9fb;  --tinta-viola-inchiostro: #5734b4;  /* 6,12:1 */
  --tinta-acqua-fondo: #c8eaed;  --tinta-acqua-inchiostro: #0f6f7a;  /* 4,60:1 */
  --tinta-indaco-fondo: #dbdefc; --tinta-indaco-inchiostro: #2f36ab; /* 7,10:1 */

  /* --- le tinte accese ------------------------------------------------
     La stessa famiglia delle sei, portata alla saturazione che su bianco
     ancora regge. **Non sono colori da testo**: la più leggibile sta a
     3,89:1, sotto il 4,5:1 che WCAG chiede al testo normale. Servono ai
     bagliori, ai bordi e alle superfici — dove basta il 3:1 di un oggetto
     grafico — e il testo continua a usare le varianti scure qui sopra. È la
     stessa disciplina già applicata a `--blu` e `--verde`.

     In componenti separate perché si compongono con l'alfa: `rgb(var(--acceso-blu) / .3)`. */
  --acceso-blu: 47 127 240;
  --acceso-verde: 18 185 129;
  --acceso-viola: 124 77 255;
  --acceso-acqua: 6 182 212;
  --acceso-ambra: 245 158 11;
  --acceso-indaco: 79 70 229;

  /* --- il vetro -------------------------------------------------------
     Le superfici non sono bianche piene: sono bianco trasparente sopra un
     fondo colorato, e prendono luce da ciò che hanno dietro. Ha senso solo
     perché dietro c'è qualcosa — vedi l'aurora poco più giù. Senza quella,
     la sfocatura sarebbe un effetto per l'effetto. */
  --vetro: rgba(255, 255, 255, .60);
  --vetro-forte: rgba(255, 255, 255, .78);
  --vetro-pieno: rgba(255, 255, 255, .92);
  --vetro-bordo: rgba(255, 255, 255, .9);
  --sfocatura: saturate(180%) blur(16px);

  /* Il bagliore: un'ombra tinta del colore dell'oggetto, con scostamento e
     sfocatura vere. Non è l'alone senza scostamento, che resta bandito. */
  --ombra-vetro: 0 1px 2px rgba(38, 50, 80, .05), 0 14px 34px -16px rgba(38, 50, 80, .30);

  /* --- i colori del marchio -------------------------------------------
     Campionati dal lettering di `marchio-pediacall.png`, non stimati a occhio:
     «PediaCall» è una sfumatura continua da #025999 a #14a48f, blu profondo a
     sinistra e verde-acqua a destra.

     Il blu entra così com'è. Il verde del logo sta a 3,04:1 sul bianco — sotto
     il minimo perfino per il testo grande — quindi è scurito lungo la propria
     tinta (171°) finché non regge: stesso colore, più leggibile. La stessa
     disciplina già applicata a `--blu` e `--verde` in cima al file. */
  --marchio-blu: #025999;   /* 7,07:1 sul chiaro dell'aurora, 5,42:1 sul carico */
  --marchio-verde: #0a806e; /* 4,73:1 e 3,62:1 — sopra il 3:1 del testo grande ovunque */

  /* --- superfici ------------------------------------------------------ */
  --sfondo: var(--neutro-1);
  --carta: #ffffff;
  --bordo: #e3e8ee;
  --bordo-forte: #cfd6de;

  /* --- inchiostro ----------------------------------------------------- */
  --testo: var(--neutro-3);      /* 10,31:1 su bianco */
  --testo-medio: #4b5563;        /*  7,56:1 */
  --testo-tenue: #5f6c7a;        /*  5,00:1 sul neutro-1 */

  /* --- forma: «card arrotondate con elevazione leggera» ---------------- */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --r-xl: 22px;
  --r-pillola: 999px;

  /* L'elevazione è leggera per prescrizione delle mockup: un'ombra con
     scostamento e sfocatura morbida, mai un alone colorato senza scostamento. */
  --ombra-s: 0 1px 2px rgba(55, 65, 81, .05);
  --ombra-m: 0 1px 2px rgba(55, 65, 81, .04), 0 8px 20px -12px rgba(55, 65, 81, .18);
  --ombra-l: 0 2px 4px rgba(55, 65, 81, .04), 0 18px 36px -18px rgba(55, 65, 81, .22);

  /* --- caratteri: «Inter / SF Pro» ------------------------------------
     Inter non si carica da un CDN: un prodotto sanitario non deve dipendere
     da un terzo per rendere leggibile una domanda, e la richiesta partirebbe
     comunque prima del consenso ai cookie. La pila di sistema dà SF Pro su
     Apple e Segoe su Windows, che è ciò che le mockup mostrano; Inter entra
     per prima appena qualcuno la ospita insieme al resto. */
  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numeri: "SF Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* --------------------------------------------------------------- azzeramento */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   L'AURORA

   Il fondo di tutta l'applicazione: bianco leggermente freddo con quattro
   campiture larghissime nelle tinte accese. Non è decorazione — è ciò che dà
   al vetro qualcosa da rifrangere. Una superficie translucida sopra il bianco
   pieno è indistinguibile dal bianco pieno.

   **Resta chiaro sempre.** Le campiture stanno sotto il 22% di alfa su un
   bianco: il fondo più carico che si può ottenere è circa #cee0fb, dove il
   testo medio legge ancora 5,64:1. Il neon qui non è luce che esce dal buio,
   è luce colorata che cade su una superficie bianca.

   Sta su un elemento fisso a `z-index: -1` di `body`, perché i telai delle due
   interfacce sono posizionati e la loro tinta piena coprirebbe qualunque
   fondo: per questo entrambi diventano trasparenti.
   ========================================================================== */

body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 10% 4%, rgb(var(--acceso-blu) / .22), transparent 60%),
    radial-gradient(42rem 32rem at 90% 0%, rgb(var(--acceso-verde) / .19), transparent 62%),
    radial-gradient(38rem 30rem at 74% 76%, rgb(var(--acceso-viola) / .15), transparent 64%),
    radial-gradient(36rem 28rem at 6% 92%, rgb(var(--acceso-acqua) / .17), transparent 64%),
    #fbfcfe;
}

/* Una superficie di vetro: bianco translucido, un filo di luce sul bordo alto
   e la sfocatura di ciò che passa sotto. Dove la sfocatura non c'è, il bianco
   si fa quasi pieno — altrimenti resterebbe il testo su un fondo colorato. */
.vetro {
  background: var(--vetro);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  border: 1px solid var(--vetro-bordo);
  box-shadow: var(--ombra-vetro), inset 0 1px 0 rgba(255, 255, 255, .7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vetro { background: var(--vetro-pieno); }
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blu-testo); }

:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

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

/* --------------------------------------------------------------- tipografia */

.titolo-schermo { font-size: 1.375rem; font-weight: 680; letter-spacing: -.02em; }
.tenue { color: var(--testo-tenue); }
.medio { color: var(--testo-medio); }
.piccolo { font-size: .875rem; }
.minuscolo { font-size: .8125rem; }
.numeri { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ pulsanti
   «Pulsante primario con icona e freccia», «azioni principali ben
   evidenziate»: pieno, pillola, testo bianco sul blu leggibile. */

.btn {
  --btn-sfondo: var(--vetro-forte);
  --btn-testo: var(--testo);
  --btn-bordo: var(--vetro-bordo);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.25rem;
  border: 1px solid var(--btn-bordo);
  border-radius: var(--r-pillola);
  background: var(--btn-sfondo); color: var(--btn-testo);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  box-shadow: 0 1px 2px rgba(38, 50, 80, .05), inset 0 1px 0 rgba(255, 255, 255, .8);
  font-weight: 620; font-size: .9375rem;
  cursor: pointer; text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease,
              box-shadow 180ms ease, transform 80ms ease;
}
.btn:hover:not(:disabled) { background: var(--vetro-pieno); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* L'azione principale è l'unica cosa che emette luce invece di rifletterla:
   inchiostro pieno, e sotto un'ombra della propria tinta. Il bagliore ha
   scostamento e sfocatura — un alone senza scostamento resta decorazione. */
.btn-primario {
  --btn-sfondo: var(--blu-testo); --btn-testo: #fff; --btn-bordo: transparent;
  background-image: linear-gradient(160deg, rgb(var(--acceso-blu) / .55), transparent 62%);
  box-shadow:
    0 2px 4px rgb(var(--acceso-indaco) / .18),
    0 12px 26px -10px rgb(var(--acceso-blu) / .55),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-primario:hover:not(:disabled) {
  --btn-sfondo: var(--blu-scuro); background: var(--blu-scuro);
  background-image: linear-gradient(160deg, rgb(var(--acceso-blu) / .6), transparent 62%);
  box-shadow:
    0 2px 4px rgb(var(--acceso-indaco) / .2),
    0 16px 32px -10px rgb(var(--acceso-blu) / .7),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn-secondario { --btn-testo: var(--blu-testo); --btn-bordo: rgb(var(--acceso-blu) / .35); }
.btn-quieto { --btn-bordo: transparent; --btn-testo: var(--testo-medio); background: transparent; }
.btn-quieto:hover:not(:disabled) { background: var(--neutro-2); border-color: transparent; }
.btn-largo { width: 100%; }

/* --------------------------------------------------------------------- carte */

.carta {
  background: var(--vetro-forte);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-l);
  box-shadow: var(--ombra-vetro), inset 0 1px 0 rgba(255, 255, 255, .8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .carta { background: var(--vetro-pieno); }
}

/* ------------------------------------------------------------------- moduli */

.campo { display: flex; flex-direction: column; gap: .375rem; }
.campo > label { font-size: .875rem; font-weight: 600; color: var(--testo-medio); }

.campo input[type="text"], .campo input[type="email"], .campo input[type="password"],
.campo input[type="number"], .campo input[type="date"], .campo input[type="datetime-local"],
.campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: .75rem .875rem;
  border: 1.5px solid rgba(255, 255, 255, .9); border-radius: var(--r-m);
  background: var(--vetro-forte); color: var(--testo);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  box-shadow: inset 0 1px 2px rgba(38, 50, 80, .06);
  transition: border-color 140ms ease, box-shadow 180ms ease, background-color 140ms ease;
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
/* Il fuoco accende l'anello invece di ispessire il bordo: si vede da lontano
   e non sposta di un pixel ciò che sta intorno. */
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  background: var(--vetro-pieno);
  border-color: rgb(var(--acceso-blu) / .9);
  box-shadow: 0 0 0 4px rgb(var(--acceso-blu) / .18), 0 6px 18px -8px rgb(var(--acceso-blu) / .45);
}

/* -------------------------------------------------------- etichette di stato
   «Badge stati colorati: Nuovo / Aggiornato / Letto». Il colore dice in che
   stato è la lettura, mai quanto è grave il contenuto. */

.stato {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1875rem .5rem; border-radius: var(--r-pillola);
  font-size: .75rem; font-weight: 620; white-space: nowrap;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .9);
  color: var(--testo-medio);
}
/* Il colore dice in che stato è la lettura, mai quanto è grave il contenuto:
   per questo il bagliore è identico per tutti e tre e cambia solo la tinta. */
.stato-nuovo   { background: rgb(var(--acceso-verde) / .16); color: var(--verde-testo);
                 box-shadow: 0 2px 10px -4px rgb(var(--acceso-verde) / .7); }
.stato-inviato { background: rgb(var(--acceso-blu) / .15); color: var(--blu-testo);
                 box-shadow: 0 2px 10px -4px rgb(var(--acceso-blu) / .6); }
.stato-bozza   { background: rgb(var(--acceso-ambra) / .18); color: var(--ambra-testo);
                 box-shadow: 0 2px 10px -4px rgb(var(--acceso-ambra) / .7); }

/* ------------------------------------------------------------------- avvisi
   `.nota` riguarda il funzionamento dell'applicazione — un errore di rete,
   una password sbagliata. Non qualifica mai un contenuto clinico: in questo
   prodotto non esiste un avviso che dipenda da ciò che il genitore ha
   risposto. */

.nota {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .875rem 1rem;
  border: 1px solid rgb(var(--acceso-blu) / .28); border-radius: var(--r-m);
  background: rgb(var(--acceso-blu) / .11);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  box-shadow: 0 6px 20px -12px rgb(var(--acceso-blu) / .8);
  font-size: .875rem; color: var(--testo-medio); line-height: 1.55;
}
.nota .icona { flex: none; margin-top: .125rem; color: var(--blu-testo); }
.nota-errore {
  border-color: var(--rosso-bordo); background: var(--rosso-tenue); color: var(--rosso);
  box-shadow: 0 6px 20px -12px rgba(180, 67, 61, .55);
}
.nota-errore .icona { color: var(--rosso); }

/* -------------------------------------------------------------------- icone
   «Icone lineari e leggere»: un solo tratto, una sola griglia. */

.icona { display: block; flex: none; }

/* -------------------------------------------------------------- caricamento */

.scheletro {
  border-radius: var(--r-m);
  background: linear-gradient(90deg, var(--neutro-2) 25%, #e2e7ee 37%, var(--neutro-2) 63%);
  background-size: 400% 100%;
  animation: scorri 1.4s ease infinite;
}
@keyframes scorri { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --------------------------------------------------------------- struttura */

.pila { display: flex; flex-direction: column; }
.pila-s { gap: .5rem; }
.pila-m { gap: 1rem; }
.pila-l { gap: 1.5rem; }
.riga { display: flex; align-items: center; gap: .75rem; }
.riga-fra { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

/* ----------------------------------------------------------------- marchio */

.marchio { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; }
/* Il `<picture>` che avvolge il marchio non deve esistere per il layout: senza
   `display: contents` diventerebbe lui l'elemento della griglia o del flex, e
   tutte le regole scritte sull'immagine — allineamento, larghezza, margini —
   si applicherebbero a un contenitore invece che a lei. */
.marchio-contenitore { display: contents; }

/* Il segno e il nome prendono il blu del marchio vero, non il blu generico
   dell'interfaccia: sono la stessa cosa scritta in due modi, e finora erano di
   due blu diversi. */
.marchio-segno { flex: none; color: var(--marchio-blu); }
.marchio-nome { font-weight: 700; letter-spacing: -.02em; color: var(--marchio-blu); }

/* ------------------------------------------------- le pastiglie dei disturbi
   Il tondo colorato con l'icona del disturbo, come nelle mockup: serve a
   riconoscere una riga senza leggerla.

   Sei tinte, **nessuna rossa**. Su dieci percorsi affiancati un rosso diventa
   una graduatoria, e quella deduzione l'avremmo suggerita noi. Il rosso qui è
   di una cosa sola — l'uscita permanente verso il 112 — e se comparisse
   altrove smetterebbe di significare quella.

   L'assegnazione è in `icone-cliniche.js`: deriva dall'id del percorso, quindi
   è stabile fra una sessione e l'altra e non dice nulla sul contenuto. */

.pastiglia {
  width: 38px; height: 38px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
  /* Il rilievo: una luce dall'alto sul quadrato, un filo d'ombra sotto e una
     piccola ombra portata. È il volume che regge a 17 px — un rilievo vero,
     a quella dimensione, diventa una macchia. */
  background-image: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 58%);
  /* Il bagliore è della tinta della pastiglia, non grigio: `--alone` arriva
     dalla classe `.tinta-*`. È identico per tutte e sei — un percorso non
     brilla più di un altro, o il colore diventerebbe una graduatoria. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 3px 10px -3px rgb(var(--alone, 55 65 81) / .55);
}
.pastiglia-piccola { width: 30px; height: 30px; border-radius: 10px; }
.pastiglia-grande { width: 46px; height: 46px; border-radius: 15px; }

/* Duotone: i tracciati marcati `pieno` prendono un velo della propria tinta,
   gli altri restano di tratto. Quali siano è deciso icona per icona in
   `icone-cliniche.js`, non «il primo»: in alcune il primo tracciato è una
   linea, e riempirla non produce nulla o produce una macchia. */
.pastiglia .icona path.pieno { fill: currentColor; fill-opacity: .22; }

/* Le sei tinte. Nessuna è rossa: su dieci percorsi affiancati il rosso si
   legge come «più grave», e quella graduatoria la suggerirebbe l'interfaccia
   invece dei dati. Il rosso qui è di una cosa sola, l'uscita verso il 112.
   Ogni coppia è misurata, e i valori stanno accanto ai token in cima: la più
   bassa è il verde a 4,40:1, sopra il 3:1 che serve a un oggetto grafico e
   sopra anche il 4,5:1 del testo — perché la barra di navigazione ci scrive
   sopra un'etichetta. */
.tinta-blu    { background: var(--tinta-blu-fondo);    color: var(--tinta-blu-inchiostro); --alone: var(--acceso-blu); }
.tinta-verde  { background: var(--tinta-verde-fondo);  color: var(--tinta-verde-inchiostro); --alone: var(--acceso-verde); }
.tinta-ambra  { background: var(--tinta-ambra-fondo);  color: var(--tinta-ambra-inchiostro); --alone: var(--acceso-ambra); }
.tinta-viola  { background: var(--tinta-viola-fondo);  color: var(--tinta-viola-inchiostro); --alone: var(--acceso-viola); }
.tinta-acqua  { background: var(--tinta-acqua-fondo);  color: var(--tinta-acqua-inchiostro); --alone: var(--acceso-acqua); }
.tinta-indaco { background: var(--tinta-indaco-fondo); color: var(--tinta-indaco-inchiostro); --alone: var(--acceso-indaco); }

/* La tinta neutra delle sezioni della scheda: le sezioni non sono categorie
   da distinguere fra loro, sono i capitoli di un unico documento. */
.tinta-neutra { background: var(--neutro-2); color: var(--testo-medio); --alone: 55 65 81; }

/* ------------------------------------------------------------------ avatar
   Le mockup usano un ritratto; qui l'iniziale, perché una fotografia di un
   minore è un dato che non abbiamo e non chiediamo. */

.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(var(--acceso-blu) / .15); color: var(--blu-testo);
  box-shadow: 0 3px 12px -4px rgb(var(--acceso-blu) / .65), inset 0 1px 0 rgba(255,255,255,.6);
  font-weight: 680; font-size: .9375rem;
}
.avatar-grande { width: 48px; height: 48px; font-size: 1.0625rem; }