/* ==========================================================================
   Panisa Automotores — tema azul nocturno
   --------------------------------------------------------------------------
   Se carga DESPUES del <style> de cada pagina, asi que pisa lo que haga falta
   sin tocar el CSS original. Cubre index, catalogo y vehiculo.

   Por que oscuro: las fotos de los vehiculos son lo unico claro en pantalla,
   asi la vista va al producto. Ademas disimula que las fotos vienen de
   fuentes distintas, con luces y fondos que no combinan entre si.

   El azul sale del logo de Panisa (#101c4e sobre blanco). Sobre fondo oscuro
   ese navy desaparece, asi que la marca vive en los fondos (barras, pie) y el
   acento se aclara hasta #5b8cff para que siga leyendose.

   Dos acentos con roles separados:
     azul  (#2f6be0) -> acciones sobre el contenido (ver catalogo, financiar)
     verde (#25d366) -> contacto por WhatsApp, que se reconoce por el color
   ========================================================================== */

:root{
  --bg:        #10141c;   /* pagina            */
  --bar:       #0a0e16;   /* barra y pie       */
  --nav-bg:    #151a25;   /* nav y franjas     */
  --surface:   #1a2030;   /* tarjetas          */
  --surface-2: #222940;   /* campos, huecos    */
  --line:      #2a3245;   /* bordes            */
  --text:      #eef1f7;
  --muted:     #98a1b4;
  --navy:      #101c4e;   /* azul del logo, para fondos claros */
  --blue:      #2f6be0;
  --blue-soft: #5b8cff;   /* acento sobre oscuro: el navy desaparece */
  --blue-tint: #16203a;   /* reemplaza los rosados #f9e9e8 / #f7eeee  */
  --wa:        #25d366;
  --ink: var(--text); --green: var(--text); --lime: var(--blue-soft);
  --cream: var(--bg); --white: var(--surface);
}

