/* ==========================================================================
   Mobilitat · full d'estil de l'aplicació.

   Els **colors** són els de la casa i no es toquen: `xalanda.css` segueix sent qui
   els defineix, i la marca de l'Ajuntament els redefineix sense tocar res més. El
   que hi ha aquí és **la forma**: menú lateral, amplada fluida, fitxes netes i el
   quadre de la Zontes.

   Tres decisions que valen per a tot el fitxer:

   1. **L'amplada la mana el monitor.** Res de columna de 1.180 px al mig d'una
      pantalla de 27": el contingut ocupa el que hi ha, amb un sostre generós perquè
      en un ultrapanoràmic les línies de text no es facin inllegibles.
   2. **Les icones són de Lucide**, un sol joc, incrustat a la pàgina. Cap emoji a la
      interfície: un emoji el dibuixa el sistema operatiu i cada màquina el pinta
      diferent.
   3. **Ni rellotges d'agulla de la planta solar, ni rèpliques de quadres.** Les dues
      coses s'han provat i s'han tret: la pantalla ensenya xifres netes, i el dibuix
      que hi ha d'haver és **el mapa**.
   ========================================================================== */

:root {
  --menu: 248px;              /* amplada del menú lateral */
  --ample-max: 2280px;        /* sostre del contingut en pantalles molt amples */
  --gutter: clamp(1rem, 1.6vw, 2.2rem);
  --radi-gran: 18px;
}

/* --- Esquelet: menú a l'esquerra, contingut a la dreta -------------------- */
body { display: grid; grid-template-columns: var(--menu) 1fr; min-height: 100vh; }

.menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.1rem .85rem 1rem;
  background: linear-gradient(170deg, var(--brand-fosc), var(--brand) 55%, var(--brand-fosc));
  color: #fff;
}

/* La marca, a dalt del menú. Les dues disposicions de `marca.py` hi caben: a «casa»
   el logo i el nom junts; a «entitat», el logo de l'Ajuntament a sobre i el
   departament a sota, que és qui mana a la seva capçalera. */
