:root{
  --bg:#0b1220; --panel:#101826; --soft:#1a2436;
  --accent:#2dd4bf; --accent2:#60a5fa; --text:#e5e7eb; --muted:#9ca3af;
  --danger:#ef4444; --success:#22c55e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;}
img{max-width:100%;height:auto;border-radius:10px}

.nav{position:sticky;top:0;background:rgba(11,18,32,.8);backdrop-filter: blur(8px);border-bottom:1px solid #1f2937;z-index:10}
.navinner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.logo{display:flex;gap:10px;align-items:center}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{background:#0f172a;border:1px solid #1f2937;color:var(--text);border-radius:8px;padding:8px 10px;cursor:pointer}
.tab.active,.tab:hover{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b1220;font-weight:800}

.container{max-width:1100px;margin:0 auto;padding:16px}
.hero{display:flex;gap:16px;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#0e1726,#0b1220);border:1px solid #1f2937;border-radius:16px;padding:24px}
.hero h1{margin:0 0 6px 0}
.heroimg{width:320px;max-width:45vw}
.quicklinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ql{padding:8px 12px;border-radius:8px;border:1px solid #1f2937;background:#0f172a;cursor:pointer}

.panel{background:var(--panel);border:1px solid #1f2937;border-radius:12px;padding:16px;margin:16px 0;box-shadow: 0 10px 25px rgba(0,0,0,.25)}
.card{background:var(--soft);border:1px solid #1f2937;border-radius:12px;padding:16px}
.kicker{color:var(--muted);text-transform:uppercase;font-weight:800;letter-spacing:.06em;font-size:12px;margin-bottom:8px}
.small{font-size:12px;color:var(--muted)}
.list{margin:0;padding-left:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr} .hero{flex-direction:column;align-items:flex-start} .heroimg{width:100%}}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.input,select,textarea{border-radius:10px;border:1px solid #253041;background:var(--soft);color:var(--text);padding:10px}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#0b1220;border-radius:10px;padding:10px 16px;font-weight:800;cursor:pointer}
.btn.danger{background:#dc2626;color:#fff}

.footer{padding:24px 0;text-align:center;color:var(--muted)}

.view{display:none}
.view.active{display:block}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 10px;border:1px solid #1f2937;border-radius:999px;background:#0f172a;cursor:pointer}
.chip.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b1220;font-weight:800}

.gridMenuDay{display:grid;grid-template-rows:auto auto auto;gap:6px}
.calnav{display:flex;gap:10px;align-items:center}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:8px}
.cell{background:#0f172a;border:1px solid #1f2937;border-radius:10px;padding:8px}
.cell .day{font-weight:800}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid #1f2937;background:#0f172a;color:var(--muted);font-size:12px}
.badge-success{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.35);color:#86efac}
.badge-danger{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.35);color:#fca5a5}
.ill{max-width:480px}

/* Alergias y restricciones — tokens con alto contraste (AA) */
.alergias-scope{{ --alergias-accent:#FFC107; --alergias-accent2:#FFB300; --alergias-ring:#FFE08A; }}
.alergias-scope .chip.active{{ background:linear-gradient(135deg,var(--alergias-accent),var(--alergias-accent2)); color:#0b1220; }}
.alergias-scope .btn{{ background:linear-gradient(135deg,var(--alergias-accent),var(--alergias-accent2)); color:#0b1220; }}
.alergias-scope .chip:focus-visible,.alergias-scope .btn:focus-visible{{ outline:3px solid var(--alergias-accent); outline-offset:2px; }}
.alergias-scope .chip:hover,.alergias-scope .btn:hover{{ filter:brightness(1.06); }}