/* ==========================================================================
 * Control Stock — Base visual UX-local (objetivo v0.11.0)
 *
 * Estrategia visual aprobada (decisión consciente, ver `docs/UI.md`):
 *
 *   - CSS propio modernizado en este único archivo `app.css`.
 *   - Tokens semánticos en `:root`. Convención BEM para componentes
 *     (`bloque__elemento--modificador`). Sin Tailwind, sin Node, sin
 *     dependencias frontend.
 *   - Tipografía Panchang (titulares) + Syne (texto). Paleta del manual
 *     de marca del Albacete Balompié.
 *
 * Enfoque responsive: **desktop-first operativo, responsive y usable
 * en tablet/móvil**. Las reglas por defecto se diseñan para escritorio;
 * los puntos de ruptura aplican adaptaciones para pantallas pequeñas
 * sin romper el layout.
 *
 * Breakpoints (descriptivos):
 *   - móvil estrecho   : <30rem  (≈ <480px)
 *   - móvil/tablet     : 30–52rem
 *   - escritorio       : ≥52rem  (≈ ≥832px)  — sidebar fijo y main amplio
 *
 * Convención canónica documentada en `docs/UI.md`. Cualquier estilo
 * nuevo (UX-2..UX-7 y posteriores) debe respetar esa convención.
 * ========================================================================== */

/* --- 1. Tokens / variables del proyecto --------------------------------- */
:root {
  /* Colores de marca (manual del club) */
  --c-blanco: #ffffff;
  --c-plata: #f1f1f1;
  --c-plata-oscura: #e6e4e5;
  --c-granate: #a6192e;
  --c-granate-oscuro: #8a1327;
  --c-amarillo: #ffc600;
  --c-negro: #231f20;

  /* Colores semánticos */
  --c-texto: #231f20;
  --c-texto-suave: #555153;
  --c-borde: #d8d6d7;
  --c-borde-fuerte: #b8b6b7;
  --c-superficie: #ffffff;
  --c-superficie-2: #fafafa;
  --c-superficie-3: var(--c-plata);

  --c-peligro: #b00020;
  --c-peligro-bg: #fdecee;
  --c-aviso: #8a6d00;
  --c-aviso-bg: #fff7d6;
  --c-exito: #0f6b3b;
  --c-exito-bg: #e3f5ea;
  --c-info: #0b4f8a;
  --c-info-bg: #e3effa;

  /* Tokens de estado documental — usan los semánticos como base */
  --c-estado-borrador-bg: var(--c-aviso-bg);
  --c-estado-borrador-fg: var(--c-aviso);
  --c-estado-confirmado-bg: var(--c-exito-bg);
  --c-estado-confirmado-fg: var(--c-exito);
  --c-estado-anulado-bg: var(--c-peligro-bg);
  --c-estado-anulado-fg: var(--c-peligro);
  --c-estado-descartado-bg: var(--c-plata);
  --c-estado-descartado-fg: var(--c-texto-suave);

  /* Estados de EntradaPrevista (F9-local) */
  --c-estado-pendiente-bg: var(--c-aviso-bg);
  --c-estado-pendiente-fg: var(--c-aviso);
  --c-estado-recibido-parcial-bg: var(--c-info-bg);
  --c-estado-recibido-parcial-fg: var(--c-info);
  --c-estado-recibido-total-bg: var(--c-exito-bg);
  --c-estado-recibido-total-fg: var(--c-exito);
  --c-estado-cancelado-bg: var(--c-plata);
  --c-estado-cancelado-fg: var(--c-texto-suave);
  --c-estado-cerrado-bg: var(--c-plata);
  --c-estado-cerrado-fg: var(--c-granate-oscuro);

  /* Estados de Reserva (F8-local) */
  --c-estado-activa-bg: var(--c-info-bg);
  --c-estado-activa-fg: var(--c-info);
  --c-estado-consumida-bg: var(--c-exito-bg);
  --c-estado-consumida-fg: var(--c-exito);
  --c-estado-cancelada-bg: var(--c-plata);
  --c-estado-cancelada-fg: var(--c-texto-suave);

  /* Tipografía */
  --fuente-titulo: "Panchang", "Syne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-texto: "Syne", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.6rem;
  --fs-3xl: 2rem;

  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;

  /* Escala de espaciado (4-pt-ish) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;

  /* Radios */
  --radio-sm: 0.25rem;
  --radio: 0.5rem;
  --radio-md: 0.625rem;
  --radio-lg: 0.875rem;
  --radio-pill: 999px;

  /* Sombras */
  --sombra-sm: 0 1px 2px rgba(35, 31, 32, 0.05);
  --sombra-md: 0 1px 2px rgba(35, 31, 32, 0.06), 0 2px 8px rgba(35, 31, 32, 0.06);
  --sombra-lg: 0 4px 12px rgba(35, 31, 32, 0.08), 0 8px 24px rgba(35, 31, 32, 0.06);
  --sombra: var(--sombra-md); /* alias retrocompatible (código previo) */

  /* Bordes */
  --borde-suave: 1px solid var(--c-borde);
  --borde-fuerte: 1px solid var(--c-borde-fuerte);

  /* Capas (z-index) */
  --z-sticky: 10;
  --z-dropdown: 50;
  --z-overlay: 80;
  --z-modal: 100;

  /* Layout */
  --gap: 1rem;
  --max: 64rem;             /* legacy: ancho del cuerpo de auth/dashboard */
  --max-panel: 80rem;       /* ancho máximo del panel operativo */
  --sidebar-w: 16rem;
  --target-tactil: 2.75rem; /* 44px — mínimo táctil WCAG */

  /* Estado documental — radio para badges */
  --badge-radio: var(--radio-pill);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fuente-texto);
  color: var(--c-texto);
  background: var(--c-plata);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { color: var(--c-granate); }

