/* Emporio La Panchita — sistema "rótulo de feria"
   El lenguaje viene del mundo real del negocio: la caja de verdura rotulada, la
   etiqueta de precio del puesto, la lista de packing. Todo va en su celda,
   separado por líneas y no por sombras; el color es plano y viene del logo
   (naranja canasta, verde palta, rojo tomate, amarillo limón). Sin degradados,
   sin esquinas redondeadas, sin brillos: el orden ES el diseño. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root {
  --font-rotulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;

  /* --- tintas: marfil y marrón tinta, no blanco y negro --- */
  --tinta: #2A2016;          /* el marrón oscuro del logotipo */
  --tinta-70: #5B4B3A;
  --gris: #8A7B69;
  --linea: #DED5C6;          /* filete fino, cálido */
  --papel: #FFFDF8;          /* marfil de trabajo */
  --fondo: #F2EEE4;          /* lino */

  /* --- color de sistema: sacado del propio logo --- */
  --ambar: #F08400;          /* la canasta: lo que hay que hacer ahora */
  --ambar-osc: #C06A00;
  --ambar-piel: #FBEBD2;
  --verde: #46701C;          /* la hoja: hecho, pagado, entregado */
  --verde-piel: #E6EDD8;
  --limon: #C89000;          /* pendiente, ojo con esto */
  --limon-piel: #F8EDCE;
  --tomate: #A83030;         /* el tomate: pérdida, error, cancelado */
  --tomate-piel: #F4E0DC;
  --naranja: var(--ambar);
  --naranja-osc: var(--ambar-osc);
  --naranja-piel: var(--ambar-piel);

  /* --- medidas: escalón de 4px, radio cero --- */
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0;
  --sh-sm: none; --sh-md: none; --sh-lg: 0 24px 48px rgba(22,21,15,.22);

  /* --- alias que usan los HTML y el JS existentes --- */
  --marron: var(--tinta);
  --marron-suave: var(--tinta-70);
  --marron-tinta: var(--tinta);
  --marron-2: var(--tinta-70);
  --marron-claro: var(--tinta-70);
  --crema: var(--fondo);
  --crema-card: var(--papel);
  --crema-hueso: #E4E1D8;
  --crema-2: #E4E1D8;
  --dorado: var(--naranja);
  --dorado-osc: var(--naranja-osc);
  --dorado-2: var(--naranja-osc);
  --dorado-claro: var(--limon-piel);
  --verde-osc: #0E3F2C;
  --verde-claro: var(--verde-piel);
  --rojo-oferta: var(--tomate);
  --rojo: var(--tomate);
  --rojo-suave: var(--tomate-piel);
  --texto: var(--tinta);
  --borde: var(--linea);
  --ok: var(--verde);
  --sombra: none;
  --radio: 0;
  --tinta-pizarra: var(--tinta);
  --tiza: #F3F1EA;
  --font-display: var(--font-rotulo);
  font-family: var(--font-body);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

/* --- Rótulos: mayúscula condensada. Nombran, no decoran. --- */
h1, h2, h3, .rotulo {
  font-family: var(--font-rotulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--tinta);
  margin: 0 0 .5em;
  line-height: 1.05;
}
h1 { font-size: 34px; }
h2 { font-size: 27px; }
h3 { font-size: 19px; letter-spacing: .06em; }

/* Eyebrow: la etiqueta pequeña que va sobre un dato. */
.eyebrow {
  font-family: var(--font-rotulo); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--gris);
}

a { color: var(--ambar-osc); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tinta); }
.muted { color: var(--gris); }

/* Las cifras siempre tabulares: las columnas de números tienen que cuadrar. */
.precio, .cifra {
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--tinta); letter-spacing: -.01em;
}

