/* ═══════════════════════════════════════════════════════════════════════
   HEALTHY FLEETS · las piezas

   Una pieza por cosa que existe en pantalla. Nada de valores a mano: todo
   sale de los tokens de sistema.css. Los nombres son los de la casa, en
   castellano, para que el que venga detras sepa de que se habla.
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────── armazon */

.pantalla {
  min-height: 100dvh;
  padding-bottom: calc(var(--barra-baja) + env(safe-area-inset-bottom) + var(--e-6));
}

/* La cabecera: saludo y quien eres, como en Coffee Taste. No un titulo solo. */
/* En tinta. Un color de marca a todo lo ancho se come la pantalla; en tinta
   el teal vuelve a su sitio, que es el de acento, y el conjunto se lee caro. */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--e-3);
  padding: calc(var(--e-4) + env(safe-area-inset-top)) var(--e-4) var(--e-4);
  background: var(--tinta-fondo); color: var(--tinta-letra);
}
.cabecera.pegada { box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.cabecera__avatar { background: rgba(255, 255, 255, .1); color: var(--marca-brillo); }
.cabecera__saludo { color: var(--tinta-letra-2); }
.cabecera__accion { color: var(--tinta-letra-2); box-shadow: none; }
.cabecera__accion:hover { background: rgba(255, 255, 255, .08); color: var(--tinta-letra); }
.cabecera__avatar {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-caja);
  display: grid; place-items: center;
  background: var(--marca-suave); color: var(--marca-oscura);
  font-size: var(--t-menor); font-weight: var(--peso-cifra); letter-spacing: .02em;
}
.cabecera__texto { flex: 1; min-width: 0; }
.cabecera__saludo { font-size: var(--t-menor); color: var(--tinta-3); }
.cabecera__nombre { font-size: var(--t-titulo); font-weight: var(--peso-cifra); letter-spacing: -.02em; }
.cabecera__accion {
  width: 38px; height: 38px; flex: none; border: 0; padding: 0;
  border-radius: var(--r-caja); background: transparent;
  display: grid; place-items: center; color: var(--tinta-2);
  box-shadow: var(--sombra-baja); cursor: pointer;
}
.cabecera__accion:active { transform: scale(.94); }

.cuerpo { padding: 0 var(--e-4); }

/* Un bloque de contenido con su titulillo y su enlace a la derecha. */
.bloque { margin-top: var(--e-5); }
.bloque__cabeza {
  display: flex; align-items: baseline; gap: var(--e-3);
  margin-bottom: var(--e-3); padding: 0 var(--e-1);
}
.bloque__titulo {
  flex: 1; min-width: 0;
  font-size: var(--t-nota); font-weight: var(--peso-fuerte);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3);
}
.bloque__mas {
  font-size: var(--t-menor); font-weight: var(--peso-fuerte); color: var(--marca-oscura);
  padding: var(--e-2); margin: calc(var(--e-2) * -1);
}

/* ──────────────────────────────────────────── chips de estado */

/* Fila que se desliza, como los filtros de Coffee Taste y Qent. Con tres o
   con seis funciona igual: no hay rejilla que cuadrar. */
.chips {
  display: flex; gap: var(--e-2);
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--e-4) * -1); padding: var(--e-1) var(--e-4) var(--e-2);
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 40px; padding: 0 var(--e-4);
  border: 0; border-radius: var(--r-caja); cursor: pointer;
  background: var(--papel); color: var(--tinta-2);
  font-size: var(--t-menor); font-weight: var(--peso-fuerte);
  box-shadow: var(--sombra-baja);
  transition: transform .12s, box-shadow .12s;
}
.chip:active { transform: scale(.96); }
.chip__punto { width: 9px; height: 9px; border-radius: var(--r-pildora); background: var(--nada-vivo); }
.chip__n { font-family: var(--letra-cifra); font-weight: var(--peso-cifra); color: var(--tinta); }

.chip--ya     { background: var(--ya-papel); }
.chip--ya     .chip__punto { background: var(--ya-vivo); }     .chip--ya .chip__n { color: var(--ya); }
.chip--pronto { background: var(--pronto-papel); }
.chip--pronto .chip__punto { background: var(--pronto-vivo); } .chip--pronto .chip__n { color: var(--pronto); }
.chip--bien   { background: var(--bien-papel); }
.chip--bien   .chip__punto { background: var(--bien-vivo); }   .chip--bien .chip__n { color: var(--bien); }

.chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.chip[aria-pressed="true"] .chip__n { color: var(--papel); }

/* ──────────────────────────────────────────── la furgoneta */

/* La pieza central. Foto arriba a todo el ancho, como la card de coche de
   Qent o el plato de las referencias de comida. */
