:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#162017;background:#f3f5f3}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}
.hidden{display:none!important}.muted{font-size:12px;color:#748077}.msg{min-height:20px;margin-top:10px;font-size:13px}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:22px;background:linear-gradient(145deg,#081710,#123522)}
.login-card{width:min(430px,100%);background:#fff;border-radius:22px;padding:26px;box-shadow:0 25px 80px rgba(0,0,0,.28)}
.login-card form{display:grid;gap:14px}.brand{font-weight:900;letter-spacing:.8px;color:#d9b65f}.brand.big{font-size:27px}.subtitle{font-size:12px;color:#728078}.login-card h2{margin:24px 0 14px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:800}input,select{border:1px solid #cbd6ce;border-radius:11px;padding:12px;background:#fff}
button{border:0;border-radius:12px;padding:12px 14px;font-weight:900;cursor:pointer}.primary{background:#126a3a;color:#fff}.secondary{background:#225f91;color:#fff}.warning{background:#d88415;color:#fff}.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22);padding:8px 11px}
.topbar{position:sticky;top:0;z-index:5;background:#0b1f16;color:#fff;padding:16px 18px;display:flex;justify-content:space-between;gap:14px;align-items:center}.top-actions{display:flex;gap:8px;align-items:center}.sync{font-size:12px;background:#183426;padding:8px 10px;border-radius:999px}.sync.ok{background:#0c5a32}.sync.bad{background:#6a2626}
.shell{max-width:1050px;margin:auto;padding:18px}.identity-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#fff;border:1px solid #dfe7e1;border-radius:14px;padding:13px;margin-bottom:18px}.identity-bar div{display:flex;flex-direction:column;gap:3px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.card,.panel{background:#fff;border:1px solid #dde5df;border-radius:16px;padding:16px;box-shadow:0 4px 14px rgba(20,40,25,.04)}.card span,.cash-grid span{font-size:12px;color:#637067}.card strong{display:block;font-size:24px;margin:8px 0}.card small{color:#77827a}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.panel{margin-top:14px}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-title input{max-width:260px}
.admin-actions{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:14px 0}.admin-actions label{min-width:180px}.admin-actions button{height:44px}
.row{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;padding:12px 0;border-top:1px solid #edf0ee;align-items:center}.row:first-child{border-top:0}.right{text-align:right}.qty{font-size:18px;font-weight:900}.empty{text-align:center;color:#7a857e;padding:18px}
dialog{border:0;border-radius:18px;width:min(490px,calc(100% - 24px));padding:0;box-shadow:0 24px 70px rgba(0,0,0,.28)}dialog::backdrop{background:rgba(0,0,0,.45)}dialog form{padding:20px;display:grid;gap:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.hint{background:#eef7f1;border-radius:10px;padding:10px;font-size:13px}
.cash-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cash-grid>div{padding:12px;border-radius:12px;background:#f5f7f5}.cash-grid strong{display:block;margin-top:4px}.cash-grid .total{grid-column:1/-1;background:#e9f6ed}
@media(max-width:720px){.cards,.actions,.identity-bar{grid-template-columns:1fr}.topbar{align-items:flex-start}.row{grid-template-columns:1.4fr 1fr}.row>div:nth-child(3){grid-column:1/-1;text-align:left}.panel-title{flex-direction:column;align-items:stretch}.panel-title input{max-width:none}.top-actions{flex-direction:column;align-items:flex-end}}

/* ===== MENU MODERNO OLIMPO GROUP ===== */

.menu-trigger{
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(255,255,255,.08);
  color:white;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s;
}

.menu-trigger:hover{
  background:rgba(212,175,55,.18);
  border-color:rgba(212,175,55,.35);
}

/* Fondo al abrir */
.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.3s ease;
  z-index:9998;
}

.menu-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Panel lateral */
.owner-menu{
  position:fixed;
  top:0;
  right:0;
  width:min(390px,92vw);
  height:100vh;
  height:100dvh;
  background:
    radial-gradient(circle at top right,rgba(212,175,55,.18),transparent 34%),
    linear-gradient(180deg,#191919,#0b0b0b);
  color:white;
  z-index:9999;
  display:flex;
  flex-direction:column;
  transform:translateX(105%);
  transition:transform .32s ease;
  box-shadow:-20px 0 60px rgba(0,0,0,.50);
}

.owner-menu.open{
  transform:translateX(0);
}

/* Cabecera */
.owner-menu-header{
  position:relative;
  text-align:center;
  padding:35px 24px 24px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.menu-close{
  position:absolute;
  right:16px;
  top:16px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:white;
  font-size:25px;
  cursor:pointer;
}

.owner-avatar{
  width:90px;
  height:90px;
  margin:4px auto 14px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#e1bd4b,#987021);
  border:3px solid rgba(212,175,55,.65);
  box-shadow:0 10px 30px rgba(0,0,0,.40);
}

.owner-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.owner-avatar img[src=""]{
  display:none;
}

#ownerAvatarFallback{
  font-size:34px;
  font-weight:900;
  color:#111;
}

.owner-menu-header h2{
  margin:0;
  font-size:22px;
}

.owner-role{
  margin:6px 0 12px;
  color:#d4af37;
  font-size:13px;
}

.account-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.25);
  color:#baf5c8;
  font-size:12px;
}

.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 8px #22c55e;
}

/* Opciones */
.owner-menu-body{
  flex:1;
  padding:16px;
  overflow-y:auto;
}

.owner-menu-item{
  width:100%;
  display:grid;
  grid-template-columns:42px 1fr 20px;
  gap:10px;
  align-items:center;
  background:transparent;
  color:white;
  border:0;
  border-radius:15px;
  padding:13px 12px;
  margin-bottom:7px;
  text-align:left;
  cursor:pointer;
  transition:.18s;
}

.owner-menu-item:hover{
  background:rgba(255,255,255,.07);
  transform:translateX(3px);
}

.menu-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:rgba(212,175,55,.11);
  font-size:19px;
}

.owner-menu-item strong{
  display:block;
  font-size:14px;
}

.owner-menu-item small{
  display:block;
  margin-top:3px;
  color:#9ca3af;
  font-size:11px;
}

.menu-divider{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:13px 5px;
}

.owner-menu-item.danger{
  color:#ffb4b4;
}

.owner-menu-item.danger .menu-icon{
  background:rgba(239,68,68,.13);
}

/* Pie */
.owner-menu-footer{
  padding:15px 18px 20px;
  border-top:1px solid rgba(255,255,255,.08);
}

.owner-menu-footer button{
  width:100%;
  padding:13px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:white;
  font-weight:700;
  cursor:pointer;
}

@media(max-width:600px){
  .owner-menu{
    width:92vw;
  }
}

/* ===== CORRECCION MENU HAMBURGUESA ===== */

#ownerMenu{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;

  width:390px !important;
  max-width:92vw !important;
  height:100vh !important;

  display:flex !important;
  flex-direction:column !important;

  transform:translateX(110%) !important;
  visibility:hidden !important;

  z-index:9999 !important;
}

#ownerMenu.open{
  transform:translateX(0) !important;
  visibility:visible !important;
}

#menuOverlay{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#menuOverlay.open{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
/* Salir queda solamente dentro del menú ☰ */
#logoutBtn{
  display:none !important;
}
/* ===== SUBMENU INTERNO ===== */

.owner-subpanel{
  position:absolute;
  inset:0;
  z-index:20;
  background:
    radial-gradient(circle at top right,
      rgba(212,175,55,.15),
      transparent 35%),
    #111;
  color:white;
  transform:translateX(105%);
  transition:transform .28s ease;
  display:flex;
  flex-direction:column;
}

.owner-subpanel.open{
  transform:translateX(0);
}

.owner-subpanel-header{
  display:flex;
  align-items:center;
  gap:15px;
  padding:22px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.owner-subpanel-header button{
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:white;
  font-size:22px;
  cursor:pointer;
}

.owner-subpanel-header h3{
  margin:0;
  font-size:19px;
}

.owner-subpanel-content{
  padding:20px;
  overflow-y:auto;
}

.settings-card{
  padding:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
}

.settings-card h4{
  margin-top:0;
  margin-bottom:18px;
}

.settings-card p{
  color:#aaa;
}

.settings-card button{
  width:100%;
  margin-top:10px;
  padding:13px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:white;
  text-align:left;
  font-weight:700;
  cursor:pointer;
}

.settings-card button:hover{
  background:rgba(212,175,55,.15);
}

.settings-card .danger-action{
  background:rgba(220,38,38,.18);
  color:#ffb4b4;
  border:1px solid rgba(220,38,38,.3);
}
/* =========================================================
   OLIMPO GROUP — DARK GOLD PREMIUM THEME
   ========================================================= */

:root{
  --og-bg:#080b0d;
  --og-bg-2:#0c1013;
  --og-card:#11161a;
  --og-card-2:#161c20;
  --og-border:rgba(255,255,255,.09);

  --og-gold:#e8b83f;
  --og-gold-2:#ffcf58;
  --og-gold-soft:rgba(232,184,63,.14);

  --og-text:#f5f5f5;
  --og-muted:#929aa1;

  --og-green:#27c76f;

  --og-shadow:
    0 18px 45px rgba(0,0,0,.35);
}


/* =========================
   FONDO GENERAL
   ========================= */

html,
body{
  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(232,184,63,.08),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #07090b,
      #0c1114 55%,
      #080b0d
    ) !important;

  color:var(--og-text) !important;
}

body{
  min-height:100vh;
}


/* =========================
   CONTENEDOR PRINCIPAL
   ========================= */

.shell{
  max-width:1500px !important;
  margin:auto !important;
  padding:22px !important;
}

.screen{
  color:var(--og-text);
}


/* =========================
   BARRA SUPERIOR
   ========================= */

.topbar{
  position:sticky;
  top:0;
  z-index:50;

  min-height:70px;

  background:
    rgba(7,10,12,.94) !important;

  backdrop-filter:blur(16px);

  border-bottom:
    1px solid var(--og-border);

  box-shadow:
    0 10px 30px rgba(0,0,0,.22);
}

.top-actions{
  gap:12px !important;
}


/* botón ☰ */

.menu-trigger{
  width:44px !important;
  height:44px !important;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(232,184,63,.28) !important;

  border-radius:13px !important;

  background:
    linear-gradient(
      145deg,
      rgba(232,184,63,.14),
      rgba(255,255,255,.03)
    ) !important;

  color:var(--og-gold-2) !important;

  font-size:22px;

  transition:.22s ease;
}

.menu-trigger:hover{
  transform:translateY(-1px);

  border-color:
    rgba(232,184,63,.7) !important;

  box-shadow:
    0 0 24px rgba(232,184,63,.13);
}


/* =========================
   ESTADO SINCRONIZADO
   ========================= */

.sync{
  border-radius:999px !important;

  padding:8px 13px !important;

  background:
    rgba(39,199,111,.10) !important;

  border:
    1px solid rgba(39,199,111,.25);

  color:#8ef0b8 !important;

  font-weight:700;
}


/* =========================
   IDENTIDAD / PROPIETARIO
   ========================= */

.identity-bar{
  margin-bottom:20px !important;

  padding:22px !important;

  border:
    1px solid var(--og-border);

  border-radius:20px !important;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.035),
      rgba(232,184,63,.035)
    ) !important;

  box-shadow:var(--og-shadow);
}