/* Foco visible accesible — patrón dual (amarillo + granate) WCAG 2.1 AA.
   El doble anillo garantiza visibilidad sobre fondos claros y oscuros. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-amarillo);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--c-granate);
  border-radius: var(--radio-sm);
}

h1, h2, h3, h4 { font-family: var(--fuente-titulo); letter-spacing: 0.01em; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-negro);
  color: var(--c-blanco);
  padding: var(--sp-2) var(--sp-4);
  z-index: var(--z-modal);
  border-radius: var(--radio-sm);
}
.skip-link:focus,
.skip-link:focus-visible { left: 0.5rem; top: 0.5rem; }

/* UX-6b — overrides de foco por componente */
/* El sidebar recibe foco programático al abrirse; no mostrar anillo visual. */
#panel-sidebar:focus-visible { outline: none; box-shadow: none; }
/* El chip__close es circular; ajusta el radio del anillo de foco. */
.chip__close:focus-visible { border-radius: 50%; }

/* --- 2. Layout general -------------------------------------------------- */
.app-header {
  background: var(--c-granate);
  color: var(--c-blanco);
  box-shadow: var(--sombra-md);
}
.app-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
}
.app-brand {
  display: flex; align-items: center; gap: 0.75rem;
  color: inherit; text-decoration: none;
}
.app-brand__escudo {
  width: 40px; height: 40px;
  background: var(--c-blanco);
  border-radius: 50%;
  padding: 2px;
}
.app-brand__texto { display: flex; flex-direction: column; line-height: 1.1; }
.app-brand__titulo { font-family: var(--fuente-titulo); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.app-brand__subtitulo { font-size: var(--fs-sm); opacity: 0.85; }

.app-nav {
  display: flex; align-items: center; gap: 0.5rem; margin-left: auto;
  flex-wrap: wrap;
}
.app-nav__user { font-size: var(--fs-sm); opacity: 0.9; }
.app-nav__link {
  color: var(--c-blanco); text-decoration: none;
  padding: 0.35rem 0.6rem; border-radius: var(--radio-sm);
}
.app-nav__link:hover { background: var(--c-granate-oscuro); }
.app-nav__logout { margin: 0; }

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-4);
}

.app-footer {
  text-align: center;
  padding: var(--sp-4);
  color: var(--c-texto-suave);
}
.app-footer__info-btn {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.app-footer__info-btn:hover { color: var(--c-granate); }
.app-footer__version {
  margin-left: var(--sp-2);
  font-size: 0.85em;
}
.app-footer__dialog {
  border: none;
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  padding: 0;
  max-width: 28rem;
  width: calc(100% - 2rem);
}
.app-footer__dialog::backdrop { background: rgba(0 0 0 / 0.45); }
.app-footer__dialog-inner {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.app-footer__dialog-inner p { margin: 0; }
.app-footer__dialog-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  margin: 0;
}

/* --- 3. Zona auth (login y offline) ------------------------------------- */
.app-body--auth { background: var(--c-granate); color: var(--c-blanco); }
.auth-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  min-height: 100dvh;
}
.auth-card {
  background: var(--c-blanco);
  color: var(--c-texto);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  padding: 1.75rem;
  width: 100%;
  max-width: 24rem;
}
.auth-card__header { text-align: center; margin-bottom: var(--sp-4); }
.auth-card__escudo {
  display: block; margin: 0 auto 0.5rem;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--c-blanco);
  border: 4px solid var(--c-plata);
}
.auth-card__titulo { font-size: var(--fs-2xl); margin: 0.25rem 0 0; }
.auth-card__subtitulo { margin: 0; color: var(--c-texto-suave); }

/* --- 4. Cards reutilizables --------------------------------------------- */
.card {
  background: var(--c-superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  padding: var(--sp-5);
}
.card + .card { margin-top: var(--gap); }
.card__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.card__titulo { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); }
.card__subtitulo { margin: 0 0 var(--sp-4); color: var(--c-texto-suave); }
.card__cuerpo { }
.card__acciones { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.card__acciones--riesgo {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-borde-fuerte);
}

/* dl genérico clave-valor */
.kv { display: grid; grid-template-columns: 1fr; gap: 0.25rem 1rem; margin: var(--sp-4) 0 0; }
.kv dt { font-weight: var(--fw-bold); color: var(--c-texto-suave); }
.kv dd { margin: 0 0 var(--sp-2); }