.furgo {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-tarjeta); background: var(--papel);
  box-shadow: var(--sombra);
  transition: transform .14s, box-shadow .14s;
}
.furgo:active { transform: scale(.985); }
.furgo + .furgo { margin-top: var(--e-3); }

.furgo__foto {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  /* Un tinte del estado detras de la foto. Las furgonetas son blancas y
     grises: sobre un gris plano no se despegaban del fondo. */
  background: var(--nada-papel);
}
.furgo--ya     .furgo__foto { background: var(--ya-papel); }
.furgo--pronto .furgo__foto { background: var(--pronto-papel); }
.furgo--bien   .furgo__foto { background: var(--bien-papel); }
.furgo__foto img { width: 100%; height: 100%; object-fit: cover; }
.furgo__foto svg { width: 56%; height: 56%; color: var(--linea); }

/* Insignia sobre la foto, arriba a la izquierda, como «Best Seller». */
.furgo__sello {
  position: absolute; top: var(--e-3); left: var(--e-3);
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 3px var(--e-2); border-radius: var(--r-nota);
  font-size: var(--t-nota); font-weight: var(--peso-cifra);
  background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra-baja);
}
.furgo__sello--ya     { background: var(--ya); color: var(--papel); }
.furgo__sello--nada   { background: var(--nada); color: var(--papel); }
.furgo__sello--pronto { background: var(--pronto); color: var(--papel); }
.furgo__sello--bien   { background: var(--bien); color: var(--papel); }

.furgo__km {
  position: absolute; right: var(--e-3); bottom: var(--e-3);
  padding: 3px var(--e-2); border-radius: var(--r-nota);
  font-family: var(--letra-cifra); font-size: var(--t-nota); font-weight: var(--peso-fuerte);
  background: rgba(15, 20, 25, .72); color: var(--papel);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.furgo__cuerpo { padding: var(--e-4); }
.furgo__nombre { font-size: var(--t-titulo); font-weight: var(--peso-cifra); letter-spacing: -.02em; }
.furgo__datos {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  margin-top: var(--e-1); font-size: var(--t-menor); color: var(--tinta-3);
}

/* Lo que le toca: una linea por tarea, con su punto de estado. */
.furgo__tareas { margin-top: var(--e-3); display: grid; gap: var(--e-2); }
.tarea { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-base); }
.tarea__punto { width: 9px; height: 9px; flex: none; border-radius: var(--r-pildora); background: var(--nada-vivo); }
.tarea--ya     .tarea__punto { background: var(--ya-vivo); }
.tarea--pronto .tarea__punto { background: var(--pronto-vivo); }
.tarea__que { font-weight: var(--peso-fuerte); }
.tarea__cuando { margin-left: auto; font-size: var(--t-menor); color: var(--tinta-3); white-space: nowrap; }

/* ──────────────────────────────────────────── chapa y etiqueta */

.chapa {
  display: inline-block; white-space: nowrap;
  font-family: var(--letra-cifra); font-size: var(--t-nota); font-weight: var(--peso-fuerte);
  letter-spacing: .04em; color: var(--tinta-2);
  background: var(--nada-papel); border-radius: var(--r-nota); padding: 2px var(--e-2);
}

.etiqueta {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-nota); font-weight: var(--peso-fuerte);
  padding: 3px var(--e-2); border-radius: var(--r-nota);
  background: var(--nada-papel); color: var(--tinta-2);
}
.etiqueta--ya     { background: var(--ya-papel); color: var(--ya); }
.etiqueta--pronto { background: var(--pronto-papel); color: var(--pronto); }

/* ──────────────────────────────────────────── botones */

/* Todo lo que se pulsa es una pildora, como en las cuatro referencias. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 46px; padding: 0 var(--e-5);
  border: 0; border-radius: var(--r-caja); cursor: pointer;
  font-size: var(--t-base); font-weight: var(--peso-fuerte);
  background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra-baja);
  transition: transform .12s, filter .12s;
}
.boton:active { transform: scale(.97); }
.boton--ancho { width: 100%; }
.boton--marca { background: var(--marca); color: var(--papel); box-shadow: var(--sombra); }
.boton--tinta { background: var(--tinta); color: var(--papel); box-shadow: var(--sombra); }
.boton--ya    { background: var(--ya); color: var(--papel); box-shadow: var(--sombra); }
.boton--plano { background: none; box-shadow: none; color: var(--marca-oscura); }
/* La flecha en su circulo dentro del boton, como en Coffee Taste. */
.boton__flecha {
  width: 28px; height: 28px; margin-right: calc(var(--e-3) * -1); flex: none;
  border-radius: var(--r-pildora); display: grid; place-items: center;
  background: rgba(255, 255, 255, .18);
}

/* ──────────────────────────────────────────── cifras del mes */

