/* deposito — la web del conteo cíclico. Se apoya en la Capa A de _shared-ui (tokens,
   base, components: `make sync-ui`); acá va sólo el layout propio. El color nunca es el
   único portador: la diferencia lleva signo y el estado, texto. */

body { background: var(--bg); color: var(--fg); }

/* La Capa A no le da color propio al primario: acá es el amarillo de la marca, con texto
   oscuro (el blanco sobre amarillo no se lee). */
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--fg-inverse); font-weight: 600; }
.btn--primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }

.dp-saltar { position: absolute; left: -999px; top: 0; }
.dp-saltar:focus { left: var(--space-3); top: var(--space-3); z-index: 20; padding: var(--space-2) var(--space-3); background: var(--bg-card); border-radius: var(--radius-btn); }

.dp-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.dp-marca { display: flex; align-items: center; gap: var(--space-2); color: var(--fg); text-decoration: none; font-weight: 600; font-size: var(--text-lg); }
.dp-marca img { height: 22px; width: auto; }
.dp-nav { display: flex; gap: var(--space-1); flex: 1; }
.dp-nav a { padding: 6px 12px; border-radius: var(--radius-pill); color: var(--fg-muted); text-decoration: none; }
.dp-nav a:hover { color: var(--fg); background: var(--bg-soft); }
.dp-nav a[aria-current="page"] { color: var(--fg-inverse); background: var(--accent); }
.dp-salir { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.dp-quien { color: var(--fg-muted); font-size: var(--text-sm); }

.dp-main { max-width: 1180px; margin: 0 auto; padding: var(--space-4); display: grid; gap: var(--space-4); }
.dp-titulo h1 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.dp-titulo p { margin: 0; color: var(--fg-muted); }
.dp-nota, .dp-recordatorio { margin: 0; color: var(--fg-muted); font-size: var(--text-sm); }
.dp-eyebrow { margin: 0; color: var(--fg-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }

.dp-aviso { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-card); background: var(--bg-card); }
.dp-aviso--ok { border-left-color: var(--ok); }
.dp-aviso--err { border-left-color: var(--err); }
.dp-aviso p { margin: 0; }
.dp-aviso ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }

.dp-dias { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.dp-dia { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--fg-muted); text-decoration: none; font-size: var(--text-sm); }
.dp-dia small { font-variant-numeric: tabular-nums; }
.dp-dia.is-pendiente { border-color: var(--warn); color: var(--fg); }
.dp-dia.is-actual { background: var(--accent); border-color: var(--accent); color: var(--fg-inverse); }

.dp-hoja { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); scroll-margin-top: 80px; }
.dp-hoja__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.dp-hoja__cab h2 { margin: 2px 0 0; font-size: var(--text-lg); }
.dp-hoja__ayuda { margin: 0; max-width: 52ch; color: var(--fg-muted); font-size: var(--text-sm); }
.dp-resumen { margin: 0; padding: 4px 12px; border: 1px solid var(--warn); border-radius: var(--radius-pill); }
.dp-resumen.is-ok { border-color: var(--ok); }

.dp-scroll { overflow-x: auto; }
.dp-tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.dp-tabla th, .dp-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.dp-tabla thead th { color: var(--fg-muted); font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.dp-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-renglon { border-top: 2px solid var(--border); }
.dp-renglon--vto { background: var(--bg-soft); }
.dp-n span { display: block; font-weight: 600; font-size: var(--text-md); }
.dp-n small { color: var(--fg-muted); }
.dp-prod strong { display: block; }
.dp-tabla td small { display: block; color: var(--fg-muted); }
.dp-prod em { display: block; margin-top: 2px; font-style: normal; color: var(--warn); }
.dp-lote { font-family: var(--font-mono); white-space: nowrap; }

.dp-tabla input { width: 100%; min-width: 5.5em; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--bg); color: var(--fg); font: inherit; font-variant-numeric: tabular-nums; }
.dp-tabla input:focus-visible, .dp-mini input:focus-visible, .dp-pie input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-tabla--carga td:nth-last-child(-n+2) { width: 9em; }
.dp-tabla--medidas td { white-space: nowrap; }
.dp-tabla--medidas input { width: 7em; min-width: 0; }
.dp-tabla--medidas td small { display: inline; margin-left: 4px; }

.dp-delta { font-weight: 600; }
.dp-delta--menos { color: var(--err); }
.dp-delta--mas { color: var(--warn); }
.dp-delta--cero { color: var(--fg-muted); font-weight: 400; }

