/* Carta QR · estilos de la carta (móvil) y del panel (tablet u ordenador). Colores del negocio en variables. */
:root { --principal: #4F5D3A; --suave: #F3EEE4; --texto: #23201C; --fondo: #FFFDF9; --f: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f); font-size: 1rem; line-height: 1.5; color: var(--texto); background: var(--fondo); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .75em; }
a { color: var(--principal); }
:focus-visible { outline: 3px solid var(--principal); outline-offset: 2px; }
.nota { font-size: .9rem; color: color-mix(in srgb, var(--texto) 75%, var(--fondo)); }
.aviso { padding: .75rem 1rem; margin: 1rem; background: var(--suave); border-radius: .5rem; font-size: .95rem; }
.aviso-demo { margin: 0; padding: .5rem 1rem; background: #22201E; color: #fff; text-align: center; font-size: .85rem; }
.avisos { position: fixed; left: 1rem; right: 1rem; bottom: 5.5rem; margin: 0 auto; max-width: 30rem; padding: .8rem 1rem; background: #22201E; color: #fff; border-radius: .5rem; z-index: 20; text-align: center; }

/* Botones (texto blanco sobre el color principal) */
.boton { display: inline-block; padding: .7rem 1.1rem; min-height: 44px; border: 2px solid var(--principal); border-radius: .45rem; background: var(--principal); color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.boton--sec { background: transparent; color: var(--principal); }
.boton--peque { padding: .4rem .8rem; min-height: 40px; font-size: .9rem; }
.boton--ancho { width: 100%; }
.enlace { background: none; border: 0; color: var(--principal); font: inherit; cursor: pointer; min-width: 40px; min-height: 40px; }
.botones { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.etiqueta { display: inline-block; padding: .2rem .6rem; border-radius: 1rem; background: #E6D9C9; font-size: .85rem; font-weight: 600; }

/* Cabecera */
.cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; background: var(--fondo); border-bottom: 1px solid color-mix(in srgb, var(--texto) 12%, transparent); }
.cabecera__negocio { margin: 0; font-weight: 800; font-size: 1.1rem; }
.cabecera__mesa { margin: 0; font-size: .9rem; color: color-mix(in srgb, var(--texto) 75%, var(--fondo)); }

/* Carta */
.vista-carta main { max-width: 40rem; margin: 0 auto; padding-bottom: 6rem; }
.categorias { position: sticky; top: 0; z-index: 5; background: var(--fondo); border-bottom: 1px solid color-mix(in srgb, var(--texto) 10%, transparent); overflow-x: auto; }
.categorias ul { display: flex; gap: .5rem; list-style: none; margin: 0; padding: .6rem 1rem; white-space: nowrap; }
.categorias a { display: inline-block; padding: .4rem .9rem; border: 1px solid var(--principal); border-radius: 2rem; text-decoration: none; font-weight: 600; }
.categoria { padding: 1rem 1rem 0; scroll-margin-top: 3.5rem; }
.productos { list-style: none; margin: 0; padding: 0; }
.producto { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: .9rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--texto) 22%, transparent); }
.producto h3 { margin: 0 0 .2rem; }
.producto__desc { margin: 0 0 .2rem; font-size: .95rem; }
.producto__alergenos { margin: 0; font-size: .85rem; color: color-mix(in srgb, var(--texto) 75%, var(--fondo)); }
.producto__lado { text-align: right; }
.producto__precio { margin: 0 0 .4rem; font-weight: 800; white-space: nowrap; }
.producto--agotado { opacity: .6; }
.producto--foto { grid-template-columns: 88px 1fr auto; }
.producto__img { width: 88px; height: 88px; object-fit: cover; border-radius: .5rem; background: var(--suave); }
.dialogo__img { display: block; width: calc(100% + 2.5rem); max-width: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: -1.25rem -1.25rem 1rem; border-radius: .8rem .8rem 0 0; }
.barra-pedido { position: fixed; left: 0; right: 0; bottom: 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid color-mix(in srgb, var(--texto) 12%, transparent); z-index: 10; }
.barra-pedido .boton { display: block; max-width: 40rem; margin: 0 auto; }
.pedidos { margin: 1.5rem 1rem 0; padding: 1rem; background: var(--suave); border-radius: .6rem; }
.lista-pedidos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.estado { display: inline-block; padding: .15rem .55rem; border-radius: 1rem; font-size: .8rem; font-weight: 700; background: #fff; border: 1px solid currentColor; }
.estado--listo { background: var(--principal); color: #fff; border-color: var(--principal); }
.hora { font-size: .85rem; color: color-mix(in srgb, var(--texto) 75%, var(--fondo)); }
.cuenta { border-top: 1px solid color-mix(in srgb, var(--texto) 15%, transparent); padding-top: .8rem; }
.cuenta__total { font-size: 1.1rem; }
.pantalla { max-width: 30rem; margin: 3rem auto; padding: 0 1rem; text-align: center; }

/* Diálogos */
dialog { width: min(32rem, calc(100% - 2rem)); border: 0; border-radius: .8rem; padding: 0; color: var(--texto); background: var(--fondo); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.dialogo { padding: 1.25rem; }
.dialogo label { display: block; margin: .8rem 0 .3rem; font-weight: 600; }
.dialogo input:not([type=checkbox]), select { width: 100%; padding: .6rem; min-height: 44px; border: 1px solid color-mix(in srgb, var(--texto) 30%, transparent); border-radius: .4rem; font: inherit; background: #fff; color: var(--texto); }
fieldset { border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent); border-radius: .5rem; margin: .8rem 0; padding: .4rem .8rem .6rem; }
.casilla { display: flex !important; gap: .5rem; align-items: center; font-weight: 400 !important; margin: .4rem 0 !important; min-height: 32px; }
.casilla input { width: 1.2rem; height: 1.2rem; }
.lineas { list-style: none; margin: 0 0 1rem; padding: 0; }
.lineas li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid color-mix(in srgb, var(--texto) 12%, transparent); }
.lineas__lado { white-space: nowrap; text-align: right; }

/* Acceso al panel */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.acceso { max-width: 40rem; margin: 2rem auto; padding: 1.5rem; background: var(--fondo); border-radius: .8rem; }
.acceso .form-alta { margin-bottom: 1.5rem; }
.aviso--demo { margin: 0; overflow-x: auto; }
.aviso--demo table { background: #fff; border-radius: .4rem; font-size: .9rem; }
.aviso--demo code { font-size: .95rem; }

/* Panel */
.vista-panel { background: var(--suave); }
.cabecera--panel { flex-wrap: wrap; }
.cabecera--panel .botones { margin: 0; }
.pestanas { background: var(--fondo); border-bottom: 1px solid color-mix(in srgb, var(--texto) 12%, transparent); overflow-x: auto; }
.pestanas ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0 .5rem; }
.pestanas button { padding: .8rem 1rem; min-height: 44px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-weight: 600; color: var(--texto); cursor: pointer; white-space: nowrap; }
.pestanas button[aria-current="page"] { border-bottom-color: var(--principal); color: var(--principal); }
.contador { display: inline-block; min-width: 1.5rem; padding: 0 .4rem; border-radius: 1rem; background: var(--principal); color: #fff; font-size: .8rem; text-align: center; }
.panel { padding: 1rem; max-width: 80rem; margin: 0 auto; }
.tablero { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .tablero { grid-template-columns: repeat(3, 1fr); } }
.columna { background: color-mix(in srgb, var(--fondo) 60%, var(--suave)); border-radius: .6rem; padding: .8rem; }
.columna h2 { font-size: 1.05rem; display: flex; gap: .5rem; align-items: center; }
.ficha { background: #fff; border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent); border-radius: .5rem; padding: .8rem; margin-bottom: .7rem; }
.ficha__cab { display: flex; justify-content: space-between; margin-bottom: .4rem; }
.ficha ul { margin: 0 0 .7rem; padding-left: 1.1rem; }
.tabla { overflow-x: auto; background: #fff; border-radius: .5rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--texto) 10%, transparent); vertical-align: middle; }
.num { text-align: right; white-space: nowrap; }
.interruptores { list-style: none; margin: 0 0 1rem; padding: 0; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.boton:has(.oculto:focus-visible) { outline: 3px solid var(--principal); outline-offset: 2px; }
.alta { background: #fff; border-radius: .6rem; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent); }
.alta summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.form-alta { max-width: 40rem; }
.form-alta label { display: block; margin: .8rem 0 .3rem; font-weight: 600; }
.form-alta input:not([type=checkbox]):not([type=file]) { width: 100%; padding: .6rem; min-height: 44px; border: 1px solid color-mix(in srgb, var(--texto) 30%, transparent); border-radius: .4rem; font: inherit; }
.rejilla-alergenos { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0 1rem; }
.errores { color: #8A1F1F; font-weight: 600; margin: .6rem 0 0; }
.errores:empty { display: none; }
.lista-carta { list-style: none; margin: 0 0 1.25rem; padding: 0; background: #fff; border-radius: .6rem; }
.lista-carta li { display: grid; grid-template-columns: 56px 1fr; gap: .5rem 1rem; align-items: center; padding: .7rem .8rem; border-bottom: 1px solid color-mix(in srgb, var(--texto) 10%, transparent); }
.lista-carta img, .sin-foto { width: 56px; height: 56px; object-fit: cover; border-radius: .4rem; }
.sin-foto { display: grid; place-items: center; background: var(--suave); font-size: .65rem; text-align: center; color: color-mix(in srgb, var(--texto) 70%, var(--fondo)); }
.lista-carta__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
@media (min-width: 52rem) { .lista-carta li { grid-template-columns: 56px 1fr auto; } .lista-carta__acciones { grid-column: auto; } }
.rejilla-qr { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin-top: 1rem; }
.qr { background: #fff; border-radius: .6rem; padding: 1rem; text-align: center; border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent); }
.qr svg { width: 100%; max-width: 11rem; height: auto; }

@media print {
  .aviso-demo, .cabecera, .pestanas, .no-imprimir, .avisos { display: none !important; }
  .vista-panel { background: #fff; }
  .rejilla-qr { grid-template-columns: repeat(2, 1fr); }
  .qr { break-inside: avoid; border: 1px solid #000; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }