/* Aspetto dell'app allineato al sito nuovo (sito-www/assets/css/site.css): Nunito,
   sfondo «ghiaccio», schede a vetro, pulsanti blu, rosso solo per l'azione principale.
   Approvato dall'owner il 2026-10-15. Vale solo per l'app paziente (<html data-app="paziente">). */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/assets/fonts/nunito-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/assets/fonts/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root[data-app="paziente"] {
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #f6f8fb; --white: #ffffff; --ink: #0e2238; --muted: #566b84; --line: rgba(45, 96, 143, .22);
  --line-forte: rgba(45, 96, 143, .30);
  --teal-050: rgba(45, 96, 143, .08); --teal-dark: #2d608f;
  --card-bg: linear-gradient(180deg, #ffffff, #f0f4fa);
  --card-shadow: 0 14px 36px rgba(45, 96, 143, .09);
  --glass: rgba(255, 255, 255, .72); --glass-2: rgba(255, 255, 255, .86);
  --beam-1: rgba(206, 224, 243, .55); --beam-2: rgba(226, 231, 248, .5);
  --btn: linear-gradient(180deg, #3a74a8, #2d608f); --btn-shadow: 0 8px 22px rgba(45, 96, 143, .26);
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root[data-app="paziente"] {
    --bg: #060d16; --white: #0d1a28; --ink: #e4ecf4; --muted: #8a9db2; --line: rgba(178, 209, 239, .16); --line-forte: rgba(178, 209, 239, .24);
    --teal-050: rgba(178, 209, 239, .1); --teal-dark: #b2d1ef; --brand: #83afd6;
    --card-bg: linear-gradient(180deg, #12253a, #0a1521); --card-shadow: none;
    --glass: rgba(13, 26, 40, .55); --glass-2: rgba(6, 13, 22, .74);
    --beam-1: rgba(45, 96, 143, .42); --beam-2: rgba(131, 175, 214, .38);
    --btn-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  }
}

/* Sfondo «ghiaccio» con i due fasci di luce del sito */
:root[data-app="paziente"] body {
  font-family: inherit; background-color: var(--bg); color: var(--ink);
  background-image: radial-gradient(60% 45% at 85% -5%, var(--beam-1), transparent 70%),
                    radial-gradient(55% 40% at -10% 30%, var(--beam-2), transparent 70%);
  background-attachment: fixed;
}
:root[data-app="paziente"] input, :root[data-app="paziente"] select, :root[data-app="paziente"] textarea,
:root[data-app="paziente"] button { font-family: inherit; }

/* Barra in alto e schede a vetro */
:root[data-app="paziente"] .topbar, :root[data-app="paziente"] .tabs {
  background: var(--glass-2); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border-color: var(--line);
}
:root[data-app="paziente"] .tab { font-weight: 700; }
:root[data-app="paziente"] .tab.is-active { background: var(--teal-050); color: var(--teal-dark); }

/* Schede */
:root[data-app="paziente"] .card, :root[data-app="paziente"] .tile, :root[data-app="paziente"] .home-righe {
  background: var(--card-bg); border: 1px solid var(--line); box-shadow: var(--card-shadow); border-radius: var(--radius);
}
:root[data-app="paziente"] .tile--3d { background: var(--card-bg); }
:root[data-app="paziente"] h1 { color: var(--teal-dark); font-weight: 800; letter-spacing: -.02em; }
:root[data-app="paziente"] h2 { font-weight: 800; letter-spacing: -.01em; }

/* Pulsanti: principale blu sfumato, secondario a vetro con testo blu */
:root[data-app="paziente"] button.primary {
  background: var(--btn); box-shadow: var(--btn-shadow); border-radius: 12px; font-weight: 800;
}
:root[data-app="paziente"] button.primary:hover { background: linear-gradient(180deg, #3f7bb1, #285a86); }
:root[data-app="paziente"] button.ghost, :root[data-app="paziente"] .account-btn {
  background: var(--glass); color: var(--teal-dark); border: 1px solid var(--line); border-radius: 12px; font-weight: 700;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
:root[data-app="paziente"] input, :root[data-app="paziente"] select, :root[data-app="paziente"] textarea {
  background: var(--glass-2); border-color: var(--line); border-radius: 12px;
}

/* Prenota esame: pillole e giorni come i pulsanti del sito */
:root[data-app="paziente"] .pz-chip, :root[data-app="paziente"] .pz-giorno, :root[data-app="paziente"] .pz-ora:not(.is-occ):not(.is-on) {
  background: var(--glass-2); border-color: var(--line);
}
:root[data-app="paziente"] .pz-chip.is-on, :root[data-app="paziente"] .pz-giorno.is-on { background: var(--btn); box-shadow: var(--btn-shadow); border-color: transparent; }

/* Ritocchi UX (2026-10-15): bordi un po' più marcati, così schede e orari restano
   distinti anche al sole o con lo schermo poco luminoso. */
:root[data-app="paziente"] .card, :root[data-app="paziente"] .tile, :root[data-app="paziente"] .home-righe { border-color: var(--line); }
:root[data-app="paziente"] .pz-ora:not(.is-occ):not(.is-on), :root[data-app="paziente"] .pz-giorno:not(.is-on),
:root[data-app="paziente"] .pz-chip:not(.is-on) { border-color: var(--line-forte); }
:root[data-app="paziente"] .home-riga { border-bottom-color: var(--line); }
:root[data-app="paziente"] .sub, :root[data-app="paziente"] .muted, :root[data-app="paziente"] .home-riga__txt span { color: var(--muted); }

/* Un solo rosso per schermata: resta per «Prenota … alle …» e per l'orario scelto
   (.pz-cta, .pz-ora.is-on in styles.css); tutti gli altri pulsanti principali sono blu. */
:root[data-app="paziente"] .pz-cta:not(:disabled) { background: linear-gradient(180deg, #e0332e, #d81c17); }

:root[data-app="paziente"] .account-btn { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }