/* La pagina da fuori: come lo schizzo del telefono approvato dall'utente
   (prove lettura bolle\anteprima telefono.png); su uno schermo largo la bolla
   a sinistra e il resto a destra, come la schermata grande della coda. */
:root {
  --verde: #e3f6e8; --verdes: #1b7a3a; --giallo: #fff4c2; --giallos: #8a6d00; --rosso: #fde2e2; --rossos: #b00020;
  --blu: #dce9fb; --blus: #1a5fb4; --viola: #ede9fe; --grigio: #666; --bordo: #d0d0d0; --arancio: #e8590c;
  --fondo: #fff; --fondo2: #fafafa; --testo: #111;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--testo); font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }

.schermo { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 1500px; margin: 0 auto; }
.barra { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--bordo); flex: none; gap: 8px; }
.barra b { font-size: 17px; text-align: center; flex: 1; }
.spazio { width: 44px; }
.freccia { font-size: 28px; color: var(--blus); background: none; border: none; width: 44px; height: 40px; line-height: 1; }
.freccia:disabled { color: #ccc; }
.link { background: none; border: none; color: var(--blus); padding: 8px 6px; font-size: 14px; }
.link.piccolo { font-size: 13px; color: #555; max-width: 40%; text-align: right; }
.corpo { flex: 1; overflow-y: auto; padding: 0 14px 14px; -webkit-overflow-scrolling: touch; }
.sez { font-size: 12px; color: var(--grigio); letter-spacing: .5px; margin: 14px 0 6px; }
.nota { color: var(--grigio); font-size: 13px; }
.errore { color: var(--rossos); font-weight: 600; min-height: 1em; margin: 8px 0; white-space: pre-line; }
.messaggio { background: var(--verde); color: var(--verdes); padding: 8px 14px; font-weight: 600; flex: none; }

/* entra */
.entra { max-width: 360px; margin: 12vh auto 0; padding: 0 20px; width: 100%; }
.entra h1 { margin: 0 0 4px; }
.entra label, .riquadro label { display: block; font-size: 13px; color: #444; margin-top: 14px; }
.entra input, .riquadro input { display: block; width: 100%; margin-top: 4px; border: 1px solid #999; border-radius: 8px; padding: 10px; font-size: 17px; }
.entra button { width: 100%; margin-top: 10px; }

/* pulsanti in fondo */
.pulsanti { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--bordo); display: flex; gap: 8px; background: var(--fondo2); }
.pulsanti button, .pulsanti-riga button, .entra button { border-radius: 10px; padding: 12px 6px; font-size: 15px; text-align: center; border: 1px solid #aaa; background: #fff; flex: 1; }
.pulsanti button.ok, .pulsanti-riga button.ok, .entra button.ok { background: var(--verdes); color: #fff; border-color: var(--verdes); font-weight: 700; flex: 2; }
.pulsanti button:disabled { opacity: .45; cursor: default; }
.pulsanti-riga { display: flex; gap: 8px; margin-top: 16px; }
.altri { display: flex; justify-content: space-around; padding: 0 14px 6px; background: var(--fondo2); flex: none; }

/* elenco */
.conti { font-size: 14px; padding: 8px 14px; border-bottom: 1px solid var(--bordo); flex: none; }
.conti b { margin-right: 8px; }
.voce { display: flex; gap: 10px; align-items: center; padding: 11px 2px; border-bottom: 1px solid #eee; cursor: pointer; width: 100%; background: none; border-left: none; border-right: none; border-top: none; text-align: left; }
.icona { width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex: none; }
.i-verde { background: var(--verde); color: var(--verdes); } .i-giallo { background: var(--giallo); color: var(--giallos); }
.i-rosso { background: var(--rosso); color: var(--rossos); } .i-confermata, .i-chiusa, .i-attesa { background: #e6e6e6; color: #555; }
.voce .t { font-size: 14px; line-height: 1.3; flex: 1; min-width: 0; }
.voce .t small { color: var(--grigio); font-size: 12px; display: block; }
.voce.uso, .voce.chiusa { opacity: .5; }
.voce.confermata .t { color: #555; }

/* la bolla */
.fascia { padding: 7px 14px; font-weight: 700; font-size: 14px; flex: none; white-space: pre-line; }
.fascia small { font-weight: 600; font-size: 13px; display: block; }
.f-verde { background: var(--verde); color: var(--verdes); } .f-giallo { background: var(--giallo); color: var(--giallos); }
.f-rosso { background: var(--rosso); color: var(--rossos); } .f-blu { background: var(--blu); color: #123f78; }
.f-grigio { background: #e5e7eb; color: #333; } .f-arancio { background: #fef3c7; color: #7c4a03; }
.due { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.due .corpo { overflow: visible; flex: none; }
.foto { position: relative; height: 180px; background: #e4e6ea; margin: 10px 14px 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.foto-dentro { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.foto-dentro img { display: block; width: 100%; }
.foto .tocca { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 10px; }
.riq { position: absolute; border: 3px solid var(--arancio); }
.eti { position: absolute; left: -3px; background: var(--arancio); color: #fff; font-weight: 700; font-size: 13px; padding: 0 5px; white-space: nowrap; }
.eti.su { bottom: 100%; } .eti.giu { top: 100%; }
.letto { display: grid; grid-template-columns: 86px 1fr; row-gap: 3px; font-size: 15px; }
.letto span { color: #888; font-size: 12px; padding-top: 2px; }
.cerche { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.cerche input, .testo-lato { border: 1px solid #999; border-radius: 8px; padding: 9px 8px; font-size: 15px; width: 100%; min-width: 0; text-transform: uppercase; }
.coppia { border: 1px solid var(--bordo); border-radius: 10px; margin-bottom: 7px; display: flex; align-items: stretch; background: #fff; }
.coppia.su { background: var(--blu); border-color: #9bbbe6; }
.coppia.spuntata { background: var(--viola); }
/* il doppio solo col quadratino, grande e staccato: il dito sbaglia piu' del mouse (scelta dell'utente) */
.coppia .q { flex: none; width: 52px; display: flex; align-items: center; justify-content: center; border: none; border-right: 1px solid var(--bordo); background: none; font-size: 26px; padding: 0; }
.coppia .q:disabled { color: #bbb; }
.coppia .sceglila { flex: 1; display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: none; border: none; text-align: left; min-width: 0; }
.coppia .n { font-weight: 700; color: var(--blus); font-size: 15px; width: 18px; flex: none; margin-top: 1px; }
.coppia .t { font-size: 14px; line-height: 1.3; min-width: 0; }
.coppia .t .p { color: var(--grigio); font-size: 12px; display: block; }
.avvisi { color: #9a3412; font-size: 13px; white-space: pre-line; }
.caselle { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.casella { font-size: 12px; color: #444; }
.casella input { display: block; width: 100%; margin-top: 2px; border: 1px solid #999; border-radius: 6px; height: 42px; font-size: 18px; padding: 6px 8px; text-transform: uppercase; }
.casella.lunga { grid-column: span 2; }
.ricordo { background: #ffe680; font-size: 13px; padding: 4px 8px; border-radius: 5px; display: inline-block; margin-top: 6px; }
.seconda { display: flex; gap: 8px; align-items: center; background: var(--viola); border-radius: 8px; padding: 6px 8px; margin-top: 8px; font-size: 13px; }
.seconda .t { flex: 1; min-width: 0; }
.seconda input { width: 70px; border: 1px solid #999; border-radius: 6px; height: 38px; font-size: 16px; padding: 4px 6px; text-transform: uppercase; }
.seconda button { border: 1px solid #aaa; background: #fff; border-radius: 6px; width: 38px; height: 38px; }
.vuoto { color: var(--grigio); font-size: 14px; padding: 8px 0; white-space: pre-line; }

/* il forzato */
.lato { margin-bottom: 4px; }
.scelto { background: var(--verde); color: var(--verdes); font-weight: 600; padding: 6px 8px; border-radius: 6px; margin-bottom: 6px; font-size: 14px; }
.voci-lato { max-height: 260px; overflow-y: auto; }
.voce-lato { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid #eee; background: #fff; padding: 9px 6px; font-size: 14px; }
.voce-lato.verde { background: #f0faf3; }
.voce-lato.simile { outline: 2px solid var(--blus); outline-offset: -2px; }
.voce-lato small { color: var(--grigio); display: block; font-size: 12px; }
.fascia button { margin-top: 6px; border: 1px solid #7c4a03; background: #fff; border-radius: 8px; padding: 6px 10px; font-weight: 600; }

/* sopra alle altre: terzo nuovo e bolla intera */
.sopra { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; z-index: 10; }
.riquadro { background: #fff; margin: auto; width: min(480px, 100%); max-height: 100%; overflow-y: auto; padding: 16px 18px; border-radius: 12px; }
.riquadro h2 { margin: 0; font-size: 18px; }
.sopra.scura { background: #111; color: #eee; flex-direction: column; }
.scura .barra { border-color: #333; }
.scura .freccia { color: #8cb4ff; }
.intera-corpo { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.intera-corpo img { display: block; width: 100%; background: #fff; }
.pulsanti.scura { background: #1a1a1a; border-color: #333; }
.pulsanti.scura button { background: #2a2a2a; color: #eee; border-color: #444; }

.avviso { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: #222; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 20; max-width: 90%; font-size: 14px; white-space: pre-line; }

/* schermo largo (un PC da fuori): la bolla a sinistra, intera, e il resto a destra */
@media (min-width: 900px) {
  .due { flex-direction: row; overflow: hidden; }
  .sinistra { flex: 1.1; overflow-y: auto; padding-bottom: 14px; }
  .due .destra { flex: 1; overflow-y: auto; }
  .foto { height: auto; margin: 10px; }
  .foto-dentro { position: relative; width: 100%; }
  .pulsanti, .altri { justify-content: flex-end; }
  .pulsanti button { flex: 0 0 200px; }
  .pulsanti button.ok { flex: 0 0 300px; }
  #elenco .corpo, #elenco .conti { max-width: 900px; width: 100%; margin: 0 auto; }
  #forzato .corpo { max-width: 900px; width: 100%; margin: 0 auto; }
}