/* ============================================================
   MI VEHÍCULO — estilos v4 · noche minimalista
   Mundo: app premium nocturna y serena — orbes azules difuminados,
   tarjetas de vidrio, píldoras redondeadas, Barlow en caja normal.
   El color legisla estados: teal = en regla · naranja = atención ·
   rojo = urgente. Naranja solo para la acción.
   Paleta fijada: #000 · #14213D · #FCA311 · #1F7A8C · #FFF
   ============================================================ */

@font-face {
  font-family: "Barlow";
  src: url("fuentes/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fuentes/barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
:root {
  /* Lo que pinta el SISTEMA, no la app: el desplegable de un <select>, el
     calendario de un <input type=date>, las flechitas de los números y las
     barras de scroll. Sin esta línea el navegador los dibuja con la paleta
     clara y en un fondo oscuro salen ilegibles: gris sobre gris. */
  color-scheme: light;

  /* GRIS SOBRE HUESO. Los nombres antiguos (--noche, --tinta) se conservan a
     propósito: los usan más de cien reglas y son papeles, no colores —«el
     fondo», «la tinta»—. Cambiarles el valor voltea la app entera de una vez;
     cambiarles el nombre habría sido una tarde de sustituciones para acabar
     en el mismo sitio. */
  --noche: #eef2f7;               /* gris azulado de sala de exposición */
  --noche-alta: #f8fafc;          /* arriba aclara, como luz de techo */
  --tinta: #1f2937;               /* pizarra. 13,1:1 sobre el suelo */
  --tinta-suave: #556275;         /* 5,5:1 */
  --tinta-apagada: #5f6b7f;       /* 4,6:1 — el mínimo, medido */
  /* Los filetes llevan el azul dentro en vez de ser grises neutros: es lo que
     hace que el gris del fondo se lea como frío y no como sucio. */
  --regla: rgba(31, 45, 68, .1);
  --regla-suave: rgba(31, 45, 68, .055);
  --regla-fuerte: rgba(31, 45, 68, .22);

  /* Las superficies SUBEN sobre el hueso en vez de bajar. En oscuro una
     tarjeta era un velo blanco al 3,5 %; en claro eso la hundiría y parecería
     un campo deshabilitado. Aquí la tarjeta es blanca y el filete la define. */
  --superficie: #ffffff;
  --film-1: rgba(31, 45, 68, .03);  /* roce de un hover */
  --film-2: rgba(31, 45, 68, .05);  /* pozo de icono, relleno inerte */
  --film-3: rgba(31, 45, 68, .085); /* hover con intención */
  /* La sombra de susurro: dos capas, una de contacto y una de aire. Es lo que
     levanta una tarjeta blanca sobre un fondo casi blanco sin dibujar nada. */
  --alzado: 0 1px 2px rgba(31, 45, 68, .05), 0 8px 22px rgba(31, 45, 68, .055);
  --alzado-alto: 0 2px 6px rgba(31, 45, 68, .07), 0 18px 40px rgba(31, 45, 68, .09);
  /* Las demás sombras se quedaron en NEGRO puro al suavizarlas, mientras todo
     lo demás pasaba a la familia azul. Un negro al 12 % sobre un suelo azulado
     se ve gris sucio; el mismo alfa en azul-negro se ve como sombra. */
  --alzado-accion: 0 4px 14px rgba(31, 45, 68, .12);
  --alzado-marco: 0 24px 60px rgba(31, 45, 68, .13);
  --alzado-hoja: 0 -16px 50px rgba(31, 45, 68, .13);
  --alzado-pin: 0 3px 8px rgba(31, 45, 68, .26);
  /* Velos: el del modal, el que va sobre una FOTO (lo único que se lee encima
     de cualquier imagen) y el de la cabecera del mapa, que es luz y no sombra. */
  --velo: rgba(20, 33, 61, .46);
  --velo-foto: rgba(31, 45, 68, .72);
  --velo-foto-fuerte: rgba(31, 45, 68, .9);
  --velo-mapa-alto: rgba(248, 250, 252, .97);
  --velo-mapa-bajo: rgba(248, 250, 252, .86);
  --estrella-vacia: rgba(31, 45, 68, .2);

  /* La barra de navegación es el único elemento oscuro de la app, igual que en
     la referencia. Lleva tinta propia porque --tinta ahora es casi negra y
     sobre el nav no se vería: con los tokens sueltos el nav se quedó ciego en
     el primer volteo. */
  --nav-fondo: #ffffff;
  --nav-tinta: #556275;
  --nav-tinta-activa: #1f5b97;

  /* EL AZUL ES LA ACCIÓN. Sale del azul Prusia de la paleta (#14213D) subido
     hasta donde se puede pulsar y leer: blanco encima da 5,4:1. */
  --azul: #2b6cb0;
  --azul-hover: #3a80c9;
  --azul-tinta: #1f5b97;          /* 6,2:1 — el azul cuando habla, no cuando rellena */
  --azul-film: rgba(43, 108, 176, .09);
  --azul-halo: rgba(43, 108, 176, .16);  /* el anillo de "estás aquí" en el mapa */
  --azul-luz: rgba(43, 108, 176, .1);    /* la claraboya del acceso */

  /* El naranja se queda SOLO como estado de atención. Hacía dos trabajos a la
     vez —botón principal y aviso— y así no hacía ninguno: el botón grande
     competía con el aviso que tenía al lado. */
  --naranja: #fca311;
  --naranja-tinta: #8a5200;       /* 5,7:1 sobre el hueso */
  /* El tinte de un estado detrás de su propia tinta. Uno por estado y no seis
     alfas sueltas: la Regla del Tinte Suave dice "su propio tinte al 10-16 %",
     y con un token eso deja de ser una intención y es un hecho. */
  --naranja-film: var(--naranja-film);
  --naranja-regla: var(--naranja-regla);
  --teal: #1f7a8c;
  --teal-film: rgba(31, 122, 140, .1);
  --teal-tinta: #146170;          /* 5,8:1 sobre el hueso */
  --rojo: #ef5f64;
  --rojo-tinta: #b5272d;          /* 5,9:1 sobre el hueso */
  --rojo-film: rgba(239, 95, 100, .15);

  --doc: "Barlow", system-ui, sans-serif;

  /* PAPEL. El expediente se imprime, y una interfaz oscura en papel es
     ilegible y se come el tóner. No es un tercer ambiente de pantalla —la
     regla de los dos ambientes sigue en pie— es otro MEDIO, y por eso tiene
     sus propios tonos declarados en vez de hexadecimales sueltos. */
  --papel: #ffffff;
  --tinta-papel: #111111;
  --tinta-papel-suave: #444444;
  --regla-papel: #cccccc;
  --regla-papel-fuerte: #999999;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--doc);
  font-size: 16px;
  background: var(--noche-alta);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

/* Superficies del navegador: también son diseño */
::selection { background: var(--azul-film); color: var(--tinta); }
input, select, textarea { caret-color: var(--azul); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgba(31, 45, 68, .22) transparent; }
*::-webkit-scrollbar { width: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(31, 45, 68, .22); border-radius: 4px; }

/* El inicio ya no lleva orbe: en oscuro un radial azul era la atmósfera del
   acceso, y sobre hueso la misma mancha se lee como una mancha. El fondo
   limpio es la decisión, no la ausencia de una. */
.pantalla-inicio { background: transparent; }

.marco {
  position: relative;
  max-width: 430px;
  height: 100vh;         /* respaldo para navegadores sin dvh */
  height: 100dvh;        /* móvil primero: el marco ES la pantalla, no crece con el contenido */
  margin: 0 auto;
  background: linear-gradient(178deg, var(--noche-alta) 0%, var(--noche) 34%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 500px) {
  body { padding: 24px 0; }
  .marco {
    height: min(900px, calc(100dvh - 48px));
    border: 1px solid var(--regla);
    box-shadow: var(--alzado-marco);
  }
}

/* ---------- Cabecera del expediente (cinta de aviso) ---------- */
.cinta-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .03em;
  color: var(--tinta-apagada);
  border-bottom: 1px solid var(--regla-suave);
  z-index: 40;
}
.cinta-aviso::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--naranja);
  flex: none;
}

/* ---------- Pantallas ---------- */
.pantalla {
  flex: 1;
  min-height: 0;            /* sin esto, un hijo flex no scrollea: se desborda */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 22px 32px;
  animation: aparecer .22s ease both;
}
.pantalla.con-nav { padding-bottom: 104px; }
/* Con la cinta de "sin cuenta" puesta hay 44 px más de barra pegada abajo, y
   sin este hueco se comía el final de la pantalla: antes tapaba la próxima
   cita, ahora la leyenda de la gráfica. La cinta va DESPUÉS de las pantallas
   en el documento, así que no hay hermano anterior al que agarrarse: se
   pregunta al marco si la lleva. */
.marco:has(> .cinta-invitado:not([hidden])) .pantalla.con-nav { padding-bottom: 32px; }
.pantalla.sin-relleno { padding: 0; display: flex; flex-direction: column; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }


/* Pastillas de estado (citas, códigos OBD, destacados del mapa) */
.sello-mini, .etiqueta {
  display: inline-block;
  font-weight: 600;
  font-size: .75rem;
  padding: 4px 11px;
  border-radius: 999px;
}
.etiqueta.solicitada { color: var(--naranja-tinta); background: var(--naranja-film); }
.etiqueta.confirmada { color: var(--teal-tinta); background: var(--teal-film); }
.etiqueta.rechazada { color: var(--rojo-tinta); background: var(--rojo-film); }
.etiqueta.completada { color: var(--tinta-suave); background: var(--film-2); }
.etiqueta.popular { color: var(--teal-tinta); background: var(--teal-film); }

/* ---------- Secciones del documento ---------- */
.seccion {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 30px 0 4px;
}
.seccion h3 {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--tinta);
  white-space: nowrap;
}
.seccion::after { content: none; }
.seccion { justify-content: space-between; }
.seccion .enlace-suave { white-space: nowrap; }

/* ---------- Tarjetas de vidrio (lenguaje del alta, extendido a la app) ---------- */
.tarjeta-vidrio {
  background: var(--superficie);
  border: 1px solid var(--regla-suave);
  border-radius: 20px;
  box-shadow: var(--alzado);
  padding: 6px 16px;
  margin-bottom: 4px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tarjeta-vidrio .fila:first-child, .tarjeta-vidrio .ficha-fila:first-child { border-top: 0; }
.tarjeta-vidrio .fila:last-child, .tarjeta-vidrio .fila-boton:last-child,
.tarjeta-vidrio .ficha-fila:last-child { border-bottom: 0; }
.tarjeta-vidrio .vacio { border: 0; padding: 24px 12px; }
.tarjeta-vidrio.cronologia { border-top: 1px solid var(--regla); }

.estado-card { padding: 16px; }
.estado-linea { display: flex; align-items: center; gap: 10px; }
.estado-linea strong { font-size: 1.05rem; font-weight: 600; }
.estado-punto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--teal-tinta); }
.estado-punto.naranja { background: var(--naranja); }
.estado-punto.rojo { background: var(--rojo); }

/* ---------- Ficha: filas campo/valor ---------- */
.ficha { margin: 0; }
.ficha-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--regla-suave);
}
.ficha-fila dt, .ficha-fila dd { margin: 0; }
.ficha-fila .etiqueta-campo {
  font-size: .9rem;
  color: var(--tinta-suave);
  min-width: 0;
}
.ficha-valor {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Filas de lista (avisos, citas, lugares) ---------- */
.fila {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--regla-suave);
}
.fila:first-child { border-top: 1px solid var(--regla); }
.fila-icono {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--regla);
  border-radius: 12px;
  color: var(--tinta);
}
.fila-icono svg { width: 19px; height: 19px; }
.fila-icono.urgencia-alta { color: var(--rojo); }
.fila-icono.urgencia-media { color: var(--naranja-tinta); }
.fila-icono.urgencia-baja { color: var(--teal-tinta); }
.fila-cuerpo { min-width: 0; flex: 1; }
.fila-cuerpo strong { display: block; font-size: .95rem; font-weight: 600; }
.fila-cuerpo p, .fila-cuerpo .fila-sub { display: block; margin: 3px 0 0; font-size: .82rem; color: var(--tinta-suave); line-height: 1.45; }
.fila-extra { text-align: right; flex: none; font-size: .8rem; color: var(--tinta-suave); }
.fila-extra strong {
  display: block; color: var(--tinta);
  font-weight: 600; font-variant-numeric: tabular-nums; font-size: .95rem;
}
.fila-extra svg { width: 18px; height: 18px; color: var(--tinta); }

