/* ============================================================
   Café Berlanga · Pedidos PAR — hoja de estilos del prototipo
   Paleta oficial de marca (BERLANGA_brand assets):
   Terracota #9E2C05 · Ámbar Miel #FFBD68 · Marfil #FFFDEB
   ============================================================ */

:root {
  --terracota: #9E2C05;
  --terracota-oscuro: #7A2204;
  --ambar: #FFBD68;
  --ambar-claro: #FFE9C7;
  --marfil: #FFFDEB;
  --tinta: #3B1A0B;          /* texto sobre marfil, café muy oscuro */
  --alerta: #C0392B;
  --ok: #2E7D32;
  --radio: 10px;
  --sombra: 0 2px 8px rgba(122, 34, 4, 0.15); 
}

* { box-sizing: border-box; }

/* recorta el sobrante horizontal (elementos a 86vw/100vw que se pasan por el
   ancho del scrollbar) y evita la barra de scroll fantasma abajo en escritorio.
   'clip' en vez de 'hidden' para no romper la columna pegajosa de la tabla */
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  /* espacio para la barra de total fija + el área segura del home indicator */
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

h1, h2, h3, .fuente-retro {
  font-family: "Righteous", "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* ---------- Pantalla de login ---------- */
#pantalla-login {
  display: none; /* el JS la muestra si no hay sesión */
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--marfil);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
}
#pantalla-login .logo-login { width: min(520px, 86vw); }
#pantalla-login input {
  width: min(320px, 80vw);
  border: 2px solid var(--ambar);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 16px;
  text-align: center;
  background: #fff;
}
#pantalla-login input:focus { outline: none; border-color: var(--terracota); }

/* ---------- Cabecera con el sello de la casa ---------- */
.cabecera {
  position: relative; /* ancla del botón Salir */
  background: var(--marfil);
  padding: 20px 24px 12px;
  text-align: center;
  border-bottom: 6px solid var(--terracota);
}
/* salir: discreto, en tono café apagado */
#btn-salir {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: #B49A82;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
}
#btn-salir:hover { color: var(--terracota); }
.cabecera .logo-sello {
  width: min(320px, 70vw);
  display: block;
  margin: 0 auto;
}
.cabecera .estrellas {
  margin-top: 6px;
  color: var(--ambar);
  font-size: 14px;
  letter-spacing: 10px;
  user-select: none;
}
/* la tercera estrella es interactiva pero no lo aparenta */
#estrella-secreta { cursor: pointer; }
#estrella-secreta:hover { color: var(--terracota); }

.cabecera .lema {
  margin: 6px 0 0;
  font-size: 14px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--terracota);
  /* condensada bold, como el "CAFÉ - POSTRES - BAGELS" del sello */
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
}

/* ---------- Controles: sucursal, día, semana ---------- */
.controles {
  max-width: 1000px;
  margin: 18px auto 8px;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
}
.grupo-control label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--terracota);
  margin-bottom: 4px;
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
}
.pildoras { display: flex; gap: 6px; }
.pildora {
  border: 2px solid var(--terracota);
  background: transparent;
  color: var(--terracota);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Righteous", sans-serif;
  font-size: 14px;
  transition: background 0.15s;
}
.pildora:hover { background: var(--ambar-claro); }
.pildora.activa {
  background: var(--terracota);
  color: var(--marfil);
}
.grupo-control input[type="text"] {
  border: 2px solid var(--ambar);
  border-radius: var(--radio);
  padding: 8px 10px;
  background: #fff;
  font-size: 14px;
}

.aviso-demo {
  max-width: 1000px;
  margin: 0 auto 10px;
  padding: 8px 16px;
  font-size: 12.5px;
  color: var(--terracota-oscuro);
}

/* ---------- Tarjetas por proveedor ---------- */
main { max-width: 1000px; margin: 0 auto; padding: 0 16px; }