@media (min-width: 30rem) {
  .kv { grid-template-columns: max-content 1fr; }
  .kv dd { margin: 0; }
}

.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: var(--c-negro);
  color: var(--c-blanco);
  border-radius: var(--radio-pill);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

/* --- 5. Formularios — convención BEM canónica -------------------------- *
 * Todas las plantillas usan `.form__campo` y derivados (UX-4a..UX-4e).   *
 * --------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 0.85rem; }

.form__campo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: var(--sp-3);
}
.form__campo label { font-weight: var(--fw-medium); }

/* Inputs base */
.form__campo input,
.form__campo select,
.form__campo textarea,
.panel__buscador input {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: var(--borde-suave);
  border-radius: var(--radio-sm);
  background: var(--c-blanco);
  color: var(--c-texto);
  width: 100%;
  min-height: var(--target-tactil);
}
.form__campo textarea { min-height: 6rem; resize: vertical; }
.form__campo input:focus,
.form__campo select:focus,
.form__campo textarea:focus,
.panel__buscador input:focus { border-color: var(--c-granate); }

/* Modificadores */
.form__campo--check,
.form__campo--checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
.form__campo--check label,
.form__campo--checkbox label { font-weight: var(--fw-regular); }
.form__check { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Errores */
.form__error,
.form__errores { color: var(--c-peligro); }
.form__errores {
  background: var(--c-peligro-bg);
  border: 1px solid var(--c-peligro);
  border-radius: var(--radio-sm);
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.85rem;
}
.form__error { margin: 0.25rem 0 0; padding: 0; font-size: var(--fs-sm); list-style: none; }

/* Ayudas */
.form__ayuda { margin: 0; font-size: var(--fs-sm); color: var(--c-texto-suave); }

/* Acciones */
.form__acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* Variante SKU wizard — BEM canónico */
.variante__fieldset {
  border: var(--borde-suave);
  border-radius: var(--radio);
  padding: 1rem 1.25rem 0.5rem;
  margin: 0 0 1rem;
}
.variante__leyenda {
  font-weight: var(--fw-bold);
  padding: 0 0.4rem;
  color: var(--c-granate);
}
.variante__ayuda-destacada {
  background: var(--c-plata);
  padding: 0.65rem 0.8rem;
  border-radius: var(--radio-sm);
  color: var(--c-texto);
  margin: 0 0 var(--sp-3);
}
.variante__campo--paso label { display: flex; align-items: center; gap: 0.5rem; }
.variante__paso {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--c-granate); color: var(--c-blanco);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  flex: none;
}

/* Layout específico de "form en línea" para añadir línea de documento */
.form--inline { display: inline-block; margin: 0; }
.form--linea { display: grid; grid-template-columns: 1fr 7rem auto; gap: 0.75rem; align-items: end; }
.form--confirmar { margin-top: 0.75rem; }
.form--cancelar { margin-top: 0.75rem; }
.form--anular { margin-top: 0.75rem; }
.form--descartar { margin-top: 0.75rem; }

/* --- 6. Botones --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: var(--fw-medium);
  padding: 0.6rem 1rem;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  min-height: var(--target-tactil);
  transition: background-color 0.1s ease-in, border-color 0.1s ease-in;
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--block { width: 100%; }

.btn--primario {
  background: var(--c-granate);
  color: var(--c-blanco);
  border-color: var(--c-granate);
}
.btn--primario:hover {
  background: var(--c-granate-oscuro);
  border-color: var(--c-granate-oscuro);
}

/* Secundario — variante neutra para acciones no principales */
.btn--secundario {
  background: var(--c-plata);
  color: var(--c-texto);
  border-color: var(--c-borde-fuerte);
}
.btn--secundario:hover { background: var(--c-plata-oscura); }

/* Ghost — bordes con color heredado, fondo transparente */
.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

/* Link — apariencia de enlace */
.btn--link {
  background: transparent;
  color: var(--c-granate);
  border-color: transparent;
  padding: 0.35rem 0.6rem;
  min-height: 0;
}
.btn--link:hover { background: rgba(166, 25, 46, 0.08); }

/* Peligro — sólo color, no fondo, salvo en hover */
.btn--peligro {
  color: var(--c-peligro);
  background: transparent;
  border-color: transparent;
}
.btn--peligro:hover { background: var(--c-peligro-bg); }

/* Variante de tamaño */
.btn--grande { padding: 0.85rem 1.4rem; font-size: var(--fs-lg); }
.btn--pequeno { min-height: 2rem; padding: 0.35rem 0.7rem; font-size: var(--fs-sm); }

/* --- 7. Mensajes y alertas --------------------------------------------- *
 * Sistema unificado: `.alert` + variantes. Mantiene los selectores
 * legacy `.messages__item--*`, `.aviso--*` con estilos compatibles.
 * --------------------------------------------------------------------- */
.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.messages__item,
.alert {
  padding: 0.65rem 0.9rem;
  border-radius: var(--radio-sm);
  background: var(--c-plata);
  border: 1px solid transparent;
}
.alert { margin: 0 0 0.75rem; }

