/* ============================================================================
   LOVE LATINOAMERICA - Design System Components
   Importado en header.ejs - disponible en todo el sitio
   ============================================================================ */

/* Tokens base (modo claro por defecto) */
:root {
  /* Paleta */
  --love-cream: #FFF8F0;
  --love-cream-deep: #F5E1C8;
  --love-gold: #C8A96E;
  --love-gold-deep: #A88A4E;
  --love-gold-light: #E5D0A8;
  --love-navy: #0A3252;
  --love-navy-light: #1a4d75;
  --love-text: #3a4a5a;
  --love-muted: #8a9aa8;
  --love-sage: #7AA887;
  --love-sage-deep: #5c8a6b;
  --love-rose: #E6B5B0;
  --love-rose-deep: #b5826c;
  --love-warning: #C8925A;

  /* Backgrounds */
  --love-bg: #ffffff;
  --love-bg-subtle: var(--love-cream);
  --love-bg-card: #ffffff;
  --love-border: rgba(200, 169, 110, 0.15);
  --love-border-strong: rgba(200, 169, 110, 0.3);

  /* Spacing */
  --love-radius-sm: 8px;
  --love-radius: 14px;
  --love-radius-lg: 20px;
  --love-radius-xl: 24px;
  --love-radius-pill: 30px;

  /* Sombras */
  --love-shadow-sm: 0 2px 8px rgba(10, 50, 82, 0.05);
  --love-shadow: 0 4px 14px rgba(10, 50, 82, 0.08);
  --love-shadow-lg: 0 12px 40px rgba(10, 50, 82, 0.15);

  /* Tipografia */
  --love-serif: 'Cormorant Garamond', Georgia, serif;
  --love-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Modo oscuro - se activa con html.dark */
html.dark {
  --love-cream: #1f2937;
  --love-cream-deep: #1a2332;
  --love-bg: #111827;
  --love-bg-subtle: #1f2937;
  --love-bg-card: #1f2937;
  --love-text: #d1d5db;
  --love-muted: #9ca3af;
  --love-navy: #f3f4f6;
  --love-navy-light: #e5e7eb;
  --love-border: rgba(200, 169, 110, 0.18);
  --love-border-strong: rgba(200, 169, 110, 0.35);
  --love-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --love-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  --love-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}
html.dark body { background: var(--love-bg); color: var(--love-text); }

/* ============================================================================
   TOAST - sistema unificado de notificaciones
   Uso: window.LoveToast.show('Mensaje', 'success' | 'error' | 'info')
   ============================================================================ */
.love-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  pointer-events: none;
}
@media (max-width: 500px) {
  .love-toast-container {
    left: 12px;
    right: 12px;
    top: 12px;
    max-width: none;
  }
}
.love-toast {
  background: var(--love-bg-card);
  color: var(--love-text);
  padding: 14px 18px;
  border-radius: var(--love-radius);
  box-shadow: var(--love-shadow-lg);
  border-left: 3px solid var(--love-gold);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.4;
  pointer-events: auto;
  cursor: pointer;
  animation: love-toast-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 100%;
}
.love-toast.success { border-left-color: var(--love-sage); }
.love-toast.error { border-left-color: var(--love-rose-deep); }
.love-toast.info { border-left-color: var(--love-navy-light); }
.love-toast.removing { animation: love-toast-out 0.3s ease forwards; }
.love-toast-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.2; }
.love-toast-msg { flex: 1; min-width: 0; word-wrap: break-word; }
@keyframes love-toast-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes love-toast-out {
  to { opacity: 0; transform: translateX(100%); }
}

/* ============================================================================
   SKELETON - placeholder loading
   ============================================================================ */
.love-skeleton {
  background: linear-gradient(90deg,
    rgba(200, 169, 110, 0.08) 0%,
    rgba(200, 169, 110, 0.18) 50%,
    rgba(200, 169, 110, 0.08) 100%);
  background-size: 200% 100%;
  animation: love-skel 1.4s ease-in-out infinite;
  border-radius: var(--love-radius-sm);
  display: block;
}
.love-skeleton.line { height: 14px; margin-bottom: 8px; }
.love-skeleton.line.short { width: 60%; }
.love-skeleton.line.tall { height: 24px; }
.love-skeleton.circle { border-radius: 50%; aspect-ratio: 1; }
.love-skeleton.card { height: 200px; border-radius: var(--love-radius); }
@keyframes love-skel {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}

/* ============================================================================
   EMPTY STATE - estados vacios consistentes
   ============================================================================ */
