/* Mul-T-Depot: tema claro compartido. Solo presentación; no modifica el catálogo. */
:root {
  color-scheme: light;
  --md-page: #ffffff;
  --md-surface: #ffffff;
  --md-soft: #f5fafb;
  --md-ink: #172b36;
  --md-muted: #52636c;
  --md-border: #d8e5e9;
  --md-cyan: #0e7490;
  --md-green: #047857;
}

html,
body,
body.bg-animated,
body.bg-slate-950 {
  background: var(--md-page) !important;
  color: var(--md-ink) !important;
}

/* Superficies claras, incluso cuando Tailwind se genera después de este archivo. */
body .bg-slate-800,
body .bg-slate-900,
body .bg-slate-950,
body [class~="bg-slate-900/30"],
body [class~="bg-slate-950/40"],
body [class~="bg-slate-950/70"],
body [class~="bg-slate-950/85"],
body [class~="bg-neutral-900/95"],
body [class~="bg-black/20"],
body [class~="bg-black/30"],
body [class~="bg-black/40"],
body [class~="bg-black/50"],
body [class~="bg-black/70"] {
  background: var(--md-surface) !important;
}

body [class~="bg-white/5"],
body [class~="bg-white/10"] {
  background: var(--md-soft) !important;
}

body header {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: var(--md-border) !important;
  box-shadow: 0 3px 18px rgba(20, 77, 88, 0.07);
}

body footer {
  background: #f5fafb !important;
}

body .glass,
body .hero-panel,
body .metric-card,
body .quick-card,
body .value-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--md-border) !important;
  color: var(--md-ink) !important;
  box-shadow: 0 10px 28px rgba(22, 72, 84, 0.09) !important;
}

body .value-band {
  background: linear-gradient(120deg, #effbfe, #f1fbf6) !important;
}

body .bg-overlay {
  background: rgba(255, 255, 255, 0.80) !important;
}

body #hero .bg-overlay {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.62)) !important;
}

body .hero-stat {
  background: #f4fafb !important;
  border-color: var(--md-border) !important;
}

body .hero-stat strong,
body .value-card strong {
  color: var(--md-ink) !important;
}

body .hero-stat span,
body .value-card span {
  color: var(--md-muted) !important;
}

/* Colores de texto pensados para el fondo blanco, sin tocar tamaños ni imágenes. */
body .text-white,
body .text-slate-100,
body .text-slate-200,
body [class~="md:text-slate-200"] {
  color: var(--md-ink) !important;
}

body .text-slate-300,
body .text-slate-400,
body .text-slate-500 {
  color: var(--md-muted) !important;
}

body .text-cyan-100,
body .text-cyan-200,
body .hero-kicker {
  color: var(--md-cyan) !important;
}

body .text-emerald-200,
body .text-emerald-300 {
  color: var(--md-green) !important;
}

body .text-violet-200 {
  color: #6d28d9 !important;
}

body [class~="text-rose-300/90"] {
  color: #be123c !important;
}

body [class~="hover:text-white"]:hover {
  color: var(--md-cyan) !important;
}

body [class~="border-white/5"],
body [class~="border-white/10"],
body [class~="border-slate-700/60"] {
  border-color: var(--md-border) !important;
}

/* Catálogo, categorías y acciones. Se conservan los tamaños compactos existentes. */
body .product-card,
body #gridProductos article {
  background: #ffffff !important;
  color: var(--md-ink) !important;
  border-color: var(--md-border) !important;
  box-shadow: 0 6px 20px rgba(22, 72, 84, 0.08) !important;
}

body #gridProductos article p {
  color: var(--md-muted) !important;
}

body #gridProductos article p[class~="text-rose-300/90"] {
  color: #be123c !important;
}

body .bg-neutral-800,
body .bg-neutral-900,
body .bg-neutral-950,
body .btn-cambiar,
body .categoria {
  background: #edf8fb !important;
  color: #12586c !important;
  border: 1px solid #bedde5;
  box-shadow: 0 3px 10px rgba(22, 72, 84, 0.07) !important;
}

body .categoria:hover,
body .btn-cambiar:hover,
body [class~="hover:bg-neutral-700"]:hover,
body [class~="hover:bg-neutral-800"]:hover,
body [class~="hover:bg-white/15"]:hover {
  background: #dcf3f8 !important;
  color: #0c5366 !important;
}

body .categoria.is-active {
  background: #cffafe !important;
  color: #164e63 !important;
  outline-color: #0891b2 !important;
}

body .hero-cta {
  box-shadow: 0 5px 16px rgba(22, 72, 84, 0.12) !important;
}

/* Los botones de color intenso mantienen texto blanco para su contraste. */
body .bg-cyan-600,
body .bg-emerald-600,
body .bg-red-600,
body .bg-rose-600 {
  color: #ffffff !important;
}

body .bg-cyan-600 {
  background-color: #0e7490 !important;
}

body .bg-emerald-600 {
  background-color: #047857 !important;
}

body .bg-violet-500 {
  background-color: #ddd6fe !important;
  color: #3b1766 !important;
}

body .wa-fab {
  box-shadow: 0 6px 22px rgba(4, 120, 87, 0.24) !important;
}

/* Aviso de catálogo con estilos inline heredados. */
body > aside[style*="background:#083344"] {
  background: #f0fbfd !important;
  color: #164e63 !important;
  border-color: #c6e6ec !important;
}

body > aside[style*="background:#083344"] a {
  color: #164e63 !important;
}

/* Carrito, ficha y checkout: contenido blanco sobre un velo claro. */
body #modal,
body #modalCheckout,
body #modalProducto {
  background: rgba(31, 68, 78, 0.28) !important;
}

body #modal > div,
body #modalCheckout > div,
body #modalProducto > div {
  background: #ffffff !important;
  color: var(--md-ink) !important;
  border-color: var(--md-border) !important;
  box-shadow: 0 18px 60px rgba(22, 72, 84, 0.2) !important;
}

body input:not([type="radio"]):not([type="checkbox"]),
body textarea,
body select {
  background-color: #ffffff !important;
  color: var(--md-ink) !important;
  border: 1px solid #bed2da;
  caret-color: var(--md-cyan);
}

body input::placeholder,
body textarea::placeholder {
  color: #657780 !important;
  opacity: 1;
}

body input[type="radio"],
body input[type="checkbox"] {
  accent-color: #0891b2;
}

body :is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid #0891b2 !important;
  outline-offset: 3px;
}
/* Fin del tema claro. */

/* RFQ: contraste legible sobre el tema claro. */
body #btnRfq {
  background-color: #164e63 !important;
  color: #ffffff !important;
  border: 1px solid #164e63;
}
body #btnRfq:hover {
  background-color: #0e7490 !important;
  color: #ffffff !important;
}

/* Mantener accesibles las acciones del checkout en pantallas pequeñas. */
body #modalCheckout {
  padding: 16px;
  overflow-y: auto;
}
body #modalCheckout > div {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}