/* KAIN · estilos base. Estilo «Producto limpio» con blanco pálido y azul Calsonic
   (muestreado de la pintura del Nissan Skyline GT-R R32 Gr.A). El azul es solo para la marca y lo que se pulsa.
   Manrope para todo, IBM Plex Mono para datos y matrículas. Sin sombras: bordes finos.
   Todo color sale de estas variables. Tema: sigue al sistema; data-tema="claro|oscuro" lo fuerza.
   Hoja de identidad: referencia/identidad-kain.html */

:root {
  --fondo: #F4F2EC;          /* blanco pálido */
  --superficie: #FBFAF7;
  --superficie-2: #EAE7DF;
  --tinta: #10192B;          /* azul casi negro */
  --suave: #566074;
  --linea: #DCD8CE;
  --acento: #0B4AA2;         /* azul Calsonic */
  --acento-hover: #083B85;
  --acento-tinta: #F4F2EC;
  --acento-suave: #E4EAF5;
  --ok: #1F6E47;   --ok-fondo: #E2EFE6;
  --aviso: #83560A; --aviso-fondo: #F6ECD6;
  --mal: #A0282C;  --mal-fondo: #F5E1E0;
  --sombra: none;

  --f-texto: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --radio: 12px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --margen: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}

/* Paleta oscura: se repite en el bloque de sistema y en el forzado. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0A1120; --superficie: #111A2C; --superficie-2: #18233A;
    --tinta: #F4F2EC; --suave: #A7B0C2; --linea: rgba(244, 242, 236, .13);
    --acento: #7BA4EC; --acento-hover: #98B8F0; --acento-tinta: #0A1120; --acento-suave: rgba(123, 164, 236, .14);
    --ok: #74C79B; --ok-fondo: rgba(116, 199, 155, .12);
    --aviso: #E6B860; --aviso-fondo: rgba(230, 184, 96, .12);
    --mal: #F0898C; --mal-fondo: rgba(240, 137, 140, .12);
    color-scheme: dark;
  }
}
/* Noche: sacada del mismo azul en sombra. En oscuro el azul se aclara para que se lea. */
:root[data-tema="oscuro"], .zona-oscura {
  --fondo: #0A1120; --superficie: #111A2C; --superficie-2: #18233A;
  --tinta: #F4F2EC; --suave: #A7B0C2; --linea: rgba(244, 242, 236, .13);
  --acento: #7BA4EC; --acento-hover: #98B8F0; --acento-tinta: #0A1120; --acento-suave: rgba(123, 164, 236, .14);
  --ok: #74C79B; --ok-fondo: rgba(116, 199, 155, .12);
  --aviso: #E6B860; --aviso-fondo: rgba(230, 184, 96, .12);
  --mal: #F0898C; --mal-fondo: rgba(240, 137, 140, .12);
  color-scheme: dark;
}

/* La franja oscura vuelve a aplicar sus colores (si no, heredaría el texto del tema claro). */
.zona-oscura { background: var(--fondo); color: var(--tinta); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--fondo); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--tinta);
  font: 400 1rem/1.6 var(--f-texto); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.15; font-weight: 400; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
a { color: var(--acento); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--f-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 8px 12px; background: var(--acento); color: var(--acento-tinta); border-radius: 8px; }
.saltar:focus { top: 8px; }

/* Marca: logo SVG (public/img/marca.svg). La A es un coche visto de frente; el punto toma --acento. */
.marca { display: inline-flex; align-items: center; color: var(--tinta); text-decoration: none; line-height: 1; }
.marca svg { display: block; height: 20px; width: auto; aspect-ratio: 2658 / 720; }

/* Preloader: solo el logo; se desvanece con el fondo. 200 ms + 350 ms + 300 ms = 650 ms en total.
   Lo activa el script del <head> (una vez por sesión y nunca con «reducir movimiento»). */
.preloader { display: none; }
html.pl .preloader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100;
  background: var(--fondo); pointer-events: none;
  animation: pl-fuera 300ms ease-in 350ms both;
}
.preloader .marca { animation: pl-entra 200ms var(--curva) both; }
.preloader .marca svg { height: clamp(28px, 1.2rem + 3vw, 44px); }
@keyframes pl-entra { from { opacity: 0; } }
@keyframes pl-fuera { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.pl .preloader { display: none; } }

