/* =====================================================================
   ds-bridge.css — Capa puente (experimento Design System)
   Re-apunta las variables de Bootstrap 5.3 (--bs-*) y el sistema
   --primary-color de a360 hacia los tokens de ds-tokens.css.

   DEBE cargar DESPUÉS de aduanas360-theme.css (o del bootstrap CDN)
   y DESPUÉS de los <style> inline de cada layout → así su :root gana
   la cascada. Requiere que ds-tokens.css se cargue antes (define los
   --brand-*, --ink-*, etc.). Cada var() lleva fallback por robustez.

   ETAPA 1 (fundación): solo re-mapeo de MARCA con valores idénticos a
   los actuales → cambio visual ~nulo, pero ahora hay UNA fuente de
   verdad. La única diferencia visible buscada: el portal deja de usar
   #0F1436 y queda alineado al navy corporativo #003366.
   Las etapas 2-4 harán crecer este archivo (tipografía, botones,
   componentes).
   ===================================================================== */

:root {
  /* --- Marca → variables Bootstrap (--bs-*) --- */
  --bs-primary:        var(--brand-navy, #003366);
  --bs-primary-rgb:    0, 51, 102;
  --bs-secondary:      var(--ink-700, #333333);
  --bs-success:        var(--success, #28a745);
  --bs-warning:        var(--warning, #fd7e14);
  --bs-body-bg:        var(--paper, #ffffff);
  --bs-link-color:     var(--brand-navy, #003366);
  --bs-link-color-rgb: 0, 51, 102;
  /* --bs-danger se mantiene en #dc3545 (decisión: no descuadrar la familia subtle) */
  /* --bs-info, --bs-border-color y radios se difieren a etapas 4/6 para no introducir
     cambios visuales en la fundación. */

  /* --- Marca → sistema --primary-color de a360 (capa plana) --- */
  --primary-color:     var(--brand-navy, #003366);
  --secondary-color:   var(--ink-700, #333333);
  --success-color:     var(--success, #28a745);
  --warning-color:     var(--warning, #fd7e14);
}

/* =====================================================================
   ETAPA 2 — Tipografía corporativa (escala + jerarquía + pulido)
   Aplica la escala del DS con clamp() (responsiva). Las clases propias
   (.page-title, .card-title) conservan tamaño controlado; solo reciben
   pulido. Mono = stack nativo del DS (sin payload extra de fuente).
   ===================================================================== */
:root {
  --bs-body-line-height: 1.5;
  --bs-font-monospace:    var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
}

body {
  line-height: var(--lh-normal, 1.5);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  color: var(--primary-color, #003366);
  line-height: var(--lh-tight, 1.15);
  letter-spacing: var(--letter-tight, -0.02em);
}

/* Escala DS con clamp para los titulares de jerarquía (h1-h3). */
h1, .h1 { font-size: clamp(1.6rem, 1.35rem + 1.05vw, 2rem);   font-weight: 700; }  /* ≤32px */
h2, .h2 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.5rem);  font-weight: 600; }  /* ≤24px */
h3, .h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.25rem); font-weight: 600; } /* ≤20px */
h4, .h4 { font-size: 1.125rem; font-weight: 600; }  /* 18px */
h5, .h5 { font-size: 1rem;     font-weight: 600; }  /* 16px */
h6, .h6 { font-size: 0.875rem; font-weight: 600; letter-spacing: var(--letter-wide, 0.04em); } /* 14px */

/* Titulares propios: conservan tamaño controlado, reciben el pulido. */
.page-title { letter-spacing: -0.01em; }            /* mantiene su clamp 1.25-1.5rem */
.card-title { font-size: 1.05rem; letter-spacing: -0.01em; } /* ≈17px, consistente */

/* Utilitarios DS (opt-in) para componentes. */
.ds-eyebrow {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: var(--fs-xs, 12px);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--letter-caps, 0.08em);
  text-transform: uppercase;
  color: var(--brand-navy-500, #1e5aa0);
}
.ds-meta { font-size: var(--fs-sm, 14px); color: var(--fg-3, #6b727b); }
.ds-mono { font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace); }

/* =====================================================================
   ETAPA 3 — Botones: estilo DS (planos, tokenizados) + .btn-cta ámbar
   Conserva el sizing compacto ya afinado (padding/fuente). Cambia:
   gradiente → sólido, hover que oscurece (sin "lift"), press abajo,
   focus-ring navy del DS, radio más corporativo. NO renombra clases
   (contrato JS intacto). Añade .btn-cta (acento ámbar para la acción
   primaria destacada).
   ===================================================================== */
.btn {
  border-radius: var(--radius-md, 6px);
  transition:
    background-color var(--dur-fast, 120ms) var(--ease-out, ease),
    border-color var(--dur-fast, 120ms) var(--ease-out, ease),
    color var(--dur-fast, 120ms) var(--ease-out, ease),
    box-shadow var(--dur-fast, 120ms) var(--ease-out, ease),
    transform var(--dur-fast, 120ms) var(--ease-out, ease);
}

/* Primario — navy sólido (sin gradiente), estilo DS */
.btn-primary {
  background: var(--brand-navy, #003366);
  border: 1px solid var(--brand-navy, #003366);
  color: #fff;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
  background: var(--brand-navy-900, #00264d);
  border-color: var(--brand-navy-900, #00264d);
  color: #fff;
  transform: none;                 /* DS: hover oscurece, no levanta */
  box-shadow: var(--shadow-sm);
}
.btn-primary:focus {
  background: var(--brand-navy, #003366);
  border-color: var(--brand-navy, #003366);
  color: #fff;
}
.btn-primary:focus-visible { box-shadow: var(--shadow-focus); }
.btn-primary:active {
  background: var(--brand-navy-900, #00264d);
  border-color: var(--brand-navy-900, #00264d);
  color: #fff;
  transform: translateY(1px);      /* DS: press hacia abajo */
  box-shadow: none;
}

/* (Decisión del usuario, jun-2026) SIN acento ámbar en botones de acción.
   TODOS los botones primarios / de commit quedan en NAVY para consistencia
   (el ámbar solo caía en los forms con patrón .form-actions-bar = Cotización
   y Factura, lo cual se veía inconsistente vs el resto). Se retiraron .btn-cta
   y el override ámbar del submit. El token --brand-amber sigue disponible en
   ds-tokens.css por si se usa puntualmente a futuro. */

/* =====================================================================
   ETAPA 4 — Componentes: capa canónica token-driven
   Define UNA versión de cada componente con tokens DS (radio por
   componente: cards 10px). Las plantillas que tenían su copia local
   de .form-card fueron deduplicadas para heredar de acá (fuente única).
   .section-title / .stat-card / .filter-* quedan como canónicos para
   páginas sin copia local y para el dedup incremental restante.
   ===================================================================== */
.form-card {
  background: var(--paper, #fff);
  border: 1px solid var(--ink-200, #e3e6eb);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-sm);
  padding: clamp(1rem, 1.4vw, 1.75rem);
  margin-bottom: clamp(0.9rem, 1.2vh, 1.5rem);
}

/* Tarjeta de estadística (canónico DS; unifica radios divergentes 10/12px). */
.stat-card {
  background: var(--paper, #fff);
  border: 1px solid var(--ink-200, #e3e6eb);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-sm);
}

/* Sección de filtros (canónico DS). */
.filter-section, .filter-card {
  background: var(--paper, #fff);
  border: 1px solid var(--ink-200, #e3e6eb);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-sm);
}

/* Título de sección (canónico DS). */
.section-title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  color: var(--primary-color, #003366);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: -0.01em;
}