/* Rejilla de dos, con el icono en su caja de color, como el panel de
   RealEstateIndia. La cifra manda sobre su etiqueta, nunca al reves. */
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.cifra {
  padding: var(--e-4); border-radius: var(--r-tarjeta);
  background: var(--papel); box-shadow: var(--sombra-baja);
}
.cifra__icono {
  width: 40px; height: 40px; border-radius: var(--r-caja);
  display: grid; place-items: center; margin-bottom: var(--e-3);
  background: var(--marca-suave); color: var(--marca-oscura);
}
.cifra__icono svg { width: 20px; height: 20px; }
.cifra__icono--pronto { background: var(--pronto-papel); color: var(--pronto); }
.cifra__icono--bien   { background: var(--bien-papel); color: var(--bien); }
.cifra__n {
  font-family: var(--letra-cifra); font-size: var(--t-cifra); font-weight: var(--peso-cifra);
  letter-spacing: -.03em; line-height: 1.1;
}
.cifra__que { margin-top: var(--e-1); font-size: var(--t-menor); color: var(--tinta-3); }

/* ──────────────────────────────────────────── aviso y vacio */

.aviso {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4); border-radius: var(--r-tarjeta);
  background: var(--marca-suave); color: var(--tinta);
}
.aviso__texto { flex: 1; min-width: 0; }
.aviso__titulo { font-weight: var(--peso-fuerte); }
.aviso__sub { margin-top: var(--e-1); font-size: var(--t-menor); color: var(--tinta-2); }

.nada-aqui {
  padding: var(--e-7) var(--e-4); text-align: center;
  color: var(--tinta-3); font-size: var(--t-menor);
}
.nada-aqui__titulo { font-size: var(--t-titulo); font-weight: var(--peso-cifra); color: var(--tinta); margin-bottom: var(--e-2); }

/* ──────────────────────────────────────────── barra de abajo */

/* El activo va en su circulo, como en Qent. */
.pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: var(--e-2) var(--e-2) calc(var(--e-2) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
  /* Filete de medio pixel: en pantalla de movil se ve como una raya de pelo,
     que es lo que separa una barra del sistema de una franja dibujada. */
  border-top: .5px solid rgba(15, 20, 25, .14);
}
.pie__sitio {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-1);
  min-height: 52px; justify-content: center;
  font-size: 10px; font-weight: var(--peso-fuerte); color: var(--tinta-3);
  position: relative;
}
.pie__icono {
  width: 42px; height: 28px; border-radius: var(--r-chip);
  display: grid; place-items: center; transition: background .14s, color .14s;
}
.pie__icono svg { width: 21px; height: 21px; }
.pie__sitio[aria-current="page"] { color: var(--marca-oscura); }
.pie__sitio[aria-current="page"] .pie__icono { background: var(--marca-suave); color: var(--marca-oscura); }
.pie__cuenta {
  position: absolute; top: -2px; left: 50%; margin-left: 4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pildora);
  background: var(--ya); color: var(--papel);
  font-size: 10px; font-weight: var(--peso-cifra); line-height: 18px; text-align: center;
}

/* ──────────────────────────────────────────── el que flota */

.flotante {
  position: fixed; right: var(--e-4);
  bottom: calc(var(--barra-baja) + env(safe-area-inset-bottom) + var(--e-3));
  z-index: 39;
}

/* ──────────────────────────────────────────── esqueleto de carga */

.hueco {
  border-radius: var(--r-tarjeta); background: var(--papel);
  box-shadow: var(--sombra-baja); overflow: hidden;
}
.hueco::after {
  content: ''; display: block; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(15, 20, 25, .04), transparent);
  animation: pasa 1.4s infinite;
}
@keyframes pasa { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ──────────────────────────────────────────── ordenador */

@media (min-width: 900px) {
  /* El contenido no se estira a todo el monitor: una lista de 1400px de ancho
     se lee buscando, no leyendo. */
  .cuerpo, .cabecera { max-width: 760px; margin-inline: auto; }
  .furgos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
  .furgo + .furgo { margin-top: 0; }
  .cifras { grid-template-columns: repeat(4, 1fr); }
}

/* ──────────────────────────────────────────── lista corta */

/* Una cosa por linea, con su punto de estado. Lo de cuando se va a la
   derecha, pero la linea no se estira: a partir de cierto ancho el nombre
   queda a un lado y el dato al otro con un rio de nada en medio. */
.lista {
  border-radius: var(--r-tarjeta); background: var(--papel);
  box-shadow: var(--sombra-baja); overflow: hidden;
}
/* Las separaciones de dentro, a media altura y sin llegar al canto: es el
   detalle que distingue una lista del sistema de una tabla con bordes. */
.fila + .fila { border-top-color: rgba(15, 20, 25, .07); }
.fila {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); min-height: 56px;
}
.fila + .fila { border-top: 1px solid var(--linea); }
.fila:active { background: var(--papel-2); }
.fila__punto { width: 9px; height: 9px; flex: none; border-radius: var(--r-pildora); background: var(--nada-vivo); }
.fila--ya     .fila__punto { background: var(--ya-vivo); }
.fila--pronto .fila__punto { background: var(--pronto-vivo); }
.fila--bien   .fila__punto { background: var(--bien-vivo); }
.fila__texto { flex: 1; min-width: 0; }
.fila__texto b { display: block; font-weight: var(--peso-fuerte); }
.fila__texto span { display: block; font-size: var(--t-menor); color: var(--tinta-3); }
.fila__cuando { font-size: var(--t-menor); color: var(--tinta-3); white-space: nowrap; }

