/* =============================================================
   STILE DELL'APP — ispirato al design Apple
   Principi: tanto spazio bianco, titoli grandi, colori neutri con
   un solo colore d'accento (blu), angoli arrotondati, ombre leggere.

   Approccio "mobile first": le regole di base sono pensate per il
   telefono; in fondo una @media aggiunge ritocchi per schermi larghi.
   ============================================================= */

/* ---------- Variabili: colori e misure riutilizzati ovunque ----------
   Cambiando un valore qui, cambia in tutta l'app.
   Sono gli stessi toni usati sul sito di Apple. */
:root {
  /* I colori del marchio, presi dall'icona dell'app: il blu luminoso delle
     rotte sulla mappa, il blu notte del cielo e l'arancio del tramonto */
  --colore-principale: #1a5cff;        /* blu "rotta": pulsanti e link */
  --colore-principale-scuro: #1249d6;
  --colore-principale-tenue: #eaf0ff;  /* blu chiarissimo per sfondi */
  --colore-notte: #0b1b34;             /* blu notte: testate e titoli */
  --colore-notte-chiaro: #17408f;
  --colore-accento: #ff8a3d;           /* arancio tramonto: piccoli tocchi */
  --colore-sfondo: #f2f4f8;            /* grigio-azzurro chiarissimo della pagina */
  --colore-superficie: #ffffff;        /* bianco delle card */
  --colore-riempimento: #f2f4f8;       /* sfondo dei campi e dei riquadri interni */
  --colore-testo: #0f1b2d;             /* quasi nero, con un filo di blu */
  --colore-testo-tenue: #5b6577;
  --colore-bordo: #d5dae3;
  --colore-successo: #e9f7ee;
  --colore-successo-testo: #1a7f37;
  --colore-attesa: #fff4e0;
  --colore-attesa-testo: #8a5a00;

  --raggio-grande: 20px;  /* card e riquadri */
  --raggio: 12px;         /* campi e riquadri interni */
  --ombra: 0 2px 12px rgba(0, 0, 0, 0.06);
  --ombra-forte: 0 8px 30px rgba(0, 0, 0, 0.10);
  --transizione: 0.2s ease;
}

/* ---------- Regole generali ---------- */

/* box-sizing: border-box fa sì che padding e bordi siano inclusi
   nella larghezza: rende i layout molto più prevedibili. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* -apple-system usa il font San Francisco su Mac e iPhone;
     sugli altri sistemi si usa il font di sistema equivalente. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  font-size: 17px; /* la dimensione standard del testo su iPhone */
  line-height: 1.47;
  letter-spacing: -0.01em;
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  -webkit-font-smoothing: antialiased; /* testo più nitido su Mac */
}

/* Titoli grandi e decisi, con lettere leggermente più strette */
h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.4rem;
}

h2 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.5rem 0 0.6rem;
}