/* Botones y formularios */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 0 1.15rem; border: 1px solid transparent; border-radius: 999px;
  background: var(--acento); color: var(--acento-tinta); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .15s var(--curva);
}
.boton:hover { background: var(--acento-hover); }
.boton[disabled] { opacity: .6; cursor: progress; }
.boton.secundario { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton.secundario:hover { background: var(--superficie-2); }
.boton.ancho { width: 100%; }
.icono-boton {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--linea); background: transparent; color: var(--tinta); cursor: pointer;
}
.icono-boton:hover { background: var(--superficie-2); }
.icono-boton svg { width: 20px; height: 20px; }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 600; font-size: .95rem; }
.campo input {
  min-height: 46px; padding: 0 .9rem; border: 1px solid var(--linea); border-radius: 12px;
  background: var(--fondo); font-size: 1rem;
}
.campo input:focus-visible { outline-offset: 1px; border-color: var(--acento); }
.aviso { padding: .8rem 1rem; border-radius: 10px; font-size: .95rem; }
.aviso.ok { background: var(--ok-fondo); color: var(--ok); }
.aviso.mal { background: var(--mal-fondo); color: var(--mal); }
.aviso.dev { background: var(--aviso-fondo); color: var(--aviso); word-break: break-all; }
.aviso.dev a { color: inherit; font-weight: 700; }

/* Icono de tema: luna en claro, sol en oscuro */
.boton-tema .sol { display: none; }
:root[data-tema="oscuro"] .boton-tema .sol { display: block; }
:root[data-tema="oscuro"] .boton-tema .luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .boton-tema .sol { display: block; }
  :root:not([data-tema="claro"]) .boton-tema .luna { display: none; }
}

/* Cabecera común */
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem var(--margen); border-bottom: 1px solid var(--linea); background: var(--superficie);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
}
.cabecera .lado { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.etiqueta {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--acento-suave); color: var(--acento); letter-spacing: .02em;
}
.cabecera .nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .cabecera .nombre { display: none; } }

/* Web de clientes */
.portada { padding: clamp(3rem, 8vw, 6rem) var(--margen); background: var(--fondo); }
.portada .dentro { max-width: 1120px; margin: 0 auto; display: grid; gap: 1.25rem; }
.portada h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem); max-width: 18ch; }
.portada .etiqueta { justify-self: start; }
.portada p { max-width: 52ch; color: var(--suave); font-size: 1.1rem; }
.seccion { padding: clamp(2rem, 5vw, 4rem) var(--margen); }
.seccion .dentro { max-width: 1120px; margin: 0 auto; display: grid; gap: 1.25rem; }
.pasos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0; list-style: none; }
.pasos li { padding: 1.25rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.pasos b { display: block; margin-bottom: .25rem; }
.pie { padding: 2rem var(--margen); border-top: 1px solid var(--linea); color: var(--suave); font-size: .9rem; }
.pie .dentro { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

/* Páginas centradas (entrar, sin acceso) */
.centro { display: grid; place-items: center; padding: 2rem var(--margen); }
.tarjeta-sola {
  width: min(100%, 420px); display: grid; gap: 1.1rem; padding: clamp(1.5rem, 5vw, 2.25rem);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra);
}
.tarjeta-sola .arriba { display: flex; justify-content: space-between; align-items: center; }

/* Paneles (concesionario y admin) */
.panel { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 70px); }
.lateral { border-right: 1px solid var(--linea); padding: 1rem .75rem; background: var(--superficie); }
.lateral ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.lateral a, .lateral span {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .6rem .75rem; border-radius: 8px; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .95rem;
}
.lateral a[aria-current="page"] { background: var(--acento-suave); color: var(--acento); }
.lateral span { color: var(--suave); font-weight: 500; }
.lateral small { font-size: .72rem; font-weight: 600; color: var(--suave); }
.contenido { padding: clamp(1.25rem, 3vw, 2.25rem) var(--margen); display: grid; gap: 1.75rem; align-content: start; max-width: 1180px; width: 100%; }
.titular { display: grid; gap: .25rem; }
.cifras { display: grid; gap: .75rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .cifras { grid-template-columns: repeat(2, 1fr); } }
.cifra { padding: 1rem 1.1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.cifra b { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra span { color: var(--suave); font-size: .9rem; }
.bloque { display: grid; gap: .75rem; }
.nota { padding: 1rem 1.1rem; border: 1px dashed var(--linea); border-radius: var(--radio); color: var(--suave); }
.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { font-size: .8rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
td.der, th.der { text-align: right; }
.estado { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--superficie-2); color: var(--suave); }
.estado.publicado, .estado.activo { background: var(--ok-fondo); color: var(--ok); }
.estado.piloto, .estado.reservado { background: var(--acento-suave); color: var(--acento); }
.estado.baja, .estado.retirado { background: var(--mal-fondo); color: var(--mal); }
.fotos-faltan { color: var(--aviso); font-weight: 700; }

@media (max-width: 820px) {
  .panel { grid-template-columns: 1fr; align-content: start; }
  .lateral { border-right: 0; border-bottom: 1px solid var(--linea); padding: .5rem var(--margen); overflow-x: auto; }
  .lateral ul { display: flex; gap: .25rem; }
  .lateral a, .lateral span { white-space: nowrap; }
  .lateral small { display: none; }
}