/* ==========================================================================
   base.css · Lo que comparten el panel y la web
   --------------------------------------------------------------------------
   El estilo sale de su marca: el logo (rojo #ea2d2d, gris #9aa2ab, blanco
   sobre negro) y su web (fondo #151515, letra Inter, botones redondeados).

   1. Colores y medidas (variables)
   2. Reset
   3. Texto
   4. Componentes: logo, barra de marca, matrícula, botones, estados,
      formularios, tablas
   ========================================================================== */


/* 1. COLORES Y MEDIDAS ----------------------------------------------------
   Para cambiar un color en todo el proyecto, cámbialo solo aquí. */

:root {
  /* Movimiento: las dos curvas del panel (skill animate). Entradas y salidas, --ease-out; lo que se mueve
     de un sitio a otro en pantalla, --ease-in-out. Nada de ease-in en la interfaz. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* Hover: un cambio de color que se ve decenas de veces al día, corto y con ease (no se nota que tarda) */
  --hover: 150ms ease;
  --fondo-hover: #fafbfb;   /* fila o tarjeta con el ratón encima */
  --fondo-pulsado: #eef0f2; /* fila o tarjeta al tocarla en el móvil */

  /* Marca (medidos en su logo y en su web) */
  --rojo: #ea2d2d;
  --rojo-oscuro: #c91f1f;
  --rojo-boton: #d92424;     /* el de marca, un punto más oscuro: el blanco encima se lee (5:1) */
  --rojo-suave: #fdecec;
  --gris-marca: #9aa2ab;     /* la barra inclinada del logo */
  --negro: #151515;          /* fondo de su web */
  --negro-2: #1f2023;        /* un punto más claro, para tarjetas sobre negro */
  --negro-3: #2a2b2f;

  /* Texto sobre fondo claro */
  --tinta: #17191c;
  --tinta-2: #4a5057;
  --tinta-3: #686e75;        /* antes #767c83: no llegaba a 4,5:1 sobre --fondo */

  /* Fondos y bordes del panel */
  --fondo: #f4f5f6;
  --blanco: #ffffff;
  --linea: #e3e5e8;
  --linea-fuerte: #cdd1d5;

  /* Estados del coche, por fase del recorrido. Tinta + fondo suave. */
  --llegada: #5f666d;        --llegada-fondo: #eceef0;
  --preparacion: #9a5b00;    --preparacion-fondo: #fdf1dc;
  --venta: #17794a;          --venta-fondo: #e3f4ea;
  --reservado: #1d56b8;      --reservado-fondo: #e6eefb;
  --vendido: #17191c;        --vendido-fondo: #e3e5e8;

  --aviso: #9a5b00;          --aviso-fondo: #fdf1dc;
  --peligro: #c91f1f;        --peligro-fondo: #fdecec;
  --ok: #17794a;             --ok-fondo: #e3f4ea;

  /* La franja azul de la matrícula */
  --azul-matricula: #1f3fa6;

  /* Letra: Inter, la misma de su web */
  --letra: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Espacios: úsalos en vez de inventar números sueltos */
  --espacio-xs: 4px;
  --espacio-s: 8px;
  --espacio-m: 16px;
  --espacio-l: 24px;
  --espacio-xl: 40px;

  --radio: 10px;            /* tarjetas y campos */
  --radio-pequeno: 6px;
  --radio-boton: 999px;     /* botones redondeados, como en su web */
}


/* 2. RESET ------------------------------------------------------------------ */

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

/* Lo que lleva hidden no se ve nunca, aunque su clase le ponga display (p. ej. .vacio) */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01"; /* Inter con la «a» y el «1» más claros */
}

