/* =====================================================================================================================
   Capa de estética de la aplicación (portal del cliente, perfil y panel del equipo).
   Plan: docs/PLAN_ESTETICA.md. Se carga DESPUÉS de portal.css y solo toca lo que está dentro de .app-main y .app-bar:
   el sitio público y el panel del técnico de campo no cambian. Todo son TOKENS arriba: los diseñadores cambian valores,
   no pantallas. Reglas: solo transform y opacity se animan; con «reducir movimiento» no hay animación; sin estilos en
   línea (la política de seguridad los bloquea).
   ===================================================================================================================== */

:root {
  /* Esquinas: la marca usa esquinas rectas. Para abrirla (decisión del Director), cambiar solo este valor, p. ej. 6px. */
  --radio: 0;
  /* Elevación en tres niveles (la marca prefiere líneas de 1 px: la sombra es leve y solo «eleva»). */
  --elev-1: 0 1px 2px rgba(18, 24, 31, .06), 0 1px 1px rgba(18, 24, 31, .04);
  --elev-2: 0 10px 24px -14px rgba(18, 24, 31, .32), 0 2px 6px -2px rgba(18, 24, 31, .10);
  --elev-3: 0 22px 48px -20px rgba(18, 24, 31, .45);
  /* Movimiento. */
  --t-rapido: 120ms;
  --t-medio: 200ms;
  --t-entrada: 320ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
  /* Anillo de foco sobre fondo claro: azul de marca (8,6:1 sobre blanco; el ámbar no llega a 3:1). */
  --foco: var(--blue);
}

/* ---- Foco: uno solo para toda la aplicación ------------------------------------------------------------------- */
.app-main :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ---- Tipografía de página ---------------------------------------------------------------------------------------- */
.app-main h1 { font-size: clamp(1.65rem, 1.25rem + 1.4vw, 2.1rem); line-height: 1.15; text-wrap: balance; }
.app-main .sub { text-wrap: pretty; }
/* Los títulos de sección (h2) de las pantallas de trabajo: más contenidos que el titular de la página y con aire propio. */
.app-main > h2, .app-main > section > h2:first-child { font: 600 1.35rem/1.25 var(--serif); margin: 36px 0 14px; text-wrap: balance; }
.app-main > h1 + h2 { margin-top: 24px; }
.app-main > .compra-subtitulo { font-size: 1.15rem; margin: 34px 0 12px; }

/* ---- Superficies: tarjetas y paneles con profundidad leve ---------------------------------------------------------- */
.app-main :is(.ficha-caso, .panel-form, .compra-bloque, .compra-datos, .vehiculo-en-curso, .garaje-tarjeta, .quien-atiende, .garaje-aviso-global, .vacio) {
  border-radius: var(--radio);
}
.app-main :is(.ficha-caso, .panel-form, .compra-bloque, .compra-datos, .vehiculo-en-curso, .garaje-tarjeta, .quien-atiende) {
  background: #fff;
  box-shadow: var(--elev-1);
}
.app-main .garaje-tarjeta.con-aviso { box-shadow: inset 4px 0 0 var(--amber), var(--elev-1); }
.app-main .compra-codigo { border-radius: var(--radio); box-shadow: var(--elev-2); }
.app-main .garaje-aviso-global { box-shadow: var(--elev-1); }
.app-main .vacio { background: #fff; padding: 36px 24px; }

/* ---- Tarjetas que son enlaces: se «levantan» al apuntarlas ------------------------------------------------------- */
.app-main :is(.card-caso, .compra-fila, .vehiculo-servicio, .garaje-agregar) {
  border-radius: var(--radio);
  transition: transform var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva);
}
.app-main :is(.card-caso, .compra-fila, .vehiculo-servicio):hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.app-main .garaje-agregar:hover { background: #fff; box-shadow: var(--elev-1); }

/* ---- Botones ------------------------------------------------------------------------------------------------------ */
.app-main .btn {
  border-radius: var(--radio);
  transition: background-color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva), box-shadow var(--t-medio) var(--curva), transform var(--t-rapido) var(--curva);
}
.app-main .btn.primary:hover { box-shadow: var(--elev-2); }
.app-main .btn:active:not(:disabled) { transform: translateY(0) scale(.985); transition-duration: 60ms; box-shadow: none; }
/* En un formulario, el botón mide lo que dice su texto (en el teléfono sigue a todo el ancho, más fácil de tocar). */
.app-main .form > .btn, .app-main .form > button { justify-self: start; align-self: flex-start; }
@media (max-width: 560px) { .app-main .form > .btn, .app-main .form > button { justify-self: stretch; align-self: stretch; } }

