/* Paleta de marca/diswine/LEEME.md. El borgoña #6D223C con letra blanca da
   ~11:1 de contraste; el rojo #E53251 con blanco no llega a 4,5:1, por eso
   solo se usa como acento y nunca de fondo de un botón con texto. */
:root {
  --borgona: #6D223C;
  --borgona-hover: #561a2f;
  --rojo: #E53251;
  --fondo: #f6f3f4;
  --tarjeta: #ffffff;
  --texto: #1f1a1c;
  --tenue: #6b6266;
  --borde: #e2dadd;
  --ok-fondo: #e6f4ea;   --ok-texto: #1d5c2e;
  --alerta-fondo: #fff4d6; --alerta-texto: #6b4b00;
  --error-fondo: #fde8ec; --error-texto: #8c1530;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--borgona); }
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--tarjeta); border-bottom: 3px solid var(--borgona);
}
.marca { display: flex; align-items: center; gap: 8px; color: var(--borgona); font-weight: 700; text-decoration: none; }
.barra nav { display: flex; gap: 14px; align-items: center; font-size: 14px; flex-wrap: wrap; }
.quien { color: var(--tenue); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 0 0 12px; }
h2 { font-size: 17px; margin: 0 0 10px; }
.tenue { color: var(--tenue); }
.chico { font-size: 13px; }
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px;
  padding: 16px; margin-bottom: 16px;
}
.angosta { max-width: 420px; margin: 24px auto; }
label { display: block; font-size: 14px; color: var(--tenue); margin-bottom: 12px; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--texto); }
input, select {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}
input[type=checkbox] { width: auto; margin: 0; }
input:focus, select:focus { outline: 3px solid rgba(109, 34, 60, .25); border-color: var(--borgona); }
input.grande { font-size: 26px; padding: 14px; letter-spacing: .5px; }
button, .boton {
  display: inline-block; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--borde); background: #fff; color: var(--texto);
  text-decoration: none; text-align: center;
}
button:hover, .boton:hover { border-color: var(--borgona); }
button.primario { background: var(--borgona); border-color: var(--borgona); color: #fff; width: 100%; padding: 14px; font-size: 18px; }
button.primario:hover { background: var(--borgona-hover); }
button.chico { padding: 5px 10px; font-size: 13px; font-weight: 500; }
.botones { display: flex; gap: 10px; }
.botones > * { flex: 1; }
.aviso { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: 500; }
.aviso.ok { background: var(--ok-fondo); color: var(--ok-texto); }
.aviso.alerta { background: var(--alerta-fondo); color: var(--alerta-texto); border-left: 5px solid #d99a00; font-size: 18px; }
.aviso.error { background: var(--error-fondo); color: var(--error-texto); border-left: 5px solid var(--rojo); }
.aviso.chico { font-size: 13px; padding: 6px 10px; margin: 8px 0 0; }
.opcion { display: block; width: 100%; text-align: left; margin-bottom: 10px; padding: 14px; }
.opcion span { display: block; color: var(--tenue); font-weight: 400; font-size: 14px; }
.ubic {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--borgona); color: #fff; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
}
.ubic .tenue { color: #f1dde4; display: block; font-size: 13px; }
.ubic strong { font-size: 28px; letter-spacing: 1px; }
.ubic .boton { background: transparent; color: #fff; border-color: #f1dde4; }
.articulo { border-left: 4px solid var(--rojo); padding: 4px 0 4px 12px; margin-bottom: 14px; }
.a-desc { font-size: 20px; font-weight: 700; }
.calculo { font-size: 22px; font-weight: 700; color: var(--borgona); min-height: 32px; margin: -4px 0 14px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--tenue); font-weight: 600; border-bottom: 2px solid var(--borde); padding: 8px 6px; white-space: nowrap; }
td { border-bottom: 1px solid var(--borde); padding: 8px 6px; vertical-align: top; }
.n { text-align: right; white-space: nowrap; }
td.pos { color: #1d5c2e; } td.neg { color: var(--error-texto); }
tr.anulada td { color: #aaa; text-decoration: line-through; }
tr.anulada td:last-child { text-decoration: none; }
tr.recontar td { background: var(--alerta-fondo); }
.scroll { overflow-x: auto; }
.fila-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fila-titulo .botones { flex: 0 0 auto; }
.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; align-items: end; }
.grilla button.primario { margin-bottom: 12px; font-size: 16px; padding: 11px; }
.en-linea { display: flex; gap: 6px; }
.en-linea input { margin: 0; padding: 5px 8px; min-width: 120px; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eee; color: #444; }
.pill.abierta { background: var(--ok-fondo); color: var(--ok-texto); }
.pill.e-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.pill.e-sobra { background: var(--alerta-fondo); color: var(--alerta-texto); }
.pill.e-falta { background: var(--error-fondo); color: var(--error-texto); }
.pill.e-sin-contar { background: #ece6f3; color: #4a2a6b; }
/* lista del operario agrupada por producto */
.grupo { border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.grupo.recontar { border-color: #d99a00; }
.g-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; background: #f8f2f4; border-left: 4px solid var(--borgona); }
.g-nombre strong { display: block; font-size: 15px; }
.g-nombre span { font-size: 13px; }
.g-total { font-size: 20px; font-weight: 700; color: var(--borgona); white-space: nowrap; }
.g-fila { display: grid; grid-template-columns: 3.2em 1fr auto auto; grid-template-areas: "hora cant unid acc" "hora vto vto vto";
  gap: 2px 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--borde); font-size: 14px; }
.g-hora { grid-area: hora; color: var(--tenue); }
.g-cant { grid-area: cant; }
.g-unid { grid-area: unid; font-weight: 600; text-align: right; white-space: nowrap; }
.g-vto { grid-area: vto; color: var(--tenue); font-size: 13px; }
.g-vto:empty { display: none; }
.g-acc { grid-area: acc; color: #aaa; font-size: 13px; }
.g-fila.anulada .g-cant, .g-fila.anulada .g-unid, .g-fila.anulada .g-vto { color: #aaa; text-decoration: line-through; }
.g-fila.recontar { background: var(--alerta-fondo); }
.etiqueta-venci { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
  background: #ece6f3; color: #4a2a6b; font-size: 12px; font-weight: 600; }

/* modal de vencimiento */
.modal { border: none; border-radius: 12px; padding: 20px; width: min(420px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(31, 26, 28, .55); }
.v-desc { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.modal-alerta { border-top: 6px solid #d99a00; }
.modal-alerta h2 { color: var(--alerta-texto); font-size: 20px; }
.modal-alerta #r-motivo { background: var(--alerta-fondo); color: var(--alerta-texto); padding: 10px 12px; border-radius: 8px; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); background: #fff; text-decoration: none; font-size: 14px; }
.filtros a.activo { background: var(--borgona); color: #fff; border-color: var(--borgona); }
.filtros a span { opacity: .7; margin-left: 4px; }