.m-marca { display: block; text-decoration: none; color: inherit;
           padding: .35rem .5rem 1rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.m-marca img { max-width: 100%; height: auto; display: block; }
.m-marca.casa img { height: 34px; width: auto; }
.m-marca.entitat img { height: 54px; width: auto; margin-bottom: .5rem; }
.m-nom { font-size: 1.32rem; font-weight: 800; letter-spacing: .2px; margin-top: .55rem; }
.m-sub { font-size: .76rem; opacity: .88; line-height: 1.3; }
.m-dept { font-size: .74rem; font-weight: 700; opacity: .92; line-height: 1.3; }

.m-titol { font-size: .64rem; font-weight: 800; text-transform: uppercase;
           letter-spacing: .1em; opacity: .62; padding: .9rem .55rem .25rem; }

.m-nav { display: flex; flex-direction: column; gap: 1px; }
.m-nav a {
  display: flex; align-items: center; gap: .68rem;
  padding: .52rem .6rem; border-radius: 9px;
  color: #fff; text-decoration: none; font-size: .88rem; font-weight: 600;
  opacity: .88; transition: background .14s, opacity .14s;
}
.m-nav a:hover { background: rgba(255,255,255,.13); opacity: 1; }
.m-nav a.actiu { background: #fff; color: var(--brand-fosc); opacity: 1; font-weight: 700; }
.m-nav .ic { width: 1.15rem; height: 1.15rem; flex: none; }
.m-nav .lock { margin-left: auto; opacity: .6; }
.m-nav .lock .ic { width: .95rem; height: .95rem; }
/* Una secció que encara no fa res es veu que no en fa: no s'amaga, però tampoc no es
   presenta com si estigués llesta. */
.m-nav a.prep { opacity: .62; }
.m-nav a.prep::after { content: "aviat"; margin-left: auto; font-size: .62rem;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .1rem .36rem; border-radius: 5px; border: 1px solid rgba(255,255,255,.35); }
.m-nav a.prep.actiu::after { border-color: color-mix(in srgb, var(--brand-fosc) 40%, transparent); }

.m-peu { margin-top: auto; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.16);
         display: flex; flex-direction: column; gap: .6rem; }
.m-usuari { display: flex; align-items: center; gap: .5rem; font-size: .78rem;
            color: #fff; text-decoration: none; opacity: .88; padding: .3rem .55rem; }
.m-usuari:hover { opacity: 1; }
.m-versio { font-size: .66rem; opacity: .55; padding: 0 .55rem; }

.m-tema { display: flex; gap: .25rem; padding: .22rem; border-radius: 999px;
          background: rgba(255,255,255,.14); align-self: flex-start; }
.m-tema button { width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
                 border: 0; border-radius: 50%; background: transparent; color: #fff;
                 cursor: pointer; padding: 0; }
.m-tema button:hover { background: rgba(255,255,255,.2); }
.m-tema button[aria-pressed="true"] { background: #fff; color: var(--brand-fosc); }
.m-tema .ic { width: 1.05rem; height: 1.05rem; }

/* El contingut: amplada fluida de debò. */
main { max-width: var(--ample-max); width: 100%; margin: 0 auto;
       padding: var(--gutter) var(--gutter) 3rem; }

/* El botó del menú només existeix a pantalla estreta. */
.m-obre, .m-tanca { display: none; }

@media (max-width: 1000px) {
  body { grid-template-columns: 1fr; }
  .menu { position: fixed; z-index: 60; width: min(86vw, var(--menu)); height: 100dvh;
          transform: translateX(-102%); transition: transform .18s ease-out;
          box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.menu-obert .menu { transform: none; }
  .m-obre { display: inline-flex; align-items: center; gap: .5rem;
            position: sticky; top: 0; z-index: 50; width: 100%;
            padding: .7rem var(--gutter); border: 0; cursor: pointer;
            background: var(--brand-fosc); color: #fff; font: inherit; font-weight: 700; }
  .m-tanca { display: grid; place-items: center; position: absolute; top: .7rem; right: .7rem;
             width: 2rem; height: 2rem; border: 0; border-radius: 50%; cursor: pointer;
             background: rgba(255,255,255,.18); color: #fff; }
  .m-fons { position: fixed; inset: 0; z-index: 55; background: rgba(4,10,22,.55); }
}
@media (min-width: 1001px) { .m-fons { display: none; } }

/* --- Capçalera de pàgina -------------------------------------------------- */
.pag { display: flex; align-items: flex-end; gap: 1rem .9rem; flex-wrap: wrap;
       margin-bottom: 1.1rem; }
.pag h1 { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.pag .pag-sub { color: var(--muted); font-size: .85rem; margin: .18rem 0 0; max-width: 78ch; }
.pag-accions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- Utilitats que no són a xalanda.css ---------------------------------- */
.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em;
      fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }
.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }

.banner { display: flex; align-items: flex-start; gap: .6rem; }
.banner .ic { margin-top: .12rem; }
.banner.info { color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); }
.banner.info strong { color: var(--brand); }

.btn { text-decoration: none; display: inline-flex; align-items: center; gap: .45rem;
       font-weight: 650; }
.btn.secundari { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn.secundari:hover { border-color: var(--brand); color: var(--ink); }
.fila-accio { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }

.taula { width: 100%; border-collapse: collapse; font-size: .86rem; }
.taula th, .taula td { padding: .5rem .7rem; text-align: left;
                       border-bottom: 1px solid var(--line); vertical-align: top; }
.taula th { color: var(--muted); font-weight: 700; font-size: .72rem;
            text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.taula tbody tr:hover { background: var(--surface-2); }
.taula .dr { text-align: right; }
.taula .nw { white-space: nowrap; }
.taula .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.taula-peu { margin-top: .7rem; }
.st-head.sub { margin-top: 1.5rem; }
.st-head.sub h3 { font-size: .98rem; margin: 0; font-weight: 700; }
.st-head .btn, .st-head .finestres { margin-left: auto; }

/* --- Tria de vehicle ----------------------------------------------------- */
.tria-vehicles { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.tv { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
      padding: .5rem .85rem; border-radius: 11px; color: var(--ink);
      background: var(--surface); border: 1px solid var(--line); }
.tv:hover { border-color: var(--brand); }
.tv.actiu { border-color: var(--brand);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 32%, transparent); }
.tv .ic { width: 1.3rem; height: 1.3rem; color: var(--brand); }
.tv-txt { display: flex; flex-direction: column; line-height: 1.25; }
.tv-txt strong { font-size: .88rem; font-weight: 700; }
.tv-txt span { font-size: .71rem; color: var(--muted); }
.tv.sense { border-style: dashed; }
.tv.sense .ic { color: var(--muted); }

/* --- Fitxes de lectura i de xifres --------------------------------------- */
.reixa { display: grid; gap: .9rem;
         grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); }
.fitxa { background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
         padding: .85rem .95rem; display: flex; flex-direction: column; gap: .18rem; }
.fitxa-cap { display: flex; align-items: center; gap: .45rem; color: var(--muted);
             font-size: .68rem; font-weight: 800; text-transform: uppercase;
             letter-spacing: .06em; }
.fitxa-cap .ic { width: .95rem; height: .95rem; }
.fitxa-v { font-size: 1.62rem; font-weight: 800; line-height: 1.1;
           font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fitxa-v .u { font-size: .72rem; color: var(--muted); font-weight: 600; margin-left: .22rem;
              letter-spacing: 0; }
.fitxa-nota { font-size: .73rem; color: var(--muted); line-height: 1.35; }
.fitxa.c-verd .fitxa-cap .ic { color: var(--verd); }
.fitxa.c-ambre .fitxa-cap .ic { color: var(--ambre); }
.fitxa.c-roig  .fitxa-cap .ic { color: var(--vermell); }
.fitxa.c-roig  .fitxa-v { color: var(--vermell); }

/* --- Odòmetre de rodets --------------------------------------------------- */
.od-blok { background: var(--surface-2); border: 1px solid var(--line);
           border-radius: 13px; padding: .85rem 1rem; }
.od-cos { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.od-et { font-size: .67rem; font-weight: 800; color: var(--muted);
         text-transform: uppercase; letter-spacing: .06em; }
.odometre { display: inline-flex; gap: 2px; font-variant-numeric: tabular-nums; }
.od-r { display: inline-grid; place-items: center; min-width: 1.45rem; padding: .2rem .1rem;
        font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--ink);
        border: 1px solid var(--line); border-radius: 4px;
        background-image: linear-gradient(var(--surface-2), var(--surface) 42%,
                                          var(--surface) 58%, var(--surface-2)); }
.od-r.od-d { min-width: 1.1rem; font-size: 1.15rem; color: var(--muted); }
.od-sep { width: 4px; align-self: flex-end; height: 5px; margin: 0 1px 4px;
          border-radius: 50%; background: var(--brand); }
.od-u { font-size: .82rem; font-weight: 700; color: var(--muted); }
.od-sense .od-r { color: var(--muted); }
.od-nota { font-size: .75rem; color: var(--muted); margin: .5rem 0 0; }

/* --- Trajectes i mapa ----------------------------------------------------- */
.traj-destacat { display: flex; flex-direction: column; gap: .9rem; }
.traj-rel { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.traj-rel strong { font-size: 1.05rem; }
.traj-destacat > .btn { align-self: flex-start; }

/* El mapa creix amb la finestra: en un monitor gran el que es vol és mapa. */
.mapa { height: clamp(360px, 64vh, 900px); border-radius: 13px;
        border: 1px solid var(--line); margin-bottom: .6rem; z-index: 0; }
.mapa-peu { margin: 0 0 1rem; }
:root[data-theme="dark"] .mapa .leaflet-tile-pane,
:root:not([data-theme="light"]) .mapa .leaflet-tile-pane { filter: brightness(.72) saturate(.85); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mapa .leaflet-tile-pane { filter: none; }
}

/* --- Fitxa de vehicle ----------------------------------------------------- */
.fitxa-dades { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
               gap: .8rem 1.4rem; margin: .2rem 0 1rem; }
.fitxa-dades dt { font-size: .67rem; font-weight: 800; color: var(--muted);
                  text-transform: uppercase; letter-spacing: .05em; }
.fitxa-dades dd { margin: .15rem 0 0; font-size: .92rem; font-weight: 600; }
.form-km { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
           gap: .8rem 1.2rem; align-items: end; }
.form-km .camp-ample { grid-column: span 2; }
.form-km input { font: inherit; width: 100%; padding: .46rem .6rem; border-radius: 8px;
                 border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.form-km input:focus-visible { border-color: var(--brand); }
.form-km .fila-accio { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 560px) { .form-km .camp-ample { grid-column: span 1; } }
.desviacions { list-style: none; padding: 0; margin: .2rem 0 0;
               display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; }
.desviacions li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
                  padding: .4rem .6rem; border-radius: 8px; background: var(--surface-2); }

/* --- Canvi de marca (Sistema) --------------------------------------------- */
.marques { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
           gap: 1rem; margin: .4rem 0 0; }
.marca-opcio { display: block; cursor: pointer; }
.marca-opcio input { position: absolute; opacity: 0; pointer-events: none; }
.marca-mostra { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem;
                border-radius: 13px; color: #fff; border: 2px solid transparent; }
.marca-mostra img { height: 38px; width: auto; }
.marca-mostra strong { display: block; font-size: 1.05rem; }
.marca-mostra span { display: block; font-size: .76rem; opacity: .92; }
.marca-opcio input:checked + .marca-mostra { border-color: var(--ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 22%, transparent); }
.marca-opcio input:focus-visible + .marca-mostra { outline: 2px solid var(--brand);
    outline-offset: 3px; }
.marca-peu { font-size: .78rem; color: var(--muted); margin-top: .4rem; }
.marca-peu .actual { color: var(--verd); font-weight: 700; }

/* --- Fonts de dades ------------------------------------------------------- */
.fonts { list-style: none; padding: 0; margin: 0; display: grid;
         grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .9rem; }
.font { padding: .85rem 1rem; border-radius: 13px; background: var(--surface-2);
        border: 1px solid var(--line); border-left: 4px solid var(--gris); }
.font-be { border-left-color: var(--verd); }
.font-mal { border-left-color: var(--vermell); }
.font-cap { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
            justify-content: space-between; }
.font code { font-size: .74rem; }
.font-nota { font-size: .78rem; color: var(--muted); margin: .45rem 0 0; line-height: 1.4; }

/* --- Seccions en preparació ----------------------------------------------
   No són pàgines buides amb un «properament»: diuen exactament què hi haurà, amb
   quines dades, i què falta perquè hi sigui. Val més això que una caixa en blanc. */
.prep-cap { display: flex; align-items: center; gap: .8rem; margin-bottom: .3rem; }
.prep-cap .ic { width: 2rem; height: 2rem; color: var(--brand); stroke-width: 1.7; }
.prep-llista { margin: .2rem 0 0; padding-left: 1.2rem; font-size: .88rem;
               display: flex; flex-direction: column; gap: .5rem; line-height: 1.5; }
.prep-llista strong { color: var(--ink); }
.prep-falta { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.1rem;
              padding: .75rem .9rem; border-radius: 11px;
              background: color-mix(in srgb, var(--ambre) 10%, var(--surface));
              border: 1px solid color-mix(in srgb, var(--ambre) 32%, var(--line));
              font-size: .85rem; }
.prep-falta .ic { color: var(--ambre); margin-top: .1rem; }

.mostra { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem;
          font-weight: 800; padding: .14rem .45rem; border-radius: 6px;
          color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
          font-variant-numeric: tabular-nums; }
.mostra.poques { color: var(--ambre);
                 border-color: color-mix(in srgb, var(--ambre) 38%, var(--line)); }

/* --- Entrada i peu -------------------------------------------------------- */
.login-wrap { display: flex; justify-content: center; padding: 3rem 1rem; }
.peu { color: var(--muted); font-size: .74rem; display: flex; gap: .4rem;
       flex-wrap: wrap; padding: 1.4rem var(--gutter) 2rem;
       max-width: var(--ample-max); margin: 0 auto; }
.peu-sep { opacity: .5; }

/* --- Mides del mapa -------------------------------------------------------
   El mapa és el que es vol veure d'una aplicació de mobilitat: se li dona tota
   l'alçada que la finestra permeti, no una tira. */
.mapa-quadre { height: clamp(320px, 52vh, 680px); }
.mapa-gran   { height: clamp(380px, 68vh, 980px); }

/* --- Registres descartats -------------------------------------------------
   Plegat, però sempre a la vista: filtrar en silenci és tan dolent com no filtrar. */
.descartats { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: 11px;
              background: var(--surface-2); padding: .7rem .9rem; }
.descartats summary { cursor: pointer; display: flex; align-items: center; gap: .5rem;
                      font-size: .85rem; font-weight: 600; }
.descartats summary::-webkit-details-marker { display: none; }
.descartats summary .ic { color: var(--ambre); }
.descartats[open] summary { margin-bottom: .7rem; }
.descartats .muted { margin: 0 0 .7rem; }