/* =============================================================================
   Marca BBosch sobre Vuexy
   -----------------------------------------------------------------------------
   Vuexy deriva TODOS sus componentes de `var(--bs-primary)` mediante `color-mix()`
   (ver el bloque `.btn-primary` en core.css:9993, que redefine los defaults de
   Bootstrap en términos de la variable). Por eso reemplazar la marca no exige
   recompilar SCSS: basta redirigir un puñado de custom properties.

   Este archivo se carga DESPUÉS de core.css.

   Contrastes calculados (WCAG 2.1, fórmula de luminancia relativa):
     · #1c1a17 sobre #eb6e1e ......... 5.61:1  ✓ AA texto normal
     · #b34c08 sobre blanco .......... 5.31:1  ✓ AA texto normal
     · #eb6e1e sobre blanco .......... 3.10:1  ✗ AA texto / ✓ AA componentes (1.4.11)
   De ahí que el naranja puro se use como FONDO y para bordes/iconos, nunca como
   texto pequeño: para eso están las variantes `-ink`.
   ============================================================================= */

:root {
  /* El naranja exacto muestreado del logotipo. */
  --bs-primary: #eb6e1e;
  --bs-primary-rgb: 235, 110, 30;

  /* Tinta sobre el naranja. Blanco daría 3.10:1 y no pasa AA; este casi-negro da 5.61:1. */
  --bs-primary-contrast: #1c1a17;

  /* La marca como TEXTO (enlaces): naranja oscurecido hasta pasar AA sobre claro. */
  --bs-link-color: #b34c08;
  --bs-link-color-rgb: 179, 76, 8;
  --bs-link-hover-color: #8f3d06;
  --bs-link-hover-color-rgb: 143, 61, 6;

  /* Derivadas sutiles (fondos de badge, bordes, énfasis) en la misma familia. */
  --bs-primary-bg-subtle: #fdf0e9;
  --bs-primary-border-subtle: #fadbc7;
  --bs-primary-text-emphasis: #6b2d05;
}

/* Tema oscuro: sobre fondo oscuro el naranja puro sí funciona como texto, pero
   aclarado gana margen. Las sutiles se invierten. */
[data-bs-theme='dark'] {
  --bs-link-color: #f2853d;
  --bs-link-color-rgb: 242, 133, 61;
  --bs-link-hover-color: #f79a5e;
  --bs-link-hover-color-rgb: 247, 154, 94;

  --bs-primary-bg-subtle: #4a2b12;
  --bs-primary-border-subtle: #7a4318;
  --bs-primary-text-emphasis: #f2a875;
}

/* `.text-primary` usa `rgba(var(--bs-primary-rgb), …)`, o sea el naranja puro: 3.10:1
   sobre claro. Se redirige a la tinta para que el texto de marca sea legible, sin
   tocar `--bs-primary-rgb` (que también alimenta tintes y anillos de foco, donde el
   naranja puro es el correcto). */
.text-primary {
  color: var(--bs-link-color) !important;
}

/* Numerales tabulares en las columnas de importes: sin esto las cifras bailan al
   comparar filas. Se conserva del sistema de diseño anterior. */
.num,
.text-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-align: end;
}

/* El wordmark de BBosch es apaisado (200x47) y no cabe en el sidebar colapsado;
   se oculta junto al resto del texto del menú. */
.layout-menu-collapsed:not(.layout-menu-hover) .app-brand-logo-img {
  display: none;
}

/* -----------------------------------------------------------------------------
   Columna de acción anclada al borde derecho.
   Las tablas de cajas tienen 14-15 columnas y se desplazan en horizontal; sin
   esto el botón "Ver" queda fuera de la pantalla. Vuexy trae DataTables
   FixedColumns para lo mismo, pero exige inicializar la tabla por JS: mientras
   no se adopte (etapa 5), esto lo resuelve con CSS y sin dependencias.
   -------------------------------------------------------------------------- */
.table > :not(caption) > * > th.col-accion,
.table > :not(caption) > * > td.col-accion {
  position: sticky;
  inset-inline-end: 0;
  z-index: 2;
  background-color: var(--bs-card-bg, var(--bs-body-bg));
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.18);
}
.table-hover > tbody > tr:hover > td.col-accion {
  background-color: var(--bs-table-hover-bg);
}