img { max-width: 100%; display: block; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Contorno visible al moverse con el teclado (Tab). No lo quitéis. */
:focus-visible {
  outline: 2px solid var(--azul-matricula);
  outline-offset: 2px;
}
/* Sobre negro (menú y bandas de cabecera) el azul no se ve: blanco */
.menu :focus-visible,
.cabecera--portada :focus-visible,
.portada :focus-visible { outline-color: var(--blanco); }

/* Móvil: que se sienta una app y no una web (skill mobile-native) */
html {
  -webkit-tap-highlight-color: transparent; /* sin el destello gris al tocar: cada control tiene su :active */
  -webkit-text-size-adjust: 100%;           /* sin agrandar la letra al girar el móvil */
}
/* iPhone acerca la página al tocar un campo con letra de menos de 16 px, y no vuelve. Solo en táctil. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}
/* Controles: el toque se responde al momento (sin esperar al doble toque) y su texto no se selecciona */
button, a, label, summary, [role="button"], .boton {
  touch-action: manipulation;
}
button, .boton, summary, .segmentos label, .opciones label {
  user-select: none;
  -webkit-user-select: none;
}

/* Reducir movimiento: menos y más suave, no cero. Se quedan los fundidos y los cambios de color (ayudan a
   ver qué ha cambiado); se van los desplazamientos y las escalas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity, color, background-color, border-color !important; }
}


/* 3. TEXTO ----------------------------------------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.125rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; letter-spacing: 0; }

p { margin: 0 0 var(--espacio-m); }

/* Texto secundario, para aclaraciones */
.nota { color: var(--tinta-3); font-size: .875rem; }

/* Cifras (km, precios, días): todas del mismo ancho para que se alineen */
.cifra { font-variant-numeric: tabular-nums; }

/* Nombre pequeño encima de un dato o de un campo */
.rotulo { display: block; font-size: .8125rem; font-weight: 500; color: var(--tinta-3); }


/* 4. COMPONENTES ----------------------------------------------------------- */

/* --- Logo ---
   <img class="logo" src="../img/logo-proservice.webp" alt="Pro Service Rubí">
   Es su logo real: blanco y rojo, pensado para ir sobre fondo negro. */

.logo { height: 40px; width: auto; }


/* --- Barra de marca ---
   La barra gris inclinada del logo. Se usa poco, para señalar lo importante.
   <span class="barra-marca"></span> */

.barra-marca {
  display: inline-block;
  width: 28px;
  height: 6px;
  background: var(--gris-marca);
  transform: skewX(-24deg);
}
.barra-marca--roja { background: var(--rojo); }


/* --- Matrícula ---
   <span class="matricula">4821 LKM</span>
   Grande: <span class="matricula matricula--grande">4821 LKM</span> */

.matricula {
  display: inline-flex;
  align-items: stretch;
  background: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px;
  color: var(--tinta);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  padding-right: .55em;
}

/* La franja azul con la E. Sale sola, no hay que escribirla. */
.matricula::before {
  content: "E";
  display: flex;
  align-items: flex-end;
  margin-right: .55em;
  padding: 0 .35em .15em;
  background: var(--azul-matricula);
  color: var(--blanco);
  font-size: .62em;
  letter-spacing: 0;
}

.matricula--grande { font-size: 1.125rem; }


/* --- Botones ---
   <a class="boton">…</a> o <button class="boton">…</button>
   Variantes: boton--secundario, boton--oscuro, boton--pequeno */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-s);
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid var(--rojo-boton);
  border-radius: var(--radio-boton);
  background: var(--rojo-boton);
  color: var(--blanco);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s var(--ease-out);
}
.boton:active:not(:disabled) { transform: scale(.97); } /* responde al apoyar el dedo, no al soltarlo */

@media (hover: hover) and (pointer: fine) { .boton:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); } }

.boton--secundario {
  background: var(--blanco);
  border-color: var(--linea-fuerte);
  color: var(--tinta);
}
@media (hover: hover) and (pointer: fine) { .boton--secundario:hover { background: var(--fondo); border-color: var(--tinta-3); } }

.boton--oscuro { background: var(--negro); border-color: var(--negro); }
@media (hover: hover) and (pointer: fine) { .boton--oscuro:hover { background: var(--negro-3); border-color: var(--negro-3); } }

.boton--pequeno { min-height: 32px; padding: 0 14px; font-size: .8125rem; }
/* En el móvil, a la medida del dedo */
@media (max-width: 760px) {
  .boton--pequeno { min-height: 40px; }
}


/* --- Estado del coche ---
   <span class="estado estado--venta">Publicado</span>
   Fases: llegada, preparacion, venta, reservado, vendido */

.estado {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radio-pequeno);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.estado--llegada     { color: var(--llegada);     background: var(--llegada-fondo); }
.estado--preparacion { color: var(--preparacion); background: var(--preparacion-fondo); }
.estado--venta       { color: var(--venta);       background: var(--venta-fondo); }
.estado--reservado   { color: var(--reservado);   background: var(--reservado-fondo); }
.estado--vendido     { color: var(--vendido);     background: var(--vendido-fondo); }


/* --- Formularios ---
   <label class="campo">
     <span class="campo__nombre">Matrícula <em>*</em></span>
     <input name="matricula" required>
   </label> */

.campo { display: flex; flex-direction: column; gap: 6px; }

.campo__nombre { font-size: .8125rem; font-weight: 600; color: var(--tinta-2); }
.campo__nombre em { color: var(--rojo-boton); font-style: normal; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  background: var(--blanco);
  color: var(--tinta); /* siempre oscuro, aunque el bloque tenga el texto blanco */
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pequeno);
  transition: border-color .15s, box-shadow .15s;
}

.campo input::placeholder,
.campo textarea::placeholder { color: #a3a8ae; }

@media (hover: hover) and (pointer: fine) { .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-3); } }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(23, 25, 28, .08);
  outline: none;
}

.campo textarea { min-height: 88px; resize: vertical; }

.campo__ayuda { font-size: .8125rem; color: var(--tinta-3); }

/* Casilla con su texto al lado */
.casilla { display: flex; align-items: flex-start; gap: var(--espacio-s); cursor: pointer; font-size: .9375rem; }
.casilla input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rojo-boton); }