/* Variantes semánticas — comparten paleta entre `.alert--*` y
   `.messages__item--*` para que cualquier punto de la plantilla
   genere el mismo aspecto. */
.messages__item--error,
.alert--error {
  background: var(--c-peligro-bg);
  color: var(--c-peligro);
  border-color: var(--c-peligro);
}
.messages__item--warning,
.alert--warning,
.alert--aviso {
  background: var(--c-aviso-bg);
  color: var(--c-aviso);
  border-color: var(--c-aviso);
}
.messages__item--success,
.alert--success,
.alert--exito {
  background: var(--c-exito-bg);
  color: var(--c-exito);
  border-color: var(--c-exito);
}
.messages__item--info,
.alert--info {
  background: var(--c-info-bg);
  color: var(--c-info);
  border-color: var(--c-info);
}

/* Aviso operativo (granate fuerte) — F3+: bloque con borde marcado
 * que indica el efecto sobre stock. Mantenido idéntico en intención. */
.aviso {
  border: 2px solid var(--c-granate);
  border-radius: var(--radio);
  background: var(--c-aviso-bg);
  color: var(--c-texto);
  padding: 1rem 1.1rem;
  margin: 1rem 0 1.25rem;
  box-shadow: var(--sombra-md);
}
.aviso__titulo {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-lg);
  margin-bottom: 0.4rem;
  color: var(--c-granate-oscuro);
}
.aviso__cuerpo { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.aviso__lista { margin: 0.5rem 0 0; padding-left: 1.25rem; }

/* Variantes por intención del aviso operativo */
.aviso--suma { border-color: var(--c-granate); background: var(--c-aviso-bg); }
.aviso--suma .aviso__titulo { color: var(--c-granate-oscuro); }
.aviso--resta { border-color: var(--c-peligro); background: var(--c-peligro-bg); }
.aviso--resta .aviso__titulo { color: var(--c-peligro); }
.aviso--traspaso { border-color: var(--c-granate); }
.aviso--traspaso .aviso__titulo { color: var(--c-granate); }
.aviso--anulacion { border-color: var(--c-peligro); background: var(--c-peligro-bg); }
.aviso--anulacion .aviso__titulo { color: var(--c-peligro); }
.aviso--reverso { border-color: var(--c-granate); background: var(--c-plata); color: var(--c-texto); }
.aviso--reverso .aviso__titulo { color: var(--c-granate-oscuro); }
.aviso--anulado { border-color: var(--c-peligro); background: var(--c-peligro-bg); color: var(--c-peligro); }
.aviso--anulado .aviso__titulo { color: var(--c-peligro); }
.aviso--info { border-color: var(--c-info); background: var(--c-info-bg); color: var(--c-info); }
.aviso--info .aviso__titulo { color: var(--c-info); }

/* --- 8. Utilidades mínimas ---------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.text--suave { color: var(--c-texto-suave); }
/* --- 9. Panel ---------------------------------------------------------- */
body.panel { background: var(--c-plata); }
body.panel .app-main { max-width: var(--max-panel); }

.panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

/* En escritorio, sidebar fijo a la izquierda */
@media (min-width: 52rem) {
  .panel {
    grid-template-columns: var(--sidebar-w) 1fr;
    align-items: start;
  }
}

.panel__sidebar {
  background: var(--c-superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  padding: 0.85rem;
  position: sticky;
  top: 0.5rem;
  z-index: var(--z-sticky);
}
.panel__sidebar-titulo {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-texto-suave);
  margin: 0 0 0.5rem;
}
.panel__nav { display: flex; flex-direction: column; gap: 0.15rem; }
.panel__nav-link {
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radio-sm);
  color: var(--c-texto);
  text-decoration: none;
  min-height: 2.25rem;
}
.panel__nav-link:hover,
.panel__nav-link[aria-current="page"] {
  background: var(--c-plata);
  color: var(--c-granate);
}

.panel__main {
  background: var(--c-superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  padding: var(--sp-5);
  min-height: 60vh;
}

@media (min-width: 80rem) {
  .panel__main { padding: var(--sp-6); }
}

.panel__header { margin-bottom: var(--sp-4); }
.panel__titulo { margin: 0 0 0.35rem; font-size: var(--fs-xl); }
.panel__lead { margin: 0 0 0.75rem; color: var(--c-texto-suave); }
.panel__breadcrumb { text-decoration: none; color: var(--c-texto-suave); }
.panel__subtitulo {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-lg);
  margin: var(--sp-6) 0 var(--sp-2);
}
.panel__resumen { color: var(--c-texto-suave); font-size: var(--fs-sm); }

/* UX-6a — hamburguesa y sidebar móvil */
.panel__hamburguesa {
  display: none; /* visible solo en móvil vía max-width media query */
}
.panel__hamburguesa-linea {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--c-texto);
  border-radius: 1px;
}
.panel__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(35, 31, 32, 0.5);
  z-index: var(--z-overlay);
  display: none;
}
.panel__backdrop--visible { display: block; }