/* Los avisos son botones: misma anatomía de fila, tocable de borde a borde */
.fila-boton {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--regla-suave);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.fila-boton:hover { background: var(--film-1); }
.fila-boton .fila-extra svg { width: 15px; height: 15px; color: var(--tinta-apagada); }

/* Estados presentes: lo no urgente queda como tinta apagada, lo activo encendido */
.fila.apagada .fila-cuerpo strong { color: var(--tinta-apagada); font-weight: 400; }
.fila.apagada .fila-cuerpo p { color: var(--tinta-apagada); }
.fila.apagada .fila-icono { color: var(--tinta-apagada); border-color: var(--regla-suave); }

/* ---------- Diario: registro numerado con columna de margen ---------- */
/* ---------- Diario: una línea de tiempo ----------
   Era una rejilla de tres columnas (ordinal · cuerpo · coste) separada solo
   por filetes, y se leía plana: nada distinguía una intervención de otra.
   Ahora cada una es un hito con el icono de lo que se hizo, unidos por el
   carril. Sin colores nuevos: el relieve lo dan el material y la topología. */
.cronologia { border-top: 1px solid var(--regla-suave); padding-top: 18px; }

.crono-hito { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding-bottom: 21px; }
.crono-carril { position: relative; display: flex; justify-content: center; }
/* El filete baja del nodo al siguiente hito; el último no tiene a quién unirse */
.crono-carril::before {
  content: "";
  position: absolute; top: 26px; bottom: -21px; width: 1px;
  background: var(--regla);
}
.crono-hito:last-child .crono-carril::before { display: none; }

.crono-nodo {
  position: relative; flex: none;
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--film-2);
  border: 1px solid var(--regla);
}
.crono-nodo svg { width: 14px; height: 14px; color: var(--tinta); }

.crono-fecha {
  display: block;
  font-size: .75rem; font-weight: 600;
  color: var(--tinta-apagada);
  font-variant-numeric: tabular-nums;
}
.crono-cuerpo strong { display: block; margin-top: 2px; font-size: .95rem; font-weight: 600; }
.crono-cuerpo p { margin: 4px 0 0; font-size: .82rem; color: var(--tinta-suave); line-height: 1.5; }

.crono-pie { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.crono-precio {
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--regla);
  font-size: .78rem; font-weight: 600;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* ---------- Botones: casillas firmadas ---------- */
.boton {
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font-family: var(--doc);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.boton-ancho { display: block; width: 100%; margin-top: 20px; }
.boton:active { transform: translateY(1px); }
.boton-primario { background: var(--azul); color: #ffffff; box-shadow: var(--alzado-accion); }
.boton-primario:hover { background: var(--azul-hover); }
.boton-claro { background: var(--superficie); color: var(--tinta); border: 1px solid var(--regla); }
.boton-secundario { background: transparent; color: var(--tinta); border: 1px solid var(--regla); }
.boton-secundario:hover { border-color: var(--regla-fuerte); }
.boton-fantasma { background: none; color: var(--tinta-apagada); border: 1px dashed var(--regla); }
.boton[disabled] { opacity: .5; cursor: default; }

/* 44 px de alto aunque el texto ocupe menos: en un móvil un enlace de 29 px
   se falla más veces de las que se acierta. El margen negativo evita que el
   relleno separe visualmente lo que antes estaba junto. */
.enlace-suave {
  background: none; border: 0;
  min-height: 44px; padding: 6px 0; margin: -7px 0;
  color: var(--tinta);
  font-family: var(--doc);
  font-weight: 600;
  font-size: .86rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.enlace-suave .mini { width: 14px; height: 14px; }

.boton-icono {
  width: 44px; height: 44px;
  border: 1px solid var(--regla);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  flex: none;
  transition: border-color .15s ease, background .15s ease;
}
.boton-icono:hover { border-color: var(--regla-fuerte); }
.boton-icono svg { width: 20px; height: 20px; }
.boton-icono.destacado { background: var(--azul); color: #ffffff; border: 0; }
.boton-icono.con-punto::after {
  content: ""; position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px;
  background: var(--naranja);
}
.avatar { color: var(--tinta-suave); }
.avatar-grande {
  width: 54px; height: 54px;
  border: 1px solid var(--regla);
  display: grid; place-items: center;
  color: var(--tinta-suave);
}
.avatar-grande svg { width: 24px; height: 24px; }

/* ---------- Cabeceras ---------- */
.cabecera-simple, .cabecera-app {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.cabecera-app { justify-content: space-between; }
.cabecera-app h2, .cabecera-simple h2 {
  margin: 0;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -.01em;
}
.cabecera-botones { display: flex; gap: 10px; }

/* El título del inicio es el selector de coche: abre el garaje, para cambiar
   de coche o añadir otro. Sigue leyéndose como el título que era; el galón es
   lo único que anuncia que ahí se toca. */
.selector-coche {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0; flex: 1;
  padding: 4px 0; margin: -4px 0;
  background: none; border: 0; border-radius: 12px;
  font-family: var(--doc);
  color: inherit; text-align: left;
  cursor: pointer;
}
.selector-coche h2 { display: flex; align-items: center; gap: 7px; }
.selector-coche h2::after {
  content: "";
  width: 7px; height: 7px;
  margin-top: -4px;
  border-right: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.selector-coche:active { transform: scale(.985); }
.selector-coche:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }

/* Un vehículo del garaje: la fila entera cambia de coche y la aspa de quitar va
   fuera de ella, porque un botón dentro de otro no es HTML válido. Se queda
   apagada hasta que la tocas: quitar un coche no es la acción de esta lista. */
.fila-vehiculo { display: flex; align-items: center; gap: 4px; }
.fila-vehiculo .fila-boton { flex: 1; min-width: 0; }
.fila-vehiculo .quitar-vehiculo svg { width: 16px; height: 16px; }
/* El coche en el que estás: el galón teal lo dice, y el nombre también */
.marco .fila-vehiculo.es-activo .fila-cuerpo strong { color: var(--tinta); }
.cabecera-flotante { position: absolute; z-index: 5; padding: 20px 22px; margin: 0; }
.cabecera-taller { align-items: flex-start; }

.subtexto { color: var(--tinta-suave); font-size: .88rem; line-height: 1.55; margin: 0 0 14px; }
.ayuda { font-size: .8rem; color: var(--tinta-apagada); margin: -4px 0 14px; line-height: 1.5; }
.ayuda strong { color: var(--naranja-tinta); font-weight: 600; }
.titulo-seccion {
  margin: 26px 0 12px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--tinta);
}

/* ---------- Splash: portada del expediente ---------- */
.pantalla-splash {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Antes eran dos orbes difuminados sobre negro. Aquí no hay orbes: hay LUZ,
     un azul al 10 % entrando por arriba como una claraboya. Sin ella el
     splash se quedaba con dos tercios de blanco muerto. */
  background:
    radial-gradient(78% 46% at 68% 4%, var(--azul-luz) 0%, transparent 72%),
    var(--noche-alta);
  padding: 30px 26px 44px;
}
.splash-fondo { position: absolute; inset: 0; pointer-events: none; }
.splash-contenido { position: relative; display: flex; flex-direction: column; gap: 15px; }
.splash-logo {
  margin: 0;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--naranja-tinta);
}
.pantalla-splash h1 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.9rem, 8.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.splash-sub {
  margin: 0 0 8px;
  color: var(--tinta-suave);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 32ch;
}

/* ---------- Formularios ---------- */
.formulario { display: flex; flex-direction: column; }
.campo { display: block; margin-bottom: 16px; }
.campo > span {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
  font-size: .82rem;
  color: var(--tinta-suave);
}
.campo input, .campo select {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--regla);
  border-radius: 14px;
  color: var(--tinta);
  font: inherit;
  font-size: .96rem;
  padding: 13px 14px;
  transition: border-color .15s ease;
}
.campo input::placeholder { color: var(--tinta-apagada); }
.campo input:focus, .campo select:focus {
  outline: none;
  border-color: var(--tinta);
}
/* El desplegable lo dibuja el sistema operativo y hereda poco de la app, así
   que a las opciones hay que decirles el color a la cara. Va sin acotar a
   ningún contenedor: vale para el alta del coche, el modal de cita y todo lo
   que venga. */
select option {
  background: var(--noche-alta);
  color: var(--tinta);
}
select option:disabled { color: var(--tinta-apagada); }
.campo-con-boton { display: flex; gap: 8px; }
.campo-con-boton input { flex: 1; min-width: 0; }
.campo-con-boton .boton { padding: 0 18px; flex: none; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.formulario .boton-primario { margin-top: 10px; }

/* Conmutador: pestañas de documento */
.conmutador {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--regla);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
}
.conmutador-3 { grid-template-columns: repeat(3, 1fr); }
/* El panel del taller tiene cuatro pestañas y con tres columnas se caía una
   a la fila de abajo */
.conmutador-4 { grid-template-columns: repeat(4, 1fr); }
.conmutador-4 button { padding-left: 4px; padding-right: 4px; font-size: .8rem; }
/* Las píldoras de orden del mapa miden 32 px y las pestañas del taller 39:
   mismo truco, el área de toque llega a 44 sin tocar la maqueta. */
.conmutador button { position: relative; }
.conmutador button::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}
.conmutador button {
  border: 0;
  background: none;
  color: var(--tinta-apagada);
  font-family: var(--doc);
  font-weight: 600;
  font-size: .86rem;
  padding: 11px 8px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.conmutador button + button { border-left: 1px solid var(--regla); }
.conmutador button.activo {
  background: var(--superficie);
  color: var(--tinta);
}

/* ---------- Pantallas de autenticación: registro, login, coche ---------- */
/* ---------- Objetivos táctiles ----------
   Medido en la crítica del 14/09/2026: 23 controles por debajo de 44x44. Los
   de cabecera se agrandan sin más, que hay sitio. Los del mapa NO: su cabecera
   ya se come el 26 % de la pantalla y subirles la altura la empeoraría. A esos
   se les amplía el área de toque con un pseudoelemento invisible: se tocan
   como 44 px y se ven como antes. */
.boton-icono.pequeno { width: 44px; height: 44px; }
.boton-icono.pequeno svg { width: 16px; height: 16px; }

.titulo-auth {
  margin: 18px 0 6px;
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -.015em;
}
.pantalla-auth .subtexto { margin-bottom: 22px; }

.pantalla-auth {
  background:
    radial-gradient(78% 40% at 74% 2%, var(--azul-luz) 0%, transparent 70%),
    var(--noche-alta);
}
.panel-auth {
  background: var(--superficie);
  border: 1px solid var(--regla);
  border-radius: 24px;
  padding: 22px 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.boton-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--regla);
  border-radius: 999px;
  letter-spacing: .06em;
}
.boton-google svg { width: 18px; height: 18px; flex: none; }

.divisor {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  font-weight: 500;
  font-size: .78rem;
  color: var(--tinta-apagada);
}
.divisor::before, .divisor::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--regla-suave);
}

.formulario-auth input, .formulario-auth select {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--regla);
  border-radius: 999px;
  color: var(--tinta);
  font: inherit;
  font-size: .95rem;
  padding: 15px 20px;
  margin-bottom: 12px;
  transition: border-color .15s ease;
}
.formulario-auth input::placeholder { color: var(--tinta-apagada); }
.formulario-auth input:focus, .formulario-auth select:focus {
  outline: none;
  border-color: var(--tinta);
}
.formulario-auth .boton-primario { border-radius: 999px; margin-top: 6px; }
.formulario-auth .campo-con-boton { margin-bottom: 12px; }
.formulario-auth .campo-con-boton input { margin-bottom: 0; }
.formulario-auth .campo-con-boton .boton { border-radius: 999px; }
.formulario-auth .fila-campos { margin-bottom: 0; }
.formulario-auth .ayuda { margin: 2px 4px 14px; }

.conmutador-redondo { border-radius: 999px; margin-bottom: 20px; }
.conmutador-redondo button { border-radius: 999px; }
.conmutador-redondo button + button { border-left: 0; }

