/* Línea visual de Zapamania (21/10/2026), igual que www.zapamania.com.ar:
   negro + amarillo de la cinta de peligro + magenta del logo, Montserrat 900
   en itálica para títulos. Se carga después de todas las hojas del CRM. */

:root{
  --zp-negro:#0a0a0a;
  --zp-amarillo:#facc15;
  --zp-magenta:#e6007e;
  --zp-cian:#22d3ee;
  --sys-topbar-bg:#0a0a0a;
  --sys-topbar-fg:#f5f5f5;
}

body,button,input,select,textarea{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif}

/* --- Barra superior: negra con la cinta amarilla de la tienda --- */
.topbar{background:var(--zp-negro);border-bottom:0;position:relative}
.topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:-5px;height:5px;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(-45deg,var(--zp-amarillo) 0 12px,#111 12px 24px);
}
.topbar-brand{color:#fff;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.3px}
.topbar-brand b{color:var(--zp-amarillo)}
.topbar-brand .brand-mark,.login-brand .brand-mark{
  background:url(marca-zapamania.png) center/cover no-repeat,#000;color:transparent;
  border-radius:50%;width:34px;height:34px;box-shadow:0 0 0 2px var(--zp-amarillo);
}
.topbar-user{color:#e5e5e5}
.topbar-logout button{border:2px solid var(--zp-amarillo);color:var(--zp-amarillo);border-radius:0;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.topbar-logout button:hover{background:var(--zp-amarillo);color:#000}

/* --- Menú lateral --- */
.sidenav{padding-top:8px}
.nav-item.active{
  background:#fff8d6!important;color:#000!important;font-weight:800;
  box-shadow:inset 4px 0 0 var(--zp-magenta);
}
.nav-item:hover{background:#fffbea}

/* --- Títulos y botones al estilo de la tienda --- */
h1,h2,.tk-titulo,.page-title{font-weight:900;font-style:italic;letter-spacing:-.4px}
.adm-btn.primary,.btn-primary,button.primary{
  background:var(--zp-magenta)!important;border-color:#000!important;color:#fff!important;
  box-shadow:3px 3px 0 #000;font-weight:800;
}
.adm-btn.primary:hover,.btn-primary:hover,button.primary:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}

/* --- Login --- */
.login-screen{
  background:#000;
  background-image:radial-gradient(circle at 25% 20%,rgba(230,0,126,.28) 0,transparent 50%),radial-gradient(circle at 80% 85%,rgba(34,211,238,.18) 0,transparent 45%);
}
.login-card{border:3px solid #000;border-radius:0;box-shadow:8px 8px 0 var(--zp-amarillo)}
.login-card h1{font-weight:900;font-style:italic;text-transform:uppercase}
.login-card button[type=submit]{background:var(--zp-magenta);border-radius:0;font-weight:900;text-transform:uppercase;font-style:italic;box-shadow:3px 3px 0 #000}

/* --- Modo oscuro: mantiene los acentos --- */
html.oscuro .nav-item.active{background:#2a2405!important;color:var(--zp-amarillo)!important}
html.oscuro .nav-item:hover{background:#1c1c1c}