/* ═══════════════════════════════════════════════════════════════════════
   HEALTHY FLEETS · el sistema

   Sacado de las referencias: Qent (alquiler de coches), Coffee Taste,
   RealEstateIndia. Lo que comparten las tres y hay que respetar aqui:

   · La foto del producto abre la pantalla. Aqui el producto es la furgoneta.
   · Los textos son pequenos y contenidos. Qent documenta H1 20 y body 14/12.
     El peso visual lo llevan las fotos, no las cifras gigantes.
   · Lo que se pulsa es una pildora. Siempre.
   · El color aparece cuando significa algo; el resto es papel y aire.
   · Las secciones se separan con espacio, no con lineas.

   Todo valor vive aqui. Fuera de este fichero no se escribe un px de tamano
   de letra ni un radio a mano: se usa su token.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── letra ── tres pesos. Mas de tres y nada destaca. */
  --peso-normal: 400;
  --peso-fuerte: 600;
  --peso-cifra:  700;

  /* Escala de Qent, con un escalon mas arriba para la cifra del dia. */
  --t-nota:   12px;   /* al pie de algo, nunca solo */
  --t-menor:  13px;   /* dato de apoyo */
  --t-base:   15px;   /* cuerpo */
  --t-titulo: 17px;   /* nombre de una cosa */
  --t-alto:   20px;   /* titulo de pantalla */
  --t-cifra:  26px;   /* el numero que se mira */
  --t-marcador: 30px; /* los contadores de estado del inicio */
  --t-mes:    34px;   /* el gasto del mes */
  --t-hola:   34px;   /* el saludo, lo unico grande de la pantalla */

  --alto-linea: 1.47;
  --letra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --letra-cifra: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* ── espacio ── rejilla de 4. Nada entre medias. */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px;

  /* ── forma ──
     Cuadrado antes que redondo. La esquina muy redonda y la pildora de lado a
     lado es lenguaje de Android: hace la pantalla amable y blanda. Aqui la
     esquina se nota poco y es la misma en todo, que es lo que hace que las
     piezas parezcan cortadas de la misma plancha.

     La pildora se reserva para lo que de verdad es una pastilla pequena —el
     punto de estado, la cuenta de un aviso—; un boton es un rectangulo de
     esquina suave, no un estadio. */
  --r-nota: 6px;      /* chapa de matricula, tag */
  --r-chip: 8px;      /* chip de filtro */
  --r-caja: 10px;     /* campo, boton */
  --r-tarjeta: 14px;  /* tarjeta */
  --r-pildora: 999px; /* solo lo redondo de verdad: puntos y contadores */

  /* ── papel ── */
  --lienzo: #f2f5f8;
  --papel: #ffffff;
  --papel-2: #eef2f6;
  --linea: #e7eaec;

  /* ── tinta ── */
  --tinta: #0f1419;
  --tinta-2: #4a545f;
  --tinta-3: #6b7683;   /* 4.6:1 sobre blanco, medido */

  /* ── tinta ── el armazon: la cabecera de arriba. No es negro, lleva el azul
     verdoso de la marca dentro para que el teal de al lado sea de la familia. */
  --tinta-fondo: #0c171c;
  --tinta-letra: #eef4f6;
  --tinta-letra-2: #93a9b1;

  /* ── marca ── el verde azulado de brand/ */
  --marca: #0e7c8e;
  --marca-oscura: #0c6f7f;
  --marca-brillo: #3ec8dd;
  --marca-suave: #e6f2f4;

  /* ── estados ── tres tonos por estado, cada uno con su trabajo
     · el llano escribe: tiene que leerse sobre papel, 4.5:1 minimo
     · el vivo rellena: puntos, sellos y barras, donde no hay texto pequeno
     · el papel es el fondo suave de la pildora

     El naranja oscuro que habia (#b54708, al 37% de luz) se leia marron, y
     el crema (#fffaeb) tiraba a beige. Los dos venian de una decision vieja
     de «estados apagados, no de semaforo», que es justo lo que hacia que la
     pantalla no dijera nada. El color vivo ahora vive donde no lleva texto. */
  --ya: #c9312a;        --ya-vivo: #f04438;      --ya-papel: #fff1f0;
  --pronto: #b05708;    --pronto-vivo: #fb9a1a;  --pronto-papel: #fff8ed;
  --bien: #0a7c4f;      --bien-vivo: #17b979;    --bien-papel: #eafaf2;
  --nada: #5f6b7d;      --nada-vivo: #98a2b3;    --nada-papel: #f1f4f8;

  /* ── sombra ──
     Apoyada, no flotando. Una sombra grande y abierta se lee como una tarjeta
     de movil; lo que da sensacion de material caro es una sombra corta muy
     suave mas un filete finisimo que dibuja el canto de la pieza. El filete
     va en la sombra, no en `border`, para que no ocupe sitio en la caja. */
  --canto: 0 0 0 1px rgba(15, 20, 25, .06);
  --sombra-baja: var(--canto), 0 1px 2px rgba(15, 20, 25, .05);
  --sombra: var(--canto), 0 1px 3px rgba(15, 20, 25, .06), 0 6px 16px -10px rgba(15, 20, 25, .18);
  --sombra-alta: var(--canto), 0 12px 32px -12px rgba(15, 20, 25, .24);

  /* ── lo que flota ── */
  --barra-alta: 56px;
  --barra-baja: 68px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--letra);
  font-size: var(--t-base);
  font-weight: var(--peso-normal);
  line-height: var(--alto-linea);
  color: var(--tinta);
  background: var(--lienzo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; font-weight: var(--peso-cifra); letter-spacing: -.022em; }
h1 { font-size: var(--t-alto); letter-spacing: -.028em; }
h2 { font-size: var(--t-titulo); }
h3 { font-size: var(--t-base); font-weight: var(--peso-fuerte); }
p  { margin: 0; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* Nada que se pulse baja de 44px de alto: en el taller se toca con guantes. */
a, button, [role="button"], input, select, textarea { touch-action: manipulation; }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: var(--r-nota); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}