.enlace-suave.centrado {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
}

.tarjeta {
  border: 1px solid var(--regla);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
}
.tarjeta h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; }
.tarjeta-vehiculo { display: flex; align-items: center; gap: 14px; }
.tarjeta-vehiculo .fila-icono { color: var(--naranja-tinta); }
.acciones-dobles { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 18px; }
.entre-titulos { display: flex; justify-content: space-between; align-items: baseline; margin: 24px 0 12px; }
.entre-titulos h3 { margin: 0; font-size: .98rem; }

/* ---------- OBD: informe de diagnosis ---------- */
.obd-conector { text-align: center; padding: 40px 24px; border: 1px solid var(--regla); }
.obd-conector h3 {
  font-weight: 600;
  font-size: 1.15rem;
  margin: 14px 0 6px;
}
.obd-conector .subtexto { max-width: 32ch; margin-inline: auto; }
.obd-conector .boton { width: 100%; margin-top: 12px; }
.obd-grande { width: 48px; height: 48px; color: var(--tinta); }
.escaner { text-align: center; padding: 80px 20px; }
.escaner p {
  color: var(--tinta-suave);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
}
.escaner-anillo {
  width: 110px; height: 110px; margin: 0 auto 26px;
  border: 1px solid var(--regla);
  display: grid; place-items: center;
  position: relative;
}
.escaner-anillo::after {
  content: "";
  position: absolute; inset: -1px;
  border: 1px solid var(--tinta);
  clip-path: inset(0 0 92% 0);
  animation: barrido 1.4s linear infinite;
}
@keyframes barrido {
  0% { clip-path: inset(0 92% 92% 0); }
  25% { clip-path: inset(0 0 92% 92%); }
  50% { clip-path: inset(92% 0 0 92%); }
  75% { clip-path: inset(92% 92% 0 0); }
  100% { clip-path: inset(0 92% 92% 0); }
}
.barra { height: 3px; background: var(--regla-suave); overflow: hidden; margin-top: 22px; }
.barra-valor {
  height: 100%; width: 100%;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.codigo-dtc code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
}

/* ---------- Mapa ---------- */
.filtros-mapa {
  position: absolute; z-index: 5; top: 72px; left: 0; right: 0;
  display: flex; gap: 8px; overflow-x: auto;
  padding: 6px 22px 12px;
  scrollbar-width: none;
}
.filtros-mapa::-webkit-scrollbar { display: none; }
.filtros-mapa button {
  flex: none;
  border: 1px solid var(--regla);
  border-radius: 999px;
  /* Opaco, no translúcido: un chip translúcido sobre un mapa claro con
     rótulos debajo se vuelve ilegible justo donde hay algo que leer. */
  background: var(--superficie);
  color: var(--tinta-suave);
  padding: 8px 14px;
  font-family: var(--doc);
  font-weight: 600;
  font-size: .84rem;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  backdrop-filter: blur(8px);
}
.filtros-mapa button svg { width: 14px; height: 14px; }
/* El chip mide 34 px de alto y se toca como 44: el pseudoelemento se sale por
   arriba y por abajo sin mover nada de sitio. */
.filtros-mapa button { position: relative; }
.filtros-mapa button::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}
.filtros-mapa button.activo { background: var(--azul); color: #ffffff; border-color: var(--azul); }

.mapa {
  position: relative; flex: 1;
  background: var(--noche);
  overflow: hidden;
}
.mapa-calles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; }
.mapa-yo {
  position: absolute; left: 44%; top: 58%; z-index: 3;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--teal-tinta); border: 2.5px solid var(--superficie);
  box-shadow: 0 0 0 6px var(--azul-halo);
}
.pin {
  position: absolute; z-index: 2;
  translate: -50% -100%;
  border: 0; background: none; cursor: pointer; padding: 4px;
  color: var(--teal-tinta);
  transition: transform .15s ease;
}
.pin:hover, .pin.activo { transform: scale(1.18); z-index: 4; }
.pin svg { width: 26px; height: 26px; filter: drop-shadow(var(--alzado-pin)); }
.pin.tipo-taller { color: var(--naranja-tinta); }
.pin.popular::after {
  content: "★";
  position: absolute; top: -3px; right: -5px;
  font-size: .75rem; color: var(--superficie);
  background: var(--teal-tinta);
  width: 15px; height: 15px; line-height: 15px; text-align: center;
}

/* ---------- Ficha del sitio: la tarjeta que asoma al tocar un punto ----------
   Dos alturas, como en los mapas de siempre: asomada (lo justo para decidir)
   y desplegada (todo: horario, tu historial y las reseñas). Se pasa de una a
   otra arrastrando el tirador o tocando la cabecera. */
.hoja {
  /* Por encima del nav (z-index 20): es una hoja modal, como en los mapas.
     Si se queda debajo, la barra fija tapa el botón de pedir cita. */
  position: absolute; z-index: 21; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  max-height: 58%;
  background: var(--superficie);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--regla);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--alzado-hoja);
  animation: subir .28s cubic-bezier(.2, .8, .3, 1) both;
  /* El alto cambia de golpe a propósito: animar max-height obliga al navegador
     a recalcular el layout en cada fotograma y en un móvil normalito se nota.
     El movimiento lo pone una animación de transform, que va en el compositor.
     contain acota además el recálculo al subárbol de la ficha. */
  contain: layout;
  overscroll-behavior: contain;
}
/* Se queda una franja de mapa a la vista: recuerda dónde estás */
.hoja.expandida { max-height: calc(100% - 64px); }
.hoja.reasentando { animation: reasentar .2s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes reasentar { from { transform: translateY(9px); } to { transform: none; } }
@keyframes subir { from { transform: translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hoja, .hoja.reasentando { animation: none; transition: none; }
}

/* Zona de agarre: todo el bloque superior responde, no solo la rayita */
.hoja-agarre {
  /* Alto de dedo (44 px): el tirador es la rayita, pero se agarra toda la zona */
  flex: none; min-height: 44px; padding: 14px 0 10px;
  cursor: grab; touch-action: none;
  background: none; border: 0; width: 100%;
}
.hoja-tirador {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--regla); margin: 0 auto;
}
.hoja-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 20px 16px;
}

/* Cabecera */
.ficha-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ficha-cabecera h3 { margin: 0 0 3px; font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.ficha-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  font-size: .84rem; color: var(--tinta-suave); margin: 0;
}
.ficha-nota { font-size: .84rem; margin: 7px 0 0; }
/* El teal ya legisla "en regla" en este diseño: no hace falta un verde nuevo */
.ficha-nota.abierto { color: var(--teal-tinta); }
.ficha-nota.cerrado { color: var(--tinta-apagada); }
.ficha-nota.cerrado b, .ficha-nota.abierto b { font-weight: 600; }

/* Nota media + estrellas dibujadas */
.ficha-nota-media { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--tinta); }
.estrellas { display: inline-flex; gap: 1px; }
.estrellas svg { width: 13px; height: 13px; color: var(--estrella-vacia); }
.estrellas svg.llena { color: var(--naranja-tinta); }
.sin-notas { color: var(--tinta-apagada); font-size: .84rem; }

/* Tira de fotos */
.ficha-fotos {
  display: flex; gap: 8px; margin: 14px -20px 0; padding: 0 20px 2px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ficha-fotos::-webkit-scrollbar { display: none; }
.ficha-fotos img, .ficha-fotos .foto-hueco, .ficha-fotos .foto-anadir {
  flex: none; width: 150px; height: 100px; border-radius: 12px; scroll-snap-align: start;
}
.ficha-fotos img { object-fit: cover; background: var(--film-2); }
.foto-hueco {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: calc(100% - 100px) !important; border: 1px dashed var(--regla);
  color: var(--tinta-apagada); font-size: .78rem; text-align: center;
  background: var(--film-2);
}
.foto-hueco svg { width: 22px; height: 22px; opacity: .8; }
.foto-anadir {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 92px !important; border: 1px dashed var(--regla); background: none;
  color: var(--tinta-suave); font-size: .75rem; cursor: pointer; font-family: inherit;
}
.foto-anadir svg { width: 20px; height: 20px; }

/* Acciones redondas, en fila */
.ficha-acciones { display: flex; gap: 8px; margin: 16px 0 4px; }
.ficha-acciones button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-height: 62px; padding: 9px 4px;
  background: var(--film-1); border: 1px solid var(--regla-suave);
  border-radius: 14px; color: var(--tinta-suave);
  font-family: inherit; font-size: .75rem; cursor: pointer;
}
.ficha-acciones button:hover { background: var(--film-3); }
.ficha-acciones button svg { width: 19px; height: 19px; color: var(--tinta); }
.ficha-acciones button.activo { color: var(--naranja-tinta); border-color: var(--naranja-regla); }
.ficha-acciones button.activo svg { color: var(--naranja-tinta); }

/* Chips de servicio */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.chips span {
  font-weight: 500; font-size: .78rem; padding: 4px 11px;
  border: 1px solid var(--regla); border-radius: 999px; color: var(--tinta-suave);
}

/* Bloques de la parte desplegada */
.ficha-bloque { margin-top: 18px; border-top: 1px solid var(--regla-suave); padding-top: 16px; }
.ficha-bloque h4 {
  margin: 0 0 10px; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-apagada);
}
.ficha-dato {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 9px 0; background: none; border: 0; text-align: left;
  color: var(--tinta); font-family: inherit; font-size: .88rem; line-height: 1.4;
}
.ficha-dato > svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--tinta); }
.ficha-dato small { display: block; color: var(--tinta-apagada); font-size: .78rem; }
button.ficha-dato { cursor: pointer; }
button.ficha-dato:hover { color: var(--tinta); }

.ficha-semana { margin: 4px 0 0 28px; }
.ficha-semana div {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: .82rem; color: var(--tinta-suave); padding: 3px 0;
}
.ficha-semana div.hoy { color: var(--tinta); font-weight: 600; }

/* Tu historial en este sitio: el puente con el diario */
.ficha-historial {
  border: 1px solid var(--regla); border-radius: 14px;
  background: var(--film-2); padding: 12px 14px; margin-top: 18px;
}
.ficha-historial p { margin: 0 0 8px; font-size: .84rem; color: var(--tinta); }
.ficha-historial ul { margin: 0; padding: 0; list-style: none; }
.ficha-historial li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .82rem; color: var(--tinta-suave); padding: 3px 0;
}

/* Reseñas propias */
.resumen-notas { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.resumen-notas .cifra { font-size: 2rem; font-weight: 600; line-height: 1; }
.resena { border-top: 1px solid var(--regla-suave); padding: 12px 0 2px; }
.resena:first-of-type { border-top: 0; }
.resena-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.resena-inicial {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .8rem; font-weight: 600;
  background: var(--film-2); color: var(--tinta);
}
.resena-autor { font-size: .86rem; font-weight: 600; }
.resena-fecha { font-size: .78rem; color: var(--tinta-apagada); }
.resena p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--tinta-suave); }
.resena .servicio { display: block; margin-top: 4px; font-size: .78rem; color: var(--tinta-apagada); }

.ficha-fuente { margin: 18px 0 0; font-size: .75rem; color: var(--tinta-apagada); line-height: 1.5; }
.ficha-fuente a { color: var(--tinta-apagada); }

/* Pie fijo: la acción no se pierde al hacer scroll dentro de la ficha */
.ficha-pie {
  flex: none; display: flex; gap: 8px;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--regla-suave);
  background: var(--superficie);
}
.ficha-pie .boton { flex: 1; }

/* Cabina teal: la ficha acompaña al resto de la app */
.marco.en-app .hoja { background: var(--app-superficie); border-top-color: var(--app-regla-suave); }
.marco.en-app .ficha-pie { background: var(--app-superficie); border-top-color: var(--app-regla-suave); }
.marco.en-app .hoja-tirador { background: var(--app-regla); }
.marco.en-app .ficha-meta, .marco.en-app .chips span, .marco.en-app .resena p { color: var(--app-tinta-suave); }
.marco.en-app .ficha-bloque, .marco.en-app .resena { border-color: var(--app-regla-suave); }