/* --- base ---------------------------------------------------------------- */
body{background:var(--bg);color:var(--text)}
h1,h2,h3{color:#f4f6fb}
p,small,span,li,td,th,label{color:inherit}

/* --- barras, nav y pie --------------------------------------------------- */
.topbar,.topline{background:var(--bar);color:#a7b0c2}
.nav,.top{background:var(--nav-bg);border-bottom:1px solid var(--line)}
.links a,.navlinks a{color:#ccd3e0}
.links a:hover,.navlinks a:hover{color:var(--blue-soft)}
.brand-caption,.brand small{color:var(--text)}
/* .top a.back gana por especificidad a un .back pelado, asi que hay que
   igualarsela: si no, el enlace queda con el verde oscuro del diseno claro
   sobre la barra oscura y no se lee. */
.top a.back,.back{color:#ccd3e0}
.footer{background:var(--bar)}
.footer .brandmark{background:var(--surface-2)}
.footer p,.footer small,.footer-bottom,.footer-links a{color:#99a2b5}
.footer-links b{color:#fff}
.crumb,.crumb a{color:var(--muted)}

/* --- franja de respaldo -------------------------------------------------- */
.proof{background:var(--nav-bg);border-bottom:1px solid var(--line)}
.proof-item{border-left-color:var(--line)}
.proof-icon,.feature-icon,.live{background:var(--blue-tint);color:var(--blue-soft)}

/* --- tarjetas de vehiculo ------------------------------------------------ */
.car-card,.car,.empty,.term-picker{background:var(--surface);border-color:var(--line)}
.car-image,.photo,.gallery-thumb{background:var(--surface-2)}
/* .spec, en singular, es la ficha de las tarjetas del catalogo: quedaba
   con el gris del diseno claro y perdia contraste sobre la tarjeta. */
.specs,.spec{border-bottom-color:var(--line);color:var(--muted)}
.car-kicker,.price-label,.install,.section-head p,.catalog-note,
.gallery-caption,.make,.summary-note,.availability,.fineprint,
.range-row,.range-ticks,.term-scale,.field-hint,.note{color:var(--muted)}
/* Sellos sobre foto: fondo claro, asi que el texto tiene que ir oscuro.
   El tema hereda el color claro del body y los dejaba invisibles. */
.tag,.photo-label{background:var(--text);color:#131823}
.heart{background:var(--surface);color:#a7b0c2}
.detail-link,.car .detail{color:var(--blue-soft)}

/* --- botones ------------------------------------------------------------- */
/* Jerarquia sobre fondo oscuro: claro = accion principal, azul = secundaria. */
.button,.nav-cta,.pagination button,.clear{
  background:var(--text);color:#131823;border-color:var(--line)}
.button:hover,.nav-cta:hover{background:#fff;color:#131823}
.button.lime,.button.red,.car .detail{background:var(--blue);color:#fff}
.button.lime:hover,.button.red:hover{background:#4a82ea;color:#fff}

/* --- formularios y filtros ----------------------------------------------- */
.filter,.sort,.side,.side select,.results-top select,.selects select,
.money input,.money-input input,.ref-btn,.frequency button,.tech-item{
  background:var(--surface-2);border-color:var(--line);color:var(--text)}
.side{background:var(--surface)}
.side h2,.side h3{color:var(--text)}
.check,.side label{color:#ccd3e0}
.filter.active,.filter:hover,.ref-btn.active,
.frequency button.active,.term-presets button.active,.amount-options button.active{
  background:var(--blue-tint);border-color:var(--blue);color:var(--blue-soft)}
.term-presets button,.amount-options button{
  background:var(--surface-2);border-color:var(--line);color:#ccd3e0}
input::placeholder{color:#7b8498}

/* --- paneles de financiacion --------------------------------------------- */
.finance{background:var(--nav-bg)}
.calc,.summary{background:var(--surface);border-color:var(--line)}
.result,.financed-total,.price-equation{background:var(--surface-2)}
.result strong,.financed-total strong,.price-equation strong,.term-value strong{color:var(--blue-soft)}
.step i{background:var(--surface-2);color:var(--text)}

/* --- varios -------------------------------------------------------------- */
.cta{background:var(--surface)}
.cta p{color:#b6bece}
.photo-caption,.toast,.hero-stamp{background:#0a0e16e6;color:var(--text)}
.value-copy>p,.feature small{color:var(--muted)}
.not-found a{color:var(--blue-soft)}
.dot{background:var(--wa)}

/* ==========================================================================
   Boton flotante de WhatsApp
   Presente en las tres paginas. Verde de WhatsApp porque es el color que la
   gente reconoce como "esto abre WhatsApp" sin leer nada.
   ========================================================================== */
.wa-flotante{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--wa); color:#fff; text-decoration:none;
  box-shadow:0 10px 26px #00000066, 0 0 0 1px #ffffff14;
  transition:transform .18s ease, box-shadow .18s ease;
}
.wa-flotante:hover{transform:translateY(-2px);box-shadow:0 14px 32px #00000080}
.wa-flotante:active{transform:translateY(0)}
.wa-flotante svg{width:29px;height:29px;display:block}
.wa-flotante:focus-visible{outline:3px solid #ffffffaa;outline-offset:3px}

/* El boton de la barra tambien es WhatsApp: mismo color, mismo significado. */
.nav-cta.es-whatsapp{background:var(--wa);color:#fff}
.nav-cta.es-whatsapp:hover{background:#1fbe5a;color:#fff}
.nav-cta.es-whatsapp svg{width:16px;height:16px;flex:0 0 16px}

@media(max-width:760px){
  .wa-flotante{right:14px;bottom:14px;width:52px;height:52px}
  .wa-flotante svg{width:27px;height:27px}
}
@media(prefers-reduced-motion:reduce){
  .wa-flotante{transition:none}
}

/* --- campos que quedaron fuera del barrido inicial ------------------------
   El CSS original los declara con selectores propios de cada pagina
   (.side input[type=search], .price-entry, .money-input input...), asi que
   no los alcanzaba la regla general de formularios. */
.side input[type=search],
.price-entry,
.price-entry input,
.money-input input[type=number],
.catalog-tools input,
.money input,
input[type=search],
input[type=number],
input[type=text],
textarea{
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--text);
}
.price-entry input{background:transparent}
.price-entry span,.money-input span,.money span{color:var(--muted)}
.price-filter small,#priceHint{color:var(--muted)}
.results-top,#count{color:var(--muted)}

/* "Limpiar filtros" es accion secundaria: contorno, no solido, para que no
   compita visualmente con los botones de ver publicacion. */
.clear{
  background:transparent;
  border:1px solid var(--line);
  color:#ccd3e0;
}
.clear:hover{border-color:var(--blue);color:var(--blue-soft);background:transparent}

/* --- rangos y detalles que llevaban el rojo de Omega --------------------- */
.range{accent-color:var(--blue)}
.heart.saved{color:var(--blue-soft)}
.hero h1 em,.eyebrow{color:var(--blue-soft)}
.hero-stamp b,.photo-caption b{color:var(--blue-soft)}
.install b{color:var(--blue-soft)}
.topbar b{color:var(--blue-soft)}