/* ──────────────────────────────────────────── avance y datos */

/* La barra de avance de una tarea: cuanto le queda de su intervalo. */
.fila__avance {
  display: block; height: 4px; margin-top: var(--e-2);
  border-radius: var(--r-pildora); background: var(--nada-papel); overflow: hidden;
}
.fila__avance i { display: block; height: 100%; border-radius: var(--r-pildora); background: var(--nada-vivo); }
.fila--ya     .fila__avance i { background: var(--ya-vivo); }
.fila--pronto .fila__avance i { background: var(--pronto-vivo); }
.fila--bien   .fila__avance i { background: var(--bien-vivo); }

/* Datos de una ficha: dos columnas, el que arriba y el valor debajo. */
.datos {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4);
  padding: var(--e-4); border-radius: var(--r-tarjeta);
  background: var(--papel); box-shadow: var(--sombra-baja);
}
.dato__que { font-size: var(--t-nota); color: var(--tinta-3); }
.dato__valor { margin-top: 2px; font-weight: var(--peso-fuerte); }

/* La foto de la ficha, a sangre y mas alta que en la tarjeta. */
.ficha-foto {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-tarjeta);
  overflow: hidden; background: var(--nada-papel); display: grid; place-items: center;
}
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-foto svg { width: 46%; height: 46%; color: var(--linea); }
.ficha-foto--ya     { background: var(--ya-papel); }
.ficha-foto--pronto { background: var(--pronto-papel); }
.ficha-foto--bien   { background: var(--bien-papel); }

@media (min-width: 900px) { .datos { grid-template-columns: repeat(4, 1fr); } }

/* ──────────────────────────────────────────── boton redondo */

/* La accion principal de una pantalla, flotando abajo a la derecha, y el ✓ de
   cada tarea. Redondo porque no lleva texto: el icono ya lo dice. */
.redondo {
  width: 50px; height: 50px; flex: none; padding: 0; border: 0;
  border-radius: var(--r-caja); cursor: pointer;
  display: grid; place-items: center;
  background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra);
  transition: transform .12s, filter .12s;
}
.redondo svg { width: 22px; height: 22px; }
.redondo:active { transform: scale(.92); }
.redondo:disabled { opacity: .5; cursor: default; }
.redondo--marca { background: var(--marca); color: var(--papel); }
.redondo--bien  { background: var(--bien); color: var(--papel); }
/* El de la fila es mas pequeno: convive con el texto, no lo tapa. */
.redondo--fila {
  width: 38px; height: 38px; border-radius: var(--r-chip);
  background: var(--bien-papel); color: var(--bien); box-shadow: none;
}
.redondo--fila svg { width: 18px; height: 18px; }

/* ──────────────────────────────────────────── foto en la fila */

/* La miniatura de un desperfecto. Cuadrada y redondeada, a la izquierda del
   texto: se reconoce el golpe antes de leer el titulo. */