/* Aviso de búsqueda de sitios reales, flotando sobre el mapa */
.mapa-nota {
  position: absolute; z-index: 5; left: 50%; translate: -50% 0; bottom: 96px;
  display: flex; align-items: center; gap: 8px;
  /* min-height, no padding: la nota es un botón y tiene que tocarse a 44 */
  min-height: 44px; padding: 8px 15px; border-radius: 999px;
  background: var(--azul); border: 1px solid var(--azul);
  color: #ffffff; font-size: .8rem; font-family: inherit;
  box-shadow: var(--alzado);
  box-shadow: var(--alzado);
  cursor: pointer; white-space: nowrap;
}
.mapa-nota[hidden] { display: none !important; }
/* Con la ficha abierta el aviso estorba: se aparta */
.hoja:not([hidden]) ~ .mapa-nota { display: none !important; }
/* La cinta de sin cuenta ocupa esa misma franja y se pisaban. Va antes en el
   HTML, así que el hermano posterior se puede subir cuando ella está. */
.cinta-invitado:not([hidden]) ~ .mapa-nota { bottom: 146px; }

/* Del diario al taller donde se hizo la intervención */
.crono-ver {
  flex: none; align-self: center; margin-left: 4px;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--app-tinta-apagada, var(--tinta-apagada));
}
.crono-ver:hover { background: var(--film-2); color: var(--tinta); }
/* Borrar una intervención: en rojo, pero sin gritar. Va al final del
   formulario de edición, separado del botón de guardar, para que el pulgar no
   se lo encuentre de camino. */
.enlace-peligro {
  color: var(--rojo);
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  gap: 7px;
}
.enlace-peligro svg { width: 15px; height: 15px; }
.enlace-peligro:hover { text-decoration: underline; }

/* ---------- Facturas ----------
   La foto de la factura dentro del formulario. Se enseña pequeña: es una
   confirmación de que está, no la pieza principal del modal. */
.caja-factura { margin-top: 4px; }
.factura-vista {
  position: relative;
  border: 1px solid var(--regla);
  border-radius: 12px;
  overflow: hidden;
  background: var(--film-2);
}
/* Alto mínimo mientras la imagen llega de IndexedDB: sin esto la caja nace
   plana y el modal pega un salto cuando aparece la foto. */
/* ---------- Desglose de la factura ----------
   Una línea por concepto, con su importe a la derecha para poder compararlos
   de un vistazo. La aspa de quitar va apagada: no compite con escribir. */
.desglose { margin: 4px 0 2px; }

/* Cada concepto ocupa dos filas: el texto arriba a todo el ancho y el importe
   con su aspa debajo. En una sola línea los tres no caben a 390 px — medido:
   el concepto se quedaba en 30 px y el botón de quitar acababa 20 px fuera de
   la pantalla, porque ".campo input { width: 100% }" (0,1,1) le gana a un
   "width" de clase sola (0,1,0). Aquí se sube la especificidad a propósito. */
.linea-desglose {
  padding-left: 10px;
  border-left: 2px solid var(--regla-suave);
  margin-bottom: 12px;
}
.marco.en-app .linea-desglose { border-left-color: var(--app-regla-suave); }
.pie-linea { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.euro-linea { flex: none; font-size: .9rem; color: var(--tinta-apagada); }
.marco.en-app .euro-linea { color: var(--app-tinta-apagada); }
.campo .linea-desglose .concepto-desglose { width: 100%; }
.campo .pie-linea .importe-desglose {
  width: 120px;
  flex: none;
  text-align: right;
}
.quitar-linea, .marco.en-app .quitar-linea {
  width: 44px; height: 44px; flex: none;
  border-color: transparent; background: none;
  color: var(--tinta-apagada);
}
.quitar-linea svg { width: 15px; height: 15px; }
.quitar-linea:hover, .marco.en-app .quitar-linea:hover {
  border-color: var(--rojo); background: none; color: var(--rojo);
}
.suma-desglose { margin: 2px 0 0; }

/* ---------- Expediente del coche ----------
   El hueco sin documentar es un dato del expediente, no una regañina: se
   presenta en naranja de atención, no en rojo, y lleva al lado el botón para
   rellenarlo. Decirle a alguien que le falta algo sin darle dónde ponerlo es
   solo dar la lata. */
.aviso-hueco {
  border-color: var(--naranja-regla);
  background: var(--naranja-film);
  margin-top: 14px;
}
.aviso-hueco strong { display: block; color: var(--naranja-tinta); font-size: .95rem; }
.aviso-hueco .subtexto { margin: 6px 0 12px; }
.marco.en-app .aviso-hueco .subtexto { color: var(--app-tinta-suave); }

/* El desglose suelto, fuera de un hito de la cronología */
.crono-desglose-suelto { margin-top: 4px; }

.sin-desglose { margin: 2px 0 0; }

/* En el diario: lo que se hizo, concepto a concepto */
.crono-desglose {
  margin: 8px 0 0; padding: 0; list-style: none;
  border-left: 2px solid var(--regla-suave); padding-left: 10px;
}
.crono-desglose li {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .82rem; color: var(--tinta-suave); line-height: 1.5;
}
.crono-desglose li span { flex: none; color: var(--tinta-apagada); }
.marco.en-app .crono-desglose { border-left-color: var(--app-regla-suave); }
.marco.en-app .crono-desglose li { color: var(--app-tinta-suave); }
.marco.en-app .crono-desglose li span { color: var(--app-tinta-apagada); }

.factura-vista { min-height: 92px; }
/* Un PDF no se puede enseñar en un <img>, así que se enseña como lo que es:
   un documento con su peso y un botón para abrirlo en el visor del móvil, que
   es mejor que cualquiera que montemos aquí. */
.factura-pdf {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 84px; padding: 16px;
  background: none; border: 0;
  color: var(--tinta); font-family: inherit; text-align: left;
  cursor: pointer;
}
.factura-pdf svg { width: 26px; height: 26px; flex: none; color: var(--tinta); }
.factura-pdf strong { display: block; font-size: .95rem; font-weight: 600; }
.factura-pdf small { display: block; margin-top: 2px; font-size: .8rem; color: var(--tinta-suave); }
.marco.en-app .factura-pdf { color: var(--app-tinta); }
.marco.en-app .factura-pdf small { color: var(--app-tinta-suave); }
/* Mientras se lee la factura: la imagen se apaga y late, para que se vea que
   está pasando algo y no parezca que la app se ha quedado colgada. */
.caja-factura.leyendo .factura-vista img { opacity: .45; }
.caja-factura.leyendo .factura-vista { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .caja-factura.leyendo .factura-vista { animation: none; } }
.factura-grande { min-height: 120px; }
.factura-vista img {
  display: block;
  width: 100%;
  max-height: 190px;
  object-fit: cover;
  object-position: top;
}
.quitar-factura, .marco.en-app .quitar-factura {
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px;
  /* Flota sobre una FOTO, así que aquí sí manda una pastilla oscura: es lo
     único que se lee encima de cualquier imagen. */
  background: var(--velo-foto);
  border-color: transparent;
  color: #ffffff;
}
.quitar-factura svg { width: 15px; height: 15px; }
.quitar-factura:hover, .marco.en-app .quitar-factura:hover {
  background: var(--velo-foto-fuerte);
  border-color: var(--rojo);
  color: #ffffff;
}

/* Abierta a tamaño completo: aquí sí manda la foto, que es lo que se viene a leer */
.factura-grande {
  margin: 10px 0 4px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--superficie);
}
.factura-grande img { display: block; width: 100%; height: auto; }

/* ---------- Escaparate ----------
   Los talleres que hacen ese mantenimiento, dentro del aviso. El precio es lo
   que se compara de un vistazo, así que va en tinta plena a la derecha; cuando
   el taller no lo ha publicado se dice, apagado, en vez de dejar el hueco. */
.titulo-escaparate {
  margin: 18px 0 2px;
  font-size: 1rem;
  font-weight: 600;
}
.sin-precio { color: var(--tinta-apagada); font-size: .8rem; }
.marco.en-app .sin-precio { color: var(--app-tinta-apagada); }

/* Pagar por salir antes hay que decirlo (RDL 24/2021). Se lee como etiqueta,
   no como adorno: mismo tratamiento que las demás marcas de estado. */
.marca-destacado {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--naranja);
  border-radius: 999px;
  color: var(--naranja-tinta);
  font-size: .75rem;
  font-weight: 600;
  vertical-align: middle;
}

.lista-criterios {
  margin: 10px 0 14px;
  padding-left: 20px;
  color: var(--tinta-suave);
  font-size: .88rem;
  line-height: 1.55;
}
.lista-criterios li { margin-bottom: 7px; }
.lista-criterios strong { color: var(--tinta); font-weight: 600; }
.marco.en-app .lista-criterios { color: var(--app-tinta-suave); }
.marco.en-app .lista-criterios strong { color: var(--app-tinta); }

/* El código de taller se copia a mano en otro sitio, así que se lee como lo
   que es: un dato literal, no una frase. */
.codigo-taller {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .95em;
  letter-spacing: .04em;
  color: var(--tinta);
  user-select: all;
}
.crono-ver svg { width: 16px; height: 16px; }
.mapa-nota svg { width: 15px; height: 15px; color: #ffffff; }
.mapa-nota.cargando { cursor: default; }
.mapa-nota.cargando svg { animation: girando 1s linear infinite; }
@keyframes girando { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .mapa-nota.cargando svg { animation: none; } }

/* ---------- Nav inferior: pestañas del expediente ---------- */
.nav-inferior {
  position: fixed; z-index: 20; bottom: 0;
  left: 50%; translate: -50% 0;
  width: 100%; max-width: 430px;
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--nav-fondo);
  border-top: 1px solid var(--regla-suave);
  box-shadow: 0 -2px 10px rgba(31, 45, 68, .05), 0 -12px 30px rgba(31, 45, 68, .05);
  padding: 0 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.nav-inferior button {
  position: relative;
  border: 0; background: none;
  color: var(--nav-tinta);
  font-family: var(--doc);
  font-weight: 500;
  font-size: .75rem;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 12px 8px;
  cursor: pointer;
  transition: color .15s ease;
}
.nav-inferior button svg { width: 21px; height: 21px; }
.nav-inferior button.activo { color: var(--nav-tinta-activa); }
.nav-inferior button.activo::before {
  content: "";
  position: absolute; top: -1px; left: 18%; right: 18%;
  border-top: 2px solid var(--azul);
}
.nav-central {
  background: var(--azul) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  margin: 6px 2px;
  padding: 10px 14px !important;
  min-height: 44px;
  justify-content: center;
  box-shadow: 0 4px 14px var(--azul-halo);
}
.nav-central svg { width: 23px !important; height: 23px !important; }
.nav-central.activo::before { display: none; }

/* El botón central se hunde como una tecla de verdad al pulsarlo. Es la
   acción principal de la app y el único relleno saturado de la barra: lo que
   tiene que hacer el movimiento aquí es confirmar la pulsación, nada más. Sin
   bucles: en una barra fija, algo latiendo todo el rato es deuda, no diseño. */
.nav-central {
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s cubic-bezier(.16, 1, .3, 1);
}
.nav-central svg { transition: transform .24s cubic-bezier(.16, 1, .3, 1); }
.nav-central:hover,
.nav-central:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--alzado);
}
/* La salida es más rápida que la entrada: si no, se siente latencia */
.nav-central:active {
  transform: translateY(2px) scale(.94);
  box-shadow: var(--alzado-accion);
  transition-duration: .1s;
}
/* El icono cede un poco menos que la píldora: así se siente que tiene masa */
.nav-central:active svg { transform: scale(.92); }

/* Movimiento reducido: se quita el desplazamiento, NO la confirmación.
   Quien pide menos movimiento sigue necesitando saber que ha pulsado. */
