:root{
  --bg:#111111;
  --surface:#181818;
  --card:#202020;
  --card-2:#232323;
  --gold:#C9A35B;
  --gold-bright:#E4C384;
  --text:#FFFFFF;
  --text-secondary:#9F9F9F;
  --divider:#2B2B2B;
  --success:#4ECB71;
  --error:#EF5350;
  --warning:#F2C94C;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html, body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}

img{ display:block; max-width:100%; }

.eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--gold);
}

.card{
  background:var(--card);
  border:1px solid var(--divider);
  border-radius:18px;
}

.avatar{
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#141414;
  font-weight:700;
  flex-shrink:0;
}

.btn-gold{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:#141414;
  border:none;
  border-radius:16px;
  font-weight:700;
  cursor:pointer;
  transition:transform 0.15s ease, filter 0.2s ease;
}
.btn-gold:active{ transform:scale(0.97); filter:brightness(0.96); }

.btn-ghost{
  background:transparent;
  color:var(--gold);
  border:1px solid var(--divider);
  border-radius:16px;
  font-weight:600;
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.btn-ghost:hover{ border-color:var(--gold); background:rgba(201,163,91,0.06); }

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:600;
}
.pill.success{ background:rgba(78,203,113,0.14); color:var(--success); }
.pill.warning{ background:rgba(242,201,76,0.14); color:var(--warning); }
.pill.error{ background:rgba(239,83,80,0.14); color:var(--error); }
.pill.neutral{ background:rgba(159,159,159,0.12); color:var(--text-secondary); }

::-webkit-scrollbar{ width:0; height:0; }

.fade-in{
  animation:fadeIn 0.5s ease forwards;
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ================================================================
   Barra de navegación inferior — compartida por TODAS las páginas
   del panel admin en móvil (Inicio / Agenda / Caja / Configuración).
   Vive aquí para que sea idéntica en cada archivo sin duplicar CSS.
   ================================================================ */
.dn-bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0;
  background:rgba(24,24,24,0.94); backdrop-filter:blur(16px);
  border-top:1px solid var(--divider);
  padding:8px 6px max(8px, env(safe-area-inset-bottom));
  z-index:90;
}
.dn-nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 0; color:var(--text-secondary); font-size:10.5px; font-weight:600;
  text-decoration:none; cursor:pointer;
}
.dn-nav-item svg{ width:21px; height:21px; }
.dn-nav-item.active{ color:var(--gold); }

@media (max-width:767px){
  .dn-bottom-nav{ display:flex; }
}