/* -----------------------------------------------------------------------------
   Tarjeta de cargador (portal de carga masiva). Es un enlace grande con icono,
   título y flecha; Bootstrap no trae un componente equivalente.
   -------------------------------------------------------------------------- */
.loader-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.loader-card:hover {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
  color: inherit;
}
.loader-card .lc-go {
  margin-inline-start: auto;
  opacity: 0.5;
}

/* -----------------------------------------------------------------------------
   Stepper del ciclo de vida de la caja (Creado → Autorizado → Liberado).
   Vuexy incluye la librería bs-stepper, pero está pensada para formularios por
   pasos con navegación; aquí solo hay que MOSTRAR en qué punto va la caja, así
   que se resuelve con flexbox y los tokens del tema.
   -------------------------------------------------------------------------- */
.paso {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}
.paso-pt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  font-size: 0.6875rem;
  font-weight: 600;
}
.paso.done {
  color: var(--bs-body-color);
}
.paso.done .paso-pt {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  color: #fff;
}
.paso.current {
  color: var(--bs-body-color);
  font-weight: 600;
}
.paso.current .paso-pt {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-primary-contrast);
}
.paso-rej {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--bs-danger);
  font-weight: 600;
}
.paso-ln {
  flex: 1 1 1.5rem;
  min-inline-size: 1.5rem;
  block-size: 1px;
  background-color: var(--bs-border-color);
}
.paso-ln.done {
  background-color: var(--bs-success);
}

/* Estado terminal (Anulado / Rechazado). No son el paso 4 de un avance lineal:
   son ramas que cierran el ciclo, y dibujarlas en la fila del stepper enseñaba
   que toda caja termina anulada, que es falso. */
.paso-terminal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}
.paso-terminal.anulado {
  color: var(--bs-secondary-text-emphasis);
}
.paso-terminal.rechazado {
  color: var(--bs-danger-text-emphasis);
}

/* =============================================================================
   ACCESIBILIDAD — correcciones de contraste
   -----------------------------------------------------------------------------
   Medidas con la fórmula de luminancia relativa de WCAG 2.1 sobre los colores
   que el tema resuelve de verdad en pantalla, no sobre los nombres de token.
   ============================================================================= */

/* El gris de texto secundario de Vuexy (#acaab1) da 2.30:1 sobre tarjeta blanca:
   no alcanza ni el 3:1 de texto grande. Se oscurece a 4.66:1 conservando el matiz.
   Queda por debajo del cuerpo (#6d6b77, 5.22:1) y muy por debajo del encabezado
   (#444050, 10.02:1), así que la jerarquía de tres pasos se mantiene. */
:root {
  --bs-secondary-color: #75737e;
}
[data-bs-theme='dark'] {
  /* #76778e daba 2.84:1 sobre la tarjeta oscura #2f3349; este da 4.82:1. */
  --bs-secondary-color: #9ea0b5;
}

/* Los badges `bg-label-*` pintan el texto con el color puro de la variante sobre
   un fondo teñido de esa misma variante. Medido: Autorizado 1.83:1 · Liberado
   1.94:1 · Creado 2.03:1 · Rechazado 2.69:1 · Anulado 3.17:1 — los cinco fallan.
   Es la columna que porta el estado de la caja, o sea la información central del
   producto, así que no puede quedar así.

   Arreglo con el propio token de Bootstrap 5.3 pensado para texto sobre fondo
   sutil (`-text-emphasis`), tiñendo desde el mismo matiz en vez de recurrir al
   gris. Resultado medido: 8.13:1 a 10.42:1 en claro, 6.61:1 en oscuro. */
.badge.bg-label-primary { color: var(--bs-primary-text-emphasis) !important; }
.badge.bg-label-secondary { color: var(--bs-secondary-text-emphasis) !important; }
.badge.bg-label-success { color: var(--bs-success-text-emphasis) !important; }
.badge.bg-label-danger { color: var(--bs-danger-text-emphasis) !important; }
.badge.bg-label-warning { color: var(--bs-warning-text-emphasis) !important; }
.badge.bg-label-info { color: var(--bs-info-text-emphasis) !important; }