@media (prefers-reduced-motion: reduce) {
  .nav-central, .nav-central svg { transition: background-color .12s ease; }
  .nav-central:hover, .nav-central:focus-visible { transform: none; }
  .nav-central:active { transform: none; background: #1f5b97 !important; }
  .nav-central:active svg { transform: none; }
}

/* ---------- Modal y toast ---------- */
.velo {
  position: absolute; inset: 0; z-index: 30;
  background: var(--velo);
  display: flex; align-items: flex-end;
  animation: aparecer .18s ease both;
}
.modal {
  position: relative;
  width: 100%;
  background: var(--superficie);
  border-top: 1px solid var(--regla-suave);
  box-shadow: var(--alzado-alto);
  padding: 18px 22px 28px;
  max-height: 86%;
  overflow-y: auto;
  animation: subir .28s cubic-bezier(.2, .8, .3, 1) both;
}
/* La X de cerrar. La hoja del mapa ya tenía una y los modales no: el único
   modo de salir era tocar el velo, que no es descubrible ni funciona con
   teclado. Va en su esquina, a 44 px, y el título le deja sitio. */
.cerrar-modal, .marco.en-app .cerrar-modal {
  position: absolute; top: 10px; right: 14px;
  border-color: transparent; background: none;
  color: var(--tinta-apagada);
}
.cerrar-modal svg { width: 16px; height: 16px; }
.cerrar-modal:hover, .marco.en-app .cerrar-modal:hover {
  border-color: var(--regla); background: none; color: var(--tinta);
}
.modal h3 { padding-right: 44px; }

.modal h3 {
  margin: 4px 0 18px;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.modal .formulario .boton-primario { margin-top: 4px; }

.toast {
  position: absolute; z-index: 50; left: 22px; right: 22px; bottom: 92px;
  background: var(--tinta);
  color: #ffffff;
  font-size: .88rem;
  font-weight: 600;
  padding: 13px 16px;
  border-radius: 14px;
  box-shadow: var(--alzado-alto);
  animation: subir .22s ease both;
  text-align: left;
}

/* ---------- Perfil ---------- */
.perfil-cabecera { display: flex; align-items: center; gap: 14px; border: 1px solid var(--regla); padding: 16px; margin-bottom: 14px; }
.perfil-cabecera strong { font-weight: 600; font-size: 1.1rem; }
.perfil-cabecera .subtexto { margin: 2px 0 0; text-transform: none; letter-spacing: 0; }
#btnReiniciar { width: 100%; margin-top: 10px; }

/* ---------- Panel taller ---------- */
.taller-acciones { display: flex; gap: 8px; margin-top: 12px; }
.taller-acciones .boton { flex: 1; padding: 11px 10px; font-size: .82rem; }
.vacio {
  text-align: center; color: var(--tinta-apagada);
  padding: 44px 20px; font-size: .9rem; line-height: 1.55;
  border: 1px dashed var(--regla);
  border-radius: 16px;
}
.vacio svg { width: 34px; height: 34px; display: block; margin: 0 auto 12px; opacity: .5; }

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

/* ---------- Utilidades (evitan style= en línea: la CSP no permite inline) ---------- */
.sprite { position: absolute; }
.boton-bloque { width: 100%; margin-bottom: 10px; }
.sin-margen { margin: 2px 0 0; }
.estado-detalle { margin: 6px 0 2px; }
.tarjeta-separada { margin-top: 14px; }

/* ============================================================
   AMBIENTE DE LA APP (tras el acceso)

   Fue «cabina teal» sobre una noche azul, con la Regla de los Dos Ambientes
   detrás. Esa regla está DEROGADA (14/09/2026): hay un solo ambiente claro y
   estos tokens solo afinan el gradiente del suelo y el pozo azul del icono.
   Se mantienen porque los usan decenas de reglas y porque dejan la puerta
   abierta a volver a diferenciar el interior sin tocar el acceso.
   ============================================================ */
.marco.en-app {
  --app-canvas-alto: #f6f9fc;
  --app-canvas-bajo: #e9eef5;     /* abajo asienta, como suelo pulido */
  --app-superficie: #ffffff;      /* tarjetas y hojas */
  --app-regla: rgba(31, 45, 68, .1);
  --app-regla-suave: rgba(31, 45, 68, .05);
  --app-tinta: #1f2937;
  --app-tinta-suave: #556275;
  --app-tinta-apagada: #5f6b7f;   /* 5,2:1 sobre la tarjeta, no sobre blanco:
                                     el panel no es blanco puro y medir contra
                                     blanco regalaba medio punto. */
  /* Estaban documentados en DESIGN.md desde el principio pero sin declarar,
     así que el primero que los usó se encontró un `fill` inválido: en SVG eso
     no se cae, pinta NEGRO, y las barras de comparación salían como manchas. */
  --app-vidrio: #ffffff;
  --app-pozo: var(--azul-film);   /* el pozo del icono, azulito */

  color: var(--app-tinta);
  background:
    linear-gradient(180deg, var(--app-canvas-alto) 0%, var(--app-canvas-bajo) 72%);
}

/* El inicio ya no necesita orbe propio: el ambiente lo trae el marco */
.marco.en-app .pantalla-inicio { background: none; }

.marco.en-app .cinta-aviso {
  color: var(--app-tinta-apagada);
  border-bottom-color: var(--app-regla-suave);
}

/* Superficies */
.marco.en-app .tarjeta-vidrio,
.marco.en-app .tarjeta {
  background: var(--superficie);
  border-color: var(--app-regla-suave);
  box-shadow: var(--alzado);
}

/* Separadores y pozos de icono */
.marco.en-app .ficha-fila,
.marco.en-app .fila,
.marco.en-app .fila-boton { border-bottom-color: var(--app-regla-suave); }
.marco.en-app .fila:first-child { border-top-color: var(--app-regla); }
/* El carril de la linea de tiempo y su nodo, en filete teal */
.marco.en-app .crono-carril::before { background: var(--app-regla); }
.marco.en-app .crono-nodo, .marco.en-app .crono-precio { border-color: var(--app-regla); }
.marco.en-app .cronologia { border-top-color: var(--app-regla-suave); }
.marco.en-app .fila-icono {
  background: var(--film-2);
  border-color: var(--app-regla);
}
.marco.en-app .fila-boton:hover { background: var(--film-1); }

/* Tinta sobre superficie teñida: derivada del propio tono, nunca gris */
.marco.en-app .subtexto,
.marco.en-app .fila-sub,
.marco.en-app .etiqueta-campo,
.marco.en-app .fila-extra,
.marco.en-app .crono-cuerpo p { color: var(--app-tinta-suave); }
.marco.en-app .crono-fecha,
.marco.en-app .vacio { color: var(--app-tinta-apagada); }
.marco.en-app .fila.apagada .fila-cuerpo strong,
.marco.en-app .fila.apagada .fila-sub { color: var(--app-tinta-apagada); }
.marco.en-app .seccion h3,
.marco.en-app .cabecera-app h2,
.marco.en-app .ficha-valor,
.marco.en-app .crono-cuerpo strong,
.marco.en-app .fila-cuerpo strong { color: var(--app-tinta); }

/* Controles */
.marco.en-app .boton-icono {
  border-color: var(--app-regla);
  background: var(--film-2);
}
.marco.en-app .boton-icono:hover { background: var(--film-3); }

/* La aspa de quitar un coche va aquí y no arriba porque el garaje se abre
   dentro de la app, y ahí .marco.en-app repinta todos los botones de icono. */
.quitar-vehiculo, .marco.en-app .quitar-vehiculo {
  border-color: transparent;
  background: none;
  color: var(--tinta-apagada);
}
/* El lápiz de editar comparte tratamiento con la aspa: acciones apagadas que
   no compiten con la fila, que es lo que se toca para cambiar de coche. */
.editar-vehiculo, .marco.en-app .editar-vehiculo {
  border-color: transparent;
  background: none;
  color: var(--tinta-apagada);
}
.editar-vehiculo:hover, .marco.en-app .editar-vehiculo:hover {
  border-color: var(--tinta);
  background: none;
  color: var(--tinta);
}
.fila-vehiculo .editar-vehiculo svg { width: 16px; height: 16px; }

.quitar-vehiculo:hover, .marco.en-app .quitar-vehiculo:hover {
  border-color: var(--rojo);
  background: none;
  color: var(--rojo);
}
.marco.en-app .boton-icono.destacado { background: var(--azul); }
.marco.en-app .boton-secundario { border-color: var(--app-regla); }
.marco.en-app .conmutador { border-color: var(--app-regla); background: var(--film-1); }
.marco.en-app .conmutador button + button { border-left-color: var(--app-regla); }
.marco.en-app .conmutador button.activo { background: var(--film-2); color: var(--app-tinta); }
.marco.en-app .campo input,
.marco.en-app .campo select {
  background: var(--film-1);
  border-color: var(--app-regla);
  color: var(--app-tinta);
}
.marco.en-app .campo > span { color: var(--app-tinta-suave); }
.marco.en-app select option {
  background: var(--app-superficie);
  color: var(--app-tinta);
}
.marco.en-app select option:disabled { color: var(--app-tinta-apagada); }
.marco.en-app .vacio { border-color: var(--app-regla); }
.marco.en-app .barra { background: var(--film-3); }

/* Capas flotantes: nav, hoja del mapa y modales */
.marco.en-app .nav-inferior { background: var(--nav-fondo); border-top-color: var(--regla-suave); }
.marco.en-app .modal {
  background: var(--app-superficie);
  border-top-color: var(--app-regla-suave);
  box-shadow: var(--alzado-alto);
}
.marco.en-app .velo { background: var(--velo); }

/* El mapa acompaña al ambiente */
.marco.en-app .mapa { background: var(--noche); }
.marco.en-app .filtros-mapa button {
  background: var(--superficie);
  border-color: var(--regla);
  color: var(--tinta-suave);
}
.marco.en-app .filtros-mapa button.activo {
  /* Aquí se cazó un 1,15:1: al voltear la paleta sobrevivió el fondo oscuro
     pero no la tinta, y en una captura pequeña el chip solo parecía "oscuro".
     Ahora es la pastilla azul de acción, igual que en el mapa de fuera. */
  background: var(--azul);
  color: #ffffff;
  border-color: var(--azul);
}

/* Diagnosis OBD */
.marco.en-app .obd-conector { border-color: var(--app-regla); }
.marco.en-app .escaner-anillo { border-color: var(--app-regla); }
.marco.en-app .escaner p { color: var(--app-tinta-suave); }

/* Aviso de verificación de correo en Perfil */
.aviso-verificacion .estado-linea { margin-bottom: 6px; }
.aviso-verificacion .subtexto { margin-bottom: 0; }
.aviso-verificacion .boton-bloque { margin-top: 14px; margin-bottom: 0; }

/* ============================================================
   MAPA REAL (Leaflet + tiles de CARTO) con buscador y filtros
   ============================================================ */
.mapa-cabecera {
  position: relative;
  z-index: 500; /* por encima del lienzo de Leaflet */
  padding: 14px 16px 8px;
  background: linear-gradient(180deg, var(--velo-mapa-alto), var(--velo-mapa-bajo));
  border-bottom: 1px solid var(--app-regla, var(--regla));
  backdrop-filter: blur(10px);
}
.buscador { position: relative; margin-bottom: 10px; }
.buscador-icono {
  position: absolute; left: 14px; top: 50%; translate: 0 -50%;
  width: 17px; height: 17px; color: var(--app-tinta-apagada, var(--tinta-apagada));
  pointer-events: none;
}
.buscador input {
  width: 100%;
  background: var(--film-2);
  border: 1px solid var(--app-regla, var(--regla));
  border-radius: 999px;
  color: var(--app-tinta, var(--tinta));
  font: inherit;
  font-size: .92rem;
  /* 11 px de relleno dejaban el campo en 42: dos cortos de los 44 táctiles */
  padding: 12px 16px 12px 40px;
}
.buscador input:focus { outline: none; border-color: var(--tinta); }
.buscador input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.filtros-mapa { position: static; padding: 0 0 8px; }
.filtros-servicio button { font-size: .8rem; padding: 6px 12px; }
.barra-orden { display: flex; align-items: center; gap: 10px; }
.barra-orden .conmutador { flex: 1; margin-bottom: 0; }
.barra-orden .conmutador button { font-size: .78rem; padding: 9px 4px; }

/* position + z-index encierran las capas internas de Leaflet (que van del 200
   al 800) en su propio contexto. Sin esto, los pines y las teselas se pintan
   por encima de la ficha y de la barra de navegación. */
.mapa-lienzo { position: relative; z-index: 0; flex: 1; min-height: 260px; background: var(--noche); }
.lista-lugares { flex: 1; overflow-y: auto; padding: 6px 16px 96px; }
.lista-lugares .fila-boton:last-child { border-bottom: 0; }

/* Pines propios sobre el mapa */
.pin-punto {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50% 50% 50% 8px;
  rotate: -45deg;
  background: var(--superficie);
  box-shadow: var(--alzado);
  border: 2px solid var(--teal-tinta);
  box-shadow: var(--alzado-accion);
}
.pin-punto svg { width: 17px; height: 17px; rotate: 45deg; color: var(--teal-tinta); }
.pin-punto.es-taller { border-color: var(--naranja-tinta); }
.pin-punto.es-taller svg { color: var(--naranja-tinta); }
.pin-punto.es-top { box-shadow: 0 0 0 4px var(--naranja-film), var(--alzado-accion); }

/* Controles y créditos de Leaflet, con la ropa de la app */
/* Envoltorio del pin: aquí escribe MapLibre su transform, y la gota rota
   dentro. Separados no se pisan. */
.pin-envoltorio { display: block; cursor: pointer; }

/* Dónde estás: punto teal con halo, el único anillo de color del diseño */
.pin-yo {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--teal-tinta); border: 2px solid var(--superficie);
  box-shadow: 0 0 0 6px var(--azul-halo);
}

.maplibregl-canvas { outline: none; }
.maplibregl-map { font-family: var(--doc); background: var(--noche); }
/* La atribución es obligatoria pero no tiene que comerse el mapa: se queda
   plegada en su botón y se despliega al tocarla, que es como viene de serie.
   Lo único que cambia son los colores. */
.maplibregl-ctrl-attrib {
  background: var(--superficie) !important;
  color: var(--tinta-suave) !important;
  font-size: .75rem;
  border-radius: 999px;
}
.maplibregl-ctrl-attrib a { color: var(--tinta) !important; }
.maplibregl-ctrl-attrib-button {
  background-color: var(--superficie) !important;
  /* Sin invert: ese filtro estaba para que el icono negro de MapLibre se
     viera sobre fondo oscuro. Ahora el fondo es claro y el icono ya es negro. */
  filter: opacity(.6);
}

/* Zoom: dos píldoras del mismo lenguaje que los botones de la app */
.maplibregl-ctrl-group {
  background: none !important; border: 0 !important; box-shadow: none !important;
}
.maplibregl-ctrl-group button {
  /* Con !important: MapLibre trae sus propios 29 px y gana si no se fuerza */
  width: 44px !important; height: 44px !important;
  background: var(--superficie) !important;
  border: 1px solid var(--app-regla, var(--regla)) !important;
  border-radius: 12px !important;
}
.maplibregl-ctrl-group button + button { margin-top: 6px; }
.maplibregl-ctrl-group button:hover { background: var(--film-3) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); opacity: .8; }