/* --- Tablas ---
   Envuelve la tabla en <div class="tabla-caja"> para que en el móvil
   se pueda desplazar de lado sin romper la página. */

.tabla-caja {
  overflow-x: auto;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }

.tabla th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--linea);
  background: #fafbfb;
  text-align: left;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--tinta-3);
  white-space: nowrap;
}

.tabla td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}

.tabla tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .tabla tbody tr:hover { background: var(--fondo-hover); } }

/* Columnas de números alineadas a la derecha */
.tabla .derecha { text-align: right; white-space: nowrap; }
.tabla td.cifra { white-space: nowrap; } /* fechas y cifras en una línea: «23 sept» no se parte */

/* --- Solo para lectores de pantalla ---
   Texto que no se ve pero que sí leen los lectores de pantalla. */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* --- Vacío ---
   Lo que se ve cuando no hay nada que enseñar. Siempre dice qué hacer. */
.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px;
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  text-align: center;
}
.vacio strong { font-size: 1rem; }
.vacio .nota { max-width: 420px; margin: 0 0 8px; }

/* Aviso breve de «guardado» (avisar() en panel.js): abajo en el centro, por encima del home del iPhone.
   Entra en 200 ms y se va más rápido (150 ms): la salida no debe hacerse esperar. */
.aviso-ok {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  max-width: min(420px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 8px;
  background: var(--negro); color: var(--blanco); font-size: .875rem; font-weight: 500;
  box-shadow: 0 8px 24px rgb(0 0 0 / .18); pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px);
}
.aviso-ok--dentro { opacity: 1; transform: translate(-50%, 0); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.aviso-ok--fuera { opacity: 0; transform: translate(-50%, 4px); transition: opacity .15s ease-out, transform .15s ease-out; }
.aviso-ok::before { content: '✓'; margin-right: 8px; color: #6fd39b; font-weight: 700; }

/* Textos sin espacios donde partir (correos, webs, números de factura largos): se parten donde haga falta
   en vez de ensanchar la página. Y dos líneas como mucho en las celdas de nombres largos (con title). */
a[href^="mailto:"], .contacto__datos, .reserva-activa dd { overflow-wrap: anywhere; }
.dos-lineas, .coche-celda .dos-lineas { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }

/* Lo que se despliega (formularios de alta, la regla de un incentivo, la fila de un cobro): entra desde un
   poco más arriba en vez de aparecer de golpe. Solo al abrir; al cerrar desaparece sin más. */
.despliega { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .despliega { opacity: 0; transform: translateY(-6px); } }

/* Mantener pulsado para confirmar (mantenerPulsado en panel.js). Encima del botón, una copia en oscuro que
   se descubre de izquierda a derecha mientras se aprieta: lineal, porque es progreso. Al soltar, vuelve en 200 ms. */
.mantener { position: relative; overflow: hidden; isolation: isolate; -webkit-touch-callout: none; }
.mantener__relleno {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--negro); color: var(--blanco); white-space: nowrap;
  clip-path: inset(0 100% 0 0); transition: clip-path 200ms var(--ease-out);
}
.mantener--pulsando .mantener__relleno { clip-path: inset(0 0 0 0); transition: clip-path var(--mantener-ms, 1.5s) linear; }

/* «Saltar al contenido»: el primer Tab de cada página. Oculto hasta que llega el foco; así no hay que pasar
   por los 15 enlaces del menú para llegar a la página. */
.saltar {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--radio-boton);
  background: var(--negro); color: var(--blanco); font-weight: 600; text-decoration: none;
  transform: translateY(-150%);
}
.saltar:focus { transform: none; }
main[tabindex="-1"]:focus { outline: none; }

/* Elegir entre cientos (buscable() en panel.js): un cuadro de búsqueda con la lista debajo.
   Sin animación al abrir: se usa decenas de veces al día y tiene que estar ya. */
.buscable { position: relative; }
.buscable input[type="search"] { width: 100%; }
.buscable__lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: min(320px, 50vh); margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain;
  list-style: none; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 10px 28px rgb(23 25 28 / .14);
}
.buscable__opcion {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 40px; padding: 9px 12px;
  border-radius: 6px; color: var(--tinta); font-size: .9375rem; cursor: pointer;
}
.buscable__opcion .nota { font-size: .8125rem; }
.buscable__opcion--activa { background: var(--fondo); }
.buscable__opcion[aria-selected="true"] { font-weight: 600; }
.buscable__opcion[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--tinta-3); }
.buscable__opcion--vacia { color: var(--tinta-2); font-style: italic; }
.buscable__grupo { padding: 10px 12px 4px; color: var(--tinta-3); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.buscable__mas { padding: 10px 12px; color: var(--tinta-3); font-size: .8125rem; }
@media (pointer: coarse), (max-width: 760px) { .buscable__opcion { min-height: 44px; } }