.miniatura {
  width: 44px; height: 44px; flex: none; overflow: hidden;
  border-radius: var(--r-caja); background: var(--nada-papel);
  display: grid; place-items: center; color: var(--tinta-3);
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura svg { width: 20px; height: 20px; }

/* La fila puede llevar su propio boton a la derecha, y entonces la fila entera
   deja de ser un enlace: se pulsa el texto o se pulsa el boton, no las dos. */
.fila__accion { flex: none; margin: calc(var(--e-1) * -1) 0; }
.fila__parte { display: flex; align-items: center; gap: var(--e-3); flex: 1; min-width: 0; }

/* ──────────────────────────────────────────── aviso flotante */

/* Lo que se acaba de hacer, con su salida. Vive por encima de la barra de
   abajo: si queda debajo, «Deshacer» no se puede pulsar. */
.nota {
  position: fixed; left: var(--e-4); right: var(--e-4);
  bottom: calc(var(--barra-baja) + env(safe-area-inset-bottom) + var(--e-3));
  z-index: 60; display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  border-radius: var(--r-caja);
  background: var(--tinta); color: var(--papel);
  box-shadow: var(--sombra-alta);
  animation: sube .18s ease-out;
}
.nota__texto { flex: 1; min-width: 0; font-size: var(--t-menor); font-weight: var(--peso-fuerte); }
.nota__botones { display: flex; gap: var(--e-1); flex: none; }

/* Con dos salidas no caben al lado del texto en un movil estrecho: el texto se
   partia en tres lineas. Asi que el texto arriba y las salidas debajo. */
.nota:has(.nota__boton + .nota__boton) {
  flex-direction: column; align-items: stretch; gap: var(--e-2);
  border-radius: var(--r-tarjeta); padding: var(--e-4);
}
.nota:has(.nota__boton + .nota__boton) .nota__botones { justify-content: flex-end; gap: var(--e-2); }
.nota__boton {
  border: 0; cursor: pointer; white-space: nowrap;
  min-height: 34px; padding: 0 var(--e-3); border-radius: var(--r-chip);
  background: rgba(255, 255, 255, .16); color: var(--papel);
  font-size: var(--t-menor); font-weight: var(--peso-fuerte);
}
.nota__boton:active { transform: scale(.95); }
.nota--mal { background: var(--ya); }
@keyframes sube { from { transform: translateY(12px); opacity: 0; } }

@media (min-width: 900px) { .nota { left: auto; right: var(--e-5); max-width: 420px; } }

/* ──────────────────────────────────────────── la hoja */

/* Un formulario sube desde abajo, como en las referencias. Es un <dialog>, que
   vive en la capa de arriba del navegador: por eso el error va DENTRO, junto a
   los botones. Pintado fuera queda por debajo y parece que Guardar no hace nada. */
.hoja {
  width: 100%; max-width: 560px; margin: auto auto 0; padding: 0; border: 0;
  background: none; max-height: 92dvh; overflow: visible;
}
.hoja::backdrop { background: rgba(15, 20, 25, .45); backdrop-filter: blur(2px); }
.hoja__caja {
  display: flex; flex-direction: column; max-height: 92dvh;
  border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0;
  background: var(--papel); overflow: hidden;
  animation: sube .2s ease-out;
}
.hoja__asa {
  width: 40px; height: 4px; flex: none; margin: var(--e-2) auto 0;
  border-radius: var(--r-pildora); background: var(--linea);
}
.hoja__cabeza { padding: var(--e-4) var(--e-4) var(--e-2); }
.hoja__sub { margin-top: var(--e-1); font-size: var(--t-menor); color: var(--tinta-3); }
/* El cuerpo es lo unico que rueda: el pie con Guardar no se va nunca de la
   vista, que era el fallo de las ventanas largas en el movil. */
.hoja__cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--e-2) var(--e-4) var(--e-4);
  display: grid; gap: var(--e-3);
}
.hoja__pie {
  flex: none; display: flex; gap: var(--e-2);
  padding: var(--e-3) var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea); background: var(--papel);
}
.hoja__pie .boton { flex: 1; }
.hoja__mal {
  margin: 0 var(--e-4) var(--e-3); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-caja);
  background: var(--ya-papel); color: var(--ya);
  font-size: var(--t-menor); font-weight: var(--peso-fuerte);
}

@media (min-width: 900px) {
  .hoja { margin: auto; }
  .hoja__caja { border-radius: var(--r-tarjeta); }
}

/* ──────────────────────────────────────────── campos */

.campo { display: grid; gap: var(--e-1); }
.campo__que { font-size: var(--t-menor); font-weight: var(--peso-fuerte); color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linea); border-radius: var(--r-caja);
  background: var(--papel-2); color: var(--tinta);
  font-family: var(--letra); font-size: var(--t-base);
}
/* 16px es lo que exige el iPhone para no hacer zoom al tocar un campo; por
   debajo de eso la pantalla salta de sitio y hay que volver a colocarla. */
@supports (-webkit-touch-callout: none) { .campo input, .campo select, .campo textarea { font-size: 16px; } }
.campo textarea { min-height: 76px; resize: vertical; line-height: var(--alto-linea); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--marca); outline-offset: -1px; background: var(--papel);
}
.campo--mal input, .campo--mal select, .campo--mal textarea { border-color: var(--ya); }
.campo__nota { font-size: var(--t-nota); color: var(--tinta-3); }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }

/* Elegir entre pocas cosas: pildoras, no un desplegable. Se ve lo que hay. */
.opciones { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones label {
  min-height: 42px; display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 0 var(--e-4); border-radius: var(--r-caja); cursor: pointer;
  background: var(--papel-2); color: var(--tinta-2);
  font-size: var(--t-menor); font-weight: var(--peso-fuerte);
}
/* Elegida va en tinta, igual que un chip de filtro. El color del estado lo
   lleva el punto, que es su sitio: un tono llano como fondo con letra blanca
   encima se lee marron — es para escribir, no para rellenar. */
.opciones input:checked + label { background: var(--tinta); color: var(--papel); }
.opciones input:focus-visible + label { outline: 2px solid var(--marca); outline-offset: 2px; }
.opciones__punto { width: 9px; height: 9px; border-radius: var(--r-pildora); background: var(--nada-vivo); }
.es--ya     .opciones__punto { background: var(--ya-vivo); }
.es--pronto .opciones__punto { background: var(--pronto-vivo); }

/* ──────────────────────────────────────────── fotos de una averia */

/* Las fotos del desperfecto, en fila y deslizables. La foto es la prueba de lo
   que pasó: se ve primero y se lee después. */
.galeria-averia {
  display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--e-4) * -1); padding: 0 var(--e-4);
}
.galeria-averia::-webkit-scrollbar { display: none; }
.galeria-averia img {
  width: 148px; height: 112px; flex: none; object-fit: cover;
  border-radius: var(--r-caja); background: var(--nada-papel);
}

/* ──────────────────────────────────────────── la entrada */

/* Lo primero que ve nadie. Centrada y sin nada alrededor: aquí no hay flota
   que enseñar todavía, así que no se pinta ni cabecera ni barra de abajo. */
.acceso {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--e-5) var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom));
}
.acceso__caja {
  width: 100%; max-width: 380px;
  padding: var(--e-5); border-radius: var(--r-tarjeta);
  background: var(--papel); box-shadow: var(--sombra);
}
.acceso__marca {
  display: flex; align-items: center; gap: var(--e-3);
  margin-bottom: var(--e-5);
}
.acceso__marca img { width: 48px; height: 48px; flex: none; }
.acceso__nombre { font-size: var(--t-titulo); font-weight: var(--peso-cifra); letter-spacing: -.02em; }
.acceso__empresa { font-size: var(--t-menor); color: var(--tinta-3); }
.acceso__sub { margin-top: var(--e-2); font-size: var(--t-menor); color: var(--tinta-3); }
.acceso__form { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
/* El error, pegado al botón y dentro: es donde se mira al pulsar y no pasar nada. */
.acceso__mal {
  padding: var(--e-3) var(--e-4); border-radius: var(--r-caja);
  background: var(--ya-papel); color: var(--ya);
  font-size: var(--t-menor); font-weight: var(--peso-fuerte);
}
.acceso__nota {
  margin-top: var(--e-4); font-size: var(--t-nota); color: var(--tinta-3);
  text-align: center; line-height: var(--alto-linea);
}

/* ══════════════════════════════════════════ INICIO ══════════════════════════ */

/* El saludo: la fecha encima, pequeña, y el nombre grande. Lo primero que se
   lee no es «Panel de flota», es a quien le hablamos y que le espera hoy. */
.saludo { padding: var(--e-5) 0 var(--e-4); }
.saludo__fecha {
  font-size: var(--t-nota); font-weight: var(--peso-fuerte);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3);
}
.saludo__hola {
  margin-top: var(--e-2); font-size: var(--t-hola); font-weight: var(--peso-cifra);
  letter-spacing: -.035em; line-height: 1.05;
}
.saludo__resumen { margin-top: var(--e-2); color: var(--tinta-2); }

/* Los contadores de estado. El sombreado va del color de su estado al papel:
   el color entra por arriba y se deshace, asi la cifra se lee sobre blanco.
   Sin iconos: el punto y la etiqueta ya dicen de que va, y un dibujo al lado
   de un numero le quita sitio al numero, que es lo que se mira. */
.marcadores {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3);
}
.marcador {
  padding: var(--e-4); border-radius: var(--r-tarjeta);
  background: linear-gradient(150deg, var(--nada-papel) 0%, var(--papel) 72%);
  box-shadow: var(--sombra-baja);
  transition: transform .12s, box-shadow .12s;
}
a.marcador:active { transform: scale(.98); }
.marcador__que {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-menor); font-weight: var(--peso-fuerte); color: var(--tinta-2);
}
.marcador__punto { width: 9px; height: 9px; flex: none; border-radius: var(--r-pildora); background: var(--nada-vivo); }
.marcador__n {
  margin-top: var(--e-2);
  font-size: var(--t-marcador); font-weight: var(--peso-cifra);
  letter-spacing: -.04em; line-height: 1; color: var(--tinta);
}
.marcador--ya     { background: linear-gradient(150deg, var(--ya-papel) 0%, var(--papel) 72%); }
.marcador--ya     .marcador__punto { background: var(--ya-vivo); }
.marcador--ya     .marcador__n { color: var(--ya); }
.marcador--pronto { background: linear-gradient(150deg, var(--pronto-papel) 0%, var(--papel) 72%); }
.marcador--pronto .marcador__punto { background: var(--pronto-vivo); }
.marcador--pronto .marcador__n { color: var(--pronto); }
.marcador--bien   { background: linear-gradient(150deg, var(--bien-papel) 0%, var(--papel) 72%); }
.marcador--bien   .marcador__punto { background: var(--bien-vivo); }
.marcador--bien   .marcador__n { color: var(--bien); }

