/* Avanti — estilos base. Colores y medidas como variables para mantenerlo consistente. */
:root {
  --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);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); line-height: 1.45; }
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;
}
/* Marca: logo + "AVANTI" en rojo siempre debajo. Tres tamaños. */
.marca { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.marca img { display: block; }
.marca-texto { color: var(--primario); font-weight: 800; letter-spacing: 0.14em; text-indent: 0.14em; }
.marca-chica img { width: 36px; height: 36px; }
.marca-chica .marca-texto { font-size: 0.62rem; 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: #fff; }
.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: #fff; }
.menu-grupo summary[aria-current="page"]::after { color: #ddd; }
.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; }
.usuario-nombre { color: var(--fg); font-weight: 600; text-decoration: none; }
.rol { color: var(--muted); font-size: 0.85rem; }

.contenedor { max-width: 1100px; 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; }
.alerta { background: #fff4d6; border: 1px solid #f0d58a; color: #5c4400; 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%; }
input, select, textarea {
  font: inherit; padding: 8px 10px; min-height: 38px; border: 1px solid var(--borde); border-radius: 6px; background: #fff; 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: #fff; }
.boton.primario:hover:not(:disabled) { background: var(--primario-hover); }
.boton.secundario { background: #fff; color: var(--fg); border-color: var(--borde); }
.boton.secundario:hover:not(:disabled) { background: var(--bg); }
.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; }
.tabla .num { width: 140px; }

.etiqueta { display: inline-block; font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.etiqueta.verde { background: #e3f4ea; color: var(--ok); }
.etiqueta.roja { background: #fbe4e2; color: var(--error); }
.etiqueta.amarilla { background: #fff4d6; color: var(--alerta); }
.etiqueta.gris { background: #eceae4; color: var(--muted); }

/* ---------- Diálogos y avisos ---------- */
.dialogo { --pad: 24px; 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: #e9e7e1; }
.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: #fff; background: var(--ok);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.2); z-index: 10;
}
.aviso-error { background: var(--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: #faf9f6; }
.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; }
fieldset.opciones { display: grid; gap: 6px; }
.dialogo.ancho { width: min(760px, calc(100vw - 32px)); }
.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: #fff; color: var(--primario); }
.chip-boton:hover { background: var(--primario); color: #fff; }

/* 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: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.3); }
.aviso-version .boton.secundario { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.5); }
@media (max-width: 1200px) { body:has(.toma-pedido) .aviso-version { bottom: 76px; } }

/* 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: #fff1c2; } }
.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: #fff8dc;
  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: #fff8dc; }
.aviso-recordatorios h2 { font-size: 1.6rem; color: #8a5a00; }
.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; }
.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: #e3f4ea; color: var(--ok); }
.chip.alerta { background: #fff4d6; color: var(--alerta); }
.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: #fff; }
.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; }
.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; }

/* ---------- 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: #b35c00; --estado-bg: #ffe9d1; }
.e-listo     { --estado: #1f5fa8; --estado-bg: #e0ecfb; }
.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; }
.boton-texto { background: none; border: 0; padding: 4px 6px; color: var(--primario); font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline; }
.chips-filtro { display: flex; gap: 6px; flex-wrap: wrap; }
.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: #fff; border-color: var(--fg); }
.chip-filtro.activo span { color: #ddd; }
.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: #e6f0fd; border-color: #9cc0f0; }
.etiqueta-web { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; color: #fff; background: #1f5fa8; padding: 1px 6px; border-radius: 4px; }
.pedido .notas.envio { background: #eef4ea; }
.f-curso { --estado: var(--fg); --estado-bg: #eceae4; }
.f-web { --estado: #1f5fa8; --estado-bg: #e0ecfb; }
.f-todos { --estado: var(--muted); --estado-bg: #f3f2ee; }
.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: #fff; }
.chip-filtro.activo span { color: rgb(255 255 255 / 0.8); }
.estado-actual { display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 700; padding: 4px 10px; border-radius: 6px;
  color: #fff; 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: #fbe4e2; 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: #fff; box-shadow: 0 4px 14px rgb(179 38 30 / 0.3); }
.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: #fff8e6; padding: 4px 8px; border-radius: 4px; }
.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: #fff; }
.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: #fff; }
.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: #fff; color: var(--fg); cursor: pointer; }
.subtab.activa { background: var(--fg); border-color: var(--fg); color: #fff; }

/* 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: #fff; color: var(--fg); cursor: pointer; }
.tab-buscar .icono { width: 20px; height: 20px; }
.tab-buscar.activa { background: var(--fg); border-color: var(--fg); color: #fff; }
.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: #fff; }
.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: #ffe58a; 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; }
.acciones.cliente-nuevo { justify-content: flex-end; margin-top: 2px; }
.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: #fff; 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 #8f8c84; border-radius: var(--radio); background: #fff; color: var(--fg); cursor: pointer; touch-action: manipulation;
}
.producto:hover { border-color: var(--fg); }
/* Ya está en el pedido: verde claro, para no cargarlo dos veces sin querer. */
.producto.en-pedido { background: #dcf3e2; border-color: #3f9a5e; }
.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: #fbe4e2; }

.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; }
.fila-pago input[readonly] { background: var(--bg); }
.vuelto { font-size: 1.05rem; }
.vuelto.negativo { color: var(--error); }

/* 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 solo para pantallas grandes. */
@media (max-width: 1200px) {
  .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; }
  .chip-filtro { white-space: nowrap; }
  .tecla { min-width: 36px; }
  .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: #fbe4e2; 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: #fff; 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: #e9e7e1; }
.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 .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; }
.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 .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); }
.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; }
  .boton-menu { display: block; }
  .menu, .usuario-actual { display: none; flex-basis: 100%; }
  body.menu-abierto .menu { display: flex; flex-direction: column; gap: 2px; }
  body.menu-abierto .usuario-actual { display: flex; justify-content: space-between; padding: 8px 0 4px; border-top: 1px solid var(--borde); }
  .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; }
}