/*
  Design system Aduanimex para ArancelIA.

  Los colores se declaran una sola vez aquí y se usan siempre por variable.
  Nunca un hex en un componente: el administrador cambia la marca en caliente,
  y un componente que lleva el color escrito a mano no responde al cambio.
*/

:root {
    /*
      Paleta del logo de Asiscomex, medida sobre el PNG (k-means) y no a ojo.
      El logo es entero en azules: no tiene naranja. El navy y el naranja que
      traía el design system son los de Aduanimex, que es otra marca.

      Los nombres de las variables son los del design system y se conservan
      porque son su contrato: nombran un ROL, no un tono. «orange» es el acento
      —la barra de color, la candidata ganadora, la marca del logo— y aquí ese
      acento es el cerúleo del globo. Contraste medido con blanco encima:
      navy 7,06 · navy-dark 13,00 · header 13,54 · navy-light 5,93.
    */

    /* Primarios */
    --adx-navy: #055d90;        /* franja media del globo: barra y botones */
    --adx-navy-dark: #0c3547;   /* franja oscura, el color dominante: menú lateral */
    --adx-navy-light: #0b6a9a;  /* entre el medio y el cerúleo: activos, variantes */

    /* Encabezados: independiente del navbar a propósito. Es el azul de la
       palabra «Asiscomex». */
    --adx-header: #003054;

    /* Acento: el cerúleo del globo. Como texto sobre blanco da 4,56, justo por
       encima del mínimo: para escribir con él mejor navy-light. */
    --adx-orange: #057eaf;
    --adx-orange-light: #5fb0d6;
    --adx-orange-dark: #04668e;

    /* Semánticos */
    --adx-success: #1d9e75;
    --adx-danger: #d85a30;
    --adx-warning: #ef9f27;
    --adx-info: #378add;

    /* Grises */
    --adx-gray-50: #f3f6f9;
    --adx-gray-100: #eef0f5;
    --adx-gray-200: #dde1ec;
    --adx-gray-400: #8b92a9;
    --adx-gray-600: #4f5670;
    --adx-gray-800: #1e2235;

    --adx-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --adx-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

    --adx-space-xs: 4px;
    --adx-space-sm: 8px;
    --adx-space-md: 16px;
    --adx-space-lg: 24px;
    --adx-space-xl: 32px;

    --adx-r-sm: 6px;
    --adx-r-md: 10px;
    --adx-r-lg: 16px;

    --adx-shadow: 0 1px 2px rgba(12, 53, 71, 0.04), 0 4px 14px rgba(12, 53, 71, 0.06);
    --adx-shadow-md: 0 4px 16px rgba(12, 53, 71, 0.14);
}

html, body {
    font-family: var(--adx-font);
    background: var(--adx-gray-50);
    color: var(--adx-gray-800);
}

/* Barra corporativa, entre la cabecera y el contenido. */
.adx-color-bar {
    height: 3px;
    background: linear-gradient(90deg,
        var(--adx-navy) 0%,
        var(--adx-navy-light) 25%,
        var(--adx-orange) 50%,
        var(--adx-orange-light) 75%,
        var(--adx-success) 100%);
}

/*
  Un código de subpartida es una cifra que se compara, se copia y se lee dígito
  a dígito: va en monoespaciada y con las cifras alineadas, o los diez números
  se vuelven un borrón.
*/
.adx-codigo {
    font-family: var(--adx-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    font-weight: 700;
    color: var(--adx-navy);
}

.adx-cifra {
    font-variant-numeric: tabular-nums;
}

/* Etiqueta de un dato: pequeña, en mayúsculas, sin competir con el valor.
   En gray-600 y no en gray-400: a 11 px, el 400 sobre blanco no llega al
   contraste mínimo y la etiqueta se vuelve adivinanza. */
.adx-etiqueta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adx-gray-600);
}