@media (max-width: calc(52rem - 0.0625rem)) {
  .panel__hamburguesa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: var(--target-tactil);
    height: var(--target-tactil);
    background: var(--c-superficie);
    border: var(--borde-suave);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-sm);
    cursor: pointer;
    padding: 0;
  }
  .panel__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100dvh;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    z-index: calc(var(--z-overlay) + 1);
    overflow-y: auto;
    border-radius: 0;
  }
  .panel__sidebar--abierto {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel__sidebar { transition: none; }
}

/* Barra superior de listado: buscador + acciones */
.panel__barra {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: center; justify-content: space-between;
  margin-top: 0.75rem;
}
.panel__buscador { display: flex; gap: 0.5rem; flex: 1 1 20rem; }
.panel__buscador input { flex: 1; }
.panel__acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Empty state genérico — UX-3 valorará variantes con CTA */
.panel__vacio {
  color: var(--c-texto-suave);
  padding: var(--sp-7);
  text-align: center;
  border: 1px dashed var(--c-borde);
  border-radius: var(--radio-sm);
}

/* Aviso operativo simple de listado (informativo, no crítico).
   Se reservaba en F8/F9 con la clase `panel__aviso` pero no estaba
   definida; aquí se le da un estilo coherente con el resto de
   alertas. */
.panel__aviso {
  background: var(--c-info-bg);
  color: var(--c-info);
  border: 1px solid var(--c-info);
  border-radius: var(--radio-sm);
  padding: 0.65rem 0.9rem;
  margin: 0 0 var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.panel__aviso--informativo { background: var(--c-info-bg); color: var(--c-info); border-color: var(--c-info); }

/* Ficha clave-valor del detalle de documento/previsión/reserva */
.ficha,
.panel__ficha {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0.5rem 0 var(--sp-4);
}
.ficha dt,
.panel__ficha dt { font-weight: var(--fw-medium); color: var(--c-texto-suave); }
.ficha dd,
.panel__ficha dd { margin: 0; }

@media (max-width: 30rem) {
  .ficha,
  .panel__ficha { grid-template-columns: 1fr; }
  .ficha dt,
  .panel__ficha dt { margin-top: 0.5rem; }
}

/* Sección colapsable en detalle (`<details>`) */
.panel__seccion {
  border: var(--borde-suave);
  border-radius: var(--radio-sm);
  padding: 0.5rem 0.75rem;
  margin: var(--sp-3) 0;
  background: var(--c-superficie-2);
}
.panel__seccion > summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
  padding: 0.25rem 0;
  list-style: revert;
}
.panel__seccion[open] > summary { margin-bottom: var(--sp-3); }

/* --- 10. Detalle de documento (UX-5) ----------------------------------- */
.doc { display: flex; flex-direction: column; gap: var(--sp-5); }

.doc__cabecera {
  background: var(--c-blanco);
  border: var(--borde-suave);
  border-radius: var(--radio);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.doc__titulo-grupo {
  display: grid;
  grid-template-areas: "tipo tipo" "numero estado";
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.2rem var(--sp-3);
}
.doc__tipo {
  grid-area: tipo;
  font-size: var(--fs-xs);
  color: var(--c-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-medium);
}
.doc__numero {
  grid-area: numero;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin: 0;
  color: var(--c-texto);
  line-height: 1.15;
}
.doc__estado { grid-area: estado; }

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin: 0;
  padding: var(--sp-3) 0 0;
  border-top: var(--borde-suave);
}
.doc__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 7rem;
}
.doc__meta-item dt {
  font-size: var(--fs-xs);
  color: var(--c-texto-suave);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.doc__meta-item dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-texto);
}
.doc__meta-item--ancho { flex-basis: 100%; }

.doc__seccion { display: flex; flex-direction: column; gap: var(--sp-3); }
.doc__seccion-titulo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
  margin: 0;
  padding-bottom: var(--sp-2);
  border-bottom: var(--borde-suave);
}

@media (max-width: 30rem) {
  .doc__cabecera { padding: var(--sp-3); }
  .doc__titulo-grupo { grid-template-areas: "tipo" "numero" "estado"; grid-template-columns: 1fr; }
  .doc__estado { justify-self: start; }
  .doc__meta { gap: var(--sp-2) var(--sp-4); }
}

/* --- 11. Tarjetas del home / dashboard --------------------------------- */
.tarjetas {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.tarjeta { margin: 0; }
.tarjeta__link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding: var(--sp-4);
  border: var(--borde-suave);
  border-radius: var(--radio);
  background: var(--c-superficie);
  color: var(--c-texto);
  text-decoration: none;
  transition: border-color 0.1s ease-in, transform 0.1s ease-in, box-shadow 0.1s ease-in;
}
.tarjeta__link:hover {
  border-color: var(--c-granate);
  transform: translateY(-1px);
  box-shadow: var(--sombra-sm);
}
.tarjeta__titulo { font-weight: var(--fw-bold); }
.tarjeta__contador {
  background: var(--c-plata);
  color: var(--c-texto-suave);
  padding: 0.1rem 0.6rem;
  border-radius: var(--radio-pill);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}