/* =============================================================================
   SEPARACIÓN FIGURA / FONDO
   -----------------------------------------------------------------------------
   El skin `bordered` hace `--bs-body-bg: var(--bs-paper-bg)` a propósito: cambia
   elevación por bordes. El efecto medido es que página, tarjeta, barra superior y
   sidebar comparten EXACTAMENTE el mismo color —blanco en claro, #2f3349 en
   oscuro— y una tabla larga se lee como bandas flotando sin contenedor.

   Se devuelve al fondo de página el tono propio de Vuexy, un paso por detrás del
   papel. Los bordes del skin se conservan: sigue sin haber sombras, que es lo que
   se buscaba al elegirlo, pero las tarjetas vuelven a tener contorno.
   ============================================================================= */
:root[data-skin='bordered'],
[data-bs-theme='light'][data-skin='bordered'] {
  --bs-body-bg: #f8f7fa;
}
[data-bs-theme='dark'][data-skin='bordered'] {
  --bs-body-bg: #25293c;
}

/* =============================================================================
   SUPERFICIES DEL NAVEGADOR
   -----------------------------------------------------------------------------
   Lo que no dibujamos también comunica. Selección, cursor, foco y barras de
   scroll vienen con los colores por defecto del navegador, que no pertenecen a
   ningún sistema de diseño. Estaban tematizadas antes del cambio de template y
   se perdieron en la migración.
   ============================================================================= */
::selection {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}
body {
  caret-color: var(--bs-primary);
  scrollbar-color: var(--bs-border-color) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  inline-size: 11px;
  block-size: 11px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--bs-border-color);
  border-radius: 99px;
  border: 3px solid var(--bs-body-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary-color);
}

/* Anillo de foco visible y consistente para quien navega con teclado. */
:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
.loader-card:focus-visible {
  border-color: var(--bs-primary);
}

/* =============================================================================
   BARRA DE ACCIONES EN LOTE
   -----------------------------------------------------------------------------
   Antes vivía ENCIMA de la tabla: se seleccionaba abajo y se actuaba arriba, con
   la selección fuera de vista. Ahora se ancla al pie del área de contenido y sólo
   aparece cuando hay algo seleccionado.
   ============================================================================= */
/* `hidden` es un atributo, no una clase, y las utilidades de display de Bootstrap
   (`.d-flex`) llevan !important: sin esto, un elemento oculto con [hidden] se sigue
   viendo. Vale para toda la app, no sólo para la barra de lote. */
[hidden] {
  display: none !important;
}

.barra-lote {
  position: sticky;
  inset-block-end: 0;
  z-index: 3;
  margin-block-start: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-paper-bg);
  box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, 0.35);
}

/* =============================================================================
   CABECERA DE TABLA PEGAJOSA
   -----------------------------------------------------------------------------
   Las tablas de cajas tienen 14-15 columnas y decenas de filas: al desplazarse,
   el significado de cada columna desaparecía. DataTables trae FixedHeader para
   esto, pero cuesta 4.45 MB; dos reglas de CSS resuelven lo mismo.
   `.table-responsive` ya recorta con overflow, así que el sticky se ancla a él.
   ============================================================================= */
.table-sticky {
  max-block-size: 70vh;
  overflow: auto;
}
.table-sticky thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  background-color: var(--bs-paper-bg);
}
/* La celda de esquina cruza cabecera fija y columna anclada: necesita ganar a ambas. */
.table-sticky thead th.col-accion {
  z-index: 4;
}

/* Encabezado ordenable: el icono de "ordenable" se insinúa y sólo se afirma al
   pasar por encima, para no convertir la cabecera en una fila de flechas. */
.th-orden:hover {
  color: var(--bs-primary) !important;
}
.th-orden-icono {
  opacity: 0;
  transition: opacity 0.15s ease;
}
th:hover .th-orden-icono,
.th-orden:focus-visible .th-orden-icono {
  opacity: 0.55;
}

/* =============================================================================
   OBJETIVOS TÁCTILES
   -----------------------------------------------------------------------------
   En móvil varios controles medían menos de 24px (casillas de 15.6px, migas de
   18px). Se amplía el área pulsable sin cambiar el tamaño visual del control.
   ============================================================================= */
@media (pointer: coarse) {
  .table .form-check-input {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }
  .breadcrumb-item > a,
  .enlace-volver {
    display: inline-block;
    padding-block: 0.35rem;
  }
}