/* Se apartan de la barra de navegación, del aviso de sitios y de la ficha */
.maplibregl-ctrl-bottom-right { margin: 0 8px 150px 0; }
.maplibregl-ctrl-bottom-left { margin: 0 0 66px 8px; }


.acciones-hoja { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.boton-bloque { display: block; width: 100%; }

/* Las tiles de OpenStreetMap son claras: se invierten para el tema nocturno */
/* Ya no hace falta invertir nada: el estilo del mapa se escribe en
   assets/mapa-estilo.js con los colores de la app. */

/* En escritorio la barra vuelve dentro del marco simulado */
@media (min-width: 500px) {
  .nav-inferior {
    position: absolute;
    left: 0; right: 0; translate: none;
    width: auto; max-width: none;
  }
}

/* Estado del lienzo del mapa: cargando o sin poder cargar */
.mapa-aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 30px 24px;
  text-align: center;
  color: var(--app-tinta-suave, var(--tinta-suave));
}
.mapa-aviso p { margin: 0; font-size: .92rem; }
.mapa-aviso .boton { min-width: 180px; }

/* El sello es además el botón de "buscar actualizaciones": en un móvil sin
   forma cómoda de vaciar la caché, tener dónde tocar salva la tarde. */
/* Valor de ficha que además se puede corregir: lo dice el subrayado punteado.
   Se usa en el AdBlue, que es una deducción nuestra y el usuario puede saberlo
   mejor que nosotros. */
/* Recordatorio permanente de que no hay cuenta detrás. No es decorativo:
   si el usuario cambia de móvil o borra los datos del navegador, pierde el
   diario, y eso hay que decirlo antes, no después. */
.cinta-invitado {
  position: relative; z-index: 22; flex: none;
  margin-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  display: block; width: 100%; border: 0;
  min-height: 44px; padding: 7px 16px;
  background: var(--naranja-film);
  border-top: 1px solid var(--naranja-regla);
  color: var(--naranja-tinta);
  font-family: inherit; font-size: .75rem; font-weight: 500; text-align: center;
  cursor: pointer;
}
.cinta-invitado[hidden] { display: none !important; }
/* Con la cinta puesta, las pantallas con nav necesitan 44 px más abajo o la
   última fila queda debajo de ella. La hoja del mapa, lo mismo. */
.marco.con-cinta .pantalla.con-nav { padding-bottom: 150px; }
.marco.con-cinta .hoja { padding-bottom: 60px; }

/* La urgencia, en palabras. El color acompaña pero no es lo único que la
   distingue: quien no lo perciba lee "Urgente" igual. */
/* Sustituyen a los style="" en línea, que la CSP bloqueaba: los márgenes
   no se aplicaban y nadie se enteraba. */
.pegada { margin: 2px 0 0; }
.boton.separado { margin-top: 12px; }

/* El buscador del alta vive en un panel, no en un formulario, así que no le
   llegaban los estilos de campo. */
.panel-auth .campo-con-boton input {
  flex: 1; min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--regla);
  border-radius: 14px; padding: 13px 14px;
  color: var(--tinta); font: inherit; font-size: .96rem;
}
.panel-auth .campo-con-boton input::placeholder { color: var(--tinta-apagada); }
.panel-auth .campo-con-boton input:focus { outline: none; border-color: var(--tinta); }

/* ---------- Ficha del taller ---------- */

/* Servicio y precio en la misma línea: el precio es lo que decide, así que
   se escribe ahí mismo sin abrir nada. */
.oferta-fila .fila-cuerpo { flex: 1; min-width: 0; }
.oferta-fila .fila-sub { display: block; font-size: .82rem; color: var(--tinta-suave); margin-top: 2px; }
.placa-vista { display: block; max-width: 100%; max-height: 240px; border-radius: 12px; margin: 8px 0; object-fit: cover; }
.verificacion-pendiente { margin-bottom: 12px; }
.verificacion.verificada strong { color: var(--teal-tinta, #146170); }
.verificacion.verificada strong::before { content: "✓ "; }
.estado-ficha { border-left: 4px solid var(--azul); }
.estado-ficha.bien { border-left-color: var(--teal-tinta, #146170); }
.estado-ficha.atencion { border-left-color: var(--naranja); }
.estado-ficha strong { display: block; margin-bottom: 4px; }
/* El alta guiada del taller: una pregunta por pantalla, botones grandes */
.asistente-progreso { font-size: 12px; color: var(--tinta-suave); margin: 0 0 4px; letter-spacing: .02em; text-transform: uppercase; }
.asistente-botones { display: flex; gap: 10px; margin-top: 16px; }
.asistente-botones .boton { flex: 1; }
.chips-elegibles { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.chip-elegible { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--regla); cursor: pointer; font-size: 14px; user-select: none; }
.chip-elegible input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-elegible:has(input:checked) { background: var(--azul-film); border-color: var(--azul); color: var(--azul-tinta); font-weight: 600; }
.chip-elegible:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.chip-elegible.ancho { width: 100%; border-radius: 14px; margin-bottom: 8px; }
.filas-tiempo { display: flex; flex-direction: column; gap: 8px; }
.fila-tiempo { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--film-2); }
.fila-tiempo .nombre-servicio { font-weight: 600; }
.fila-tiempo select, .fila-tiempo input { min-height: 44px; }
@media (min-width: 560px) { .fila-tiempo { grid-template-columns: 1.4fr 1fr .8fr; align-items: center; } }
.opciones-grandes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.opcion-grande { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--regla); cursor: pointer; }
.opcion-grande input { width: 20px; height: 20px; margin: 0; accent-color: var(--azul); }
.opcion-grande span { display: flex; flex-direction: column; }
.opcion-grande small { color: var(--tinta-suave); }
.opcion-grande:has(input:checked) { border-color: var(--azul); background: var(--azul-film); }
.tiempo-servicio { min-height: 44px; width: 118px; flex: none; }
.chips-publicados span { background: var(--azul-film); }

.fila-servicio {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--app-regla-suave, var(--regla-suave));
}
.nombre-servicio { flex: 1; min-width: 0; font-size: .9rem; }
.precio-servicio {
  width: 92px; flex: none;
  background: var(--superficie);
  border: 1px solid var(--app-regla, var(--regla));
  border-radius: 14px; padding: 9px 10px;  /* rounded.input */
  color: inherit; font: inherit; font-size: .86rem; text-align: right;
}
.precio-servicio:focus { outline: none; border-color: var(--tinta); }

.fila-horario {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
}
.dia-horario {
  display: flex; align-items: center; gap: 7px;
  width: 118px; flex: none; min-height: 44px;
  font-size: .86rem; cursor: pointer;
}
.dia-horario input { width: 18px; height: 18px; accent-color: var(--tinta); }
.tramo-horario {
  flex: 1; min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--app-regla, var(--regla));
  border-radius: 14px; padding: 9px 10px;  /* rounded.input */
  color: inherit; font: inherit; font-size: .82rem;
}
.tramo-horario:focus { outline: none; border-color: var(--tinta); }
.tramo-horario:disabled, .tramo-horario[value=""] { opacity: .5; }
/* Acciones dentro de una cita: anular, o pasarla al diario cuando ya ha
   pasado la fecha. Van debajo del texto, no en la fila, para que no compitan
   con la etiqueta de estado. */
.acciones-cita { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.acciones-cita .boton { padding: 8px 14px; font-size: .82rem; min-height: 40px; }
.acciones-cita .enlace-suave { font-size: .82rem; }
.fila-cita { align-items: flex-start; }
.marca-urgencia {
  display: inline-block; margin-right: 7px;
  padding: 1px 7px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid currentColor;
}
.marca-urgencia.alta { color: var(--rojo); }
.marca-urgencia.media { color: var(--naranja-tinta); }

.valor-editable {
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  color: inherit; cursor: pointer;
  border-bottom: 1px dashed var(--app-regla, var(--regla));
}
.valor-editable:hover { color: var(--tinta); }
.valor-editable.dudoso { color: var(--naranja-tinta); }
.sello-version {
  display: block; width: 100%;
  background: none; border: 0; padding: 8px;
  color: var(--app-tinta-apagada, var(--tinta-apagada));
  font-family: inherit; font-size: .75rem; text-align: center;
  margin: 8px 0 0; cursor: pointer;
}
.sello-version:hover { color: var(--tinta); }

/* Aviso de versión nueva cuando recargar sin avisar sería una faena */
.aviso-version {
  /* Por encima del velo del modal (30): el aviso sale justo cuando hay uno
     abierto, y si no se puede tocar no sirve de nada */
  position: absolute; z-index: 40; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-top, 0px));
  background: var(--azul); color: #ffffff;
  border: 0; width: 100%; min-height: 44px;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer;
  animation: bajar .24s cubic-bezier(.2, .8, .3, 1) both;
}
.aviso-version svg { width: 16px; height: 16px; flex: none; }
.aviso-version[hidden] { display: none !important; }
@keyframes bajar { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .aviso-version { animation: none; } }

/* ============================================================
   PANEL DEL INICIO — las cuatro cifras y la gráfica

   De dónde sale la forma: una referencia que trajo José Manuel (panel de
   móvil con rejilla 2x2 de cifras, chip de variación y barras agrupadas
   debajo). Se copia la ESTRUCTURA, no el ambiente: aquella era clara y de
   verde salvia, y aquí la cabina sigue siendo teal de noche.

   Y una traducción que importa: en la referencia cada pozo de icono llevaba
   un color distinto por categoría. Aquí NO, porque en esta app el color
   legisla estados (teal en regla, naranja atención, rojo urgente). Pintar el
   pozo del gasto de morado le quitaría el significado al naranja. El color de
   estado vive en el chip, que es el único que tiene algo que decir.
   ============================================================ */

