/* =========================================================
   ADMIN.CSS — Panel administrativo Bocados Sorpresa
   Usa las variables de color/tipografía de styles.css (se carga
   antes que este archivo en cada página del panel).
   ========================================================= */

.admin-body{ background:var(--crema-2); min-height:100vh; }

/* ---------- Barra lateral ---------- */
.admin-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:232px;
  background:var(--cacao); color:var(--crema);
  display:flex; flex-direction:column;
  z-index:50;
}
.admin-sidebar-logo{
  padding:24px 16px;
  border-bottom:1px solid rgba(251,246,237,.12);
  display:flex; justify-content:center;
}
.admin-sidebar-logo img{
  height:92px;
  width:100%;
  max-width:100%;
  object-fit:contain;
  background:var(--blanco);
  padding:12px 18px;
  border-radius:10px;
  display:block;
}
.admin-sidebar-nav{ flex:1; padding:18px 12px; display:flex; flex-direction:column; gap:2px; }
.admin-sidebar-nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:6px;
  color:#D8C9B8; font-family:var(--f-body); font-size:.88rem; font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.admin-sidebar-nav a svg{ flex:none; opacity:.85; }
.admin-sidebar-nav a:hover{ background:rgba(251,246,237,.08); color:var(--crema); }
.admin-sidebar-nav a.activo{ background:var(--dorado); color:var(--cacao); font-weight:600; }
.admin-sidebar-nav a.activo svg{ opacity:1; }
.admin-sidebar-pie{
  padding:16px 12px 22px; border-top:1px solid rgba(251,246,237,.12);
}
.admin-sidebar-pie a{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:6px;
  color:#B8A692; font-size:.82rem;
}
.admin-sidebar-pie a:hover{ background:rgba(251,246,237,.08); color:var(--crema); }

/* ---------- Contenido principal ---------- */
.admin-main{ margin-left:232px; min-height:100vh; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:22px 36px;
  background:var(--crema); border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:30;
}
.admin-topbar h1{ font-size:1.5rem; margin:0; }
.admin-topbar .rotulo{ display:block; margin-bottom:2px; }
.admin-contenido{ padding:30px 36px 60px; max-width:1280px; }

.admin-btn-menu{ display:none; background:none; border:none; cursor:pointer; color:var(--cacao); }

/* ---------- Tarjetas KPI ---------- */
.admin-kpis{
  display:flex; flex-wrap:wrap;
  gap:14px; margin-bottom:32px;
}
.admin-kpi{
  background:var(--blanco); border:1px solid var(--linea); border-radius:10px;
  padding:16px 22px; text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
  flex:1 1 auto; min-width:150px;
}
.admin-kpi:hover{ border-color:var(--dorado); transform:translateY(-2px); }
.admin-kpi.activo{ border-color:var(--dorado); box-shadow:0 0 0 1px var(--dorado); }
.admin-kpi-valor{ font-family:var(--f-body); font-size:1.6rem; font-weight:700; color:var(--cacao); display:block; }
.admin-kpi-label{ font-size:.78rem; color:var(--cacao-suave); margin-top:4px; display:block; }
.admin-kpi-dorado .admin-kpi-valor{ color:var(--dorado); }

/* ---------- Tarjeta contenedora de sección ---------- */
.admin-panel{
  background:var(--blanco); border:1px solid var(--linea); border-radius:10px;
  overflow:hidden; margin-bottom:26px;
}
.admin-panel-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--linea);
}
.admin-panel-header h3{ margin:0; font-size:1.05rem; }

/* ---------- Tabla ---------- */
.admin-tabla{ width:100%; border-collapse:collapse; font-size:.88rem; }
.admin-tabla th{
  text-align:left; padding:12px 22px; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cacao-suave); background:var(--crema-2); font-weight:600;
}
.admin-tabla td{ padding:14px 22px; border-top:1px solid var(--linea); vertical-align:top; }
.admin-tabla tr:hover td{ background:var(--crema-2); }
.admin-tabla a.fila-link{ color:var(--cacao); text-decoration:none; display:block; }
.admin-tabla-vacia{ padding:40px 22px; text-align:center; color:var(--cacao-suave); }