/* La quinta, la de la flota, es de otra clase: no cuenta un estado, lleva a
   otro sitio. Papel liso y sin cifra grande, para que no compita. */
.marcador--flota {
  background: var(--papel); display: flex; flex-direction: column; justify-content: space-between;
}
.marcador--flota .marcador__que { color: var(--tinta-3); font-weight: var(--peso-normal); }
.marcador__ir {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin-top: var(--e-2); font-weight: var(--peso-fuerte); color: var(--marca-oscura);
}
.marcador__ir svg { width: 16px; height: 16px; }

/* ─────────────────────────── lo primero que hay que hacer */

.primero {
  border-radius: var(--r-tarjeta); background: var(--papel);
  box-shadow: var(--sombra); overflow: hidden;
}
.primero__arriba { display: grid; gap: var(--e-4); padding: var(--e-4); }
.primero__foto {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-caja);
  overflow: hidden; background: var(--nada-papel); display: grid; place-items: center;
}
.primero__foto img { width: 100%; height: 100%; object-fit: cover; }
.primero__foto svg { width: 42%; height: 42%; color: var(--linea); }
.primero__foto--ya     { background: var(--ya-papel); }
.primero__foto--pronto { background: var(--pronto-papel); }
.primero__tarde {
  position: absolute; top: var(--e-3); left: var(--e-3);
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-3); border-radius: var(--r-pildora);
  font-size: var(--t-nota); font-weight: var(--peso-fuerte);
  background: var(--tinta); color: var(--papel);
}
.primero__tarde i { width: 8px; height: 8px; border-radius: var(--r-pildora); background: var(--ya-vivo); }
.primero__orden {
  font-size: var(--t-nota); font-weight: var(--peso-cifra);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ya);
}
.primero__que { margin-top: var(--e-1); font-size: var(--t-alto); font-weight: var(--peso-cifra); letter-spacing: -.03em; }
.primero__quien {
  margin-top: var(--e-2); display: flex; align-items: center; gap: var(--e-2);
  flex-wrap: wrap; font-weight: var(--peso-fuerte);
}
.primero__quien span:last-child { font-weight: var(--peso-normal); color: var(--tinta-3); }
.primero__botones { display: flex; gap: var(--e-2); margin-top: var(--e-4); }

/* ─────────────────────────── el dinero del mes */

.mes { padding: var(--e-4); border-radius: var(--r-tarjeta); background: var(--papel); box-shadow: var(--sombra-baja); }
.mes__que { font-size: var(--t-menor); color: var(--tinta-3); }
.mes__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.mes__total { font-size: var(--t-mes); font-weight: var(--peso-cifra); letter-spacing: -.04em; line-height: 1.05; }
.mes__contra { text-align: right; font-size: var(--t-menor); }
.mes__contra b { display: block; font-weight: var(--peso-fuerte); }
.mes__contra--menos b { color: var(--bien); }
.mes__contra--mas b { color: var(--ya); }
.mes__contra span { color: var(--tinta-3); }

.compara { margin-top: var(--e-4); display: grid; gap: var(--e-2); }
.compara__fila { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--e-3); font-size: var(--t-menor); }
.compara__pista { height: 8px; border-radius: var(--r-pildora); background: var(--nada-papel); overflow: hidden; }
.compara__pista i { display: block; height: 100%; border-radius: var(--r-pildora); background: var(--tinta); }
.compara__fila--antes .compara__pista i { background: var(--linea); }
.compara__fila b { font-weight: var(--peso-fuerte); }
.compara__fila--antes b { color: var(--tinta-3); font-weight: var(--peso-normal); }

.mes__pie {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3);
  margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea);
}
.mes__pie div span { display: block; font-size: var(--t-menor); color: var(--tinta-3); }
.mes__pie div b { display: block; margin-top: 2px; font-size: var(--t-titulo); font-weight: var(--peso-cifra); letter-spacing: -.02em; }

/* ─────────────────────────── el que lleva a otro sitio */

.atajo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4); border-radius: var(--r-tarjeta);
  background: var(--papel); box-shadow: var(--sombra-baja);
}
.atajo__icono {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-caja);
  display: grid; place-items: center; background: var(--nada-papel); color: var(--tinta-2);
}
.atajo__icono svg { width: 20px; height: 20px; }
.atajo__texto { flex: 1; min-width: 0; }
.atajo__texto b { display: block; font-weight: var(--peso-fuerte); }
.atajo__texto span { display: block; font-size: var(--t-menor); color: var(--tinta-3); }
.atajo__ir { color: var(--tinta-3); }
.atajo__ir svg { width: 18px; height: 18px; }