.dictamen-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
  margin: 2px 0 22px;
  font-size: .95rem;
}
.dictamen-linea strong { font-weight: 600; }
/* El detalle baja a su propia línea en cuanto no cabe, y así el veredicto
   ("Atiéndelo pronto") nunca se parte por la mitad. */
.dictamen-linea .subtexto { flex-basis: 100%; padding-left: 19px; }

.fila-periodo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.selector-periodo {
  appearance: none;
  -webkit-appearance: none;
  background: var(--app-vidrio);
  border: 1px solid var(--regla);
  border-radius: 999px;
  color: var(--tinta);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  /* Hueco a la derecha para el galón dibujado con el fondo: un select nativo
     en Android pinta su propia flecha y se verían dos. */
  padding: 11px 34px 11px 15px;
  min-height: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinta) 50%),
    linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.selector-periodo:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---------- Las cuatro cifras ---------- */
.rejilla-metricas {
  display: grid;
  /* minmax(0,...) y no 1fr a secas: un `1fr` es minmax(AUTO, 1fr), así que un
     chip largo como "El año que viene" ensanchaba su columna y las dos
     tarjetas dejaban de medir lo mismo. Se ve enseguida en una medida y casi
     nada en una captura. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

.metrica {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  width: 100%;
  padding: 14px;
  background: var(--superficie);
  border: 1px solid var(--regla-suave);
  border-radius: 20px;
  box-shadow: var(--alzado);
  color: var(--tinta);
  font: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.metrica:active { transform: scale(.985); }
.metrica:hover { border-color: var(--app-regla); }
.metrica:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.metrica-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.metrica-pozo {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--app-pozo);
  border-radius: 12px;
  color: var(--azul-tinta);
}
.metrica-pozo svg { width: 17px; height: 17px; }

/* El chip de variación. En la referencia siempre era un porcentaje; aquí dice
   un porcentaje solo cuando hay dos periodos que comparar, y si no dice el
   estado con palabras. Un "+12 %" calculado sobre un mes con una sola factura
   no informa: engaña con aire de dato. */
.chip-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--app-pozo);
  color: var(--tinta);
}
.chip-delta.sube { background: var(--rojo-film); color: var(--rojo-tinta); }
.chip-delta.baja { background: var(--film-2); color: var(--tinta); }
.chip-delta.atencion { background: var(--naranja-film); color: var(--naranja-tinta); }
.chip-delta.urgente { background: var(--rojo-film); color: var(--rojo-tinta); }

.metrica-etiqueta {
  display: block;
  font-size: .8rem;
  color: var(--tinta-suave);
  line-height: 1.3;
}
.metrica-valor {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.metrica-valor .unidad { font-size: .9rem; font-weight: 600; color: var(--tinta-suave); margin-left: 3px; }

/* ---------- La gráfica ---------- */
.panel-grafica { padding: 16px; margin-top: 10px; }

.grafica-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.grafica-cabeza h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.grafica-cabeza .subtexto { margin: 3px 0 0; font-size: .8rem; }

/* Los rótulos de los ejes son HTML, NO texto dentro del SVG. Un viewBox
   escala con el ancho del móvil, así que un `font-size` en unidades de
   viewBox mide distinto en cada teléfono: a 320 px de pantalla esas
   etiquetas caían a ~9,7 px reales y rompían el suelo de 12 px que esta app
   tiene comprometido. En HTML miden lo que dicen medir. */
.grafica-malla {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 0 8px;
  align-items: stretch;
}
/* overflow visible: las líneas del tope y del cero van justo en el borde del
   viewBox, y la mitad del trazo quedaría recortada. */
.grafica-lienzo { display: block; width: 100%; height: auto; overflow: visible; }
/* El globo se ancla AQUÍ y no a la envoltura: la malla tiene la columna de
   rótulos a la izquierda, y un porcentaje medido desde la envoltura dejaría
   el globo apuntando a la barra de al lado. */
.grafica-plot { position: relative; grid-column: 2; }

.grafica-ejey {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  /* Media línea arriba y abajo: así el número queda centrado EN su marca y no
     colgando de ella. */
  margin: -.55em 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--app-tinta-apagada);
  font-variant-numeric: tabular-nums;
}
.grafica-ejex {
  grid-column: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-top: 7px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--app-tinta-apagada);
}
.grafica-ejex span { text-align: center; }

.grafica-rejilla { stroke: var(--app-regla-suave); stroke-width: 1; }
/* La línea del cero va discontinua y algo más marcada: separa "no gastó nada"
   de "no hay dato", que en una barra a cero se confunden. */
.grafica-base { stroke: var(--app-regla); stroke-width: 1; stroke-dasharray: 3 4; }
.grafica-barra { fill: #7aa4cf; transition: fill .18s ease; }
.grafica-barra.previo { fill: rgba(31, 45, 68, .14); }
.grafica-grupo.activo .grafica-barra { fill: var(--azul); }
.grafica-toque { fill: transparent; cursor: pointer; }
.grafica-grupo:focus-visible .grafica-toque { fill: var(--app-pozo); }

.grafica-globo {
  position: absolute;
  transform: translate(-50%, -100%);
  max-width: 70%;
  background: var(--app-superficie);
  border: 1px solid var(--app-regla);
  border-radius: 12px;
  padding: 7px 11px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--alzado-alto);
}
/* Barra muy alta: no queda hueco arriba y el globo se comería el titular del
   panel, así que baja a apoyarse dentro de la propia barra. */
.grafica-globo.abajo { transform: translate(-50%, 6px); }
.grafica-globo .cuando { display: block; font-size: .75rem; color: var(--app-tinta-suave); }
.grafica-globo .cuanto { display: block; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.grafica-envoltura { position: relative; }

.grafica-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}
.grafica-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafica-leyenda i { width: 9px; height: 9px; border-radius: 999px; background: #7aa4cf; }
.grafica-leyenda i.previo { background: rgba(31, 45, 68, .14); }

/* Etiqueta que existe para el lector de pantalla y no para el ojo: un select
   sin nombre se anuncia como "cuadro combinado" y nada más. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pantallas estrechas de verdad (SE, Mini): dos columnas de cifra aún caben,
   pero el número grande y su unidad no. Baja el número, no la rejilla: una
   sola columna dejaría el panel con el doble de alto que la referencia. */
@media (max-width: 359px) {
  .metrica { padding: 12px; }
  .metrica-valor { font-size: 1.15rem; }
}

.obd-callejon {
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--regla);
  border-radius: 16px;
  box-shadow: var(--alzado);
  padding: 14px 16px;
  margin-top: 16px;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}
.obd-callejon strong { color: var(--tinta); }
.obd-callejon > strong { display: block; font-size: .9rem; margin-bottom: 6px; }
.obd-callejon p { margin: 0 0 8px; }
.obd-callejon ul { margin: 0; padding-left: 18px; }
.obd-callejon li { margin-bottom: 6px; }
.obd-callejon a { color: var(--azul-tinta); font-weight: 600; }
.obd-callejon[hidden] { display: none !important; }

.aviso-ejemplo {
  background: var(--naranja-film);
  border: 1px solid var(--naranja-regla);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 4px 0 8px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--tinta);
}
.aviso-ejemplo strong { display: block; color: var(--naranja-tinta); margin-bottom: 2px; }
.aviso-ejemplo[hidden] { display: none !important; }

/* El enlace al ejemplo, debajo del botón de conectar: es una salida lateral,
   no una alternativa del mismo peso. */
#btnObdEjemplo { margin-top: 10px; }

/* ============================================================
   IMPRESIÓN — el expediente en papel

   Manda el documento, no la app: fuera navegación, cintas y botones, y tinta
   oscura sobre papel blanco. Es la forma en que el dueño se lleva el historial
   a un comprador (el navegador ofrece "Guardar como PDF") sin que la app
   mande nada a ningún sitio.
   ============================================================ */
@media print {
  /* Nada de navegación en papel: los galones y los botones de acción no se
     pueden tocar en una hoja, y el aviso del hueco sin su botón sigue diciendo
     lo que tiene que decir. */
  .nav-inferior, .cinta-invitado, #cintaAviso, .cabecera-botones,
  .velo, .toast, #avisoVersion, .aviso-hueco button,
  .crono-ver, .crono-carril { display: none !important; }
  html, body, .marco, .marco.en-app {
    background: var(--papel) !important;
    color: var(--tinta-papel) !important;
  }
  .marco { max-width: none; box-shadow: none; border: 0; }
  .pantalla { padding: 0 !important; }
  .tarjeta, .tarjeta-vidrio {
    background: none !important;
    border-color: var(--regla-papel) !important;
  }
  /* Que una intervención no se parta entre dos hojas */
  .crono-hito, .fila { break-inside: avoid; }
  h2, h3, strong, .crono-cuerpo strong, .fila-extra strong { color: var(--tinta-papel) !important; }
  /* Toda la tinta secundaria, incluida la del cuerpo de cada hito y los
     importes del desglose: en pantalla son teal derivado y en papel saldrían
     en un celeste pálido ilegible. */
  .subtexto, .crono-fecha, .fila-cuerpo,
  .crono-cuerpo p, .crono-desglose li, .crono-desglose li span,
  .aviso-hueco .subtexto { color: var(--tinta-papel-suave) !important; }
  .aviso-hueco { border-color: var(--regla-papel-fuerte) !important; background: none !important; }
  .aviso-hueco strong { color: var(--tinta-papel) !important; }
  .crono-desglose { border-left-color: var(--regla-papel) !important; }
  /* El hito es un grid de 30px + 1fr. Al ocultar el carril, el cuerpo caía en
     la columna de 30 px y el texto salía a una palabra por línea. Con el
     carril fuera solo hay una columna. */
  .crono-hito { grid-template-columns: 1fr !important; padding-bottom: 16px; }
  .crono-precio {
    border-color: var(--regla-papel-fuerte) !important;
    color: var(--tinta-papel) !important;
  }
}

/* Skip-link: invisible hasta que recibe el foco con el teclado. */
.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--azul, #2b6cb0);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; }


/* ============================================================
   EL PANEL DEL TALLER EN UN ORDENADOR (18/09/2026)

   El taller trabaja en el PC, y en el PC el panel es UNA PÁGINA NORMAL: sin
   marco de móvil, sin tarjeta centrada de 430 px flotando en una pantalla de
   1.900. A partir de 900 px el marco se disuelve (ancho completo, sin borde
   ni sombra, scroll del documento), la cabecera ocupa la fila de arriba, las
   pestañas son una barra de navegación subrayada, las citas van en columnas,
   las cifras en tarjetas y la ficha en una columna de formulario cómoda.
   Por debajo de 900 px (el taller mirándolo desde el móvil) sigue el marco.
   ============================================================ */