/* --- 11. Tablas -------------------------------------------------------- */
.tabla-envoltura {
  overflow-x: auto;
  margin-top: 0.5rem;
  border-radius: var(--radio-sm);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.tabla th, .tabla td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: var(--borde-suave);
  vertical-align: middle;
}
.tabla thead th {
  background: var(--c-plata);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  position: sticky; /* sticky header opcional cuando hay scroll vertical local */
  top: 0;
  z-index: 1;
}
.tabla tbody tr:hover { background: var(--c-superficie-2); }
.tabla__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla__acciones { text-align: right; white-space: nowrap; }
.tabla__acciones .btn { margin-left: 0.25rem; }

.paginacion,
.pagination {
  margin-top: var(--sp-4);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  color: var(--c-texto-suave);
  flex-wrap: wrap;
}

/* --- 12. Filtros del panel --------------------------------------------- */
.panel__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  margin: 0 0 var(--sp-4);
}
.panel__filtros select,
.panel__filtros input[type="search"],
.panel__filtros input[type="text"],
.panel__filtros input[type="date"] {
  min-height: var(--target-tactil);
  padding: 0.4rem 0.6rem;
  border: var(--borde-suave);
  border-radius: var(--radio-sm);
  background: var(--c-blanco);
}

/* En móvil, filtros en columna y botones a ancho completo */
@media (max-width: 40rem) {
  .panel__filtros {
    flex-direction: column;
    align-items: stretch;
  }
  .panel__filtros .form__campo,
  .panel__filtros label,
  .panel__filtros select,
  .panel__filtros input { width: 100%; }
  .panel__filtros .form__acciones { flex-direction: column; }
  .panel__filtros .btn { width: 100%; }
}

/* --- 13. Badges -------------------------------------------------------- *
 * Sistema completo de badges. Cubre estados documentales, de previsión,
 * de reserva, y semánticos genéricos. Usar `badge--{estado|lower}` desde
 * plantillas. Si aparece un estado nuevo, ampliar aquí en lugar de
 * inventar clases sueltas.
 * --------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: var(--badge-radio);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  background: var(--c-plata);
  color: var(--c-texto-suave);
  white-space: nowrap;
}

/* Genéricas */
.badge--ok,
.badge--exito       { background: var(--c-exito-bg);   color: var(--c-exito); }
.badge--warn,
.badge--aviso       { background: var(--c-aviso-bg);   color: var(--c-aviso); }
.badge--error,
.badge--peligro     { background: var(--c-peligro-bg); color: var(--c-peligro); }
.badge--info        { background: var(--c-info-bg);    color: var(--c-info); }
.badge--neutro      { background: var(--c-plata);      color: var(--c-texto-suave); }

/* Estado documental (Documento.Estado) */
.badge--borrador        { background: var(--c-estado-borrador-bg);   color: var(--c-estado-borrador-fg); }
.badge--confirmado      { background: var(--c-estado-confirmado-bg); color: var(--c-estado-confirmado-fg); }
.badge--anulado         { background: var(--c-estado-anulado-bg);    color: var(--c-estado-anulado-fg); }
.badge--descartado      { background: var(--c-estado-descartado-bg); color: var(--c-estado-descartado-fg); }
.badge--reverso         {
  background: var(--c-granate);
  color: var(--c-blanco);
  letter-spacing: 0.04em;
}

/* Estado de EntradaPrevista (F9-local) */
.badge--pendiente              { background: var(--c-estado-pendiente-bg);         color: var(--c-estado-pendiente-fg); }
.badge--recibido_parcial       { background: var(--c-estado-recibido-parcial-bg); color: var(--c-estado-recibido-parcial-fg); }
.badge--recibido_total         { background: var(--c-estado-recibido-total-bg);   color: var(--c-estado-recibido-total-fg); }
.badge--cancelado              { background: var(--c-estado-cancelado-bg);        color: var(--c-estado-cancelado-fg); }
.badge--cerrado_con_diferencia { background: var(--c-estado-cerrado-bg);          color: var(--c-estado-cerrado-fg); }

/* Estado de Reserva (F8-local) */
.badge--activa     { background: var(--c-estado-activa-bg);     color: var(--c-estado-activa-fg); }
.badge--consumida  { background: var(--c-estado-consumida-bg);  color: var(--c-estado-consumida-fg); }
.badge--cancelada  { background: var(--c-estado-cancelada-bg);  color: var(--c-estado-cancelada-fg); }

