:root {
  --fondo: #f4f3ef;
  --tarjeta: #fff;
  --texto: #1d1d1b;
  --suave: #6b6a66;
  --linea: #e3e0d8;
  --acento: #1f6b3a;
  --aviso: #8a5300;
  --aviso-fondo: #fff4e5;
  --ok-fondo: #e5f4ea;
  --peligro: #b3261e;
  --peligro-fondo: #fde8e7;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h2 { margin: 0; font-size: 1.35rem; }
h3 { margin: 22px 0 10px; font-size: 1.05rem; }
code { background: #ece9e1; padding: 2px 6px; border-radius: 6px; }

.boton { border: 1px solid var(--linea); background: var(--tarjeta); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.boton:hover { border-color: #c9c5ba; }
a.boton { text-decoration: none; }
.boton.principal { background: var(--texto); color: #fff; border-color: var(--texto); }
.boton.peligro { color: var(--peligro); }
.boton.pequeno { padding: 5px 10px; font-size: .88rem; }
.tarjeta { background: var(--tarjeta); border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.nota { color: var(--suave); font-size: .9rem; }
.error { color: var(--peligro); font-weight: 600; min-height: 1em; }

.entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrar form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px; text-align: center; }
.entrar h1 { margin: 0; font-size: 1.4rem; }
.entrar p { margin: 0; color: var(--suave); }
.entrar input { padding: 13px; border-radius: 10px; border: 1px solid var(--linea); font-size: 1.05rem; }
.entrar .boton { justify-content: center; padding: 12px; }

.cabecera { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--tarjeta); border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.pestanas { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.pestanas button { border: 0; background: none; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--suave); white-space: nowrap; position: relative; }
.pestanas button.activa { background: var(--fondo); color: var(--texto); }
.globo { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--peligro); color: #fff; font-size: .75rem; line-height: 18px; text-align: center; }
.estado-tpv { font-size: .85rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.estado-tpv.ok { background: var(--ok-fondo); color: var(--acento); }
.estado-tpv.mal { background: var(--peligro-fondo); color: var(--peligro); }

main { padding: 20px; max-width: 1400px; margin: 0 auto; }
.barra-vista { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.barra-vista h2 { margin-right: auto; }
.barra-vista input[type=search], .barra-vista input[type=date] { padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--tarjeta); }
.filtro-estado { display: flex; gap: 4px; background: var(--tarjeta); border-radius: 10px; padding: 3px; border: 1px solid var(--linea); }
.filtro-estado button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--suave); }
.filtro-estado button.activa { background: var(--texto); color: #fff; }
.aviso-cerrado { background: var(--aviso-fondo); color: var(--aviso); padding: 6px 12px; border-radius: 999px; font-weight: 700; }

.tablero { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.envio { background: var(--tarjeta); border-radius: 14px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05); border-left: 5px solid var(--linea); }
.envio.ACUMULANDO, .envio.ENVIANDO { border-left-color: #e0a100; }
.envio.ENVIADO { border-left-color: var(--acento); }
.envio.ERROR { border-left-color: var(--peligro); }
.envio.DESCARTADO { opacity: .55; }
.envio header { display: flex; align-items: baseline; gap: 8px; }
.envio header strong { font-size: 1.15rem; }
.envio header .hora { margin-left: auto; color: var(--suave); font-variant-numeric: tabular-nums; }
.envio .zona { color: var(--suave); font-size: .85rem; }
.envio ul { list-style: none; margin: 10px 0; padding: 0; }
.envio li { display: flex; gap: 8px; padding: 3px 0; }
.envio li .cant { font-weight: 700; min-width: 26px; }
.envio li small { display: block; color: var(--suave); }
.envio li .imp { margin-left: auto; font-variant-numeric: tabular-nums; }
.envio footer { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--linea); padding-top: 10px; flex-wrap: wrap; }
.envio footer .total { margin-left: auto; font-weight: 700; }
.chip { font-size: .8rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.chip.ACUMULANDO, .chip.ENVIANDO { background: var(--aviso-fondo); color: var(--aviso); }
.chip.ENVIADO { background: var(--ok-fondo); color: var(--acento); }
.chip.ERROR, .chip.DESCARTADO { background: var(--peligro-fondo); color: var(--peligro); }
.envio .msg-error { background: var(--peligro-fondo); color: var(--peligro); border-radius: 8px; padding: 8px 10px; font-size: .88rem; margin-top: 8px; }
.avisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 14px; }
.aviso-mesa { display: flex; align-items: center; gap: 12px; background: #fff4e5; border: 2px solid #e0a100; border-radius: 14px; padding: 12px 14px; animation: latir 1.2s ease-in-out 3; }
.aviso-mesa .icono-cuenta { font-size: 1.6rem; }
.aviso-mesa .texto { flex: 1; }
.aviso-mesa strong { display: block; font-size: 1.1rem; }
.aviso-mesa small { color: var(--aviso); }
@keyframes latir { 50% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(224,161,0,.2); } }
.vacio { color: var(--suave); text-align: center; padding: 50px 10px; grid-column: 1 / -1; }

.fila-ajuste { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.fila-ajuste > div:first-child { flex: 1; }
.fila-ajuste p { margin: 4px 0 0; color: var(--suave); font-size: .9rem; }
.lista-ajustes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.lista-ajustes .fila-ajuste { margin: 0; }
.campo-num input { width: 80px; padding: 8px; border: 1px solid var(--linea); border-radius: 8px; text-align: right; }
.interruptor { position: relative; width: 52px; height: 30px; flex: none; }
.interruptor input { opacity: 0; width: 0; height: 0; }
.interruptor span { position: absolute; inset: 0; background: #cfcbc1; border-radius: 15px; cursor: pointer; transition: .15s; }
.interruptor span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked + span { background: var(--acento); }
.interruptor input:checked + span::after { transform: translateX(22px); }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cifra { background: var(--tarjeta); border-radius: 14px; padding: 16px; }
.cifra small { color: var(--suave); font-weight: 600; }
.cifra div { font-size: 1.7rem; font-weight: 750; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { color: var(--suave); font-size: .82rem; font-weight: 600; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }

.seccion-carta { margin-bottom: 18px; }
.seccion-carta > header { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; }
.seccion-carta > header h3 { margin: 0; }
.seccion-carta > header .nota { margin-right: auto; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.item { display: flex; gap: 10px; align-items: center; background: var(--tarjeta); border-radius: 12px; padding: 8px; cursor: pointer; border: 1px solid transparent; text-align: left; width: 100%; }
.item:hover { border-color: var(--linea); }
.item.oculto { opacity: .5; }
.item .mini { width: 52px; height: 52px; border-radius: 10px; background: var(--fondo) center/cover; flex: none; display: grid; place-items: center; font-weight: 700; color: var(--suave); }
.item .texto { flex: 1; min-width: 0; }
.item .texto div { font-weight: 600; }
.item .texto small { color: var(--suave); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.etiqueta { font-size: .72rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--fondo); color: var(--suave); }
.etiqueta.agotado { background: var(--peligro-fondo); color: var(--peligro); }
.formato-carta { grid-column: 1 / -1; background: #faf8f3; border: 1px dashed #d8d3c6; border-radius: 12px; padding: 8px; }
.formato-carta > .item { background: transparent; }
.formato-carta .items { margin: 6px 0 0 30px; }

.zona-mesas h3 { margin-top: 18px; }
.mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mesa { background: var(--tarjeta); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mesa header { display: flex; align-items: center; justify-content: space-between; }
.mesa img { width: 120px; height: 120px; align-self: center; }
.mesa .enlace { font-size: .78rem; color: var(--suave); word-break: break-all; }
.mesa .acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.mesa.inactiva img { opacity: .3; }

.formulario { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.formulario label, .dialogo label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .92rem; }
.formulario input, .dialogo input:not([type=checkbox]), .dialogo textarea, .dialogo select { padding: 9px 10px; border: 1px solid var(--linea); border-radius: 9px; font-weight: 400; background: #fff; }
.dialogo label.check { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 10px; }

.dialogo { border: 0; border-radius: 18px; padding: 22px; width: min(620px, calc(100% - 24px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dialogo::backdrop { background: rgba(20,20,18,.45); }
.dialogo form { display: flex; flex-direction: column; gap: 12px; }
.dialogo h3 { margin: 0; }
.dialogo fieldset { border: 1px solid var(--linea); border-radius: 10px; }
.dialogo legend { font-weight: 600; font-size: .92rem; padding: 0 4px; }
.alergenos-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px; }
.alergenos-editor label { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.foto-editor { display: flex; gap: 14px; align-items: center; }
.foto-grande { width: 140px; height: 105px; border-radius: 12px; background: var(--fondo) center/cover; display: grid; place-items: center; color: var(--suave); font-size: .85rem; flex: none; }
.foto-botones { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.botones .hueco { flex: 1; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--texto); color: #fff; padding: 11px 18px; border-radius: 12px; font-weight: 600; z-index: 50; }

@media (max-width: 760px) {
  .dos-columnas { grid-template-columns: 1fr; }
  main { padding: 14px; }
}

@media print {
  .cabecera, .barra-vista, .nota, .mesa .acciones, .mesa .enlace, .mesa.inactiva { display: none !important; }
  body { background: #fff; }
  .mesas { grid-template-columns: repeat(3, 1fr); }
  .mesa { border: 1px solid #ccc; break-inside: avoid; }
  .mesa img { width: 180px; height: 180px; }
}