.identity-bar strong{
  color:#fff;
  font-weight:800;
}

.identity-bar .muted{
  color:var(--og-muted) !important;
}


/* =========================
   TARJETAS KPI
   ========================= */

.cards{
  gap:18px !important;
}

.card,
.panel{
  background:
    linear-gradient(
      145deg,
      var(--og-card),
      var(--og-card-2)
    ) !important;

  border:
    1px solid var(--og-border) !important;

  border-radius:18px !important;

  color:var(--og-text) !important;

  box-shadow:
    0 16px 40px rgba(0,0,0,.24) !important;
}

.card{
  position:relative;
  overflow:hidden;
  padding:20px !important;
}

.card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;

  background:
    linear-gradient(
      var(--og-gold-2),
      var(--og-gold)
    );

  opacity:.85;
}

.card span,
.card small,
.muted{
  color:var(--og-muted) !important;
}

.card strong{
  display:block;

  margin-top:8px;

  color:#fff !important;

  font-size:
    clamp(24px,3vw,34px) !important;

  font-weight:850;
}


/* =========================
   PANELES
   ========================= */

.panel{
  margin-top:18px !important;
  padding:20px !important;
}

.panel h3{
  margin-top:0;

  color:#fff;

  font-size:19px;
  font-weight:800;
}


/* =========================
   BOTONES GENERALES
   ========================= */

button{
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

button:hover{
  transform:translateY(-1px);
}

.primary{
  background:
    linear-gradient(
      135deg,
      #c89322,
      var(--og-gold-2)
    ) !important;

  border:
    1px solid rgba(255,214,94,.55) !important;

  color:#15110a !important;

  font-weight:850 !important;

  box-shadow:
    0 8px 24px rgba(232,184,63,.17);
}

.primary:hover{
  box-shadow:
    0 10px 30px rgba(232,184,63,.28);
}

.secondary{
  background:
    linear-gradient(
      145deg,
      #181e22,
      #11161a
    ) !important;

  border:
    1px solid var(--og-border) !important;

  color:#fff !important;

  font-weight:750 !important;
}

.secondary:hover{
  border-color:
    rgba(232,184,63,.40) !important;

  color:var(--og-gold-2) !important;
}

.ghost{
  background:transparent !important;

  border:
    1px solid var(--og-border) !important;

  color:#fff !important;
}


/* =========================
   ACCIONES DEL ADMIN
   ========================= */

.admin-actions{
  padding:17px !important;

  border:
    1px solid var(--og-border);

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(18,23,27,.96),
      rgba(11,15,18,.96)
    );

  box-shadow:
    0 14px 35px rgba(0,0,0,.20);

  gap:12px !important;
}


