/* Los colores de marca (--primario, --primario-texto, --acento) vienen de config/<TENANT>.php */
:root {
  /* Marca del logo: café y kraft (el primario viene de config/<TENANT>.php) */
  --fondo: #F5EEE1;
  --superficie: #FFFCF6;
  --texto: #2D1F14;
  --suave: #6E5D4B;
  --borde: #E2D5BE;
  --borde-suave: #EEE5D4;
  --azul: #8B5A2B;
  --titulos: "Playfair Display", Georgia, serif;
  --ok: #1F7A4A;
  --ok-fondo: #E3F3E9;
  --alerta: #8A5A00;
  --alerta-fondo: #FBF1D9;
  --error: #A1322A;
  --error-fondo: #FBE6E3;
  --info: #1F5FA0;
  --info-fondo: #E6EEF8;
  --sugerida: #4B3D8F;
  --sugerida-fondo: #ECE8F8;
  --radio: 10px;
  --sombra: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1, h3 { font-family: var(--titulos); font-weight: 700; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.1rem; margin-top: 2rem; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
a { color: var(--azul); }
a:hover { color: var(--primario); }
.suave { color: var(--suave); font-size: .95rem; }

.aviso-demo {
  background: #EFE4CF;
  color: var(--suave);
  text-align: center;
  font-size: .78rem;
  padding: .4rem 1rem;
  border-bottom: 1px solid var(--borde);
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 16px;
  background: var(--primario);
  color: var(--primario-texto);
}
.marca { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.salir { display: flex; align-items: center; gap: .75rem; margin: 0; }
.quien { font-size: .9rem; opacity: .9; }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.centrado { min-height: calc(100vh - 2rem); display: grid; place-items: center; padding: 1.5rem 16px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
}
.login { width: 100%; max-width: 400px; }
.login-cabecera { text-align: center; margin-bottom: 1.25rem; }

.grilla { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .modulos { grid-template-columns: repeat(3, 1fr); } }

.unidad-cabecera { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.unidad.activa { border-left: 4px solid var(--primario); }
.unidad.inactiva { opacity: .65; }
.modulo { display: flex; flex-direction: column; }
.modulo .chip { align-self: flex-start; margin-top: auto; }

.chip {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--borde);
  color: var(--suave);
  white-space: nowrap;
}
.chip-ok { background: var(--ok-fondo); color: var(--ok); }

label { display: block; font-weight: 500; font-size: .95rem; margin-bottom: 1rem; }
input[type=text], input[type=password] {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .75rem .85rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: #fff;
}
input:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: transparent; }
fieldset { border: 1px solid var(--borde); border-radius: 10px; padding: 1rem 1rem 0; margin: 0 0 1rem; }
legend { font-weight: 600; padding: 0 .4rem; }

.btn {
  display: inline-block;
  border: 1px solid var(--primario);
  border-radius: 8px;
  padding: .7rem 1.1rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  background: var(--primario);
  color: var(--primario-texto);
  text-decoration: none;
  cursor: pointer;
}
.btn-bloque { display: block; width: 100%; }
.btn-sec { background: transparent; color: inherit; border-color: currentColor; }
.btn-sm { padding: .4rem .8rem; font-size: .85rem; }

.alerta { border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; font-size: .95rem; }
.alerta-error { background: var(--error-fondo); color: var(--error); }
.alerta-ok { background: var(--ok-fondo); color: var(--ok); }

.hola h1 { margin-bottom: .25rem; }

/* Navegación del panel */

/* Formularios del panel */
select, textarea, input[type=number], input[type=file] {
  display: block; width: 100%; margin-top: .35rem; padding: .75rem .85rem; font: inherit;
  border: 1px solid var(--borde); border-radius: 10px; background: #fff;
}
textarea { resize: vertical; }
.formulario { max-width: 720px; }
.dos-columnas { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }
label.check { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
label.check input { width: 20px; height: 20px; accent-color: var(--primario); }
.ayuda { display: block; color: var(--suave); font-size: .8rem; font-weight: 400; margin-top: .3rem; }
.error-campo { color: var(--error); font-size: .85rem; font-weight: 500; margin-left: .35rem; }
.acciones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: .5rem; }
.btn-sec-claro { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); }
.btn-sec-claro:hover { border-color: #CDBB9C; }
.foto-editor { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.foto-editor img { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; border: 1px solid var(--borde); }
.foto-editor label { flex: 1; min-width: 200px; }

/* Lista de productos */
.encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lista-productos { display: grid; gap: 10px; }
.fila-producto { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 12px; align-items: start; scroll-margin-top: 1rem; }
.fila-producto.pausado { opacity: .6; }
.fila-foto { display: block; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--borde-suave); }
.fila-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sin-foto { display: grid; place-items: center; height: 100%; font-size: .7rem; color: var(--suave); }
.fila-nombre { font-weight: 600; color: var(--texto); text-decoration: none; }
.fila-precio { font-weight: 700; margin-top: .15rem; }
.fila-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: .5rem; }
.fila-chips form { margin: 0; }
.fila-editar { grid-column: 2; justify-self: start; }
@media (min-width: 640px) {
  .fila-producto { grid-template-columns: 72px 1fr auto; align-items: center; }
  .fila-editar { grid-column: 3; }
}
.chip-btn { border: 0; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 600; }
.chip-off { background: var(--error-fondo); color: var(--error); }

/* Zonas */
.lista-zonas { display: grid; gap: 10px; }
.zona { display: grid; gap: 0 12px; grid-template-columns: 1fr; align-items: end; }
.zona label { margin-bottom: .75rem; }
.zona .btn { margin-bottom: .75rem; }
@media (min-width: 760px) { .zona { grid-template-columns: 1.3fr 1fr 1.3fr auto auto; } }
.zona.pausado { opacity: .65; }
.zona-nueva { border-style: dashed; }
@media (min-width: 760px) { .zona-nueva { grid-template-columns: 1.3fr 1fr 1.3fr auto; } }

/* Módulos de Inicio que ya funcionan */
a.modulo { color: inherit; text-decoration: none; }
a.modulo:hover { border-color: var(--primario); }
.modulo.pendiente { opacity: .6; }

/* Inventario */
input[type=date] { display: block; width: 100%; margin-top: .35rem; padding: .7rem .85rem; font: inherit; border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.acciones-cabecera { display: flex; gap: 8px; flex-wrap: wrap; }
.avisos { display: grid; gap: 8px; margin-bottom: 1rem; }
.aviso { border-radius: 10px; padding: .7rem 1rem; font-size: .92rem; }
.aviso-rojo { background: var(--error-fondo); color: var(--error); }
.aviso-ambar { background: var(--alerta-fondo); color: var(--alerta); }
.chip-ambar { background: var(--alerta-fondo); color: var(--alerta); }
a.fila-inventario { color: inherit; text-decoration: none; grid-template-columns: 56px 1fr auto; align-items: center; }
a.fila-inventario:hover { border-color: var(--primario); }
.fila-inventario .fila-foto { width: 56px; height: 56px; }
.fila-inventario .fila-datos { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.stock-numero { text-align: right; line-height: 1.1; }
.stock-numero strong { display: block; font-size: 1.5rem; }
.stock-numero.rojo strong { color: var(--error); }
.tabla-scroll { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 600; background: #FBF6EC; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .nowrap { white-space: nowrap; }
.tabla tr.apagado td { color: var(--suave); }
.verde { color: var(--ok); }
.rojo { color: var(--error); }
.segmentado { display: flex; gap: 1.25rem; flex-wrap: wrap; padding-bottom: .5rem; }
.segmentado label { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; }
.segmentado input { accent-color: var(--primario); width: 18px; height: 18px; }
.inicio-alertas { display: grid; gap: 8px; margin-top: 1rem; }
.inicio-alertas a { color: inherit; }

/* Totales y WhatsApp (catálogo y panel) */
.totales { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 1rem 0; }
.totales dt, .totales dd { margin: 0; }
.totales dd { text-align: right; }
.totales .total { font-weight: 700; font-size: 1.15rem; padding-top: .35rem; border-top: 1px solid var(--borde); }
.btn-whatsapp { background: #1F8F4E; color: #fff; }

/* Pedidos */
.bloque { margin-bottom: 12px; }
.bloque h3 { margin-bottom: .75rem; }
.item-fila { display: grid; grid-template-columns: 1fr 72px auto 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.item-fila select, .item-fila input { margin-top: 0; }
.item-fila input[type=number] { padding: .75rem .5rem; text-align: center; }
.item-fila.excede select, .item-fila.excede input { border-color: var(--error); background: var(--error-fondo); }
.item-subtotal { font-weight: 600; min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.item-quitar { border: 0; background: none; font-size: 1.5rem; color: var(--suave); cursor: pointer; }
@media (max-width: 520px) {
  .item-fila { grid-template-columns: 1fr 64px 32px; }
  .item-fila select { grid-column: 1 / -1; }
  .item-subtotal { grid-column: 1; text-align: left; grid-row: 2; }
}
.pestanas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { flex: none; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); text-decoration: none; font-size: .88rem; }
.pestanas a span { color: var(--suave); margin-left: .2rem; }
.pestanas a.activo { background: var(--primario); color: #fff; border-color: var(--primario); }
.pestanas a.activo span { color: #ddd; }
.buscador { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.buscador input[type=search] { flex: 1; padding: .65rem .85rem; font: inherit; border: 1px solid var(--borde); border-radius: 10px; }
.lista-pedidos { display: grid; gap: 8px; }
.fila-pedido { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; color: inherit; text-decoration: none; padding: 12px 14px; }
.fila-pedido:hover { border-color: var(--primario); }
.fp-codigo { font-weight: 700; font-size: .85rem; color: var(--suave); }
.fp-cliente, .fp-total { display: flex; flex-direction: column; }
.fp-total { text-align: right; font-weight: 700; }
.fp-total .suave { font-weight: 400; font-size: .8rem; }
.fila-pedido .estado { grid-column: 2; grid-row: 1; justify-self: end; }
@media (min-width: 760px) {
  .fila-pedido { grid-template-columns: 90px 1fr 160px 150px; align-items: center; }
  .fila-pedido .estado { grid-column: auto; grid-row: auto; }
}
.estado { display: inline-block; font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.estado-recibido { background: var(--info-fondo); color: var(--info); }
.estado-pago_por_validar { background: var(--alerta-fondo); color: var(--alerta); }
.estado-pagado { background: var(--ok-fondo); color: var(--ok); }
.estado-en_preparacion { background: #CFFAFE; color: #155E75; }
.estado-despachado { background: var(--sugerida-fondo); color: var(--sugerida); }
.estado-entregado { background: #D1FAE5; color: #065F46; }
.estado-cancelado { background: var(--borde); color: var(--suave); }
h1 .estado { font-size: .8rem; }
.pedido-grid { display: grid; gap: 12px; }
@media (min-width: 900px) { .pedido-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.tabla-simple td { padding: .45rem 0; }
.mensaje { white-space: pre-wrap; font: inherit; font-size: .9rem; background: #F7F0E3; border-radius: 10px; padding: .85rem 1rem; margin: 0 0 .75rem; }
.acciones-izq { justify-content: flex-start; }
.validar { border: 2px solid #E3C77A; }
.comprobante { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid var(--borde); margin: .5rem 0 1rem; }
.btn-validar { background: var(--ok); color: #fff; }
.btn-rechazar { background: var(--error); color: #fff; }
details.rechazo summary { cursor: pointer; color: var(--suave); margin: .75rem 0 .25rem; }
details.rechazo form { margin-top: .75rem; }
.historial { list-style: none; padding: 0; margin: 0 0 1rem; }
.historial li { padding: .5rem 0 .5rem 1rem; border-left: 2px solid var(--borde); margin-left: .25rem; }
.historial li .suave { display: block; font-size: .8rem; }
.img-pago { width: 160px !important; height: auto !important; object-fit: contain !important; }
.aviso-azul { background: var(--info-fondo); color: var(--info); }
.aviso-verde { background: var(--ok-fondo); color: var(--ok); }
a.aviso { text-decoration: none; }

/* WhatsApp: simulador */
.fila-form { display: flex; gap: 8px; flex-wrap: wrap; }
.fila-form input { flex: 1; min-width: 180px; margin-top: 0; }
.simulador { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .simulador { grid-template-columns: 1fr 1fr; } }
.telefono { display: flex; flex-direction: column; height: 620px; border-radius: 22px; overflow: hidden; border: 1px solid var(--borde); background: #E4E8ED; box-shadow: var(--sombra); }
.telefono.ocupado { opacity: .75; }
.tel-cabecera { display: flex; align-items: center; gap: 8px; padding: .7rem .9rem; background: #075E54; color: #fff; font-size: .9rem; }
.tel-cabecera span { opacity: .85; }
.tel-numero { flex: 1; min-width: 0; padding: .3rem .5rem; border-radius: 8px; border: 0; font: inherit; font-size: .85rem; }
.tel-reiniciar { margin-left: auto; background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 8px; padding: .3rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; }
.tel-chat { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.burbuja { max-width: 85%; padding: .5rem .65rem .35rem; border-radius: 10px; font-size: .9rem; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.burbuja.bot { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.burbuja.yo { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 2px; }
.burbuja.fallo { outline: 2px solid var(--error); }
.burbuja .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja img { display: block; max-width: 220px; max-height: 260px; border-radius: 8px; margin-bottom: .3rem; }
.burbuja .hora { display: block; text-align: right; font-size: .68rem; color: #667781; margin-top: .15rem; }
.burbuja .nota { font-size: .72rem; color: var(--alerta); margin-top: .25rem; }
.opciones { display: grid; gap: 4px; margin-top: .45rem; border-top: 1px solid #eee; padding-top: .4rem; }
.opciones button { border: 0; background: none; color: #027EB5; font: inherit; font-weight: 600; padding: .35rem; cursor: pointer; border-radius: 6px; text-align: center; }
.opciones button:hover { background: #F0F9FF; }
.opciones.lista button { text-align: left; font-weight: 500; color: var(--texto); }
.opciones button small { display: block; color: var(--suave); font-weight: 400; font-size: .75rem; }
.tel-escribir { display: flex; gap: 6px; align-items: center; padding: 8px; background: #F0F2F5; }
.tel-texto { flex: 1; padding: .6rem .8rem; border: 0; border-radius: 20px; font: inherit; }
.tel-adjuntar { margin: 0; cursor: pointer; font-size: 1.2rem; padding: 0 .25rem; }
.checklist { list-style: none; padding: 0; margin: 0 0 .75rem; }
.checklist li { padding: .3rem 0 .3rem 1.6rem; position: relative; }
.checklist li::before { content: '○'; position: absolute; left: 0; color: var(--suave); }
.checklist li.ok::before { content: '✓'; color: var(--ok); font-weight: 700; }
code { background: #F7F0E3; padding: .1rem .35rem; border-radius: 5px; font-size: .85em; overflow-wrap: anywhere; }

/* Conversaciones */
.fila-conversacion { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; color: inherit; text-decoration: none; padding: 12px 14px; }
.fila-conversacion:hover { border-color: var(--primario); }
.fc-quien { display: flex; flex-direction: column; }
.fc-ultimo { grid-column: 1 / -1; font-size: .88rem; }
.fc-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; grid-column: 2; grid-row: 1; }
@media (min-width: 760px) {
  .fila-conversacion { grid-template-columns: 220px 1fr 140px; align-items: center; }
  .fc-ultimo { grid-column: auto; }
  .fc-estado { grid-column: auto; grid-row: auto; }
}
.telefono.bandeja { height: 560px; max-width: 760px; }
.cifras { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin: .75rem 0; }
@media (min-width: 760px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifras div { display: flex; flex-direction: column; background: #F7F0E3; border-radius: 10px; padding: .75rem; }
.cifras strong { font-size: 1.15rem; overflow-wrap: anywhere; }
.costo-lote { display: flex; gap: 4px; justify-content: flex-end; margin: 0; }
.costo-lote input { width: 96px; padding: .35rem .5rem; margin: 0; text-align: right; font: inherit; font-size: .85rem; border: 1px solid var(--borde); border-radius: 8px; }
.costo-lote input.falta { border-color: #E3C77A; background: #FDF8EC; }

/* Tablero */
.filtros-tablero { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.filtros-tablero .pestanas { margin: 0; }
.filtros-tablero .rango { display: flex; gap: 6px; align-items: center; }
.filtros-tablero .rango input[type=date] { width: auto; margin: 0; padding: .45rem .6rem; font-size: .88rem; }
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: flex; flex-direction: column; gap: 2px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; color: inherit; text-decoration: none; min-width: 0; }
a.kpi:hover { border-color: var(--primario); }
.kpi-hero { grid-column: 1 / -1; }
.kpi-label { font-size: .7rem; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kpi-valor { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-hero .kpi-valor { font-size: 3rem; }
.kpi-nota { font-size: .8rem; color: var(--suave); }
.kpi-atencion { border-color: #E3C77A; background: #FDF8EC; }
.grafica { position: relative; }
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-rejilla { stroke: var(--borde); stroke-width: 1; }
.g-base { stroke: #CDBB9C; stroke-width: 1; }
.g-eje { fill: var(--suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.g-valor { fill: var(--texto); font-size: 12px; font-weight: 600; }
.g-barra { fill: var(--primario); }
.g-hit { fill: transparent; }
.g-dia.activo .g-hit { fill: rgba(45, 31, 20, .05); }
.g-tooltip { position: absolute; transform: translateX(-50%); background: var(--texto); color: #fff; font-size: .8rem; padding: .35rem .6rem; border-radius: 8px; pointer-events: none; white-space: nowrap; }
.tabla-dias summary { cursor: pointer; color: var(--suave); font-size: .88rem; margin-top: .5rem; }
.tabla tfoot th { border-top: 2px solid var(--borde); border-bottom: 0; color: var(--texto); font-size: .9rem; text-transform: none; letter-spacing: 0; background: transparent; }
@media (max-width: 640px) {
  /* En celular el SVG se encogía a la mitad: ancho mínimo legible y desplazamiento lateral. */
  .grafica { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .grafica svg { min-width: 600px; }
  .g-eje { font-size: 13px; }
  .g-valor { font-size: 14px; }
  .kpi-hero .kpi-valor { font-size: 2.4rem; }
}

/* Despacho */
.despacho-grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .despacho-grid { grid-template-columns: 1fr 320px; align-items: start; } }
.despacho-grid h2:first-child { margin-top: 0; }
.zona-titulo { margin-bottom: .5rem; }
.fila-despacho { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: .65rem 0; border-top: 1px solid var(--borde); font-weight: 400; margin: 0; cursor: pointer; }
.fila-despacho input, .zona-titulo input { width: 20px; height: 20px; accent-color: var(--primario); margin-top: 2px; }
.fd-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fd-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.acciones-despacho { display: grid; gap: 10px; position: sticky; bottom: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.acciones-despacho select { margin-top: 0; }
.acciones-despacho .fila-form select { flex: 1; }
.ruta-resumen { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: .6rem 0; border-top: 1px solid var(--borde); }
.ruta-resumen div { display: flex; flex-direction: column; }
.lista-ruta { display: grid; gap: 10px; }
.parada-cabecera { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; }
.parada-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--texto); color: #fff; font-weight: 700; }
.parada-cobro { text-align: right; font-size: .85rem; color: var(--suave); }
.parada-cobro.cobrar { color: var(--alerta); }
.parada-cobro strong { font-size: 1.1rem; }
.parada-items { margin: .6rem 0 .8rem 44px; padding: 0; list-style: none; }
.parada-items li { padding: .1rem 0; }
.novedad summary { margin-top: .6rem; }
@media print {
  .barra, .lateral, .aviso-demo, .no-imprimir, .acciones-despacho, .despacho-grid > section { display: none !important; }
  .despacho-grid { display: block; }
  body { background: #fff; }
  .tarjeta { box-shadow: none; break-inside: avoid; }
}
.buscador { flex-wrap: wrap; }
.buscador input[type=date] { width: auto; margin: 0; padding: .55rem .6rem; font-size: .88rem; }

/* Ayuda */
.indice-ayuda { flex-wrap: wrap; }
.pasos { margin: 0; padding-left: 1.25rem; display: grid; gap: .6rem; }
.lista-check { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
#como details { border-top: 1px solid var(--borde); padding: .6rem 0; }
#como summary { cursor: pointer; font-weight: 600; }
#como details p { margin: .5rem 0 0; color: var(--suave); }
.guion { margin: 0; padding-left: 1.4rem; display: grid; gap: .25rem; }
.guion label.check { font-weight: 400; margin: 0; align-items: flex-start; }
.guion label.check input { margin-top: 3px; flex: none; }
section[id] { scroll-margin-top: 1rem; }

/* Compras */
.formulario-ancho { max-width: 960px; }
.compra-linea { display: grid; grid-template-columns: 150px 1fr 76px 80px 120px 32px; gap: 8px; align-items: center; margin-bottom: 10px; }
.compra-linea select, .compra-linea input { margin-top: 0; }
.compra-linea .l-total { text-align: right; }
.compra-linea .l-ayuda { grid-column: 2 / -1; margin-top: -4px; }
.compra-linea .l-ayuda:empty { display: none; }
.compra-linea input[readonly] { background: var(--fondo); color: var(--suave); }
@media (max-width: 720px) {
  .compra-linea { grid-template-columns: 1fr 1fr 32px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
  .compra-linea .l-categoria { grid-column: 1 / 3; }
  .compra-linea .item-quitar { grid-column: 3; grid-row: 1; }
  .compra-linea .l-descripcion { grid-column: 1 / -1; }
  .compra-linea .l-total { grid-column: 1 / -1; }
  .compra-linea .l-ayuda { grid-column: 1 / -1; margin-top: 0; }
}
.cat-insumo { background: var(--alerta-fondo); color: var(--alerta); }
.cat-embalaje { background: #E0F2FE; color: #075985; }
.cat-gasto { background: #F3E8FF; color: #6B21A8; }
.cat-activo { background: #E4E8ED; color: #3A4452; }
.recortar { max-width: 32ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ambar { color: var(--alerta); }
.pestanas-sec a { font-size: .82rem; padding: .3rem .7rem; }
.pago-proveedor { border-top: 1px solid var(--borde); margin-top: 1rem; padding-top: 1rem; }
.pago-proveedor h4 { margin: 0 0 .5rem; }
.btn-peligro { background: var(--error); border-color: var(--error); color: #fff; }
.kpi-valor small { font-size: .55em; color: var(--suave); font-weight: 500; }
details.tarjeta > summary { cursor: pointer; font-weight: 600; }
details.tarjeta[open] > summary { margin-bottom: .75rem; }

/* Listas de precio */
.input-precio { width: 8.5rem; text-align: right; margin: 0; padding: .45rem .6rem; }
.barra-pct { height: 4px; background: var(--borde); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.barra-pct span { display: block; height: 100%; background: var(--primario); border-radius: 2px; }
.tablero-dos { gap: 0 12px; align-items: start; }

/* Recetas y costos */
.cadena { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.cadena span { display: flex; flex-direction: column; }
.cadena small { color: var(--suave); font-size: .78rem; }
.cadena .flecha { font-size: 1.3rem; color: var(--suave); }
.tipo-terminado { background: var(--ok-fondo); color: #166534; }
.tipo-intermedio { background: var(--sugerida-fondo); color: var(--sugerida); }
.tipo-insumo { background: var(--alerta-fondo); color: var(--alerta); }
.receta-grid { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .receta-grid { grid-template-columns: minmax(0, 1fr) 320px; } .receta-grid aside { position: sticky; top: 12px; } }
.comp-fila { display: grid; grid-template-columns: 1fr 96px 36px 96px 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.comp-fila select, .comp-fila input { margin: 0; }
.comp-fila .c-cant { text-align: right; }
.comp-fila .c-valor { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .comp-fila { grid-template-columns: 1fr 80px 32px; } .comp-fila select { grid-column: 1 / -1; } .comp-fila .c-valor { grid-column: 1 / 3; text-align: left; } }
.input-corto { width: 6.5rem; display: inline-block; margin: 0; text-align: right; padding: .45rem .6rem; }
.resumen-costo .kpi-valor { font-size: 2rem; display: block; margin: .2rem 0 .5rem; }
.lista-versiones { list-style: none; padding: 0; margin: .5rem 0 0; }
.lista-versiones li { padding: .4rem 0; border-top: 1px solid var(--borde); }

/* Gastos */
.confirmar-rec { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.confirmar-rec .input-corto { width: 7.5rem; }
.filtros-gastos { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Producción */
.pasos-op { display: flex; gap: 14px; list-style: none; padding: 0; margin: 0; counter-reset: paso; font-size: .9rem; color: var(--suave); }
.pasos-op li { counter-increment: paso; display: flex; align-items: center; gap: 6px; }
.pasos-op li::before { content: counter(paso); width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--borde); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; }
.pasos-op li.activo { color: var(--texto); font-weight: 600; }
.pasos-op li.activo::before { background: var(--texto); color: #fff; border-color: var(--texto); }
.pasos-op li.hecho::before { content: '✓'; background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-fondo); }
.tabla tr.fila-falta td { background: #FFF8F7; }
.acciones-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acciones-inline form { margin: 0; }
.atajos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Reposición */
.sugerida { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 0; border-top: 1px solid var(--borde); }
.sugerida:first-of-type { border-top: 0; }
.acciones-cabecera form { margin: 0; }
.sugerida .acciones-inline { margin-top: 0; align-items: center; }
.sugerida .acciones-inline form { display: flex; gap: 6px; align-items: center; }
.sugerida .acciones-inline input[type=text] { display: inline-block; width: 9rem; margin: 0; padding: .45rem .6rem; text-align: left; }
.tabla-simple th, .tabla-simple td { padding-right: .9rem; }

/* Tablero · cierre de mes */
.kpi-alerta { border-color: #EFC2BC; }
.cierre-grid { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; margin-bottom: 12px; }
@media (min-width: 1000px) { .cierre-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); } }
.cierre-grid > .tarjeta, .cierre-lado > .tarjeta { margin-bottom: 0; }
.cierre-lado { display: grid; gap: 12px; }
.estado-resultados .tabla td:nth-child(4) { font-size: .85rem; }
.fila-total td { background: #F7F0E3; font-weight: 600; }
.tarjeta-destacada { border: 2px solid var(--texto); }
.tarifas, .lista-valores { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: .75rem 0; }
.tarifas dt, .lista-valores dt { color: var(--suave); }
.tarifas dd, .lista-valores dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.lista-valores .total { border-top: 1px solid var(--borde); padding-top: 8px; color: var(--texto); font-weight: 600; }
.g-barra-suave { fill: #E3CFA6; }
.g-barra-alerta { fill: var(--error); opacity: .55; }
.g-estandar { stroke: var(--texto); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .6; }
.subtitulo-tablero { font-size: 1.05rem; margin: 1.25rem 0 .6rem; }

/* Inicio: tres columnas de pendientes */
.hola { align-items: flex-start; }
.inicio-columnas { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 1rem; align-items: start; }
@media (min-width: 900px) { .inicio-columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inicio-col { padding: 0; overflow: hidden; margin-bottom: 0; }
.inicio-col-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.inicio-col-cabecera h3 { margin: 0; }
.inicio-col .inicio-item:first-of-type { margin-top: 12px; }
.inicio-col .inicio-item:last-child { margin-bottom: 12px; }
.inicio-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 8px 12px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; color: inherit; text-decoration: none; font-size: .92rem; }
.inicio-item:hover { border-color: var(--primario); }
.inicio-accion { color: var(--primario); font-weight: 600; white-space: nowrap; }
.inicio-vacio { padding: 14px 16px; margin: 0; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--suave); }
.punto-azul { background: var(--info); }
.punto-verde { background: var(--ok); }
.punto-rojo { background: var(--error); }
.punto-ambar { background: #B7860B; }
.punto-morado { background: var(--sugerida); }
@media (min-width: 1100px) { .grilla.unidades { grid-template-columns: repeat(4, 1fr); } }

/* Barra como en los mockups: sello, grupos del menú */
.sello { width: 30px; height: 30px; border-radius: 7px; background: var(--acento); color: var(--primario); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; }

.chip-sug { background: var(--sugerida-fondo); color: var(--sugerida); }
.chip-info { background: var(--info-fondo); color: var(--info); }
.inicio-accion { color: var(--azul); }
.inicio-item:hover { border-color: var(--azul); }

/* Menú lateral por módulos */
.app { display: flex; align-items: flex-start; min-height: 100vh; }
.app-cuerpo { flex: 1; min-width: 0; }
.lateral { position: sticky; top: 0; flex: none; width: 232px; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--primario); color: #fff; scrollbar-width: thin; }
.lateral-marca { padding: 16px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lateral-nav { flex: 1; padding: 6px 10px 12px; }
.lateral-grupo { display: flex; flex-direction: column; gap: 1px; padding-top: 10px; }
.lateral .grupo { color: #B59A73; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 6px 10px 4px; }
.lateral a:not(.marca) { display: block; color: #E9DCC2; text-decoration: none; font-size: .9rem; font-weight: 500; padding: .45rem .7rem; border-radius: 7px; border-left: 3px solid transparent; }
.lateral a:not(.marca):hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lateral a.activo { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: var(--acento); font-weight: 600; }
.lateral-pie { padding: 10px 10px 16px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 1px; }
.lateral-pie .salir { justify-content: space-between; padding: 10px 10px 0; }
.lateral-pie .quien { color: #E9DCC2; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-movil { display: none; }
.velo { position: fixed; inset: 0; background: rgba(45, 31, 20, .45); z-index: 40; }
@media (max-width: 899px) {
  .app { display: block; }
  .barra-movil { display: flex; justify-content: flex-start; gap: 14px; position: sticky; top: 0; z-index: 30; }
  .lateral { position: fixed; top: 0; left: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 24px rgba(0, 0, 0, .25); }
  .menu-abierto .lateral { transform: none; }
  .menu-abierto { overflow: hidden; }
}
.lateral summary.grupo { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; border-radius: 7px; padding: 8px 10px; font-size: .72rem; }
.lateral summary.grupo::-webkit-details-marker { display: none; }
.lateral summary.grupo::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; margin-right: 2px; }
.lateral details[open] > summary.grupo::after { transform: rotate(45deg); }
.lateral summary.grupo:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.lateral details[open] > summary.grupo { color: #fff; }
.lateral details.lateral-grupo { padding-top: 4px; }
.lateral details.lateral-grupo > a { margin-left: 6px; }
.lateral details.lateral-grupo { display: block; }

/* Compra: insumos de nombre parecido */
.compra-linea .l-parecidos { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: -4px; padding: 8px 10px; border-radius: 8px; background: var(--alerta-fondo); color: var(--alerta); font-size: .85rem; }
.compra-linea .l-parecidos .btn { color: var(--texto); }
.compra-linea .l-parecidos label.check { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--texto); }
.compra-linea .l-parecidos[hidden] { display: none; }

/* Manual */
.manual { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .manual { grid-template-columns: 220px minmax(0, 1fr); } }
.manual-indice { display: flex; flex-direction: column; gap: 2px; padding: 14px; font-size: .9rem; }
@media (min-width: 1000px) { .manual-indice { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } }
.manual-indice .grupo-indice { margin-top: 10px; color: var(--suave); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.manual-indice a { text-decoration: none; padding: 3px 6px; border-radius: 6px; }
.manual-indice a:hover { background: var(--fondo); }
.manual-grupo { margin: 8px 0 10px; }
.manual-grupo:first-child { margin-top: 0; }
.manual-capitulo { margin-bottom: 16px; scroll-margin-top: 16px; }
.manual-capitulo h3 { font-size: 1.25rem; margin: 0; }
.manual-capitulo h4 { margin: 1rem 0 .4rem; font-size: .95rem; }
.manual-para { font-size: 1rem; margin-top: .5rem; }
.manual-pasos { margin: 0; padding-left: 1.3rem; display: grid; gap: 6px; }
.manual-consejos { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--info-fondo); font-size: .9rem; }
.manual-consejos p { margin: 0; }
.manual-consejos p + p { margin-top: 4px; }
.manual-figura { margin: 16px 0 0; }
.manual-figura img { display: block; width: 100%; height: auto; border: 1px solid var(--borde); border-radius: 8px; }
.manual-figura figcaption { margin-top: 6px; color: var(--suave); font-size: .85rem; }
.manual-arriba { margin: 12px 0 0; font-size: .85rem; }

/* Tabla compacta (recetas y costos): cabe completa sin desplazarse */
.tabla-compacta { font-size: .85rem; }
.tabla-compacta th, .tabla-compacta td { padding: .4rem .55rem; vertical-align: middle; }
.tabla-compacta th { font-size: .68rem; white-space: nowrap; }
.tabla-compacta .col-producto { min-width: 10rem; }
.tabla-compacta .col-producto a { color: inherit; text-decoration: none; }
.tabla-compacta .col-producto a:hover { color: var(--azul); text-decoration: underline; }
.tabla-compacta .recortar { display: block; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-compacta .chip { font-size: .7rem; }
.tabla-compacta .suave, .tabla-compacta .recortar { font-size: inherit; }

/* Ocultar / mostrar el menú lateral en computador */
.lateral-marca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lateral-ocultar { flex: none; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 7px; background: transparent; color: #E9DCC2; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.lateral-ocultar:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@media (min-width: 900px) {
  .menu-oculto .lateral { display: none; }
  .menu-oculto .barra-movil { display: flex; justify-content: flex-start; gap: 14px; position: sticky; top: 0; z-index: 30; }
}

/* Logo de la marca */
.marca-logo { display: block; height: 44px; width: auto; }
.barra-movil .marca-logo { height: 36px; }
.login-logo { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto; }