/*
  Etiquetas de estado. El fondo es el color del rol muy aclarado y el texto el
  mismo color oscurecido: así se leen sobre blanco sin depender de un segundo
  juego de colores que habría que mantener a mano cuando cambie la marca.
*/
.adx-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.adx-badge--navy { background: var(--adx-navy); color: #ffffff; }
.adx-badge--borde { border-color: var(--adx-navy); color: var(--adx-navy); background: #ffffff; }
.adx-badge--gris { background: var(--adx-gray-100); color: var(--adx-gray-800); }
.adx-badge--success { background: color-mix(in srgb, var(--adx-success) 14%, #ffffff); color: color-mix(in srgb, var(--adx-success) 60%, #000000); }
.adx-badge--warning { background: color-mix(in srgb, var(--adx-warning) 18%, #ffffff); color: color-mix(in srgb, var(--adx-warning) 45%, #000000); }
.adx-badge--danger { background: color-mix(in srgb, var(--adx-danger) 14%, #ffffff); color: color-mix(in srgb, var(--adx-danger) 60%, #000000); }
.adx-badge--info { background: color-mix(in srgb, var(--adx-info) 14%, #ffffff); color: color-mix(in srgb, var(--adx-info) 55%, #000000); }

.adx-apagado {
    color: var(--adx-gray-600);
}

/*
  MudBlazor por encima: solo lo que hace falta para que hable en adx.

  Los titulares se pintan por su sitio y no por su nivel. Teñir de navy todo lo
  que sea h6 dejó la marca de la barra superior navy sobre navy, es decir
  invisible: un color no se elige por la etiqueta sino por el fondo que va
  a tener debajo.
*/
.mud-main-content .mud-typography-h5,
.mud-main-content .mud-typography-h6 {
    color: var(--adx-header);
    font-weight: 700;
}

/* El contenido respira por arriba: el encabezado de pantalla no se pega a la
   barra. Va aquí y no en el CSS aislado del layout: el contenedor lo pinta
   MudBlazor y no lleva el atributo de ámbito. */
.mud-main-content .adx-contenido {
    padding-top: var(--adx-space-lg);
    padding-bottom: var(--adx-space-xl);
}

/* La barra superior es blanca, separada del contenido por una línea. */
.mud-appbar.adx-barra {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--adx-gray-200);
    color: var(--adx-gray-800);
}

/* Con la especificidad justa de MudBlazor no basta: la suya gana y el texto
   sale oscuro sobre el navy. */
.mud-table .mud-table-head .mud-table-cell {
    background: var(--adx-header);
    color: #ffffff;
    font-weight: 700;
}

.mud-paper {
    border-radius: var(--adx-r-lg);
}

/*
  Enlaces del cajón de navegación.

  MudBlazor pinta el activo con el color primario, que aquí es el mismo navy del
  fondo del cajón: el elemento seleccionado salía más oscuro que los demás, justo
  al revés de lo que tiene que pasar. Sobre fondo oscuro, lo activo va en blanco
  pleno y lo inactivo atenuado.

  Va en el tema y no en el CSS aislado del menú porque el <a> lo pinta MudBlazor
  dentro de su propio componente y no lleva el identificador de ámbito: un
  `::deep` desde fuera no lo alcanza.
*/
/* El pie del menú se queda abajo aunque haya pocos enlaces. */
.mud-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
}

.mud-drawer {
    border-right: 1px solid var(--adx-gray-200);
}

/* El menú lo pinta MudBlazor: el CSS aislado de NavMenu no lo alcanza. */
.mud-drawer .adx-nav {
    padding: var(--adx-space-xs) 12px 0;
}

.mud-drawer .mud-nav-link {
    margin: 2px 0;
    padding: 9px 12px;
    border-radius: var(--adx-r-md);
    color: var(--adx-gray-600);
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.mud-drawer .mud-nav-link:hover {
    color: var(--adx-header);
    background: var(--adx-gray-50);
}

.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .mud-nav-link.active .mud-nav-link-text {
    color: var(--adx-navy);
    font-weight: 800;
}

.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--adx-orange);
}

/* Menú en íconos (cajón mini cerrado): el ícono centrado y sin texto. MudBlazor
   ya esconde el texto; aquí se quitan el margen del ícono y el relleno lateral. */
.mud-drawer .adx-menu--mini .adx-nav {
    padding: var(--adx-space-xs) 10px 0;
}

.mud-drawer .adx-menu--mini .mud-nav-link {
    justify-content: center;
    padding: 10px 0;
}

.mud-drawer .adx-menu--mini .mud-nav-link .mud-nav-link-icon,
.mud-drawer .adx-menu--mini .mud-nav-link .mud-icon-root {
    margin: 0;
}

.mud-drawer .adx-menu--mini .mud-nav-link-text {
    display: none;
}

/* El activo: fondo cerúleo muy suave y una pestaña a la izquierda. */
.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    position: relative;
    background: color-mix(in srgb, var(--adx-orange) 10%, #ffffff);
}

.mud-drawer .mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--adx-orange);
}

/* El menú de cuenta (avatar). MudBlazor lo dibuja en su capa de popovers,
   fuera del layout: el CSS aislado no lo alcanza. */
.adx-cuenta-menu__cabecera {
    display: flex;
    flex-direction: column;
    min-width: 240px;
    padding: 12px 16px 10px;
    line-height: 1.35;
}

.adx-cuenta-menu__nombre {
    font-size: 14px;
    font-weight: 800;
    color: var(--adx-gray-800);
}

.adx-cuenta-menu__correo {
    font-size: 12px;
    color: var(--adx-gray-600);
}

.adx-usuario__salir button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    font: 600 15px var(--adx-font);
    color: var(--adx-danger);
    cursor: pointer;
}

.adx-usuario__salir button:hover {
    background: color-mix(in srgb, var(--adx-danger) 8%, #ffffff);
}

/* «Por revisar» en el menú, con su contador. */
.adx-nav__con-cuenta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.adx-contador {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--adx-warning);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}

/* Lo que se imprime (el informe de clasificación) va en hoja carta, que es la
   que se usa en Colombia. Vive aquí porque @page no admite CSS aislado. */
@page {
    size: letter;
    margin: 12mm;
}

/* En papel, el fondo gris de la aplicación no se imprime. */
@media print {
    html,
    body {
        background: #ffffff !important;
    }
}