/* ---------- Insignias de estado ---------- */
.badge{
  display:inline-block; padding:4px 11px; border-radius:20px;
  font-size:.72rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.badge-pendiente_pago{ background:#FBF0DD; color:#8A6D1E; }
.badge-pagado{ background:#E4F1E5; color:#2E6B37; }
.badge-en_preparacion{ background:#E4ECF7; color:#2E4F8A; }
.badge-en_camino{ background:#EBE4F7; color:#5B2E8A; }
.badge-entregado{ background:#DCEFE9; color:#1E6B57; }
.badge-cancelado{ background:#FBEAEA; color:#8A2E2E; }
.badge-activa{ background:#E4F1E5; color:#2E6B37; }
.badge-vencida{ background:#F0EAE0; color:#6B5240; }

/* ---------- Formularios pequeños dentro del panel ---------- */
.admin-select-estado{
  font-family:var(--f-body); font-size:.85rem;
  border:1px solid var(--linea); border-radius:6px;
  padding:8px 12px; background:var(--blanco); color:var(--cacao);
}
.admin-buscador{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--linea); border-radius:6px; padding:8px 14px;
  background:var(--blanco); min-width:220px;
}
.admin-buscador input{ border:none; outline:none; font-family:var(--f-body); font-size:.86rem; flex:1; background:none; }

/* ---------- Login ---------- */
.admin-login-envoltura{
  background:var(--cacao); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.admin-login-caja{ background:var(--crema); padding:44px 40px; border-radius:12px; width:100%; max-width:380px; box-shadow:0 20px 50px rgba(0,0,0,.25); text-align:center; }
.admin-login-caja img{ height:110px; margin-bottom:22px; display:block; margin-left:auto; margin-right:auto; }
.admin-login-caja .rotulo, .admin-login-caja h1{ text-align:left; }
.admin-login-caja form{ text-align:left; }

/* ---------- Responsive ---------- */
.admin-panel{ overflow-x:auto; } /* red de seguridad: nunca rompe el ancho de la página */
@media (max-width:880px){
  .admin-sidebar{ transform:translateX(-100%); transition:transform .25s ease; }
  .admin-sidebar.abierta{ transform:translateX(0); box-shadow:8px 0 24px rgba(0,0,0,.25); }
  .admin-main{ margin-left:0; }
  .admin-topbar{ padding:14px 16px; }
  .admin-topbar h1{ font-size:1.25rem; }
  .admin-contenido{ padding:16px 16px 50px; }
  .admin-btn-menu{ display:block; }
  .admin-tabla th:nth-child(n+4), .admin-tabla td:nth-child(n+4){ display:none; }
  .admin-tabla th, .admin-tabla td{ padding:10px 14px; font-size:.82rem; }
  .admin-kpis{ gap:10px; }
  .admin-kpi{ min-width:130px; padding:12px 16px; }
  .admin-kpi{ padding:14px 16px; }
  .admin-kpi-valor{ font-size:1.3rem; }
  .admin-panel-header{ padding:14px 16px; }
  .admin-buscador{ width:100%; min-width:0; }
  .admin-select-estado{ font-size:.78rem; padding:7px 10px; }
}
@media (max-width:480px){
  .admin-kpi{ flex:1 1 45%; min-width:120px; }
  .admin-sidebar{ width:88vw; max-width:280px; }
  .admin-calendario-numero{ font-size:.72rem; }
  .admin-calendario-celda{ min-height:56px; padding:4px; gap:2px; }
  .admin-calendario-chip{ font-size:.6rem; padding:2px 5px; }
  .admin-login-caja{ padding:32px 24px; }
}

/* ---------- Notificaciones ---------- */
.admin-badge-nav{
  margin-left:auto;
  background:var(--berry); color:#fff;
  font-size:.68rem; font-weight:700;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
.admin-sidebar-nav a{ position:relative; }
.admin-btn-campana{
  margin-left:auto;
  background:none; border:1px solid var(--linea); border-radius:8px;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--cacao-suave); cursor:pointer; flex:none;
}
.admin-btn-campana:hover{ border-color:var(--dorado); color:var(--dorado); }
.admin-btn-campana.activa{ background:var(--dorado); border-color:var(--dorado); color:var(--cacao); }

/* ---------- Calendario ---------- */
.admin-calendario{
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:1px; background:var(--linea);
  border:1px solid var(--linea); border-radius:10px; overflow:hidden;
}
.admin-calendario-encabezado{
  background:var(--crema-2); padding:10px 8px; text-align:center;
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--cacao-suave); font-weight:600;
}
.admin-calendario-celda{
  background:var(--blanco); min-height:110px; padding:8px;
  display:flex; flex-direction:column; gap:4px;
}
.admin-calendario-celda.vacia{ background:var(--crema-2); }
.admin-calendario-celda.hoy{ background:#FBF6ED; box-shadow:inset 0 0 0 2px var(--dorado); }
.admin-calendario-numero{ font-family:var(--f-body); font-size:.82rem; font-weight:600; color:var(--cacao-suave); }
.admin-calendario-celda.hoy .admin-calendario-numero{ color:var(--dorado); }
.admin-calendario-chip{
  display:block; font-size:.7rem; padding:3px 7px; border-radius:5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:none; font-weight:600;
}
.admin-calendario-mas{ font-size:.68rem; color:var(--cacao-suave); padding:2px 4px; }

@media (max-width:900px){
  .admin-calendario-celda{ min-height:70px; padding:5px; }
  .admin-calendario-chip{ font-size:.62rem; }
}

/* ---------- Pop-up de bienvenida ---------- */
.admin-bienvenida-fondo{
  position:fixed; inset:0; z-index:200;
  background:rgba(59,42,31,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:bienvenidaFondoEntra .35s ease;
}
.admin-bienvenida-fondo.saliendo{ animation:bienvenidaFondoSale .4s ease forwards; }
.admin-bienvenida-caja{
  background:var(--crema);
  border-radius:16px;
  padding:40px 36px;
  text-align:center;
  max-width:340px; width:100%;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  border-top:3px solid var(--dorado);
  animation:bienvenidaCajaEntra .5s cubic-bezier(.2,.9,.3,1.3);
}
.admin-bienvenida-icono{ width:96px; height:96px; border-radius:50%; margin:0 auto 16px; object-fit:cover; }
.admin-bienvenida-caja h2{ margin-bottom:8px; }
.admin-bienvenida-caja p{ color:var(--cacao-suave); font-size:.9rem; margin-bottom:22px; }
@keyframes bienvenidaFondoEntra{ from{ opacity:0; } to{ opacity:1; } }
@keyframes bienvenidaFondoSale{ from{ opacity:1; } to{ opacity:0; } }
@keyframes bienvenidaCajaEntra{
  from{ opacity:0; transform:scale(.85) translateY(10px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .admin-bienvenida-fondo, .admin-bienvenida-caja{ animation:none; }
}

/* ---------- Analítica / BI ---------- */
.admin-grid-2col{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px;
}
.admin-tabla-compacta th, .admin-tabla-compacta td{ padding:10px 14px; }
@media (max-width:1000px){
  .admin-grid-2col{ grid-template-columns:1fr; }
}