/* Diseño de la carta: reglas fijas de la carta pública (guiadas por atributos data-* y variables --t-*, que genera el servidor
   a partir de valores validados) y editor de diseño del panel. Propietario: agente «motor de personalización». Sin CSS libre del usuario. */

/* ===== Carta pública y vista previa ===== */
html{font-size:calc(100% * var(--t-scale, 1))}
.menu{--dp:.75rem}
.menu[data-density=compact]{--dp:.4rem}
.menu[data-density=airy]{--dp:1.25rem}
.menu[data-theme]{font-synthesis:none}
.menu[data-theme] h1,.menu[data-theme] h2,.menu[data-theme] .dish-name{font-weight:var(--t-head-w, 600);letter-spacing:var(--t-head-ls, -.015em)}
.menu[data-theme] .price{color:var(--t-price, var(--c-ink))}
.menu[data-theme] .cat-nav{background:color-mix(in srgb, var(--c-bg) 78%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.menu[data-theme] .daily{border-radius:var(--t-radius, .5rem)}
.menu[data-layout=grid]{max-width:58rem}

/* Alineación de la cabecera y de los títulos de sección */
.menu[data-align=center] .menu-head,.menu[data-align=center] .cat > h2,.menu[data-align=center] .cat > summary h2{text-align:center}
.menu[data-align=center] .menu-head p{margin-left:auto;margin-right:auto}
.menu[data-align=center] .cat-nav{justify-content:flex-start}
.menu[data-upper=yes] .cat h2,.menu[data-upper=yes] .menu-head h1,.menu[data-upper=yes] .daily h2{text-transform:uppercase;letter-spacing:.06em}

/* Platos: separadores (solo con tarjetas planas; las demás tarjetas llevan su propio marco) */
.menu .dish{padding-top:var(--dp);padding-bottom:var(--dp)}
.menu .dish::after{content:"";display:block;clear:both}
.menu[data-divider=line][data-card=flat] .dish{border-bottom:1px solid var(--c-line)}
.menu[data-divider=dots][data-card=flat] .dish{border-bottom:1px dotted var(--c-line-strong)}
.menu[data-divider=none][data-card=flat] .dish,.menu[data-divider=ornament][data-card=flat] .dish{border-bottom:0}
.menu[data-divider=ornament][data-card=flat] .dishes > .dish + .dish::before{content:"\2726";content:"\2726" / "";display:block;text-align:center;color:var(--c-muted);font-size:.8rem;line-height:1;padding-bottom:var(--dp)}

/* Tarjetas */
.menu[data-card=border] .dish,.menu[data-card=shadow] .dish,.menu[data-card=glass] .dish{
  margin-top:var(--sp-3);padding:var(--dp) var(--sp-3);border:1px solid var(--c-line);border-radius:var(--t-radius, .5rem);background:var(--c-surface);overflow:hidden}
.menu[data-card=border] .dish{border-color:var(--c-line-strong)}
.menu[data-card=shadow] .dish{box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 22px rgba(0,0,0,.12)}
.menu[data-card=glass] .dish{background:color-mix(in srgb, var(--c-surface) 72%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.menu[data-card=border] .dish.featured,.menu[data-card=shadow] .dish.featured,.menu[data-card=glass] .dish.featured{border-color:var(--c-accent)}

/* Disposición */
.menu .dishes{display:block}
.menu[data-layout=grid] .dishes{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));gap:0 var(--sp-3);align-items:start}
.menu[data-layout=grid][data-card=border] .dishes,.menu[data-layout=grid][data-card=shadow] .dishes,.menu[data-layout=grid][data-card=glass] .dishes{gap:0 var(--sp-3)}
.menu[data-layout=compact] .dish-photo{display:none}
.menu[data-layout=compact] .dish{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}

/* Foto del plato */
.menu .dish-photo{border-radius:var(--t-radius, .5rem)}
.menu[data-photo="4:3"] .dish-photo{aspect-ratio:4/3;object-fit:cover}
.menu[data-photo="16:10"] .dish-photo{aspect-ratio:16/10;max-width:none;object-fit:cover}
.menu[data-photo=square] .dish-photo,.menu[data-photo=round] .dish-photo{float:left;width:5.5rem;height:5.5rem;aspect-ratio:1;object-fit:cover;max-width:none;margin:0 var(--sp-3) var(--sp-2) 0}
.menu[data-photo=round] .dish-photo{border-radius:50%}
.menu[data-card=border]:not([data-photo=square]):not([data-photo=round]) .dish-photo,
.menu[data-card=shadow]:not([data-photo=square]):not([data-photo=round]) .dish-photo,
.menu[data-card=glass]:not([data-photo=square]):not([data-photo=round]) .dish-photo{
  width:calc(100% + var(--sp-3) * 2);max-width:none;margin:calc(var(--dp) * -1) calc(var(--sp-3) * -1) var(--sp-2);border-radius:0}

/* ===== Editor de diseño (/Panel/Appearance) ===== */
.lead{font-size:var(--fs-md);color:var(--c-ink-2);max-width:62ch}
.dz{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0, 1fr);padding-bottom:5rem}
.dz-tabs{display:none}
.dz-controls,.dz-preview{min-width:0}
.dz-group{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:0 var(--sp-4);margin-bottom:var(--sp-3)}
.dz-group > summary{cursor:pointer;min-height:var(--hit);display:flex;align-items:center;font:700 var(--fs-md)/1.2 var(--f-sans);list-style:none;padding:var(--sp-2) 0}
.dz-group > summary::-webkit-details-marker{display:none}
.dz-group > summary::after{content:"\25BE";margin-left:auto;color:var(--c-muted)}
.dz-group:not([open]) > summary::after{content:"\25B8"}
.dz-group[open] > summary{border-bottom:1px solid var(--c-line);margin-bottom:var(--sp-3)}
.dz-group[open]{padding-bottom:var(--sp-3)}
.dz-field{border:0;padding:0;margin:0 0 var(--sp-4);min-width:0}
.dz-field > legend,.dz-field > label,.dz-label{display:block;font-weight:600;margin-bottom:var(--sp-1);padding:0}
.dz-field .hint,.dz-group > .hint{color:var(--c-muted);font-size:var(--fs-sm);margin:0 0 var(--sp-2)}

/* Opciones en forma de fichas (radios accesibles) */
.dz-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.dz-chip{position:relative;display:block;cursor:pointer}
.dz-chip input,.dz-font input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.dz-chip > span{display:flex;flex-direction:column;justify-content:center;min-height:var(--hit);padding:var(--sp-1) var(--sp-4);border:2px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);line-height:1.25}
.dz-chip small{color:var(--c-ink-2);font-size:var(--fs-xs)}
.dz-chip:hover > span{border-color:var(--c-accent)}
.dz-chip input:checked + span{border-color:var(--c-ink);background:var(--c-ink);color:var(--c-bg)}
.dz-chip input:checked + span small{color:var(--c-bg)}
.dz-chip input:focus-visible + span,.dz-font input:focus-visible + span{outline:3px solid var(--c-focus);outline-offset:2px}