/* ---- Campos ------------------------------------------------------------------------------------------------------- */
.app-main :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea) {
  border-radius: var(--radio);
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.app-main :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea):focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(15, 76, 129, .16);
}
/* El botón nativo de «elegir archivo» (inglés, gris) se reemplaza por uno de la marca. */
.app-main input[type="file"] { padding: 10px; cursor: pointer; border-radius: var(--radio); }
.app-main input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid var(--ink); border-radius: var(--radio);
  background: var(--ink); color: #fff; font: 600 14px var(--sans); cursor: pointer;
  transition: background-color var(--t-rapido) var(--curva);
}
.app-main input[type="file"]:hover::file-selector-button { background: var(--charcoal); }

/* ---- Tablas: legibles y con fila destacada --------------------------------------------------------------------- */
.app-main .tabla-envoltorio { background: #fff; border: 1px solid var(--line); border-radius: var(--radio); box-shadow: var(--elev-1); }
.app-main .tabla-casos th { background: var(--bg); padding: 12px; }
.app-main .tabla-casos tbody tr:last-child td { border-bottom: 0; }
.app-main .tabla-casos tbody tr { transition: background-color var(--t-rapido) var(--curva); }
.app-main .tabla-casos tbody tr:hover td { background: #FFFBF1; }
.app-main .tabla-casos tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

/* ---- Insignias de estado: con un tinte suave del mismo color ---------------------------------------------------- */
.app-main .badge { border-radius: var(--radio); background: color-mix(in srgb, currentColor 7%, #fff); }

/* ---- Avisos ------------------------------------------------------------------------------------------------------- */
.app-main :is(.error-box, .ok-box) { border-radius: var(--radio); border-left-width: 4px; box-shadow: var(--elev-1); }

/* ---- Navegación: subrayado de ámbar al apuntar ---------------------------------------------------------------------- */
.app-nav a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 7px; transition: color var(--t-rapido) var(--curva), text-decoration-color var(--t-medio) var(--curva); }
.app-nav a:hover { text-decoration-color: var(--amber); }
.app-bar .saldo { transition: background-color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva); }
.app-bar .saldo:hover { border-color: #fff; }

/* ---- Datos del caso: el bloque ya no aprieta el síntoma en una columna angosta -------------------------------- */
.app-main .ficha-caso dl { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 28px; }
.app-main .ficha-caso dl > div:first-child { grid-column: 1 / -1; }
.app-main .ficha-caso dd { overflow-wrap: anywhere; }
.app-main .ficha-saldo dd { font: 600 2rem/1.1 var(--mono); }

/* ---- Bandeja: filtros por estado y búsqueda ---------------------------------------------------------------------- */
.app-main .bandeja-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 18px; }
.app-main .filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.app-main .filtro { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radio); background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; transition: border-color var(--t-rapido) var(--curva), background-color var(--t-rapido) var(--curva), box-shadow var(--t-medio) var(--curva); }
.app-main .filtro:hover { border-color: var(--ink); box-shadow: var(--elev-1); }
.app-main .filtro[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.app-main .filtro-cuenta { font: 600 12px/1 var(--mono); padding: 3px 7px; background: color-mix(in srgb, currentColor 14%, transparent); border-radius: var(--radio); }
.app-main .bandeja-buscar { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; flex: 1 1 300px; max-width: 520px; }
.app-main .bandeja-buscar label { flex: 1 1 200px; min-width: 0; margin: 0; }
.app-main .bandeja-buscar input[type="search"] { width: 100%; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid #9AA3AF; background: #fff; font: 400 15px var(--sans); box-sizing: border-box; }
.app-main .bandeja-buscar select { display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: 4px; padding: 0 12px; border: 1px solid #9AA3AF; background: #fff; font: 400 15px var(--sans); box-sizing: border-box; }
.app-main .bandeja-buscar label:has(select) input[type="search"], .app-main .bandeja-buscar label > input[type="search"] { margin-top: 4px; }
.app-main .bandeja-buscar .btn { min-height: 44px; }
/* ---- Fondo de la aplicación: blanco nacarado, panal de abeja y pistas de circuito azul metálico ------------------
   Inspirado en la carrocería blanca con líneas de circuito azules. Cuatro capas FIJAS detrás del contenido, apiladas por z-index
   (los pseudo-elementos de html y body): el color de fondo de la página no cambia, así que las pruebas de contraste siguen midiendo
   contra él. Las imágenes son archivos propios (sin estilos en línea ni servicios externos). Solo las pantallas de la aplicación
   (las que tienen .app-main).
     -4  nácar        blanco que vira a gris azulado, como el barniz metalizado
     -3  líneas       pistas de circuito y panal, TRANSLÚCIDAS (la intensidad se regula con --lineas-base)
     -2  destello     una banda de luz que cruza despacio
     -1  aura         las mismas líneas a plena intensidad, visibles solo alrededor del puntero */
:root {
  --lineas-base: .14;      /* qué tan visibles son las líneas en reposo (0 a 1) */
  --aura-radio: 260px;     /* tamaño del aura alrededor del puntero */
  --aura-x: 50vw;
  --aura-y: 40vh;
}
@property --aura-x { syntax: "<length-percentage>"; inherits: true; initial-value: 50vw; }
@property --aura-y { syntax: "<length-percentage>"; inherits: true; initial-value: 40vh; }

body:has(.app-main)::before,
body:has(.app-main)::after,
html:has(.app-main)::before,
html:has(.app-main)::after { content: ""; position: fixed; inset: 0; pointer-events: none; }

body:has(.app-main)::before {
  z-index: -4;
  background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 34%, #FBFCFD 52%, #E9EFF6 100%);
}
body:has(.app-main)::after {
  z-index: -3;
  opacity: var(--lineas-base);
  background:
    url("/assets/fondo-circuito.svg") 0 0 / 1120px 776px repeat,
    url("/assets/fondo-panal.svg") 0 0 / 56px 97px repeat;
}
html:has(.app-main)::before {
  z-index: -2;
  inset: auto;
  top: 0;
  bottom: 0;
  left: -100vw;
  width: 300vw;
  /* el destello metálico: una banda de luz inclinada que cruza despacio */
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 47%, rgba(176, 202, 230, .16) 51%, transparent 60%);
}
html:has(.app-main)::after {
  z-index: -1;
  opacity: 0;
  transition: opacity 360ms var(--curva);
  /* aura suave: una sola copia de cada imagen (sobre la capa base tenue), con un leve velo azul */
  background:
    radial-gradient(circle var(--aura-radio) at var(--aura-x) var(--aura-y), rgba(47, 111, 168, .06), transparent 70%),
    url("/assets/fondo-circuito.svg") 0 0 / 1120px 776px repeat,
    url("/assets/fondo-panal.svg") 0 0 / 56px 97px repeat;
  -webkit-mask-image: radial-gradient(circle var(--aura-radio) at var(--aura-x) var(--aura-y), rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .35) 50%, transparent 100%);
  mask-image: radial-gradient(circle var(--aura-radio) at var(--aura-x) var(--aura-y), rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .35) 50%, transparent 100%);
}
html[data-aura="activa"]:has(.app-main)::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes barrido-metalico { from { transform: translateX(0); } to { transform: translateX(55vw); } }
  html:has(.app-main)::before { animation: barrido-metalico 22s ease-in-out infinite alternate; }
  /* el aura sigue al puntero con un pequeño retraso (suaviza el movimiento) */
  html { transition: --aura-x 140ms var(--curva), --aura-y 140ms var(--curva); }
}
/* ---- Garaje: fotos de los vehículos y destello naranja de la tarjeta activa ------------------------------------------ */
.app-main .garaje-tarjeta { position: relative; }
.app-main .garaje-foto { position: relative; margin: -18px -18px 2px; aspect-ratio: 16 / 9; overflow: hidden; background: #E6ECF3; border-bottom: 1px solid var(--line); }
.app-main .garaje-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sin foto: un recuadro con el panal de la marca y las iniciales, para que la tarjeta no quede «vacía». */
.garaje-foto-vacia { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, #F1F5F9, #DCE6F1); }
.garaje-foto-vacia::before { content: ""; position: absolute; inset: 0; background: url("/assets/fondo-panal.svg") 0 0 / 56px 97px repeat; opacity: .55; }
.garaje-foto-vacia span { position: relative; font: 600 2.4rem/1 var(--serif); letter-spacing: .05em; color: #4F78A0; }
.app-main .vehiculo-foto-grande { aspect-ratio: 16 / 9; max-height: 340px; width: 100%; overflow: hidden; margin: 0 0 18px; background: #E6ECF3; border: 1px solid var(--line); box-shadow: var(--elev-2); }
.app-main .vehiculo-foto-grande img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-main .garaje-vacio-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Campo de foto: vista previa de lo elegido */
.app-main .campo-foto { display: grid; gap: 10px; }
.app-main .campo-foto-previa { margin: 0; display: grid; gap: 6px; }
.app-main .campo-foto-previa img { display: block; max-width: 100%; max-height: 220px; object-fit: cover; border: 1px solid var(--line); box-shadow: var(--elev-1); }
.app-main .campo-foto-previa figcaption { font-size: 13px; color: var(--gray-light); }

/* La tarjeta que se muestra (la del medio) brilla con un aura naranja que «respira». Solo cambia la sombra y la opacidad. */
.garaje-carrusel.animado .garaje-diapositiva.activa .garaje-tarjeta {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .85), 0 0 24px 2px rgba(245, 158, 11, .40), 0 18px 38px -16px rgba(245, 158, 11, .55);
}
.garaje-carrusel.animado .garaje-diapositiva.activa .garaje-tarjeta.con-aviso {
  box-shadow: inset 4px 0 0 var(--amber), 0 0 0 1px rgba(245, 158, 11, .85), 0 0 24px 2px rgba(245, 158, 11, .40), 0 18px 38px -16px rgba(245, 158, 11, .55);
}
.garaje-carrusel.animado .garaje-diapositiva.activa .garaje-tarjeta::after {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(245, 158, 11, .34), rgba(245, 158, 11, 0) 78%);
  filter: blur(12px);
  opacity: .85;
}
/* ---- Movimiento (solo si la persona no pidió reducirlo) ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes aparece-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes aura-naranja { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1.04); } }
  .garaje-carrusel.animado .garaje-diapositiva.activa .garaje-tarjeta::after { animation: aura-naranja 3.4s ease-in-out infinite alternate; }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

  /* Entrada escalonada de lo que hay en la pantalla (los primeros ocho bloques; el resto, junto con el último). */
  .app-main > * { animation: aparece-sube var(--t-entrada) var(--curva) both; }
  .app-main > :nth-child(2) { animation-delay: 40ms; }
  .app-main > :nth-child(3) { animation-delay: 80ms; }
  .app-main > :nth-child(4) { animation-delay: 120ms; }
  .app-main > :nth-child(5) { animation-delay: 160ms; }
  .app-main > :nth-child(6) { animation-delay: 200ms; }
  .app-main > :nth-child(7) { animation-delay: 240ms; }
  .app-main > :nth-child(n+8) { animation-delay: 280ms; }
  .app-main :is(.error-box, .ok-box) { animation: aparece-sube var(--t-medio) var(--curva) both; }

}

/* ---- Fondo de circuito oscuro con zoom al desplazarse y aura naranja que sigue al puntero ---------------------------------
   Una imagen fija (circuito sobre gris carbón, líneas ámbar) que se ve a través de TODAS las superficies oscuras: las cabeceras
   (sitio, aplicación, técnico, empresa, experto, marketing), la portada, la sección oscura de casos y el pie del sitio. Como la
   imagen está fija a la ventana, esas superficies forman una sola escena continua mientras las secciones claras pasan por encima.
     · zoom:  al bajar por la página la imagen se acerca (--zoom de 1 a 1.5), con una animación ligada al desplazamiento (sin
              JavaScript; donde el navegador no la soporta o se pide «reducir movimiento», la imagen queda quieta);
     · aura:  un resplandor naranja suave (--aura-nar) alrededor del puntero; AuraDelPuntero escribe dónde está el puntero.
   Cada superficie conserva su color de fondo: la imagen va encima y un velo oscuro asegura el contraste del texto
   (tests/lib/fondo-circuito.test.ts mide el peor caso). */
:root {
  --fondo-circuito: url("/assets/img/fondo-circuito-oscuro.jpg");
  --zoom: 1;
  --aura-nar: 0;
  /* la imagen cubre la ventana (relación 928:1152) y crece con --zoom */
  --fondo-tam: calc(max(100vw, 80.6vh) * var(--zoom)) auto;
}
@property --zoom { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --aura-nar { syntax: "<number>"; inherits: true; initial-value: 0; }
html[data-aura="activa"] { --aura-nar: .2; }

.top, .app-bar, .campo-top, .hero, section.dark, .foot {
  background-repeat: no-repeat;
}
/* cabeceras: el aura naranja, el velo oscuro y la imagen */
.top, .app-bar, .campo-top {
  background-image:
    radial-gradient(circle 300px at var(--aura-x) var(--aura-y), rgb(245 158 11 / var(--aura-nar)), transparent 72%),
    linear-gradient(rgb(11 16 22 / .6), rgb(11 16 22 / .6)),
    var(--fondo-circuito);
  background-attachment: fixed, scroll, fixed;
  background-size: auto, auto, var(--fondo-tam);
  background-position: 0 0, 0 0, 50% 30%;
}
/* portada: conserva su luz ámbar desde abajo, el azul acero y la viñeta, ahora sobre la imagen y con el velo translúcido */
.hero {
  background-image:
    radial-gradient(circle 340px at var(--aura-x) var(--aura-y), rgb(245 158 11 / var(--aura-nar)), transparent 72%),
    radial-gradient(70% 55% at 88% 108%, color-mix(in oklab, var(--amber) 34%, transparent), transparent 70%),
    radial-gradient(60% 60% at 6% -8%, #2A4360aa, transparent 72%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, #05080cCC 100%),
    linear-gradient(180deg, rgb(11 16 22 / .64), rgb(18 24 31 / .5) 60%),
    var(--fondo-circuito);
  background-attachment: fixed, scroll, scroll, scroll, scroll, fixed;
  background-size: auto, auto, auto, auto, auto, var(--fondo-tam);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 50% 30%;
}
section.dark {
  background-image:
    radial-gradient(circle 340px at var(--aura-x) var(--aura-y), rgb(245 158 11 / var(--aura-nar)), transparent 72%),
    linear-gradient(rgb(31 41 55 / .66), rgb(31 41 55 / .66)),
    var(--fondo-circuito);
  background-attachment: fixed, scroll, fixed;
  background-size: auto, auto, var(--fondo-tam);
  background-position: 0 0, 0 0, 50% 30%;
}
.foot {
  background-image:
    radial-gradient(circle 300px at var(--aura-x) var(--aura-y), rgb(245 158 11 / var(--aura-nar)), transparent 72%),
    linear-gradient(rgb(11 16 22 / .7), rgb(11 16 22 / .7)),
    var(--fondo-circuito);
  background-attachment: fixed, scroll, fixed;
  background-size: auto, auto, var(--fondo-tam);
  background-position: 0 0, 0 0, 50% 30%;
}
@media (prefers-reduced-motion: no-preference) {
  html { transition: --aura-x 140ms var(--curva), --aura-y 140ms var(--curva), --aura-nar 360ms var(--curva); }
  @supports (animation-timeline: scroll()) {
    @keyframes zoom-del-fondo { to { --zoom: 1.5; } }
    html { animation: zoom-del-fondo linear both; animation-timeline: scroll(root); }
  }
}

/* ---- Portada: llamado a la acción de ingreso al portal (cabecera y portada) ---------------------------------------------------- */
nav.main a.login-cta { margin-left: 4px; padding: 7px 14px; border: 1px solid rgb(255 255 255 / .6); border-bottom-width: 1px; color: #fff; font-weight: 600; transition: background-color 140ms var(--curva), border-color 140ms var(--curva); }
nav.main a.login-cta:hover { background: rgb(255 255 255 / .14); border-color: #fff; border-bottom-color: #fff; }
nav.main a.login-cta:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.hero .btn.portal { background: transparent; border-color: rgb(255 255 255 / .7); color: #fff; }
.hero .btn.portal:hover { background: rgb(255 255 255 / .14); border-color: #fff; }
/* En tablet y teléfono la cabecera del sitio esconde los enlaces de sección (style.css), pero el ingreso al portal se queda a la vista. */
@media (max-width: 960px) {
  nav.main a.login-cta:not(.cta):not([hreflang]) { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 560px) {
  nav.main a.login-cta { padding: 8px 10px; font-size: 13px; margin-left: 0; }
}