/* =========================================================
   Menú Digital Básico (Opción 1) — demo
   CSS3 mobile-first, sin frameworks. Sin nada de admin: es un
   menú de solo lectura, a propósito.
   ========================================================= */

:root {
  --masa: #fdf8f1; --masa-2: #f6ecdf;
  --corteza: #7a4a21; --corteza-osc: #563318;
  --miel: #e0a02c; --miel-claro: #fbe9c6;
  --carbon: #2c2119; --gris: #7d6f63; --gris-claro: #e6dcd0; --blanco: #ffffff;
  --ok: #2e7d4f; --ok-bg: #e3f4e9;
  --horno: #c2410c; --horno-bg: #ffedd5;
  --off: #9b2c2c; --off-bg: #fdeaea;

  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem;
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
  --radio: 14px; --radio-sm: 8px;
  --sombra: 0 1px 2px rgba(44,33,25,.06), 0 4px 14px rgba(44,33,25,.07);
  --max-ancho: 1080px;
  --transicion: 160ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

body {
  min-height: 100dvh;
  background: var(--masa);
  color: var(--carbon);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

.container { width: 100%; max-width: var(--max-ancho); margin-inline: auto; padding-inline: var(--sp-4); }
main { flex: 1 0 auto; padding-block: var(--sp-5) var(--sp-6); }

/* Header */
.site-header { background: linear-gradient(135deg, var(--corteza), var(--corteza-osc)); color: var(--masa); padding-block: var(--sp-5); }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); justify-content: space-between; }
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand__logo { font-size: 2rem; background: rgba(255,255,255,.12); border-radius: 50%; width: 3rem; height: 3rem; display: grid; place-items: center; flex-shrink: 0; }
.brand__name { font-size: var(--fs-xl); font-weight: 700; }
.brand__tagline { font-size: var(--fs-sm); opacity: .78; }

.header-acciones { display: flex; align-items: center; gap: var(--sp-2); }

/* Solo aparece dentro del modo edición: es para dejar la demo lista entre
   una presentación y otra, no algo que un cliente real debería tocar. */
.btn-restablecer {
  padding: var(--sp-2) var(--sp-3);
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, .4);
  color: var(--masa-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: background var(--transicion), opacity var(--transicion);
}
.btn-restablecer:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: var(--masa); }
.btn-restablecer:disabled { opacity: .6; cursor: not-allowed; }

/* A propósito NO tiene la animación ni el color llamativo del botón "Modo
   Admin" de la Opción 2 — la diferencia de riqueza entre las dos se nota
   incluso en el botón que abre cada una. */
.btn-editar-precios {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--masa);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background var(--transicion), border-color var(--transicion);
}
.btn-editar-precios:hover { background: rgba(255, 255, 255, .1); }
.btn-editar-precios[aria-pressed="true"] { background: var(--miel); border-color: var(--miel); color: var(--carbon); font-weight: 700; }

/* Filtros */
.filters { position: sticky; top: 0; z-index: 10; background: rgba(253,248,241,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gris-claro); }
.filters__inner { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block: var(--sp-3); scrollbar-width: none; }
.filters__inner::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); border-radius: 999px;
  background: var(--blanco); border: 1px solid var(--gris-claro); color: var(--gris);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.chip:hover { border-color: var(--corteza); color: var(--corteza); }
.chip[aria-selected="true"] { background: var(--corteza); border-color: var(--corteza); color: var(--masa); }

/* Grid de productos */
.menu-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden; display: flex;
}
.card.is-sold-out { opacity: .68; }
.card.is-sold-out .card__thumb { filter: grayscale(.85); }

.card__body, .card { display: flex; gap: var(--sp-4); padding: var(--sp-4); align-items: flex-start; }
.card__thumb {
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: var(--radio-sm);
  background: linear-gradient(140deg, var(--miel-claro), var(--masa-2));
  display: grid; place-items: center; font-size: 2rem;
}
.card__info { flex: 1 1 auto; min-width: 0; }
.card__name { font-size: var(--fs-md); font-weight: 700; margin-bottom: 2px; }
.card__desc { font-size: var(--fs-sm); color: var(--gris); margin-bottom: var(--sp-2); }
.card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.card__price { font-size: var(--fs-lg); font-weight: 700; color: var(--corteza); white-space: nowrap; }
.card__unit { font-size: var(--fs-xs); color: var(--gris); font-weight: 500; }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-2);
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.badge--disponible { background: var(--ok-bg); color: var(--ok); }
.badge--horno { background: var(--horno-bg); color: var(--horno); }
.badge--agotado { background: var(--off-bg); color: var(--off); }

/* Modo edición: deliberadamente un formulario simple, no la interfaz
   táctil pulida de la Opción 2 (sin drag, sin fotos, sin animaciones). */
.card__info--edicion { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }

.campo-editar { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--gris); }
.campo-editar input,
.campo-editar select {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--carbon);
  padding: var(--sp-2);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio-sm);
  background: var(--masa);
}
.campo-editar input:focus-visible,
.campo-editar select:focus-visible { outline: 2px solid var(--corteza); border-color: var(--corteza); }

.campo-editar-fila { display: flex; gap: var(--sp-2); }
.campo-editar-fila .campo-editar { flex: 1 1 0; min-width: 0; }

.btn-guardar-producto {
  align-self: flex-start;
  padding: var(--sp-2) var(--sp-4);
  background: var(--corteza);
  color: var(--masa);
  font-weight: 700;
  font-size: var(--fs-sm);
  border-radius: var(--radio-sm);
  transition: background var(--transicion), opacity var(--transicion);
}
.btn-guardar-producto:hover:not(:disabled) { background: var(--corteza-osc); }
.btn-guardar-producto:disabled { opacity: .7; cursor: not-allowed; }

.card.is-guardando { opacity: .75; }

.error-carga {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--off);
  background: var(--off-bg);
  padding: var(--sp-4);
  border-radius: var(--radio);
}

/* Footer */
.site-footer { background: var(--corteza-osc); color: var(--masa-2); padding-block: var(--sp-5); font-size: var(--fs-sm); margin-top: auto; }
.site-footer__name { font-weight: 700; color: var(--blanco); }
.site-footer__inner p { opacity: .82; margin-bottom: 2px; }
.site-footer__legal { font-size: var(--fs-xs); opacity: .55; margin-top: var(--sp-2); }

.enlace-cruzado {
  display: block;
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: var(--radio-sm);
  font-size: var(--fs-xs);
  color: var(--masa-2);
  text-decoration: none;
  max-width: 460px;
  transition: background var(--transicion), border-color var(--transicion);
}
.enlace-cruzado:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
.enlace-cruzado strong { color: var(--miel); display: block; margin-bottom: 2px; font-size: var(--fs-sm); }