.love-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--love-muted);
}
.love-empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 14px;
  opacity: 0.7;
}
.love-empty h4 {
  color: var(--love-navy);
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
}
.love-empty p {
  color: var(--love-muted);
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.love-empty .btn-cta {
  display: inline-block;
  background: linear-gradient(135deg, var(--love-gold) 0%, var(--love-gold-deep) 100%);
  color: white;
  padding: 11px 22px;
  border-radius: var(--love-radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(200, 169, 110, 0.3);
  transition: transform 0.2s ease;
}
.love-empty .btn-cta:hover { transform: translateY(-2px); }

/* ============================================================================
   TOOLTIP - help contextual
   Uso: <span data-tooltip="texto">elemento</span>
   ============================================================================ */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--love-navy);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  white-space: nowrap;
  max-width: 250px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
}
[data-tooltip]:hover::before { opacity: 1; }

/* ============================================================================
   BADGE - chips reutilizables
   ============================================================================ */
.love-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.love-badge.gold { background: rgba(200, 169, 110, 0.18); color: var(--love-gold-deep); }
.love-badge.sage { background: rgba(122, 168, 135, 0.18); color: var(--love-sage-deep); }
.love-badge.rose { background: rgba(230, 181, 176, 0.25); color: var(--love-rose-deep); }
.love-badge.navy { background: rgba(10, 50, 82, 0.1); color: var(--love-navy); }

/* ============================================================================
   REVEAL ON SCROLL - aparece sutil al hacer scroll
   Aplicar clase .love-reveal a la seccion
   ============================================================================ */
.love-reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.love-reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Variantes opcionales (aplicar manualmente para acentos) */
.love-reveal.from-left { transform: translateX(-32px); }
.love-reveal.from-left.visible { transform: translateX(0); }
.love-reveal.from-right { transform: translateX(32px); }
.love-reveal.from-right.visible { transform: translateX(0); }
.love-reveal.zoom { transform: scale(0.94); }
.love-reveal.zoom.visible { transform: scale(1); }

/* ============================================================================
   THEME TOGGLE en header
   ============================================================================ */
.love-theme-toggle {
  background: rgba(200, 169, 110, 0.12);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--love-gold-deep);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.love-theme-toggle:hover {
  background: rgba(200, 169, 110, 0.25);
  transform: rotate(15deg);
}
html.dark .love-theme-toggle {
  background: rgba(229, 208, 168, 0.15);
  color: var(--love-gold-light);
}

/* ============================================================================
   LIGHTBOX FULL-SCREEN (Vogue style)
   ============================================================================ */
.love-lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 22, 0.94);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.love-lb-overlay.open { display: flex; opacity: 1; }
.love-lb-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
  box-sizing: border-box;
}
.love-lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  transition: opacity 0.3s ease;
  background: #222;
}
.love-lb-close,
.love-lb-prev,
.love-lb-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
  font-family: inherit;
}
.love-lb-close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 300;
}
.love-lb-prev,
.love-lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.love-lb-prev { left: 18px; }
.love-lb-next { right: 18px; }
.love-lb-close:hover,
.love-lb-prev:hover,
.love-lb-next:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}
.love-lb-prev:hover,
.love-lb-next:hover { transform: translateY(-50%) scale(1.05); }

.love-lb-caption {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  text-align: center;
  max-width: 80%;
  pointer-events: none;
}
.love-lb-counter {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  letter-spacing: 3px;
  font-weight: 500;
  pointer-events: none;
}

@media (max-width: 640px) {
  .love-lb-stage { padding: 50px 16px; }
  .love-lb-prev { left: 8px; width: 44px; height: 44px; font-size: 1.6rem; }
  .love-lb-next { right: 8px; width: 44px; height: 44px; font-size: 1.6rem; }
  .love-lb-caption { font-size: 0.95rem; bottom: 50px; }
}

/* ============================================================================
   LOADING BAR (Discord / GitHub style)
   ============================================================================ */
#love-loadbar {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #C8A96E 0%, #A88A4E 50%, #E5D0A8 100%);
  box-shadow: 0 0 12px rgba(200, 169, 110, 0.6), 0 0 4px rgba(200, 169, 110, 0.4);
  z-index: 99999;
  pointer-events: none;
  transition: width 0.22s ease-out, opacity 0.32s ease;
  opacity: 0;
  border-radius: 0 2px 2px 0;
}
#love-loadbar.active { opacity: 1; }
#love-loadbar.done {
  transition: width 0.18s ease, opacity 0.32s ease 0.18s;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  #love-loadbar { transition: opacity 0.1s ease; }
}

/* ============================================================================
   CELEBRACIONES: confetti, corazon pop, checkmark overlay
   ============================================================================ */
.love-confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100000;
  overflow: hidden;
}
.love-confetti-piece {
  position: absolute;
  top: -10vh;
  width: 8px;
  height: 14px;
  opacity: 0;
  animation: loveConfettiFall linear forwards;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
@keyframes loveConfettiFall {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0.4; transform: translateY(110vh) rotate(720deg); }
}

.love-heart-pop {
  position: fixed;
  font-size: 4rem;
  color: #E6B5B0;
  pointer-events: none;
  z-index: 100000;
  transform: translate(-50%, -50%) scale(0.3);
  animation: loveHeartPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
@keyframes loveHeartPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  35% { opacity: 1; transform: translate(-50%, -75%) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}

.love-check-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 50, 82, 0.75);
  backdrop-filter: blur(8px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.love-check-overlay.open { opacity: 1; }
.love-check-stage { text-align: center; }
.love-check-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7AA887, #5e8a6b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 20px 50px rgba(94, 138, 107, 0.4);
  transform: scale(0);
  animation: loveCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.love-check-mark {
  width: 22px;
  height: 44px;
  border-right: 5px solid white;
  border-bottom: 5px solid white;
  transform: rotate(45deg) translateY(-4px);
  animation: loveCheckDraw 0.3s ease 0.4s both;
}
@keyframes loveCheckPop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes loveCheckDraw {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.love-check-text {
  color: white;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .love-toast { animation: none; }
  .love-skeleton { animation: none; }
  .love-reveal { transition: none; }
  .love-lb-overlay { transition: none; }
  .love-confetti-piece, .love-heart-pop, .love-check-circle, .love-check-mark {
    animation: none;
  }
}

/* ============================================================================
   HEADER OFFSET — el header es position:fixed (alto ~88px desktop / 78 mobile)
   asi que cualquier seccion arriba debe tener padding-top suficiente para
   no quedar tapada. Compensa el espacio en heroes que tenian padding muy
   chico (2-3rem) y por eso el menu se comia el titulo.
   ============================================================================ */
:root { --love-header-height: 96px; }
@media (max-width: 768px) { :root { --love-header-height: 78px; } }

/* Heroes claros (no full-screen, no fixed) — compensar header fijo */
.feed-hero,
.wl-hero,
.top-hero,
.insp-hero,
.comp-hero,
.br-hero,
.landing-hero,
.categorias-hero,
.ob-hero,
.obl-hero {
  padding-top: calc(var(--love-header-height) + 1.5rem) !important;
}

/* Wrappers full-width usados como primer elemento (onboarding, inbox, etc) */
.ob-wrap,
.obl-wrap,
.inbox-wrap {
  margin-top: calc(var(--love-header-height) + 14px) !important;
}

/* Page headers nativos (.page-header ya tenia 8rem top, mantener) */
/* No tocar .hero (home), .insp-stage, .cv-stage, .dc-stage (full-screen propios) */

/* ============================================================================
   DARK MODE GLOBAL
   El sitio fue construido mayormente con colores hardcodeados, asi que este
   bloque reescribe los principales por especificidad (html.dark ...) para
   que el toggle 🌙 cambie la pagina entera, no solo los componentes que
   usan las variables --love-*.
   Filosofia: oscurecer fondos, aclarar textos. Mantener acentos dorados.
   ============================================================================ */
html.dark { color-scheme: dark; }
html.dark body { background: #0f1722; color: #e6e9ef; }

/* Header y nav — !important para vencer las reglas body:has(...) .header
   de styles.css que carga DESPUES de components.css. */
html.dark .header,
html.dark .header.scrolled,
html.dark body:has(.auth-page) .header,
html.dark body:has(.page-header) .header,
html.dark body:has(.proveedor-detalle) .header,
html.dark body:has(.feed-hero) .header,
html.dark body:has(.wl-hero) .header,
html.dark body:has(.top-hero) .header,
html.dark body:has(.landing-hero) .header,
html.dark body:has(.comp-hero) .header,
html.dark body:has(.br-hero) .header,
html.dark body:has(.categorias-hero) .header,
html.dark body:has(.insp-hero) .header {
  background: #0b121c !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.45) !important;
}
html.dark .header .nav-links a,
html.dark .header.scrolled .nav-links a,
html.dark body:has(.auth-page) .header .nav-links a,
html.dark body:has(.page-header) .header .nav-links a,
html.dark body:has(.proveedor-detalle) .header .nav-links a,
html.dark body:has(.feed-hero) .header .nav-links a,
html.dark body:has(.wl-hero) .header .nav-links a,
html.dark body:has(.top-hero) .header .nav-links a,
html.dark body:has(.landing-hero) .header .nav-links a,
html.dark body:has(.comp-hero) .header .nav-links a,
html.dark body:has(.br-hero) .header .nav-links a,
html.dark body:has(.categorias-hero) .header .nav-links a,
html.dark body:has(.insp-hero) .header .nav-links a {
  color: #e6e9ef !important;
}
html.dark .header .nav-links a:hover,
html.dark .header.scrolled .nav-links a:hover { color: #FFD37A !important; }
html.dark .header .btn-registro,
html.dark .header.scrolled .btn-registro,
html.dark body:has(.auth-page) .header .btn-registro,
html.dark body:has(.page-header) .header .btn-registro,
html.dark body:has(.proveedor-detalle) .header .btn-registro,
html.dark body:has(.feed-hero) .header .btn-registro,
html.dark body:has(.wl-hero) .header .btn-registro,
html.dark body:has(.top-hero) .header .btn-registro,
html.dark body:has(.landing-hero) .header .btn-registro,
html.dark body:has(.comp-hero) .header .btn-registro,
html.dark body:has(.br-hero) .header .btn-registro,
html.dark body:has(.categorias-hero) .header .btn-registro,
html.dark body:has(.insp-hero) .header .btn-registro {
  background: linear-gradient(135deg, #C8A96E, #A88A4E) !important;
  color: white !important;
}
html.dark .header .logo img,
html.dark .header.scrolled .logo img,
html.dark body:has(.page-header) .header .logo img,
html.dark body:has(.auth-page) .header .logo img,
html.dark body:has(.proveedor-detalle) .header .logo img,
html.dark body:has(.feed-hero) .header .logo img,
html.dark body:has(.wl-hero) .header .logo img,
html.dark body:has(.top-hero) .header .logo img,
html.dark body:has(.landing-hero) .header .logo img,
html.dark body:has(.comp-hero) .header .logo img,
html.dark body:has(.br-hero) .header .logo img,
html.dark body:has(.categorias-hero) .header .logo img,
html.dark body:has(.insp-hero) .header .logo img {
  filter: brightness(0) invert(1) !important;
}
html.dark .mobile-menu-overlay,
html.dark .mobile-menu { background: #0b121c; color: #e6e9ef; }
html.dark .mobile-menu-item { color: #e6e9ef; }
html.dark .mobile-menu-item:hover { background: rgba(200,169,110,0.1); }

/* Footer */
html.dark .footer,
html.dark .footer-bottom { background: #0b121c !important; color: #cbd5e1 !important; }
html.dark .footer a { color: #cbd5e1 !important; }
html.dark .footer a:hover { color: #FFD37A !important; }

/* Superficies "blancas" universales */
html.dark .page-header,
html.dark .perfil-section,
html.dark .perfil-card,
html.dark .perfil-main,
html.dark .perfil-container,
html.dark .admin-card,
html.dark .container,
html.dark .auth-page { background: transparent; color: #e6e9ef; }
html.dark .perfil-sidebar,
html.dark .perfil-card,
html.dark .admin-card { background: #16202d !important; color: #e6e9ef !important; border: 1px solid rgba(200,169,110,0.18); }
html.dark .perfil-card h3,
html.dark .perfil-card h4,
html.dark .perfil-card p { color: #e6e9ef; }

/* Titulares y textos genericos */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5 { color: #f3f4f6; }
html.dark p, html.dark span, html.dark li, html.dark div, html.dark label, html.dark td, html.dark th { color: inherit; }
html.dark small, html.dark .text-muted { color: #94a3b8; }

/* Heroes con fondo cream → oscurecer */
html.dark .feed-hero,
html.dark .wl-hero,
html.dark .top-hero,
html.dark .landing-hero,
html.dark .comp-hero,
html.dark .br-hero,
html.dark .categorias-hero,
html.dark .insp-hero,
html.dark .ob-hero,
html.dark .obl-hero { background: linear-gradient(135deg, #16202d 0%, #1a2535 100%) !important; color: #e6e9ef; border-bottom-color: rgba(200,169,110,0.18) !important; }
html.dark .feed-hero h1,
html.dark .wl-hero h1,
html.dark .top-hero h1,
html.dark .insp-hero h1 { color: #f3f4f6; }
html.dark .feed-hero p,
html.dark .wl-hero p,
html.dark .top-hero p,
html.dark .insp-hero p { color: #cbd5e1; }

/* Cards de proveedores y stories */
html.dark .proveedor-card,
html.dark .feed-card,
html.dark .wl-card,
html.dark .top-row,
html.dark .br-card,
html.dark .categoria-card-full,
html.dark .banner-card { background: #16202d !important; color: #e6e9ef !important; border-color: rgba(200,169,110,0.18) !important; }
html.dark .proveedor-card h4,
html.dark .feed-card h3,
html.dark .feed-card h4,
html.dark .wl-card h3,
html.dark .top-row h2,
html.dark .top-row h2 a { color: #f3f4f6 !important; }
html.dark .proveedor-ubicacion,
html.dark .feed-card-text,
html.dark .feed-card-time { color: #cbd5e1 !important; }

/* Stories */
html.dark .story-avatar { background: #1f2937; }
html.dark .story-nombre { color: #e6e9ef; }

/* Inputs y selects */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark input[type="date"],
html.dark input[type="password"],
html.dark textarea,
html.dark select { background: #1f2937 !important; color: #e6e9ef !important; border-color: rgba(200,169,110,0.3) !important; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6b7280 !important; }
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus { border-color: #C8A96E !important; box-shadow: 0 0 0 3px rgba(200,169,110,0.2) !important; }

/* Buttons secundarios */
html.dark .btn-secondary,
html.dark .btn-outline { background: #1f2937 !important; color: #e6e9ef !important; border-color: rgba(200,169,110,0.3) !important; }
html.dark .btn-secondary:hover,
html.dark .btn-outline:hover { background: #28323f !important; }

/* Filtros (chips), promo banners y dropdowns */
html.dark .dropdown-menu { background: #16202d; color: #e6e9ef; border-color: rgba(200,169,110,0.2); }
html.dark .notif-dd { background: #16202d !important; color: #e6e9ef !important; }
html.dark .notif-dd .notif-item { color: #cbd5e1; border-bottom-color: rgba(200,169,110,0.12) !important; }
html.dark .notif-dd .notif-item:hover { background: #1f2937 !important; }

/* Inbox y otras vistas con bg blanco hardcoded */
html.dark .inbox-shell,
html.dark .inbox-side,
html.dark .inbox-main,
html.dark .inbox-item,
html.dark .msg-bubble,
html.dark .inbox-replyform,
html.dark .cot-card { background: #16202d !important; color: #e6e9ef !important; border-color: rgba(200,169,110,0.18) !important; }
html.dark .inbox-list,
html.dark .inbox-thread { background: #111827 !important; }
html.dark .inbox-tabs,
html.dark .inbox-detail-head { background: #1a2535 !important; }
html.dark .inbox-item:hover { background: #1f2937 !important; }
html.dark .ibi-name,
html.dark .ibi-time,
html.dark .ibi-preview { color: #e6e9ef !important; }
html.dark .ibi-time { color: #94a3b8 !important; }
html.dark .msg.otro .msg-bubble { background: #1f2937; color: #e6e9ef; }

/* Logros */
html.dark .logros-card { background: #16202d !important; color: #e6e9ef !important; }
html.dark .logro-item.locked { background: #1a2535 !important; border-color: rgba(255,255,255,0.05) !important; }

/* Estados de alert/feedback */
html.dark .alert-success { background: #14532d !important; color: #d1fae5 !important; border-color: #16a34a !important; }
html.dark .alert-error,
html.dark .alert-danger { background: #7f1d1d !important; color: #fee2e2 !important; border-color: #dc2626 !important; }
html.dark .alert-info { background: #1e3a8a !important; color: #dbeafe !important; }

/* Recently viewed widget en home */
html.dark #homeRecentlyViewed,
html.dark #recentlyViewed { background: linear-gradient(135deg, #16202d, #1a2535) !important; border-color: rgba(200,169,110,0.18) !important; }
html.dark #homeRecentList a,
html.dark #recentList a { background: #16202d !important; border-color: rgba(200,169,110,0.18) !important; }
html.dark #homeRecentList a div div,
html.dark #recentList a div div { color: #e6e9ef !important; }

/* Confianza section */
html.dark .confianza { background: transparent; }
html.dark .confianza-item { color: #cbd5e1; }

/* Reco rows en home (carruseles) */
html.dark .reco-card { background: #16202d !important; }
html.dark .reco-card h4 { color: #f3f4f6 !important; }
html.dark .reco-meta { color: #cbd5e1 !important; }

/* Lightbox y modales — ya son dark, no tocar */

/* Filtros chips del listado */
html.dark .proveedores-section { background: transparent; }
html.dark .proveedores-section [style*="background:white"] { background: #16202d !important; color: #e6e9ef !important; }