/* dmzSoft — estilos base. Colores y medidas como variables para mantenerlo consistente. */
:root {
  --sobre-primario: #ffffff;   /* texto sobre el color principal (lo ajusta /marca.css si el color es claro) */
  /* Avisos flotantes (toasts): en oscuro, fondo más oscuro y letra blanca para que se lean. */
  --toast-ok: #1f7a45; --toast-error: #b3261e; --toast-texto: #ffffff;
  --bg: #f5f4f1;
  --fg: #1d1c1a;
  --muted: #6b6a64;
  --card: #ffffff;
  --borde: #dcdad3;
  --primario: #b3261e;        /* rojo pizzería */
  --primario-hover: #8f1e18;
  --ok: #1f7a45;
  --alerta: #9a6700;
  --error: #b3261e;
  --radio: 8px;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.06);
  /* Tema: todos los colores de fondo y texto salen de estas variables (el oscuro las redefine abajo). */
  --campo: #ffffff;           /* fondo de campos, botones secundarios, solapas, productos */
  --hover: #faf9f6;
  --sobre-fg: #ffffff;        /* texto sobre fondo var(--fg) (menú activo, chips activos) */
  --sobre-estado: #ffffff;    /* texto sobre el color de un estado */
  --tinte-rojo: #fbe4e2;
  --tinte-verde: #e3f4ea;
  --tinte-amarillo: #fff4d6;
  --tinte-gris: #eceae4;
  --tinte-gris-suave: #f3f2ee;
  --tinte-azul: #e0ecfb;
  --web-fondo: #e6f0fd;
  --web-borde: #9cc0f0;
  --web: #1f5fa8;
  --nota: #fff8e6;
  --nota-envio: #eef4ea;
  --qr-fondo: #ffffff;              /* el QR siempre sobre blanco (los lectores lo necesitan), también en tema oscuro */
  --qr-marco: rgba(255, 255, 255, 0.85);
  --qr-sombra: rgba(0, 0, 0, 0.25);
  --resaltado: #ffe58a;
  --en-pedido: #dcf3e2;
  --en-pedido-borde: #3f9a5e;
  /* Producto tocado 2, 3, 4 veces y 5 o más (toma de pedido): fondo y borde. */
  --toque-2: #ffe3cc; --toque-2-borde: #e8731a;
  --toque-3: #eadccf; --toque-3-borde: #7a4a2a;
  --toque-4: #fbd5d2; --toque-4-borde: #c62828;
  --toque-x1: #dbe8fb; --toque-x1-borde: #2a78d6;
  --toque-x2: #e6e0f8; --toque-x2-borde: #6a4fc4;
  --toque-x3: #d3f1ec; --toque-x3-borde: #159a8a;
  --toque-x4: #fbe0ec; --toque-x4-borde: #d0508a;
  --toque-x5: #fff2c2; --toque-x5-borde: #b88a00;
  --toque-x6: #d9f2fb; --toque-x6-borde: #1f8fbf;
  --producto-borde: #8f8c84;
  --alerta-borde: #f0d58a;
  --alerta-texto: #5c4400;
  --aviso-fondo: #fff8dc;
  --aviso-titulo: #8a5a00;
  --destello: #fff1c2;
  --comanda-fondo: #e9e7e1;
  --gris-suave: #ddd;
  /* Series de los gráficos (Reportes): orden fijo, validado para daltonismo contra la tarjeta clara. */
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #4a3aa7;
  --texto-sobre-serie: #111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color-scheme: light;
}