/* Una linea suelta, sin caja: para lo que se puede hacer pero no urge. */
.suelto {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-1); font-size: var(--t-menor); color: var(--tinta-3);
}
.suelto__punto { width: 7px; height: 7px; border-radius: var(--r-pildora); border: 1.5px solid var(--nada-vivo); }
.suelto a { margin-left: auto; font-weight: var(--peso-fuerte); color: var(--marca-oscura); }

/* ─────────────────────────── el ordenador */

@media (min-width: 900px) {
  /* Dos columnas: lo que hay que hacer a la izquierda, el dinero a la derecha.
     La izquierda manda, asi que se lleva el ancho. */
  .inicio { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--e-5); align-items: start; }
  /* Cinco en una fila: los cuatro estados y la flota. Con cuatro columnas la
     de la flota se quedaba sola en una segunda fila, medio vacia. */
  .marcadores { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .primero__arriba { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .primero__foto { aspect-ratio: 4 / 3; }
}

@media (max-width: 899px) {
  /* En el movil los cuatro contadores van en una fila, como en la maqueta.
     La quinta tarjeta, la de la flota, no cabe sin dejar un hueco cojo: ahi
     no hace falta, porque a las furgonetas se llega por la barra de abajo. */
  .marcadores { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
  .marcador { padding: var(--e-3); }
  .marcador--flota { display: none; }
  .marcador__que { font-size: var(--t-nota); gap: var(--e-1); line-height: 1.25; }
  .marcador__punto { width: 7px; height: 7px; }
  .marcador__n { font-size: var(--t-cifra); }

  /* El saludo ya esta en el cuerpo, grande. Repetirlo en la barra de arriba
     es decir dos veces lo mismo y quitarle sitio a lo que importa. */
  .inicio-limpio .cabecera__texto { display: none; }
  .inicio-limpio .cabecera { gap: var(--e-2); }
  .inicio-limpio .cabecera__marca {
    flex: 1; display: flex; align-items: center; gap: var(--e-2);
    font-weight: var(--peso-cifra); letter-spacing: -.02em;
  }
  .inicio-limpio .cabecera__marca svg { width: 26px; height: 26px; color: var(--marca); }
}

/* ──────────────────────────────────────────── la barra de arriba (ordenador) */

.arriba { display: none; }

@media (min-width: 900px) {
  /* En el ordenador los sitios van arriba: hay sitio de sobra y una barra
     flotando abajo en una pantalla grande se ve como una app estirada. */
  .arriba {
    display: flex; align-items: center; gap: var(--e-5);
    position: sticky; top: 0; z-index: 40;
    padding: var(--e-3) var(--e-5);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid var(--linea);
  }
  .arriba__marca { display: flex; align-items: center; gap: var(--e-2); font-weight: var(--peso-cifra); letter-spacing: -.02em; }
  .arriba__marca svg { width: 26px; height: 26px; color: var(--marca); }
  .arriba__sitios { display: flex; align-items: center; gap: var(--e-5); flex: 1; }
  .arriba__sitio {
    display: inline-flex; align-items: center; gap: var(--e-2);
    padding: var(--e-3) 0; font-weight: var(--peso-fuerte); color: var(--tinta-3);
    border-bottom: 2px solid transparent; margin-bottom: -2px;
  }
  .arriba__sitio[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--marca); }
  .arriba__cuenta {
    min-width: 20px; padding: 0 var(--e-2); border-radius: var(--r-pildora);
    background: var(--ya); color: var(--papel);
    font-size: var(--t-nota); font-weight: var(--peso-cifra); text-align: center;
  }
  .arriba__accion { min-height: 40px; padding: 0 var(--e-4); font-size: var(--t-menor); }
  .arriba__accion svg { width: 16px; height: 16px; }
  .arriba__yo { display: flex; align-items: center; gap: var(--e-2); font-weight: var(--peso-fuerte); }
  .arriba__avatar {
    width: 32px; height: 32px; border-radius: var(--r-pildora);
    display: grid; place-items: center; background: var(--tinta); color: var(--papel);
    font-size: var(--t-nota); font-weight: var(--peso-cifra);
  }

  /* Con los sitios arriba, la barra de abajo y el saludo repetido sobran. */
  .pie { display: none; }
  .cabecera { display: none; }
  .pantalla { padding-bottom: var(--e-7); }
  /* El contenido usa el ancho del monitor, pero no todo: una linea de 1400px
     se lee buscando. 1240 deja las dos columnas holgadas y el ojo tranquilo. */
  .cuerpo { max-width: 1240px; }
}