a {
  color: var(--colore-principale);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Contenitore centrale: sul telefono occupa tutta la larghezza con
   16px di margine; su schermi grandi non supera i 760px. */
.contenitore {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

main {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.sottotitolo {
  color: var(--colore-testo-tenue);
  font-size: 1.05rem;
  margin: 0 0 1.75rem;
}

/* ---------- Testata delle schermate ("hero") ----------
   Un riquadro blu notte con il titolo in bianco, come il cielo dell'icona.
   Le "luci" sono sfumature circolari (radial-gradient) sovrapposte:
   un bagliore blu in alto a destra e uno arancio, il tramonto, in basso. */
.hero {
  position: relative;
  overflow: hidden;
  margin: 16px 0 1.25rem; /* un po' di respiro sotto la barra in alto */
  padding: 26px 22px 24px;
  border-radius: var(--raggio-grande);
  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, var(--colore-notte), var(--colore-notte-chiaro));
  box-shadow: 0 10px 30px rgba(11, 27, 52, 0.25);
}

/* Una "rotta" decorativa: una curva tratteggiata con due puntini luminosi,
   disegnata in SVG direttamente nel CSS (come un'immagine di sfondo) */
.hero::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 8px;
  width: 120px;
  height: 70px;
  opacity: 0.5;
  pointer-events: none; /* non intercetta i tocchi */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 110'%3E%3Cpath d='M10 95 Q 90 -20 180 40' fill='none' stroke='white' stroke-width='2' stroke-dasharray='4 6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='95' r='5' fill='white'/%3E%3Ccircle cx='180' cy='40' r='5' fill='%23ffb27a'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hero h1 {
  position: relative; /* sopra la decorazione */
  color: #fff;
  max-width: 80%;
}

.hero .sottotitolo {
  position: relative;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0;
  max-width: min(34em, 78%); /* lascia libero l'angolo con la decorazione */
}

/* Nella schermata dei viaggi, la ricerca "sale" un po' sopra la testata:
   un effetto a strati, molto usato nelle app */
.hero:has(+ .ricerca) {
  padding-bottom: 56px;
}

.hero + .ricerca {
  position: relative;
  margin-top: -52px;
  margin-left: 10px;
  margin-right: 10px;
}

/* ---------- Intestazione ---------- */
/* Sul telefono lo sfondo è quasi pieno, senza sfocatura: la sfocatura
   (backdrop-filter) farebbe "agganciare" la barra del menu all'intestazione
   invece che al fondo dello schermo. Sul computer, dove il menu sta in alto,
   torna l'effetto "vetro smerigliato" (vedi la @media in fondo). */
.intestazione {
  position: sticky; /* resta attaccata in alto quando si scorre */
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Sul telefono lasciamo in fondo alla pagina lo spazio della barra del menu
   (più la "barretta" dell'iPhone, che env() ci dice quanto è alta) */
body {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.intestazione-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  color: var(--colore-notte);
}

/* L'icona in piccolo, con gli angoli arrotondati come sulla schermata Home */
.logo-icona {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(11, 27, 52, 0.25);
}

/* "Libero" con una sfumatura di blu, come le rotte luminose dell'icona.
   background-clip: text "ritaglia" la sfumatura sulla forma delle lettere. */
.logo-libero {
  font-weight: 800;
  background: linear-gradient(90deg, var(--colore-principale), #4aa8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.logo:hover {
  text-decoration: none;
}

/* IL MENU SUL TELEFONO: una barra fissa in fondo allo schermo con 4 voci,
   ognuna con icona sopra e nome sotto (come la "tab bar" delle app iPhone).
   position: fixed la tiene ferma mentre la pagina scorre. */
.navigazione {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px); /* per Safari */
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  /* sotto, lo spazio per la "barretta" dell'iPhone */
  padding: 6px 0 calc(4px + env(safe-area-inset-bottom));
}

.nav-link {
  position: relative; /* serve per posizionare il pallino sull'icona */
  flex: 1;            /* le 4 voci si dividono la larghezza in parti uguali */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
  color: var(--colore-testo-tenue);
  font-size: 0.68rem;
  font-weight: 500;
  transition: color var(--transizione);
}

.nav-link:hover {
  text-decoration: none;
}

/* La voce della schermata in cui ci si trova è blu */
.nav-link.attivo {
  color: var(--colore-principale);
}

/* Le icone: linee del colore del testo (currentColor), senza riempimento */
.nav-icona {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pallino con il numero di richieste: sul telefono sta sull'angolo dell'icona */
.contatore {
  position: absolute;
  top: 0;
  left: calc(50% + 6px);
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff3b30; /* rosso, come i "badge" delle app iPhone */
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* L'attributo hidden va rispettato anche se sopra abbiamo scritto display */
.contatore[hidden] {
  display: none;
}

/* ---------- Avviso temporaneo ---------- */
/* Il messaggio "galleggia" in basso, sopra la barra del menu: si vede
   ovunque ci si trovi nella pagina (prima stava in cima e sul telefono,
   a metà pagina, non si vedeva). Un tocco lo chiude (vedi app.js). */
.avviso {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 1100; /* sopra a tutto, anche al menu */
  max-width: 560px;
  margin: 0 auto;
  background: var(--colore-superficie);
  color: var(--colore-testo);
  padding: 14px 18px;
  border-radius: var(--raggio);
  font-weight: 500;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  border-left: 4px solid var(--colore-successo-testo);
  cursor: pointer;
  animation: compari 0.25s ease;
}

/* Piccola animazione: il messaggio sale dal basso mentre compare */
@keyframes compari {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Ricerca ---------- */
.ricerca {
  background: var(--colore-superficie);
  padding: 18px;
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
}

/* I campi della ricerca: 2 colonne sul telefono, 3 su schermi larghi */
.griglia-ricerca {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
}

/* Il riquadro apribile "La tua merce" */
.ricerca-merce {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 12px;
  margin-top: 2px;
}

.ricerca-merce summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
  list-style: none; /* via il triangolino nero standard… */
}

.ricerca-merce summary::-webkit-details-marker {
  display: none;    /* …anche su Safari */
}

/* Al suo posto una freccetta blu che ruota quando il riquadro si apre */
.ricerca-merce summary::before {
  content: "›";
  display: inline-block;
  width: 1em;
  color: var(--colore-principale);
  font-size: 1.3em;
  line-height: 1;
  transition: transform var(--transizione);
}

.ricerca-merce[open] summary::before {
  transform: rotate(90deg);
}

.ricerca-merce[open] summary {
  margin-bottom: 10px;
}

.ricerca-merce .facoltativo {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--colore-testo-tenue);
}

.ricerca-piede {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 14px;
  padding-top: 14px;
}

.campo-in-linea {
  margin-bottom: 0;
  flex: 1;
  max-width: 260px;
}

/* Etichette che spiegano perché un viaggio è nei risultati */
.etichetta.etichetta-ok {
  background: var(--colore-successo);
  color: var(--colore-successo-testo);
  font-weight: 600;
}

.etichetta.etichetta-info {
  background: var(--colore-principale-tenue);
  color: var(--colore-principale-scuro);
}

.etichetta.etichetta-avviso {
  background: var(--colore-attesa);
  color: var(--colore-attesa-testo);
}

.conteggio {
  color: var(--colore-testo-tenue);
  font-size: 0.85rem;
  font-weight: 500;
  margin: 1.5rem 0 0.75rem;
}

/* ---------- Campi dei moduli ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.campo span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--colore-testo-tenue);
}

/* Campi "pieni" grigio chiaro senza bordo, come nelle app iOS.
   font-size 16px o più evita che l'iPhone faccia lo zoom automatico. */
input,
select,
textarea {
  font: inherit;
  font-size: 17px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  background: var(--colore-riempimento);
  color: var(--colore-testo);
  transition: border-color var(--transizione), box-shadow var(--transizione), background var(--transizione);
}

/* Piccolo testo di aiuto sotto un campo (es. la stima dei bancali EPAL) */
.aiuto-campo {
  font-size: 0.8rem;
  color: var(--colore-testo-tenue);
  min-height: 1.2em; /* tiene lo spazio anche quando è vuoto, così il layout non "salta" */
}

input::placeholder,
textarea::placeholder {
  color: #a1a1a6;
}

/* Quando un campo è selezionato: sfondo bianco e alone blu */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  background: var(--colore-superficie);
  border-color: var(--colore-principale);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

/* ---------- Pulsanti a "pillola" ---------- */
.pulsante {
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background var(--transizione), transform 0.1s ease;
}

/* Piccolo effetto "pressione" quando si clicca */
.pulsante:active {
  transform: scale(0.98);
}

/* Il pulsante principale: una leggera sfumatura e un'ombra dello stesso
   blu lo fanno sembrare "luminoso", come le rotte dell'icona */
.pulsante.principale {
  background: linear-gradient(180deg, #3a74ff, var(--colore-principale));
  color: #fff;
  box-shadow: 0 4px 14px rgba(26, 92, 255, 0.3);
}

.pulsante.principale:hover {
  background: var(--colore-principale-scuro);
}

.pulsante.secondario {
  background: var(--colore-riempimento);
  color: var(--colore-principale);
}

.pulsante.secondario:hover {
  background: #e8e8ed;
}

.pulsante.largo {
  width: 100%;
  margin-top: 0.75rem;
  padding: 14px 22px;
}

/* ---------- Mappe ---------- */
.mappa {
  height: 260px; /* Leaflet ha bisogno di un'altezza precisa per disegnare */
  margin-top: 16px;
  border-radius: var(--raggio-grande);
  overflow: hidden; /* fa rispettare gli angoli arrotondati anche alla mappa */
  box-shadow: var(--ombra);
  z-index: 0; /* tiene la mappa sotto l'intestazione quando si scorre */
}

.mappa-piccola {
  height: 200px;
  margin: 16px 0 0;
  border-radius: var(--raggio);
  box-shadow: none;
}

/* Messaggio mostrato al posto della mappa se Leaflet non si carica */
.mappa-assente {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: var(--colore-testo-tenue);
  background: var(--colore-superficie);
}

/* ---------- Elenco viaggi e card ---------- */
.lista-viaggi {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

/* La card usa una griglia: tratta e prezzo sulla prima riga,
   data ed etichette sotto, su tutta la larghezza. */
/* Ogni card ha una sottile striscia blu sul lato sinistro, come una rotta */
.card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "tratta prezzo"
    "data prezzo"
    "azienda azienda"
    "etichette etichette"
    "orari orari"
    "specifiche specifiche";
  align-items: start;
  column-gap: 12px;
  background: var(--colore-superficie);
  border-radius: var(--raggio-grande);
  padding: 20px;
  color: inherit;
  box-shadow: var(--ombra);
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--colore-principale), #4aa8ff);
}

/* Al passaggio del mouse la card si "solleva" leggermente */
.card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--ombra-forte);
}

.card-tratta {
  grid-area: tratta;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.freccia {
  color: var(--colore-principale);
  font-weight: 400;
}

.card-data {
  grid-area: data;
  color: var(--colore-testo-tenue);
  font-size: 0.9rem;
  margin: 2px 0 12px;
}

/* ---------- Fiducia: profili e valutazioni ---------- */

/* L'etichetta "✓ Verificata · ★ 4,8 (41)" nelle card */
.etichetta-fiducia {
  background: #e9f7ee;
  color: var(--colore-successo-testo);
}

.badge-verificata,
.badge-da-verificare {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 4px;
}

.badge-verificata {
  background: #e9f7ee;
  color: var(--colore-successo-testo);
}

.badge-da-verificare {
  background: var(--colore-attesa);
  color: var(--colore-attesa-testo);
}

/* Il riquadro "Chi è il trasportatore" */
.profilo-azienda {
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--colore-riempimento);
  border-radius: var(--raggio);
}

.profilo-azienda summary {
  cursor: pointer;
}

/* I voti per voce, come barrette */
.voti {
  margin: 10px 0;
}

.voce-voto {
  display: grid;
  grid-template-columns: 9.5em 1fr 2.2em;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.barra-voto {
  height: 8px;
  border-radius: 4px;
  background: var(--colore-bordo);
  overflow: hidden;
}

.barra-voto i {
  display: block;
  height: 100%;
  background: #ffb000;
}

.commento {
  font-style: italic;
  color: var(--colore-testo-tenue);
  margin: 6px 0;
}

/* Il riquadro per lasciare una valutazione */
.riquadro-valutazione {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #ffd27a;
  background: #fffaf0;
  border-radius: var(--raggio);
}

.riquadro-valutazione h3 {
  margin-top: 0;
}

/* ---------- I due ingressi e le schede di "Ho spazio" ---------- */

/* I pulsanti grandi sulla testata blu: "Devo spedire" / "Ho spazio" */
.scelta-ruolo {
  position: relative; /* sopra la decorazione della testata */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.pulsante-ruolo {
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pulsante-ruolo:hover {
  background: rgba(255, 255, 255, 0.24);
  text-decoration: none;
}

/* Le schede come un interruttore a pillola (stile iPhone) */
.schede {
  display: flex;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 12px;
  padding: 3px;
  margin: 1rem 0;
}

.schede button {
  flex: 1;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--colore-testo);
  background: none;
  border: none;
  border-radius: 9px;
  padding: 8px 4px;
  cursor: pointer;
}

.schede button[aria-selected="true"] {
  background: var(--colore-superficie);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* "Ripeti ogni settimana", sotto i pulsanti di un viaggio */
.riga-ripeti {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.riga-ripeti .campo {
  flex: 1;
  min-width: 160px;
  margin-bottom: 0;
}

/* ---------- I miei mezzi ---------- */

/* Il menu "Usa uno dei tuoi mezzi", in cima al modulo Pubblica */
.riquadro-mezzo {
  background: var(--colore-principale-tenue);
  border-radius: var(--raggio);
  padding: 14px 16px 6px;
  margin-bottom: 1.25rem;
}

.riquadro-mezzo .campo {
  margin-bottom: 4px;
}

/* "Salva tra i miei mezzi", in fondo alle caratteristiche */
.salva-mezzo {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.salva-mezzo .campo {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

/* Pulsanti affiancati (vanno a capo sul telefono) */
.riga-pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Campanella, preferiti, richieste pubblicate ---------- */

/* La parte destra dell'intestazione: campanella (e, sul computer, il menu) */
.intestazione-destra {
  display: flex;
  align-items: center;
  gap: 6px;
}

.campanella {
  position: relative;
  display: flex;
  padding: 6px;
  color: var(--colore-notte);
}

.campanella-icona {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Il pallino sulla campanella: in alto a destra dell'icona */
.campanella .contatore {
  position: absolute;
  top: 0;
  left: auto;
  right: -2px;
  background: #ff3b30;
}

/* La stellina dei preferiti */
.stella {
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  background: none;
  border: none;
  padding: 0 4px 0 0;
  color: #b0b8c6;
  cursor: pointer;
}

.stella.attiva {
  color: #ffb000;
}

/* L'invito a pubblicare la propria richiesta, sotto i risultati */
.invito-domanda {
  margin-top: 1.5rem;
  padding: 18px 20px;
  border-radius: var(--raggio-grande);
  background: var(--colore-principale-tenue);
  text-align: center;
}

.invito-domanda p {
  margin: 0 0 12px;
}

/* Titoli delle sezioni dentro una schermata (es. la bacheca) */
.titolo-sezione {
  margin: 2rem 0 0.3rem;
}

.sottotitolo-sezione {
  color: var(--colore-testo-tenue);
  margin: 0 0 1rem;
}

/* I viaggi compatibili con una richiesta pubblicata */
.compatibili {
  padding-left: 18px;
  margin: 6px 0 12px;
}

.compatibili li {
  margin-bottom: 6px;
}

.compatibili small {
  display: block;
  color: var(--colore-testo-tenue);
}

/* Un viaggio da proporre, nella bacheca del trasportatore */
.offerta-viaggio {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 10px;
  margin-top: 10px;
}

.offerta-viaggio p {
  margin: 0 0 6px;
}

.riga-offerta {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.riga-offerta .campo {
  flex: 1;
  min-width: 160px;
  margin-bottom: 0;
}

/* Gli avvisi: quelli nuovi con il bordo blu e il testo in grassetto */
.lista-avvisi {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.voce-avviso {
  background: var(--colore-superficie);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 12px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  border-left: 4px solid transparent;
}

.voce-avviso.nuovo {
  border-left-color: var(--colore-principale);
}

.voce-avviso.nuovo p {
  font-weight: 600;
}

.voce-avviso.letto {
  opacity: 0.7;
}

.voce-avviso p {
  margin: 4px 0;
}

.voce-avviso small,
.per-chi {
  font-size: 0.75rem;
  color: var(--colore-testo-tenue);
}

/* ---------- Dopo l'accordo: chat, ordine di trasporto, avanzamento ---------- */

/* Riquadri apribili (chat, ordine, gestione del viaggio) */
.chat,
.ordine-trasporto,
.gestione-viaggio {
  margin-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 12px;
}

.chat summary,
.ordine-trasporto summary,
.gestione-viaggio summary {
  cursor: pointer;
  font-weight: 600;
}

/* La chat: i messaggi come "fumetti", i miei a destra in blu */
.chat-messaggi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  max-height: 320px;
  overflow-y: auto; /* con tanti messaggi si scorre dentro il riquadro */
}

.messaggio {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--colore-riempimento);
}

.messaggio p {
  margin: 0;
}

.messaggio small {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  opacity: 0.7;
}

.messaggio.mio {
  align-self: flex-end;
  background: var(--colore-principale);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.messaggio.altro {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-scrivi {
  display: flex;
  gap: 8px;
}

.chat-scrivi input {
  flex: 1;
}

.chat-scrivi .pulsante {
  flex: none;
  padding: 10px 18px;
}

/* L'ordine di trasporto: un "foglio" bianco con il bordo */
.documento {
  margin-top: 10px;
  padding: 16px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
}

.documento h3 {
  margin-top: 0;
}

/* L'avanzamento del trasporto: tappe in fila, quelle fatte in verde */
.avanzamento {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 12px 0;
  gap: 4px;
}

.avanzamento li {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  color: var(--colore-testo-tenue);
  padding-top: 18px;
  position: relative;
}

/* Il pallino di ogni tappa, con una linea che li unisce */
.avanzamento li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--colore-bordo);
}

.avanzamento li.fatto {
  color: var(--colore-successo-testo);
  font-weight: 600;
}

.avanzamento li.fatto::before {
  background: var(--colore-successo-testo);
}

/* Pulsante per azioni definitive (es. annullare un viaggio) */
.pulsante.pulsante-pericolo {
  color: #d70015;
}

/* Le righe del riepilogo concreto nella card, un po' distanziate */
.card-orari div + div {
  margin-top: 3px;
}

/* "Come leggere la compatibilità": un riquadro discreto sopra i risultati */
.spiegazione {
  font-size: 0.85rem;
  color: var(--colore-testo-tenue);
  margin: -4px 0 14px;
}

.spiegazione summary {
  cursor: pointer;
  color: var(--colore-principale);
  font-weight: 500;
}

.spiegazione p {
  margin: 8px 0 0;
}

/* Le dotazioni del mezzo (sponda, frigo…): contorno al posto dello sfondo,
   per distinguerle dalle informazioni sullo spazio */
.etichetta-dotazione {
  background: transparent;
  border: 1px solid var(--colore-bordo);
  color: var(--colore-testo-tenue);
}

/* Gli orari stimati di ritiro e consegna, quando si cerca una tratta */
.card-orari {
  grid-area: orari;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--colore-notte);
  background: var(--colore-principale-tenue);
  border-radius: 10px;
  padding: 6px 10px;
  margin: 0 0 10px;
}

.etichette {
  grid-area: etichette;
  display: flex;
  flex-wrap: wrap; /* sul telefono le etichette vanno a capo se serve */
  gap: 6px;
}

.etichetta {
  background: var(--colore-riempimento);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--colore-testo);
}

.card-prezzo {
  grid-area: prezzo;
  text-align: right;
  color: var(--colore-notte);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.card-prezzo small {
  display: block;
  font-weight: 400;
  color: var(--colore-testo-tenue);
  font-size: 0.75rem;
  letter-spacing: 0;
}

.vuoto {
  text-align: center;
  color: var(--colore-testo-tenue);
  background: var(--colore-superficie);
  border-radius: var(--raggio-grande);
  padding: 40px 20px;
  box-shadow: var(--ombra);
}

/* ---------- Dettaglio ---------- */
.link-indietro {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.riquadro {
  background: var(--colore-superficie);
  border-radius: var(--raggio-grande);
  padding: 24px 20px;
  box-shadow: var(--ombra);
}

.dettaglio-tratta {
  font-size: 1.9rem;
}

/* La scheda dei dati: due colonne sul telefono, tre su schermi larghi */
.scheda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 1.25rem 0;
}

.scheda div {
  background: var(--colore-riempimento);
  border-radius: var(--raggio);
  padding: 12px 14px;
}

.scheda dt {
  font-size: 0.75rem;
  color: var(--colore-testo-tenue);
}

.scheda dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.note {
  margin: 0 0 1rem;
  color: var(--colore-testo-tenue);
}

.note strong {
  color: var(--colore-testo);
}

.modulo-richiesta {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.nota-piccola {
  font-size: 0.85rem;
  color: var(--colore-testo-tenue);
  margin: 0 0 14px;
}

/* ---------- Riepilogo costi (paghi / al trasportatore / commissione) ---------- */
.riepilogo-costi {
  background: var(--colore-riempimento);
  border-radius: var(--raggio);
  padding: 14px 16px;
  margin: 0 0 18px;
}

.riepilogo-costi div {
  display: flex;
  justify-content: space-between; /* etichetta a sinistra, cifra a destra */
  gap: 12px;
  font-size: 0.9rem;
  color: var(--colore-testo-tenue);
  padding: 3px 0;
}

.riepilogo-costi dd {
  margin: 0;
  white-space: nowrap;
}

.riepilogo-costi .riga-totale {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--colore-testo);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 8px;
  margin-bottom: 6px;
}

/* ---------- Stato della richiesta dopo l'invio ---------- */
.box-richiesta {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dati-richiesta {
  margin: 0 0 16px;
}

.dati-richiesta div {
  margin-bottom: 10px;
}

.dati-richiesta dt {
  font-size: 0.75rem;
  color: var(--colore-testo-tenue);
}

.dati-richiesta dd {
  margin: 0;
}

.stato {
  padding: 12px 16px;
  border-radius: var(--raggio);
  font-weight: 600;
  margin: 0 0 8px;
}

/* Colori dei vari stati: usati sia nei messaggi sia nelle etichette */
.stato-attesa {
  background: var(--colore-attesa);
  color: var(--colore-attesa-testo);
}

.stato-ok {
  background: var(--colore-successo);
  color: var(--colore-successo-testo);
}

.stato-da-pagare {
  background: var(--colore-principale-tenue);
  color: var(--colore-principale-scuro);
}

.stato-rifiutato {
  background: #fff0f0;
  color: #b0000f;
}

/* Avviso quando il viaggio non fa esattamente la tratta richiesta */
.avviso-tratta {
  background: var(--colore-attesa);
  color: var(--colore-attesa-testo);
  border-radius: var(--raggio);
  padding: 12px 14px;
  font-size: 0.9rem;
}

/* Avviso nel dettaglio: "Hai già una richiesta per questo viaggio" */
.avviso-richieste {
  background: var(--colore-principale-tenue);
  border-radius: var(--raggio);
  padding: 12px 14px;
  font-size: 0.9rem;
}

/* ---------- Schermata "Le mie richieste" ---------- */

/* Le card delle richieste non usano la griglia delle card dei viaggi
   e, avendo pulsanti all'interno, non si "sollevano" */
.card-richiesta {
  display: block;
}

.card-richiesta:hover {
  transform: none;
  box-shadow: var(--ombra);
}

.intestazione-richiesta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.card-richiesta .card-tratta {
  color: var(--colore-testo);
}

.card-richiesta .card-data {
  margin-bottom: 0;
}

/* RICHIESTE RICEVUTE APRIBILI: chiusa, la scheda mostra solo il riassunto;
   un tocco la apre con mappa, proposta di carico e pulsanti */
.ricevuta > summary {
  list-style: none; /* togliamo il triangolino standard... */
  cursor: pointer;
}

.ricevuta > summary::-webkit-details-marker {
  display: none;    /* ...anche su Safari */
}

/* Il riassunto: colli, peso e prezzo, e la scritta "Apri" / "Chiudi" */
.riassunto-ricevuta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--colore-testo-tenue);
}

.apri-chiudi {
  flex: none;
  color: var(--colore-principale);
  font-weight: 500;
}

.apri-chiudi::after {
  content: "Apri ›";
}

.ricevuta[open] .apri-chiudi::after {
  content: "Chiudi ⌃";
}

.ricevuta[open] > summary {
  margin-bottom: 12px;
}

/* Suggerimento sulle mappe del telefono: "due dita per muovere" */
.aiuto-dita {
  background: rgba(255, 255, 255, 0.9);
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  color: var(--colore-testo-tenue);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Etichetta colorata con lo stato (In attesa / Da pagare / Pagata) */
.etichetta-stato {
  flex-shrink: 0; /* non si restringe anche se il titolo è lungo */
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Dentro la card togliamo la riga di separazione usata nel dettaglio */
.contenuto-richiesta .box-richiesta {
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}

/* ---------- Modulo di pubblicazione ---------- */
fieldset {
  min-width: 0; /* altrimenti su telefono si allarga quanto il disegno del camion */
  border: none;
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  padding: 20px;
  margin: 0 0 16px;
  box-shadow: var(--ombra);
}

/* Il titolo di ogni gruppo di campi, come le sezioni delle Impostazioni di iPhone */
legend {
  float: left; /* trucco per far stare il titolo dentro il riquadro bianco */
  width: 100%;
  padding: 0;
  margin-bottom: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Riga di testo informativo sotto un campo o una mappa (es. quanti EPAL entrano) */
.ingombro {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--colore-testo-tenue);
  margin: -4px 0 14px;
}

/* Sul telefono i campi sono uno sotto l'altro (una colonna) */
.griglia-2 {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 12px;
  clear: both; /* parte sotto il titolo "float" */
}

/* ---------- Mappa del camion vista dall'alto (SVG) ---------- */

/* Il contenitore scorre in orizzontale se il camion è più largo dello
   schermo (succede con i bilici sul telefono): la pagina resta ferma */
.camion-contenitore {
  overflow-x: auto;
  background: var(--colore-riempimento);
  border-radius: var(--raggio);
  padding: 10px;
  margin: 8px 0 6px;
}

.svg-camion {
  display: block;
}

/* Selettore "Dall'alto | 3D": due pulsanti uniti, come nelle app Apple */
.selettore-vista {
  display: inline-flex;
  background: var(--colore-riempimento);
  border-radius: 9px;
  padding: 2px;
  margin-top: 4px;
}

.selettore-vista button {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--colore-testo-tenue);
  padding: 5px 14px;
  border-radius: 7px;
  cursor: pointer;
}

/* Il pulsante attivo diventa bianco e "sollevato" */
.selettore-vista button[aria-pressed="true"] {
  background: var(--colore-superficie);
  color: var(--colore-testo);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* In 3D il contenitore non scorre: si ruota la vista con il dito */
.camion-contenitore.vista-3d {
  overflow: hidden;
  padding: 0;
}

.camion-contenitore.vista-3d canvas {
  display: block;
  border-radius: var(--raggio);
}

.messaggio-3d {
  text-align: center;
  color: var(--colore-testo-tenue);
  font-size: 0.9rem;
  padding: 40px 16px;
  margin: 0;
}

.aiuto-3d {
  text-align: center;
  font-size: 0.75rem;
  color: var(--colore-testo-tenue);
  margin: 6px 0;
}

/* Nell'SVG i colori si danno con "fill" (riempimento) e "stroke" (bordo).
   Le dimensioni dei testi sono in centimetri del camion, come il resto. */
.svg-cabina {
  fill: #c7c7cc;
}

.svg-vano {
  fill: #ffffff;
  stroke: #a1a1a6;
  stroke-width: 3;
}

.svg-metro {
  stroke: #d2d2d7;
  stroke-width: 1.5;
  stroke-dasharray: 6 6; /* linea tratteggiata */
}

.svg-quota,
.svg-scritta,
.svg-etichetta {
  text-anchor: middle;        /* testo centrato orizzontalmente */
  dominant-baseline: central; /* …e verticalmente */
  font-family: inherit;
}

.svg-quota {
  font-size: 16px;
  fill: var(--colore-testo-tenue);
}

.svg-scritta {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  fill: var(--colore-testo-tenue);
}

.svg-etichetta {
  font-size: 18px;
  font-weight: 600;
}

/* Colori della merce, per chi l'ha caricata */
.svg-trasportatore rect { fill: #d2d2d7; }
.svg-trasportatore text { fill: #6e6e73; }

/* Colli del trasportatore non ancora caricati (si possono spostare) */
.svg-da-caricare rect { fill: #e5e5ea; }

/* Colli da spostare per fare posto: bordo arancione tratteggiato */
.svg-spostato rect {
  stroke: #ff9500;
  stroke-width: 4;
  stroke-dasharray: 10 6;
}

.svg-cliente rect { fill: #a9c3e8; }
.svg-cliente text { fill: #174a96; }

.svg-nuovo rect { fill: var(--colore-principale); }
.svg-nuovo text { fill: #ffffff; }

.svg-evidenziato rect { fill: var(--colore-successo-testo); }
.svg-evidenziato text { fill: #ffffff; }

/* Merce a bordo su un ALTRO tratto del viaggio (sale dopo o scende prima):
   solo il contorno tratteggiato, perché in questo tratto il posto è libero */
.svg-altro-tratto rect {
  fill: rgba(91, 101, 119, 0.06);
  stroke: #8e9bb0;
  stroke-width: 3;
  stroke-dasharray: 10 8;
}
.svg-altro-tratto text { fill: #8e9bb0; }

/* Legenda sotto la mappa: un quadratino colorato per ogni voce */
.legenda-camion {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.8rem;
  color: var(--colore-testo-tenue);
  margin: 0 0 12px;
}

.legenda-camion i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: -1px;
  margin-right: 3px;
}

.colore-trasportatore { background: #d2d2d7; }
.colore-cliente { background: #a9c3e8; }
.colore-da-caricare { background: #e5e5ea; }
.colore-spostato { background: #ffffff; border: 2px dashed #ff9500; }
.colore-nuovo { background: var(--colore-principale); }
.colore-evidenziato { background: var(--colore-successo-testo); }
.colore-libero { background: #ffffff; border: 1px solid #a1a1a6; }
.colore-altro-tratto { background: #ffffff; border: 2px dashed #8e9bb0; }

/* ---------- Elenco dei colli nella richiesta ---------- */

/* Un riquadro per ogni tipo di collo */
.collo {
  background: var(--colore-riempimento);
  border-radius: var(--raggio);
  padding: 12px;
  margin-bottom: 10px;
}

.collo-testata {
  display: flex;
  flex-wrap: wrap; /* sul telefono i menu (tipo, stato, "scende a") vanno a capo */
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.collo-testata select {
  background: var(--colore-superficie);
}

/* I campi del collo: 2 colonne sul telefono, 5 su schermi larghi */
.griglia-colli {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

.griglia-colli .campo {
  margin-bottom: 8px;
}

.griglia-colli input {
  background: var(--colore-superficie);
  padding: 10px;
}

/* Riquadro con i problemi (colli che non entrano, peso eccessivo…) */
.errori-colli {
  background: #fff0f0;
  color: #b0000f;
  border-radius: var(--raggio);
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 0.9rem;
}

.errori-colli p {
  margin: 4px 0;
}

/* ---------- Calcolo del prezzo (spazio + peso) ---------- */
.calcolo-prezzo {
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 12px 16px;
  margin: 0 0 14px;
  font-size: 0.9rem;
}

/* Ogni riga: descrizione a sinistra, importo a destra */
.calcolo-prezzo div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  color: var(--colore-testo-tenue);
}

/* Riga del prezzo minimo quando scatta: in blu, per farla notare */
.calcolo-prezzo .riga-minimo-applicato {
  color: var(--colore-principale-scuro);
  font-weight: 600;
}

.calcolo-prezzo .riga-totale {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 700;
  color: var(--colore-testo);
}

/* ---------- Avvisi di errore e di blocco ---------- */

/* Avviso in alto in versione "errore": bordo rosso invece che verde */
.avviso.avviso-errore {
  border-left-color: #d70015;
}

/* Messaggio nel dettaglio quando il viaggio è partito o al completo */
.avviso-blocco {
  background: var(--colore-riempimento);
  color: var(--colore-testo-tenue);
  border-radius: var(--raggio);
  padding: 14px 16px;
  font-weight: 500;
  text-align: center;
  margin: 0.75rem 0 0;
}

/* Errore dentro il riquadro di accettazione */
.errore-accettazione {
  color: #d70015;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 8px 0;
}

/* ---------- Riquadro "vista del trasportatore" (simulata) ---------- */
.box-trasportatore {
  border: 1px dashed var(--colore-bordo); /* tratteggiato: è una simulazione */
  border-radius: var(--raggio);
  padding: 16px;
  margin-top: 12px;
}

.box-trasportatore h3:first-of-type {
  margin-top: 0.25rem;
}

/* Caselle da spuntare su una riga intera, cliccabile tutta
   (es. "merce sovrapponibile", conferma della disposizione) */
.scelta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--raggio);
  background: var(--colore-riempimento);
  font-size: 0.9rem;
  cursor: pointer;
}

/* Le esigenze della merce: caselle in griglia (2 colonne sul telefono) */
.esigenze {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
}

.esigenze-titolo {
  margin: 14px 0 6px;
}

/* Le caselle non devono prendere la larghezza 100% data a tutti gli input */
.scelta input {
  width: auto;
  margin-top: 3px;
  accent-color: var(--colore-principale);
}

/* ---------- Piè di pagina ---------- */
.piede {
  text-align: center;
  color: var(--colore-testo-tenue);
  font-size: 0.8rem;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.piede p {
  margin: 0 0 6px;
}

/* Un pulsante che sembra un link: discreto, per azioni secondarie */
.link-pulsante {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--colore-principale);
  cursor: pointer;
}

.link-pulsante:hover {
  text-decoration: underline;
}

/* ---------- Ritocchi alla mappa Leaflet ---------- */
.leaflet-popup-content-wrapper {
  border-radius: var(--raggio);
  box-shadow: var(--ombra-forte);
}

.leaflet-popup-content {
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* =============================================================
   TELEFONI MOLTO STRETTI (fino a 420px)
   ============================================================= */
@media (max-width: 420px) {
  h1 {
    font-size: 1.75rem;
  }
}

/* =============================================================
   SCHERMI PIÙ LARGHI (tablet e computer, da 600px in su)
   ============================================================= */
@media (min-width: 600px) {
  main {
    padding-top: 3rem;
  }

  /* Sul computer il menu torna in alto, nell'intestazione "vetro smerigliato" */
  .intestazione {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }

  body {
    padding-bottom: 0;
  }

  .navigazione {
    position: static;
    gap: 2px;
    padding: 0;
    background: none;
    border-top: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Voci a "pillola" con solo il nome, come prima */
  .nav-link {
    flex: none;
    flex-direction: row;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.9rem;
  }

  .nav-link:hover {
    color: var(--colore-testo);
  }

  .nav-link.attivo {
    background: rgba(0, 0, 0, 0.06);
    color: var(--colore-testo);
  }

  .nav-icona {
    display: none;
  }

  .contatore {
    position: static;
    background: var(--colore-principale);
  }

  .avviso {
    bottom: 24px;
  }

  h1 {
    font-size: 2.6rem;
  }

  .griglia-2 {
    grid-template-columns: 1fr 1fr;
  }

  .scheda {
    grid-template-columns: repeat(3, 1fr);
  }

  .riquadro {
    padding: 32px;
  }

  .dettaglio-tratta {
    font-size: 2.3rem;
  }

  .mappa {
    height: 340px;
  }

  .mappa-piccola {
    height: 240px;
  }

  .griglia-colli {
    grid-template-columns: repeat(5, 1fr);
  }

  .griglia-ricerca {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Casella di conferma della nuova disposizione, nella vista del trasportatore:
   bordo arancione come i colli da spostare, per farla notare */
.scelta.conferma-disposizione {
  border: 1px solid #ff9500;
  background: #fff8ec;
}

/* ---------- Editor della mappa: colli da trascinare e ruotare ---------- */

/* I colli modificabili si "afferrano": la manina del mouse lo fa capire.
   touch-action: none dice al telefono di non scorrere la pagina mentre
   si trascina un collo con il dito. */
.svg-modificabile {
  cursor: grab;
  touch-action: none;
}

.svg-modificabile:active {
  cursor: grabbing;
}

/* Il collo selezionato (quello che "Ruota" girerà) ha un bordo blu spesso */
.svg-selezionato rect {
  stroke: var(--colore-principale-scuro);
  stroke-width: 6;
}

/* Mentre lo trascini in un posto dove si sovrapporrebbe, diventa rosso */
.svg-in-conflitto rect {
  fill: #ff3b30 !important;
  opacity: 0.8;
}

/* Pulsanti sotto la mappa: "Ruota" e "Riordina automaticamente" */
.barra-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 4px 0 6px;
}

.barra-editor .pulsante {
  padding: 8px 16px;
  font-size: 0.9rem;
}

.barra-editor .pulsante:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.aiuto-editor {
  font-size: 0.8rem;
  color: var(--colore-testo-tenue);
  margin: 0 0 12px;
}

.aiuto-editor.aiuto-errore {
  color: #d70015;
  font-weight: 500;
}

/* ---------- Controproposta di prezzo (vista del trasportatore) ---------- */
.controproposta {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 14px;
  padding-top: 12px;
}

.controproposta summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--colore-principale);
  padding: 4px 0;
}

.controproposta[open] summary {
  margin-bottom: 8px;
}

/* ---------- Percorso, come in un navigatore ---------- */
.info-percorso {
  margin: 10px 0 4px;
}

/* La scheda del percorso: i dati più importanti in evidenza */
.scheda-percorso {
  margin: 0 0 6px;
}

.scheda-percorso dd strong {
  color: var(--colore-principale-scuro);
}

/* ---------- Mappa della ricerca: il tuo percorso e i più compatibili ---------- */

/* Invito a inserire il percorso, al posto della mappa */
/* Invito sotto la mappa, finché non c'è un percorso da cercare */
.aiuto-mappa {
  margin: 6px 4px 0;
  color: var(--colore-testo-tenue);
  font-size: 0.85rem;
}

/* Etichetta "1° più compatibile": bordo e testo nel colore della sua strada.
   --colore-mappa lo imposta il JavaScript, diverso per ogni viaggio. */
.etichetta.etichetta-mappa {
  background: var(--colore-superficie);
  border: 2px solid var(--colore-mappa);
  color: var(--colore-mappa);
  font-weight: 700;
}

/* Nella legenda dei percorsi i "quadratini" sono delle lineette */
.legenda-percorsi i {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  vertical-align: middle;
}

.mappa-ricevuta {
  margin-top: 8px;
}

/* ---------- Merce non sovrapponibile: righe rosse ---------- */

/* Le righe vanno sopra il colore del collo. Il selettore è più "forte" di
   quelli come ".svg-nuovo rect", altrimenti il colore coprirebbe le righe. */
.svg-camion rect.svg-non-sovrapponibile {
  fill: url(#righe-non-sovrapponibile);
  pointer-events: none; /* non disturba il trascinamento nell'editor */
}

/* Il quadratino della legenda, a righe rosse come sulla mappa */
.colore-non-sovrapponibile {
  background: repeating-linear-gradient(45deg, #ff3b30 0 3px, #ffffff 3px 6px);
}

/* ---------- Tappe intermedie (modulo "+ Pubblica") ---------- */
.tappe {
  margin: 4px 0 12px;
}

/* Una riga per tappa: numero, città, "Rimuovi" */
.tappa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.tappa input {
  flex: 1;
}

/* Il numero della tappa in un cerchietto */
.numero-tappa {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--colore-principale-tenue);
  color: var(--colore-principale-scuro);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Prenotazione immediata ---------- */

/* L'etichetta "⚡ Prenotazione immediata" nelle card: arancio tramonto */
.etichetta-immediata {
  background: #fff1e6;
  color: #b4540a;
}

/* Il riquadro nel modulo di richiesta quando si può prenotare subito */
.avviso-immediata {
  background: #fff1e6;
  border-left: 4px solid var(--colore-accento);
  border-radius: var(--raggio);
  padding: 10px 14px;
  font-size: 0.9rem;
}

/* ---------- Tratte seguite ---------- */
#segui-tratta {
  margin: -6px 0 14px;
}

.elenco-tratte {
  list-style: none;
  padding: 0;
  margin: 8px 0 14px;
}

.elenco-tratte li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--colore-superficie);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.tratte-trasportatore {
  margin-bottom: 1rem;
  padding: 12px 14px;
  background: var(--colore-principale-tenue);
  border-radius: var(--raggio);
}

.tratte-trasportatore summary {
  cursor: pointer;
  font-weight: 600;
}

/* ---------- "Come funziona e quanto costa" ---------- */
.testo-guida h2 {
  margin-top: 1.6rem;
}

.testo-guida h2:first-child {
  margin-top: 0;
}

.testo-guida li {
  margin-bottom: 6px;
}

/* La mappa con la posizione del camion, per chi spedisce */
.mappa-posizione {
  margin: 0 0 12px;
}

/* ---------- L'azienda con cui si usa l'app ---------- */

/* Il nome dell'azienda in alto a destra, accanto alla campanella */
.chi-sono {
  max-width: 11em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* i nomi lunghi finiscono con "…" */
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--colore-notte);
  background: var(--colore-riempimento);
  border-radius: 999px;
  padding: 6px 12px;
}

.chi-sono:hover {
  text-decoration: none;
}

/* Sul telefono stretto il logo lascia spazio al nome dell'azienda */
@media (max-width: 420px) {
  .logo-testo {
    display: none;
  }
}

/* L'azienda attuale, nell'elenco "Entra" */
.voce-azienda.attuale {
  outline: 2px solid var(--colore-principale);
}

.voce-azienda .pulsante {
  margin-top: 10px;
}

/* La spiegazione in Pubblica per chi non è abilitato al conto terzi */
.blocco-conto-terzi {
  border-left: 4px solid var(--colore-accento);
}

.blocco-conto-terzi h2 {
  margin-top: 0;
}

/* ---------- Card dei viaggi: dall'essenziale ai dettagli ---------- */

/* La data subito sotto la tratta, senza lo spazio grande di prima */
.card .card-data {
  margin: 2px 0 8px;
}

/* La riga dell'azienda: nome, verificata, voto */
.card-azienda {
  grid-area: azienda;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  margin-bottom: 10px;
}

.nome-azienda {
  font-weight: 600;
}

.card-azienda .badge-verificata,
.card-azienda .badge-da-verificare {
  margin-left: 0;
}

.voto-azienda {
  color: #b07700;
  font-weight: 600;
}

/* Le etichette che spiegano perché il viaggio fa al caso tuo */
.card .etichette {
  margin-bottom: 10px;
}

/* I dettagli tecnici: una riga di testo piccolo, in fondo */
.card-specifiche {
  grid-area: specifiche;
  font-size: 0.8rem;
  color: var(--colore-testo-tenue);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 8px;
}

/* Il prezzo un po' più grande: è la prima cosa che si guarda */
.card .card-prezzo {
  font-size: 1.35rem;
}

/* ---------- Richiesta di spazio: sezioni facoltative e barra del prezzo ---------- */

/* Le sezioni facoltative, chiuse: si aprono con un tocco */
.sezione-facoltativa {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: var(--raggio);
  background: var(--colore-riempimento);
}

.sezione-facoltativa > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.sezione-facoltativa > summary::-webkit-details-marker {
  display: none;
}

/* La stessa freccetta blu di "Filtri" */
.sezione-facoltativa > summary::before {
  content: "›";
  display: inline-block;
  width: 1em;
  color: var(--colore-principale);
  font-size: 1.3em;
  line-height: 1;
  transition: transform var(--transizione);
}

.sezione-facoltativa[open] > summary::before {
  transform: rotate(90deg);
}

.sezione-facoltativa .facoltativo {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--colore-testo-tenue);
  margin-left: 4px;
}

.sezione-facoltativa[open] > summary {
  margin-bottom: 10px;
}

/* LA BARRA DEL PREZZO: "appiccicata" in fondo allo schermo (position: sticky)
   mentre si scorre il modulo. Sul telefono sta sopra la barra del menu. */
.barra-prezzo {
  position: sticky;
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 1rem;
  padding: 12px 14px;
  border-radius: var(--raggio-grande);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(11, 27, 52, 0.18);
}

.barra-prezzo-testo strong {
  display: block;
  font-size: 1.3rem;
  color: var(--colore-notte);
  letter-spacing: -0.02em;
}

.barra-prezzo-testo small {
  color: var(--colore-testo-tenue);
  font-size: 0.78rem;
}

.barra-prezzo .pulsante {
  flex: none;
}

@media (min-width: 600px) {
  .barra-prezzo {
    bottom: 12px;
  }
}

/* ---------- MODALITÀ: AUTOTRASPORTATORE O CLIENTE ---------- */
.interruttore-ruolo { display: flex; gap: 2px; max-width: 420px; margin: 0 auto 8px; padding: 2px; border-radius: 10px; background: rgba(118, 118, 128, 0.14); }
.intestazione .interruttore-ruolo { width: calc(100% - 32px); }
.interruttore-ruolo button { flex: 1; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 0.85rem; cursor: pointer; }
.interruttore-ruolo button[aria-pressed="true"] { background: var(--colore-superficie, #fff); color: var(--colore-testo, #1c1c1e); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-weight: 600; }
body.senza-modo .interruttore-ruolo, body.senza-modo .navigazione, body.senza-modo .chi-sono, body.senza-modo .campanella, body.azienda-cliente .interruttore-ruolo { display: none; }
body.modo-cliente .solo-trasportatore, body.modo-trasportatore .solo-cliente { display: none !important; }
.scelta-ruolo { display: none; }
.inizio { text-align: center; }
.inizio-icona { border-radius: 19px; }
.scelta-iniziale { display: grid; gap: 12px; max-width: 480px; margin: 0 auto; }
.scelta-iniziale .card { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 20px; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.scelta-iniziale strong { font-size: 1.1rem; }
.scelta-iniziale span { color: var(--colore-testo-tenue, #6e6e73); }

/* Le sottosezioni di Gestionale e Configurazione */
.area-g .sotto-sezioni { display: flex; gap: 4px; margin: 4px 0 16px; overflow-x: auto; scrollbar-width: none; }
.area-g .sotto-sezioni a { flex: none; padding: 7px 11px; border-radius: 999px; background: rgba(118, 118, 128, 0.14); color: inherit; font-size: 0.82rem; text-decoration: none; }
.area-g .sotto-sezioni a[aria-current="page"] { background: var(--colore-principale); color: #fff; font-weight: 600; }

/* Nessuno sforamento di lato su telefono */
html { overflow-x: clip; }

/* Su telefono l'intestazione colorata lascia più spazio ai contenuti */
@media (max-width: 600px) {
  .hero { margin-top: 10px; padding: 16px 18px 18px; }
  .hero h1 { font-size: 1.45rem; }
  .hero .sottotitolo { font-size: 0.9rem; }
}

/* Il modulo azienda: si apre solo ciò che serve */
.scelta-tipo { margin: 12px 0; }
#modulo-azienda h3 { margin: 14px 0 6px; font-size: 0.95rem; }

/* "hidden" nasconde sempre, anche gli elementi con un loro display */
[hidden] { display: none !important; }

.aziende-prova { margin-top: 16px; }
.aziende-prova > summary { padding: 12px 0; color: var(--colore-principale); font-weight: 600; cursor: pointer; }