/* =========================
   INPUTS
   ========================= */

input,
select,
textarea{
  background:
    #0d1215 !important;

  border:
    1px solid rgba(255,255,255,.11) !important;

  border-radius:12px !important;

  color:#fff !important;

  outline:none;

  transition:.2s ease;
}

input:focus,
select:focus,
textarea:focus{
  border-color:
    var(--og-gold) !important;

  box-shadow:
    0 0 0 3px rgba(232,184,63,.10);
}

label{
  color:#d7d7d7 !important;
}


/* =========================
   INVENTARIO / PRODUCTOS
   ========================= */

.row{
  background:
    rgba(255,255,255,.025);

  border:
    1px solid rgba(255,255,255,.06);

  border-radius:13px;

  padding:12px 14px !important;

  margin-bottom:8px;
}

.row:hover{
  border-color:
    rgba(232,184,63,.23);

  background:
    rgba(232,184,63,.035);
}


/* =========================
   MODALES
   ========================= */

dialog{
  background:
    linear-gradient(
      145deg,
      #11161a,
      #090c0f
    ) !important;

  color:#fff !important;

  border:
    1px solid rgba(232,184,63,.20) !important;

  border-radius:22px !important;

  box-shadow:
    0 30px 90px rgba(0,0,0,.65) !important;
}

dialog::backdrop{
  background:
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(7px);
}


/* =========================================================
   MENÚ DEL PROPIETARIO
   ========================================================= */

.owner-menu{
  background:
    linear-gradient(
      165deg,
      #111519,
      #090c0f
    ) !important;

  color:white !important;

  border-left:
    1px solid rgba(232,184,63,.15);

  box-shadow:
    -25px 0 80px rgba(0,0,0,.55) !important;
}


/* cabecera */

.owner-menu-header{
  border-bottom:
    1px solid rgba(255,255,255,.07) !important;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(232,184,63,.12),
      transparent 50%
    );
}


/* avatar */

.owner-avatar,
#ownerAvatarFallback{
  background:
    linear-gradient(
      145deg,
      var(--og-gold-2),
      #bb8414
    ) !important;

  color:#111 !important;

  box-shadow:
    0 0 0 4px rgba(232,184,63,.08),
    0 12px 35px rgba(232,184,63,.16);

  border:
    1px solid rgba(255,220,112,.45);
}


/* items del menú */

.owner-menu-item{
  margin:7px 12px;

  padding:14px !important;

  border:
    1px solid transparent !important;

  border-radius:15px !important;

  background:
    rgba(255,255,255,.025) !important;

  color:#fff !important;
}

.owner-menu-item:hover{
  background:
    rgba(232,184,63,.08) !important;

  border-color:
    rgba(232,184,63,.22) !important;

  transform:
    translateX(-2px);
}

.owner-menu-item strong{
  color:#fff !important;
}

.owner-menu-item small{
  color:var(--og-muted) !important;
}


/* iconos menú */

.menu-icon{
  background:
    rgba(232,184,63,.10) !important;

  border:
    1px solid rgba(232,184,63,.17);

  color:
    var(--og-gold-2) !important;

  border-radius:12px !important;
}


/* =========================
   SUBPANELES INTERNOS
   ========================= */

.owner-subpanel{
  background:
    radial-gradient(
      circle at top right,
      rgba(232,184,63,.10),
      transparent 32%
    ),
    linear-gradient(
      165deg,
      #111519,
      #090c0f
    ) !important;
}

.owner-subpanel-header{
  border-bottom:
    1px solid var(--og-border) !important;
}

.owner-subpanel-header h3{
  color:#fff !important;
  font-size:22px !important;
  font-weight:850;
}

.owner-subpanel-header button{
  color:var(--og-gold-2) !important;

  border:
    1px solid rgba(232,184,63,.16) !important;

  background:
    rgba(232,184,63,.06) !important;
}


/* =========================
   TARJETAS CONFIGURACIÓN
   ========================= */

.settings-card{
  background:
    linear-gradient(
      145deg,
      rgba(24,30,34,.96),
      rgba(13,17,20,.96)
    ) !important;

border: 1px solid var(--og-border) !important;
border-radius:18px !important;
padding:18px !important;
box-shadow:0 15px 40px rgba(0,0,0,.24);
}
/* ===== PRODUCTOS PREMIUM OLIMPO ===== */

#adminProducts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  margin-top:18px;
}

#adminProducts .row{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:9px;

  padding:20px !important;
  margin:0 !important;

  background:
    linear-gradient(145deg,#151b1f,#0e1215) !important;

  border:1px solid rgba(232,184,63,.13) !important;
  border-radius:18px !important;

  box-shadow:0 14px 35px rgba(0,0,0,.25);
}

#adminProducts .row::before{
  content:"";
  position:absolute;
  top:0;
  left:20px;
  right:20px;
  height:2px;

  background:linear-gradient(
    90deg,
    transparent,
    #e8b83f,
    transparent
  );
}

#adminProducts .row b,
#adminProducts .row strong{
  font-size:19px !important;
  color:#f5c84f !important;
}

#adminProducts .muted{
  color:#9aa2a8 !important;
  line-height:1.5;
}

#adminProducts button{
  margin-top:8px;
  padding:10px 14px;

  border-radius:11px !important;

  background:#171d21 !important;
  border:1px solid rgba(232,184,63,.18) !important;

  color:#f4c64c !important;
  font-weight:800;
}

#adminProducts button:hover{
  background:rgba(232,184,63,.10) !important;
  border-color:#e8b83f !important;
}

#adminProducts .delete-product-btn{
  color:#ff8b8b !important;
  border-color:rgba(255,80,80,.20) !important;
}
/* =====================================================
   PARTE SUPERIOR ADMIN — OLIMPO PREMIUM
   ===================================================== */

/* 3 tarjetas principales */
#adminDashboard .cards{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:18px !important;
  margin-bottom:20px !important;
}

#adminDashboard .card{
  min-height:145px;
  padding:22px 24px !important;

  background:
    radial-gradient(
      circle at top right,
      rgba(232,184,63,.08),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #171d21,
      #0e1215
    ) !important;

  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:20px !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.28) !important;

  overflow:hidden;
}

/* quitar la barra lateral anterior */
#adminDashboard .card::before{
  width:100% !important;
  height:3px !important;
  left:0 !important;
  top:0 !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      #e8b83f,
      transparent
    ) !important;
}

/* títulos pequeños */
#adminDashboard .card span{
  color:#a5adb3 !important;
  font-size:14px !important;
  font-weight:600 !important;
}

