/* =============================================================
   RIFINITURE GRAFICHE: l'ultimo strato, solo aspetto e nessuna logica.
   Un'unica identità per tutta l'app: i colori del marchio (blu rotta, blu
   notte, arancio tramonto), un solo tipo di intestazione, di campo e di
   pulsante, sia nelle schermate degli annunci sia nel gestionale.
   Togliendo questo file l'app funziona uguale.
   ============================================================= */

/* ---------- Un solo blu ---------- */
.area-g {
  --colore-principale: #1a5cff;
  --colore-principale-scuro: #1249d6;
  --colore-principale-tenue: #eaf0ff;
  --colore-notte: #0b1b34;
  --colore-notte-chiaro: #17408f;
  --colore-accento: #ff8a3d;
  --colore-sfondo: #f2f4f8;
  --colore-riempimento: #f2f4f8;
  --colore-testo: #0f1b2d;
  --colore-testo-tenue: #5b6577;
  --colore-bordo: #d5dae3;
  --raggio-grande: 20px;
  --raggio: 12px;
  --ombra: 0 2px 12px rgba(11, 27, 52, 0.06);
}

/* ---------- Intestazione dell'app ---------- */
.logo-testo { letter-spacing: -0.02em; }
body.senza-modo .logo-testo { display: inline; } /* nella prima schermata il marchio si legge */
.chi-sono { font-weight: 600; }

/* Il tasto autotrasportatore / cliente */
.interruttore-ruolo { margin-bottom: 10px; padding: 3px; border-radius: 12px; background: rgba(11, 27, 52, 0.07); }
.interruttore-ruolo button { padding: 7px 8px; border-radius: 9px; font-weight: 500; color: var(--colore-testo-tenue); transition: background var(--transizione), color var(--transizione); }
.interruttore-ruolo button[aria-pressed="true"] { color: var(--colore-notte); box-shadow: 0 1px 4px rgba(11, 27, 52, 0.16); }

/* ---------- Le intestazioni colorate, uguali ovunque ---------- */
.hero { margin-top: 12px; }
.hero::after { width: 84px; height: 50px; right: 4px; top: 6px; opacity: 0.32; }
.hero h1 { max-width: 84%; letter-spacing: -0.025em; }