/* Tipografías: cada opción se muestra con su propia letra */
.dz-fontgroup-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);margin:var(--sp-2) 0 var(--sp-1);font-weight:600}
.dz-fontgrid{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));gap:var(--sp-2)}
.dz-font{position:relative;display:block;cursor:pointer}
.dz-fontcard{display:flex;flex-direction:column;gap:.15rem;min-height:var(--hit);padding:var(--sp-2) var(--sp-3);border:2px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);height:100%}
.dz-fontname{font-size:1.25rem;line-height:1.2;font-weight:600}
.dz-fontsample{font-size:var(--fs-sm);color:var(--c-ink-2)}
.dz-font:hover .dz-fontcard{border-color:var(--c-accent)}
.dz-font input:checked + .dz-fontcard{border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink);background:var(--c-surface-2)}
.dz-font input:checked + .dz-fontcard .dz-fontname::after{content:" \2713";font-family:var(--f-sans);font-size:1rem;color:var(--c-success)}
/* Catálogo: una clase por tipografía (generado desde FONTS en src/theme.ts; una prueba lo comprueba) */
.ff-sistema-serif{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif}
.ff-sistema-sans{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ff-fraunces{font-family:"Fraunces",Georgia,"Times New Roman",serif}
.ff-playfair-display{font-family:"Playfair Display",Georgia,"Times New Roman",serif}
.ff-lora{font-family:"Lora",Georgia,"Times New Roman",serif}
.ff-cormorant-garamond{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif}
.ff-dm-serif-display{font-family:"DM Serif Display",Georgia,"Times New Roman",serif}
.ff-merriweather{font-family:"Merriweather",Georgia,"Times New Roman",serif}
.ff-abril-fatface{font-family:"Abril Fatface",Georgia,"Times New Roman",serif}
.ff-inter{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ff-poppins{font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ff-nunito{font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ff-montserrat{font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ff-raleway{font-family:"Raleway",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ff-work-sans{font-family:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ff-dm-sans{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ff-space-grotesk{font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ff-bricolage-grotesque{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ff-caveat{font-family:"Caveat","Segoe Script","Brush Script MT",cursive}
.ff-pacifico{font-family:"Pacifico","Segoe Script","Brush Script MT",cursive}

/* Colores */
.dz-color-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.dz-color input[type=color]{width:3.5rem;height:var(--hit);padding:2px;border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);cursor:pointer}
.dz-hex{font-size:var(--fs-sm);padding:.15rem .5rem;border-radius:var(--r-sm);background:var(--c-surface-2);color:var(--c-ink)}
.dz-swatches{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:var(--sp-2)}
.dz-swatch{width:var(--hit);height:var(--hit);border-radius:50%;border:2px solid var(--c-line-strong);cursor:pointer;padding:0;background:var(--c-surface)}
.dz-swatch:hover{border-color:var(--c-ink)}
.dz-swatch[aria-pressed=true]{border-color:var(--c-ink);box-shadow:0 0 0 2px var(--c-bg),0 0 0 4px var(--c-ink)}
.dz-range input[type=range]{width:100%;min-height:var(--hit);accent-color:var(--c-accent)}
.dz-range output{font-variant-numeric:tabular-nums;color:var(--c-ink-2);font-weight:400}
.dz-inline-check{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--hit)}
.dz-group .check{margin-bottom:var(--sp-3)}

/* Estilos listos */
.dz-presets{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));gap:var(--sp-2);margin-bottom:var(--sp-3)}
.dz-preset{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;min-height:var(--hit);padding:var(--sp-2) var(--sp-3);border:2px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);font:inherit;cursor:pointer}
.dz-preset small{color:var(--c-ink-2);font-size:var(--fs-xs);line-height:1.3}
.dz-preset:hover{border-color:var(--c-accent)}
.dz-preset[aria-pressed=true]{border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
.dz-preset-sw{display:flex;width:100%;height:1.6rem;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--c-line)}
.dz-preset-sw:empty{background:var(--c-surface-2)}
.dz-preset-sw i{flex:1}

/* Miniaturas de patrones: la máscara se pinta con el color del texto */
.dz-pat > span{align-items:center;gap:.2rem;min-width:5.5rem}
.pt{display:block;width:4rem;height:2.25rem;border-radius:var(--r-sm);background:currentColor;opacity:.55;-webkit-mask-size:auto;mask-size:auto;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.pt-dots{-webkit-mask-image:url("/img/patterns/dots.svg");mask-image:url("/img/patterns/dots.svg")}
.pt-lines{-webkit-mask-image:url("/img/patterns/lines.svg");mask-image:url("/img/patterns/lines.svg")}
.pt-grid{-webkit-mask-image:url("/img/patterns/grid.svg");mask-image:url("/img/patterns/grid.svg")}
.pt-paper{-webkit-mask-image:url("/img/patterns/paper.svg");mask-image:url("/img/patterns/paper.svg")}
.pt-waves{-webkit-mask-image:url("/img/patterns/waves.svg");mask-image:url("/img/patterns/waves.svg")}
.pt-diamonds{-webkit-mask-image:url("/img/patterns/diamonds.svg");mask-image:url("/img/patterns/diamonds.svg")}

/* Imagen de fondo */
.dz-bgpreview{margin-bottom:var(--sp-2)}
.dz-bgpreview img{border-radius:var(--r-md);border:1px solid var(--c-line);max-width:10rem;height:auto;display:block}
.dz-bgpick{position:relative;display:inline-block;touch-action:none;cursor:crosshair;max-width:100%}
.dz-bgdot{position:absolute;width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;border-radius:50%;border:3px solid #fff;background:var(--c-accent);box-shadow:0 0 0 2px #032C4C,0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.dz-field input[type=file]{width:100%;min-height:var(--hit)}

/* Vista previa con marco de móvil */
.dz-preview{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.dz-devices{display:flex;gap:var(--sp-1);flex-wrap:wrap;justify-content:center}
.dz-device{min-height:var(--hit);padding:0 var(--sp-3);border:1px solid var(--c-line-strong);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);font:600 var(--fs-sm) var(--f-sans);cursor:pointer}
.dz-device[aria-pressed=true]{background:var(--c-ink);color:var(--c-bg);border-color:var(--c-ink)}
.dz-phone{width:100%;max-width:23.5rem;border:.6rem solid #111827;border-radius:2.1rem;background:#111827;box-shadow:0 18px 40px rgba(3,44,76,.25);position:relative;transition:max-width .25s ease}
.dz-phone[data-device=tablet]{max-width:46rem;border-radius:1.4rem}
.dz-phone[data-device=desktop]{max-width:70rem;border-radius:.8rem;border-width:.45rem}
.dz-frame{display:block;width:100%;height:min(42rem, 78vh);border:0;border-radius:1.5rem;background:#fff}
.dz-phone[data-device=tablet] .dz-frame,.dz-phone[data-device=desktop] .dz-frame{border-radius:.6rem}
.dz-notes{width:100%;max-width:46rem}
.dz-notes:empty{display:none}
.dz-notes p{margin:0 0 var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:var(--c-warn-bg);color:var(--c-warn-ink);font-size:var(--fs-sm)}
.dz-preview .hint{margin:0}

/* Barra de guardado */
.dz-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--r-md);box-shadow:0 -4px 18px rgba(3,44,76,.12)}
.dz-state{font-weight:600;color:var(--c-ink-2)}
.dz-state[data-dirty=true]{color:var(--c-warn-ink);background:var(--c-warn-bg);padding:.2rem .6rem;border-radius:var(--r-pill)}
.dz-state[data-dirty=true]::before{content:"\25CF  "}

/* Con JavaScript: en móvil, pestañas «Ajustes | Ver carta» */
@media (max-width:61.99rem){
  .dz--js .dz-tabs{display:flex;gap:var(--sp-1);position:sticky;top:0;z-index:6;padding:var(--sp-2) 0;background:var(--c-bg)}
  .dz--js .dz-tabs button{flex:1;min-height:var(--hit);border:2px solid var(--c-line-strong);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);font:700 var(--fs-base) var(--f-sans);cursor:pointer}
  .dz--js .dz-tabs button[aria-selected=true]{background:var(--c-ink);color:var(--c-bg);border-color:var(--c-ink)}
  .dz--js[data-tab=controls] .dz-preview{display:none}
  .dz--js[data-tab=preview] .dz-controls{display:none}
  .dz--js .dz-frame{height:min(38rem, 70vh)}
  /* Barras fijas compactas: juntas (pestañas arriba, guardar abajo) no deben comerse la pantalla del móvil */
  .dz--js .dz-tabs{padding:var(--sp-1) 0}
  .dz--js .dz-tabs button{min-height:2.5rem;font-size:var(--fs-sm)}
  .dz-bar{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)}
  .dz-bar .btn{min-height:2.5rem;padding:0 var(--sp-4)}
}
/* Escritorio: ajustes a la izquierda, vista previa fija a la derecha */
@media (min-width:62rem){
  .dz{grid-template-columns:minmax(21rem, 28rem) minmax(0, 1fr);align-items:start;column-gap:var(--sp-6)}
  .dz-controls{max-height:calc(100vh - 9rem);overflow-y:auto;padding-right:var(--sp-2)}
  .dz-preview{position:sticky;top:var(--sp-3)}
  .dz-bar{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){.dz-phone{transition:none}}

.card > .dz-phone{margin-inline:auto}

/* Plato destacado: marca visible en cualquier disposición y tarjeta (borde de acento, fondo suave y etiqueta) */
.menu .dish.featured{border-left:4px solid var(--c-accent);padding-left:var(--sp-3);padding-right:var(--sp-3);background:color-mix(in srgb, var(--c-accent) 9%, transparent);border-radius:var(--r-sm, .5rem)}
.menu .dish.featured .featured-tag{margin:0 0 var(--sp-1);font:700 var(--fs-xs) var(--f-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent-text, var(--c-accent))}