/* Puente de almacén (almacen.proher.app) con la línea de proher.app. Fuente: plataforma-phn/tema/puentes/almacen.css.
   Se carga DESPUÉS de css/style.css: sus variables pasan a leer los tokens --phn-* del tema que la persona eligió
   en Personalizar. En almacén --verde es el verde de TEXTO y --verde-hoja el de relleno. */
:root:root {
  --papel: var(--phn-bg);
  --blanco: var(--phn-surface);
  --lateral: var(--phn-surface-nav);
  --hundido: var(--phn-neutral-bg);
  --linea: var(--phn-border);
  --tinta: var(--phn-text);
  --tinta-suave: var(--phn-text-2);
  --verde-hoja: var(--phn-accent);
  --verde-tinta: var(--phn-on-accent);
  --verde: var(--phn-accent-text);
  --verde-velo: var(--phn-accent-soft);
  --ambar-fondo: var(--phn-warn-bg);
  --ambar-texto: var(--phn-warn-fg);
  --rojo-fondo: var(--phn-danger-bg);
  --rojo-texto: var(--phn-danger-fg);
  --azul-fondo: var(--phn-info-bg);
  --azul-texto: var(--phn-info-fg);
  --indigo-fondo: var(--phn-team-bg);
  --indigo-texto: var(--phn-team-fg);
  --radio: var(--phn-radius-card);
  --radio-sm: var(--phn-radius-field);
  --radio-md: calc(var(--phn-radius-card) - 6px);
  --radio-pill: var(--phn-radius-pill);
  --sombra: var(--phn-shadow-card);
  --fuente: var(--phn-font);
}
.btn--primario { min-height: 50px; }
.nav a.is-active,
.barra-inferior a.is-active { color: var(--phn-accent-soft-text); }

/* ── Espacio (2026-11-04): menos aire, más contenido; escala con Densidad de Personalizar ── */
main.wrap { padding: calc(16px * var(--phn-space,1)) calc(16px * var(--phn-space,1)) calc(24px * var(--phn-space,1)); gap: calc(16px * var(--phn-space,1)); }
main.wrap > [id^="zona-"] { gap: calc(16px * var(--phn-space,1)); }
.ingreso { padding: calc(16px * var(--phn-space,1)); }
.bloque { margin-bottom: calc(24px * var(--phn-space,1)); }
.gate { padding: calc(16px * var(--phn-space,1)) 0 calc(24px * var(--phn-space,1)); }
.acceso { padding: calc(20px * var(--phn-space,1)); gap: calc(14px * var(--phn-space,1)); }
.captura, .detalle__formas { gap: calc(16px * var(--phn-space,1)); }
@media (min-width: 768px) {
  .card, .ingreso { padding: calc(18px * var(--phn-space,1)); }
  .cifras { gap: calc(12px * var(--phn-space,1)); }
  .cifra { padding: calc(18px * var(--phn-space,1)); min-height: 112px; }
  .columnas, .captura, .detalle { gap: calc(16px * var(--phn-space,1)); }
  .tabla th, .tabla tr.fila td { padding: calc(8px * var(--phn-space,1)) calc(12px * var(--phn-space,1)); }
  .fila-detalle td { padding: 0 calc(12px * var(--phn-space,1)) calc(12px * var(--phn-space,1)); }
}
@media (min-width: 900px) {
  .topbar { padding: calc(10px * var(--phn-space,1)) calc(24px * var(--phn-space,1)); }
  .page-head__cuerpo { padding: calc(20px * var(--phn-space,1)) calc(24px * var(--phn-space,1)) 0; }
  main.wrap { padding: calc(16px * var(--phn-space,1)) calc(24px * var(--phn-space,1)) calc(32px * var(--phn-space,1)); }
  .con-sesion .site-footer__bar { margin-inline: calc(24px * var(--phn-space,1)); }
  .con-sesion .site-header__bar { padding: calc(20px * var(--phn-space,1)) calc(14px * var(--phn-space,1)); }
}
@media (min-width: 1024px) {
  :root:root { --ancho: 1180px; --lateral-ancho: 264px; }
  .topbar { padding-inline: calc(32px * var(--phn-space,1)); }
  .page-head__cuerpo, main.wrap { padding-inline: calc(32px * var(--phn-space,1)); }
  .lista { gap: calc(12px * var(--phn-space,1)); }
}
@media (min-width: 1500px) {
  :root:root { --ancho: 1320px; }
  .lista { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

/* ══ Modo oscuro (2026-11-04): estilos Oscuro y Grafito ══ */
/* Variables que el bloque claro no remapea */
:root:root[data-modo="oscuro"] {
  color-scheme: dark;
  --verde-medio: color-mix(in srgb, var(--phn-accent) 85%, #000);
  --verde-claro: color-mix(in srgb, var(--phn-accent) 50%, var(--phn-surface));
  --verde-velo-fuerte: color-mix(in srgb, var(--phn-accent) 25%, var(--phn-surface));
  --linea-suave: var(--phn-border);
  --linea-fuerte: var(--phn-border-strong);
  --tinta-media: color-mix(in srgb, var(--phn-text) 55%, var(--phn-text-2));
  --ambar-velo: var(--phn-warn-bg);
  --ambar-filo: color-mix(in srgb, var(--phn-warn-fg) 35%, var(--phn-warn-bg));
  --ambar-punto: var(--phn-warn-fg);
  --rojo-velo: var(--phn-danger-bg);
  --rojo-filo: color-mix(in srgb, var(--phn-danger-fg) 35%, var(--phn-danger-bg));
  --sombra-alta: 0 0 0 1px var(--phn-border), 0 12px 32px rgba(0,0,0,.5);
}
/* Colores escritos directo en reglas */
[data-modo="oscuro"] .selector-area {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A3DB7E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
[data-modo="oscuro"] .tabla tr.fila--bajo { background: color-mix(in srgb, var(--phn-warn-bg) 55%, var(--phn-surface)); }
[data-modo="oscuro"] .tabla tr.fila--agotado { background: color-mix(in srgb, var(--phn-danger-bg) 55%, var(--phn-surface)); }
@media (min-width: 768px) {
  [data-modo="oscuro"] .tabla tr.fila--bajo,
  [data-modo="oscuro"] .tabla tr.fila--agotado { background: transparent; }
  [data-modo="oscuro"] .tabla tr.fila--bajo td { background: color-mix(in srgb, var(--phn-warn-bg) 55%, var(--phn-surface)); }
  [data-modo="oscuro"] .tabla tr.fila--agotado td { background: color-mix(in srgb, var(--phn-danger-bg) 55%, var(--phn-surface)); }
}
[data-modo="oscuro"] .hoja-llave__fondo { background: rgba(0,0,0,.6); }
/* Lo que se imprime sale siempre en claro */
@media print {
  :root:root[data-modo="oscuro"] { color-scheme: light; --blanco: #FFFFFF; --papel: #FFFFFF; --tinta: #1D1D1F; --tinta-suave: #6E6E73; --linea: #E8E8ED; --linea-fuerte: #D2D2D7; }
}