/* Tema oscuro: lo elige cada equipo (botón sol/luna arriba, o Mi Cuenta → Este Equipo). js/tema.js pone data-tema en <html>. */
:root[data-tema="oscuro"] {
  --toast-ok: #1f7a45; --toast-error: #b3261e; --toast-texto: #ffffff;
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #9085e9;
  --bg: #161514;
  --fg: #ecebe7;
  --muted: #a6a39b;
  --card: #211f1d;
  --borde: #3b3935;
  --primario: #c7372d;
  --primario-hover: #dc4a40;
  --ok: #52c285;
  --alerta: #e2b24a;
  --error: #f06a60;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.4);
  --campo: #2a2825;
  --hover: #2d2b28;
  --sobre-fg: #161514;
  --sobre-estado: #161514;
  --tinte-rojo: #41211e;
  --tinte-verde: #1c3526;
  --tinte-amarillo: #3a3014;
  --tinte-gris: #2f2d2a;
  --tinte-gris-suave: #262422;
  --tinte-azul: #1c2b3f;
  --web-fondo: #1a2636;
  --web-borde: #3d6594;
  --web: #6aa6ee;
  --nota: #3a3221;
  --nota-envio: #22311f;
  --resaltado: #7a6412;
  --en-pedido: #1e3b29;
  --en-pedido-borde: #52c285;
  --toque-2: #43290f; --toque-2-borde: #f08a3c;
  --toque-3: #33251b; --toque-3-borde: #b98559;
  --toque-4: #45201d; --toque-4-borde: #f06a60;
  --toque-x1: #1b2c44; --toque-x1-borde: #5d9cec;
  --toque-x2: #2a2442; --toque-x2-borde: #9d8af0;
  --toque-x3: #173833; --toque-x3-borde: #3cc7b4;
  --toque-x4: #3f1f2e; --toque-x4-borde: #ec7fb0;
  --toque-x5: #3a3014; --toque-x5-borde: #e2b24a;
  --toque-x6: #17333f; --toque-x6-borde: #52bde8;
  --producto-borde: #6e6b64;
  --alerta-borde: #6b5622;
  --alerta-texto: #f0d58a;
  --aviso-fondo: #3a3221;
  --aviso-titulo: #f2c35c;
  --destello: #4d4020;
  --comanda-fondo: #2a2825;
  --gris-suave: #4a4843;
  color-scheme: dark;
}
:root[data-tema="oscuro"] .e-pendiente { --estado: #bdbab2; --estado-bg: #2f2d2a; }
:root[data-tema="oscuro"] .e-horno     { --estado: #c99670; --estado-bg: #3a2a20; }
:root[data-tema="oscuro"] .e-listo     { --estado: #f39b4a; --estado-bg: #3e2b16; }
:root[data-tema="oscuro"] .e-camino    { --estado: #b892ec; --estado-bg: #2f2442; }
:root[data-tema="oscuro"] .e-entregado { --estado-bg: #1c3526; }
:root[data-tema="oscuro"] .e-anulado   { --estado-bg: #41211e; }
:root[data-tema="oscuro"] .boton.primario, :root[data-tema="oscuro"] .tab.activa { color: var(--sobre-primario); }
:root[data-tema="oscuro"] .etiqueta-web { color: #10213a; }
:root[data-tema="oscuro"] .alerta-demora { color: #161514; }

/* Botón de tema (sol/luna) en la barra de arriba: lo ven todos los roles. */
.boton-tema { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--borde); border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; }
.boton-tema:hover { background: var(--hover); }
.boton-tema svg { width: 18px; height: 18px; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); line-height: 1.45; }
/* Pie: crédito del desarrollador, chico y a la derecha. En la toma de pedido no se muestra (cada renglón cuenta). */
body:not(.pantalla-login) { min-height: 100vh; display: flex; flex-direction: column; }
body:not(.pantalla-login) > main { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
.pie-app { text-align: right; font-size: 0.75rem; color: var(--muted); padding: 8px 16px 10px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pie-app .version-app { text-align: left; }
.pie-app a { color: inherit; }
.pie-app a:hover { color: var(--fg); }
body.pantalla-completa .pie-app { display: none; }
.pantalla-login .pie-app { position: fixed; right: 0; bottom: 0; }
h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
a { color: var(--primario); }
code { font-size: 0.9em; background: var(--bg); padding: 1px 5px; border-radius: 4px; }

/* ---------- Estructura ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 6px 16px; background: var(--card); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 5;
}
/* Celulares y tablets: la barra se esconde al bajar (pantalla.js → barraAutoOculta). */
.topbar { transition: transform .2s ease; }
body.barra-oculta:not(.menu-abierto) .topbar { transform: translateY(-100%); }
/* Marca: logo + el nombre del local (Configuración → Local, llega en /marca.css como --nombre-local) debajo. Tres tamaños. */
.marca { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.marca img { display: block; object-fit: contain; }
.marca-texto { color: var(--color-nombre, var(--primario)); font-weight: 800; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; text-align: center; }
.marca-texto:empty::before { content: var(--nombre-local, "dmzSoft"); }
.marca-chica .marca-texto { white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.marca-chica img { width: 36px; height: 36px; }
.marca-chica .marca-texto { font-size: 0.62rem; margin-top: 2px; }
/* Subtítulo del local debajo del nombre, en la barra: oculto salvo que Apariencia lo active (/marca.css lo prende y le pone el texto). */
.marca-subtitulo { display: none; color: var(--muted); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.1em; text-indent: 0.1em; text-transform: uppercase;
  text-align: center; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.marca-media img { width: 110px; height: 110px; }
.marca-media .marca-texto { font-size: 1.15rem; margin-top: 6px; }
.marca-grande { display: flex; margin: 0 auto 12px; }
.marca-grande img { width: 150px; height: 150px; }
.marca-grande .marca-texto { font-size: 1.9rem; margin-top: 8px; }
.boton-menu { display: none; margin-left: auto; background: transparent; border: 1px solid var(--borde); border-radius: 6px; padding: 6px; cursor: pointer; color: var(--fg); }
.boton-menu svg { width: 22px; height: 22px; display: block; }
.menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.menu a {
  color: var(--fg); text-decoration: none; padding: 6px 12px; border-radius: var(--radio);
}
.menu a:hover { background: var(--bg); }
.menu a[aria-current="page"] { background: var(--fg); color: var(--sobre-fg); }
.menu-grupo { position: relative; }
.menu-grupo summary { list-style: none; cursor: pointer; padding: 6px 12px; border-radius: var(--radio); user-select: none; }
.menu-grupo summary::-webkit-details-marker { display: none; }
.menu-grupo summary::after { content: " ▾"; font-size: 0.8em; color: var(--muted); }
.menu-grupo summary:hover { background: var(--bg); }
.menu-grupo summary[aria-current="page"] { background: var(--fg); color: var(--sobre-fg); }
.menu-grupo summary[aria-current="page"]::after { color: var(--gris-suave); }
.submenu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; min-width: 200px; display: grid; gap: 2px; padding: 6px;
  background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 8px 24px rgb(0 0 0 / 0.15); }
.usuario-actual { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Cerrar Sesión: la puerta con la flecha (el texto queda de tooltip), en la PC y en el celular. */
.boton-salir-icono { display: inline-flex; }
.usuario-nombre { color: var(--fg); font-weight: 600; text-decoration: none; }
.rol { color: var(--muted); font-size: 0.85rem; }

.contenedor { max-width: 1300px; margin: 0 auto; padding: 24px 16px; }
.titulo-con-acciones { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.titulo-con-acciones h1 { margin: 0; }

.tarjeta {
  background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.tarjeta.sin-relleno { padding: 0; overflow-x: auto; }

.cargando { color: var(--muted); }
.nota { color: var(--muted); font-size: 0.9rem; }
.nota.consejo { border-left: 3px solid var(--primario); padding: 4px 0 4px 10px; background: var(--tinte-gris-suave); border-radius: 0 var(--radio) var(--radio) 0; }
.alerta { background: var(--tinte-amarillo); border: 1px solid var(--alerta-borde); color: var(--alerta-texto); padding: 10px 14px; border-radius: var(--radio); }

dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.datos dt { color: var(--muted); }
dl.datos dd { margin: 0; }

/* ---------- Formularios ---------- */
.formulario, #form { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-weight: 500; }
label small { font-weight: 400; color: var(--muted); }
label.check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
label.check small { flex-basis: 100%; }
/* Casilla con un texto largo (en <span>): el texto se parte al lado de la casilla, no debajo. */
label.check > input + span { flex: 1 1 0; min-width: 0; }
input, select, textarea {
  font: inherit; padding: 8px 10px; min-height: 38px; border: 1px solid var(--borde); border-radius: 6px; background: var(--campo); color: var(--fg);
  min-width: 0;
}
input[type=checkbox], input[type=radio] { min-height: 0; width: 16px; height: 16px; padding: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: 0; border-color: var(--primario); }
input[aria-invalid="true"] { border-color: var(--error); }
.error-campo { color: var(--error); font-size: 0.85rem; margin: 0; font-weight: 400; }
.error-general { color: var(--error); margin: 0; min-height: 1.2em; }
.dialogo .error-general:empty { display: none; }
.acciones { display: flex; justify-content: flex-end; gap: 8px; }

.boton {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 6px; padding: 8px 16px;
  border: 1px solid transparent; white-space: nowrap;
}
a.boton { text-decoration: none; display: inline-block; text-align: center; }
.boton:disabled { opacity: 0.6; cursor: default; }
.boton.primario { background: var(--primario); color: var(--sobre-primario); }
.boton.primario:hover:not(:disabled) { background: var(--primario-hover); }
.boton.secundario { background: var(--campo); color: var(--fg); border-color: var(--borde); }
.boton.secundario:hover:not(:disabled) { background: var(--bg); }
.boton.secundario.peligro { color: var(--error); }
.boton.verde { background: var(--ok); color: var(--sobre-fg); border-color: var(--ok); }
.boton.verde:hover:not(:disabled) { filter: brightness(0.92); }
.boton.chico { padding: 4px 10px; font-size: 0.85rem; }
.boton.ancho { width: 100%; }

.campo-password { position: relative; display: block; }
.campo-password input { width: 100%; padding-right: 42px; }
.boton-ojo {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 32px; display: grid; place-items: center;
  color: var(--muted); background: transparent; border: 0; border-radius: 4px; padding: 0; cursor: pointer;
}
.boton-ojo:hover, .boton-ojo:focus-visible { color: var(--fg); background: var(--bg); }
.boton-ojo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.inactivo td { color: var(--muted); }
/* Botones de cada fila: la celda sigue siendo celda de tabla (con display:flex se rompen los bordes). */
.acciones-fila { text-align: right; white-space: nowrap; }
.tabla td.acciones-fila { width: 1%; }
.acciones-fila > .boton + .boton { margin-left: 6px; }
.acciones-fila > * { vertical-align: middle; }
.tabla .num { width: 140px; }

.etiqueta { display: inline-block; font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.etiqueta.verde { background: var(--tinte-verde); color: var(--ok); }
.etiqueta.roja { background: var(--tinte-rojo); color: var(--error); }
.etiqueta.amarilla { background: var(--tinte-amarillo); color: var(--alerta); }
.etiqueta.gris { background: var(--tinte-gris); color: var(--muted); }
.etiqueta.azul { background: var(--tinte-azul); color: var(--web); }

/* ---------- Diálogos y avisos ---------- */
.dialogo { --pad: 24px; background: var(--card); color: var(--fg); border: 0; border-radius: 12px; padding: 0 var(--pad) var(--pad); width: min(440px, calc(100vw - 32px)); box-shadow: 0 10px 40px rgb(0 0 0 / 0.25); }
/* Encabezado del modal: título y botones (Cancelar / Guardar / Cerrar) siempre arriba a la derecha, fijo al bajar. */
.dialogo-cabecera { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 calc(-1 * var(--pad)) 4px; padding: 16px var(--pad) 12px; background: var(--card); border-bottom: 1px solid var(--borde); }
.dialogo-cabecera h2 { margin: 0; flex: 1 1 auto; }
.dialogo-cabecera .acciones { margin-left: auto; }
.vista-comanda .dialogo-cabecera { background: var(--comanda-fondo); }
.dialogo::backdrop { background: rgb(0 0 0 / 0.35); }

.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 10px 18px; border-radius: var(--radio); color: var(--toast-texto); background: var(--toast-ok); font-weight: 600;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.2); z-index: 10;
}
.aviso-error { background: var(--toast-error); }

/* ---------- Listas, filtros, formularios de varias filas ---------- */
.barra-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.barra-filtros input[type=search] { flex: 1; min-width: 220px; }
.filas-clic tbody tr[data-accion] { cursor: pointer; }
.filas-clic tbody tr[data-accion]:hover td { background: var(--hover); }
.vacio { color: var(--muted); text-align: center; padding: 24px; }
.num, .tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.titulo-tabla { padding: 14px 14px 0; margin: 0; }
.tabla.compacta th, .tabla.compacta td { padding: 6px 8px; }
.paginador { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 8px 0 16px; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.grupo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px 12px; display: grid; gap: 8px; }
fieldset.grupo legend { font-weight: 600; padding: 0 4px; }
.fila-lista { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.fila-lista input { flex: 1 1 160px; min-width: 0; }
.fila-lista input.corto { flex: 1 1 100px; max-width: none; }
fieldset.grupo > .boton { justify-self: start; }
.fila-direccion { display: grid; gap: 6px; border-bottom: 1px dashed var(--borde); padding-bottom: 10px; margin-bottom: 10px; justify-items: end; }
.grilla-direccion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.grilla-direccion .ancho-2 { grid-column: span 2; }
.grilla-direccion .ancho-3 { grid-column: 1 / -1; }
input.corto, .corto { max-width: 140px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Cada columna arriba de todo y con sus campos apilados (no se estiran para igualar la altura de la otra). */
.dos-columnas.columnas-arriba { align-items: start; }
.dos-columnas > .columna { display: grid; gap: 12px; align-content: start; min-width: 0; }
.dos-columnas > .columna > label > input, .dos-columnas > .columna > label > select { width: 100%; }
fieldset.opciones { display: grid; gap: 6px; }
.dialogo.ancho { width: min(760px, calc(100vw - 32px)); }
.dialogo.ajustado { width: max-content; min-width: min(760px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
/* Los textos no ensanchan el diálogo: lo marca la tabla y el texto se acomoda a ese ancho. */
.dialogo.ajustado p { width: 0; min-width: 100%; }
.dialogo { max-height: calc(100vh - 32px); overflow-y: auto; }

.grilla-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.grilla-dias .tarjeta { margin: 0; }
.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lista-simple li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--borde); }
.lista-simple li.inactivo { color: var(--muted); text-decoration: line-through; }
.recordatorios-hoy { border-left: 4px solid var(--alerta); }
.recordatorios-hoy ul { margin: 0; padding-left: 20px; }
.chip-boton { font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; border: 1px solid var(--primario); background: var(--campo); color: var(--primario); }
.chip-boton:hover { background: var(--primario); color: var(--sobre-primario); }

/* Aviso de versión nueva (app instalable). */
.aviso-version { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: calc(100vw - 24px); padding: 10px 14px; border-radius: 10px; background: var(--fg); color: var(--sobre-fg); box-shadow: 0 8px 24px rgb(0 0 0 / 0.3); }
.aviso-version .boton.secundario { background: transparent; color: var(--sobre-fg); border-color: currentColor; }
@media (max-width: 999px) { body:has(.toma-pedido) .aviso-version { bottom: 76px; } }

.lineas-cid { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -8px 0 12px; font-size: 0.9rem; }
/* Precios en cantidad / Excel */
.grupo-opciones { border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px 12px; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.grupo-opciones legend { font-weight: 600; padding: 0 4px; }
.vista-masivo { max-height: 45vh; overflow-y: auto; }
.errores-excel { color: var(--error); margin: 4px 0; padding-left: 20px; font-size: 0.9rem; }

/* Configuración de Productos (un botón con todo) y tamaños */
.menu-config { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.opcion-config { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--campo); color: var(--fg); cursor: pointer; }
.opcion-config:hover, .opcion-config:focus-visible { border-color: var(--primario); }
.tabla-desplazable { max-width: 100%; overflow-x: auto; }
.tabla-desplazable input.medio { max-width: 130px; }
.tabla-desplazable input.corto { max-width: 80px; }
.tabla-tamanios { width: 100%; }
.tabla-tamanios input[data-manual] { width: 100%; max-width: 120px; }
.precios-tamanio { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; }
.precios-tamanio > span { white-space: nowrap; }
.precios-tamanio > .inactivo { color: var(--muted); }
/* Carta online: precio por tamaño */
.carta-tamanios { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.carta-descripcion { margin: -4px 14px 8px; }
/* Color propio de la categoría (Configuración de Productos → Dónde se Vende) */
.tab[style*="--color-categoria"] { border-color: var(--color-categoria); box-shadow: inset 0 -3px 0 var(--color-categoria); }
.tab.activa[style*="--color-categoria"] { background: var(--color-categoria); border-color: var(--color-categoria); color: #fff; }
/* Toma de pedidos: selector de tamaño al lado de ½|½ */
.selector-tamanio { display: inline-flex; border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; }
.selector-tamanio button { font: inherit; font-size: 0.85em; font-weight: 600; padding: 5px 12px; border: 0; background: var(--campo); color: var(--fg); cursor: pointer; }
.selector-tamanio button + button { border-left: 1px solid var(--borde); }
.selector-tamanio button.activa { background: var(--fg); color: var(--sobre-fg); }
/* Happy hour 2x1 y opciones y agregados (masa, extras, sin…, punto) */
.chip-2x1 { display: inline-block; font-size: 0.75em; font-weight: 700; border-radius: 999px; padding: 0 7px; background: var(--ok); color: #fff; vertical-align: 1px; }
.grupo-opciones-pedido { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 10px; }
.grupo-opciones-pedido legend { font-weight: 700; padding: 0 4px; }
.opciones-pedido { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion-pedido { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 999px; padding: 5px 12px; cursor: pointer; background: var(--campo); }
.opcion-pedido:has(input:checked) { border-color: var(--fg); background: var(--fg); color: var(--sobre-fg); }
.opcion-pedido input { margin: 0; }
.opcion-pedido small { opacity: 0.8; }
.opcion-pedido:has(input:checked) small { opacity: 1; color: inherit; }
.tabla-opciones-config input[type=text] { width: 100%; }
.tabla-opciones-config input[type=number] { width: 7em; }
.categorias-opciones-config { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* Caller ID: aviso de llamada entrante (en cualquier pantalla). */
.aviso-llamada { width: min(520px, calc(100vw - 24px)); border: 4px solid var(--ok); animation: pulso-llamada 1s ease-in-out infinite alternate; }
.aviso-llamada::backdrop { background: rgb(0 0 0 / 0.5); }
.aviso-llamada h2 { display: flex; align-items: center; gap: 8px; }
.icono-llamada { display: inline-flex; color: var(--ok); }
.icono-llamada .icono { width: 24px; height: 24px; animation: vibrar 0.5s ease-in-out infinite; }
.llamada { padding: 12px 0; }
.llamada + .llamada { border-top: 1px solid var(--borde); }
.llamada-linea { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.llamada-numero { font-size: 1.8rem; font-weight: 800; letter-spacing: 0.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.llamada-cliente { font-size: 1.3rem; font-weight: 700; margin: 0; }
.llamada-cliente.desconocido { color: var(--muted); font-weight: 600; }
.llamada-direccion { margin: 2px 0; }
.llamada-ya-pidio { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.llamada .acciones { margin-top: 12px; }
.llamada .boton.grande { min-width: 160px; }
@keyframes pulso-llamada { from { box-shadow: 0 0 0 0 rgb(31 122 69 / 0.6); } to { box-shadow: 0 0 0 14px rgb(31 122 69 / 0); } }
@keyframes vibrar { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .aviso-llamada, .icono-llamada .icono { animation: none; } }

/* Pantalla sin conexión (app instalada, servidor que no responde). */
.sin-conexion { text-align: center; }
.sin-conexion h1 { font-size: 1.4rem; margin: 12px 0 8px; }

.recordatorios-hoy.destello { animation: destello 0.6s ease-in-out 3; }
@keyframes destello { 50% { background: var(--destello); } }
.chip-recordatorio { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--borde); font-size: 0.75rem; color: var(--muted); }

/* Aviso de recordatorios al iniciar sesión: grande, amarillo, con borde que late y barra de cuenta regresiva. */
.aviso-recordatorios { width: min(640px, calc(100vw - 24px)); max-width: none; border: 6px solid var(--alerta); background: var(--aviso-fondo);
  animation: pulso-aviso 0.9s ease-in-out infinite alternate; }
.aviso-recordatorios::backdrop { background: rgb(0 0 0 / 0.55); }
.aviso-recordatorios .dialogo-cabecera { background: var(--aviso-fondo); }
.aviso-recordatorios h2 { font-size: 1.6rem; color: var(--aviso-titulo); }
.aviso-recordatorios ul { margin: 8px 0 16px; padding-left: 26px; font-size: 1.35rem; font-weight: 700; line-height: 1.4; }
.aviso-recordatorios li + li { margin-top: 6px; }
.aviso-recordatorios .cuenta-regresiva { height: 6px; border-radius: 3px; background: rgb(0 0 0 / 0.08); overflow: hidden; }
.aviso-recordatorios .cuenta-regresiva span { display: block; height: 100%; background: var(--alerta); transform-origin: left;
  animation: cuenta var(--segundos, 5s) linear forwards; }
@keyframes pulso-aviso { from { box-shadow: 0 0 0 0 rgb(230 160 0 / 0.7); } to { box-shadow: 0 0 0 16px rgb(230 160 0 / 0); } }
@keyframes cuenta { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .aviso-recordatorios, .recordatorios-hoy.destello { animation: none; } }

.grilla-config { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px 24px; }
.grilla-config .ancho-completo { grid-column: 1 / -1; }
.barra-guardar { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; }

/* ---------- Inicio ---------- */
.inicio-hero {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--borde); border-radius: 12px; padding: 20px 24px; margin-bottom: 16px;
  box-shadow: var(--sombra); border-top: 4px solid var(--primario);
}
.inicio-hero h1 { margin: 0 0 4px; font-size: 1.7rem; }
.inicio-hero .turno { color: var(--muted); margin: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
a.chip, a.chip:hover { text-decoration: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--bg); }
.chip.ok { background: var(--tinte-verde); color: var(--ok); }
.chip.alerta { background: var(--tinte-amarillo); color: var(--alerta); }
.chips-lineas { display: contents; }
.chip.error { background: var(--tinte-rojo); color: var(--error); }
/* Franja de alerta debajo de la barra (caller ID desconectado): queda hasta que se arregla. */
.franja-alerta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 16px;
  background: var(--tinte-rojo); color: var(--error); border-bottom: 1px solid var(--error); font-size: 0.95rem; }
.franja-alerta a { color: inherit; font-weight: 700; margin-left: auto; }
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.acceso {
  display: grid; gap: 4px; padding: 16px; border-radius: var(--radio); background: var(--card);
  border: 1px solid var(--borde); color: var(--fg); text-decoration: none; box-shadow: var(--sombra);
}
.acceso:hover { border-color: var(--primario); }
.acceso strong { font-size: 1.05rem; }
.acceso.destacado { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.acceso.destacado span { color: #fbe4e2; }
.acceso.destacado:hover { background: var(--primario-hover); }
.acceso span { color: var(--muted); font-size: 0.85rem; }

/* ---------- Login ---------- */
.pantalla-login { min-height: 100vh; display: grid; place-items: center; padding: 16px 16px 40px; }   /* abajo: lugar para el pie fijo */
.tarjeta-login {
  width: min(380px, 100%); background: var(--card); border: 1px solid var(--borde);
  border-radius: 12px; padding: 32px 28px; box-shadow: var(--sombra);
}
.tarjeta-login .subtitulo { text-align: center; }
.subtitulo { color: var(--muted); margin: 4px 0 20px; }
.enlace-soporte { text-align: center; margin: 16px 0 0; font-size: 0.85rem; }
.enlace-soporte a { color: var(--muted); }
.codigo-soporte { text-align: center; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.05em; margin: 8px 0 16px; }
.codigo-soporte code { user-select: all; }
.opcion-soporte { border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px 12px 12px; margin: 0 0 12px; display: grid; gap: 8px; }
.opcion-soporte legend { font-weight: 600; padding: 0 4px; }
.opcion-soporte textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; }
.tarjeta-login .boton.ancho + .boton.ancho { margin-top: 8px; }

/* ---------- Tiempo real (indicador en el encabezado) ---------- */
.tiempo-real { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--alerta); flex: none; }
.tiempo-real::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #c9c6bd; }
.tiempo-real[data-estado="conectado"]::before { background: var(--ok); }
.tiempo-real[data-estado="reconectando"]::before { background: var(--alerta); animation: latido 1s infinite alternate; }
.tiempo-real[data-estado="desconectado"]::before { background: var(--error); }
@keyframes latido { to { opacity: 0.3; } }

/* ---------- Estados de pedido ---------- */
.e-pendiente { --estado: #6b6a64; --estado-bg: #eceae4; }
.e-horno     { --estado: #6b3e22; --estado-bg: #f1e4da; }   /* marrón oscuro */
.e-listo     { --estado: #c25e00; --estado-bg: #ffead3; }   /* naranja (no se confunde con el azul de Web) */
.e-camino    { --estado: #6a3fa0; --estado-bg: #eee5fa; }
.e-entregado { --estado: var(--ok); --estado-bg: #e3f4ea; }
.e-anulado   { --estado: var(--error); --estado-bg: #fbe4e2; }
.chip-estado { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; color: var(--estado); background: var(--estado-bg); vertical-align: middle; }

/* ---------- Panel de pedidos ---------- */
.boton.grande { padding: 12px 20px; font-size: 1.05rem; }
.boton-chip { border: 0; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; }
.chips-filtro { display: flex; gap: 6px; flex-wrap: wrap; }
/* Si no entran (celular): se desplazan sin barra (dedo, rueda o arrastrando) y los bordes se desvanecen donde hay más (como las categorías de la tienda). */
.chips-filtro { scrollbar-width: none; -ms-overflow-style: none; }
.chips-filtro::-webkit-scrollbar { display: none; }
.chips-filtro.mas-izq { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.chips-filtro.mas-der { -webkit-mask-image: linear-gradient(to left, transparent, #000 36px); mask-image: linear-gradient(to left, transparent, #000 36px); }
.chips-filtro.mas-izq.mas-der { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
@media (pointer: fine) { .chips-filtro.desplaza { cursor: grab; } }
.chip-filtro { font: inherit; font-size: 0.9rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--card); color: var(--fg); cursor: pointer; }
.chip-filtro span { color: var(--muted); font-weight: 500; margin-left: 2px; }
.chip-filtro.activo { background: var(--fg); color: var(--sobre-fg); border-color: var(--fg); }
.chip-filtro.activo span { color: var(--gris-suave); }
.grilla-pedidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.grilla-pedidos .pedido { font-size: 0.8rem; padding: 9px 11px; gap: 4px; }   /* ~25 % más chico: entran más pedidos */
.grilla-pedidos .pedido .numero { font-size: 1.1rem; }
.grilla-pedidos .pedido footer .total { font-size: 0.95rem; }
.grilla-pedidos .pedido .boton.chico { font-size: 0.75rem; padding: 3px 8px; }
.pedido.origen-web { background: var(--web-fondo); border-color: var(--web-borde); }
.etiqueta-web { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; color: #fff; background: var(--web); padding: 1px 6px; border-radius: 4px; }
.pedido .notas.envio { background: var(--nota-envio); }
.f-curso { --estado: var(--fg); --estado-bg: var(--tinte-gris); }
.f-web { --estado: var(--web); --estado-bg: var(--tinte-azul); }
.f-todos { --estado: var(--muted); --estado-bg: var(--tinte-gris-suave); }
.f-mostrador { --estado: var(--primario); --estado-bg: var(--tinte-rojo); }
.chip-filtro[class*="e-"], .chip-filtro[class*="f-"] { background: var(--estado-bg); color: var(--estado); border-color: transparent; }
.chip-filtro[class*="e-"].activo, .chip-filtro[class*="f-"].activo { background: var(--estado); color: var(--sobre-estado); }
.chip-filtro.activo span { color: inherit; opacity: 0.8; }
.estado-actual { display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 700; padding: 4px 10px; border-radius: 6px;
  color: var(--sobre-estado); background: var(--estado); }
.viendo-otro { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.boton-nuevo-pedido { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; font-size: 1.1rem; }
.boton-con-icono { display: inline-flex; align-items: center; gap: 6px; }
.boton-con-icono .icono { width: 18px; height: 18px; }
.boton-tacho { display: inline-grid; place-items: center; padding: 6px 10px; color: var(--error); }
.boton-tacho .icono { width: 20px; height: 20px; }
.boton-tacho:hover { background: var(--tinte-rojo); border-color: var(--error); }
.boton-nuevo-pedido .icono, .acceso-principal .icono { width: 26px; height: 26px; flex: none; }
.acceso-principal { display: flex; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 18px 22px; margin-bottom: 16px; border-radius: 12px; text-decoration: none;
  background: var(--primario); color: var(--sobre-primario); box-shadow: 0 4px 14px rgb(0 0 0 / 0.25); }
.acceso-principal:hover { background: var(--primario-hover); }
.acceso-principal .icono { width: 42px; height: 42px; }
.acceso-principal strong { display: block; font-size: 1.5rem; }
.acceso-principal small { color: #fbe4e2; font-size: 0.95rem; }
.grilla-pedidos > .vacio { grid-column: 1 / -1; }
.pedido {
  display: grid; gap: 6px; align-content: start; background: var(--card); border: 1px solid var(--borde);
  border-left: 6px solid var(--estado); border-radius: var(--radio); padding: 12px 14px; box-shadow: var(--sombra); cursor: pointer;
}
.pedido:hover, .pedido:focus-visible { border-color: var(--estado); outline: none; }
.pedido p { margin: 0; }
.pedido header { display: flex; align-items: baseline; gap: 10px; }
.pedido .numero { font-size: 1.35rem; font-weight: 800; }
.pedido .estado { font-size: 0.8rem; font-weight: 700; color: var(--estado); background: var(--estado-bg); padding: 1px 8px; border-radius: 999px; }
.pedido .horas { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.pedido .horas strong { color: var(--fg); }
.pedido .cliente { font-weight: 600; }
.pedido .cliente .nota { font-weight: 400; margin-left: 6px; }
.pedido .destino { color: var(--muted); overflow-wrap: anywhere; }
.pedido .notas { font-size: 0.9rem; background: var(--nota); padding: 4px 8px; border-radius: 4px; }
.resumen-categorias { justify-self: start; margin: 0; font-size: 0.85rem; font-weight: 700; background: var(--nota); padding: 2px 10px; border-radius: 999px; }
.pedido footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--borde); padding-top: 8px; margin-top: 2px; }
.pedido footer .total { font-weight: 800; font-size: 1.1rem; }
.pedido footer .nota { flex: 1; min-width: 0; }
.pedido.e-entregado, .pedido.e-anulado { opacity: 0.75; }
.pedido.e-anulado .total { text-decoration: line-through; }
.pedido.demora-Demorado { box-shadow: 0 0 0 2px var(--error); }
.pedido.demora-PorVencer { box-shadow: 0 0 0 2px #e0a800; }
.alerta-demora { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--error); padding: 2px 8px; border-radius: 4px; justify-self: start; }
.alerta-demora.por-vencer { background: #e0a800; color: #3d2c00; }

.detalle-pedido { display: grid; gap: 12px; }
.detalle-pedido h2 { margin: 0; }
.detalle-pedido h3 { margin: 4px 0 0; font-size: 1rem; }
.detalle-pedido p { margin: 0; }
.items-pedido { border: 1px solid var(--borde); border-radius: var(--radio); }
.botones-estado, .opciones-rapidas { display: flex; gap: 6px; flex-wrap: wrap; }
.historial ul { margin: 6px 0 0; padding-left: 20px; color: var(--muted); font-size: 0.9rem; }
.historial summary { cursor: pointer; color: var(--muted); }
.total-grande { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.35rem; font-weight: 800; margin: 8px 0; }

/* ---------- Toma de pedido (pantalla completa) ---------- */
body.pantalla-completa .contenedor { max-width: none; padding: 12px; }
body.pantalla-completa .topbar { padding-top: 2px; padding-bottom: 2px; }
.toma-pedido {
  display: grid; gap: 12px; grid-template-columns: minmax(260px, 1fr) minmax(360px, 2fr) minmax(300px, 1.2fr);
  align-items: start;
}
.toma-pedido { font-size: 0.8rem; }   /* ~25 % más chico: entra más en los monitores de las terminales */
.toma-pedido input, .toma-pedido select, .toma-pedido textarea, .toma-pedido .boton { font-size: 0.8rem; }
.toma-pedido input, .toma-pedido select { min-height: 32px; padding: 5px 8px; }
.toma-pedido .boton.grande { font-size: 1rem; }
.toma-pedido h2 { font-size: 1rem; }
.toma-pedido .total-grande { font-size: 1.15rem; }
.toma-pedido .tecla { min-width: 34px; height: 34px; font-size: 0.85rem; }
.toma-pedido .producto { min-height: 62px; padding: 8px; }
.toma-pedido .tab { padding: 8px 12px; font-size: 0.85rem; }
.barra-confirmar { display: none; }
.toma-pedido > .tarjeta { margin: 0; padding: 14px; }
.toma-pedido h2 { margin: 0; }
.toma-pedido h3 { margin: 12px 0 6px; font-size: 1rem; }
.panel-cliente { display: grid; gap: 10px; }
.panel-cliente .titulo-con-acciones { margin-bottom: 0; }
.panel-carrito { position: sticky; top: 64px; display: grid; gap: 4px; max-height: calc(100vh - 80px); overflow-y: auto; }
.panel-productos { display: grid; gap: 10px; min-width: 0; }

.selector-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.selector-entrega .boton { padding: 10px 8px; white-space: normal; }
.resultados { display: grid; gap: 4px; }
.resultado { text-align: left; font: inherit; background: var(--bg); border: 1px solid var(--borde); border-radius: 6px; padding: 8px 10px; cursor: pointer; color: var(--fg); }
.resultado:hover, .resultado:focus-visible { border-color: var(--primario); background: var(--campo); }
.resultado small { color: var(--muted); }
.acciones.izquierda { justify-content: flex-start; flex-wrap: wrap; }
fieldset.anonimo, fieldset.direcciones { border: 1px dashed var(--borde); border-radius: var(--radio); padding: 8px 10px 10px; display: grid; gap: 6px; }
fieldset.anonimo legend, fieldset.direcciones legend { color: var(--muted); font-size: 0.85rem; padding: 0 4px; }
fieldset.direcciones label.check { font-weight: 400; flex-wrap: nowrap; align-items: flex-start; }
fieldset.direcciones label.check input { margin-top: 3px; flex: none; }
.cliente-elegido { display: grid; gap: 8px; }
.cliente-elegido strong { font-size: 1.05rem; }
.cliente-elegido p { margin: 0; }
.observaciones { font-size: 0.9rem; }
.ultimos summary { cursor: pointer; font-weight: 600; margin-bottom: 4px; }
.ultimo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--borde); font-size: 0.9rem; }
.ultimo small { color: var(--muted); }

.panel-productos { min-width: 0; }   /* sin esto, la columna crece al ancho de las solapas y no se pueden repartir */
.tabs-categorias { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fila-cat { display: flex; gap: 4px; }
.fila-cat .tab { flex: none; }
.fila-cat.primera { overflow: hidden; }
.fila-cat.segunda { overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.tab { font: inherit; font-weight: 600; white-space: nowrap; padding: 10px 14px; border: 1px solid var(--borde); border-radius: 6px; background: var(--bg); color: var(--fg); cursor: pointer; }
.tab.activa { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.tabs-subcategorias { display: flex; gap: 4px; overflow-x: auto; padding: 2px 0 4px; border-bottom: 1px solid var(--borde); scrollbar-width: thin; }
.subtab { font: inherit; font-size: 0.85em; font-weight: 600; white-space: nowrap; padding: 5px 12px; border: 1px solid var(--borde); border-radius: 999px; background: var(--campo); color: var(--fg); cursor: pointer; }
.subtab.activa { background: var(--fg); border-color: var(--fg); color: var(--sobre-fg); }

/* Buscador de productos: lupa al final del primer renglón de categorías, pegada a la derecha. */
.tab-buscar { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 0 12px; border: 1px solid var(--borde); border-radius: 6px; background: var(--campo); color: var(--fg); cursor: pointer; }
.tab-buscar .icono { width: 20px; height: 20px; }
.tab-buscar.activa { background: var(--fg); border-color: var(--fg); color: var(--sobre-fg); }
.buscador-productos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0 8px; border-bottom: 1px solid var(--borde); }
.buscador-productos .campo-buscar { flex: 1 1 260px; display: flex; align-items: center; gap: 6px; border: 2px solid var(--fg); border-radius: 8px; padding: 0 8px; background: var(--campo); }
.buscador-productos .campo-buscar .icono { width: 18px; height: 18px; color: var(--muted); flex: none; }
.buscador-productos input[type=search] { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; padding: 9px 2px; background: transparent; min-height: 0; }
.buscador-productos input[type=search]::-webkit-search-cancel-button { display: none; }
.buscador-productos .limpiar { border: 0; background: none; font-size: 1.2rem; color: var(--muted); cursor: pointer; padding: 4px; }
.buscador-productos label.chk { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; cursor: pointer; margin: 0; font-weight: 400; }
.buscador-productos label.chk input { width: 18px; height: 18px; min-height: 0; }
.buscador-productos .donde { font-size: 0.85em; color: var(--muted); width: 100%; }
.producto mark { background: var(--resaltado); color: inherit; padding: 0 1px; border-radius: 2px; }
.producto .cat-chip { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.barra-productos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.teclado-cantidad { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cantidad-pendiente { font-weight: 800; font-size: 1.2rem; min-width: 48px; text-align: center; color: var(--primario); }
.tecla { font: inherit; font-weight: 700; min-width: 40px; height: 40px; border: 1px solid var(--borde); border-radius: 6px; background: var(--campo); color: var(--fg); cursor: pointer; touch-action: manipulation; }
.tecla:active { background: var(--bg); }
.tecla.chica { min-width: 30px; height: 30px; padding: 0; }
.grilla-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.producto {
  display: grid; gap: 4px; align-content: space-between; text-align: left; min-height: 78px; padding: 10px;
  font: inherit; border: 2px solid var(--producto-borde); border-radius: var(--radio); background: var(--campo); color: var(--fg); cursor: pointer; touch-action: manipulation;
}
.producto:hover { border-color: var(--fg); }
/* Ya está en el pedido: verde claro con 1 unidad; naranja, marrón y rojo con 2, 3 y 4; otros colores con 5 o más.
   Abajo a la derecha, las unidades: así se nota un doble toque sin querer. */
.producto { position: relative; }
.producto.en-pedido { background: var(--en-pedido); border-color: var(--en-pedido-borde); --borde-toque: var(--en-pedido-borde); }
.producto[data-nivel="2"] { background: var(--toque-2); border-color: var(--toque-2-borde); --borde-toque: var(--toque-2-borde); }
.producto[data-nivel="3"] { background: var(--toque-3); border-color: var(--toque-3-borde); --borde-toque: var(--toque-3-borde); }
.producto[data-nivel="4"] { background: var(--toque-4); border-color: var(--toque-4-borde); --borde-toque: var(--toque-4-borde); }
.producto[data-nivel="x1"] { background: var(--toque-x1); border-color: var(--toque-x1-borde); --borde-toque: var(--toque-x1-borde); }
.producto[data-nivel="x2"] { background: var(--toque-x2); border-color: var(--toque-x2-borde); --borde-toque: var(--toque-x2-borde); }
.producto[data-nivel="x3"] { background: var(--toque-x3); border-color: var(--toque-x3-borde); --borde-toque: var(--toque-x3-borde); }
.producto[data-nivel="x4"] { background: var(--toque-x4); border-color: var(--toque-x4-borde); --borde-toque: var(--toque-x4-borde); }
.producto[data-nivel="x5"] { background: var(--toque-x5); border-color: var(--toque-x5-borde); --borde-toque: var(--toque-x5-borde); }
.producto[data-nivel="x6"] { background: var(--toque-x6); border-color: var(--toque-x6-borde); --borde-toque: var(--toque-x6-borde); }
.unidades-producto { position: absolute; right: 6px; bottom: 6px; min-width: 26px; padding: 1px 6px; border-radius: 999px; text-align: center;
  background: var(--card); color: var(--fg); border: 2px solid var(--borde-toque, var(--borde)); font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.producto:active { transform: scale(0.98); background: var(--bg); }
.producto .nombre { font-weight: 600; line-height: 1.2; }
.producto .precio { color: var(--muted); font-variant-numeric: tabular-nums; }
.producto .stock { font-size: 0.75rem; color: var(--muted); }
.producto .stock.poco { color: var(--error); font-weight: 700; }
.producto.elegido { border: 2px solid var(--primario); background: var(--tinte-rojo); }

.lista-carrito { list-style: none; margin: 0; padding: 0; }
.lista-carrito li { padding: 8px 0; border-bottom: 1px solid var(--borde); display: grid; gap: 4px; }
.linea { display: flex; align-items: center; gap: 8px; }
.linea .cant { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.linea .cant strong { min-width: 20px; text-align: center; }
.linea .desc { flex: 1; min-width: 0; line-height: 1.25; }
.linea-2 { display: flex; gap: 6px; align-items: center; }
.linea-2 input { flex: 1; min-height: 30px; padding: 4px 8px; font-size: 0.9rem; }
.fila-envio, .fila-vuelto { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.fila-envio label, .fila-vuelto label { grid-template-columns: auto 110px; align-items: center; gap: 8px; }
.fila-pago { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.fila-pago select { flex: 1; min-width: 0; }
.fila-pago input { width: 120px; text-align: right; }
/* El monto del último medio de pago se calcula solo (lo que falta): apenas más oscuro que un campo normal, no gris. */
.fila-pago input[readonly] { background: color-mix(in srgb, var(--campo) 82%, var(--bg)); cursor: default; }
.vuelto { font-size: 1.05rem; }
.vuelto.negativo { color: var(--error); }

/* Toma de pedido en las terminales de 1024×768: tres columnas más angostas y letra un poco más chica. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .toma-pedido { gap: 8px; grid-template-columns: minmax(210px, 0.9fr) minmax(300px, 1.7fr) minmax(270px, 1.15fr); font-size: 0.75rem; }
  .toma-pedido > * { min-width: 0; }
  body.pantalla-completa .contenedor { padding: 8px; }
  .toma-pedido > .tarjeta { padding: 10px; }
  .toma-pedido input, .toma-pedido select, .toma-pedido textarea, .toma-pedido .boton { font-size: 0.75rem; }
  .toma-pedido input, .toma-pedido select { min-height: 30px; padding: 4px 7px; }
  .toma-pedido .grilla-productos { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
  .toma-pedido .producto { min-height: 56px; padding: 6px; }
  .toma-pedido .tecla { min-width: 30px; height: 30px; }
  .toma-pedido .tab { padding: 6px 9px; }
  .panel-carrito { top: 48px; max-height: calc(100vh - 60px); }
}

/* Toma de pedido: en pantallas chicas y medianas (celular y tablet) es igual. Una columna: cliente, productos y pedido,
   con la barra fija de abajo para confirmar. Las tres columnas quedan para pantallas de 1000 px o más (terminales 1024×768). */
@media (max-width: 999px) {
  .toma-pedido { grid-template-columns: 1fr; padding-bottom: 64px; }
  .panel-carrito { position: static; max-height: none; }
  .barra-confirmar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px; background: var(--card); border-top: 1px solid var(--borde); box-shadow: 0 -4px 12px rgb(0 0 0 / 0.08); font-size: 1rem; }
  .barra-confirmar strong { font-size: 1.2rem; }
}
@media (max-width: 720px) {
  body.pantalla-completa .contenedor { padding: 8px; }
  .toma-pedido .tab { padding: 7px 10px; }
  .grilla-productos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .grilla-pedidos { grid-template-columns: 1fr; }
  .barra-filtros input[type=search] { min-width: 0; flex-basis: 100%; }
  .chips-filtro { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scroll-behavior: smooth; }
  .chip-filtro { white-space: nowrap; }
  .tecla { min-width: 36px; }
  /* Celular: teclado y botones (½ y ½, Eventual) fluyen juntos, así los botones usan el lugar libre después de la C. */
  .barra-productos { gap: 4px; justify-content: flex-start; }
  .barra-productos > .teclado-cantidad, .barra-productos > .acciones { display: contents; }
  .barra-productos .acciones .boton { height: 34px; padding-block: 0; }
  .solo-celular { display: inline-block; }
  .titulo-con-acciones .acciones { flex-wrap: wrap; justify-content: flex-start; }
  .boton-nuevo-pedido { flex-basis: 100%; justify-content: center; }
  #trabajos:not(.todas) tr.extra { display: none !important; }
  .vista-comanda .titulo-con-acciones { flex-wrap: nowrap; }
  .vista-comanda .chip-filtro { padding: 5px 10px; }
}

/* ---------- Impresión ---------- */
[hidden] { display: none !important; }
.alerta-impresion { font-size: 0.8rem; font-weight: 700; color: var(--error); background: var(--tinte-rojo); padding: 2px 8px; border-radius: 4px; justify-self: start; }
.alerta-impresion::before { content: "⚠ "; }
.impresiones li { align-items: flex-start; }
.impresiones li.con-problema strong { color: var(--error); }
.grilla-impresoras { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 16px; }
.grilla-impresoras > .tarjeta { margin: 0; }
.impresora { display: grid; gap: 6px; align-content: start; }
.impresora p { margin: 0; }
.impresora header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.impresora header strong { font-size: 1.1rem; }
.impresora.inactiva { opacity: 0.7; }
.impresora .acciones { margin-top: 6px; justify-content: flex-start; flex-wrap: wrap; }
pre.comando { background: var(--fg); color: var(--sobre-fg); padding: 10px 12px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem; margin: 0; }
.clave-agente { font-family: ui-monospace, Consolas, monospace; }
.lista-pruebas li { align-items: center; }
.vista-logo { display: grid; place-items: center; background: #fff; border: 1px dashed var(--borde); border-radius: var(--radio); padding: 12px; }
.vista-logo canvas, .vista-logo img { max-width: 100%; image-rendering: pixelated; }
.vista-logo .ticket { box-shadow: none; padding: 0; }
.solo-celular { display: none; }
.lista-pruebas .acciones { flex: none; }

/* Vista previa de la comanda: imita el papel térmico. */
.vista-comanda { width: auto; max-width: calc(100vw - 16px); background: var(--comanda-fondo); }
.vista-comanda .titulo-con-acciones { margin-bottom: 12px; }
.papel { display: flex; justify-content: center; }
.ticket {
  background: #fff; color: #000; padding: 16px 12px 8px; box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: clamp(8.5px, 2.5vw, 13px);
  width: fit-content; min-width: 32ch;
}
.ticket .r { white-space: pre; line-height: 1.3; min-height: 1.3em; overflow: hidden; }
.ticket .cen { text-align: center; }
.ticket .der { text-align: right; }
.ticket .chica { font-size: 0.75em; }
.ticket .b { font-weight: 800; }
.ticket .inv span { background: #000; color: #fff; }
.ticket .w2.h2 { font-size: 2em; }
.ticket .w3.h3 { font-size: 3em; line-height: 1.1; }
.ticket .w1.h2 { height: 2.6em; }
.ticket .w1.h2 span { display: inline-block; transform: scaleY(2); transform-origin: top; }
.ticket img { image-rendering: pixelated; width: 50%; max-width: 200px; }
.ticket .corte { border-top: 2px dashed #bbb; margin: 10px -12px 0; }

/* ---------- Avisos y verificación en dos pasos ---------- */
.avisos { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; z-index: 20; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.avisos .aviso { position: static; transform: none; pointer-events: auto; text-align: center; }
.qr { display: grid; place-items: center; }
.qr svg { width: 220px; height: 220px; }
.pasos { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
/* Data Fiscal (Formulario 960/D) en Configuración → Facturación */
.data-fiscal details { margin: 10px 0; }
.data-fiscal details .pasos { margin-top: 8px; }
.data-fiscal textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
.data-fiscal-actual { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 10px 0; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--bg); }
.data-fiscal-actual > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.data-fiscal-actual img { display: block; height: auto; }
.codigos-recuperacion { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; font-size: 1.1rem; }

/* ---------- Caja ---------- */
.caja-cerrada-aviso { border-top: 4px solid var(--alerta); display: grid; gap: 8px; justify-items: start; }
.caja-cerrada-aviso h2, .caja-cerrada-aviso p { margin: 0; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cifra { display: grid; gap: 2px; background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; box-shadow: var(--sombra); }
.cifra span { color: var(--muted); font-size: 0.85rem; }
.cifra strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.cifra small { color: var(--muted); }
.cifra.destacada { border-top: 4px solid var(--ok); }
.cifra.alerta-cifra strong { color: var(--alerta); }
.caja-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.caja-grilla > * { min-width: 0; }
.acciones-motoquero { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
.acciones-motoquero + .etiqueta.debe { display: inline-block; margin-top: 4px; white-space: nowrap; }
.caja-grilla .tabla.fija td:first-child { white-space: normal; }
.acciones-motoquero:empty { display: none; }
.tabla td .etiqueta.bloque { display: table; margin: 2px 0 0 auto; }
.caja-grilla .tarjeta { margin: 0; }
.caja-grilla h2 { display: flex; gap: 8px; align-items: center; margin: 0; }
.caja-grilla h3 { margin: 16px 0 8px; font-size: 1rem; }
.caja.cerrada .cifra.destacada { border-top-color: var(--muted); }
.tabla tr.total td { font-weight: 700; border-top: 2px solid var(--borde); }
.botones-mov { margin-bottom: 10px; }
.movimientos .mov-sale { color: var(--error); }
.movimientos .mov-entra { color: var(--ok); }
.movimientos .mov-neutro { color: var(--muted); }
.campo-con-boton { display: flex; gap: 8px; align-items: stretch; }
.campo-con-boton input { flex: 1; min-width: 0; }
.diferencia-arqueo { font-size: 1.1rem; font-weight: 700; margin: 0; min-height: 1.4em; }
.diferencia-arqueo.ok { color: var(--ok); }
.diferencia-arqueo.sobra { color: var(--alerta); }
.diferencia-arqueo.falta { color: var(--error); }
@media (max-width: 900px) { .caja-grilla { grid-template-columns: 1fr; } }

/* ---------- Celular y pantallas chicas ---------- */
@media (max-width: 900px) {
  .topbar { gap: 8px; padding: 6px 12px; }
  /* Botón del menú a la izquierda; el menú es un panel lateral que entra desde la izquierda (todo el alto, hasta la mitad del ancho). */
  .boton-menu { display: block; order: -1; margin-left: 0; }
  .topbar > .marca { margin-right: auto; }
  .menu, .usuario-actual { --ancho-panel: min(50vw, 340px); position: fixed; left: 0; width: var(--ancho-panel); z-index: 21; background: var(--card);
    transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility .22s; box-shadow: 4px 0 24px rgb(0 0 0 / 0.25); }
  .menu { top: 0; bottom: 60px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; overflow-y: auto; overscroll-behavior: contain; padding: 14px 10px; }
  .usuario-actual { bottom: 0; height: 60px; display: flex; justify-content: space-between; padding: 8px 16px; border-top: 1px solid var(--borde); }
  body.menu-abierto .menu, body.menu-abierto .usuario-actual { transform: none; visibility: visible; }
  body.menu-abierto .topbar::before { content: ""; position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / 0.45); }
  body.menu-abierto { overflow: hidden; }
  .menu a { padding: 10px 12px; }
  .menu-grupo summary { padding: 10px 12px; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .menu-grupo summary::after { content: none; }
  .menu-grupo summary[aria-current="page"] { background: transparent; color: var(--muted); }
  .menu-grupo .submenu { position: static; box-shadow: none; border: 0; padding: 0 0 0 10px; display: grid; }
}

@media (max-width: 720px) {
  .contenedor { padding: 16px 12px; }
  h1 { font-size: 1.3rem; }
  .titulo-con-acciones { flex-wrap: wrap; }
  .grilla-direccion { grid-template-columns: 1fr 1fr; }
  .grilla-direccion .ancho-2, .grilla-direccion .ancho-3 { grid-column: 1 / -1; }
  .dos-columnas { grid-template-columns: 1fr; }
  .fila-lista input:first-child { flex-basis: 100%; }
  .inicio-hero { padding: 16px; gap: 12px; }
  .marca-media img { width: 72px; height: 72px; }
  .marca-media .marca-texto { font-size: 0.85rem; }
  .tarjeta { padding: 16px; }
  .dialogo { --pad: 16px; }

  /* Tablas como tarjetas: cada fila es un bloque y cada celda muestra el título de su columna. */
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: 10px 14px; border-bottom: 1px solid var(--borde); }
  .tabla tr:last-child { border-bottom: 0; }
  .tabla td { border: 0; padding: 3px 0; text-align: right; overflow-wrap: anywhere; }
  .tabla td::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--muted); font-size: 0.8rem; text-align: left; line-height: 1.8; }
  .tabla td:first-child { font-weight: 600; text-align: left; display: block; }
  .tabla td:first-child::before { content: none; }
  .tabla td[data-label=""]::before, .tabla td:not([data-label])::before { content: none; }
  .tabla td.acciones-fila { width: 100%; white-space: normal; padding-top: 8px; }
  .tabla .num { width: 100%; }
  .tabla td.acciones-fila::before { content: none; }
  .tabla td.vacio { text-align: center; }
  .tabla.compacta td { display: flex; justify-content: space-between; align-items: center; }
  .tabla.compacta td::before { float: none; }
}

/* Tablas chicas que se leen mejor como tabla también en el celular (ej. Caja). Va al final para ganarle a la regla de arriba. */
@media (max-width: 720px) {
  .tabla.fija { display: table; }
  .tabla.fija thead { display: table-header-group; }
  .tabla.fija tbody { display: table-row-group; }
  .tabla.fija tr { display: table-row; padding: 0; }
  .tabla.fija td, .tabla.compacta.fija td { display: table-cell; width: auto; padding: 6px 6px; text-align: left; border-bottom: 1px solid var(--borde); overflow-wrap: normal; }
  .tabla.fija td:first-child, .tabla.fija td.num { white-space: nowrap; }
  .tabla.fija td.num { text-align: right; }
  .tabla.fija td:first-child { font-weight: inherit; }
  .tabla.fija td::before { content: none; }
  .tabla.fija td.acciones-fila { width: 1%; white-space: nowrap; padding-top: 6px; }
}

/* ---------- Reportes ---------- */
.filtros-reporte { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.filtros-reporte .rango { display: flex; gap: 6px; align-items: center; }
.filtros-reporte input[type=date], .filtros-reporte select { width: auto; }
.solapas-reporte { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.reporte .cifra { min-width: 0; }
.reporte .cifra strong { overflow-wrap: anywhere; }
.solapas-reporte, .filtros-reporte { max-width: 100%; min-width: 0; }
.cifra .variacion { font-size: 0.8rem; font-weight: 600; }
.cifra .variacion.sube { color: var(--ok); }
.cifra .variacion.baja { color: var(--error); }
.grilla-reporte { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.grilla-reporte > .tarjeta, .grilla-reporte > section { margin: 0; }
.reporte > .tarjeta, .reporte > .grilla-reporte { margin-bottom: 16px; }
.tarjeta-grafico { display: grid; gap: 10px; }
.cabecera-grafico { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.cabecera-grafico h2 { margin: 0; font-size: 1.05rem; }
.cabecera-grafico .nota { margin: 2px 0 0; }
.lienzo-grafico { min-width: 0; }
.svg-grafico { display: block; width: 100%; height: auto; overflow: visible; }
.svg-grafico .grilla { stroke: var(--borde); stroke-width: 1; }
.svg-grafico .base { stroke: var(--muted); stroke-width: 1; }
.svg-grafico .eje { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.svg-grafico .valor { fill: var(--fg); font-size: 11px; font-weight: 600; }
.svg-grafico .zona { fill: transparent; }
.svg-grafico .zona.activo-tip { fill: var(--fg); fill-opacity: 0.06; }
.leyenda-grafico { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--fg); margin-bottom: 6px; }
.leyenda-grafico span { display: inline-flex; gap: 6px; align-items: center; }
.muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.barras-h { display: grid; gap: 6px; }
.fila-barra { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: 10px; align-items: center; font-size: 0.9rem; padding: 2px 4px; border-radius: 4px; }
.fila-barra[data-tip].activo-tip, .fila-barra[data-tip]:hover { background: var(--hover); }
.nombre-barra { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pista-barra { display: block; height: 18px; }
.pista-barra > i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; }
.pista-barra.segmentos { display: flex; gap: 2px; width: var(--largo); }
.pista-barra.segmentos > i { border-radius: 0; min-width: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pista-barra.segmentos > i:last-child { border-radius: 0 4px 4px 0; }
.pista-barra.segmentos > i { font-style: normal; }
.pista-barra.segmentos b { color: var(--texto-sobre-serie); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.pista-barra.segmentos > i.activo-tip { outline: 2px solid var(--fg); outline-offset: 1px; }
.valor-barra { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; text-align: right; min-width: 64px; }
.apiladas .pista-barra { height: 24px; }
.tip-grafico { position: fixed; z-index: 1000; pointer-events: none; background: var(--card); color: var(--fg); border: 1px solid var(--borde);
  border-radius: 6px; padding: 6px 10px; font-size: 0.85rem; white-space: pre-line; box-shadow: 0 4px 14px rgb(0 0 0 / 0.18); max-width: 280px; font-variant-numeric: tabular-nums; }
.tip-grafico[hidden] { display: none; }
.titulo-impresion { display: none; }
@media (max-width: 900px) { .grilla-reporte { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .filtros-reporte .rango { width: 100%; }
  .filtros-reporte .rango input { flex: 1; min-width: 0; }
  .fila-barra { grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 6px; font-size: 0.85rem; }
}

/* PDF de los reportes: Imprimir → Guardar como PDF. Sin menú ni filtros, en claro, sin cortar gráficos entre hojas. */
@media print {
  /* Márgenes arriba y abajo con @page; a los costados con padding, así quedan aunque en el diálogo se elija "Márgenes: Ninguno". */
  @page { size: A4; margin: 12mm 0; }
  body { background: #fff; }
  #app.contenedor { padding: 0 14mm !important; }
  .pie-app, .topbar, .filtros-reporte, .solapas-reporte, .no-imprimir, .titulo-con-acciones .acciones, #avisos, .aviso-version, .tip-grafico { display: none !important; }
  .contenedor { max-width: none; margin: 0; }
  .titulo-impresion { display: inline; }
  .tarjeta, .cifra { box-shadow: none; break-inside: avoid; }
  .grilla-reporte { grid-template-columns: 1fr 1fr; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Auditoría ---------- */
.filtros-auditoria input[type=search] { flex: 1 1 260px; min-width: 0; }
.filtros-auditoria select { width: auto; max-width: 100%; }
.filtros-auditoria .check small { display: block; }
.tabla-auditoria .fecha-aud { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-auditoria tr.sensible td:first-child { box-shadow: inset 3px 0 0 var(--error); }
.detalle-auditoria { background: var(--tinte-gris-suave); border-radius: var(--radio); padding: 10px 14px; overflow-x: auto; font-size: 0.9rem; }
.arbol { margin: 0; }
dl.arbol { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
dl.arbol dt { color: var(--muted); }
dl.arbol dd { margin: 0; overflow-wrap: anywhere; }
ol.arbol { padding-left: 20px; }
ol.arbol > li + li { margin-top: 4px; border-top: 1px dashed var(--borde); padding-top: 4px; }
@media (max-width: 720px) { .filtros-auditoria select { flex: 1 1 100%; } }

.grupo-opciones select.sangria { margin: 0 0 8px 28px; width: auto; max-width: calc(100% - 28px); }
@media (max-width: 720px) {
  /* Auditoría en el celular: fecha, usuario y acción arriba; lo que pasó abajo, a lo ancho. */
  .tabla-auditoria td { text-align: left; }
  .tabla-auditoria td::before { content: none !important; }
  .tabla-auditoria td:nth-child(2), .tabla-auditoria td:nth-child(3) { display: inline-block; width: auto; margin-right: 8px; }
  .tabla-auditoria td:nth-child(2) { color: var(--muted); }
  .tabla-auditoria td a { float: none; display: inline; white-space: nowrap; overflow-wrap: normal; }
}

/* ---------- Respaldos ---------- */
a.tab { text-decoration: none; display: inline-block; }
.solapas-reporte .tab-ayuda { margin-left: auto; color: var(--primario); border-color: color-mix(in srgb, var(--primario) 45%, var(--borde)); }
.estado-respaldos { border-top: 4px solid var(--ok); }
.estado-respaldos.con-alerta { border-top-color: var(--error); }
.estado-respaldos h2 { margin: 0; font-size: 1.1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.estado-respaldos .nota { margin: 6px 0 0; }
.ruta-destino { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; overflow-wrap: anywhere; }
.cartel-mantenimiento { text-align: center; max-width: 420px; padding: 28px; }
.cartel-mantenimiento::backdrop { background: rgb(0 0 0 / 0.6); }
.cartel-mantenimiento .rueda { width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%; border: 4px solid var(--borde); border-top-color: var(--primario); animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cartel-mantenimiento .rueda { animation-duration: 3s; } }
.aviso-ok { background: var(--tinte-verde); border: 1px solid var(--ok); color: var(--fg); padding: 10px 14px; border-radius: var(--radio); }
.aviso.aviso-ok, .aviso.aviso-error { border: 0; color: var(--toast-texto); padding: 10px 18px; }
.aviso.aviso-ok { background: var(--toast-ok); }
.aviso.aviso-error { background: var(--toast-error); }
@media (max-width: 720px) {
  /* Varios botones en una fila (ej. destinos de respaldo): que bajen de renglón en lugar de salirse de la pantalla. */
  .tabla td.acciones-fila { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* ---------- Empleados ---------- */
.grilla-empleados { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tarjeta-empleado { display: flex; gap: 12px; align-items: flex-start; text-align: left; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.tarjeta-empleado:hover { border-color: var(--fg); }
.tarjeta-empleado.inactivo { opacity: 0.65; }
.datos-empleado { display: grid; gap: 2px; min-width: 0; }
.datos-empleado .etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.foto-empleado { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--tinte-gris); border: 1px solid var(--borde); }
.foto-empleado.grande { width: 150px; height: 150px; border-radius: 12px; }
.foto-empleado.sin-foto { display: grid; place-items: center; color: var(--muted); }
.foto-empleado.sin-foto .icono { width: 60%; height: 60%; }
.legajo-cabecera { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.legajo-foto { display: grid; gap: 8px; justify-items: center; }
.legajo-foto .acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.datos-legajo { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.datos-legajo dt { color: var(--muted); }
.datos-legajo dd { margin: 0; overflow-wrap: anywhere; }
.legajo h3 { margin: 18px 0 8px; font-size: 1rem; border-top: 1px solid var(--borde); padding-top: 14px; }
.accesos-legajo { display: grid; gap: 8px; }
.documentos-legajo { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.documentos-legajo li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pie-legajo { margin-top: 18px; border-top: 1px solid var(--borde); padding-top: 14px; display: flex; justify-content: flex-end; }
label.boton { display: inline-flex; align-items: center; cursor: pointer; }
.dialogo-camara video { width: 100%; max-height: 60vh; border-radius: var(--radio); background: #000; transform: scaleX(-1); }
@media (max-width: 720px) {
  .legajo-cabecera { grid-template-columns: 1fr; }
  .datos-legajo { grid-template-columns: 1fr; }
  .datos-legajo dt { margin-top: 6px; }
}
/* Secciones de un formulario largo (legajo de empleado). */
.dialogo form > fieldset:not([class]) { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px 14px; margin: 0 0 12px; }
.dialogo form > fieldset:not([class]) > legend { font-weight: 700; padding: 0 6px; }

/* ---------- Vista tarjetas / lista ---------- */
.selector-vista { display: inline-flex; gap: 0; }
.selector-vista .boton-icono { display: inline-grid; place-items: center; padding: 6px 9px; border-radius: 0; }
.selector-vista .boton-icono:first-child { border-radius: var(--radio) 0 0 var(--radio); }
.selector-vista .boton-icono:last-child { border-radius: 0 var(--radio) var(--radio) 0; margin-left: -1px; }
.selector-vista .boton-icono .icono { width: 18px; height: 18px; }
.selector-vista .boton-icono.activo, .selector-vista .boton-icono.activo:hover:not(:disabled) { background: var(--fg); color: var(--sobre-fg); border-color: var(--fg); }
.tabla tr.fila-clic { cursor: pointer; }
.tabla tr.fila-clic:hover td { background: var(--hover); }
.tabla .foto-empleado { width: 32px; height: 32px; }


/* Nuevo Pedido, panel Cliente: campos plegables (Sin Registrar, notas) y el + rojo de Cliente Nuevo, para ahorrar lugar vertical. */
.campo-plegable { display: grid; gap: 2px; }
.selector-entrega { margin-bottom: 10px; }
.rotulo-plegable { display: flex; align-items: center; gap: 4px; font: inherit; font-weight: 500; color: var(--fg); min-height: 40px; }
button.rotulo-plegable { background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; text-align: left; touch-action: manipulation; }
/* El + mide 40×40 para el dedo en el celular; el rótulo entero de los plegables también se puede tocar. */
.rotulo-plegable .mas { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px;
  color: var(--primario); font-weight: 800; font-size: 1.6em; line-height: 1; font-family: inherit; }
.rotulo-plegable button.mas { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
.rotulo-plegable button.mas:hover, button.rotulo-plegable:hover .mas { color: var(--primario-hover); background: var(--hover); }
.rotulo-plegable .boton-agendar { margin-left: 8px; }
.contenido-plegable { display: grid; gap: 6px; }
.contenido-plegable small.nota { font-size: 0.78rem; }
/* Pantallas medianas y grandes (PC, terminales 1024, tablets de 10"): todo desplegado, sin el + de plegar (queda más prolijo).
   Solo en pantallas chicas (celulares y tablets de 7") los campos se pliegan con el +. */
@media (min-width: 821px) {
  button.rotulo-plegable { pointer-events: none; cursor: default; min-height: 0; padding-top: 4px; }
  button.rotulo-plegable .mas { display: none; }
  .campo-plegable .rotulo-plegable { min-height: 0; }
  .campo-plegable .rotulo-plegable button.mas { width: 32px; height: 28px; }
}
@media (max-width: 820px) { .contenido-plegable.cerrado { display: none; } }

/* ---------- Fichada ---------- */
.lector-qr video { transform: none; }
.visor-qr { position: relative; }
.marco-qr { position: absolute; inset: 18% 22%; border: 3px solid var(--qr-marco); border-radius: 14px; box-shadow: 0 0 0 9999px var(--qr-sombra); pointer-events: none; }
.qr-fichada { display: grid; justify-items: center; gap: 10px; text-align: center; }
.qr-fichada .qr { width: min(360px, 80vw); aspect-ratio: 1; background: var(--qr-fondo); padding: 10px; border-radius: var(--radio); }
.qr-fichada .qr svg { width: 100%; height: 100%; display: block; }
.qr-fichada .cuenta { font-variant-numeric: tabular-nums; }
body.qr-completo .topbar, body.qr-completo .pie-app, body.qr-completo .solapas-fichada, body.qr-completo .fuera-qr { display: none !important; }
body.qr-completo .qr-fichada .qr { width: min(80vh, 90vw); }
.lista-fichar { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.lista-fichar .empleado-fichar { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--card); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.lista-fichar .empleado-fichar:hover { background: var(--hover); }
.lista-fichar .empleado-fichar.presente { border-color: var(--ok); }
.lista-fichar .foto-empleado { width: 40px; height: 40px; flex: none; }
.fichada-resultado { text-align: center; display: grid; gap: 6px; padding: 12px 0; }
.fichada-resultado .grande { font-size: 1.6rem; font-weight: 800; }
.fila-anulada td { text-decoration: line-through; color: var(--muted); }

/* ---------- Mis Envíos (motoquero) ---------- */
.lista-envios { display: grid; gap: 10px; }
.envio { border: 1px solid var(--borde); border-left: 5px solid var(--estado, var(--borde)); border-radius: var(--radio); padding: 10px 12px; display: grid; gap: 6px; background: var(--card); }
.envio-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.envio-numero { font-size: 1.15rem; }
.envio-direccion { font-size: 1.2rem; font-weight: 700; margin: 0; }
.envio-notas { margin: 0; padding: 6px 10px; }
.envio-cobro { margin: 0; }
.envio-acciones { flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.envio-acciones .boton.grande { margin-left: auto; min-width: 130px; }
.envio-acciones .icono { width: 18px; height: 18px; vertical-align: -3px; }
.resumen-envios p { margin: 0; }
.tarjeta-angosta { max-width: 460px; margin-inline: auto; display: grid; gap: 10px; }
.formulario { display: grid; gap: 10px; }
.fila-motoquero { display: flex; gap: 6px; align-items: center; }
.fila-motoquero select { flex: 1; min-width: 0; }
.fila-motoquero .boton { white-space: nowrap; }

/* ---------- Liquidaciones y recibo (Etapa 11c) ---------- */
.grilla-liquidacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grilla-liquidacion h3 { margin: 12px 0 8px; font-size: 1rem; }
.grilla-liquidacion label.check { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.grilla-liquidacion label.check input { flex: none; margin-top: 3px; }
.conceptos-liquidacion td:first-child { width: 70%; }
.conceptos-liquidacion .mov-sale { color: var(--error); }
.fila-ajuste { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.fila-ajuste [data-concepto] { flex: 1 1 auto; min-width: 0; }
.fila-ajuste [data-monto] { flex: 0 0 140px; }
.dialogo .pie-legajo.acciones { gap: 8px; flex-wrap: wrap; }
@media (max-width: 820px) {
  .grilla-liquidacion { grid-template-columns: 1fr; }
  .grilla-liquidacion.previa > :last-child { order: -1; }   /* en el celular, primero el total */
}

.hoja-recibo { display: grid; gap: 0; max-width: 820px; background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 24px; }
.recibo { display: grid; gap: 10px; font-size: 0.9rem; }
.recibo-cabecera { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--fg); padding-bottom: 8px; }
.recibo-local { font-size: 1.2rem; letter-spacing: 0.04em; }
.recibo-titulo { text-align: right; }
.recibo-datos { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 3px 12px; margin: 0; }
.recibo-datos dt { color: var(--muted); }
.recibo-datos dd { margin: 0; }
.recibo .tabla td { padding-top: 4px; padding-bottom: 4px; }
.recibo-letras { margin: 0; font-style: italic; }
.recibo-pago, .recibo-notas { margin: 0; }
.recibo-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; text-align: center; color: var(--muted); font-size: 0.85rem; }
.linea-firma { display: block; border-top: 1px solid var(--fg); margin-bottom: 4px; }
.recibo-aviso { margin: 0; font-size: 0.75rem; color: var(--muted); text-align: center; }
.corte-recibo { border-top: 1px dashed var(--muted); margin: 18px 0; }
.hoja-recibo.anulado .recibo { position: relative; }
.hoja-recibo.anulado .recibo::after { content: "ANULADA"; position: absolute; inset: 35% 0 auto; text-align: center; font-size: 3.5rem; font-weight: 800;
  color: var(--error); opacity: 0.18; transform: rotate(-12deg); pointer-events: none; }
@media (max-width: 720px) {
  .hoja-recibo { padding: 14px; }
  .recibo-datos { grid-template-columns: max-content 1fr; }
  .recibo-cabecera { flex-direction: column; }
  .recibo-titulo { text-align: left; }
}
@media print {
  /* Original y duplicado en una hoja A4, cada uno en su mitad. */
  .hoja-recibo { max-width: none; border: 0; padding: 0; background: var(--card); }
  .recibo { font-size: 8.5pt; gap: 4px; min-height: 128mm; align-content: start; break-inside: avoid; }
  .recibo .tabla { font-size: 8.5pt; }
  .recibo .tabla td { padding: 1.2mm 2mm; }
  .recibo .conceptos-liquidacion br { display: none; }
  .recibo .conceptos-liquidacion .nota { margin-left: 6px; }
  .recibo .nota, .recibo-firmas { font-size: 8pt; }
  .recibo-cabecera { padding-bottom: 4px; }
  .recibo-local { font-size: 12pt; }
  .corte-recibo { margin: 5mm 0; }
  .recibo-datos { grid-template-columns: max-content 1fr max-content 1fr; }
  .recibo-cabecera { flex-direction: row; }
  .recibo-titulo { text-align: right; }
  .recibo-firmas { margin-top: 10mm; }
}

/* ---------- Avisos (Etapa 10d) ---------- */
.grilla-canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.grilla-canales .tarjeta { display: grid; gap: 10px; margin: 0; }
.grilla-canales h2 { margin: 0; }
.fila-campos { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.fila-campos > * { flex: 1 1 auto; min-width: 0; }
.fila-campos > .boton { flex: none; }
.grupo-avisos { border-top: 1px solid var(--borde); padding: 8px 0; }
.grupo-avisos summary { cursor: pointer; padding: 6px 0; display: flex; gap: 8px; align-items: center; }
.lista-avisos { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 2px; }
.lista-avisos li { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 8px 10px; border-radius: var(--radio); }
.lista-avisos li:hover { background: var(--hover); }
.lista-avisos li > span:first-child { min-width: 0; }
.destinos-aviso { color: var(--ok); font-weight: 600; text-align: right; }
.matriz-avisos .centro { text-align: center; }
.texto-aviso { white-space: pre-wrap; font: inherit; background: var(--tinte-gris-suave); border-radius: var(--radio); padding: 10px 14px; margin: 0; }
@media (max-width: 720px) {
  .lista-avisos li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .destinos-aviso { text-align: left; }
}


/* ---------- Solapas de pedidos en curso (Nuevo Pedido) ---------- */
.barra-solapas { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 8px; border-bottom: 2px solid var(--primario); min-width: 0; }
.barra-solapas .titulo-edicion { flex: 1; margin: 0 0 6px; }
.solapas-pedido { flex: 1; min-width: 0; display: flex; gap: 4px; align-items: stretch; overflow-x: auto; padding: 0 2px; }
.solapa-pedido { display: flex; align-items: stretch; border: 1px solid var(--borde); border-bottom: 0; border-radius: var(--radio) var(--radio) 0 0; background: var(--bg); flex: 0 1 auto; min-width: 0; }
.solapa-pedido.activa { background: var(--primario); border-color: var(--primario); }
.solapa-pedido button { font: inherit; background: none; border: 0; color: var(--fg); cursor: pointer; }
.solapa-pedido.activa button { color: var(--sobre-estado); }
.solapa-pedido [data-solapa] { display: flex; align-items: center; gap: 6px; padding: 7px 4px 7px 12px; font-weight: 600; min-width: 0; max-width: 220px; }
.solapa-pedido .nombre-solapa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solapa-pedido .icono { width: 14px; height: 14px; flex: none; }
.cuenta-solapa { font-size: 0.75rem; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--tinte-gris); color: var(--fg); text-align: center; }
.solapa-pedido.activa .cuenta-solapa { background: var(--sobre-fg); color: var(--primario); }
.cerrar-solapa { padding: 0 10px; font-size: 1.1rem; line-height: 1; opacity: 0.7; }
.cerrar-solapa:hover { opacity: 1; }
.solapa-nueva { flex: none; font: inherit; font-size: 1.2rem; font-weight: 700; line-height: 1; padding: 6px 14px; border: 1px dashed var(--borde); border-bottom: 0;
  border-radius: var(--radio) var(--radio) 0 0; background: var(--campo); color: var(--primario); cursor: pointer; }
.solapa-nueva:hover { background: var(--hover); }

/* ---------- Tienda online (Configuración → Tienda) ---------- */
.estado-tienda.ok { border-top: 4px solid var(--ok); }
.estado-tienda.no { border-top: 4px solid var(--error); }
.clave-conector { word-break: break-all; user-select: all; }
#tienda-ajustes .grilla-config { align-items: start; }


/* Tienda online: aviso "Pedido Web Entrante" (mismo formato que el de llamadas, en azul web). */
.aviso-pedido-web { border-color: var(--web); animation-name: pulso-web; max-height: calc(100vh - 24px); overflow-y: auto; }
.aviso-pedido-web .dialogo-cabecera { position: sticky; top: -16px; background: var(--card); z-index: 1; padding-top: 4px; }
.tabla-items { width: 100%; border-collapse: collapse; margin: 8px 0; }
.tabla-items td { padding: 6px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-items tbody tr:nth-child(even) td { background: var(--tinte-gris-suave); }
.tabla-items tr.total td { font-weight: 700; border-top: 2px solid var(--borde); border-bottom: 0; background: none; }
.tabla-items .num-cant { width: 1%; font-weight: 700; white-space: nowrap; }
.tabla-items .num { text-align: right; white-space: nowrap; }
.chip-tienda svg { width: 12px; height: 12px; }
.chips-motivo { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.motivo-rechazo input { width: 100%; }
.motivo-rechazo p { margin: 0; }
.chip-pedido-web { position: fixed; right: 16px; bottom: 16px; z-index: 50; box-shadow: 0 4px 14px rgb(0 0 0 / 0.3); animation: pulso-web 1s ease-in-out infinite alternate; }
@keyframes pulso-web { from { box-shadow: 0 0 0 0 rgb(31 95 168 / 0.6); } to { box-shadow: 0 0 0 14px rgb(31 95 168 / 0); } }
@media (prefers-reduced-motion: reduce) { .aviso-pedido-web, .chip-pedido-web { animation: none; } }

/* Tablas con filas alternadas (se lee mejor de lejos). */
.tabla.alternada tbody tr:nth-child(even) td { background: var(--tinte-gris-suave); }
.tabla.alternada tbody tr.total td { background: none; }

/* Estado de la tienda online en el panel de pedidos. */
.chip-tienda.sin-conexion { color: var(--muted); }
.boton.peligro:not(.secundario) { background: var(--error); border-color: var(--error); color: var(--sobre-estado); }
.chip.web { background: var(--web-fondo); color: var(--web); border: 1px solid var(--web-borde); }

/* Campanita: avisos silenciados en este equipo */
.boton-campana.silenciado { color: var(--error); background: var(--tinte-rojo); }

/* Configuración: horario de atención */
.editor-horario { display: grid; gap: 8px; }
.editor-horario .etiqueta-campo { font-weight: 600; }
.tabla-horario input[type=time] { width: 100%; min-width: 96px; }
.acciones-horario { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }

/* ---------- Facturación ---------- */
.pasos-ayuda { margin: 8px 0 12px; padding-left: 22px; display: grid; gap: 8px; }
.pasos-ayuda small { display: block; color: var(--muted); }
.opciones-modo { display: grid; gap: 6px; margin-bottom: 8px; }
.opciones-modo small { display: block; margin-left: 26px; }
#fac-certificado pre.texto-aviso { font-family: ui-monospace, monospace; font-size: 0.75rem; max-height: 180px; overflow: auto; }
.etiqueta.azul { background: var(--tinte-azul); color: var(--web); }

/* Secciones plegables de Configuración: tocando el título se abren o se cierran. */
.tarjeta.colapsable h2 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.tarjeta.colapsable h2::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s; flex: none; margin: 0 4px 3px 2px; }
.tarjeta.colapsable.colapsada h2::before { transform: rotate(-45deg); margin-bottom: 0; }
.tarjeta.colapsable h2:focus-visible { outline: 2px solid var(--primario); outline-offset: 3px; border-radius: 4px; }
.tarjeta.colapsada > :not(h2):not(.titulo-con-acciones) { display: none !important; }
.tarjeta.colapsada > .titulo-con-acciones > :not(h2):not(div:has(> h2)) { display: none !important; }
.tarjeta.colapsada > .titulo-con-acciones > div:has(> h2) > :not(h2) { display: none !important; }
.tarjeta.colapsada { padding-bottom: 12px; }
.tarjeta.colapsada h2 { margin-bottom: 0; }

/* ---------- Apariencia ---------- */
.logo-actual { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.logo-actual img { width: 120px; height: 120px; object-fit: contain; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--campo); padding: 6px; }
.logo-actual label.boton { display: inline-flex; cursor: pointer; }
.muestras-color { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.muestra-color { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--card); background: var(--muestra); box-shadow: 0 0 0 1px var(--borde); cursor: pointer; }
.muestra-color.elegida { box-shadow: 0 0 0 3px var(--fg); }
.vista-color { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.formulario input[type=color], input[type=color] { width: 56px !important; height: 36px; padding: 2px; flex: none; }
/* Código del color escrito a mano (hex o rgb), al lado del selector. */
.formulario .texto-color, .texto-color { width: 15em; max-width: 100%; flex: 0 1 15em; font-family: ui-monospace, Consolas, monospace; }
.texto-color.invalido { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.marca img { object-fit: contain; }
.filtros-facturas { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filtros-facturas label { display: grid; gap: 4px; }
.tarjetas-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 6px; }
.dato-resumen { display: grid; gap: 4px; padding: 12px 16px; }
.dato-resumen strong { font-size: 1.35rem; }
.acciones-factura { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acciones-canales { margin-bottom: 24px; }
#form-canales { margin-bottom: 24px; }

/* Consultar CUIT (padrón de ARCA) */
.consulta-cuit [data-consulta] { margin-bottom: 12px; }
.resumen-cuit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 8px; background: rgb(127 127 127 / 0.1); margin-bottom: 10px; }
.resumen-cuit strong { font-size: 1.1rem; }
.resumen-cuit small { flex-basis: 100%; color: var(--muted); }
.seccion-padron { margin: 8px 0; }
.seccion-padron summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.tabla-padron { width: 100%; }
.tabla-padron th { text-align: left; font-weight: 500; width: 40%; color: var(--muted); vertical-align: top; }
.tabla-padron td { overflow-wrap: anywhere; }

/* Apariencia → Letra */
.nota-con-boton { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.control-escala { display: flex; align-items: center; gap: 8px; }
.control-escala input[type=range] { flex: 1; min-width: 80px; accent-color: var(--primario); }
.control-escala output { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
.vista-letra { border: 1px dashed var(--borde); border-radius: var(--radio); padding: 12px 14px; margin: 12px 0; line-height: 1.45; }
.vista-letra p { margin: 6px 0 10px; }
.selector-ambiente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.selector-ambiente select { width: auto; }

/* Asistente de primera ejecución */
.pasos-asistente { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; counter-reset: paso; }
.pasos-asistente li { counter-increment: paso; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--card); color: var(--muted); font-size: 0.85rem; }
.pasos-asistente li::before { content: counter(paso) ". "; }
.pasos-asistente li.hecho { color: var(--fg); }
.pasos-asistente li.actual { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); font-weight: 600; }
.asistente h2 { margin-top: 0; }
.explicaciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.explicaciones > div { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; }
.explicaciones h3 { margin: 0 0 4px; font-size: 1rem; }
.explicaciones p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.opcion-grande { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; margin: 8px 0; cursor: pointer; }
.opcion-grande:has(input:checked) { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
.opcion-grande small { display: block; color: var(--muted); margin-top: 4px; }
.pasos-ayuda .boton { margin-right: 6px; }
.vista-nombre { margin-top: 8px; padding: 8px 12px; border: 1px dashed var(--borde); border-radius: var(--radio); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.vista-nombre[data-vista=colorNombreTienda] { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.2rem; }

/* Facturas → Nueva Factura */
.buscador-cliente { position: relative; margin-bottom: 8px; }
.resultados-busqueda { display: grid; gap: 4px; margin-top: 4px; }
.resultados-busqueda .resultado { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 8px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--campo); color: var(--fg); font: inherit; cursor: pointer; }
.resultados-busqueda .resultado:hover { border-color: var(--primario); }
.resultados-busqueda .resultado small { color: var(--muted); }
.tabla-renglones input, .tabla-renglones select { width: 100%; box-sizing: border-box; }
.tabla-renglones input.corto { max-width: 130px; }
.tabla-renglones tfoot th { font-size: 1.1rem; }
.barra-guardar #clase-factura { margin-right: auto; font-weight: 600; }
.grilla-config .ancho-doble { grid-column: span 2; }
@media (max-width: 720px) { .grilla-config .ancho-doble { grid-column: auto; } }

/* ---------- Monitor de cocina (#/monitor): pantalla completa, letra grande, sin precios ---------- */
body.modo-monitor .topbar, body.modo-monitor .pie-app, body.modo-monitor .aviso-version { display: none !important; }
body.modo-monitor .contenedor { max-width: none; padding: 0; margin: 0; }
body.modo-monitor { overflow: hidden; }
.monitor { --escala: 1; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); font-size: calc(1rem * var(--escala)); cursor: default; }
.monitor-cabecera { display: flex; align-items: center; gap: 1.1em; padding: 0.6em 1.25em; background: var(--card); border-bottom: 3px solid var(--primario); flex: none; }
.monitor-cabecera h1 { margin: 0; font-size: 1.9em; letter-spacing: -0.01em; }
.monitor-cuentas { display: flex; gap: 10px; flex-wrap: wrap; }
.monitor-cuenta { font-size: 1.25em; font-weight: 600; padding: 4px 14px; border-radius: 999px; background: var(--tinte-gris); }
.monitor-cuenta b { font-size: 1.15em; }
.monitor-cuenta.horno { background: var(--estado-bg, #f1e4da); color: #6b3e22; }
:root[data-tema="oscuro"] .monitor-cuenta.horno { background: #3a2a20; color: #c99670; }
.monitor-cuenta.demora { background: var(--tinte-amarillo); color: var(--alerta-texto); }
.monitor-reloj { margin-left: auto; font-size: 2.4em; font-weight: 800; font-variant-numeric: tabular-nums; }
.monitor-grilla { flex: 1; overflow-y: auto; padding: calc(16px * var(--escala)); display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(330px * var(--escala)), 1fr));
  gap: calc(16px * var(--escala)); align-content: start; }
.monitor-vacio { grid-column: 1 / -1; text-align: center; font-size: 2.4em; color: var(--muted); margin-top: 18vh; font-weight: 600; }
.monitor-pedido { background: var(--card); border: 2px solid var(--borde); border-top: calc(10px * var(--escala)) solid var(--muted); border-radius: calc(12px * var(--escala));
  padding: 0.75em 1em 0.85em; display: flex; flex-direction: column; gap: 0.35em; box-shadow: 0 2px 6px rgb(0 0 0 / 0.08); cursor: pointer; }
.monitor-pedido.en-horno { border-top-color: #8a5230; background: color-mix(in srgb, #8a5230 7%, var(--card)); }
.monitor-pedido.demora-PorVencer { border-color: var(--alerta); border-top-color: var(--alerta); }
.monitor-pedido.demora-Demorado { border-color: var(--error); border-top-color: var(--error); }
/* Nuevo = verde, Modificado = violeta: el borde queda con su color todo el rato y parpadea los primeros segundos. */
.monitor-pedido.nuevo { --aviso: var(--ok); }
.monitor-pedido.modificado { --aviso: #7c5cd6; }
:root[data-tema="oscuro"] .monitor-pedido.modificado { --aviso: #a48bf0; }
.monitor-pedido.nuevo, .monitor-pedido.modificado { border-color: var(--aviso); border-top-color: var(--aviso); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aviso) 35%, transparent); }
.monitor-pedido.parpadea { animation: monitor-parpadeo 1s ease-in-out 9; }
@keyframes monitor-parpadeo { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--aviso) 65%, transparent); background: color-mix(in srgb, var(--aviso) 14%, var(--card)); } }
.monitor-pedido header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.monitor-pedido .numero { font-size: 2.3em; font-weight: 800; line-height: 1; }
.monitor-pedido .entrega { font-size: 1em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 6px; }
.monitor-pedido .entrega.delivery { background: var(--tinte-azul); color: var(--web); }
.monitor-pedido .entrega.retira { background: var(--tinte-verde); color: var(--ok); }
.monitor-pedido .etiqueta-web { font-size: 0.85em; }
.monitor-pedido .tiempo { margin-left: auto; font-size: 1.15em; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.monitor-pedido.demora-Demorado .tiempo { color: var(--error); }
.monitor-pedido .marcas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.monitor-pedido .marcas:empty { display: none; }
.marca-estado { font-size: 0.95em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 9px; border-radius: 5px; color: #fff; }
.marca-estado.horno { background: #8a5230; }
.marca-estado.nuevo { background: var(--ok); }
.marca-estado.modificado { background: #7c5cd6; }
.marca-estado.demorado { background: var(--error); }
.marca-estado.por-vencer { background: var(--alerta); }
.monitor-pedido .sale { font-size: 1.05em; font-weight: 600; color: var(--muted); }
.monitor-pedido .cliente { margin: 2px 0 0; font-size: 1.35em; font-weight: 700; }
.monitor-pedido .direccion { margin: 0; font-size: 1.15em; color: var(--muted); }
.monitor-pedido .items { list-style: none; margin: 6px 0 0; padding: 8px 0 0; border-top: 2px dashed var(--borde); display: grid; gap: 6px; }
.monitor-pedido .items li { display: flex; gap: 12px; align-items: baseline; font-size: 1.6em; font-weight: 700; line-height: 1.2; }
.monitor-pedido .items .cantidad { min-width: 1.6em; text-align: right; font-weight: 900; color: var(--primario); }
.monitor-pedido .items .descripcion { flex: 1; }
.monitor-pedido .nota-item { display: block; font-size: 0.72em; font-weight: 600; font-style: italic; color: var(--alerta-texto); background: var(--nota); padding: 1px 6px; border-radius: 4px; margin-top: 2px; }
.monitor-pedido .resumen { margin: 4px 0 0; font-size: 1.2em; font-weight: 800; }
.monitor-pedido .nota-pedido { margin: 6px 0 0; font-size: 1.3em; font-weight: 700; background: var(--nota); color: var(--alerta-texto); border: 2px solid var(--alerta-borde); border-radius: 8px; padding: 6px 10px; }
.monitor-mas { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--fg); color: var(--sobre-fg); font-size: 1.3em; font-weight: 700; padding: 8px 18px; border-radius: 999px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.3); pointer-events: none; }
.monitor-barra { position: fixed; right: 14px; bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: calc(100vw - 28px);
  background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--borde); border-radius: 12px; padding: 8px; box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
  opacity: 0; pointer-events: none; transition: opacity .25s; font-size: 0.8rem; }
.monitor-barra .boton { font-size: 0.8rem; padding: 6px 10px; }
.monitor-barra.visible { opacity: 1; pointer-events: auto; }
.monitor-cabecera .marca-chica img { width: max(22px, calc(40px * var(--escala))); height: max(22px, calc(40px * var(--escala))); }
.monitor-escala { min-width: 3.4em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.monitor-estado-pantalla { font-size: 0.85rem; font-weight: 600; padding: 0 6px; }
.monitor-estado-pantalla.ok { color: var(--ok); }
.monitor-estado-pantalla.alerta { color: var(--alerta); }
.monitor-dialogo { width: min(560px, calc(100vw - 32px)); padding: 24px; text-align: center; }
.monitor-dialogo h2 { font-size: 2rem; margin: 0 0 6px; }
.monitor-dialogo p { font-size: 1.15rem; color: var(--muted); }
.monitor-opciones { display: grid; gap: 12px; margin-top: 18px; }
.monitor-opciones .boton { font-size: 1.5rem; padding: 18px; }
@media (max-width: 700px) { .monitor-cabecera { flex-wrap: wrap; gap: 8px; } .monitor-reloj { font-size: 1.6em; } }
.monitor.sin-cursor, .monitor.sin-cursor * { cursor: none !important; }
/* Abierto desde el link: el primer toque o tecla del control pasa a pantalla completa (sin tocar ningún pedido). */
.monitor-gesto { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: transparent; border: 0; margin: 0; font: inherit; color: inherit; cursor: pointer !important; }
.monitor-gesto:focus { outline: none; }
.monitor-gesto span { max-width: 36em; text-align: center; font-size: 1.6rem; font-weight: 700; line-height: 1.3; padding: 18px 28px; border-radius: 16px;
  background: var(--fg); color: var(--sobre-fg); box-shadow: 0 8px 32px rgb(0 0 0 / 0.35); animation: monitor-gesto 2s ease-in-out infinite; }
@keyframes monitor-gesto { 50% { opacity: 0.8; } }
/* Monitor: QR de fichada, chico, pegado abajo a la derecha. 80 px al 100 %; sigue a A− y A+ (--escala-qr), sin bajar
   del mínimo legible (--lado-qr-min, lo calcula monitor.js según el QR y la pantalla). */
.monitor { --escala-qr: 1; --lado-qr: max(var(--lado-qr-min, 56px), calc(80px * var(--escala-qr))); }
.monitor-qr { position: fixed; right: 10px; bottom: 10px; z-index: 5; margin: 0; padding: 4px 4px 2px; border-radius: 8px;
  background: var(--qr-fondo, #fff); color: #000; box-shadow: 0 4px 16px rgb(0 0 0 / 0.25); text-align: center; }
.monitor-qr .qr svg { display: block; width: var(--lado-qr); height: var(--lado-qr); }
.monitor-qr figcaption { font-size: max(0.7rem, calc(0.8rem * var(--escala-qr))); letter-spacing: 0.1em; line-height: 1.3; }
/* Que el QR no tape el último pedido, y la barra de opciones se corre a su izquierda. */
.monitor:has(.monitor-qr:not([hidden])) .monitor-grilla { padding-bottom: calc(var(--lado-qr) + 40px); }
.monitor:has(.monitor-qr:not([hidden])) .monitor-barra { right: calc(var(--lado-qr) + 28px); max-width: calc(100vw - var(--lado-qr) - 56px); }
/* Monitor: qué cambió en un pedido modificado */
.monitor-pedido .items .cantidad .antes { color: var(--muted); font-weight: 700; text-decoration-thickness: 3px; text-decoration-color: var(--error); margin-right: 2px; }
.monitor-pedido .items li.cambiado .descripcion, .monitor-pedido .items li.agregado .descripcion { color: var(--aviso, #7c5cd6); }
.monitor-pedido .items li.quitado { color: var(--muted); }
.monitor-pedido .items li.quitado .cantidad, .monitor-pedido .items li.quitado .descripcion { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--error); color: var(--muted); }
.monitor-pedido .items .marca-cambio { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 0.5em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 5px; color: #fff; background: var(--aviso, #7c5cd6); text-decoration: none; }
.monitor-pedido .items li.quitado .marca-cambio { background: var(--error); }
textarea.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; }
.grilla-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 12px; align-items: start; }
.grilla-form > label { align-content: start; }
.lista-compacta { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 2px; }

/* ---------- Nuevo Pedido: botón de modo, modo Comanda, ventana de productos, promos y resumen por categoría ---------- */
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toma-pedido kbd { font: 600 0.62rem ui-monospace, SFMono-Regular, Consolas, monospace; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; opacity: 0.55; margin-left: 6px; line-height: 1.4; }
@media (hover: none) { .toma-pedido kbd { display: none; } }   /* tablets y celulares sin teclado: sin las teclas */
.boton-modo { flex: none; align-self: center; margin: 0 0 4px auto; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 700;
  border: 1px solid var(--primario); border-radius: 8px; background: var(--card); color: var(--primario); padding: 5px 12px; cursor: pointer; }
.boton-modo:hover { background: var(--tinte-rojo); }
.boton-modo .alternar { opacity: 0.7; }

/* Resumen por categoría (también en Grilla) y promos */
.cabecera-pedido { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.resumen-pedido { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-resumen { border: 1px solid var(--borde); border-radius: 999px; padding: 1px 10px; background: var(--bg); font-size: 0.9em; white-space: nowrap; }
.chip-resumen.resalta { background: var(--nota); border-color: #e3b23c; font-weight: 700; }
.chip-promo { display: inline-block; font-size: 0.75em; font-weight: 700; border-radius: 999px; padding: 0 7px; background: var(--nota); color: var(--fg); border: 1px solid #e3b23c; vertical-align: 1px; }
.lista-carrito li.de-promo .desc { font-style: normal; }
.panel-promos { display: grid; gap: 6px; }
.panel-promos[hidden] { display: none; }
.titulo-promos { justify-self: start; font: inherit; font-weight: 700; color: #9a6a00; background: none; border: 0; padding: 2px 0; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.lista-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lista-promos[hidden] { display: none; }
.boton-promo { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 8px; text-align: left; font: inherit;
  border: 2px solid #e3b23c; background: var(--nota); color: var(--fg); border-radius: 10px; padding: 6px 10px; cursor: pointer; touch-action: manipulation; min-width: 0; }
.boton-promo:hover, .boton-promo:focus-visible { border-color: #b8860b; }
.boton-promo:active { transform: scale(0.98); }
.boton-promo .nombre { font-weight: 700; white-space: nowrap; }
.boton-promo .texto { font-size: 0.85em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.boton-promo .precio { font-weight: 800; color: var(--primario); white-space: nowrap; }
.boton-promo kbd { position: absolute; top: -8px; right: 6px; background: var(--card); opacity: 0.8; }
.panel-productos .panel-promos { border-bottom: 1px solid var(--borde); padding-bottom: 8px; }

/* Modo Comanda: cliente arriba, categorías y promos al medio, pedido y cobro abajo ocupando el resto del alto. */
.toma-pedido.modo-comanda { grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(300px, 1fr); gap: 8px; height: var(--alto-comanda, calc(100dvh - 78px)); min-height: 560px; }
.modo-comanda > .tarjeta { padding: 10px 14px; }
.modo-comanda .panel-cliente { position: relative; display: block; padding-right: 60px; }
.modo-comanda .tacho-cliente { position: absolute; top: 10px; right: 10px; }
.modo-comanda #cliente { display: grid; grid-template-columns: minmax(330px, 1.15fr) minmax(260px, 1fr) minmax(260px, 1fr); gap: 8px 22px; align-items: start; }
.modo-comanda .col-cliente-1 { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 10px; align-items: start; }
.modo-comanda .col-cliente-1 .selector-entrega .boton { min-height: 40px; padding: 4px 6px; font-size: 0.75rem; }
.modo-comanda .buscar-y-notas { display: grid; gap: 6px; min-width: 0; }
.modo-comanda .col-cliente-1 .resultados { position: relative; }
.modo-comanda .col-cliente-1 .resultados:not(:empty) { position: absolute; z-index: 5; width: min(420px, 40vw); background: var(--card); border: 1px solid var(--borde); border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.15); }
.modo-comanda .buscar-y-notas .campo-plegable { position: relative; }
.modo-comanda .col-cliente-2, .modo-comanda .col-cliente-3 { display: grid; gap: 4px; min-width: 0; }
.modo-comanda .col-cliente-3 > label { font-weight: 700; }
.modo-comanda .cliente-elegido { gap: 3px; }
.modo-comanda .cliente-elegido .titulo-con-acciones { gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.modo-comanda .cliente-elegido .titulo-con-acciones .acciones { margin-left: auto; }
.modo-comanda .cliente-elegido .observaciones { padding: 3px 8px; font-size: 0.85rem; }
.modo-comanda fieldset.direcciones { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 2px 8px 6px; }
.modo-comanda fieldset.direcciones label.check { margin: 0; align-items: center; }
.modo-comanda fieldset.direcciones label.check input { margin-top: 0; }
.modo-comanda fieldset.direcciones #dir-otra { flex-basis: 100%; }
.modo-comanda .ultimos { font-size: 0.9em; }
.modo-comanda fieldset.direcciones strong { font-size: inherit; }
.modo-comanda .cliente-elegido > .titulo-con-acciones > strong { font-size: 1.05rem; }
.modo-comanda .ultimos[open] { max-height: 140px; overflow: auto; }

.panel-categorias { display: grid; gap: 8px; min-width: 0; }
.panel-categorias .titulo-con-acciones { margin: 0; }
.panel-categorias .titulo-con-acciones .icono { width: 14px; height: 14px; vertical-align: -2px; }
.tarjetas-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
@media (min-width: 1200px) { .tarjetas-categorias { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.tarjeta-categoria { position: relative; display: grid; gap: 2px; text-align: left; font: inherit; color: var(--fg); background: var(--campo);
  border: 2px solid var(--producto-borde); border-radius: 10px; padding: 9px 10px; cursor: pointer; touch-action: manipulation; }
.tarjeta-categoria:hover, .tarjeta-categoria:focus-visible { border-color: var(--primario); }
.tarjeta-categoria:active { transform: scale(0.98); }
.tarjeta-categoria .nombre { font-size: 1.05rem; font-weight: 700; padding-right: 26px; }
.tarjeta-categoria .cantidad { font-size: 0.8em; color: var(--muted); }
.tarjeta-categoria kbd { position: absolute; top: 7px; right: 6px; margin: 0; }

.modo-comanda .panel-carrito.checkout { position: static; max-height: none; min-height: 0; height: 100%; box-sizing: border-box; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 18px; align-items: stretch; }
.checkout-pedido { min-height: 0; overflow: auto; }
.checkout-cobro { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--borde); padding-left: 18px; min-height: 0; overflow: auto; }
.checkout-cobro #guardar { margin-top: auto; }
.checkout-cobro h3 { margin: 4px 0 2px; }
.checkout-cobro .total-grande { font-size: 1.45rem; margin: 2px 0 4px; }
.modo-comanda .cabecera-tabla, .modo-comanda .lista-carrito li {
  display: grid; grid-template-columns: 96px minmax(160px, 1.3fr) minmax(140px, 1fr) 110px 34px; align-items: center; gap: 8px; }
.modo-comanda .cabecera-tabla { font-size: 0.72em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 6px 0 4px; border-bottom: 2px solid var(--borde); margin-top: 6px; }
.modo-comanda .cabecera-tabla span:nth-child(4) { text-align: right; }
.modo-comanda .lista-carrito li { padding: 3px 0; }
.modo-comanda .lista-carrito .linea, .modo-comanda .lista-carrito .linea-2 { display: contents; }
.modo-comanda .lista-carrito .cant { order: 1; }
.modo-comanda .lista-carrito .desc { order: 2; font-weight: 600; }
.modo-comanda .lista-carrito .linea-2 input { order: 3; min-height: 28px; }
.modo-comanda .lista-carrito .num { order: 4; text-align: right; }
.modo-comanda .lista-carrito .linea-2 .boton { order: 5; }

/* Ventana de productos (modo Comanda) */
/* Alto fijo (no cambia con la categoría, así los botones no se mueven): 60 % de la pantalla, mínimo 460 px; lo que no entra se baja en la grilla. */
.dialogo.ventana-productos { width: min(1180px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); height: min(calc(100dvh - 40px), max(60dvh, 460px)); padding-bottom: 0; font-size: 0.8rem; }
.ventana-productos .dialogo-cabecera { padding: 12px 0 10px; border-bottom: 1px solid var(--borde); margin-bottom: 10px; }
.ventana-productos .ayuda-ventana { margin-left: auto; font-size: 0.85em; color: var(--muted); text-align: right; line-height: 1.35; }
/* Segunda línea, más chica: las teclas de la grilla. */
.ventana-productos .ayuda-ventana .teclas-ventana { display: block; font-size: 0.88em; opacity: 0.85; }
/* Alto fijo (lo calcula pedido.js con la categoría más larga): adentro se baja la lista y la cabecera y la barra de estado
   quedan siempre en el mismo lugar, arriba y abajo de todo. */
.dialogo.ventana-productos[open] { display: flex; flex-direction: column; overflow: hidden; }
.ventana-productos .dialogo-cabecera, .ventana-productos .estado-ventana { flex: none; }
.ventana-productos .cuerpo-ventana { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; margin: -4px; }
.ventana-productos .tab { padding: 8px 12px; font-size: 0.85rem; }
.ventana-productos .tecla { min-width: 34px; height: 34px; font-size: 0.85rem; }
/* Tarjetas un 20-25 % más chicas que en la grilla: entran más productos sin bajar. */
.ventana-productos .producto { min-height: 50px; padding: 5px 7px; gap: 2px; }
/* El selector de cantidad, acorde a la tarjeta más chica (que no tape el nombre). */
.ventana-productos .celda-producto .selector-cantidad { right: 3px; bottom: 3px; padding: 1px; }
.ventana-productos .celda-producto .selector-cantidad button { width: 24px; height: 24px; }
.ventana-productos .producto:focus-visible { outline: 3px solid var(--primario); outline-offset: 1px; }
.ventana-productos .grilla-productos { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
/* Las categorías, subcategorías y teclado quedan fijos arriba; la grilla es la que se desplaza. */
.ventana-productos .cuerpo-ventana > * { flex: none; }
.ventana-productos .cuerpo-ventana > #productos { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; align-content: start; padding: 4px; margin: -4px; }
.ventana-productos kbd { font: 600 0.62rem ui-monospace, Consolas, monospace; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; opacity: 0.6; margin-left: 6px; }
.estado-ventana { position: relative; z-index: 2; margin: 8px calc(-1 * var(--pad)) 0; padding: 9px var(--pad); background: var(--bg); border-top: 1px solid var(--borde);
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 0.95em; }
.estado-ventana b { font-size: 1.05em; }
/* Abajo a la derecha, lo que lleva el pedido por categoría (los mismos chips del carrito). */
.estado-ventana .pedido-ventana { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Unidades del pedido y, debajo, el total (para verlo aunque la ventana tape el cobro). */
.estado-ventana .total-ventana { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; margin-left: 6px; margin-right: 18px; }
.estado-ventana .total-ventana .monto { font-size: 1.25em; }
@media (hover: none) { .ventana-productos .teclas-ventana, .ventana-productos kbd { display: none; } }

@media (min-width: 821px) and (max-width: 1279px) {
  .modo-comanda #cliente { grid-template-columns: minmax(300px, 1.2fr) minmax(220px, 1fr) minmax(220px, 1fr); gap: 6px 14px; }
  .modo-comanda .col-cliente-1 { grid-template-columns: 120px minmax(0, 1fr); }
  .modo-comanda .panel-carrito.checkout { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); }
  .modo-comanda .cabecera-tabla, .modo-comanda .lista-carrito li { grid-template-columns: 88px minmax(140px, 1.3fr) minmax(100px, 1fr) 96px 30px; }
}
/* Modo Comanda en pantallas medianas (tablet): sin alto fijo, se baja con el dedo. */
@media (min-width: 821px) and (max-width: 999px) {
  .toma-pedido.modo-comanda { height: auto; padding-bottom: 0; }
  .modo-comanda #cliente { grid-template-columns: 1fr 1fr; }
  .modo-comanda .col-cliente-1 { grid-column: 1 / -1; }
  .modo-comanda .panel-carrito.checkout { height: auto; overflow: visible; grid-template-columns: 1fr; }
  .checkout-cobro { border-left: 0; padding-left: 0; border-top: 1px solid var(--borde); padding-top: 8px; }
}
/* Configuración → Promos */
.dias-promo { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; }
.dias-promo label.check { margin: 0; }
.fila-item-promo { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.fila-item-promo [data-tam] { width: auto; max-width: 140px; }
.fila-item-promo [data-tam][hidden] { display: none; }
fieldset.items-promo { display: grid; gap: 4px; }
.tabla-promos tr.inactiva td { color: var(--muted); }
@media (max-width: 820px) { .toma-pedido kbd, .boton-promo kbd { display: none; } }
/* Tarjetas de categoría compactas: nombre en un renglón y la cantidad abajo (entra todo en 1366×768). */
.tarjeta-categoria { padding: 6px 10px; min-height: 0; }
.tarjeta-categoria .nombre { font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modo-comanda .panel-categorias { gap: 6px; }
.modo-comanda .fila-motoquero, .modo-comanda .col-cliente-3 > label { margin: 0; }

/* ---- Modo Comanda en 1024 (terminales del local): menos alto, productos en un botón, confirmar con el tacho al lado ---- */
:root { --borde-ventana: #5c5c5c; }
:root[data-tema="oscuro"] { --borde-ventana: #a8a8a8; }
.toma-pedido.modo-comanda { gap: 6px; }
.modo-comanda > .tarjeta { padding: 8px 12px; }
.modo-comanda .panel-cliente { padding-right: 12px; }
.modo-comanda #cliente { gap: 4px 18px; }
.modo-comanda .col-cliente-1 { grid-template-columns: 104px minmax(0, 1fr); gap: 4px 10px; }
.modo-comanda .col-cliente-1 .selector-entrega { grid-template-columns: 1fr; gap: 4px; margin: 0; }
.modo-comanda .col-cliente-1 .selector-entrega .boton { min-height: 32px; padding: 3px 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.modo-comanda .buscar-y-notas { gap: 4px; }
.modo-comanda .buscar-y-notas .rotulo-plegable, .modo-comanda .col-cliente-2 .rotulo-plegable, .modo-comanda .col-cliente-3 .rotulo-plegable { margin: 0; }
.modo-comanda .buscar-y-notas input { min-height: 32px; }

.fila-productos { display: grid; grid-template-columns: minmax(300px, auto) minmax(0, 1fr); gap: 6px; align-items: stretch; min-width: 0; }
.fila-productos:has(#promos[hidden]) { grid-template-columns: minmax(300px, 420px); }
.fila-productos .panel-promos-comanda:has(#promos[hidden]) { display: none; }
.fila-productos > .tarjeta { margin: 0; }
.cabecera-productos { display: flex; align-items: center; gap: 6px; }
.cabecera-productos h2 { margin: 0 auto 0 0; font-size: 1.05rem; }
.cabecera-productos .icono { width: 14px; height: 14px; vertical-align: -2px; }
.boton-agregar-productos { width: 100%; min-height: 44px; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.panel-promos-comanda .panel-promos { border: 0; padding: 0; }

.checkout-cobro { gap: 3px; }
.checkout-cobro .total-grande { margin: 0 0 2px; }
.cabecera-cobro { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.cabecera-cobro h3 { margin: 2px 0; }
.envio-cobro { display: inline-flex; align-items: center; gap: 6px; }
.envio-cobro label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.fila-agregar-pago { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fila-agregar-pago .paga-con { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; white-space: nowrap; }
.modo-comanda .fila-vuelto { justify-content: flex-end; margin-top: 0; min-height: 1.4em; }
.vuelto.negativo { color: var(--error); }
.campo-pesos { position: relative; display: inline-flex; align-items: center; }
.campo-pesos > span { position: absolute; left: 8px; color: var(--muted); pointer-events: none; font-size: 0.9em; }
.campo-pesos > input { padding-left: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.campo-pesos > input.corto { width: 104px; }
.fila-pago .campo-pesos { flex: 0 0 104px; }   /* el mismo ancho que Envío y Paga con (input.corto), alineados */
.fila-pago .campo-pesos input { width: 100%; }
.fila-confirmar { display: flex; gap: 8px; align-items: stretch; margin-top: auto; padding-top: 4px; }
.fila-confirmar #guardar { flex: 1; margin: 0; }
.fila-confirmar .boton-tacho { padding: 0 14px; }
.checkout-cobro #guardar { margin-top: 0; }

/* Tacho de cada renglón del pedido: centrado en su columna. */
.modo-comanda .lista-carrito .linea-2 .boton-tacho { justify-self: center; align-self: center; width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; }
.modo-comanda .lista-carrito .linea-2 .boton-tacho .icono { width: 18px; height: 18px; }

/* Ventana de productos */
.dialogo.ventana-productos { border: 2px solid var(--borde-ventana); }
.ventana-productos .dialogo-cabecera { padding: 10px var(--pad); margin-bottom: 8px; }
.ventana-productos .dialogo-cabecera [data-accion=cerrar-ventana] { padding-left: 22px; padding-right: 22px; }
.celda-producto { position: relative; display: grid; min-width: 0; }
.celda-producto > .producto { width: 100%; height: 100%; }
.celda-producto .selector-cantidad { position: absolute; right: 5px; bottom: 5px; z-index: 1; display: inline-flex; align-items: center; gap: 1px; padding: 2px;
  border-radius: 999px; background: var(--card); color: var(--fg); border: 1px solid var(--borde); box-shadow: 0 2px 6px rgb(0 0 0 / 0.18); }
.celda-producto .selector-cantidad button { width: 28px; height: 28px; border-radius: 999px; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer;
  display: grid; place-items: center; touch-action: manipulation; }
.celda-producto .selector-cantidad button:hover { background: var(--tinte-gris); }
.celda-producto .selector-cantidad button.tacho { color: var(--error); }
.celda-producto .selector-cantidad button:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.celda-producto .selector-cantidad svg { width: 16px; height: 16px; display: block; }
.celda-producto .selector-cantidad .n { min-width: 18px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.celda-producto .selector-cantidad { gap: 0; padding: 1px; }
.celda-producto .selector-cantidad button { width: 26px; height: 26px; }
.celda-producto .selector-cantidad .n { min-width: 16px; }
.panel-promos-comanda .lista-promos { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.panel-promos-comanda .boton-promo { padding-top: 6px; padding-bottom: 6px; }
.panel-promos-comanda .titulo-promos { padding: 0; }
.fila-productos .panel-categorias { align-content: start; gap: 6px; }
.modo-comanda .fila-productos > .tarjeta { padding: 8px 12px; }
.modo-comanda .boton-agregar-productos { min-height: 40px; }

/* Promos sin desplegable: título como "Productos" y cada promo con nombre y precio arriba y el detalle abajo. */
h2.titulo-promos { margin: 0; font-size: 1.05rem; color: var(--fg); cursor: default; padding: 0; display: block; }
.boton-promo { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 1px; align-items: center; }
.boton-promo .texto { grid-column: 1 / -1; }
.panel-promos-comanda .panel-promos { gap: 6px; }
.panel-promos-comanda .lista-promos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Notas para el Envío: un poco de aire abajo. */
.modo-comanda #notas-envio { margin-bottom: 5px; }

/* Botón al lado de Confirmar (tacho o salir sin guardar): ícono centrado en todo el alto. */
.fila-confirmar .boton-tacho { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; height: auto; min-height: 0;
  padding: 0 14px; margin: 0; line-height: 1; box-sizing: border-box; text-decoration: none; }
.fila-confirmar .boton-tacho .icono { display: block; width: 22px; height: 22px; margin: 0; }
.boton-salir { color: var(--fg); }
.boton-salir:hover { background: var(--tinte-gris); border-color: var(--fg); }

/* Ventana de productos: la tecla de cada categoría. */
.ventana-productos .tab kbd { margin-left: 6px; font-size: 0.6rem; vertical-align: 1px; }

/* Promo con productos a elección */
.incluye-promo { margin: 0 0 8px; }
.eleccion-promo { margin-bottom: 12px; }
.eleccion-promo h3 { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; font-size: 1rem; }
.contador-eleccion { font-size: 0.85rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--tinte-rojo); color: var(--error); }
.contador-eleccion.completo { background: var(--en-pedido); color: var(--fg); }
.eleccion-promo .grilla-productos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.eleccion-promo .producto { min-height: 58px; padding: 8px; }
.eleccion-promo .producto:disabled { opacity: 0.45; cursor: default; }
.celda-producto .selector-cantidad button:disabled { opacity: 0.35; cursor: default; }

/* Configuración → Promos: renglón eventual */
.fila-item-promo .eventual-promo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 6px; }
.fila-item-promo .eventual-promo[hidden] { display: none; }
.ventana-productos .tab { padding: 8px 9px; }
.ventana-productos .tab kbd { margin-left: 4px; padding: 0 3px; }
/* Diálogo con cambios sin guardar: un toque afuera no lo cierra, se sacude. */
dialog.sacudir { animation: sacudir 0.35s; }
@keyframes sacudir { 0%, 100% { translate: 0; } 20%, 60% { translate: -8px; } 40%, 80% { translate: 8px; } }
@media (prefers-reduced-motion: reduce) { dialog.sacudir { animation: none; } }
/* Modo Grilla: las promos como los productos (casi cuadradas, varias por fila) para no ocupar tanto alto en 1024. */
.panel-productos .lista-promos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.panel-productos .boton-promo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: start; row-gap: 2px;
  padding: 7px 9px; min-height: 86px; }
.panel-productos .boton-promo .nombre { grid-row: 1; white-space: normal; line-height: 1.15; }
.panel-productos .boton-promo .texto { grid-row: 2; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.panel-productos .boton-promo .precio { grid-row: 3; }

/* Licencia */
.aviso-licencia { background: var(--nota); color: var(--fg); border-bottom: 2px solid #e3b23c; padding: 8px 16px; font-weight: 600; text-align: center; }
.aviso-licencia.vencida { background: var(--tinte-rojo); border-color: var(--error); color: var(--error); }
.aviso-licencia a { margin-left: 8px; }
.aviso-licencia.actualizacion { border-color: var(--primario); }
.aviso-actualizacion { border: 1px solid var(--borde); border-left: 4px solid var(--primario); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.aviso-actualizacion .notas-version { white-space: pre-line; margin: 6px 0; }
.datos-licencia { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 8px 0; }
.datos-licencia dt { font-weight: 700; color: var(--muted); }
.datos-licencia dd { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lista-modulos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-modulos li { display: grid; grid-template-columns: 110px max-content 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.lista-modulos li:not(.activo) b { color: var(--muted); }
@media (max-width: 700px) { .lista-modulos li { grid-template-columns: 1fr; gap: 2px; } }
.error-texto { color: var(--error); }

/* ---------- Salón (módulo Mesas) ---------- */
.salon-cabecera h1 .nota { font-size: 0.95rem; font-weight: 500; margin-left: 8px; }
.selector-vista { display: inline-flex; gap: 0; }
.selector-vista .boton { border-radius: 0; }
.selector-vista .boton:first-child { border-radius: 6px 0 0 6px; }
.selector-vista .boton:last-child { border-radius: 0 6px 6px 0; }
.selector-vista .boton.activo { background: var(--fg); color: var(--sobre-fg); border-color: var(--fg); }
.salon-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 12px; }
.filtro-mozo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.filtro-mozo select { min-width: 140px; }
.leyenda-mesas { margin-left: auto; display: inline-flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; color: var(--muted); font-size: 0.85rem; }
.leyenda-mesas i, .punto { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; border: 2px solid var(--mesa-borde); background: var(--mesa-fondo); }

/* Estados: libre (gris), abierta sin marchar (azul), en curso (naranja), demorada (rojo). */
.libre { --mesa-fondo: var(--tinte-gris-suave); --mesa-borde: var(--producto-borde); }
.abierta { --mesa-fondo: var(--tinte-azul); --mesa-borde: var(--web); }
.en-curso { --mesa-fondo: var(--toque-2); --mesa-borde: var(--toque-2-borde); }
.demorada { --mesa-fondo: var(--tinte-rojo); --mesa-borde: var(--error); }
.para-servir { --mesa-fondo: var(--tinte-verde); --mesa-borde: var(--ok); }
/* Lista para servir pero pasada de tiempo: borde verde (ya se sirve), fondo y tiempo en rojo (se demoró). */
.para-servir.con-demora { --mesa-fondo: var(--tinte-rojo); --mesa-borde: var(--ok); }
.tarjeta-mesa.con-demora .estado, .con-demora .estado-grupo { color: var(--error); }
.mesa-plano.con-demora { border-width: 3px; }
.reservada { --mesa-fondo: var(--tinte-amarillo); --mesa-borde: #e3b23c; }
.tarjeta-mesa.reservada .estado { color: var(--alerta-texto); }
tr.fila-demorada td { background: var(--tinte-amarillo); }

/* Pasos (entrada, principal, postre): lo marchado en espera y el botón "Marchar Principal". */
.barra-paso { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px;
  border-radius: var(--radio); background: var(--tinte-amarillo); border: 1px solid #e3b23c; }
.lista-marchados li.en-espera { opacity: 0.7; }
.chip-espera { display: inline-block; font-size: 0.75em; font-weight: 700; border-radius: 999px; padding: 0 7px; background: var(--tinte-amarillo); color: var(--alerta-texto); border: 1px solid #e3b23c; }
.selector-paso { max-width: 120px; flex: 0 0 auto; min-height: 30px; padding: 2px 4px; font-size: 0.9rem; }
.paso-y-nota { display: flex; gap: 6px; flex: 1; min-width: 0; }
.modo-comanda .lista-carrito .paso-y-nota { order: 3; }
/* Happy hour: el precio de lista tachado al lado del precio con descuento. */
.precio-lista { font-weight: 400; font-size: 0.85em; color: var(--muted); }

.grilla-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tarjeta-mesa { font: inherit; color: var(--fg); text-align: left; cursor: pointer; display: grid; gap: 2px; align-content: start; min-height: 120px;
  padding: 10px 12px; border-radius: var(--radio); border: 2px solid var(--mesa-borde); background: var(--mesa-fondo); box-shadow: var(--sombra); }
.tarjeta-mesa:hover, .tarjeta-mesa:focus-visible { filter: brightness(0.97); outline: 2px solid var(--mesa-borde); outline-offset: 1px; }
.tarjeta-mesa .numero { font-size: 2rem; font-weight: 800; line-height: 1; }
.tarjeta-mesa .sector, .tarjeta-mesa .detalle { font-size: 0.85rem; color: var(--muted); }
.tarjeta-mesa .total { font-size: 1.15rem; font-weight: 700; margin-top: 4px; }
.tarjeta-mesa .estado { font-size: 0.85rem; font-weight: 600; }
.tarjeta-mesa.libre { border-style: dashed; }
.tarjeta-mesa.demorada .estado { color: var(--error); }

.tabla-salon .fila-mesa { cursor: pointer; }
.tabla-salon .fila-mesa:hover td { background: var(--hover); }
.tabla-salon .fila-mesa td:first-child { border-left: 4px solid var(--mesa-borde); }

.plano-sector h2 { margin-top: 0; }
.plano { position: relative; height: 420px; border: 1px dashed var(--borde); border-radius: var(--radio); background: var(--bg); overflow: hidden; }
.mesa-plano { position: absolute; transform: translate(-50%, -50%); width: 72px; height: 72px; display: grid; place-content: center; text-align: center;
  font: inherit; color: var(--fg); cursor: pointer; border: 2px solid var(--mesa-borde); background: var(--mesa-fondo); border-radius: 8px; }
.mesa-plano.redonda { border-radius: 50%; }
.mesa-plano.rectangular { width: 112px; }
.mesa-plano b { font-size: 1.3rem; }
.mesa-plano small { font-size: 0.75rem; }

/* Mesa abierta en la toma de pedido */
.panel-mesa { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 16px; }
.panel-mesa label { display: grid; gap: 4px; font-weight: 600; }
.panel-mesa .notas-mesa { flex: 1 1 220px; }
.numero-mesa { display: grid; justify-items: center; line-height: 1; padding: 4px 14px; border: 2px solid var(--web); border-radius: var(--radio); background: var(--tinte-azul); }
.numero-mesa small { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; }
.numero-mesa b { font-size: 1.8rem; }
.marchados { display: grid; gap: 6px; margin-bottom: 10px; }
.marchados .tanda { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tinte-gris-suave); padding: 6px 10px; }
.marchados h3 { margin: 0 0 4px; font-size: 0.9rem; }
.lista-marchados { list-style: none; margin: 0; padding: 0; }
.lista-marchados li { display: grid; grid-template-columns: 2.5em 1fr auto; gap: 6px; padding: 2px 0; color: var(--muted); }
.lista-marchados .cant { font-weight: 700; text-align: right; }
.lista-marchados .num { font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .leyenda-mesas { margin-left: 0; }
  .grilla-mesas { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .plano { height: 320px; }
}
/* Mesa: volver, Precuenta y Cobrar arriba; Marchar ancho abajo (en columnas angostas no entran los cuatro en una fila). */
.fila-confirmar.de-mesa { display: grid; grid-template-columns: auto 1fr 1fr; }
.fila-confirmar.de-mesa #guardar { grid-column: 1 / -1; }
@media (min-width: 1200px) { .modo-comanda .fila-confirmar.de-mesa { grid-template-columns: auto 1fr 1fr 1.6fr; } .modo-comanda .fila-confirmar.de-mesa #guardar { grid-column: auto; } }
/* Área de cobro: botones un poco más chicos para que entren en una fila sin desplazamiento de costado (1024 px). */
.fila-confirmar > * { min-width: 0; }
.fila-confirmar .boton.grande { padding: 10px 10px; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-confirmar .boton-tacho { padding: 0 10px; }
@media (min-width: 900px) and (max-width: 1199px) {
  .modo-comanda .fila-confirmar.de-mesa { grid-template-columns: auto auto auto minmax(0, 1fr); }
  .modo-comanda .fila-confirmar.de-mesa #guardar { grid-column: auto; }
}
.monitor-pedido .entrega.salon { background: var(--tinte-amarillo); color: var(--alerta-texto); }
.tanda-detalle { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tinte-gris-suave); padding: 6px 10px; margin: 6px 0; }
.tanda-detalle h3 { margin: 0 0 4px; font-size: 0.95rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.comanda-mesa .numero { white-space: nowrap; }
.grupo-opciones.sin-borde { border: none; padding: 0; }
.linea-descuento { display: flex; justify-content: space-between; align-items: center; margin: 0; color: var(--muted); }
.linea-descuento span { display: inline-flex; align-items: center; gap: 6px; }
.linea-descuento .limpiar { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.resumen-cobro { margin-bottom: 10px; }
.barra-plano { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.plano.moviendo { outline: 2px dashed var(--web); background-image: linear-gradient(var(--borde) 1px, transparent 1px), linear-gradient(90deg, var(--borde) 1px, transparent 1px); background-size: 5% 5%; }
.plano.moviendo .mesa-plano { cursor: grab; touch-action: none; }
.plano.moviendo .mesa-plano:active { cursor: grabbing; box-shadow: 0 6px 16px rgb(0 0 0 / 0.25); z-index: 2; }

/* Módulos apagados (solo los ve el dueño): deshabilitados con candado; al tocarlos explica cómo sumarlos. */
.subtitulo-modulos { font-size: 0.95rem; margin: 14px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.subtitulo-modulos:first-of-type { margin-top: 4px; }
svg.candado { width: 0.95em; height: 0.95em; vertical-align: -0.1em; margin-left: 6px; flex: none; }
.bloqueado { opacity: 0.55; filter: grayscale(1); }
.bloqueado:hover { opacity: 0.8; }
.acceso.bloqueado { border-style: dashed; }
.acceso-principal.bloqueado { background: var(--card); color: var(--fg); border: 2px dashed var(--borde); }
#menu a.bloqueado, .submenu a.bloqueado, .tab.bloqueado { display: inline-flex; align-items: center; }
.modulo-bloqueado { max-width: 560px; margin: 32px auto; text-align: center; }
.modulo-bloqueado-icono svg { width: 48px; height: 48px; color: var(--muted); }
.modulo-bloqueado .detalle { color: var(--muted); }
.modulo-bloqueado .acciones { justify-content: center; }

/* Mesa: anular un ítem marchado (✕ al final del renglón). */
.lista-marchados.con-anular li { grid-template-columns: 2.5em 1fr auto auto; align-items: center; }
.lista-marchados .limpiar { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 0.9rem; padding: 2px 6px; opacity: 0.7; }
.lista-marchados .limpiar:hover { opacity: 1; color: var(--error); }

/* Menú contextual (clic derecho en Salón, Comandas, Pedidos e Inicio). */
.menu-contextual { position: fixed; z-index: 1000; min-width: 200px; max-width: 300px; background: var(--card); color: var(--fg); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); padding: 4px; display: grid; }
.menu-contextual-titulo { font-weight: 700; font-size: 0.85rem; color: var(--muted); padding: 6px 10px 4px; }
.menu-contextual button { font: inherit; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; color: inherit; }
.menu-contextual button:hover:not([disabled]), .menu-contextual button:focus-visible { background: var(--hover); outline: none; }
.menu-contextual button.peligro { color: var(--error); }
.menu-contextual button[disabled] { opacity: 0.45; cursor: default; }
.menu-contextual hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 0; }

/* Planos por sector: cada uno con su ancho (% del espacio) y alto; en "Todos" se acomodan uno al lado del otro si entran. */
.planos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-right: -12px; }
.planos > .plano-sector { flex: 0 0 calc(var(--ancho-plano, 100%) - 12px); min-width: 260px; margin: 0; box-sizing: border-box; }
@media (max-width: 900px) { .planos > .plano-sector { flex-basis: 100%; } }
.fila-libres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: center; }
.mesa-plano.estatica { position: static; transform: none; }
.mesa-plano.mesa-nueva { position: static; transform: none; border-style: dashed; border-color: var(--borde); background: transparent; color: var(--muted);
  font-size: 2.6rem; font-weight: 300; line-height: 1; display: grid; place-items: center; place-content: center; }
.mesa-plano.mesa-nueva:hover, .mesa-plano.mesa-nueva:focus-visible { color: var(--primario); border-color: var(--primario); }
/* El área que se toca es más grande que el triángulo (en pantallas táctiles cuesta acertarle a la esquina justa). */
.tirador-plano { position: absolute; right: 0; bottom: 0; width: 48px; height: 48px; cursor: nwse-resize; touch-action: none; z-index: 3; }
.tirador-plano::after { content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px;
  background: linear-gradient(135deg, transparent 50%, var(--web) 50%); border-bottom-right-radius: var(--radio); pointer-events: none; }

/* "+" al lado del nombre del sector (abre una mesa en ese sector). */
.plano-sector h2 { display: flex; align-items: center; gap: 8px; }
.mas-sector { font: inherit; font-size: 1.6rem; font-weight: 300; line-height: 1; width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center;
  border: 2px dashed var(--borde); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; }
.mas-sector:hover, .mas-sector:focus-visible { color: var(--primario); border-color: var(--primario); }
.plano-sector h2 { margin-bottom: 8px; }
/* Mesa libre del plano (sin número): "+" grande y centrado; al abrirla toma el número asignado. */
.mesa-plano.lugar { border-style: dashed; border-color: var(--borde); background: var(--card); color: var(--muted);
  font-size: 2.2rem; font-weight: 300; line-height: 1; display: grid; place-items: center; place-content: center; padding: 0; }
.mesa-plano.lugar:hover, .mesa-plano.lugar:focus-visible { color: var(--primario); border-color: var(--primario); }
/* Mantener apretada para mover: se marca mientras espera y se "levanta" al poder arrastrarla. */
.plano .mesa-plano { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mesa-plano.apretando { animation: mesa-apretando 2s linear forwards; }
@keyframes mesa-apretando { from { box-shadow: 0 0 0 0 transparent; } to { box-shadow: 0 0 0 6px var(--web); } }
.mesa-plano.levantada { cursor: grabbing; z-index: 5; box-shadow: 0 10px 22px rgb(0 0 0 / 0.3); scale: 1.08; }
.tipo-mesa { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 10px; }
.tipo-mesa .check { display: inline-flex; align-items: center; gap: 6px; }

/* Mesas de la casa (consumo de los dueños, sin caja). */
.etiqueta-casa { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px;
  background: var(--tinte-amarillo); color: var(--alerta); border: 1px solid currentColor; vertical-align: middle; }
.mesa-plano.casa { outline: 2px dashed var(--alerta); outline-offset: 2px; }
.tarjeta-mesa.casa { border-style: dashed; }
.aviso-casa { background: var(--tinte-amarillo); border: 1px solid var(--alerta); border-radius: var(--radio); padding: 8px 10px; }

/* ---------- Carta online (/carta/, sin usuario) ---------- */
.pagina-carta .carta { max-width: 760px; margin: 0 auto; padding: 12px 16px 32px; }
.carta-cabecera { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.carta-cabecera img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; }
.carta-cabecera h1 { margin: 0; }
.carta-cabecera .nota { margin: 2px 0 0; font-weight: 600; }
.carta-buscar input { width: 100%; box-sizing: border-box; }
.carta-categorias { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.carta-categorias .tab { white-space: nowrap; text-decoration: none; }
.pagina-carta section { scroll-margin-top: 56px; }
.carta-pie { text-align: center; margin-top: 16px; }
.carta-lista { list-style: none; margin: 0; padding: 0; }
.carta-lista li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--borde); }
.carta-lista li:first-child { border-top: 0; }
.carta-lista .nota { margin-top: 2px; font-size: 0.88rem; }
.carta-precio { white-space: nowrap; text-align: right; }
.carta-lista li.agotado { opacity: 0.55; }

/* Mapa de calor (Reportes → Salón): una sola escala de --serie-1, de claro a oscuro. */
.mapa-calor { overflow-x: auto; }
.mapa-calor table { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: 0.78rem; }
.mapa-calor th { font-weight: 600; color: var(--muted); padding: 2px 4px; white-space: nowrap; }
.mapa-calor tbody th { text-align: left; }
.mapa-calor td { height: 30px; min-width: 26px; text-align: center; border-radius: 4px; color: var(--fg); font-variant-numeric: tabular-nums; }
.mapa-calor td.oscura { color: #fff; }
.mapa-calor td.vacia { background: var(--bg); }
.escala-calor { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.78rem; color: var(--muted); }
.escala-calor i { flex: 0 0 140px; height: 10px; border-radius: 4px; background: linear-gradient(to right, color-mix(in srgb, var(--serie-1) 12%, var(--card)), var(--serie-1)); }
/* Ingeniería de menú: la clase de cada producto (texto + punto de color, nunca solo color). */
.clase-menu { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.clase-menu::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.clase-menu.Estrella { --c: var(--serie-3); } .clase-menu.Caballito { --c: var(--serie-1); }
.clase-menu.Rompecabezas { --c: var(--serie-4); } .clase-menu.Perro { --c: var(--serie-2); }
.relleno-nota { padding: 4px 14px 8px; margin: 0; }
.titulo-seccion-reporte { margin: 22px 0 10px; font-size: 1.15rem; }
.detalle-reporte > summary { padding: 4px 14px 10px; cursor: pointer; color: var(--primario); font-weight: 600; }
/* Monitor: mesa grupal (una tarjeta con todos los grupos de la marcha, cada uno con su encabezado). */
.monitor-pedido .entrega.grupal { background: var(--serie-6); color: #fff; }
.monitor-pedido .items li.grupo-monitor { display: block; margin: 6px 0 2px; padding: 2px 8px; border-radius: 6px; background: var(--fg); color: var(--bg);
  font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.monitor-pedido .items li.grupo-monitor:first-child { margin-top: 0; }

/* Mesa grupal: una tarjeta ancha (o un rectángulo en el plano) con un botón por grupo. */
.tarjeta-grupal, .mesa-grupal-plano { border: 3px double var(--mesa-borde); background: color-mix(in srgb, var(--mesa-fondo) 60%, var(--card)); border-radius: var(--radio);
  padding: 8px 10px; display: grid; gap: 8px; align-content: start; box-shadow: var(--sombra); }
.tarjeta-grupal { grid-column: 1 / -1; }
.mesa-grupal-plano { position: absolute; z-index: 1; overflow: auto; max-height: calc(100% - 8px); }
.cabecera-grupal { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cabecera-grupal b { font-size: 1.1rem; }
.grupos-grupal { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.grupo-mesa { font: inherit; color: var(--fg); cursor: pointer; text-align: left; display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px;
  border: 2px solid var(--mesa-borde); background: var(--mesa-fondo); }
.grupo-mesa b { font-size: 1.05rem; }
.grupo-mesa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grupo-mesa small { color: var(--muted); }
.grupo-mesa.agregar { border-style: dashed; color: var(--muted); place-content: center; text-align: center; font-weight: 600; }
.grupo-mesa:hover, .grupo-mesa:focus-visible { outline: 2px solid var(--mesa-borde); outline-offset: 1px; }
/* Armar la grupal */
.chips-mesas { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-mesa { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--borde); border-radius: 999px; cursor: pointer; }
.chip-mesa:has(input:checked) { background: var(--tinte-azul); border-color: var(--web); font-weight: 600; }
.fila-grupo { display: grid; grid-template-columns: 90px 1fr 110px auto; gap: 8px; align-items: end; margin-bottom: 6px; }
.mesas-grupal, .grupos-armar { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }
@media (max-width: 560px) { .fila-grupo { grid-template-columns: 80px 1fr; } }
/* Mesa: los grupos de la grupal arriba de la comanda */
.barra-grupos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Los grupos usan todo el ancho que queda a la derecha (no solo una columna) y "Cobrar Grupal" abajo, a la altura de las notas. */
.modo-comanda #cliente > #barra-grupos { grid-column: 2 / -1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
#barra-grupos .acciones-grupal { display: flex; }
.boton.borde-verde { border: 2px solid var(--ok); color: var(--ok); background: transparent; font-weight: 700; }
.boton.borde-verde:hover:not(:disabled) { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.barra-grupos .grupo-mesa { min-width: 110px; }
.barra-grupos .grupo-mesa.actual { outline: 3px solid var(--primario); outline-offset: 1px; }
.barra-grupos .pendiente-marchar { font-size: 0.75rem; font-weight: 700; color: var(--primario); }

/* Mozo que atiende, arriba del número: chico y gris (no compite con el número). */
.mozo-mesa { display: block; font-size: 0.68rem; line-height: 1.1; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mesa-plano .mozo-mesa { font-size: 0.6rem; margin-bottom: 1px; }
.atiende-grupal { margin-left: auto; font-size: 0.78rem; color: var(--muted); font-weight: 600; }
/* Grupal: color de fondo elegido en Mover Mesas (el borde sigue mostrando el estado). */
.tarjeta-grupal.color-grupal-1, .mesa-grupal-plano.color-grupal-1 { background: color-mix(in srgb, var(--serie-1) 16%, var(--card)); }
.tarjeta-grupal.color-grupal-2, .mesa-grupal-plano.color-grupal-2 { background: color-mix(in srgb, var(--serie-2) 16%, var(--card)); }
.tarjeta-grupal.color-grupal-3, .mesa-grupal-plano.color-grupal-3 { background: color-mix(in srgb, var(--serie-3) 16%, var(--card)); }
.tarjeta-grupal.color-grupal-4, .mesa-grupal-plano.color-grupal-4 { background: color-mix(in srgb, var(--serie-4) 18%, var(--card)); }
.tarjeta-grupal.color-grupal-5, .mesa-grupal-plano.color-grupal-5 { background: color-mix(in srgb, var(--serie-5) 16%, var(--card)); }
.tarjeta-grupal.color-grupal-6, .mesa-grupal-plano.color-grupal-6 { background: color-mix(in srgb, var(--serie-6) 16%, var(--card)); }
.colores-grupal { display: flex; gap: 6px; flex-wrap: wrap; }
.colores-grupal button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--borde); cursor: pointer; padding: 0; }
.colores-grupal button.color-grupal-0 { background: var(--card); background-image: linear-gradient(135deg, transparent 45%, var(--error) 45%, var(--error) 55%, transparent 55%); }
.colores-grupal button.color-grupal-1 { background: color-mix(in srgb, var(--serie-1) 40%, var(--card)); }
.colores-grupal button.color-grupal-2 { background: color-mix(in srgb, var(--serie-2) 40%, var(--card)); }
.colores-grupal button.color-grupal-3 { background: color-mix(in srgb, var(--serie-3) 40%, var(--card)); }
.colores-grupal button.color-grupal-4 { background: color-mix(in srgb, var(--serie-4) 45%, var(--card)); }
.colores-grupal button.color-grupal-5 { background: color-mix(in srgb, var(--serie-5) 40%, var(--card)); }
.colores-grupal button.color-grupal-6 { background: color-mix(in srgb, var(--serie-6) 40%, var(--card)); }
.colores-grupal button.elegido { outline: 3px solid var(--fg); outline-offset: 1px; }
.mesa-grupal-plano.moviendo-grupal { outline: 2px dashed var(--web); }
.mesa-grupal-plano.moviendo-grupal .cabecera-grupal { cursor: grab; touch-action: none; }
.mesa-grupal-plano .tirador-grupal { border-bottom-right-radius: var(--radio); }

/* Cobro con QR de Mercado Pago */
.cobro-qr { width: min(420px, calc(100vw - 32px)); text-align: center; }
.cobro-qr .dialogo-cabecera { justify-content: center; }
.cobro-qr .qr-caja { background: #fff; border-radius: var(--radio, 8px); padding: 12px; margin: 8px auto; width: fit-content; }
.cobro-qr .qr-caja img { display: block; width: min(320px, 70vw); height: auto; image-rendering: pixelated; }
.cobro-qr .qr-estado { font-weight: 600; margin: 8px 0; }
.cobro-qr .qr-estado.ok { color: var(--ok); font-size: 1.3em; }
.cobro-qr .qr-estado.error { color: var(--error); }
.cobro-qr .acciones { justify-content: center; flex-wrap: wrap; }
.cobro-qr .centrado { text-align: center; }
.cobro-qr .qr-fijo { font-size: 1.3em; margin: 18px 0 4px; }
.cobro-qr .total-grande { display: block; text-align: center; font-size: 2.2em; font-weight: 800; margin: 4px 0 10px; }

/* Configuración → Pantallas: el código para vincular la tablet. */
.codigo-pantalla { font-size: 3rem; font-weight: 800; letter-spacing: .12em; text-align: center; margin: 8px 0; font-variant-numeric: tabular-nums; }
.qr-pantalla { display: flex; justify-content: center; }
.qr-pantalla svg { width: 200px; height: 200px; background: #fff; border-radius: 8px; }
/* Inicio: Nuevo Pedido y Comanda Mostrador, uno al lado del otro (cada uno ocupa la mitad). */
.accesos-principales { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.accesos-principales .acceso-principal { margin-bottom: 0; }
/* Comanda Mostrador: la casilla "Imprimir ticket" en línea, al lado de las notas. */
.panel-mostrador label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; align-self: end; white-space: nowrap; padding-bottom: 8px; }
.panel-mostrador label.check input { width: auto; margin: 0; }
.acciones-chicas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.enlace-opciones { font: inherit; font-size: 0.8em; font-weight: 600; border: 0; background: none; color: var(--primario, #b3261e); text-decoration: underline; cursor: pointer; padding: 0 2px; }
.productos-opciones-config { margin-top: 8px; }
.productos-opciones-config input[type=search] { width: 100%; margin: 6px 0; }
.lista-productos-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px; max-height: 220px; overflow-y: auto; }
/* Mapa de Pedidos */
.pagina-mapa .acciones { flex-wrap: wrap; }
.asignar-mapa { display: inline-flex; gap: 6px; align-items: center; }
.tabla-mapa { max-height: 32vh; overflow: auto; border: 1px solid var(--borde); border-radius: 10px; background: var(--card); margin-bottom: 10px; }
.tabla-mapa tr[data-fila-pedido] { cursor: pointer; }
.tabla-mapa tr.seleccionada td { background: var(--tinte-azul, #e6f0fb); }
.mapa-pedidos { height: max(360px, calc(100vh - 340px)); border: 1px solid var(--borde); border-radius: 10px; z-index: 0; }
.mapa-pedidos.marcando, .mapa-pedidos.marcando .maplibregl-canvas { cursor: crosshair; }
.punto-color { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; border: 1px solid #fff; }
.pin-pedido { background: none; border: 0; }
.pin-pedido svg { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.35)); transition: transform 0.15s; transform-origin: 50% 100%; }
.pin-pedido.marcado svg { transform: scale(1.3); filter: drop-shadow(0 0 4px #1565c0); }
.pin-local { background: none; border: 0; font-size: 26px; line-height: 30px; text-align: center; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4)); }
.pin-motoquero { background: none; border: 0; }
.pin-motoquero .circulo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #1565c0; color: #fff; font-weight: 800; font-size: 13px; border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 0.5); }
.pin-motoquero .nombre { position: absolute; left: 38px; top: 7px; white-space: nowrap; font-size: 12px; font-weight: 700; background: rgb(255 255 255 / 0.9); color: #111; padding: 1px 6px; border-radius: 6px; }
.globo-pedido { font-size: 0.9rem; line-height: 1.45; }
.globo-pedido .acciones-globo { display: flex; gap: 6px; margin-top: 8px; }
.ubicacion-envios { font-size: 0.8rem; }
.pin-pedido.aproximado svg { opacity: 0.75; }
.pin-pedido.aproximado svg path { stroke-dasharray: 3 2; }
/* Imagen de los productos (la cargada o una genérica sin fondo) */
.producto-con-imagen { display: flex; align-items: center; gap: 10px; }
.imagen-producto { width: 40px; height: 40px; object-fit: contain; flex: none; border-radius: 8px; }
.imagen-producto.grande { width: 72px; height: 72px; }
.imagen-producto-editar { display: flex; gap: 12px; align-items: center; margin: 4px 0 8px; }
.imagen-producto-editar small { display: block; margin-top: 4px; }
.boton-archivo { cursor: pointer; }
.carta-lista li .carta-producto { flex: 1; }
.carta-lista li .imagen-producto { margin-top: 2px; }

/* Instalar App (Android): app web o APK */
.instalar-app { max-width: 560px; }
.opciones-instalar { display: grid; gap: 12px; }
.opciones-instalar .tarjeta { margin: 0; }
.opciones-instalar h3 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.opciones-instalar .boton { display: inline-block; margin-top: 4px; text-decoration: none; }
.pasos-apk { margin: 12px 0 0; padding-left: 20px; font-size: 0.9rem; }
.pasos-apk li { margin-bottom: 4px; }
.direccion-apk { font-size: 1.05rem; user-select: all; }

/* Catálogo de imágenes genéricas (Productos → Editar → Elegir del Catálogo) */
.catalogo-genericas { max-width: 640px; }
.grilla-genericas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.grilla-genericas button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 2px solid var(--borde); border-radius: 10px;
  background: var(--campo); color: inherit; font: inherit; font-size: 0.78rem; cursor: pointer; text-align: center; line-height: 1.15; }
.grilla-genericas button:hover { border-color: var(--primario); }
.grilla-genericas button.elegida { border-color: var(--primario); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primario) 30%, transparent); }
.grilla-genericas img { width: 48px; height: 48px; object-fit: contain; }

/* Mapa (MapLibre): pines, globos en los colores del tema */
.pin-pedido { width: 30px; height: 42px; cursor: pointer; }
.pin-pedido.moviendo { cursor: grab; }
.pin-pedido.moviendo svg { transform: scale(1.3); filter: drop-shadow(0 0 6px #f9a825); }
.maplibregl-marker.arriba { z-index: 6 !important; }
.pin-local { width: 30px; height: 30px; }
.pin-motoquero { width: 34px; height: 34px; cursor: pointer; }
.maplibregl-map { font: inherit; }
.maplibregl-map .maplibregl-popup-content { background: var(--card); color: var(--fg); border-radius: 10px; box-shadow: 0 4px 14px rgb(0 0 0 / 0.25); padding: 12px 28px 12px 14px; font-size: 0.9rem; }
.maplibregl-map .maplibregl-popup-close-button { color: var(--muted); font-size: 20px; padding: 0 6px; }
.maplibregl-map .maplibregl-popup-anchor-bottom .maplibregl-map .maplibregl-popup-tip, .maplibregl-map .maplibregl-popup-anchor-bottom-left .maplibregl-map .maplibregl-popup-tip, .maplibregl-map .maplibregl-popup-anchor-bottom-right .maplibregl-map .maplibregl-popup-tip { border-top-color: var(--card); }
.maplibregl-map .maplibregl-popup-anchor-top .maplibregl-map .maplibregl-popup-tip, .maplibregl-map .maplibregl-popup-anchor-top-left .maplibregl-map .maplibregl-popup-tip, .maplibregl-map .maplibregl-popup-anchor-top-right .maplibregl-map .maplibregl-popup-tip { border-bottom-color: var(--card); }
.maplibregl-map .maplibregl-popup-anchor-left .maplibregl-map .maplibregl-popup-tip { border-right-color: var(--card); }
.maplibregl-map .maplibregl-popup-anchor-right .maplibregl-map .maplibregl-popup-tip { border-left-color: var(--card); }
[data-tema="oscuro"] .maplibregl-ctrl-group { background: #2a2d33; }
[data-tema="oscuro"] .maplibregl-ctrl-group button + button { border-top-color: #3b3f46; }
[data-tema="oscuro"] .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1); }
[data-tema="oscuro"] .maplibregl-map .maplibregl-ctrl-attrib { background: rgb(0 0 0 / 0.5); color: #ccc; }
[data-tema="oscuro"] .maplibregl-map .maplibregl-ctrl-attrib a { color: #ddd; }

/* ---------- Comercio General: Ventas (docs/comercio-general.md) ---------- */
.venta { display: grid; gap: 12px; grid-template-columns: minmax(420px, 3fr) minmax(300px, 2fr); align-items: start; font-size: 0.9rem; }
.venta > .tarjeta { margin: 0; padding: 14px; }
.venta h2 { margin: 0; font-size: 1.05rem; }
.venta kbd { font: 600 0.62rem ui-monospace, SFMono-Regular, Consolas, monospace; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; opacity: 0.55; margin-left: 6px; line-height: 1.4; }
.venta-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.venta-cliente { display: flex; gap: 4px; align-items: center; }
.venta-codigo { display: flex; align-items: center; gap: 8px; border: 2px solid var(--fg); border-radius: 10px; padding: 0 10px; background: var(--campo); margin-bottom: 8px; }
.venta-codigo:focus-within { border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 25%, transparent); }
.venta-codigo .icono-codigo .icono { width: 22px; height: 22px; color: var(--muted); display: block; }
.venta-codigo input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1.05rem; padding: 10px 2px; background: transparent; min-height: 0; }
.venta-codigo input::-webkit-search-cancel-button { display: none; }
.venta-codigo .cantidad-pendiente { font-size: 1rem; }
.venta-resultados { margin-bottom: 8px; max-height: 280px; overflow-y: auto; }
.venta-resultados .resultado { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.venta-resultados .resultado .num { margin-left: auto; font-variant-numeric: tabular-nums; }
.venta-tabla { width: 100%; table-layout: fixed; }
.venta-tabla th:nth-child(2) { width: 200px; }
.venta-tabla th:nth-child(3), .venta-tabla th:nth-child(4) { width: 96px; }
.venta-tabla th:nth-child(5) { width: 84px; }
.venta-tabla td, .venta-tabla th { padding: 6px 8px; vertical-align: middle; }
.venta-tabla td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.venta-tabla td:first-child { overflow-wrap: anywhere; }
.venta-tabla td.acciones-fila { white-space: nowrap; }
.venta-tabla tr.renglon-ultimo td { background: var(--hover); }
.venta-tabla .cant { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.venta-tabla .cant input.cantidad { width: 64px; text-align: right; min-height: 30px; padding: 3px 6px; font-variant-numeric: tabular-nums; }
.venta-tabla .nota-renglon { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.venta-tabla .nota-renglon.etiqueta { display: inline-block; margin-right: 4px; }
.poco { color: var(--error); font-weight: 700; }
.venta-pie { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); }
.venta-totales { display: grid; gap: 2px; min-width: 240px; }
.fila-total { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.fila-total.total-grande { font-size: 1.5rem; font-weight: 800; }
.venta-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.venta-acciones .boton.grande { font-size: 1.1rem; padding: 12px 22px; }
.venta-ultima { margin: 10px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.venta-catalogo { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
.venta-catalogo-cabecera { display: flex; gap: 6px; align-items: flex-start; min-width: 0; }
.venta-catalogo-cabecera .boton-modo { margin: 0; align-self: flex-start; }
.venta-catalogo .fila-cat.segunda, .venta-ventana .fila-cat.segunda { flex-wrap: wrap; overflow: visible; }
.venta-catalogo-cabecera .tabs-categorias { flex: 1; min-width: 0; }
.venta-catalogo .tab { padding: 8px 12px; font-size: 0.85rem; }
.venta-catalogo .tab[style*="--cat"] { border-left: 5px solid var(--cat); }
.venta-grilla { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.venta-grilla .producto { min-height: 70px; padding: 8px; }
.venta-grilla .producto-img { width: 32px; height: 32px; object-fit: contain; justify-self: start; }
.venta-lista tr.fila-producto { cursor: pointer; }
.venta-lista tr.fila-producto:hover td { background: var(--hover); }
.venta-lista td { padding: 6px 8px; }
.cobro-medios { display: grid; gap: 6px; }
.cobro-medio { display: grid; grid-template-columns: 1fr 160px; align-items: center; gap: 10px; margin: 0; }
.cobro-medio input { text-align: right; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.cobro-vuelto { margin: 0; align-self: end; font-size: 1.1rem; }
.cobro-resto { margin: 0; font-weight: 600; }
.cobro-resto.ok { color: var(--ok); }
.cobro-resto.alerta { color: var(--alerta); }
.selector-entrega label.boton { display: grid; text-align: center; gap: 2px; cursor: pointer; }
.selector-entrega label.boton input { position: absolute; opacity: 0; }
.selector-entrega label.boton:has(input:checked) { border-color: var(--primario); background: var(--tinte-rojo); }
.selector-entrega label.boton:has(input:disabled) { opacity: 0.5; }
/* Productos → Editar: artículo (códigos de barras y proveedores) */
.seccion-comercio { border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px 12px; }
.seccion-comercio summary { cursor: pointer; font-weight: 600; }
.seccion-comercio > div, .seccion-comercio > label, .seccion-comercio > fieldset { margin-top: 8px; }
.fila-codigo { display: grid; grid-template-columns: 1fr 80px 1fr auto auto; gap: 6px; align-items: center; margin-bottom: 4px; }
.fila-codigo:has([data-prov]) { grid-template-columns: 1fr 1fr 100px auto auto; }
.fila-codigo .check.chica { margin: 0; white-space: nowrap; font-weight: 400; }
/* Cuenta corriente */
.boton-etiqueta { cursor: pointer; font: inherit; font-size: 0.75rem; border: 0; }
.resumen-cuenta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.resumen-cuenta .dato { display: grid; }
.resumen-cuenta .dato small { color: var(--muted); }
.resumen-cuenta .dato strong { font-size: 1.1rem; }
.debe { color: var(--error); }
.a-favor { color: var(--web); }
.mov-sale { color: var(--error); }
.mov-entra { color: var(--ok); }
.filtros-ventas .filtros { align-items: end; }
.filtros-ventas .acciones.izquierda label { display: inline-grid; gap: 2px; }
tr.anulada td { text-decoration: none; }
/* Nueva Venta · modo Comanda: barra arriba (título, cliente, última venta, botón de modo), carrito a la izquierda y cobro a la derecha. */
.venta.modo-comanda { grid-template-columns: minmax(420px, 3fr) minmax(320px, 2fr); }
.venta-barra { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 36px; }
.venta-barra h2 { font-size: 1.2rem; }
.venta-barra .boton-modo { margin: 0 0 0 auto; }
.venta-barra .venta-ultima { margin: 0; }
.venta-cliente-arriba { display: flex; align-items: center; gap: 8px; }
.venta-herramientas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.venta-herramientas .venta-codigo { flex: 1 1 260px; margin-bottom: 0; }
.venta-herramientas .boton .icono { width: 16px; height: 16px; }
.venta-pie-comanda { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; }
.venta-checkout { position: sticky; top: 64px; display: grid; gap: 10px; align-content: start; }
.venta-checkout .venta-totales { min-width: 0; }
.cobro-panel { display: grid; gap: 8px; }
.cobro-panel h3 { margin: 4px 0 0; font-size: 1rem; }
.cobro-panel .cobro-medio { grid-template-columns: 1fr 150px; }
.cobro-nombre { font: inherit; font-weight: 600; text-align: left; background: none; border: 0; padding: 4px 0; color: inherit; cursor: pointer; }
.cobro-nombre:hover { color: var(--primario); text-decoration: underline; }
.cobro-paga { align-items: end; }
.cobro-panel .boton.grande.ancho { font-size: 1.15rem; padding: 14px 20px; width: 100%; margin-top: 4px; }
.alta-rapida { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.alta-rapida:not(:has(.alta-imagen)) { grid-template-columns: 1fr; }
.alta-imagen { object-fit: contain; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }
/* Ventana Agregar Producto (modo Comanda) */
.venta-ventana-cabecera { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.venta-ventana-cabecera .tabs-categorias { flex: 1 1 100%; }
.venta-ventana-cabecera .campo-buscar { flex: 1 1 260px; display: flex; align-items: center; gap: 6px; border: 2px solid var(--fg); border-radius: 8px; padding: 0 8px; background: var(--campo); }
.venta-ventana-cabecera .campo-buscar .icono { width: 18px; height: 18px; color: var(--muted); flex: none; }
.venta-ventana-cabecera .campo-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; padding: 8px 2px; min-height: 0; }
.venta-ventana .cuerpo-ventana > #productos-ventana { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: -4px; }
.venta-ventana .venta-grilla { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 1100px) {
  .venta, .venta.modo-comanda { grid-template-columns: 1fr; }
  .venta-catalogo, .venta-checkout { position: static; max-height: none; }
}
@media (max-width: 700px) {
  .venta-pie { grid-template-columns: 1fr; }
  .venta-acciones { justify-content: stretch; }
  .venta-acciones .boton.grande { flex: 1 1 100%; }
  .cobro-medio { grid-template-columns: 1fr 120px; }
  .fila-codigo, .fila-codigo:has([data-prov]) { grid-template-columns: 1fr 1fr; }
}