:root {
  /* Identidad bë (CLAUDE.md §5c): barra #1A1A1A, rojo #D10024 en botones y precios, nunca verde. */
  --fondo: #F2F2F2;
  --superficie: #ffffff;
  --texto: #111111;
  --texto-suave: #595959;
  --borde: #DCDCDC;
  --barra: #1A1A1A;
  --primario: #D10024;
  --primario-texto: #ffffff;
  --acento: #1A1A1A;
  --peligro: #D10024;
  --aviso: #8A5700;
  --radio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #111111;
    --superficie: #1C1C1C;
    --texto: #EDEDED;
    --texto-suave: #B0B0B0;
    --borde: #333333;
    --barra: #000000;
    --primario: #D10024;
    --primario-texto: #ffffff;
    --acento: #EDEDED;
    --peligro: #FF6B80;
    --aviso: #F2C14E;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* El atributo hidden debe ganar siempre (las vistas con display:grid lo anulaban). */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); }
body { font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; overflow-x: hidden; }
h1 { font-size: 1.35rem; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
button, input, select, textarea { font: inherit; color: inherit; }

.barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .6rem 1rem; background: var(--barra); color: #fff; border-bottom: 6px solid #D10024;
}

.info-caja { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.estado-red { display: flex; gap: .5rem; align-items: center; }
.indicador { padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; background: rgba(255,255,255,.18); }
/* Ámbar claro fijo con texto oscuro: contraste AA en los dos temas (sobre la barra #1A1A1A). */
.indicador[data-estado="sin-conexion"] { background: #F2C14E; color: #111; font-weight: 600; }
.pendientes { font-size: .85rem; }
.acciones { display: flex; gap: .4rem; flex-wrap: wrap; }
.acciones button { padding: .35rem .7rem; }

main { padding: 1rem; max-width: 1400px; margin: 0 auto; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; max-width: 34rem; margin: 1rem auto; }
.tarjeta.ancha { max-width: 100%; }
.encabezado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.encabezado h1 { margin: 0; }

label { display: block; margin: .6rem 0 .25rem; font-weight: 600; font-size: .92rem; }
input, select, textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--primario); outline-offset: 1px; }
button {
  border: 0; border-radius: 8px; padding: .65rem 1rem; background: var(--primario); color: var(--primario-texto);
  cursor: pointer; font-weight: 600; min-height: 44px;
}
button.secundario { background: transparent; color: inherit; border: 1px solid currentColor; }
.barra button.secundario { color: #fff; }
button:disabled { opacity: .5; cursor: not-allowed; }
form > button, .botones { margin-top: 1rem; }
.botones { display: flex; gap: .5rem; flex-wrap: wrap; }
.fila { display: flex; gap: .5rem; }
.fila input { flex: 1; min-width: 0; }

.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.lista button { width: 100%; text-align: left; }

.aviso { max-width: 1400px; margin: .75rem auto 0; padding: .7rem 1rem; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); }
.aviso[data-tipo="error"] { border-color: var(--peligro); color: var(--peligro); }
.aviso[data-tipo="ok"] { border-color: var(--acento); color: var(--acento); }

.venta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 1rem; align-items: start; }
.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; min-width: 0; }
.resultados { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.resultados button { width: 100%; display: flex; justify-content: space-between; gap: .5rem; background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); font-weight: 500; text-align: left; }
.resultados small { color: var(--texto-suave); }

.carrito, .tabla { width: 100%; border-collapse: collapse; margin-top: .75rem; }
.carrito th, .carrito td, .tabla th, .tabla td { padding: .45rem .35rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.num { text-align: right; white-space: nowrap; }
.carrito td:first-child { word-break: break-word; }
.carrito .desc { display: block; color: var(--texto-suave); font-size: .85rem; }
.carrito .controles { display: flex; gap: .25rem; justify-content: flex-end; flex-wrap: wrap; }
.carrito .controles button { min-height: 36px; padding: .2rem .55rem; }
.vacio { color: var(--texto-suave); }

.totales { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; margin: 0 0 1rem; }
.totales dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totales .total { font-size: 1.35rem; font-weight: 700; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); margin: 0 0 1rem; padding: .5rem .8rem .8rem; min-width: 0; }
legend { font-weight: 700; padding: 0 .3rem; }
.opcion { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; font-weight: 500; }
.opcion input { width: auto; }
.pago { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; margin-bottom: .5rem; }
.pago .referencia { grid-column: 1 / -1; }
.pago-resumen { margin: .4rem 0 0; font-size: .9rem; color: var(--texto-suave); }
.pago-resumen[data-cuadra="no"] { color: var(--peligro); }
.cobrar { width: 100%; font-size: 1.2rem; padding: .9rem; background: var(--primario); }

/* Estados ante Hacienda: estilos en /marca/marca.css (.estado-fe). */

dialog { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); max-width: min(34rem, calc(100vw - 2rem)); width: 100%; }
dialog::backdrop { background: rgba(0,0,0,.45); }
.error-formulario { color: var(--peligro); min-height: 1.2em; margin: .5rem 0 0; }
.dev-linea label { font-weight: 500; }
.tabla td .secundario { margin: 0 .25rem .25rem 0; }
/* El recibo tiene 42 columnas fijas (impresora de 80 mm): no se corta, se achica la letra en pantallas chicas. */
.recibo { background: var(--fondo); border: 1px dashed var(--borde); padding: .75rem; font: clamp(10px, 2.9vw, 13px)/1.35 ui-monospace, Menlo, Consolas, monospace; white-space: pre; max-height: 55vh; overflow: auto; }

