/* WEEM — identidad aplicada a toda la plataforma. Fuente, color y componentes compartidos. */
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-bold.ttf") format("truetype");font-style:normal;font-weight:700 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fonts/geist-mono-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
:root{
  --weem-petroleo:#123E45;
  --weem-petroleo-profundo:#0D3036;
  --weem-arena:#D4B483;
  --weem-marfil:#F6F0E6;
  --weem-tinta:#102B30;
  --weem-fuente:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --weem-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --v-font:var(--weem-fuente);
  --v-font-mono:var(--weem-mono);
  --v-brand-50:#F6F0E6;
  --v-brand-100:#EEE1CF;
  --v-brand-200:#E3CEAA;
  --v-brand-300:#D4B483;
  --v-brand-400:#C49C61;
  --v-brand-500:#D4B483;
  --v-brand-600:#B89562;
  --v-brand-700:#8B6940;
  --v-brand-800:#123E45;
  --v-brand-900:#0D3036;
  --v-brand-soft:rgba(212,180,131,.16);
  --v-accent-text:#D4B483;
}
:root,:root.dark,[data-theme="dark"]{
  --v-bg:#123E45;
  --v-surface-1:#164A52;
  --v-surface-2:#1A535B;
  --v-surface-3:#205E66;
  --v-surface-4:#2A6D74;
  --v-text:#F6F0E6;
  --v-text-secondary:#E9DFD0;
  --v-text-muted:#C9C2B6;
  --v-text-faint:#A6B7B8;
  --v-border:rgba(246,240,230,.16);
  --v-border-hover:rgba(212,180,131,.58);
  --v-border-strong:rgba(246,240,230,.34);
  --v-overlay:rgba(13,48,54,.78);
  --v-glass:rgba(246,240,230,.055);
  --v-glass-hover:rgba(246,240,230,.09);
}
:root.light,[data-theme="light"],[data-theme="claro"]{
  --v-bg:#F6F0E6;
  --v-surface-1:#FFFDF9;
  --v-surface-2:#EEE6D9;
  --v-surface-3:#E4D7C3;
  --v-surface-4:#D7C5AA;
  --v-text:#123E45;
  --v-text-secondary:#31555B;
  --v-text-muted:#5F7273;
  --v-text-faint:#748586;
  --v-border:rgba(18,62,69,.14);
  --v-border-hover:rgba(18,62,69,.32);
  --v-border-strong:rgba(18,62,69,.48);
  --v-overlay:rgba(18,62,69,.5);
  --v-glass:rgba(18,62,69,.04);
  --v-glass-hover:rgba(18,62,69,.08);
}
html,body,button,input,select,textarea{font-family:var(--weem-fuente)}
.mono,.num,[data-mono],.kpi b,.reloj b,.tab-num{font-family:var(--weem-mono);font-variant-numeric:tabular-nums}
::selection{background:var(--weem-arena);color:var(--weem-petroleo)}
.weem-logo{display:block;height:auto;max-width:100%}
/* Home: mantiene la composición; reemplaza la marca tipográfica dibujada por la firma oficial. */
#navbar{border-bottom:1px solid transparent}
#navbar.scrolled{background:color-mix(in srgb,var(--weem-petroleo) 92%,transparent)!important;border-bottom-color:rgba(246,240,230,.14)}
body.text-white{background:var(--weem-petroleo);color:var(--weem-marfil)}
body.text-white .gradient-text{background:linear-gradient(105deg,var(--weem-marfil),var(--weem-arena));-webkit-background-clip:text;background-clip:text}
body.text-white .text-brand-500{color:var(--weem-arena)!important}
body.text-white .bg-brand-500,body.text-white .from-brand-500{--tw-gradient-from:var(--weem-arena)!important;--tw-gradient-to:rgba(212,180,131,0)!important}
body.text-white .to-brand-600{--tw-gradient-to:#B89562!important}
body.text-white .cta-glow{box-shadow:none!important}
/* Admin: saca el rojo residual, suaviza superficies y deja la arena para la acción primaria. */
body:has(.sidebar){background:var(--v-bg)!important;color:var(--v-text)}
body:has(.sidebar) .sidebar{background:color-mix(in srgb,var(--weem-petroleo) 92%,#000)!important;border-right-color:var(--v-border)!important}
body:has(.sidebar) .sidebar-logo,.login-logo{font-family:var(--weem-fuente)!important;letter-spacing:.08em!important;color:var(--weem-marfil)!important}
body:has(.sidebar) .sidebar-logo .v,.login-logo .v{color:var(--weem-arena)!important}
body:has(.sidebar) .nav-item.active,body:has(.sidebar) .nav-item:hover{background:rgba(212,180,131,.14)!important;color:var(--weem-marfil)!important}
body:has(.sidebar) .nav-item.active::before{background:var(--weem-arena)!important}
body:has(.sidebar) .btn-primary{background:var(--weem-arena)!important;border-color:var(--weem-arena)!important;color:var(--weem-petroleo)!important}
body:has(.sidebar) .btn-primary:hover{background:#E3CEAA!important}
body:has(.sidebar) .section-title-icon{background:rgba(212,180,131,.14)!important}
body:has(.sidebar) .stat-card,body:has(.sidebar) .chart-container{box-shadow:none!important}
body:has(.sidebar) .period-btn.active{background:var(--weem-arena)!important;color:var(--weem-petroleo)!important}
body:has(.sidebar) .sidebar-footer button:last-child{background:rgba(248,113,113,.12)!important;border-color:rgba(248,113,113,.3)!important;color:#FCA5A5!important}
@media (max-width:720px){.weem-product-label{display:none}}
/* Firma como arte oficial: no se reconstruye la marca con texto. */
.weem-admin-logo{display:block;width:108px;height:auto}
.login-logo .weem-admin-logo{width:122px}
.sidebar-logo .weem-admin-logo{width:112px}
/* Tailwind no debe reemplazar la tipografía de marca ni redimensionar su firma. */
html body.font-sans,html body.text-white{font-family:var(--weem-fuente)!important}
img.weem-logo{width:112px!important;height:auto!important;max-width:112px!important;max-height:38px!important;object-fit:contain!important}
/* Administración: el lateral es una capa de navegación propia, con contraste suficiente frente al espacio de trabajo. */
body:has(.sidebar) .sidebar{
  background:#082B31!important;
  border-right:1px solid rgba(212,180,131,.38)!important;
  box-shadow:10px 0 28px rgba(5,24,28,.18);
}
body:has(.sidebar) .sidebar-nav{padding:4px 8px 12px}
body:has(.sidebar) .nav-item{
  color:rgba(246,240,230,.84)!important;
  border:1px solid transparent;
}
body:has(.sidebar) .nav-item:hover{
  color:var(--weem-marfil)!important;
  background:rgba(246,240,230,.10)!important;
  border-color:rgba(246,240,230,.13)!important;
}
body:has(.sidebar) .nav-item.active{
  background:var(--weem-arena)!important;
  border-color:var(--weem-arena)!important;
  color:var(--weem-petroleo)!important;
  box-shadow:inset 3px 0 0 var(--weem-marfil),0 3px 12px rgba(0,0,0,.18)!important;
}
body:has(.sidebar) .nav-item.active svg{opacity:1!important}
body:has(.sidebar) .nav-label{color:rgba(212,180,131,.88)!important}
body:has(.sidebar) .sidebar-footer{border-top-color:rgba(212,180,131,.28)!important}

/* Administración: una superficie de trabajo clara dentro de la familia WEEM.
   Estas variables reemplazan la paleta heredada del panel, sin cambiar su lógica. */
body:has(.sidebar){
  --bg:#123E45;
  --surface:#164A52;
  --surface-2:#1A535B;
  --surface-3:#205E66;
  --border:rgba(246,240,230,.16);
  --border-glow:rgba(212,180,131,.62);
  --text:#F6F0E6;
  --text-muted:#C9D4D3;
  --accent:#D4B483;
  --accent-soft:rgba(212,180,131,.18);
  --accent-grad:linear-gradient(135deg,#E3CEAA 0%,#D4B483 100%);
  --ring:0 0 0 3px rgba(212,180,131,.30);
  --glass:rgba(246,240,230,.055);
  --glass-border:rgba(246,240,230,.16);
  --shadow-sm:0 1px 2px rgba(5,24,28,.22);
  --shadow-md:0 8px 24px rgba(5,24,28,.20);
  --shadow-lg:0 18px 54px rgba(5,24,28,.38);
}
body:has(.sidebar) .app{background:var(--bg)}
body:has(.sidebar) .main{
  width:calc(100% - 240px);
  max-width:none;
  padding:28px clamp(24px,3vw,52px) 40px;
}
body:has(.sidebar) .sidebar-logo{padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid rgba(212,180,131,.28)}
body:has(.sidebar) #sidebarAvatar{background:linear-gradient(135deg,#E3CEAA,#B89562)!important;color:var(--weem-petroleo)!important;box-shadow:0 2px 10px rgba(5,24,28,.28)!important}
body:has(.sidebar) .sidebar-footer button:first-child{background:rgba(246,240,230,.08)!important;border-color:rgba(246,240,230,.18)!important;color:var(--weem-marfil)!important}
body:has(.sidebar) .tools-count{background:rgba(246,240,230,.11);color:var(--weem-marfil)}
body:has(.sidebar) .tools-link{color:rgba(246,240,230,.74)}
body:has(.sidebar) .tools-link:hover{background:rgba(246,240,230,.09);color:var(--weem-marfil)}
body:has(.sidebar) .stat-card,
body:has(.sidebar) .chart-container,
body:has(.sidebar) .editor-card,
body:has(.sidebar) .product-card,
body:has(.sidebar) .auto-card,
body:has(.sidebar) .ab-test-card{background:var(--surface)!important;border-color:var(--border)!important}
body:has(.sidebar) .stat-card:hover,
body:has(.sidebar) .chart-container:hover,
body:has(.sidebar) .product-card:hover,
body:has(.sidebar) .auto-card:hover{border-color:var(--border-glow)!important;box-shadow:var(--shadow-md)!important}
body:has(.sidebar) .data-table{border-color:var(--border)!important}
body:has(.sidebar) .data-table th{background:var(--surface-2)!important;color:var(--weem-marfil)!important;border-bottom-color:var(--border)!important}
body:has(.sidebar) .data-table td{border-bottom-color:rgba(246,240,230,.10)!important}
body:has(.sidebar) .data-table tr:hover td{background:rgba(246,240,230,.055)!important}
body:has(.sidebar) input,
body:has(.sidebar) select,
body:has(.sidebar) textarea{background:#0D3036!important;border-color:rgba(246,240,230,.20)!important;color:var(--weem-marfil)!important}
body:has(.sidebar) input::placeholder,
body:has(.sidebar) textarea::placeholder{color:rgba(246,240,230,.50)!important}
body:has(.sidebar) .btn-primary,
body:has(.sidebar) .btn-save,
body:has(.sidebar) .btn-new-product{box-shadow:none!important;color:var(--weem-petroleo)!important}
body:has(.sidebar) .period-btn.active,
body:has(.sidebar) .tab-btn.active{background:var(--weem-arena)!important;color:var(--weem-petroleo)!important;box-shadow:none!important}
body:has(.sidebar) .toast{background:#0D3036;border-color:rgba(246,240,230,.22)}

/* El modo claro conserva la jerarquía: navegación profunda, contenido marfil. */
:root.light body:has(.sidebar),[data-theme="light"] body:has(.sidebar){
  --bg:#F6F0E6;
  --surface:#FFFDF9;
  --surface-2:#EEE6D9;
  --surface-3:#E4D7C3;
  --border:rgba(18,62,69,.14);
  --border-glow:rgba(18,62,69,.40);
  --text:#123E45;
  --text-muted:#526D70;
  --glass-border:rgba(18,62,69,.14);
  --shadow-sm:0 1px 2px rgba(18,62,69,.08);
  --shadow-md:0 8px 24px rgba(18,62,69,.12);
}
:root.light body:has(.sidebar) .main,[data-theme="light"] body:has(.sidebar) .main{background:var(--bg)}
:root.light body:has(.sidebar) input,[data-theme="light"] body:has(.sidebar) input,
:root.light body:has(.sidebar) select,[data-theme="light"] body:has(.sidebar) select,
:root.light body:has(.sidebar) textarea,[data-theme="light"] body:has(.sidebar) textarea{background:#FFFDF9!important;color:var(--text)!important;border-color:rgba(18,62,69,.24)!important}
:root.light body:has(.sidebar) .data-table tr:hover td,[data-theme="light"] body:has(.sidebar) .data-table tr:hover td{background:rgba(18,62,69,.045)!important}

@media (max-width:768px){
  body:has(.sidebar) .main{width:100%;padding:18px 14px 28px}
  body:has(.sidebar) .sidebar{width:min(86vw,290px)}
}
/* Landings y herramientas públicas: una navegación reconocible y legible. */
.topnav,.nav{background:color-mix(in srgb,var(--weem-petroleo) 94%,transparent)!important;border-bottom-color:rgba(246,240,230,.17)!important}
.topnav-brand,.nav-brand{min-width:112px;align-items:center!important}
.weem-public-logo{display:block;width:108px;height:auto;max-height:32px;object-fit:contain}
.topnav-links a,.topnav-mobile a,.nav a.back{color:rgba(246,240,230,.78)!important}
.topnav-links a:hover,.topnav-mobile a:hover,.nav a.back:hover{color:var(--weem-marfil)!important;background:rgba(246,240,230,.09)!important}
.topnav-links a.active,.topnav-mobile a.active{color:var(--weem-petroleo)!important;background:var(--weem-arena)!important}
.topnav-hamburger{color:var(--weem-marfil)!important}
/* Las llamadas principales usan arena sobre petróleo: contraste alto y una sola jerarquía visual. */
body.text-white .bg-red-500\/15,body.text-white .bg-emerald-500\/15,body.text-white .bg-cyan-500\/15{background-color:rgba(212,180,131,.15)!important}
body.text-white .text-red-400,body.text-white .text-emerald-400,body.text-white .text-cyan-400,body.text-white .text-blue-400,body.text-white .text-yellow-400,body.text-white .text-rose-400{color:var(--weem-arena)!important}
body.text-white .bg-green-400\/10,body.text-white .bg-emerald-400\/10{background-color:rgba(212,180,131,.14)!important}
body.text-white .text-green-400{color:#B9DFC3!important}
@media (max-width:720px){.weem-public-logo{width:96px}.topnav-brand,.nav-brand{min-width:96px}}
/* Contenido primero: las animaciones nunca pueden dejar una sección ilegible si el navegador las omite. */
.reveal{opacity:1!important;transform:none!important;filter:none!important}
/* Navegación móvil: queda debajo de cualquier diálogo y usa la misma superficie de WEEM. */
#v-bottom-nav,.v-bottom-nav{z-index:900!important;background:rgba(13,48,54,.97)!important;border-top:1px solid rgba(212,180,131,.30)!important;backdrop-filter:blur(14px);font-family:var(--weem-fuente)!important}
#v-bottom-nav .v-bottom-nav-link,.v-bottom-nav .v-bottom-nav-link{display:flex!important;flex-direction:column;align-items:center;gap:2px;min-width:48px;padding:4px 0;text-decoration:none;font-size:.6rem;font-weight:500;letter-spacing:.02em;color:rgba(246,240,230,.64)!important}
#v-bottom-nav .v-bottom-nav-link span,.v-bottom-nav .v-bottom-nav-link span{color:currentColor!important}
#v-bottom-nav .v-bottom-nav-link.is-active,.v-bottom-nav .v-bottom-nav-link.is-active{color:var(--weem-arena)!important;font-weight:700}
/* Todos los diálogos respetan el tema y siempre se superponen a la navegación móvil. */
.popup-overlay{z-index:1200!important;background:var(--v-overlay)!important}
.popup{background:var(--v-surface-1)!important;border-color:var(--v-border)!important;color:var(--v-text)!important;box-shadow:0 24px 64px rgba(5,24,28,.30)!important}
.popup input,.popup select,.popup textarea{background:var(--v-surface-2)!important;border-color:var(--v-border-strong)!important;color:var(--v-text)!important}
.popup input::placeholder,.popup textarea::placeholder{color:var(--v-text-faint)!important}
.popup .popup-sticky-cta{background:var(--v-surface-1)!important;border-top-color:var(--v-border)!important}
.popup .popup-close{color:var(--v-text-muted)!important}
.popup .popup-close:hover{background:var(--v-glass)!important}
.popup .btn-submit{background:var(--weem-arena)!important;color:var(--weem-petroleo)!important;box-shadow:none!important}
.popup .btn-submit:hover{background:var(--v-brand-200)!important}
.popup .skip:hover{color:var(--v-text)!important}
.popup .cc-dropdown,.popup .cc-dropdown input{background:var(--v-surface-1)!important;color:var(--v-text)!important;border-color:var(--v-border)!important}
.popup .cc-country:hover,.popup .cc-country-active{background:var(--v-brand-soft)!important;color:var(--v-text)!important}
/* Portada pública: superficies sólidas para que cada tema conserve contraste real. */
.weem-public-home{background:#123E45!important;color:#F6F0E6!important}
.weem-public-home #navbar{background:#123E45!important;border-bottom:1px solid rgba(246,240,230,.18)!important;box-shadow:none!important;backdrop-filter:none!important}
.weem-public-home #navbar.navbar-solid{background:#0D3036!important;border-bottom-color:rgba(212,180,131,.42)!important}
.weem-public-home .mobile-menu{background:#0D3036!important;border-color:rgba(212,180,131,.30)!important;backdrop-filter:none!important}
.weem-public-home .card-hover{background:#164A52!important;border-color:rgba(246,240,230,.19)!important;box-shadow:none!important}
.weem-public-home .card-hover::before,.weem-public-home .cta-glow::after{display:none!important}
.weem-public-home .card-hover:hover{background:#1A535B!important;border-color:#D4B483!important;box-shadow:0 12px 28px rgba(5,24,28,.24)!important;transform:translateY(-3px)}
.weem-public-home .bg-white\/5{background:#1A535B!important}
.weem-public-home .bg-white\/\[0\.03\]{background:#164A52!important}
.weem-public-home .border-white\/10,.weem-public-home .border-white\/\[0\.06\]{border-color:rgba(246,240,230,.19)!important}
.weem-public-home .weem-mobile-theme-toggle{display:none}
.weem-public-home .v-theme-toggle{color:#F6F0E6!important;border-color:rgba(246,240,230,.38)!important;background:transparent!important}
.weem-public-home .v-theme-toggle:hover{color:#123E45!important;background:#D4B483!important;border-color:#D4B483!important}
[data-theme="light"] .weem-public-home{background:#F6F0E6!important;color:#123E45!important}
[data-theme="light"] .weem-public-home #navbar,[data-theme="light"] .weem-public-home #navbar.navbar-solid{background:#FFFDF9!important;border-bottom-color:rgba(18,62,69,.22)!important}
[data-theme="light"] .weem-public-home .mobile-menu{background:#FFFDF9!important;border-color:rgba(18,62,69,.20)!important}
[data-theme="light"] .weem-public-home .card-hover{background:#FFFDF9!important;border-color:rgba(18,62,69,.17)!important}
[data-theme="light"] .weem-public-home .card-hover:hover{background:#EEE6D9!important;border-color:#123E45!important;box-shadow:0 10px 24px rgba(18,62,69,.12)!important}
[data-theme="light"] .weem-public-home .bg-white\/5{background:#EEE6D9!important}
[data-theme="light"] .weem-public-home .bg-white\/\[0\.03\]{background:#FFFDF9!important}
[data-theme="light"] .weem-public-home .border-white\/10,[data-theme="light"] .weem-public-home .border-white\/\[0\.06\]{border-color:rgba(18,62,69,.17)!important}
[data-theme="light"] .weem-public-home .text-white{color:#123E45!important}
[data-theme="light"] .weem-public-home .text-gray-600{color:#526D70!important}
[data-theme="light"] .weem-public-home .v-theme-toggle{color:#123E45!important;border-color:rgba(18,62,69,.32)!important}
[data-theme="light"] .weem-public-home .v-theme-toggle:hover{background:#123E45!important;color:#F6F0E6!important;border-color:#123E45!important}
@media (max-width:767px){
  .weem-public-home .v-theme-toggle:not(.weem-mobile-theme-toggle){display:none!important}
  .weem-public-home .weem-mobile-theme-toggle{display:inline-flex!important;margin:6px 8px 2px;width:42px;height:38px}
  .weem-public-home .mobile-menu{padding:10px 0 14px}
  .weem-public-home .mobile-menu a{padding:11px 12px!important}
}