/* ==========================================================================
   Omega Automotores — tema grafito
   --------------------------------------------------------------------------
   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.

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

:root{
  --bg:        #121417;   /* pagina            */
  --bar:       #0d0f11;   /* barra y pie       */
  --nav-bg:    #181b1f;   /* nav y franjas     */
  --surface:   #1b1f24;   /* tarjetas          */
  --surface-2: #23282e;   /* campos, huecos    */
  --line:      #272c33;   /* bordes            */
  --text:      #f1efed;
  --muted:     #98a0a8;
  --red:       #d6423b;
  --red-soft:  #ff6b60;   /* acento sobre oscuro: el rojo base pierde fuerza */
  --red-tint:  #2a1d1c;   /* reemplaza los rosados #f9e9e8 / #f7eeee        */
  --wa:        #25d366;
  --ink: var(--text); --green: var(--text); --lime: var(--red-soft);
  --cream: var(--bg); --white: var(--surface);
}

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

/* --- barras, nav y pie --------------------------------------------------- */
.topbar,.topline{background:var(--bar);color:#aab2ba}
.nav,.top{background:var(--nav-bg);border-bottom:1px solid var(--line)}
.links a,.navlinks a{color:#cfd5db}
.links a:hover,.navlinks a:hover{color:var(--red-soft)}
.brand-caption,.brand small{color:var(--text)}
.back{color:#cfd5db}
.footer{background:var(--bar)}
.footer .brandmark{background:var(--surface-2)}
.footer p,.footer small,.footer-bottom,.footer-links a{color:#9aa2aa}
.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(--red-tint);color:var(--red-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)}
.specs{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)}
.tag{background:var(--text);color:#15181c}
.heart{background:var(--surface);color:#aab2ba}
.detail-link,.car .detail{color:var(--red-soft)}

/* --- botones ------------------------------------------------------------- */
/* Jerarquia sobre fondo oscuro: claro = accion principal, rojo = secundaria. */
.button,.nav-cta,.pagination button,.clear{
  background:var(--text);color:#15181c;border-color:var(--line)}
.button:hover,.nav-cta:hover{background:#fff;color:#15181c}
.button.lime,.button.red,.car .detail{background:var(--red);color:#fff}
.button.lime:hover,.button.red:hover{background:#e2534b;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:#cfd5db}
.filter.active,.filter:hover,.ref-btn.active,
.frequency button.active,.term-presets button.active,.amount-options button.active{
  background:var(--red-tint);border-color:var(--red);color:var(--red-soft)}
.term-presets button,.amount-options button{
  background:var(--surface-2);border-color:var(--line);color:#cfd5db}
input::placeholder{color:#7d858d}

/* --- 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(--red-soft)}
.step i{background:var(--surface-2);color:var(--text)}

/* --- varios -------------------------------------------------------------- */
.cta{background:var(--surface)}
.cta p{color:#b8c0c8}
.photo-caption,.toast,.hero-stamp{background:#0d0f11e6;color:var(--text)}
.value-copy>p,.feature small{color:var(--muted)}
.not-found a{color:var(--red-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:#cfd5db;
}
.clear:hover{border-color:var(--red);color:var(--red-soft);background:transparent}