@media (min-width: 900px) {
  body:has(.marco.modo-taller) { padding: 0; background: var(--noche); }
  .marco.modo-taller {
    max-width: none;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: var(--noche);
  }
  .marco.modo-taller .cinta-aviso { position: sticky; top: 0; background: var(--noche-alta); }
  .marco.modo-taller .pantalla {
    flex: none;
    min-height: 0;
    overflow: visible;
    /* Una columna de contenido de 1.360 px como mucho, alineada a la
       izquierda de la página: en un monitor grande el texto no corre de
       lado a lado, pero el fondo sí llena la pantalla. */
    padding: 28px max(clamp(24px, 5vw, 72px), calc((100vw - 1360px) / 2)) 64px;
    animation: none;
  }
  /* El acceso del taller: un panel centrado en una página limpia */
  .marco.modo-taller .pantalla-auth > * { max-width: 520px; margin-left: auto; margin-right: auto; }
  .marco.modo-taller .pantalla-auth { padding-top: 72px; background: var(--noche); min-height: 100dvh; }
  .marco.modo-taller .pantalla-auth .cabecera-simple { min-height: 0; }
  .marco.modo-taller .titulo-auth { font-size: 2rem; text-align: center; }
  .marco.modo-taller .pantalla-auth .subtexto { text-align: center; }
  .marco.modo-taller .panel-auth { padding: 28px; }

  /* Cabecera de página */
  .marco.modo-taller .cabecera-taller { align-items: center; margin-bottom: 8px; }
  .marco.modo-taller .cabecera-taller h2 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
  .marco.modo-taller .cabecera-taller .subtexto { font-size: .95rem; }

  /* La página del panel: lateral fijo + principal */
  .marco.modo-taller .panel-taller { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 40px; align-items: start; }
  .marco.modo-taller .panel-lateral { position: sticky; top: 52px; display: flex; flex-direction: column; gap: 18px; }
  .marco.modo-taller .panel-marca { display: block; }
  .marco.modo-taller .panel-nav { flex-direction: column; }
  .marco.modo-taller .panel-nav button { width: 100%; padding: 11px 14px; font-size: .95rem; }
  .marco.modo-taller .panel-pie { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
  .marco.modo-taller .rejilla-citas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .marco.modo-taller .resumen-bloques { grid-template-columns: 1fr 1fr; }
  .marco.modo-taller .resumen-cifras { grid-template-columns: repeat(4, 1fr); }

  /* Citas en columnas */
  .marco.modo-taller .vacio { padding: 56px 20px; font-size: 1rem; }
  .marco.modo-taller .vacio svg { width: 44px; height: 44px; }

  /* Datos: tres cifras en tarjetas y la visibilidad al lado */
  .marco.modo-taller #tallerStats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .marco.modo-taller #tallerStats .panel-titulo { grid-column: 1 / -1; }
  .marco.modo-taller #tallerStats dl.ficha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .marco.modo-taller #tallerStats .ficha-fila {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 20px;
    background: var(--superficie);
    border: 0; border-radius: 18px;
    box-shadow: var(--alzado, 0 4px 14px rgba(26, 39, 64, .08));
  }
  .marco.modo-taller #tallerStats .ficha-valor { font-size: 1.9rem; font-weight: 700; text-align: left; letter-spacing: -.02em; }
  .marco.modo-taller #tallerStats .tarjeta-separada { margin-top: 0; }

  /* La ficha: una columna de formulario cómoda, no una tira de móvil */
  .marco.modo-taller .pantalla[data-pantalla="tallerFicha"] > * { max-width: 760px; }
  .marco.modo-taller .pantalla[data-pantalla="tallerFicha"] > .cabecera-app { max-width: none; }
  .marco.modo-taller .fila-servicio { padding: 12px 0; }
  .marco.modo-taller .precio-servicio { width: 120px; }

  /* El modal se centra en la ventana, no en la página */
  .marco.modo-taller .velo { position: fixed; align-items: center; justify-content: center; }
  .marco.modo-taller .modal { width: min(600px, 92%); border-radius: 22px; border-top: 0; max-height: 90vh; }
  .marco.modo-taller .toast { position: fixed; left: 50%; right: auto; transform: translateX(-50%); bottom: 32px; width: min(560px, 90%); }
}
/* Entre 760 y 900 px (una tableta): el marco sigue pero las citas ya van en dos columnas */
@media (min-width: 760px) and (max-width: 899px) {
  .marco.modo-taller { max-width: 900px; }
  .marco.modo-taller .rejilla-citas { grid-template-columns: 1fr 1fr; }
  .marco.modo-taller .velo { align-items: center; justify-content: center; }
  .marco.modo-taller .modal { width: min(560px, 92%); border-radius: 22px; border-top: 0; max-height: 90%; }
}
/* ---------- El panel del taller: piezas comunes a móvil y escritorio ---------- */
.panel-lateral { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.panel-marca { display: none; }
.panel-logo { display: block; font-weight: 800; letter-spacing: -.02em; font-size: 1.1rem; color: var(--azul-tinta); }
.panel-sub { display: block; font-size: .78rem; color: var(--tinta-suave); }
.panel-quien { display: flex; flex-direction: column; gap: 6px; }
.panel-quien strong { font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.2; }
.panel-quien .etiqueta { align-self: flex-start; }
.panel-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.panel-nav::-webkit-scrollbar { display: none; }
.panel-nav button {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 10px 14px; border: 0; border-radius: 12px; background: none;
  font-family: var(--doc); font-weight: 600; font-size: .9rem; color: var(--tinta-suave); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.panel-nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.panel-nav button:hover { color: var(--tinta); }
.panel-nav button.activo { background: var(--superficie); color: var(--azul-tinta); box-shadow: var(--alzado); }
.panel-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-titulo { margin: 0 0 18px; }
.panel-titulo h2 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.resumen-cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
.cifra-panel {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 16px 18px; border: 0; border-radius: 18px; background: var(--superficie);
  box-shadow: var(--alzado); cursor: pointer; font-family: var(--doc); color: var(--tinta);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cifra-panel:hover { transform: translateY(-1px); box-shadow: var(--alzado-alto); }
.cifra-panel.atencion { background: var(--naranja-film); }
.cifra-panel.atencion .cifra-valor { color: var(--naranja-tinta); }
.cifra-valor { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra-nombre { font-size: .85rem; color: var(--tinta-suave); }
.resumen-bloques { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.bloque-panel h3 { margin: 0 0 12px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); font-weight: 700; }
.bloque-panel .tarjeta { margin-bottom: 12px; }
.vacio-corto { padding: 26px 18px; }
.agenda { list-style: none; margin: 0; padding: 0; background: var(--superficie); border-radius: 18px; box-shadow: var(--alzado); }
.agenda li { display: flex; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--regla-suave, var(--regla)); align-items: flex-start; }
.agenda li:first-child { border-top: 0; }
.agenda-hora { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 48px; padding-top: 1px; }
.bloque-ficha { background: var(--superficie); border-radius: 18px; box-shadow: var(--alzado); padding: 18px 20px; }
.lista-estado { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.lista-estado li { padding-left: 22px; position: relative; font-size: .92rem; }
.lista-estado li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-apagada); }
.lista-estado li.bien::before { background: var(--teal-tinta); }
.lista-estado li.medio::before { background: var(--naranja); }
.lista-estado li.mal::before { background: var(--rojo-tinta); }
.filtros-citas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filtro-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--regla); background: var(--superficie);
  font-family: var(--doc); font-size: .88rem; font-weight: 600; color: var(--tinta-suave); cursor: pointer;
}
.filtro-chip.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.filtro-n { font-size: .78rem; padding: 1px 7px; border-radius: 999px; background: var(--film-2); color: var(--tinta); }
.filtro-chip.activo .filtro-n { background: rgba(255,255,255,.22); color: #fff; }
.grupo-citas { margin-bottom: 22px; }
.grupo-citas h3 { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); font-weight: 700; }
.rejilla-citas { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.rejilla-citas .tarjeta { margin: 0; }
.tarjeta-cita-taller { padding: 18px 20px; }
.cita-cabecera { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cita-fecha { margin: 0 0 4px; font-size: .82rem; font-weight: 700; color: var(--azul-tinta); letter-spacing: .02em; }
.tarjeta-cliente strong { display: block; margin-bottom: 4px; font-size: 1.05rem; }
.tarjeta-cliente a { color: var(--azul-tinta); }
.panel-titulo.con-accion { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.agenda-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.agenda-nav input[type="date"] { min-height: 44px; padding: 0 12px; border: 1px solid var(--regla); border-radius: 12px; background: var(--superficie); font-family: var(--doc); font-size: .95rem; color: var(--tinta); }
.agenda-nav .boton-icono svg { width: 18px; height: 18px; }
.slots { background: var(--superficie); border-radius: 18px; box-shadow: var(--alzado); padding: 6px 18px; }
.slot { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--regla-suave, var(--regla)); }
.slot:first-child { border-top: 0; }
.slot-hora { font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 10px; color: var(--tinta-suave); }
.slot.ocupado .slot-hora { color: var(--tinta); }
.slot-libre { width: 100%; min-height: 44px; text-align: left; padding: 0 14px; border: 1px dashed var(--regla); border-radius: 12px; background: none; font-family: var(--doc); font-size: .9rem; color: var(--tinta-apagada); cursor: pointer; }
.slot-libre:hover { border-color: var(--azul); color: var(--azul-tinta); background: var(--azul-film); }
.slot-cita { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; background: var(--film-2); margin-bottom: 6px; }
.slot-cita.confirmada { background: var(--teal-film); }
.slot-cita.solicitada { background: var(--naranja-film); }
.slot-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.slot-acciones .enlace-suave { padding: 2px 0; min-height: 0; font-size: .82rem; }
.cifra-panel.estatica { cursor: default; }
.cifra-panel.estatica:hover { transform: none; box-shadow: var(--alzado); }
.cifra-panel.estimado { background: var(--azul-film); }
.cifra-panel.estimado .cifra-valor { color: var(--azul-tinta); }
.barras-meses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 150px; }
.barra-mes { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.barra-mes-pila { width: 100%; height: 100px; display: flex; align-items: flex-end; }
.barra-mes-relleno { width: 100%; min-height: 2px; background: var(--regla); border-radius: 6px 6px 2px 2px; transition: height .3s ease; }
.barra-mes.actual .barra-mes-relleno { background: var(--azul); }
.barra-mes-valor { font-size: .72rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; min-height: 1em; }
.barra-mes-nombre { font-size: .78rem; color: var(--tinta-suave); text-transform: capitalize; }
.lista-servicios-euros { list-style: none; margin: 0; padding: 0; }
.lista-servicios-euros li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--regla-suave, var(--regla)); }
.lista-servicios-euros li:first-child { border-top: 0; }
.lista-servicios-euros strong { font-variant-numeric: tabular-nums; }
.tarjeta-cita-taller .taller-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.tarjeta-cita-taller .taller-acciones .boton { flex: 1 1 140px; }
.respuesta-cita { margin: 8px 0 0; line-height: 1.4; }
.informe-linea { display: grid; grid-template-columns: 1fr 88px 1fr; gap: 6px; margin-bottom: 6px; }
.informe-linea input, .informe-linea select { min-width: 0; }
/* Mejoras aconsejadas */
.consejo p { margin: 6px 0 0; line-height: 1.45; }
.consejo-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.consejo-gana { color: var(--teal-tinta, #146170); font-weight: 600; }
.consejo .fila-campos { margin-top: 10px; }
.etiqueta-rendimiento { background: var(--azul-film); color: var(--azul-tinta); }
.etiqueta-consumo { background: rgba(31, 122, 140, .12); color: #146170; }
.etiqueta-duracion { background: var(--film-2); color: var(--tinta-suave); }
.etiqueta-seguridad { background: rgba(229, 72, 77, .12); color: #b5272d; }
/* La ficha técnica */
.tarjeta-ficha-tecnica { margin-top: 12px; background: var(--azul-film); }
.tarjeta-ficha-tecnica p { margin: 0 0 8px; line-height: 1.45; }
.esquema-ficha { border: 1px solid rgba(43, 108, 176, .35); background: #eaf2fb; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.esquema-titulo { font-size: 10px; letter-spacing: .12em; font-weight: 800; color: var(--azul-tinta); margin: 0 0 6px; }
.esquema-fila { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.esquema-fila code { display: inline-block; width: 38px; text-align: center; background: #fff; border-radius: 4px; font-weight: 800; font-size: 12px; padding: 2px 0; }
.esquema-fila span { flex: 1; font-size: 12px; color: var(--tinta-suave); background: rgba(255,255,255,.7); border-radius: 3px; padding: 1px 6px; }

.informe-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.foto-informe { position: relative; margin: 0; }
.foto-informe img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--film-2); }
.foto-informe figcaption { font-size: 12px; color: var(--tinta-suave); margin-top: 4px; text-align: center; }
.foto-informe .boton-icono { position: absolute; top: 6px; right: 6px; background: var(--superficie); }
.informe-tabla { width: 100%; border-collapse: collapse; margin: 8px 0; }
.informe-tabla td { padding: 6px 0; border-top: 1px solid var(--regla); }
.informe-tabla td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Cuenta y fichas del administrador (21/09/2026) ---- */
.ayuda.centrado { text-align: center; margin: 10px 0 6px; }
.ayuda a { color: var(--azul); }
.titulo-bloque { font-size: 1rem; margin: 22px 0 8px; }
.fila-lista {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--regla);
}
.fila-lista > div { min-width: 0; }
.fila-lista .enlace-peligro { width: auto; margin: 0; flex: 0 0 auto; }
#tarjetaCuentaTaller .enlace-peligro,
.fila-lista .enlace-peligro {
  background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer;
  padding: 8px 0; width: auto; justify-content: flex-start; min-height: 44px;
}