:root{
  --bg: #fffefb;
  --crema: #faf6ef;
  --borde: #e5e0d8;
  --texto: #3a3835;
  --texto-suave: #8c887f;
  --rojo: #8c2f28;
  --rojo-suave: #cf6b63;
  --rojo-bg: #f6e2e0;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden; max-width:100%}
body{
  margin:0; font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--texto);
}
a{color:var(--rojo-suave); text-decoration:none}

/* ---------- Barra superior mobile ---------- */
.topbar-mobile{
  display:none;
  align-items:center; gap:.6rem;
  padding:.75rem 1rem;
  background:var(--crema); border-bottom:1px solid var(--borde);
  position:sticky; top:0; z-index:20;
}
.btn-hamburguesa{
  background:none; border:none; font-size:1.4rem; line-height:1; padding:.2rem .4rem;
  color:var(--texto); cursor:pointer;
}
.logo-mobile{height:28px}
.brand-mobile{font-weight:600; font-size:.95rem}

/* ---------- Overlay ---------- */
.overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:25;
}
.overlay.visible{display:block}

/* ---------- Layout general ---------- */
.layout{display:flex; min-height:100vh}
.sidebar{
  width:220px; flex-shrink:0;
  background:var(--crema); border-right:1px solid var(--borde); padding:1.25rem .9rem;
}
.sidebar .brand{display:flex; align-items:center; gap:.6rem; margin-bottom:1.5rem}
.sidebar .brand img{height:32px}
.sidebar .brand span{font-weight:600}
.btn-cerrar-menu{display:none}
.nav-item{display:flex; align-items:center; gap:.6rem; padding:.7rem .7rem; border-radius:8px; color:var(--texto-suave); margin-bottom:2px; font-size:.95rem}
.nav-item:hover{background:#f1ede4}
.nav-item.active{background:var(--rojo-bg); color:var(--rojo)}
.content{padding:1.5rem 2rem; flex:1; min-width:0}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:.6rem}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:1.5rem}
.card{background:var(--crema); border:1px solid var(--borde); border-radius:10px; padding:1rem}
.card.alerta{background:var(--rojo-bg); border:none}
.card .label{font-size:.8rem; color:var(--texto-suave); margin:0 0 4px}
.card.alerta .label{color:var(--rojo)}
.card .value{font-size:1.5rem; font-weight:600; margin:0}
.card.alerta .value{color:var(--rojo)}
.panel{background:#fff; border:1px solid var(--borde); border-radius:12px; padding:1rem 1.25rem; margin-bottom:1.5rem; max-width:100%}
.panel-title{font-size:.95rem; font-weight:600; margin:0 0 .8rem}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th{color:var(--texto-suave); text-align:left; font-weight:500; padding:.4rem 0; border-bottom:1px solid var(--borde); white-space:nowrap}
td{padding:.6rem 0; border-bottom:1px solid #f1ede4}
.btn{display:inline-block; border:1px solid var(--rojo-suave); color:var(--rojo); background:#fff; padding:.55rem .9rem; border-radius:8px; font-size:.85rem; cursor:pointer}
.btn:hover{background:var(--rojo-bg)}
.btn-primary{background:var(--rojo); color:#fff; border-color:var(--rojo)}
input, select, textarea{width:100%; padding:.6rem .7rem; border:1px solid var(--borde); border-radius:8px; font-size:1rem; margin-bottom:.8rem; font-family:inherit}
label{font-size:.85rem; color:var(--texto-suave); display:block; margin-bottom:.2rem}
.badge{font-size:.75rem; padding:3px 9px; border-radius:20px; background:var(--rojo-bg); color:var(--rojo); white-space:nowrap}
.badge.ok{background:#e7f0e3; color:#3b6d11}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--crema)}
.login-box{background:#fff; border:1px solid var(--borde); border-radius:12px; padding:2.5rem; width:320px; max-width:90vw; text-align:center}
.login-box img{height:60px; margin-bottom:1rem}
.flash{padding:.7rem .9rem; border-radius:8px; margin-bottom:1rem; font-size:.85rem; background:var(--rojo-bg); color:var(--rojo)}
.cumple-item{display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px solid #f1ede4; font-size:.9rem; gap:.5rem}
.cumple-item:last-child{border-bottom:none}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ==================================================================
   CELULAR: el sidebar se convierte en un menu lateral (drawer) que
   se abre con el boton hamburguesa, y el contenido ocupa todo el ancho.
   ================================================================== */
@media (max-width:800px){
  .topbar-mobile{display:flex}
  .layout{display:block}
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:30;
    width:82vw; max-width:300px;
    transform:translateX(-100%);
    transition:transform .2s ease;
    overflow-y:auto;
    box-shadow:2px 0 12px rgba(0,0,0,.15);
  }
  .sidebar.abierto{transform:translateX(0)}
  .sidebar .brand{display:none}
  .btn-cerrar-menu{
    display:block; margin-left:auto; background:none; border:none; font-size:1.3rem;
    padding:.3rem .5rem; color:var(--texto-suave); cursor:pointer;
  }
  .content{padding:1rem; width:100%}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card .value{font-size:1.25rem}
  table{font-size:.85rem}
  .topbar{align-items:flex-start}
  .topbar > div{display:flex; flex-wrap:wrap; gap:.5rem}
  .panel{padding:.9rem 1rem}
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns: 2fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

@media print{
  body{background:#fff}
  .topbar-mobile, .overlay{display:none !important}
}

/* ---------- Pie: Powered & hosted by VCR Next ---------- */
.powered-by{display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:2.5rem; padding:1.2rem 0 .6rem; border-top:1px solid var(--borde); color:var(--texto-suave); font-size:.75rem; letter-spacing:.03em}
.powered-by img{height:26px; width:auto}
.login-screen .powered-by{border-top:none; margin-top:1.5rem; padding:0}
@media print{.powered-by{display:none !important}}