.tarjeta-proveedor {
  background: #fff;
  border: 1px solid var(--ambar);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 18px;
  overflow: hidden; /* respeta las esquinas redondeadas */
}
/* solo la tabla se desplaza horizontalmente */
.envoltura-tabla {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.tarjeta-proveedor > .titulo-proveedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--ambar);
  color: var(--terracota-oscuro);
  padding: 10px 16px;
  font-size: 17px;
}
.titulo-proveedor .subtotal { font-size: 15px; white-space: nowrap; margin-left: auto; }

/* "+ Producto" solo aparece al pasar el mouse sobre el título del proveedor */
.btn-agregar-producto {
  visibility: hidden;
  border: 2px solid var(--terracota-oscuro);
  background: transparent;
  color: var(--terracota-oscuro);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  font-family: "Righteous", sans-serif;
  cursor: pointer;
}
.titulo-proveedor:hover .btn-agregar-producto { visibility: visible; }
.btn-agregar-producto:hover { background: var(--marfil); }

table.tabla-productos {
  width: 100%;
  border-collapse: collapse;
}
.tabla-productos th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--terracota);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--ambar-claro);
}
.tabla-productos td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--ambar-claro);
  vertical-align: middle;
}
.tabla-productos tr:last-child td { border-bottom: none; }
.tabla-productos .celda-num { text-align: right; white-space: nowrap; }

