/* ==========================================================================
   tema-oscuro.css — imagen oscura unificada de AireControl
   Se carga DESPUÉS del <style> de cada página y solo pisa colores.
   Todo va dentro de @media screen: al imprimir o guardar en PDF,
   la página sale con su versión clara original (ahorra tinta).
   ========================================================================== */
@media screen {
  :root{
    --bg:#0F1517; --offbg:#131B1D; --panel:#172023; --panel-2:#1C2629;
    --ink:#EEF2F2; --muted:#9AA7AA; --line:#263235;
    --sat:#3FD6D3; --tile:#F3F4F2;
    --amber:#F07F73;   /* rojo de marca, aclarado para leerse sobre oscuro */
  }
  html{background:var(--bg); color-scheme:dark;}
  body{background:var(--bg); color:var(--ink);}

  /* ---------- Encabezado y menú ---------- */
  header{background:rgba(15,21,23,0.92) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom-color:var(--line) !important;}
  nav > a:hover, nav > .has-mega > a:hover{color:var(--ink);}
  .mega{background:var(--panel) !important; border-color:var(--line) !important; box-shadow:0 16px 40px rgba(0,0,0,0.55) !important;}
  .mega-col b{color:var(--sat) !important;}
  .mega-col a{color:var(--ink) !important;}
  .mega-col a:hover{color:var(--sat) !important;}
  .logo, .logo-text{color:var(--ink) !important;}
  .breadcrumb{border-bottom-color:var(--line) !important;}
  .breadcrumb b{color:var(--ink) !important;}
  #cart-btn{background:transparent !important; border-color:var(--line) !important; color:var(--ink) !important;}

  /* ---------- Fondos claros → paneles oscuros ---------- */
  .page-head, .related, .accesorios, .values, .apps, .notice, .riego-banner,
  .manuales-search, .manual-card, .tabs, .also-in{background:var(--offbg) !important; border-color:var(--line) !important;}
  .pcard, .rel-card, .acc-card, .svc-card, .val-card, .app-detail, .app-param,
  .app-chip, .alliance-visual, .qs, .filters, .manuales-box, .man-list, .step, .warn-box,
  .form-card, .contact-card, .info-card{background:var(--panel) !important; border-color:var(--line) !important;}
  .acc-card .icon, .svc-card .icon, .val-card .icon{background:var(--panel-2) !important; border-color:var(--line) !important;}
  .pcard:hover, .rel-card:hover, .acc-card:hover{box-shadow:0 10px 28px rgba(0,0,0,0.45) !important; border-color:#35464A !important;}
  .ph{background:linear-gradient(135deg,#233436,#101819) !important; color:#5C6E70 !important;}

  /* Estilos escritos a mano en el HTML con fondo blanco (botones, carrito) */
  [style*="background:#fff"]:not(img), [style*="background: #fff"]:not(img),
  [style*="background:#FFF"]:not(img), [style*="background:#F7F7F5"]:not(img){background:var(--panel) !important;}
  /* Etiquetas y avisos con colores escritos a mano en el HTML */
  [style*="color:var(--primary-dark)"]{color:var(--sat) !important;}
  [style*="background:rgba(14,52,54,0.1)"]{background:rgba(63,214,211,0.12) !important;}
  [style*="background:#FBF6F5"]{background:rgba(226,74,60,0.08) !important;}
  [style*="background:#F7E1DE"]{background:rgba(226,74,60,0.16) !important;}
  [style*="background:rgba(192,41,31,0.1)"]{background:rgba(226,74,60,0.16) !important;}
  #cart-panel{background:var(--panel) !important; box-shadow:-8px 0 30px rgba(0,0,0,0.6) !important; color:var(--ink);}
  #cart-panel [style*="border"]{border-color:var(--line) !important;}

  /* ---------- Fotos de producto: siempre sobre una "baldosa" clara ---------- */
  .pcard img, .rel-card img, .product-head img, .ficha-img, .gallery img{background:var(--tile) !important;}
  .product-head img, .pcard > img, .rel-card > img{border-color:transparent !important;}

  /* ---------- Etiquetas, íconos PDF y textos que usaban el verde oscuro ---------- */
  .code-tag{background:rgba(226,74,60,0.16) !important; color:#F2877B !important;}
  .manual-icon, .man-icon{background:rgba(226,74,60,0.16) !important; color:#F2877B !important;}
  .pcard .code, .rel-card .code{color:#F2877B !important;}
  .cn b, .an b, .ap, .step p b{color:var(--ink) !important;}
  .btn-outline{color:var(--ink) !important; border-color:#3A4A4E !important; background:transparent !important;}
  .btn-outline:hover{border-color:var(--sat) !important; color:var(--sat) !important;}
  .btn-mini{color:var(--sat) !important; border-color:var(--line) !important; background:transparent !important;}
  .filter-opt, .filter-item{color:var(--ink);}
  .filter-item.active{background:rgba(28,173,171,0.14) !important; color:var(--sat) !important;}
  .load-more button{background:transparent !important; color:var(--ink) !important; border-color:var(--line) !important;}
  a:not([class]):hover{color:var(--sat);}

  /* ---------- Tablas y formularios ---------- */
  .spec-table tr{border-bottom-color:var(--line) !important;}
  table th{color:var(--ink);}
  input, select, textarea{background:#0B1113 !important; color:var(--ink) !important; border-color:#33423F !important;}
  input::placeholder, textarea::placeholder{color:#6F7C80;}
  .form-row label{color:var(--muted) !important;}

  /* ---------- Pie de página: un tono más profundo que el fondo ---------- */
  /* Fondos que deben seguir en el rojo original (texto blanco encima) */
  #cart-count, .cta-strip .btn-primary{background:#C0291F !important;}
  /* Franja de llamado: verde petróleo profundo en vez del turquesa pleno */
  .cta-strip{background:linear-gradient(135deg,#0E3436 0%,#124446 100%) !important; border-top:1px solid #1D5557; border-bottom:1px solid #1D5557;}
  .cta-strip p{color:#B9D3D0 !important;}

  footer{background:#0A1012 !important; border-top:1px solid var(--line);}
  .stats{background:#0E2426 !important;}
}

/* Celular: la columna de nombres de la tabla técnica no se come el ancho */
@media screen and (max-width:600px){
  .spec-table td:first-child{width:42% !important;}
}

/* Logo: en pantalla va la versión con letras claras; al imprimir, la original */
@media print{
  .logo-pantalla{display:none !important;}
  .logo-impresion{display:block !important;}
}

/* Celular: productos relacionados de a 2 por fila */
@media screen and (max-width:700px){
  .rel-grid{grid-template-columns:repeat(2,1fr) !important;}
}