/* números grandes */
#adminDashboard .card strong{
  margin-top:12px !important;
  margin-bottom:6px !important;

  font-size:32px !important;
  font-weight:900 !important;

  color:#ffffff !important;
  letter-spacing:-1px;
}

/* texto inferior */
#adminDashboard .card small{
  color:#777f85 !important;
  font-size:13px !important;
}


/* =====================================================
   TASA USD / MN
   ===================================================== */

#adminDashboard .admin-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-end !important;
  gap:12px !important;

  padding:20px !important;
  margin-bottom:20px !important;

  background:
    linear-gradient(
      145deg,
      #141a1e,
      #0c1013
    ) !important;

  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:20px !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.25);
}

/* campo de tasa */
#exchangeRate{
  min-height:48px;

  background:#090d10 !important;

  border:
    1px solid rgba(232,184,63,.25) !important;

  color:#ffffff !important;

  font-size:20px !important;
  font-weight:850 !important;
}

/* Guardar tasa */
#saveExchangeRate{
  min-height:48px;

  background:
    linear-gradient(
      135deg,
      #a97614,
      #e7b63d
    ) !important;

  border:
    1px solid #edc65d !important;

  color:#151009 !important;
  font-weight:900 !important;
}

/* Actualizar datos */
#refreshBtn{
  min-height:48px;

  background:
    linear-gradient(
      145deg,
      #1a2024,
      #12171a
    ) !important;

  border:
    1px solid rgba(255,255,255,.09) !important;

  color:#fff !important;
  font-weight:800 !important;
}


/* =====================================================
   BOTÓN AGREGAR PRODUCTO / ENTRADA MERCANCÍA
   ===================================================== */

#adminDashboard button[data-open="productModal"],
#adminDashboard button[data-open="entryModal"]{
  min-height:48px !important;
  padding:0 20px !important;

  border-radius:13px !important;

  background:
    linear-gradient(
      145deg,
      rgba(232,184,63,.16),
      rgba(232,184,63,.07)
    ) !important;

  border:
    1px solid rgba(232,184,63,.42) !important;

  color:#f4c64d !important;
  font-weight:900 !important;

  box-shadow:
    inset 0 0 20px rgba(232,184,63,.035);
}

#adminDashboard button[data-open="productModal"]:hover,
#adminDashboard button[data-open="entryModal"]:hover{
  background:
    rgba(232,184,63,.20) !important;

  border-color:#e8b83f !important;

  box-shadow:
    0 8px 25px rgba(232,184,63,.12);
}


/* =====================================================
   TÍTULOS DE SECCIONES
   ===================================================== */

#adminDashboard .panel > h3{
  display:flex;
  align-items:center;
  gap:9px;
margin-bottom:18px !important;
color:#f6f6f6 !important;
font-size:20px !important;
font-weight:900 !important;
}

#adminDashboard .panel > h3::before{
  content:"";
  width:4px;
  height:22px;
  border-radius:10px;

  background:linear-gradient(
    #f2ca61,
    #b77d12
  );

  box-shadow:0 0 15px rgba(232,184,63,.25);
}


/* ===== RESPONSIVE ===== */

