/* ============================================================================
   nvx-theme.css — Sistema de diseño Novacomex
   ----------------------------------------------------------------------------
   ESTE ES EL ÚNICO ARCHIVO DONDE SE DEFINEN TOKENS.

   Reglas del sistema:
     · Nunca escribir un hex de marca en un .razor — usar siempre var(--nvx-*).
     · Nunca un bloque <style> dentro de un .razor — usar su .razor.css aislado.
     · Nunca redefinir estas variables en un componente.

   La rampa turquesa sale del globo de logo-novacomex.png (#00a99d).
   ============================================================================ */

:root {

  /* ══ MARCA ════════════════════════════════════════════════════════════════
     Rampa derivada del turquesa del logo.

     LÍMITE DE CONTRASTE (medido contra blanco puro, umbral WCAG AA = 4,5:1):

       --nvx-500   2,93:1   ✗   sólo acentos, bordes, íconos, anillo de foco
       --nvx-600   3,89:1   ✗   sólo texto grande (≥24px) y estados hover
       --nvx-700   4,89:1   ✓   botones primarios — el más claro que aguanta texto blanco
       --nvx-800   7,56:1   ✓   headers de tabla y de sección
       --nvx-900  11,05:1   ✓   topbar, sidebar

     En una frase: el turquesa de marca ACENTÚA, los tonos 700-900 CARGAN TEXTO.
     Texto blanco sobre --nvx-500 o --nvx-600 es un bug de accesibilidad.
     ═══════════════════════════════════════════════════════════════════════ */
  --nvx-50:   #f0fafa;   /* fondo de página                                  */
  --nvx-100:  #e0f5f4;   /* superficie suave, badges, hover de fila          */
  --nvx-200:  #c2e8e6;   /* bordes                                           */
  --nvx-300:  #8dd4d0;   /* bordes fuertes, separadores                      */
  --nvx-500:  #00a99d;   /* ★ MARCA — acentos, íconos, foco                  */
  --nvx-600:  #009187;   /* hover de primario                                */
  --nvx-700:  #007f76;   /* botones primarios, pressed                       */
  --nvx-800:  #005f58;   /* headers de tabla y de sección                    */
  --nvx-900:  #004440;   /* topbar, sidebar, superficies densas              */

  /* ══ NEUTROS ══════════════════════════════════════════════════════════════
     Grises con sesgo teal: un gris puro junto al turquesa se ve sucio.
     ═══════════════════════════════════════════════════════════════════════ */
  --nvx-gray-50:   #f8fafa;   /* fondo alterno, zebra de tabla               */
  --nvx-gray-100:  #eef2f2;   /* superficies inactivas, tabs apagados        */
  --nvx-gray-200:  #dde5e5;   /* bordes, separadores                         */
  --nvx-gray-400:  #8b9a9a;   /* texto muted, placeholders                   */
  --nvx-gray-600:  #4f5e5e;   /* texto secundario, labels                    */
  --nvx-gray-800:  #1e2b2b;   /* texto principal                             */

  --nvx-white: #ffffff;

  /* ══ SEMÁNTICOS ═══════════════════════════════════════════════════════════
     Los cuatro ya vivían en las páginas: aquí sólo se les da nombre.
     ═══════════════════════════════════════════════════════════════════════ */
  --nvx-success:      #2a9d6e;
  --nvx-success-bg:   #e6f6ef;
  --nvx-success-bd:   #b9e2d0;
  --nvx-success-text: #1c6f4c;

  --nvx-warning:      #d97706;
  --nvx-warning-bg:   #fdf3e3;
  --nvx-warning-bd:   #f2ddb8;
  --nvx-warning-text: #8a4c06;

  --nvx-danger:       #c0392b;
  --nvx-danger-bg:    #fbeceb;
  --nvx-danger-bd:    #f2cbc7;
  --nvx-danger-text:  #8f2b20;

  --nvx-info:         #0891b2;
  --nvx-info-bg:      #e4f4f9;
  --nvx-info-bd:      #b6e0ec;
  --nvx-info-text:    #0b6d87;

  /* Violeta. No es un estado: marca un dato que se cuenta o se refiere a otro
     documento —conteos, pólizas—, donde usar rojo o ámbar diría una gravedad
     que no existe. Lo introdujo el control operativo; vive aquí para que la
     siguiente pantalla que lo necesite no invente su propio morado. */
  --nvx-accent:       #7c3aed;
  --nvx-accent-bg:    #f5f0ff;
  --nvx-accent-bd:    #ddd6fe;
  --nvx-accent-text:  #5b21b6;

  /* ══ ESTADOS DE NEGOCIO ═══════════════════════════════════════════════════
     Alias sobre los semánticos. Las páginas usan ESTOS, no hex sueltos.
     ═══════════════════════════════════════════════════════════════════════ */
  --nvx-vigente-bg:     var(--nvx-success-bg);
  --nvx-vigente-text:   var(--nvx-success-text);
  --nvx-vigente-bd:     var(--nvx-success-bd);

  --nvx-porvencer-bg:   var(--nvx-warning-bg);
  --nvx-porvencer-text: var(--nvx-warning-text);
  --nvx-porvencer-bd:   var(--nvx-warning-bd);

  --nvx-vencida-bg:     var(--nvx-danger-bg);
  --nvx-vencida-text:   var(--nvx-danger-text);
  --nvx-vencida-bd:     var(--nvx-danger-bd);

  --nvx-archivada-bg:   var(--nvx-gray-100);
  --nvx-archivada-text: var(--nvx-gray-600);
  --nvx-archivada-bd:   var(--nvx-gray-200);

  /* ══ SCORING DE CLIENTES ══════════════════════════════════════════════════
     Las cuatro categorías de la matriz de crédito: A excelente, B aceptable,
     C alto riesgo, D crítico. La matriz las pinta verde, amarillo, naranja y
     rojo, y el comercial las reconoce por ese orden; por eso B y C no pueden
     ser el mismo ámbar de --nvx-warning. El tono sólido es para la dona y el
     borde; el texto va siempre en -text sobre -bg.
     ═══════════════════════════════════════════════════════════════════════ */
  --nvx-score-a:      var(--nvx-success);
  --nvx-score-a-bg:   var(--nvx-success-bg);
  --nvx-score-a-bd:   var(--nvx-success-bd);
  --nvx-score-a-text: var(--nvx-success-text);

  --nvx-score-b:      #eab308;
  --nvx-score-b-bg:   #fef9c3;
  --nvx-score-b-bd:   #fde68a;
  --nvx-score-b-text: #713f12;

  --nvx-score-c:      #ea580c;
  --nvx-score-c-bg:   #ffedd5;
  --nvx-score-c-bd:   #fed7aa;
  --nvx-score-c-text: #9a3412;

  --nvx-score-d:      var(--nvx-danger);
  --nvx-score-d-bg:   var(--nvx-danger-bg);
  --nvx-score-d-bd:   var(--nvx-danger-bd);
  --nvx-score-d-text: var(--nvx-danger-text);

  /* ══ TIPOGRAFÍA ═══════════════════════════════════════════════════════════
     Dos familias, dos oficios. Servidas localmente desde wwwroot/fonts/.
     ═══════════════════════════════════════════════════════════════════════ */
  --nvx-font:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nvx-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --nvx-text-h1:      22px;   /* título de página          · 800 */
  --nvx-text-h2:      16px;   /* título de card            · 700 */
  --nvx-text-h3:      14px;   /* título de sección         · 700 */
  --nvx-text-body:    13px;   /* cuerpo, celdas de tabla   · 400 */
  --nvx-text-sm:      12px;   /* label de campo            · 700 */
  --nvx-text-xs:      11px;   /* caption, muted            · 600 */

  --nvx-tracking-label: .09em;   /* labels y headers en mayúsculas */
  --nvx-tracking-tight: -.02em;  /* títulos grandes                */

  /* ══ ESPACIADO ════════════════════════════════════════════════════════════
     Misma escala que adx-theme.css de Aduanimex, para que el equipo no
     tenga que recordar dos sistemas.
     ═══════════════════════════════════════════════════════════════════════ */
  --nvx-space-xs:  4px;
  --nvx-space-sm:  8px;
  --nvx-space-md:  16px;
  --nvx-space-lg:  24px;
  --nvx-space-xl:  32px;

  /* ══ BORDES Y RADIOS ══════════════════════════════════════════════════════ */
  --nvx-r-sm: 5px;    /* botones, inputs, badges     */
  --nvx-r-md: 8px;    /* cards, alertas, paneles     */
  --nvx-r-lg: 12px;   /* modals                      */

  --nvx-border:       1px solid var(--nvx-gray-200);
  --nvx-border-input: 1.5px solid var(--nvx-gray-200);

  /* ══ SOMBRAS ══════════════════════════════════════════════════════════════
     Tintadas con el verde profundo de marca, no con negro puro.
     ═══════════════════════════════════════════════════════════════════════ */
  --nvx-shadow-sm: 0 1px 2px rgba(0, 68, 64, .06);
  --nvx-shadow:    0 1px 3px rgba(0, 68, 64, .08), 0 8px 20px -12px rgba(0, 68, 64, .16);
  --nvx-shadow-md: 0 4px 16px rgba(0, 68, 64, .14);
  --nvx-shadow-lg: 0 12px 32px rgba(0, 68, 64, .18);

  --nvx-focus-ring: 0 0 0 3px rgba(0, 169, 157, .22);

  /* ══ MOVIMIENTO ═══════════════════════════════════════════════════════════ */
  --nvx-transition: .15s ease;

  /* ══ CAPAS ════════════════════════════════════════════════════════════════ */
  --nvx-z-sticky:  100;
  --nvx-z-topbar:  200;
  --nvx-z-overlay: 1000;
  --nvx-z-toast:   1100;
}