/* --- Botones: rectángulos con borde, en rótulo --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-rotulo); font-weight: 600; font-size: 15px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 9px 20px; border: 1px solid var(--tinta); border-radius: 0;
  background: var(--tinta); color: var(--papel);
  cursor: pointer; transition: background .12s, color .12s;
}
.btn:hover { background: var(--ambar); border-color: var(--ambar); color: var(--tinta); }
.btn:active { background: var(--ambar-osc); border-color: var(--ambar-osc); color: var(--papel); }
.btn:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.dorado { background: var(--ambar); border-color: var(--ambar); color: var(--tinta); }
.btn.dorado:hover { background: var(--tinta); border-color: var(--tinta); }
.btn.ghost { background: transparent; color: var(--tinta); border-color: var(--linea); }
.btn.ghost:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.btn.ok { background: var(--verde); border-color: var(--verde); }
.btn.ok:hover { background: var(--tinta); border-color: var(--tinta); }
.btn.danger { background: var(--tomate); border-color: var(--tomate); }
.btn.danger:hover { background: var(--tinta); border-color: var(--tinta); }
.btn.sm { padding: 5px 11px; font-size: 13.5px; }

/* --- Campos: cuadrados, con la línea de escritura marcada --- */
input, select, textarea {
  font-family: inherit; font-size: 15px; width: 100%;
  padding: 9px 12px; border: 1px solid var(--linea); border-radius: 0;
  background: var(--papel); color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--tinta); box-shadow: inset 0 -2px 0 var(--ambar);
}
input::placeholder { color: #A9A69C; }
label {
  font-family: var(--font-rotulo); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--gris);
  display: block; margin-bottom: 4px;
}
.field { margin-bottom: 14px; }

/* --- Fichas: el borde las separa, no la sombra --- */
.card {
  background: var(--papel);
  border: 1px solid var(--tinta);
  border-radius: 0; box-shadow: none;
  padding: 22px 24px;
}
.card h3 { padding-bottom: 10px; border-bottom: 1px solid var(--tinta); margin-bottom: 16px; }

/* --- Tablas: encabezado en negativo, columnas que cuadran --- */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
thead th {
  font-family: var(--font-rotulo); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em;
  background: none; color: var(--tinta-70);
  padding: 4px 10px 7px; text-align: left; border: 0; border-bottom: 1.5px solid var(--tinta);
}
td { padding: 11px 10px; border-bottom: 1px solid var(--linea); }
tbody tr:hover td { background: #FAF6EC; }
.right { text-align: right; }
td.right, th.right { font-variant-numeric: tabular-nums; }

/* --- Marcas de estado: banda de color a la izquierda, sin píldoras --- */
.chip {
  display: inline-block; font-family: var(--font-rotulo); font-weight: 600;
  font-size: 13px; text-transform: uppercase; letter-spacing: .07em;
  padding: 1px 9px; border-radius: 0; border-left: 2px solid var(--gris);
  background: none; color: var(--tinta-70);
}
.chip.pendiente { border-left-color: var(--limon); color: #8A6300; }
.chip.confirmado { border-left-color: var(--tinta); color: var(--tinta); }
.chip.preparado { border-left-color: var(--ambar); color: var(--ambar-osc); }
.chip.entregado, .chip.pagado { border-left-color: var(--verde); color: var(--verde); }
.chip.cancelado { border-left-color: var(--tomate); color: var(--tomate); }
.chip.parcial { border-left-color: var(--limon); color: #8A6300; }

/* --- Aviso de la sesión --- */
#toast {
  position: fixed; bottom: 0; left: 0; right: 0; transform: translateY(100%);
  background: var(--tinta); color: var(--papel);
  font-family: var(--font-rotulo); font-weight: 600; font-size: 16px;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 13px 20px; text-align: center; border-radius: 0;
  transition: transform .18s ease-out; z-index: 9999; pointer-events: none;
}
#toast.show { transform: translateY(0); }
/* Oculto de verdad: en la tienda el aviso vive sobre la franja del pedido
   (bottom > 0) y el translateY(100%) solo lo bajaba un poco, así que se
   quedaba pegado sobre las pestañas después de los 2,6 s. */
#toast:not(.show) { visibility: hidden; transition: transform .18s ease-out, visibility 0s linear .18s; }
#toast.err { background: var(--tomate); }

/* --- Modal: una ficha sobre la mesa --- */
.modal-bg { position: fixed; inset: 0; background: rgba(22,21,15,.55); display: none; align-items: center; justify-content: center; z-index: 500; padding: 16px; }
.modal-bg.show { display: flex; }
.modal { background: var(--papel); border: 1px solid var(--tinta); border-radius: 0; max-width: 660px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--sh-lg); }
.modal header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--tinta); position: sticky; top: 0; background: var(--papel); z-index: 2; }
.modal header h3 { margin: 0; padding: 0; border: 0; }
.modal .body { padding: 22px; }
.x { cursor: pointer; font-size: 24px; line-height: 1; color: var(--tinta); background: none; border: 0; padding: 0 4px; }
.x:hover { color: var(--naranja); }

/* --- Fondo de las pantallas de entrada: papel milimetrado --- */
.deco-bg {
  background-color: var(--fondo);
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 28px 28px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}