/* columna Producto pegajosa: sigue visible al deslizar hacia los costos */
.tabla-productos th:first-child,
.tabla-productos td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  border-right: 2px solid var(--ambar-claro);
}
tr.sin-par td:first-child { background: #FFF4F0; }
tr.fila-nueva td:first-child { background: var(--ambar-claro); }

.tabla-productos input {
  width: 80px;
  padding: 6px 8px;
  border: 2px solid var(--ambar);
  border-radius: 6px;
  font-size: 14px;
  text-align: right;
  background: var(--marfil);
}
.tabla-productos input:focus {
  outline: none;
  border-color: var(--terracota);
  background: #fff;
}

/* Pido calculado vs. modificado a mano */
input.pido-modificado { border-color: var(--terracota); background: var(--ambar-claro); font-weight: 700; }

/* fila sin par definido: no se puede calcular */
tr.sin-par { background: #FFF4F0; }
.etiqueta-sin-par {
  font-size: 10px;
  background: var(--alerta);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* probable error de dedo: contó más de lo que cabe en par */
tr.sobre-par td:first-child::after {
  content: " ⚠ tengo > par";
  color: var(--alerta);
  font-size: 11px;
  font-weight: 600;
}
.unidad { color: #8a6a52; font-size: 12.5px; }

/* ---------- Barra fija de total ---------- */
.barra-total {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20; /* por encima de las celdas pegajosas de las tablas */
  background: var(--terracota);
  color: var(--marfil);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
.barra-total .total { font-size: 22px; }
.boton-principal {
  background: var(--ambar);
  color: var(--terracota-oscuro);
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-family: "Righteous", sans-serif;
  font-size: 15px;
  cursor: pointer;
}
.boton-principal:hover { background: var(--ambar-claro); }
.boton-barra {
  background: transparent;
  border: 2px solid var(--ambar);
  color: var(--marfil);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: "Righteous", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.boton-barra:hover { background: var(--terracota-oscuro); }

/* ---------- Historial ---------- */
.item-historial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--ambar);
  border-radius: var(--radio);
  padding: 10px 14px;
  margin-bottom: 8px;
}
.item-historial .datos { flex: 1; min-width: 180px; }
.item-historial .cuando { font-weight: 700; color: var(--terracota); }
.item-historial .detalle { font-size: 12.5px; color: #8a6a52; }
.boton-mini {
  border: 2px solid var(--terracota);
  background: transparent;
  color: var(--terracota);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: "Righteous", sans-serif;
}
.boton-mini:hover { background: var(--ambar-claro); }
.boton-mini.peligro { border-color: var(--alerta); color: var(--alerta); }
.boton-mini.peligro:hover { background: #FDECEA; }
#aviso-version {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--terracota);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  cursor: pointer;
}
#aviso-version button {
  pointer-events: none;   /* la barra completa maneja el clic; el botón es solo el indicador visual */
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 4px 16px;
  font-family: "Righteous", sans-serif;
  cursor: pointer;
}
#aviso-version button:hover { background: rgba(255, 255, 255, .15); }

.historial-vacio { color: #8a6a52; font-style: italic; }
.mes-historial { margin-bottom: 8px; }
.cabecera-mes {
  width: 100%;
  text-align: left;
  background: var(--ambar-claro);
  border: none;
  border-radius: var(--radio);
  padding: 9px 14px;
  font-family: "Righteous", sans-serif;
  font-size: 14px;
  color: var(--terracota);
  cursor: pointer;
}
.cabecera-mes::first-letter { text-transform: uppercase; }
.cabecera-mes::after { content: '▾'; float: right; transition: transform .15s; }
.mes-historial.abierto .cabecera-mes::after { transform: rotate(180deg); }
.items-mes { display: none; padding-top: 8px; }
.mes-historial.abierto .items-mes { display: block; }

/* ---------- Estadísticas de costos ---------- */
#pildoras-estadisticas { margin-bottom: 16px; flex-wrap: wrap; }
.tarjetas-resumen { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.tarjeta-resumen {
  flex: 1;
  min-width: 130px;
  background: var(--ambar-claro);
  border-radius: var(--radio);
  padding: 12px 10px;
  text-align: center;
}
.tarjeta-resumen .valor { font-size: 20px; font-family: "Righteous", sans-serif; color: var(--terracota); }
.tarjeta-resumen .etiqueta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--terracota-oscuro);
  margin-top: 2px;
}
.titulo-seccion-stats {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--terracota);
  margin: 0 0 8px;
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
}
.lista-barras { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.fila-barra { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.fila-barra .nombre-barra {
  width: 150px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fila-barra .pista-barra {
  flex: 1;
  background: var(--ambar-claro);
  border-radius: 6px;
  height: 16px;
  position: relative;
  overflow: hidden;
}
.fila-barra .relleno-barra {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--terracota);
  border-radius: 6px;
  transition: width 0.3s ease;
}
.fila-barra .valor-barra {
  width: 84px;
  flex-shrink: 0;
  text-align: right;
  font-weight: 600;
  color: var(--terracota-oscuro);
}

/* ---------- Consolidado por proveedor ---------- */
#pildoras-consolidado { margin-bottom: 14px; flex-wrap: wrap; }
.rango-fechas { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rango-fechas input {
  border: 2px solid var(--ambar);
  border-radius: var(--radio);
  padding: 8px;
  font-size: 14px;
  background: #fff;
}
.select-proveedor-consolidado {
  width: 100%;
  border: 2px solid var(--ambar);
  border-radius: var(--radio);
  padding: 9px 10px;
  font-size: 14px;
  background: #fff;
  margin-bottom: 14px;
}
.fuentes-consolidado { font-size: 12.5px; color: #8a6a52; margin: 0 0 14px; }
.bloque-consolidado { margin-bottom: 16px; }
.subtitulo-consolidado {
  font-size: 13px;
  color: var(--terracota-oscuro);
  margin: 10px 0 6px;
  font-weight: 700;
}
.linea-consolidado {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--ambar);
  border-radius: var(--radio);
  padding: 6px 10px;
  margin-bottom: 4px;
  font-size: 13.5px;
}
.linea-consolidado span:last-child { font-weight: 600; color: var(--terracota-oscuro); white-space: nowrap; }
.total-consolidado { text-align: right; color: var(--terracota); font-size: 18px; }

/* ---------- Captura en estadísticas (emergencias / ventas) ---------- */
#pildoras-tab-estadisticas { margin-bottom: 12px; flex-wrap: wrap; }
/* Avanzado: color distinto y separado a la derecha para que resalte */
.pildora-avanzado {
  margin-left: auto;
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--marfil);
}
.pildora-avanzado:hover { background: #241009; }
.pildora-avanzado.activa { background: #241009; border-color: #241009; color: var(--ambar); }

/* ---------- Gráficas avanzadas (SVG) ---------- */
.grafica-dona {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.svg-dona { width: 140px; height: 140px; flex-shrink: 0; }
.leyenda { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
.leyenda-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.leyenda-item .punto { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.leyenda-valor { margin-left: auto; font-weight: 600; color: var(--terracota-oscuro); white-space: nowrap; }
.svg-linea { width: 100%; max-width: 420px; height: auto; margin-bottom: 22px; display: block; }
.svg-linea .linea-ref { stroke: var(--ambar); stroke-width: 1; stroke-dasharray: 4 3; }
.svg-linea .etq-ref { fill: var(--ambar); font-size: 9px; text-anchor: end; }
.svg-linea .etq-punto { fill: var(--terracota); font-size: 10px; font-weight: 700; text-anchor: middle; }
.svg-linea .etq-eje { fill: #8a6a52; font-size: 9px; text-anchor: middle; }
.nota-captura { font-size: 12.5px; color: #8a6a52; margin: 0 0 10px; }
.form-captura { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.form-captura input, .form-captura select {
  flex: 1;
  min-width: 130px;
  border: 2px solid var(--ambar);
  border-radius: var(--radio);
  padding: 8px 10px;
  font-size: 14px;
  background: #fff;
}

/* ---------- Gráfica mensual (ventas vs insumos) ---------- */
.fila-mes { display: flex; align-items: center; gap: 10px; }
.fila-mes > .nombre-barra { width: 56px; flex-shrink: 0; font-size: 13px; }
.barras-mes { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.barras-mes .fila-barra { font-size: 11px; }
.barras-mes .nombre-barra { width: 56px; color: #8a6a52; }
.barras-mes .fila-barra:first-child .relleno-barra { background: var(--ok); }
.pct-mes { width: 44px; flex-shrink: 0; text-align: right; font-weight: 700; color: var(--terracota); }

/* ---------- Modal de pedido generado ---------- */
.modal-fondo {
  display: none;
  position: fixed; inset: 0;
  background: rgba(59, 26, 11, 0.6);
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-caja {
  background: var(--marfil);
  border-radius: var(--radio);
  border-top: 8px solid var(--terracota);
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  padding: 20px;
}
.modal-caja h2 { color: var(--terracota); margin-top: 0; }
.modal-caja pre {
  background: #fff;
  border: 1px dashed var(--terracota); /* guiño a la cuerda del sello */
  border-radius: var(--radio);
  padding: 14px;
  white-space: pre-wrap;
  font-size: 13.5px;
}
.acciones-modal { display: flex; flex-wrap: wrap; gap: 10px; justify-content: end; }
.modal-angosta { max-width: 420px; }
.modal-ancha { max-width: 760px; }
#pildoras-modo-proveedor { margin-bottom: 14px; }
/* el confirmar() debe quedar por encima de cualquier otro modal, aunque esté abierto desde uno */
#modal-confirmar { z-index: 60; }
.modal-angosta input[type="text"], .modal-angosta select {
  width: 100%;
  border: 2px solid var(--ambar);
  border-radius: var(--radio);
  padding: 10px;
  font-size: 15px;
  margin-bottom: 14px;
  background: #fff;
}
.boton-principal.peligro { background: var(--alerta); color: #fff; }
.boton-principal.peligro:hover { background: #A93226; }
.boton-secundario {
  background: transparent;
  border: 2px solid var(--terracota);
  color: var(--terracota);
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  font-family: "Righteous", sans-serif;
}

/* ---------- Lápiz de edición de catálogo ---------- */
.btn-editar {
  border: none;
  background: none;
  color: var(--terracota);
  cursor: pointer;
  font-size: 15px;
  visibility: hidden;
  padding: 0 4px;
}
tr:hover .btn-editar, .btn-editar.guardando { visibility: visible; }
.btn-editar.guardando { color: var(--ok); font-weight: 700; }
.inp-cat { width: 70px !important; text-align: left !important; }
.inp-cat.inp-nombre { width: 200px !important; }

/* ✕ para eliminar producto: misma lógica oculta que el lápiz */
.btn-borrar {
  border: none;
  background: none;
  color: var(--alerta);
  cursor: pointer;
  font-size: 14px;
  visibility: hidden;
  padding: 0 4px;
}
tr:hover .btn-borrar { visibility: visible; }
tr.fila-nueva td { background: var(--ambar-claro); }

/* ---------- Estampida de la ✳B al generar el pedido ----------
   Dos capas: el contenedor avanza lineal y la imagen rebota por su
   cuenta — así el movimiento se ve fluido y no "pillado". */
#galope {
  position: fixed;
  bottom: 72px;
  left: -140px;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
}
#galope img { width: 110px; display: block; }
#galope.galopando {
  visibility: visible;
  animation: cruzar 1.4s linear forwards;
}
#galope.galopando img { animation: rebote 0.28s ease-in-out infinite alternate; }
@keyframes cruzar {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 280px)); }
}
@keyframes rebote {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-16px) rotate(4deg); }
}

/* ---------- Hoja de impresión (PDF) ---------- */
#hoja-impresion { display: none; }
@media print {
  body > *:not(#hoja-impresion) { display: none !important; }
  body { padding: 0; background: #fff; }
  #hoja-impresion { display: block; font-size: 12px; }
  #hoja-impresion .sello-impresion { width: 200px; display: block; margin: 0 auto; }
  #hoja-impresion h1, #hoja-impresion h2 { color: var(--terracota); }
  #hoja-impresion table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
  #hoja-impresion th, #hoja-impresion td {
    border-bottom: 1px solid #ddd; padding: 4px 6px; text-align: left;
  }
  #hoja-impresion .sub-impresion { text-align: right; font-weight: 700; }
  #hoja-impresion .total-impresion { text-align: right; }
}

/* ---------- Toast de error ---------- */
#toast-error {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -80px);
  background: var(--alerta);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sombra);
  z-index: 400; /* por encima de todo, incluida la pantalla de login (300) */
  transition: transform 0.25s ease;
  pointer-events: none;
}
#toast-error.visible { transform: translate(-50%, 0); }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .tabla-productos th:nth-child(2), .tabla-productos td:nth-child(2),
  .tabla-productos th:nth-child(3), .tabla-productos td:nth-child(3) {
    display: none; /* en celular se ocultan Unidad y Mínimo */
  }
  .tabla-productos input { width: 64px; }
  .tabla-productos th:first-child,
  .tabla-productos td:first-child { max-width: 150px; overflow-wrap: break-word; }
  .inp-cat.inp-nombre { width: 90px !important; }
  .barra-total { flex-wrap: wrap; row-gap: 8px; }
  .boton-barra { padding: 8px 14px; font-size: 13px; }
  .fila-barra .nombre-barra { width: 90px; }
  .fila-barra .valor-barra { width: 66px; font-size: 12px; }
  /* gráfica mensual: sin estos anchos cortos la pista de la barra se queda en 0 */
  .fila-mes { gap: 6px; }
  .fila-mes > .nombre-barra { width: 34px; }
  .barras-mes .fila-barra { gap: 6px; }
  .barras-mes .fila-barra .nombre-barra { width: 48px; font-size: 10px; }
  .barras-mes .fila-barra .valor-barra { width: 58px; font-size: 10px; }
  .pct-mes { width: 34px; font-size: 13px; }
}