/* --- 14. Stock contextual (F7-local) ----------------------------------- */
.stock-info {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  border: var(--borde-suave);
  background: var(--c-superficie-2);
}
.stock-info--vacio { color: var(--c-texto-suave); }
.stock-info--resta { border-color: var(--c-peligro); background: var(--c-peligro-bg); }
.stock-info--suma { border-color: var(--c-aviso); background: var(--c-aviso-bg); }
.stock-info--devolucion { border-color: var(--c-granate); }
.stock-info__cabecera { margin: 0 0 0.5rem; font-weight: var(--fw-medium); }
.stock-info__sku { font-family: var(--fuente-mono); }
.stock-info__almacen { color: var(--c-texto-suave); font-weight: var(--fw-regular); }
.stock-info__etiqueta {
  display: inline-block;
  margin-right: 0.5rem;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stock-info__cifras {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin: 0.25rem 0;
}
.stock-info__metric { display: inline-flex; flex-direction: column; min-width: 5rem; }
.stock-info__metric--destacado .stock-info__valor {
  font-size: var(--fs-2xl); color: var(--c-granate);
}
.stock-info__label { font-size: var(--fs-sm); color: var(--c-texto-suave); }
.stock-info__valor { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.stock-info__alerta { margin: 0.5rem 0 0; color: var(--c-peligro); font-weight: var(--fw-medium); }
.stock-info__nota-suma { margin: 0.25rem 0; color: var(--c-aviso); font-style: italic; }
.stock-info__placeholder { margin: 0; color: var(--c-texto-suave); font-style: italic; }
.stock-info__nota { margin: 0.5rem 0 0; font-size: var(--fs-sm); color: var(--c-texto-suave); font-style: italic; }
.stock-info-traspaso { display: grid; gap: 0.5rem; }

@media (min-width: 720px) {
  .stock-info-traspaso { grid-template-columns: 1fr 1fr; }
  .stock-info-traspaso > .stock-info__nota { grid-column: 1 / -1; }
}

/* --- 15. Adaptaciones responsive globales ------------------------------ */

/* Inputs y selects ocupan 100% en pantallas estrechas. */
@media (max-width: 30rem) {
  .form--linea { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn--link,
  .btn--pequeno { width: auto; }
  .panel__main { padding: var(--sp-4); }
}

/* Reducción de movimiento — respetar preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- 16. UX-2 — sidebar agrupado, nueva operación y dashboard ---------- */

/* Separación visual entre grupos del sidebar */
.panel__nav--grupo + .panel__sidebar-titulo { margin-top: var(--sp-3); }
.panel__sidebar-titulo[data-grupo-activo] { color: var(--c-granate); }

/* Enlace activo: marca clara, conserva contraste */
.panel__nav-link[aria-current="page"] {
  background: var(--c-plata);
  color: var(--c-granate);
  font-weight: var(--fw-bold);
  position: relative;
}
.panel__nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 3px;
  background: var(--c-granate);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
}

/* Enlace destacado del sidebar (Nueva operación) */
.panel__nav-link--destacado {
  background: var(--c-granate);
  color: var(--c-blanco);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-1);
}
.panel__nav-link--destacado:hover,
.panel__nav-link--destacado[aria-current="page"] {
  background: var(--c-granate-oscuro);
  color: var(--c-blanco);
}
.panel__nav-link--destacado[aria-current="page"]::before { display: none; }

/* Pantalla "Nueva operación" — familias y tarjetas grandes */
.operaciones__familia { margin-bottom: var(--sp-7); }
.operaciones__lista {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.operaciones__item { margin: 0; }

.operacion-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: var(--borde-suave);
  border-radius: var(--radio);
  background: var(--c-superficie);
  color: var(--c-texto);
  text-decoration: none;
  min-height: 8rem;
  transition: border-color 0.1s ease-in, transform 0.1s ease-in, box-shadow 0.1s ease-in;
}
.operacion-card:hover {
  border-color: var(--c-granate);
  transform: translateY(-1px);
  box-shadow: var(--sombra-sm);
}
.operacion-card__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.operacion-card__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.operacion-card__descripcion {
  color: var(--c-texto-suave);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.operacion-card__etiqueta { align-self: flex-start; }

.operacion-card--bloqueada {
  background: var(--c-superficie-2);
  cursor: not-allowed;
  opacity: 0.75;
}
.operacion-card--bloqueada:hover {
  border-color: var(--c-borde);
  transform: none;
  box-shadow: none;
}

/* Dashboard ampliado — CTA destacado y secciones */
.dashboard__cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-6);
  border-radius: var(--radio);
  background: linear-gradient(135deg, var(--c-granate) 0%, var(--c-granate-oscuro) 100%);
  color: var(--c-blanco);
  text-decoration: none;
  box-shadow: var(--sombra-md);
  transition: transform 0.1s ease-in, box-shadow 0.1s ease-in;
}
.dashboard__cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-lg);
}
.dashboard__cta-titulo {
  grid-column: 1;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}
.dashboard__cta-descripcion {
  grid-column: 1;
  font-size: var(--fs-sm);
  opacity: 0.95;
  line-height: 1.4;
}
.dashboard__cta-flecha {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size: 2.5rem;
  font-weight: var(--fw-bold);
  align-self: center;
}