/* ============================================================================
   RESET BASE
   Deliberadamente conservador: sólo box-sizing y el margen del body.
   NO se hace `* { margin:0; padding:0 }` porque MudBlazor depende de los
   márgenes por defecto de listas y encabezados en varios componentes.
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--nvx-font);
  font-size: var(--nvx-text-body);
  line-height: 1.6;
  color: var(--nvx-gray-800);
  background: var(--nvx-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================================
   TIPOGRAFÍA BASE
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nvx-font);
  color: var(--nvx-800);
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--nvx-text-h1); font-weight: 800; letter-spacing: var(--nvx-tracking-tight); }
h2 { font-size: var(--nvx-text-h2); font-weight: 700; }
h3 { font-size: var(--nvx-text-h3); font-weight: 700; }

a {
  color: var(--nvx-700);
  text-underline-offset: 3px;
}
a:hover { color: var(--nvx-600); }

/* Foco visible y consistente en todo lo que se puede enfocar con teclado.
   :focus-visible y no :focus para que el clic con mouse no dibuje el anillo.

   Se excluye tabindex="-1" a propósito: Blazor le pone ese atributo al primer
   <h1> y lo enfoca al navegar, para que los lectores de pantalla anuncien la
   página nueva. Eso es foco programático, no de teclado — sin esta exclusión,
   el título de cada página aparecía con un recuadro turquesa.

   El :not() va DENTRO de :where() para que la especificidad siga siendo 0 y
   cualquier componente pueda sobrescribir el anillo sin pelear. */
:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--nvx-500);
  outline-offset: 2px;
  border-radius: var(--nvx-r-sm);
}

/* Blazor enfoca el primer <h1> al navegar y le deja tabindex="-1". Ese foco es
   para lectores de pantalla, no para la vista: el navegador le dibujaba su
   anillo por defecto. Se suprime explícitamente. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

/* MudBlazor pone `outline: 0` en botones, iconos, tabs, links de navegación y
   filas de tabla (especificidad de clase, que gana sobre la regla de arriba).
   Con mouse no se nota, pero deja a quien navega con teclado sin saber dónde
   está parado. Se restituye el anillo, y sólo para :focus-visible. */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-tab:focus-visible,
.mud-list-item:focus-visible,
.mud-chip:focus-visible,
.mud-table-row:focus-visible {
  outline: 2px solid var(--nvx-500);
  outline-offset: 2px;
}


/* ============================================================================
   UTILIDADES MÍNIMAS
   Lo único que se permite como clase global: todo lo demás va en .razor.css.
   ============================================================================ */

/* Cifras que alinean por columna. Obligatorio en toda celda de dinero,
   cantidad o fecha numérica: el usuario compara verticalmente todo el día. */
.nvx-num {
  font-family: var(--nvx-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Encabezado de una columna numérica: alinea con las cifras de abajo. */
.nvx-th-num {
  text-align: right;
}

/* Códigos: NIT, número de D.O., subpartida, contenedor. */
.nvx-code {
  font-family: var(--nvx-font-mono);
  font-size: .92em;
  letter-spacing: -.01em;
}

/* Contenedor de contenido ancho (tablas, gráficas): el scroll horizontal
   ocurre AQUÍ dentro, nunca en el body de la página. */
.nvx-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Página inexistente. Usada por Routes.razor, que no tiene CSS aislado propio. */
.nvx-nohay {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 70px 24px;
  max-width: 520px;
  margin: 0 auto;
}

.nvx-nohay__icono {
  font-size: 48px;
  color: var(--nvx-300);
}

.nvx-nohay__titulo {
  margin: 0;
  font-size: var(--nvx-text-h1);
  color: var(--nvx-800);
}

.nvx-nohay__msg {
  margin: 0 0 12px;
  font-size: var(--nvx-text-body);
  color: var(--nvx-gray-600);
  line-height: 1.6;
}

/* Pantalla completa mientras se verifica la sesión. Usada por Routes.razor,
   que no tiene CSS aislado propio. */
.nvx-verificando {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--nvx-50);
}

/* Sólo para lectores de pantalla. */
.nvx-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================================
   SCROLLBAR
   ============================================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--nvx-300) transparent;
}
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--nvx-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--nvx-500); }


/* ============================================================================
   SELECCIÓN DE TEXTO
   ============================================================================ */
::selection {
  background: var(--nvx-200);
  color: var(--nvx-900);
}


/* ============================================================================
   ANIMACIONES GLOBALES
   Los componentes las referencian por nombre; no redefinir localmente.
   ============================================================================ */
@keyframes nvx-spin {
  to { transform: rotate(360deg); }
}

@keyframes nvx-shimmer {
  to { background-position: -200% 0; }
}

@keyframes nvx-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes nvx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respetar la preferencia del sistema. No es opcional. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   IMPRESIÓN
   Varias páginas se imprimen o se exportan a PDF desde el navegador.
   ============================================================================ */
@media print {
  body { background: #fff; }
  .nvx-no-print { display: none !important; }
  .nvx-scroll-x { overflow: visible !important; }
}