@media (max-width: 900px) {
  .venta { grid-template-columns: minmax(0, 1fr); }
  .tabla thead { display: none; }
  .tabla tr { display: grid; grid-template-columns: 1fr auto; padding: .4rem 0; border-bottom: 1px solid var(--borde); }
  .tabla td { border: 0; padding: .15rem .25rem; }
}

tr.fila-vacia td { color: var(--texto-suave); text-align: center; padding: 16px 8px; font-style: italic; }

/* QA-08 · escaneo con la cámara */
.fila-escaner { display: flex; gap: 8px; align-items: stretch; }
.fila-escaner input { flex: 1 1 auto; min-width: 0; }
.btn-camara { flex: 0 0 auto; white-space: nowrap; }
.escaner-camara { width: min(480px, calc(100vw - 32px)); border: 1px solid #D9D9D9; border-radius: 12px; padding: 0; }
.escaner-camara::backdrop { background: rgba(0,0,0,.5); }
.escaner-cuerpo { padding: 16px; display: grid; gap: 12px; }
.escaner-cuerpo h2 { margin: 0; font-size: 18px; }
.escaner-marco { position: relative; border-radius: 8px; overflow: hidden; background: #1A1A1A; aspect-ratio: 4 / 3; }
.escaner-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.escaner-guia { position: absolute; inset: 30% 12%; border: 2px solid #D10024; border-radius: 8px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }
.escaner-estado { margin: 0; font-size: 14px; line-height: 1.5; }
.escaner-acciones { display: flex; justify-content: flex-end; }
/* El módulo compartido de la cámara (app-web/escaner-camara.js) usa «contorno»: en la caja es el mismo botón secundario. */
button.contorno { background: transparent; color: inherit; border: 1px solid currentColor; }

/* ------------------------------------------------------------------ restaurante (salon.js) */
.modos { display: flex; gap: .4rem; flex-wrap: wrap; }
.modos button { padding: .35rem .8rem; min-height: 40px; color: #fff; }
.modos button[aria-current="page"] { background: #D10024; border-color: #D10024; }
.pestanas-zona { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; margin: .5rem 0 1rem; }
.pestanas-zona button { flex: 0 0 auto; min-height: 40px; }
.plano { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.mesa { width: 100%; min-height: 6.5rem; display: grid; gap: .2rem; align-content: start; text-align: left; font-weight: 500;
  background: var(--superficie); color: var(--texto); border: 2px solid var(--borde); }
.mesa strong { font-size: 1.1rem; }
.mesa span { font-size: .88rem; }
/* Estados con borde y patrón además del texto e ícono (el color nunca es el único portador). */
.mesa[data-estado="ocupada"] { border-color: var(--texto); }
.mesa[data-estado="cuenta_pedida"] { border-color: var(--primario); border-style: double; border-width: 4px; }
.mesa[data-estado="por_limpiar"] { border-style: dashed; background: var(--fondo); }
.estado-mesa { font-weight: 700; }
.chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--borde); font-size: .82rem; font-weight: 600; background: var(--fondo); color: var(--texto); }
.aviso-salon { border: 1px solid var(--aviso); color: var(--texto); background: var(--superficie); padding: .5rem .75rem; border-radius: var(--radio); }
.ayuda-caja { color: var(--texto-suave); font-size: .9rem; margin: .25rem 0; }
.orden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1rem; align-items: start; }
.orden h3 { font-size: 1rem; margin: .75rem 0 .35rem; }
.lineas-orden { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lineas-orden li { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--borde); }
.lineas-orden li > span:first-child { flex: 1 1 12rem; min-width: 0; word-break: break-word; }
.lineas-orden small { color: var(--texto-suave); }
.lineas-orden li.anulada > span:first-child { text-decoration: line-through; color: var(--texto-suave); }
.lineas-orden button { min-height: 36px; padding: .2rem .6rem; }
.estado-linea.lista { border-color: var(--primario); }
.botones.columna { flex-direction: column; }
.botones.columna button { width: 100%; }
.divisiones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.divisiones .fila { align-items: center; flex-wrap: wrap; }
.divisiones .fila input { flex: 1 1 6rem; }
.divisiones > li > button:last-child { width: 100%; margin-top: .75rem; }
.platillos { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; max-height: 50vh; overflow: auto; }
.platillo { width: 100%; display: flex; justify-content: space-between; gap: .5rem; text-align: left; background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); font-weight: 500; }
.platillo small { color: var(--texto-suave); }
.cuerpo-dialogo { padding: .25rem; }
.kds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.comanda { background: var(--superficie); border: 2px solid var(--borde); border-radius: var(--radio); padding: .75rem; }
.comanda.atrasada { border-color: var(--primario); border-width: 4px; }
.comanda.prioridad { border-style: double; border-width: 4px; }
.comanda-cab { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.comanda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.kds-linea { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; border-top: 1px solid var(--borde); padding-top: .4rem; }
.kds-linea > span:first-child { flex: 1 1 100%; }
.kds-linea .nota { font-weight: 700; color: var(--texto); }
.kds-linea button { min-height: 44px; flex: 1 1 auto; }
@media (max-width: 900px) {
  .orden { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .plano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}