/* Phone shell and role-specific home. Existing section styles remain shared. */
:root { --app-navy: #17243b; --app-muted: #657084; --app-accent: #c2410c; }
[hidden] { display: none !important; }
html { scroll-padding-top: 90px; }
.app-icona { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #c2410c; outline-offset: 4px; }
.salta-contenuto { position: fixed; top: -100px; left: 12px; padding: 12px 18px; z-index: 100; background: #fff; border: 2px solid var(--app-accent); border-radius: 8px; }
.salta-contenuto:focus { top: 12px; }
.app-menu, .app-nav { display: none; }
.app-network-status { padding: 10px max(16px, env(safe-area-inset-left)); background: #fff2d4; color: #704600; text-align: center; font-size: 14px; border-bottom: 1px solid #ecd3a1; }
.app-home { max-width: 1080px; margin: 8px auto 0; color: var(--app-navy); }
.app-benvenuto { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 28px; }
.app-sopratitolo { text-transform: uppercase; letter-spacing: .09em; font-size: 11px; font-weight: 750; color: var(--app-muted); margin: 0 0 7px; }
.app-benvenuto h1 { font-size: clamp(28px, 4vw, 36px); letter-spacing: -.045em; line-height: 1.12; margin: 0 0 8px; font-weight: 750; }
.app-punto { color: var(--app-accent); }
.app-benvenuto > div > p:last-child { margin: 0; color: var(--app-muted); font-size: 14px; }
.app-ruolo { display: flex; gap: 8px; align-items: center; min-height: 44px; background: #fff; padding: 9px 13px; border: 1px solid #e2e5ea; border-radius: 30px; color: var(--app-navy); font-size: 12px; font-weight: 650; flex-shrink: 0; }
.app-ruolo .app-icona { width: 17px; height: 17px; }
.app-home-griglia { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.app-home-principale, .app-home-secondaria { min-width: 0; }
.app-hero { background: var(--app-navy); border-radius: 22px; padding: 28px; color: #fff; box-shadow: 0 8px 24px #17243b14; }
.app-hero-intestazione { display: flex; align-items: center; gap: 10px; margin-bottom: 21px; }
.app-hero-simbolo { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #ffffff26; border-radius: 11px; color: #ffbb92; background: #ffffff08; }
.app-hero-simbolo .app-icona { width: 20px; height: 20px; }
.app-etichetta-chiara { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; color: #d2dbe9; font-weight: 650; }
.app-pallino { width: 7px; height: 7px; background: #8de0ad; border-radius: 50%; }
.app-hero h2 { font-size: 29px; line-height: 1.2; margin: 0 0 10px; letter-spacing: -.035em; }
.app-hero p { color: #cbd5e5; margin: 0 0 22px; font-size: 13px; }
.app-hero .app-hero-data { font-size: 14px; text-transform: capitalize; margin-bottom: 7px; }
.app-hero h2.app-hero-orario { font-size: clamp(26px, 5vw, 39px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; white-space: nowrap; }
.app-hero-orario > span { font-weight: 350; color: #73829c; }
.app-hero-orario > small { display: block; margin: 6px 0 0; font-size: 12px; letter-spacing: 0; color: #cbd5e5; font-weight: 400; }
.app-hero .app-entrata { margin-top: -9px; color: #a9e8bb; }
.app-bottone-hero.bottone { min-height: 48px; width: 100%; background: #ffbc94; border: 0; border-radius: 11px; color: #562309; font-size: 14px; font-weight: 750; padding: 12px 17px; justify-content: flex-start; gap: 11px; }
.app-bottone-hero.bottone:hover { background: #ffcba9; }
.app-bottone-hero > .app-icona:last-child { margin-left: auto; width: 20px; }
.app-hero-aiuto { display: block; margin-top: 10px; text-align: center; font-size: 11px; color: #b1bed1; }
.app-hero-numeri { display: flex; margin: 20px 0 25px; }
.app-hero-numeri > div { width: 50%; display: flex; flex-direction: column; gap: 3px; }
.app-hero-numeri > div + div { border-left: 1px solid #ffffff29; padding-left: 22px; }
.app-hero-numeri strong { font-size: 40px; font-weight: 650; line-height: 1.15; letter-spacing: -.05em; }
.app-hero-numeri span { color: #cbd5e5; font-size: 12px; }
.app-dati-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 28px; }
.app-dato { position: relative; display: flex; flex-direction: column; border: 1px solid #e3e7ee; border-radius: 15px; background: #fff; padding: 18px; color: var(--app-navy); }
.app-dato:hover { text-decoration: none; border-color: #b9c1ce; }
.app-dato > strong { font-size: 28px; line-height: 1.1; letter-spacing: -.04em; margin: 9px 0 8px; }
.app-dato > span:last-child { color: var(--app-muted); font-size: 11px; }
.app-dato-icona { color: var(--app-muted); }
.app-dato-icona .app-icona { width: 19px; height: 19px; }
.app-dato-attenzione > strong, .app-dato-attenzione .app-dato-icona { color: var(--app-accent); }
.app-sezione { margin-bottom: 27px; }
.app-sezione-intestazione { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.app-sezione-intestazione h2 { font-size: 17px; letter-spacing: -.02em; margin: 0; font-weight: 750; }
.app-sezione-intestazione h2 > span { display: inline-block; background: #e7eaf0; border-radius: 7px; padding: 1px 6px; margin-left: 5px; font-size: 11px; vertical-align: middle; color: var(--app-muted); }
.app-sezione-intestazione > a { display: flex; gap: 4px; align-items: center; min-height: 44px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.app-sezione-intestazione > a .app-icona { width: 16px; height: 16px; }
.app-nota { font-size: 12px; color: var(--app-muted); margin: -3px 0 12px; }
.app-turni { background: #fff; border: 1px solid #e3e7ee; border-radius: 16px; overflow: hidden; }
.app-turno { display: flex; align-items: center; gap: 13px; padding: 17px 18px; color: var(--app-navy); }
.app-turno + .app-turno { border-top: 1px solid #edf0f4; }
.app-turno:hover { text-decoration: none; background: #fafbfc; }
.app-turno-dettaglio { min-width: 0; flex: 1; }
.app-turno-dettaglio > strong { display: block; font-size: 14px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
.app-turno-dettaglio > strong > small { font-size: 10px; font-weight: 450; }
.app-turno-dettaglio > span { display: block; color: var(--app-muted); font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
.app-turno-dettaglio > span.app-stato-bozza { color: #8c570a; }
.app-turno-dettaglio > span.app-turno-data-completa { font-size: 10px; }
.app-turno-orario { display: flex; flex-direction: column; gap: 2px; font-size: 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-turno-orario > span { color: var(--app-muted); font-size: 11px; }
.app-avatar, .app-data-turno { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f0f2f6; border-radius: 12px; width: 44px; min-height: 48px; flex: 0 0 44px; }
.app-avatar { height: 44px; min-height: 44px; border-radius: 50%; font-weight: 700; font-size: 15px; }
.app-avatar-scoperto { background: #fff1e9; color: var(--app-accent); }
.app-data-turno > strong { font-size: 19px; line-height: 1.1; letter-spacing: -.03em; }
.app-data-turno > span { margin-top: 3px; font-size: 9px; font-weight: 650; text-transform: uppercase; color: var(--app-muted); }
.app-freccia-tenue { color: #8a94a5; width: 17px; height: 17px; }
.app-vuoto { padding: 29px 21px; background: #fff; border: 1px solid #e3e7ee; border-radius: 16px; text-align: center; }
.app-vuoto > .app-icona { color: #8a94a5; margin-bottom: 9px; }
.app-vuoto h3 { font-size: 15px; margin: 0 0 7px; }
.app-vuoto p { font-size: 12px; margin: 0 auto 16px; max-width: 290px; color: var(--app-muted); }
.app-vuoto .bottone { font-size: 12px; min-height: 44px; }
.app-richieste-card { display: block; padding: 23px; background: #fff7f0; border: 1px solid #efdfd1; border-radius: 17px; color: var(--app-navy); }
.app-richieste-card:hover { text-decoration: none; border-color: #cfae96; }
.app-richieste-card > strong { display: block; font-size: 17px; line-height: 1.4; margin-top: 13px; letter-spacing: -.02em; }
.app-richieste-card p { color: #776451; font-size: 12px; line-height: 1.65; margin: 9px 0 18px; }
.app-link-icona { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; background: #f3f5f8; border-radius: 11px; color: #53637b; }
.app-link-icona .app-icona { width: 20px; height: 20px; }
.app-richieste-card > .app-link-icona { background: #f9e6d8; color: #a84b20; }
.app-link-azione { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; color: #9a3412; min-height: 28px; }
.app-link-azione .app-icona { width: 18px; height: 18px; }
.app-link-lista { background: #fff; border: 1px solid #e3e7ee; border-radius: 16px; overflow: hidden; }
.app-link-lista > a, .app-installa-profilo { display: flex; align-items: center; gap: 12px; padding: 17px; color: var(--app-navy); }
.app-link-lista > a + a { border-top: 1px solid #edf0f4; }
.app-link-lista > a:hover, .app-installa-profilo:hover { text-decoration: none; background: #fafbfc; }
.app-link-lista > a > span:nth-child(2), .app-installa-profilo > span:nth-child(2) { flex: 1; min-width: 0; }
.app-link-lista strong, .app-installa-profilo strong { display: block; font-size: 13px; font-weight: 650; }
.app-link-lista small, .app-installa-profilo small { display: block; color: var(--app-muted); font-size: 11px; margin-top: 3px; }
.app-link-lista > a > .app-icona, .app-installa-profilo > .app-icona { width: 16px; color: #8a94a5; }
.app-installa-card { display: flex; gap: 11px; align-items: center; padding: 19px 0; color: var(--app-navy); }
.app-installa-card > .app-icona:first-child { width: 28px; height: 28px; }
.app-installa-card > span { flex: 1; }
.app-installa-card strong { display: block; font-size: 12px; }
.app-installa-card small { display: block; color: var(--app-muted); font-size: 11px; margin-top: 3px; }
.app-installa-card > .app-icona:last-child { width: 17px; }
.app-piede { font-size: 10px; color: #7b8595; margin: 12px 0 0; letter-spacing: .03em; }
.app-piede > span { margin: 0 5px; }
.app-notizia { display: flex; align-items: center; gap: 12px; border: 1px solid #ead8bd; background: #fff9ed; border-radius: 13px; padding: 15px; margin: 15px 0 24px; color: #77501f; }
.app-notizia > div { flex: 1; min-width: 0; }
.app-notizia strong { display: block; font-size: 12px; }
.app-notizia p { font-size: 11px; margin: 3px 0 0; }
.app-notizia > .app-icona { width: 18px; }
.app-notizia:hover { text-decoration: none; border-color: #cdae81; }
.app-installa-accesso { text-align: center; font-size: 12px; margin: 20px 0 0; }
.app-installa-accesso > a { display: inline-flex; align-items: center; min-height: 44px; gap: 7px; }
.app-installa-accesso .app-icona { width: 19px; height: 19px; }
.app-installa-profilo { border: 1px solid #e3e7ee; border-radius: 14px; background: #fff; max-width: 680px; margin-top: 8px; }

@media (max-width: 900px) {
  .barra { min-height: 66px; padding: max(9px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 9px max(18px, env(safe-area-inset-left)); gap: 14px; flex-wrap: nowrap; }
  .barra > .menu-desktop, .barra > .utente-barra { display: none; }
  .marchio { min-width: 0; flex: 1; min-height: 44px; gap: 9px; }
  .marchio-logo { width: 33px; height: 33px; border-radius: 9px; }
  .marchio-testo { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-menu { display: block; flex: 0 0 auto; }
  .app-menu > summary { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 11px; border: 1px solid #e3e7ee; border-radius: 10px; color: var(--app-navy); font-size: 12px; font-weight: 650; cursor: pointer; list-style: none; }
  .app-menu > summary::-webkit-details-marker { display: none; }
  .app-menu > summary .app-icona { width: 18px; height: 18px; }
  .app-menu[open] > summary { background: #edf0f5; }
  .app-menu-pannello { position: absolute; top: calc(100% + 6px); right: max(12px, env(safe-area-inset-right)); width: min(350px, calc(100vw - 24px)); max-height: calc(100dvh - 165px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #dde2eb; border-radius: 16px; padding: 13px; background: #fff; box-shadow: 0 15px 50px #17243b2b; }
  .app-menu-persona { margin: 0 4px 10px; padding: 7px 8px 13px; border-bottom: 1px solid #edf0f4; }
  .app-menu-persona strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
  .app-menu-persona > span { display: block; font-size: 11px; color: var(--app-muted); margin-top: 3px; }
  .app-menu-voci { display: flex; flex-direction: column; gap: 2px; }
  .app-menu-voci > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--app-navy); min-height: 44px; padding: 10px 12px; border-radius: 9px; font-size: 13px; }
  .app-menu-voci > a:hover, .app-menu-voci > a.attivo { text-decoration: none; background: #fff1e9; color: #9a3412; }
  .app-menu-pannello > form { border-top: 1px solid #edf0f4; margin-top: 8px; padding-top: 7px; }
  .app-menu-pannello > form > button { justify-content: flex-start; padding-left: 12px; font-size: 13px; }
  .app-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: #fff; border-top: 1px solid #e4e8ee; padding: 7px max(6px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); box-shadow: 0 -3px 16px #17243b04; }
  .app-nav-voce { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 51px; color: #647086; font-size: 10px; font-weight: 550; border-radius: 10px; }
  .app-nav-voce:hover { text-decoration: none; background: #f5f6f8; }
  .app-nav-voce.attiva { color: #ad3d12; font-weight: 750; }
  .app-nav-simbolo { position: relative; display: grid; place-items: center; width: 44px; height: 29px; border-radius: 9px; }
  .app-nav-voce.attiva .app-nav-simbolo { background: #fff0e6; }
  .app-nav-simbolo .app-icona { width: 22px; height: 22px; }
  .app-nav-badge { position: absolute; left: 28px; top: -3px; min-width: 15px; min-height: 15px; padding: 0 4px; border: 2px solid #fff; border-radius: 12px; background: #b91c1c; color: #fff; font-size: 8px; line-height: 13px; }
  .con-app-nav .contenuto { padding-bottom: calc(102px + env(safe-area-inset-bottom)); }
  .contenuto { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .contenuto.senza-barra { padding-top: max(32px, env(safe-area-inset-top)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .app-home { margin-top: 6px; }
  .app-home-griglia { gap: 20px; }
  .app-hero { padding: 24px; }
  .app-home .bottone { white-space: normal; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=tel], input[type=search], select, textarea { font-size: 16px; min-height: 44px; max-width: 100%; }
  .bottone, .bottone-piccolo, summary { min-height: 44px; }
  .campo-riga > label { min-height: 44px; display: inline-flex; align-items: center; }
  .occhio-password { min-height: 36px; }
  .griglia.due, .griglia.tre, .griglia.quattro { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .griglia-campi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .griglia > *, .griglia-campi > *, .campo, .riga > * { min-width: 0; }
  .scheda:has(> .tabella) { overflow-x: auto; }
  .intervento { max-width: 95%; overflow-wrap: anywhere; }
  .riquadro-dato > .riga > .spinta { max-width: 100%; }
  .riquadro-dato details[open] { width: 100%; }
  .riquadro-dato details[open] > form { padding-top: 12px; }
  .contenitore-tabella { overscroll-behavior-x: contain; }
  .turno-blocco, .azioni-giorno a { min-height: 44px; }
  .azioni-giorno { opacity: 1; }
}

@media (max-width: 650px) {
  .app-home-griglia { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .app-benvenuto { margin-bottom: 22px; gap: 8px; align-items: flex-start; }
  .app-benvenuto > div > p:last-child { font-size: 12px; max-width: 235px; }
  .app-sopratitolo { font-size: 9px; letter-spacing: .08em; }
  .app-ruolo { font-size: 10px; padding: 8px 10px; gap: 5px; min-height: 44px; margin-top: 1px; }
  .app-ruolo .app-icona { width: 14px; height: 14px; }
  .app-benvenuto h1 { font-size: 30px; margin-bottom: 7px; overflow-wrap: anywhere; }
  .app-hero { padding: 24px; border-radius: 19px; }
  .app-hero h2.app-hero-orario { font-size: clamp(28px, 8vw, 38px); }
  .app-dati-due { margin-bottom: 25px; }
  .app-dato { padding: 15px 16px; }
  .app-dato > strong { font-size: 27px; }
  .app-dato > span:last-child { font-size: 11px; }
  .app-richieste-card { padding: 20px; }
  .app-home-secondaria .app-sezione { margin-bottom: 24px; }
  .app-installa-card { padding: 10px 2px 19px; }
  .app-piede { text-align: center; margin-top: 8px; }
  .scheda { padding: 17px 15px; }
  .titolo-pagina h1 { font-size: 22px; }
  .titolo-pagina .azioni { width: 100%; }
  .azioni > .bottone { flex: 1 1 auto; white-space: normal; text-align: center; }
  .riquadro-accesso { padding: 25px 21px; border-radius: 20px; }
  .riquadro-accesso .logo-accesso img { width: 82px; height: 82px; }
  .riquadro-dato .valore-dato { font-size: 23px; }
  .riga-scansione { flex-wrap: wrap; }
  .riga-scansione .bottone { flex: 1 1 auto; }
  .banner-gestione, .banner-allarme { font-size: 12px; }
}

@media (max-width: 360px) {
  .contenuto { padding-left: max(13px, env(safe-area-inset-left)); padding-right: max(13px, env(safe-area-inset-right)); }
  .app-benvenuto h1 { font-size: 27px; }
  .app-ruolo { padding: 7px 8px; }
  .app-hero { padding: 20px; }
  .app-turno { padding: 15px 13px; gap: 10px; }
  .app-sezione-intestazione h2 { font-size: 16px; }
  .app-sezione-intestazione > a { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .app-nav, .app-menu, .app-installa-card, .app-installa-profilo, .app-network-status, .salta-contenuto { display: none !important; }
  .con-app-nav .contenuto { padding-bottom: 0; }
  .app-home-griglia { display: block; }
  .app-hero { background: #fff; color: #17243b; border: 1px solid #aab2bf; box-shadow: none; }
  .app-hero p, .app-etichetta-chiara, .app-hero-numeri span { color: #43506a; }
}