:root{
  --primary: #4c4f3a;
  --secondary: #000000;
  --bg: #f7f7f5;
}
*{box-sizing:border-box}
body{
  margin:0; padding:0; background:var(--bg); color:#222;
  font-family:"Nata Sans", system-ui, -apple-system, sans-serif;
}
header, footer{
  background: var(--primary);
  color: white; padding: 14px 18px;
}
.container{max-width:1100px; margin:0 auto; padding: 18px;}
.header-wrap{display:flex; align-items:center; justify-content:space-between; gap:12px}
.logo{display:flex; align-items:center; gap:10px}
.logo img{height:36px}

.card{
  background:white; border-radius:16px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.btn{
  display:inline-block; background:var(--primary); color:white; text-decoration:none;
  padding:10px 16px; border-radius:10px; border:0; cursor:pointer;
}
.btn.secondary{ background: var(--secondary); }
.input{width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px;}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.flash{padding:10px 12px; border-radius:10px; background:#e9f7ef; color:#1e7e34; margin-bottom:12px}
.text-right{text-align:right}
.small{font-size:.9rem; color:#666}
.qr{display:flex; justify-content:center; padding:18px}

/* NAV styles */
.nav-links{
  position:absolute; right:18px; top:64px;
  background: #fff; color:#222; border-radius:12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  padding:12px; display:flex; flex-direction:column; gap:8px; min-width: 200px;
  z-index: 1000;
}
.nav-links a{ color:#222; text-decoration:none; padding:8px 10px; border-radius:8px; display:block }
.nav-links a:hover{ background:#f1f1ef }
.nav-links a.primary{ background: var(--primary); color:#fff }
.nav-links a.primary:hover{ filter: brightness(0.95); }

.hamburger{
  width:44px; height:38px; border-radius:10px; border:0; background:#fff; color:#222; display:flex;
  align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.hamburger span{ display:block; width:22px; height:2px; background:#333; margin:3px 0; transition:transform .2s, opacity .2s }
.hamburger.is-open span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* Responsive tweaks */
@media (min-width: 900px){
  .nav-links{ top:70px; }
}
/* --- MENU / NAV --- */
.nav-links{
  position: absolute; right: 18px; top: 64px;
  background: #fff; color:#222; border-radius:12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  padding:12px; display:flex; flex-direction:column; gap:8px; min-width:220px;
  z-index: 1001;
}
.nav-links a{ color:#222; text-decoration:none; padding:10px 12px; border-radius:8px; display:block; }
.nav-links a:hover{ background:#f1f1ef }
.nav-links a.primary{ background: var(--primary); color:#fff }
.nav-links a.primary:hover{ filter: brightness(0.95); }

/* Estado visible/oculto por clases (no dependemos de [hidden]) */
.nav-links.is-open{ display:flex !important; }
.nav-links.is-closed{ display:none !important; }

/* Overlay para tapar pantalla y cerrar al tocar fuera */
.nav-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.15);
  z-index: 1000;
}
.nav-overlay.hidden{ display:none !important; }

/* Botón hamburguesa */
.hamburger{
  width:44px; height:38px; border-radius:10px; border:0; background:#fff; color:#222; display:flex;
  align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.hamburger span{ display:block; width:22px; height:2px; background:#333; margin:3px 0; transition:transform .2s, opacity .2s }
.hamburger.is-open span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* Por compatibilidad adicional (si alguien dejó el atributo hidden) */
.nav-links[hidden]{ display:none !important; }

/* Ajuste de capa del header para que overlay no tape el contenido al abrir/cerrar */
header{ position: relative; z-index: 1; }