.area-g .testata {
  display: block;
  margin: 0 0 18px;
  padding: 18px 18px 18px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(74, 168, 255, 0.55), transparent 45%),
    radial-gradient(circle at 100% 110%, rgba(255, 138, 61, 0.5), transparent 40%),
    linear-gradient(135deg, #0b1b34, #17408f);
  box-shadow: 0 10px 30px rgba(11, 27, 52, 0.22);
}
.area-g .testata h1 { color: #fff; font-size: 1.45rem; letter-spacing: -0.025em; }
.area-g .testata p { color: rgba(255, 255, 255, 0.84); font-size: 0.9rem; }
.area-g .testata a:not(.pulsante) { color: #fff; }
.area-g .testata .azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.area-g .testata .azioni:empty { display: none; }
.area-g .testata .pulsante { flex: 1 1 auto; text-align: center; background: #fff; color: var(--colore-notte); box-shadow: none; }
.area-g .testata .pulsante-secondario { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Le sottosezioni */
.area-g .sotto-sezioni { margin: 12px 0 12px; }
.area-g .sotto-sezioni a { background: rgba(11, 27, 52, 0.07); color: var(--colore-testo-tenue); font-weight: 500; transition: background var(--transizione); }
.area-g .sotto-sezioni a[aria-current="page"] { background: var(--colore-notte); color: #fff; }

/* ---------- Schede ---------- */
.card { box-shadow: 0 2px 12px rgba(11, 27, 52, 0.06); }
.card::before { display: none; } /* la barretta laterale appesantiva ogni scheda */
.area-g .card { border-radius: 20px; box-shadow: 0 2px 12px rgba(11, 27, 52, 0.06); }

/* Nelle schede degli annunci il percorso sta su una riga, il prezzo sotto a destra */
a.card {
  grid-template-areas:
    "tratta tratta"
    "data prezzo"
    "azienda prezzo"
    "etichette etichette"
    "orari orari"
    "specifiche specifiche";
}
a.card .card-tratta { font-size: 1.14rem; margin-bottom: 6px; }
a.card .card-data { margin-bottom: 8px; }

/* I numeri del riepilogo */
.area-g .numero-grande { font-size: 1.7rem; letter-spacing: -0.03em; }
.area-g .griglia-card .piccolo { font-weight: 500; }

/* ---------- Campi: si vedono subito ---------- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea,
.area-g input:not([type="checkbox"]):not([type="radio"]), .area-g select, .area-g textarea {
  border: 1px solid var(--colore-bordo);
  background-color: #f8f9fc;
  transition: border-color var(--transizione), box-shadow var(--transizione), background-color var(--transizione);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus,
.area-g input:not([type="checkbox"]):not([type="radio"]):focus, .area-g select:focus, .area-g textarea:focus {
  border-color: #1a5cff;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(26, 92, 255, 0.14);
  outline: none;
}
.scelta-tipo .scelta:has(input:checked) { outline: 2px solid #1a5cff; background: #eaf0ff; }

/* ---------- Pulsanti: stessa forma ovunque ---------- */
.pulsante, .area-g .pulsante { border-radius: 14px; }
.area-g .pulsante-piccolo { border-radius: 10px; }
.pulsante:active, .area-g .pulsante:active { transform: scale(0.98); }

/* ---------- Barra in basso ---------- */
.nav-link { transition: color var(--transizione); }
.nav-link.attivo { color: #1a5cff; font-weight: 600; }

/* ---------- Testi di contorno ---------- */
.vuoto, .area-g .vuoto { color: var(--colore-testo-tenue); font-size: 0.98rem; line-height: 1.5; }
.dettagli-modulo > summary { list-style-position: inside; }

/* Un ingresso leggero delle schermate */
@media (prefers-reduced-motion: no-preference) {
  .schermata:not([hidden]) { animation: entra-schermata 0.22s ease both; }
  @keyframes entra-schermata { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* Sul computer il gestionale è largo come il resto */
@media (min-width: 600px) {
  .area-g .testata { padding: 24px; }
  .area-g .testata h1 { font-size: 1.8rem; }
}

/* ---------- Info ---------- */
.gruppo-logo { display: flex; align-items: center; gap: 6px; }
/* Area da toccare comoda, senza ingrandire l'icona */
.tasto-info { display: inline-flex; padding: 8px; color: var(--colore-testo-tenue); }
.schede-info { display: flex; gap: 2px; margin-bottom: 14px; padding: 3px; border-radius: 12px; background: rgba(11, 27, 52, 0.07); }
.schede-info button { flex: 1; padding: 8px; border: 0; border-radius: 9px; background: none; color: var(--colore-testo-tenue); font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; }
.schede-info button[aria-pressed="true"] { background: #fff; color: var(--colore-notte); box-shadow: 0 1px 4px rgba(11, 27, 52, 0.16); }
.indice-guida { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.indice-guida button { padding: 7px 12px; border: 0; border-radius: 999px; background: #eaf0ff; color: #1a5cff; font: inherit; font-size: 0.82rem; font-weight: 500; text-align: left; cursor: pointer; }
.capitolo-guida { margin-bottom: 10px; padding: 0 18px; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(11, 27, 52, 0.06); scroll-margin-top: 130px; }
.capitolo-guida > summary { padding: 15px 0; font-weight: 600; cursor: pointer; }
.capitolo-guida[open] { padding-bottom: 12px; }
.capitolo-guida h3 { margin: 12px 0 4px; font-size: 0.95rem; }
.capitolo-guida p { margin: 0 0 8px; line-height: 1.5; color: var(--colore-testo-tenue); }

/* ---------- La guida da leggere ---------- */
.pulsante.largo[href="#/info/pdf"] { display: block; text-align: center; text-decoration: none; }
body.in-documento .intestazione, body.in-documento .navigazione, body.in-documento footer { display: none; }
body.in-documento { padding-bottom: 0; }
.barra-documento { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -16px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: #fff; border-bottom: 1px solid var(--colore-bordo); }
.indietro-documento { padding: 8px 8px 8px 0; color: #1a5cff; font-size: 1.05rem; font-weight: 600; text-decoration: none; }
.azioni-documento { display: flex; gap: 8px; }
.azioni-documento .pulsante { padding: 9px 16px; font-size: 0.95rem; }
.foglio-documento { margin: 14px 0 calc(24px + env(safe-area-inset-bottom)); padding: 24px 20px; border-radius: 6px; background: #fff; box-shadow: 0 2px 14px rgba(11, 27, 52, 0.1); line-height: 1.55; }
.foglio-documento h1 { margin: 12px 0 4px; font-size: 1.7rem; color: #0b1b34; }
.foglio-documento h2 { margin: 28px 0 8px; padding-bottom: 5px; border-bottom: 2px solid #1a5cff; font-size: 1.2rem; color: #0b1b34; }
.foglio-documento h3 { margin: 16px 0 2px; font-size: 1rem; color: #17408f; }
.foglio-documento p { margin: 0 0 8px; }
.copertina-documento { padding-bottom: 8px; }
.copertina-documento img { border-radius: 16px; }
.copertina-documento p { color: var(--colore-testo-tenue); }
@media print {
  body.in-documento .barra-documento { display: none; }
  .foglio-documento { margin: 0; padding: 0; box-shadow: none; }
  .foglio-documento h3 { break-after: avoid; }
}
/* L'intestazione non lascia più intravedere ciò che scorre sotto */
.intestazione { background: #fff; }

/* ---------- Dati da sistemare prima di pubblicare ---------- */
.campo-mancante > span, .errore-campo { color: #c9101d; }
.errore-campo { font-size: 0.8rem; font-weight: 600; }
.campo-mancante input:not([type="checkbox"]):not([type="radio"]),
.campo-mancante input:not([type="checkbox"]):not([type="radio"]):focus,
.campo-mancante textarea,
.campo-mancante textarea:focus {
  border-color: #e0202e;
  background-color: #fff3f3;
  box-shadow: 0 0 0 1px #e0202e;
}

/* Etichette di una o due righe: i campi dei colli restano allineati */
.griglia-colli .campo { justify-content: flex-end; }

/* ---------- Caselle sempre in asse (soprattutto su iPhone) ----------
   Safari su iPhone disegna data e ora con un suo controllo: ha una larghezza
   minima propria e il testo in mezzo, quindi la casella sborda verso destra e
   allarga anche la colonna in cui si trova. Qui torna una casella normale. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea,
.area-g input:not([type="checkbox"]):not([type="radio"]), .area-g select, .area-g textarea {
  min-width: 0;
  max-width: 100%;
}
input[type="date"], input[type="time"], input[type="datetime-local"],
.area-g input[type="date"], .area-g input[type="time"], .area-g input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 2.9em;
  text-align: left;
}
input::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* Una colonna di griglia non deve crescere per colpa di ciò che contiene */
.griglia-ricerca > *, .griglia-2 > *, .griglia-colli > *, .scheda > *,
.campo, .area-g .campi > *, .tappa > * { min-width: 0; }