.dashboard__seccion { margin: 0 0 var(--sp-7); }
.dashboard__cards {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.dashboard__cards li { margin: 0; }
.dashboard__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: var(--borde-suave);
  border-radius: var(--radio);
  background: var(--c-superficie);
  color: var(--c-texto);
  text-decoration: none;
  transition: border-color 0.1s ease-in, transform 0.1s ease-in;
}
.dashboard__card:hover {
  border-color: var(--c-granate);
  transform: translateY(-1px);
}
.dashboard__card-titulo {
  font-family: var(--fuente-titulo);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
}
.dashboard__card-descripcion {
  color: var(--c-texto-suave);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* En pantallas estrechas la flecha del CTA pierde sentido — la oculta */
@media (max-width: 30rem) {
  .dashboard__cta { grid-template-columns: 1fr; }
  .dashboard__cta-flecha { display: none; }
}

/* --- 17. UX-3a — filtros unificados, chips y empty state -------------- *
 * Patrón reutilizable entre listados del panel. Convención BEM:
 *   .chips, .chip, .chip__label, .chip__close
 *   .empty-state, .empty-state__titulo, .empty-state__descripcion,
 *     .empty-state__acciones
 *   .panel__filtros--colapsable, .panel__filtros-wrap,
 *     .panel__filtros-summary, .panel__filtros-cuerpo,
 *     .panel__filtros-acciones, .panel__filtros-contador
 * No cambia el patrón base `.panel__filtros` definido en §12.
 * --------------------------------------------------------------------- */

/* --- 17.1 Filtros colapsables y bloque de acciones --------------------- */
.panel__filtros--colapsable {
  display: block;     /* el flex de la versión plana no aplica al wrap */
}

.panel__filtros-wrap {
  border: var(--borde-suave);
  border-radius: var(--radio-sm);
  background: var(--c-superficie-2);
  padding: 0;
}
.panel__filtros-wrap > .panel__filtros-summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
  padding: 0.6rem 0.85rem;
  list-style: revert;
  color: var(--c-texto);
}
.panel__filtros-wrap[open] > .panel__filtros-summary {
  border-bottom: var(--borde-suave);
}
.panel__filtros-contador {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: var(--fs-sm);
  color: var(--c-granate);
  font-weight: var(--fw-bold);
}
.panel__filtros-cuerpo {
  padding: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
}

.panel__filtros-acciones {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  align-items: center;
}

@media (max-width: 40rem) {
  .panel__filtros-cuerpo { flex-direction: column; align-items: stretch; }
  .panel__filtros-acciones { flex-direction: column; }
  .panel__filtros-acciones .btn { width: 100%; }
}

/* --- 17.2 Chips de filtros activos ------------------------------------- */
.chips {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.35rem 0.2rem 0.7rem;
  background: var(--c-superficie-2);
  border: var(--borde-suave);
  border-radius: var(--radio-pill);
  font-size: var(--fs-sm);
  color: var(--c-texto);
}
.chip__label { white-space: nowrap; }
.chip__close {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: transparent;
  color: var(--c-texto-suave);
  text-decoration: none;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.chip__close:hover {
  background: var(--c-peligro-bg);
  color: var(--c-peligro);
}

/* --- 17.3 Empty state -------------------------------------------------- */
.empty-state {
  border: 1px dashed var(--c-borde);
  border-radius: var(--radio);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  background: var(--c-superficie-2);
  color: var(--c-texto-suave);
  margin: var(--sp-3) 0;
}
.empty-state__titulo {
  margin: 0 0 var(--sp-2);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-lg);
  color: var(--c-texto);
}
.empty-state__descripcion {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
}
.empty-state__acciones {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* --- 17.4 Paginación — pulido visual ---------------------------------- */
.paginacion__info {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}

/* --- 18. UX-4a — Patrón canónico de formulario ------------------------- */
/* Asterisco visual del label obligatorio. aria-hidden="true" en el
   propio <abbr>; la obligatoriedad se anuncia vía aria-required en el
   input. */
.form__requerido {
  color: var(--c-peligro);
  margin-left: 0.15em;
  font-weight: var(--fw-bold);
  text-decoration: none;
  cursor: help;
}

/* Modificador BEM para campo con error: refuerza visualmente el input
   más allá del texto rojo bajo el control. */
.form__campo--error input,
.form__campo--error select,
.form__campo--error textarea {
  border-color: var(--c-peligro);
  background: var(--c-peligro-bg);
}
.form__campo--error input:focus,
.form__campo--error select:focus,
.form__campo--error textarea:focus {
  outline-color: var(--c-peligro);
}

/* Título dentro de form__errores (errores no asociados a un campo). */
.form__errores-titulo {
  margin: 0 0 0.25rem;
  font-size: var(--fs-sm);
}

/* Contador de caracteres restantes (preparado para UX-4c/UX-4d, donde
   se aplicará a textareas con minlength como motivos de anulación o
   cancelación). El JS que lo pinte se introducirá en su subbloque. */
.form__contador {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--c-texto-suave);
  font-variant-numeric: tabular-nums;
}
.form__contador--alerta {
  color: var(--c-peligro);
  font-weight: var(--fw-medium);
}

/* En móvil estrecho, el form de "añadir línea" colapsa a columna única
   para que el select de variante y el input de cantidad respiren. */
@media (max-width: 30rem) {
  .form--linea {
    grid-template-columns: 1fr;
  }
}