@media(max-width:850px){

  #adminDashboard .cards{
    grid-template-columns:1fr !important;
  }

  #adminDashboard .admin-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  #adminDashboard .admin-actions > *{
    width:100% !important;
  }
}
/* =========================================
   TOPBAR OLIMPO GROUP GTMO
========================================= */
.branded-topbar{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  background:
    linear-gradient(135deg, rgba(10,12,16,.98), rgba(18,22,30,.98));
  border-bottom: 1px solid rgba(212,175,55,.28);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.brand-left{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.brand-logo{
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(212,175,55,.25);
  padding: 6px;
  box-shadow: 0 0 18px rgba(212,175,55,.12);
}

.brand-text{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-mini{
  font-size: 12px;
  color: rgba(255,255,255,.58);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand-title{
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .04em;
  color: #d4af37;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(212,175,55,.18);
}

.brand-subtitle{
  font-size: 13px;
  color: rgba(255,255,255,.72);
  margin-top: 2px;
}

.topbar-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

.sync-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(36, 98, 64, .28);
  color: #9df0b7;
  border: 1px solid rgba(120,255,170,.18);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.menu-trigger{
  width: 48px;
  height: 48px;
  border: 1px solid rgba(212,175,55,.26);
  border-radius: 14px;
  background: linear-gradient(135deg, #1b2028, #12161c);
  color: #f3d36b;
  font-size: 23px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}

.menu-trigger:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(212,175,55,.14);
}

/* Responsive */
@media (max-width: 760px){
  .branded-topbar{
    padding: 12px 14px;
    gap: 10px;
  }

  .brand-logo{
    width: 46px;
    height: 46px;
  }

  .brand-title{
    font-size: 18px;
  }

  .brand-subtitle{
    font-size: 11px;
  }

  .sync-badge{
    display: none;
  }

  .menu-trigger{
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}
/* =====================================================
   BARRA SUPERIOR — OLIMPO GROUP GTMO
   ===================================================== */

.branded-topbar{
  width:100% !important;
  min-height:92px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  padding:14px 28px !important;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(232,184,63,.10),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #07090b,
      #11161a
    ) !important;

  border-bottom:
    1px solid rgba(232,184,63,.30) !important;

  box-shadow:
    0 12px 35px rgba(0,0,0,.35) !important;
}


/* ===== LOGO + NOMBRE ===== */

.brand-left{
  flex:1;
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}

.brand-logo{
  width:72px !important;
  height:72px !important;

  object-fit:contain;

  border-radius:16px;

  background:#07090b;

  border:
    1px solid rgba(232,184,63,.32);

  padding:5px;

  box-shadow:
    0 0 22px rgba(232,184,63,.13);
}

.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.brand-mini{
  color:#8e969c !important;
  font-size:11px !important;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:1.6px;
}

.brand-title{
  margin-top:2px;

  color:#e8b83f !important;

  font-size:30px !important;
  font-weight:950 !important;

  letter-spacing:1.5px;

  text-shadow:
    0 0 18px rgba(232,184,63,.15);
}

.brand-subtitle{
  margin-top:3px;

  color:#a9b0b5 !important;

  font-size:13px !important;
  font-weight:600;
}


/* ===== DERECHA ===== */

.branded-topbar .top-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;

  gap:12px !important;

  margin-left:auto;
  }
  /* ===== BARRA SUPERIOR OLIMPO GROUP ===== */

.topbar.branded-topbar{
  position:sticky;
  top:0;
  z-index:100;
  width:100%;
  max-width:none;
  margin:0;
  padding:14px 24px;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:linear-gradient(90deg,#070907 0%,#101810 55%,#161108 100%);
  border-bottom:2px solid #c9a227;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}

.brand-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand-logo{
  width:64px;
  height:64px;
  object-fit:contain;
  flex-shrink:0;
}

.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.brand-mini{
  color:#b9b9b9;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
}

.brand-title{
  color:#d4af37;
  font-size:24px;
  font-weight:900;
  letter-spacing:1px;
  line-height:1.1;
}

.brand-subtitle{
  color:#f2f2f2;
  font-size:12px;
  margin-top:3px;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* TELÉFONOS Y PANTALLAS PEQUEÑAS */
@media(max-width:720px){
  .topbar.branded-topbar{
    padding:10px 12px;
  }

  .brand-logo{
    width:46px;
    height:46px;
  }

  .brand-title{
    font-size:17px;
  }

  .brand-mini{
    font-size:9px;
  }

  .brand-subtitle{
    font-size:10px;
  }
}
.brand-logo{
  width:76px;
  height:76px;
  flex-shrink:0;

  object-fit:cover;
  object-position:center 18%;

  border:2px solid #d4af37;
  border-radius:18px;

  background:#090c0a;
  padding:0;

  box-shadow:
    0 0 0 2px rgba(212,175,55,.15),
    0 0 20px rgba(212,175,55,.35);
}/* ===== DATOS DEL USUARIO ===== */

.identity-bar{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:18px 20px;
  background:#0b0f0d;
  border-bottom:1px solid rgba(212,175,55,.22);
}

.identity-item{
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(145deg,#141916,#0c0f0d);
  border:1px solid rgba(212,175,55,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.identity-item .label{
  color:#a9aaa9;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.identity-item .value{
  display:block;
  margin-top:6px;
  color:#d4af37;
  font-size:16px;
  font-weight:800;
}

@media(max-width:720px){
  .identity-bar{
    grid-template-columns:1fr;
  }
}
/* ===== DASHBOARD ADMINISTRADOR ===== */

.dashboard-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:20px 0;
}

.metric-card{
  min-height:120px;
  padding:20px;
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:16px;

  background:linear-gradient(145deg,#151a17,#0b0f0d);
  border:1px solid rgba(212,175,55,.28);
  box-shadow:0 8px 24px rgba(0,0,0,.32);
}

.metric-card:hover{
  transform:translateY(-2px);
  border-color:#d4af37;
}

.metric-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:25px;

  background:rgba(212,175,55,.10);
  border:1px solid rgba(212,175,55,.30);
}

.metric-info{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.metric-info span{
  color:#aeb5b0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.metric-info strong{
  color:#d4af37;
  font-size:25px;
  font-weight:900;
}

.metric-info small{
  color:#777f7a;
  font-size:11px;
}

.profit-card{
  border-color:rgba(212,175,55,.48);
}

@media(max-width:720px){
  .dashboard-cards{
    grid-template-columns:1fr;
  }
}
/* ===== DISTRIBUCIÓN FINAL DASHBOARD ===== */

@media (min-width:900px){

  .dashboard-cards{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:14px;
  }

  .dashboard-cards .metric-card{
    grid-column:span 2;
  }

  .dashboard-cards .metric-card:nth-child(4),
  .dashboard-cards .metric-card:nth-child(5){
    grid-column:span 3;
  }
}

@media (min-width:721px) and (max-width:899px){

  .dashboard-cards{
    grid-template-columns:repeat(2,1fr);
  }

}
/* FORZAR DASHBOARD ESCRITORIO */
.dashboard-cards{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:14px !important;
}

.dashboard-cards .metric-card{
  grid-column:span 2 !important;
  width:auto !important;
}

.dashboard-cards .metric-card:nth-child(4),
.dashboard-cards .metric-card:nth-child(5){
  grid-column:span 3 !important;
}

/* Teléfonos */
@media (max-width:720px){
  .dashboard-cards{
    grid-template-columns:1fr !important;
  }

  .dashboard-cards .metric-card{
    grid-column:span 1 !important;
  }
}
/* ===== MODAL CAMBIAR NOMBRE - OLIMPO GROUP ===== */

.rename-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.rename-modal.active {
  display: flex;
}

.rename-modal-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(145deg, #111111, #1b1b1b);
  border: 1px solid #c99b32;
  border-radius: 22px;
  padding: 30px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(201, 155, 50, 0.12);
  text-align: center;
}

.rename-modal-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  background: rgba(201, 155, 50, 0.12);
  border: 1px solid #c99b32;
}

.rename-modal-card h2 {
  margin: 0 0 8px;
  color: #d4af37;
  font-size: 24px;
}

.rename-modal-card p {
  margin: 0 0 22px;
  color: #aaa;
  font-size: 14px;
}

#renamePointInput {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #70591f;
  background: #080808;
  color: #fff;
  font-size: 16px;
  outline: none;
}

#renamePointInput:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

.rename-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.rename-modal-actions button {
  flex: 1;
  padding: 13px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

#cancelRenamePoint {
  background: #181818;
  color: #ccc;
  border: 1px solid #3a3a3a;
}

#saveRenamePoint {
  background: linear-gradient(135deg, #b8860b, #e0ba48);
  color: #090909;
  border: 1px solid #e3c05c;
}

#saveRenamePoint:hover {
  transform: translateY(-1px);
}
.olympo-toast {
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 10000;

  display: flex;
  align-items: center;
  gap: 14px;

  min-width: 300px;
  max-width: 420px;
  padding: 16px 18px;

  background: linear-gradient(145deg, #101010, #1a1a1a);
  border: 1px solid #d4af37;
  border-radius: 16px;

  box-shadow:
    0 15px 40px rgba(0, 0, 0, .55),
    0 0 20px rgba(212, 175, 55, .12);

  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;

  transition: .3s ease;
}

.olympo-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.olympo-toast-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: linear-gradient(135deg, #b8860b, #e0ba48);
  color: #0b0b0b;

  font-size: 22px;
  font-weight: 900;
}

.olympo-toast-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.olympo-toast-text strong {
  color: #d4af37;
  font-size: 15px;
}

.olympo-toast-text span {
  color: #ddd;
  font-size: 13px;
}

/* ===== Sesiones activas ===== */
.session-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid rgba(212,175,55,.12);
}
.session-row:last-of-type{ border-bottom:0; }
.session-row span{
  color:#9aa0a6;
  font-size:13px;
}
.session-row strong{
  color:#f2e2b0;
  font-size:14px;
  text-align:right;
  word-break:break-word;
}
.session-row strong.session-active{
  color:#4ade80;
}

.session-item{
  border:1px solid rgba(212,175,55,.28);
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:14px;
  background:linear-gradient(180deg, rgba(212,175,55,.06), rgba(0,0,0,.25));
}
.session-item:last-child{ margin-bottom:0; }
.session-item .revoke-one{
  margin-top:12px;
  width:100%;
}

/* ===== REGISTRO DE ACTIVIDAD ===== */
.activity-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 16px;
}
.activity-filters select,
.activity-filters input{
  flex:1 1 160px;
  background:#0d0d0d;
  border:1px solid rgba(212,175,55,.35);
  color:#f5e9c8;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
}
.activity-filters button{
  flex:0 0 auto;
  background:linear-gradient(135deg,#d4af37,#b8860b);
  color:#0a0a0a;
  border:none;
  border-radius:10px;
  padding:10px 18px;
  font-weight:700;
  cursor:pointer;
}
.activity-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:420px;
  overflow-y:auto;
}
.activity-item{
  background:#0d0d0d;
  border:1px solid rgba(212,175,55,.22);
  border-left:3px solid #d4af37;
  border-radius:10px;
  padding:12px 14px;
}
.activity-item.bad{ border-left-color:#ff6b6b; }
.activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.activity-head strong{ color:#d4af37; font-size:14px; }
.activity-status{
  font-size:11px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.activity-status.ok{ background:rgba(212,175,55,.15); color:#d4af37; }
.activity-status.bad{ background:rgba(255,107,107,.15); color:#ff6b6b; }
.activity-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  font-size:12px;
  color:#bfb08a;
}
.activity-desc{
  margin:8px 0 0;
  font-size:13px;
  color:#e8e8e8;
}
.activity-config{
  background:#0d0d0d;
  border:1px solid rgba(255,107,107,.35);
  border-radius:10px;
  padding:14px;
  font-size:13px;
  color:#e8e8e8;
}
.activity-config strong{ color:#ff6b6b; display:block; margin-bottom:6px; }
.activity-config code{
  background:rgba(212,175,55,.12);
  color:#d4af37;
  padding:1px 5px;
  border-radius:4px;
}

/* ===== ALMACÉN CENTRAL ===== */
.wh-breakdown{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.wh-breakdown-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border:1px solid rgba(212,175,55,.25);
  border-radius:999px;
  background:rgba(0,0,0,.25);
  font-size:12px;
  color:#cfd3cd;
}
.wh-breakdown-item b{ color:#d4af37; }
.wh-breakdown-item.warehouse{
  border-color:rgba(212,175,55,.6);
  background:rgba(212,175,55,.12);
}
.wh-row .right b{ color:#d4af37; }

/* ===== LOGIN — NEGRO Y DORADO ===== */
.login-screen{
  background:
    radial-gradient(circle at 80% 0%, rgba(232,184,63,.10), transparent 30%),
    linear-gradient(145deg,#07090b,#0c1114 55%,#080b0d) !important;
}
.login-card{
  background:linear-gradient(180deg,#11161a,#0c1013) !important;
  border:1px solid rgba(232,184,63,.22);
  box-shadow:0 25px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  color:#f5f5f5;
}
.login-card .brand{
  background:linear-gradient(90deg,#e8b83f,#ffcf58);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.login-card .subtitle{ color:#929aa1; }
.login-card h2{ color:#f5f5f5; }
.login-card label{ color:#cfd3cd; }
.login-card input{
  background:#0d1114 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#f5f5f5 !important;
}
.login-card input::placeholder{ color:#6d757b; }
.login-card input:focus{
  outline:none;
  border-color:rgba(232,184,63,.55) !important;
  box-shadow:0 0 0 3px rgba(232,184,63,.12);
}
.login-card .primary{
  background:linear-gradient(90deg,#e8b83f,#ffcf58);
  color:#0b0e10;
}
.login-card .muted,
.login-card small{ color:#929aa1; }
.login-card .msg{ color:#ff8f8f; }

/* ===== Almacén Central: botón dorado y sección ===== */
.gold-btn{
  background: linear-gradient(135deg, #f5d485, #c9a227 55%, #8a6b12);
  color:#1a1408;
  border:1px solid rgba(245,212,133,.65);
  border-radius:12px;
  padding:10px 18px;
  font-weight:800;
  letter-spacing:.3px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(201,162,39,.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.gold-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 10px 24px rgba(201,162,39,.38); }
.gold-btn:active{ transform:translateY(0); }

#warehouseScreen .wh-head{ margin-bottom:14px; }
#warehouseScreen .wh-head h2{
  margin:8px 0 4px;
  color:#f0d693;
  letter-spacing:.5px;
}
#warehouseScreen .wh-head .muted{ margin:0; }
#warehouseScreen .wh-head .ghost{
  background:transparent;
  color:#e9cf8f;
  border:1px solid rgba(233,207,143,.35);
  border-radius:10px;
  padding:6px 12px;
  cursor:pointer;
}
#warehouseScreen .wh-head .ghost:hover{ background:rgba(233,207,143,.1); }

/* ================= PANEL ADMINISTRATIVO — Dark Gold Premium ================= */
:root{
  --ol-gold:#c9a84c;
  --ol-gold-soft:#f0d693;
  --ol-panel:#12130f;
  --ol-panel-2:#191a15;
  --ol-line:rgba(201,168,76,.18);
}

/* Topbar */
.topbar-clock{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; margin-right:6px; }
.topbar-clock strong{ color:var(--ol-gold-soft); font-size:15px; letter-spacing:.5px; }
.topbar-clock span{ color:#9aa094; font-size:11px; text-transform:capitalize; }
.icon-btn{
  position:relative; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid var(--ol-line); background:rgba(255,255,255,.03);
  color:var(--ol-gold-soft); cursor:pointer; transition:.15s;
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ background:rgba(201,168,76,.12); }
.notif-dot{ position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:#e0b64a; box-shadow:0 0 0 2px #0d0f0b; }
.notif-panel{
  position:fixed; top:74px; right:16px; width:min(340px,92vw); z-index:60;
  background:linear-gradient(180deg,#15160f,#0e0f0a); border:1px solid var(--ol-line);
  border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.6); overflow:hidden;
}
.notif-panel .notif-head{ padding:12px 16px; font-weight:700; color:var(--ol-gold-soft); border-bottom:1px solid var(--ol-line); }
.notif-panel .notif-item{ padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.05); font-size:13px; color:#d6d8cf; }
.notif-panel .notif-item b{ color:var(--ol-gold-soft); }
.notif-panel .empty{ padding:16px; }

/* Cabecera del panel */
.admin-head{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end;
  padding:18px 0 14px; border-bottom:1px solid var(--ol-line); margin-bottom:18px;
}
.admin-head .eyebrow{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ol-gold); }
.admin-head h2{ margin:4px 0 2px; color:#f4f2ea; font-size:26px; letter-spacing:.4px; }
.admin-head-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.admin-head-actions .rate-field{ display:flex; flex-direction:column; font-size:11px; color:#9aa094; gap:4px; }
.admin-head-actions .rate-field input{ width:110px; }

/* Acceso destacado Almacén Central */
.warehouse-hero{
  width:100%; display:flex; align-items:center; gap:16px; text-align:left; cursor:pointer;
  padding:18px 20px; margin-bottom:20px; border-radius:18px;
  background:linear-gradient(135deg, rgba(201,168,76,.16), rgba(20,21,16,.9) 55%);
  border:1px solid rgba(201,168,76,.4); color:#f2efe4;
  transition:transform .16s ease, box-shadow .16s ease;
}
.warehouse-hero:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.45); }
.wh-hero-icon{ width:52px; height:52px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,#f5d485,#c9a227); color:#1a1408; }
.wh-hero-icon svg{ width:26px; height:26px; }
.wh-hero-body{ flex:1; display:flex; flex-direction:column; gap:3px; }
.wh-hero-body strong{ font-size:18px; color:var(--ol-gold-soft); letter-spacing:.4px; }
.wh-hero-body small{ color:#a5aa9c; }
.wh-hero-stats{ display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; font-size:12px; color:#9aa094; }
.wh-hero-stats b{ color:#e9e6da; }
.wh-hero-go{ color:var(--ol-gold); }
.wh-hero-go svg{ width:22px; height:22px; }

/* KPIs */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-bottom:22px; }
.kpi-card{
  position:relative; display:flex; gap:14px; align-items:flex-start; padding:16px;
  border-radius:16px; border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,var(--ol-panel-2),var(--ol-panel));
  transition:border-color .16s ease, transform .16s ease;
}
.kpi-card:hover{ border-color:rgba(201,168,76,.45); transform:translateY(-2px); }
.kpi-card.highlight{ border-color:rgba(201,168,76,.45); background:linear-gradient(180deg,rgba(201,168,76,.12),var(--ol-panel)); }
.kpi-icon{ width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  color:var(--ol-gold-soft); background:rgba(201,168,76,.1); border:1px solid var(--ol-line); }
.kpi-icon svg{ width:20px; height:20px; }
.kpi-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kpi-title{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:#8d9285; }
.kpi-body strong{ font-size:22px; color:#f4f2ea; letter-spacing:.3px; word-break:break-word; }
.kpi-body small{ color:#868b7c; font-size:11.5px; }
.kpi-trend{ position:absolute; top:14px; right:14px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.kpi-trend.up{ color:#7bd88f; background:rgba(123,216,143,.12); }
.kpi-trend.down{ color:#d98a8a; background:rgba(217,138,138,.12); }

/* Finanzas */
.finance-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:18px; }
.fin-item{ padding:13px 15px; border-radius:13px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.fin-item span{ display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#8d9285; margin-bottom:5px; }
.fin-item strong{ font-size:18px; color:#f0eee4; }
.fin-item.pos strong{ color:#7bd88f; }
.fin-item.neg strong{ color:#d98a8a; }

.chart-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.chart-box{ padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); }
.chart-box h4{ margin:0 0 12px; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ol-gold); }
.bar-row{ display:grid; grid-template-columns:98px 1fr auto; gap:10px; align-items:center; margin-bottom:9px; font-size:12px; color:#c9ccc1; }
.bar-row .bar-track{ height:8px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.bar-row .bar-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,#8a6b12,#f0d693); }
.bar-row .bar-val{ color:#eae7db; font-weight:600; white-space:nowrap; }
.bar-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Inventario con semáforo */
.stock-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:#8d9285; margin-bottom:10px; }
.stock-legend .dot, .stock-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.dot.ok, .stock-dot.ok{ background:#5fb37a; }
.dot.low, .stock-dot.low{ background:var(--ol-gold); }
.dot.out, .stock-dot.out{ background:#9c4a4a; }
.stock-tag{ font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; padding:2px 8px; border-radius:999px; margin-left:8px; }
.stock-tag.ok{ color:#7bd88f; background:rgba(123,216,143,.1); }
.stock-tag.low{ color:var(--ol-gold-soft); background:rgba(201,168,76,.14); }
.stock-tag.out{ color:#d98a8a; background:rgba(156,74,74,.16); }

@media (max-width:640px){
  .admin-head{ flex-direction:column; align-items:stretch; }
  .admin-head-actions{ width:100%; }
  .kpi-body strong{ font-size:19px; }
  .topbar-clock{ display:none; }
  .warehouse-hero{ flex-wrap:wrap; }
}

/* ===== Tarjetas interactivas del panel administrativo ===== */
.kpi-card[data-drill]{
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.kpi-card[data-drill]:hover,
.kpi-card[data-drill]:focus-visible{
  transform: translateY(-4px);
  border-color: rgba(212,175,55,.55);
  background: linear-gradient(150deg, rgba(212,175,55,.10), rgba(255,255,255,.02));
  box-shadow: 0 18px 34px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(212,175,55,.20);
  outline: none;
}
.kpi-card[data-drill]:active{ transform: translateY(-1px); }
.kpi-go{
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 22px;
  height: 22px;
  color: rgba(212,175,55,.65);
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.kpi-go svg{ width: 100%; height: 100%; }
.kpi-card[data-drill]:hover .kpi-go,
.kpi-card[data-drill]:focus-visible .kpi-go{ opacity: 1; transform: translateX(3px); }

.fin-item.clickable{ cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.fin-item.clickable:hover{ transform: translateY(-2px); border-color: rgba(212,175,55,.5); }

@media (max-width: 720px){
  .kpi-card[data-drill]{ min-height: 96px; }
  .kpi-go{ right: 10px; bottom: 10px; }
}

/* ===== Vistas de detalle ===== */
#drillScreen .drill-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
#drillScreen .drill-filters select,
#drillScreen .drill-filters input{
  flex: 1 1 160px;
  min-width: 140px;
}
.drill-totals{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 0 14px;
  color: rgba(255,255,255,.72);
  font-size: .92rem;
}
.drill-totals b{ color: #d4af37; }
#drillScreen .row.hidden{ display: none; }

/* ===== Panel administrativo simplificado ===== */
.kpi-grid.primary{
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.section-label{
  margin: 28px 0 12px;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(212,175,55,.75);
  font-weight: 600;
}
.quick-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.quick-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 14px 34px 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.quick-item::after{
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(212,175,55,.6);
  font-size: 1.25rem;
}
.quick-item:hover{
  transform: translateY(-3px);
  border-color: rgba(212,175,55,.45);
  background: linear-gradient(150deg, rgba(212,175,55,.10), rgba(255,255,255,.02));
}
.quick-item .q-label{ font-size: .78rem; color: rgba(255,255,255,.6); letter-spacing: .04em; }
.quick-item strong{ font-size: 1.25rem; color: #f4e3ab; }
.quick-item small{ color: rgba(255,255,255,.45); font-size: .74rem; }

.admin-collapsible{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.admin-collapsible > summary{
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  color: #e9d9a6;
  list-style: none;
}
.admin-collapsible > summary::-webkit-details-marker{ display: none; }
.admin-collapsible > summary::before{ content: "▸ "; color: rgba(212,175,55,.7); }
.admin-collapsible[open] > summary::before{ content: "▾ "; }
.admin-collapsible .panel{ margin: 0 12px 12px; }

/* ===== Productos y costos ===== */
.product-row{
  display: grid;
  grid-template-columns: minmax(200px, 1.2fr) minmax(220px, 1.4fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(150deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.product-row:hover,
.product-row:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.45);
  background: linear-gradient(150deg, rgba(212,175,55,.09), rgba(255,255,255,.02));
  outline: none;
}
.product-row h4{
  margin: 0 0 6px;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .02em;
}
.pr-stock,
.pr-prices{
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .82rem;
  color: rgba(255,255,255,.6);
}
.pr-stock b,
.pr-prices b{ color: rgba(255,255,255,.92); font-weight: 600; }
.pr-profit.pos b{ color: #7fd18d; }
.pr-profit.neg b{ color: #e08a8a; }
.pr-actions{ display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.link-btn{
  background: none;
  border: none;
  color: #d4af37;
  cursor: pointer;
  font-size: .84rem;
  padding: 2px 0;
}
.link-btn:hover{ text-decoration: underline; }
.act-tag{
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(212,175,55,.14);
  color: #e9d9a6;
}
@media (max-width: 820px){
  .product-row{ grid-template-columns: 1fr; }
  .pr-actions{ flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
}

/* ===== Productos y costos ===== */
.products-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.products-head h3{margin:0}
.products-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.products-tools #productSearch{flex:1;min-width:200px;background:#0d0d0d;border:1px solid rgba(212,175,55,.28);color:#f5f5f5;border-radius:10px;padding:10px 12px;font-size:.92rem}
.products-tools #productSearch:focus{outline:none;border-color:var(--ol-gold,#d4af37)}
.product-filters{display:flex;gap:8px;flex-wrap:wrap}
.product-filters .chip{background:#111;border:1px solid rgba(212,175,55,.25);color:#cfcfcf;border-radius:999px;padding:7px 14px;font-size:.82rem;cursor:pointer;transition:.18s}
.product-filters .chip:hover{border-color:rgba(212,175,55,.6);color:#f2e3ad}
.product-filters .chip.active{background:linear-gradient(135deg,#d4af37,#b8912a);border-color:#d4af37;color:#141005;font-weight:600}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.product-card{background:linear-gradient(160deg,#141414,#0c0c0c);border:1px solid rgba(212,175,55,.18);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;transition:.18s}
.product-card:hover{border-color:rgba(212,175,55,.5);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.product-card.is-inactive{opacity:.72}
.pc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer}
.pc-head h4{margin:0;font-size:1rem;color:#f4e7bd;display:flex;align-items:center;gap:8px}
.pc-tags{display:flex;gap:6px;flex-wrap:wrap}
.pc-meta,.pc-stock,.pc-prices{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:.79rem;color:#9d9d9d}
.pc-meta b,.pc-stock b,.pc-prices b{color:#ececec;font-weight:600}
.pc-stock{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:8px 0}
.pc-prices .pr-profit.pos b{color:#63d38b}
.pc-prices .pr-profit.neg b{color:#e2726f}
.pc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.pc-actions button{flex:1;min-width:100px;padding:9px 10px;font-size:.82rem;border-radius:9px}
@media (max-width:640px){
  .products-grid{grid-template-columns:1fr}
  .pc-meta,.pc-stock,.pc-prices{grid-template-columns:1fr}
  .pc-actions button{flex:1 1 100%;padding:12px}
}

/* ============ Inicio compacto: KPIs y módulos ============ */
.admin-vault[hidden]{ display:none !important; }

.kpi-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;
  margin:14px 0 18px;
}
.mini-kpi{
  display:flex; flex-direction:column; gap:2px;
  text-align:left; cursor:pointer;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(212,175,55,.16);
  background:linear-gradient(180deg,#16181a,#111213);
  color:#e9e6df;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mini-kpi:hover{ transform:translateY(-2px); border-color:rgba(212,175,55,.42); box-shadow:0 10px 22px rgba(0,0,0,.42); }
.mini-kpi .mk-label{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#9b968c; }
.mini-kpi strong{ font-size:1.24rem; color:#f2efe8; line-height:1.25; }
.mini-kpi small{ font-size:.74rem; color:#8f8a80; }
.mini-kpi.alert.is-on{ border-color:rgba(212,175,55,.55); }
.mini-kpi.alert.is-on strong{ color:var(--ol-gold,#d4af37); }

.module-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
  margin-bottom:22px;
}
.module-card{
  display:flex; align-items:center; gap:12px;
  text-align:left; cursor:pointer;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(212,175,55,.14);
  background:linear-gradient(180deg,#151719,#101112);
  color:#e9e6df;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.module-card:hover{ transform:translateY(-3px); border-color:rgba(212,175,55,.45); box-shadow:0 14px 28px rgba(0,0,0,.45); }
.module-card .mc-icon{
  width:40px; height:40px; flex:0 0 40px;
  display:grid; place-items:center;
  border-radius:12px;
  background:rgba(212,175,55,.08);
  border:1px solid rgba(212,175,55,.22);
  color:var(--ol-gold,#d4af37);
}
.module-card .mc-icon svg{ width:20px; height:20px; }
.module-card .mc-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.module-card .mc-body strong{ font-size:.98rem; color:#f2efe8; }
.module-card .mc-body small{ font-size:.76rem; color:#8f8a80; }
.module-card .mc-go{ margin-left:auto; color:#6f6a62; font-size:1.3rem; line-height:1; }
.module-card:hover .mc-go{ color:var(--ol-gold,#d4af37); }

@media (max-width:640px){
  .kpi-strip{ grid-template-columns:repeat(2,1fr); }
  .module-grid{ grid-template-columns:1fr; }
}

/* ============ Campos de formulario: negro y dorado en toda la app ============ */
input,
select,
textarea{
  padding:12px !important;
  min-height:44px;
  -webkit-appearance:none;
  appearance:none;
  background-image:none;
  color-scheme:dark;
}
select{
  background-image:linear-gradient(45deg,transparent 50%,#b9b3a6 50%),linear-gradient(135deg,#b9b3a6 50%,transparent 50%) !important;
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50% !important;
  background-size:6px 6px, 6px 6px !important;
  background-repeat:no-repeat !important;
  padding-right:34px !important;
}
select option{ background:#0d1215; color:#fff; }
input::placeholder,
textarea::placeholder{ color:#7e7970 !important; opacity:1; }
input[type="number"]{ -moz-appearance:textfield; }
input:-webkit-autofill,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 0 0 1000px #0d1215 inset !important;
}

/* Texto de ayuda / equivalencias (antes con fondo blanco) */
.hint,
#transferEquivalent,
#entryEquivalent,
#saleEquivalent,
#whEquivalent{
  background:rgba(212,175,55,.06) !important;
  border:1px solid rgba(212,175,55,.16);
  border-radius:12px;
  color:#cfc9bd !important;
  padding:10px 12px;
  font-size:.82rem;
}

/* Botones secundarios de los modales */
dialog .dialog-actions button[type="button"]{
  background:#15181a;
  color:#e6e2da;
  border:1px solid rgba(255,255,255,.14);
}