.dp-ev { display: block; margin-top: 2px; color: var(--fg-muted); font-size: var(--text-xs); }
.dp-pista summary, .dp-acciones summary { margin-top: 4px; cursor: pointer; color: var(--fg-muted); font-size: var(--text-xs); }
.dp-mini { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; margin-top: var(--space-2); }
.dp-mini label { display: grid; gap: 2px; color: var(--fg-muted); font-size: var(--text-xs); }
.dp-mini input { min-width: 7em; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--bg); color: var(--fg); font: inherit; }

.dp-ficha { margin: 0; padding: var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius-card); }
.dp-ficha legend { padding: 0 var(--space-2); }
.dp-ficha legend small { color: var(--fg-muted); }

.dp-pie { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.dp-pie label, .dp-filtros label, .dp-campo { display: grid; gap: 4px; color: var(--fg-muted); font-size: var(--text-sm); }
.dp-pie input, .dp-filtros select, .dp-campo select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--bg); color: var(--fg); font: inherit; }
.dp-pie__notas { flex: 1; min-width: 16em; }
.dp-pie__notas input { width: 100%; }

.dp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
.dp-kpi { padding: var(--space-3) var(--space-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.dp-kpi p { margin: 0; color: var(--fg-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; }
.dp-kpi strong { display: block; margin: 4px 0; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.dp-kpi small { color: var(--fg-muted); font-size: var(--text-xs); }
.dp-filtros { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }

.dp-vacio { padding: var(--space-5) var(--space-4); text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.dp-vacio h1, .dp-vacio h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.dp-vacio p { margin: 0 0 var(--space-2); color: var(--fg-muted); }

.dp-acceso { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.dp-acceso__card { width: min(380px, 100%); display: grid; gap: var(--space-3); justify-items: center; padding: var(--space-5) var(--space-4); text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.dp-acceso__card h1 { margin: 0; font-size: var(--text-xl); }
.dp-acceso__sub, .dp-acceso__pie { margin: 0; color: var(--fg-muted); font-size: var(--text-sm); }
.dp-google { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid #dadce0; border-radius: var(--radius-btn); background: #fff; color: #1f1f1f; font-weight: 500; text-decoration: none; }
.dp-google:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hijos de grilla: sin esto, una tabla ancha adentro de un <form> ensancha la columna
   entera (el min-content del form) y la página desborda en el celular. */
.dp-main > *, .dp-hoja > * { min-width: 0; }

@media screen and (max-width: 720px) {
  .dp-header { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .dp-nav { order: 3; width: 100%; }
  .dp-quien { display: none; }
  .dp-main { padding: var(--space-3); }
  .dp-hoja { padding: var(--space-3); }

  /* Comparación e historial: la tabla no entra en 390 px; cada lote, una tarjeta con
     rótulos (data-label) y el estado del ajuste a lo ancho. */
  .dp-tabla--comp thead { display: none; }
  .dp-tabla--comp, .dp-tabla--comp tbody { display: block; }
  .dp-tabla--comp tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0; }
  .dp-tabla--comp tr + tr { border-top: 1px solid var(--border); }
  .dp-tabla--comp td { display: block; padding: 0; border: 0; }
  .dp-tabla--comp td.num { text-align: left; }
  .dp-tabla--comp td[data-label]::before { content: attr(data-label); display: block; color: var(--fg-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
  .dp-tabla--comp td.dp-n { grid-column: 1; }
  .dp-tabla--comp td.dp-prod { grid-column: 2 / -1; }
  .dp-tabla--comp td.dp-vence { grid-column: 1 / -1; }
  .dp-tabla--comp td.dp-vacia { display: none; }
  .dp-tabla--comp td.dp-ancho { grid-column: 1 / -1; }
  .dp-tabla--historial td.dp-art { grid-column: 3 / -1; }
  .dp-tabla--comp td.dp-lote { white-space: normal; overflow-wrap: anywhere; }
  .dp-tabla--comp td.dp-lote .tag { display: table; margin-top: 2px; }

  /* La hoja a cargar sigue siendo tabla (se transcribe renglón por renglón), más apretada. */
  .dp-tabla--carga th, .dp-tabla--carga td { padding: 6px 4px; }
  .dp-tabla--carga td:nth-last-child(-n+2) { width: auto; }
  .dp-tabla--carga input { min-width: 0; width: 4.4em; padding: 6px; }
}

@media print {
  .dp-header, .dp-acciones, .dp-dias, .dp-saltar { display: none; }
}