/* ATC Carlos — hoja común de la v2.
   v1 tenía todo el CSS dentro del index. Con tres páginas eso significaba
   mantener el mismo botón en tres lugares, así que el sistema vive aquí. */

:root {
  --ink: #06101a;
  --surface: #091724;
  --surface-2: #0c1e2e;
  --line: rgba(210, 224, 235, .18);
  --text: #f3f6f8;
  --muted: #a7b5c1;
  --red: #d7262d;
  --red-text: #ff4046;
  --blue: #0d4ea6;
  --blue-light: #2676d8;
  --green: #27bd67;
  --green-text: #4ede93;
  --amber: #f5b301;          /* lo que está por confirmar. Nunca se disfraza de dato */
  --focus: #6db2f2;
  --field-border: #5b7488;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --container: 1200px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Una regla de autor con display: gana a [hidden] de la hoja del navegador, y
   el bloque de arranque del buscador no se ocultaba nunca. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 92px; }
body {
  margin: 0; color: var(--text); background: var(--ink);
  font: 16px/1.55 Montserrat, Arial, sans-serif;
  background-image: radial-gradient(circle at 80% 0%, rgba(13, 78, 166, .12), transparent 29rem);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.container { width: min(calc(100% - 40px), var(--container)); margin: auto; }
.container--ancho { width: min(calc(100% - 40px), 1520px); }
.ic { flex: 0 0 auto; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--focus) !important; box-shadow: 0 0 0 3px rgba(109, 178, 242, .25);
}
::placeholder { color: #8fa2b0; opacity: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 60; background: var(--red); color: #fff; padding: 10px 16px; border-radius: 0 0 6px 6px; font-size: .8rem; font-weight: 700; transition: top .15s; }
.skip-link:focus { top: 0; }

/* ---------------------------------------------------------------- tipografía */
.eyebrow { color: var(--red-text); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.display { font: italic 800 clamp(2rem, 4vw, 3.7rem)/.98 "Barlow Condensed", sans-serif; letter-spacing: .01em; margin: 12px 0; text-transform: uppercase; text-wrap: balance; }
.display em { color: #f13239; font-style: inherit; }
.section-title { font: italic 800 clamp(1.8rem, 3vw, 2.5rem)/1 "Barlow Condensed", sans-serif; text-transform: uppercase; text-align: center; margin: 0 0 24px; text-wrap: balance; }
.section-title--izq { text-align: left; }
.section-title em { color: var(--red-text); font-style: inherit; }
.lead { color: #c9d5dd; font-size: 1rem; max-width: 62ch; }
.nota { color: var(--muted); font-size: .78rem; line-height: 1.55; }
.mono { font-family: var(--mono); letter-spacing: -.01em; }

/* -------------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent; border-radius: var(--radius-sm); min-height: 46px; padding: 0 20px;
  color: #fff; background: var(--red); font-size: .78rem; font-weight: 800; letter-spacing: .025em;
  text-transform: uppercase; transition: .2s ease;
}
.btn:hover { transform: translateY(-2px); background: #b81e26; box-shadow: 0 8px 25px rgba(215, 38, 45, .25); }
.btn--blue { background: linear-gradient(90deg, #073668, var(--blue)); border-color: #176bc4; }
.btn--blue:hover { background: var(--blue-light); box-shadow: 0 8px 25px rgba(13, 78, 166, .28); }
.btn--ghost { background: rgba(3, 12, 20, .7); border-color: var(--field-border); }
.btn--ghost:hover { background: #102638; border-color: #89a5bb; box-shadow: none; }
.btn--sm { min-height: 36px; padding: 0 13px; font-size: .7rem; }
.arrow { font-size: 1.25rem; line-height: 1; }

/* ------------------------------------------------------- cabecera y pie común */
.top-strip { background: #03080d; border-bottom: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: .75rem; }
.top-strip__inner { display: flex; min-height: 34px; align-items: center; justify-content: flex-end; gap: 20px; }
.top-strip a { display: inline-flex; align-items: center; gap: 6px; }
.top-strip a:hover { color: #fff; }
.top-strip strong { color: #e9eef1; }
.top-strip__note { margin-right: auto; }

.header { position: sticky; top: 0; z-index: 20; background: rgba(4, 12, 19, .94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-logo { height: 52px; width: auto; filter: drop-shadow(0 2px 7px rgba(25, 108, 192, .2)); }
.nav { display: flex; align-items: center; gap: 25px; }
.nav a { position: relative; padding: 8px 0; color: #dce3e8; font-size: .78rem; font-weight: 700; text-transform: uppercase; transition: color .2s; }
.nav a:hover, .nav a.active { color: #fff; }
.nav a.active::after { content: ""; position: absolute; height: 2px; background: var(--red); left: 0; right: 0; bottom: 0; }
.header-actions { display: flex; gap: 9px; align-items: center; }
.header-actions .btn { min-height: 40px; padding: 0 14px; font-size: .75rem; }
.btn-label-short { display: none; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 40px; color: white; background: transparent; border: 1px solid var(--field-border); border-radius: var(--radius-sm); }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

footer { padding: 50px 0 20px; background: #040d15; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr 1fr; gap: 30px; }
.footer-grid h3 { margin: 0 0 14px; font: 800 1rem "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.footer-grid a, .footer-grid p { display: block; margin: 8px 0; color: var(--muted); font-size: .8rem; }
.footer-grid a:hover { color: white; }
.footer-contact a, .footer-contact p { display: flex; align-items: center; gap: 8px; }
.footer-icons { display: flex; gap: 10px; }
.social { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #415766; border-radius: 50%; color: #e6edf1; }
.social:hover { border-color: #89a5bb; color: #fff; }
.copyright { border-top: 1px solid rgba(255,255,255,.09); color: #8a9aa7; font-size: .75rem; margin-top: 33px; padding-top: 16px; text-align: center; }
.whatsapp-float { position: fixed; z-index: 15; right: 20px; bottom: 20px; display: grid; place-items: center; width: 56px; height: 56px; background: #128c46; border: 3px solid #d4f6e1; border-radius: 50%; box-shadow: 0 7px 27px rgba(0,0,0,.4); color: #fff; }
.whatsapp-float:hover { background: #16a351; }

section { padding: 74px 0; }

/* ------------------------------------------------------------ caja de búsqueda
   Una sola caja que acepta las cuatro cosas mezcladas: código de caja,
   vehículo, número de parte y texto libre. Sin asistente de cuatro pasos. */
.buscar { position: relative; }
.buscar__campo {
  display: flex; align-items: center; gap: 12px;
  background: #0a1a28; border: 1px solid var(--field-border); border-radius: var(--radius-lg);
  padding: 0 8px 0 16px; min-height: 62px;
  transition: border-color .15s, box-shadow .15s;
}
.buscar__campo:focus-within { border-color: var(--focus); box-shadow: 0 0 0 4px rgba(109,178,242,.18); }
.buscar__campo input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text);
  font-size: 1.05rem; padding: 16px 0; outline: none;
}
.buscar__campo .btn { flex: 0 0 auto; }
.buscar__limpiar { border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; padding: 6px 8px; }
.buscar__limpiar:hover { color: #fff; }
.buscar__ejemplos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.buscar__ejemplos span { color: var(--muted); font-size: .75rem; }
.chip {
  border: 1px solid var(--field-border); border-radius: 20px; background: rgba(255,255,255,.03);
  color: #cdd9e2; padding: 5px 13px; font-size: .78rem; transition: .15s;
}
.chip:hover { background: #14293a; border-color: #5b8098; color: #fff; }
.chip--on { background: linear-gradient(90deg, #9f151c, #c21e26); border-color: transparent; color: #fff; font-weight: 700; }

/* -------------------------------------------------------------- resultados */
.resultados { display: grid; gap: 28px; }
/* Un hijo de grid trae min-width:auto: le basta una imagen o una tabla ancha
   para estirar la columna y sacar la página de cuadro en el celular. */
.resultados > *, .grupo-res, .candidata, .candidata__cuerpo, .grid-cajas > * { min-width: 0; }
.grupo-res h2 {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px;
  font: 800 1.25rem/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .04em;
}
.grupo-res h2 small { color: var(--muted); font-size: .75rem; font-weight: 700; font-family: Montserrat, sans-serif; letter-spacing: 0; }

.tarjeta-caja {
  display: block; border: 1px solid #2f4553; border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #0d1e2b, #07121c); padding: 16px 18px; transition: .18s;
}
a.tarjeta-caja:hover { border-color: #6f93ab; transform: translateY(-2px); }
.tarjeta-caja__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tarjeta-caja h3 { margin: 0; font: 800 1.5rem/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.tarjeta-caja h3 mark { background: transparent; color: var(--amber); }
.tarjeta-caja__meta { color: var(--muted); font-size: .78rem; }
.tarjeta-caja__datos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; font-size: .78rem; color: #b9c8d3; }
.tarjeta-caja__datos b { color: #e7eef3; font-weight: 700; }
.grid-cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }

.tabla-res { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabla-res th {
  text-align: left; color: var(--muted); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 800; padding: 0 10px 8px; border-bottom: 1px solid var(--line);
}
.tabla-res td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: top; }
.tabla-res tr:hover td { background: rgba(255,255,255,.03); }
.tabla-res a { color: var(--focus); font-weight: 700; }
.tabla-res a:hover { text-decoration: underline; }
.envuelve-tabla { overflow-x: auto; }
.conteo { color: var(--muted); font-size: .78rem; font-weight: 400; }

/* ------------------------------------------------------------------ etiquetas */
.tag {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 3px;
  padding: 2px 7px; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
.tag--kit { background: rgba(13,78,166,.28); color: #8fc0f5; border: 1px solid #24578f; }
.tag--sel { background: rgba(245,179,1,.15); color: var(--amber); border: 1px solid #7a5c08; }
.tag--ni { background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid #3b4f5e; }
.tag--nota { background: rgba(39,189,103,.15); color: var(--green-text); border: 1px solid #1d6a3e; }
.tag--parte { background: rgba(255,255,255,.05); color: #bccbd6; border: 1px solid #354c5c; }

.aviso {
  border: 1px solid #3b5869; border-left: 3px solid var(--amber); border-radius: var(--radius-sm);
  background: rgba(245, 179, 1, .06); padding: 13px 16px; color: #d9e3ea; font-size: .84rem; line-height: 1.6;
}
.aviso strong { color: #fff; }
.aviso--info { border-left-color: var(--blue-light); background: rgba(38, 118, 216, .07); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1020px) { .nav { gap: 14px; } }
@media (max-width: 900px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 20px; background: #081520; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav a.active::after { display: none; }
  .header-actions { margin-left: auto; }
  .btn-label-full { display: none; }
  .btn-label-short { display: inline; }
  .menu-toggle { display: flex; }
}
@media (max-width: 790px) {
  [id] { scroll-margin-top: 80px; }
  .top-strip { display: none; }
  .header__inner { height: 64px; gap: 12px; }
  .brand-logo { height: 44px; }
  section { padding: 54px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .buscar__campo { min-height: 54px; padding-left: 12px; }
  .buscar__campo input { font-size: 1rem; }
}
@media (max-width: 520px) {
  .container, .container--ancho { width: min(calc(100% - 28px), var(--container)); }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .whatsapp-float { right: 13px; bottom: 13px; width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}