html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 180px;
    height: 24px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* Uppercase text input - mimics Windows Forms CharacterCasing.Upper */
.text-uppercase-input {
    text-transform: uppercase !important;
}
/* ==========================================================================
   Badge de estado fiscal (sifen-design §3.1 R1-R2, §3.4 R5)

   Reemplaza la comunicacion de estado por tachado + letra roja. Cada badge lleva
   SIEMPRE color + forma (glifo) + texto: el color nunca es el unico portador de
   significado, que es lo que exige WCAG 1.4.1 nivel A.

   Los colores NO son hex fijos: se derivan de los tokens PUBLICOS del tema activo
   (sifen-design §2.1, que prohibe tocar los internos --dxbl-*). Cada var() encadena
   los dos sistemas de temas que ofrece el ThemeSwitcher, en orden:

     1. --DS-*  -> temas Fluent (Light Blue, Dark Purple, y los 3 ISBO).
     2. --bs-*  -> temas Bootstrap (Blazing Berry, Blazing Dark, Office White, Purple),
                   que NO definen ningun --DS-*.
     3. hex     -> ultimo recurso, si algun dia se agrega un tema sin ninguno de los dos.

   ESTADO CONOCIDO (2026-09-26): verificado en los 5 temas Fluent (los 3 ISBO, Light
   Blue y Dark Purple), donde el badge sigue al tema correctamente. En los 4 temas
   BOOTSTRAP el paso 2 NO llega a aplicar y el badge queda con la paleta clara del
   hex aunque el tema sea oscuro (se ve en Blazing Dark). Falta diagnosticar por que
   --bs-*-bg-subtle no resuelve ahi. Se dejo pendiente a proposito: primero hay que
   definir que temas se mantienen en el ThemeSwitcher, y los Bootstrap son
   candidatos a salir.

   Los dos sistemas resuelven claro u oscuro por si solos segun el CSS cargado, asi
   que el badge sigue al tema sin detectar nada:
     --DS-color-surface-success-subdued-rest -> --DS-success-10  (claro) / -150 (oscuro)
     --bs-success-bg-subtle                  -> #d6f2d8 (claro) / #0a260c (oscuro)

   Por que NO se detecta el modo de otra forma:
   - Un @media (prefers-color-scheme: dark) esta MAL y ya se probo: lee la
     preferencia del sistema operativo, no el tema elegido en el ThemeSwitcher. Con
     un Mac en modo oscuro pintaba los badges oscuros sobre una grilla clara.
   - Tampoco sirve una clase en el DOM para Fluent: ese tema declara sus variables
     bajo ".dxbl-theme-fluent-mode-dark,:root", es decir que aplica a :root igual.
   ========================================================================== */
:root {
    /* Aprobado: el documento es valido y no hay nada que hacer. */
    --sifen-estado-ok-fondo: var(--DS-color-surface-success-subdued-rest, var(--bs-success-bg-subtle, #dff6dd));
    --sifen-estado-ok-texto: var(--DS-color-content-success-default-rest, var(--bs-success-text-emphasis, #0b6a0b));
    /* Requiere atencion del operador: corregir o revisar. */
    --sifen-estado-alerta-fondo: var(--DS-color-surface-warning-subdued-rest, var(--bs-warning-bg-subtle, #fff4ce));
    --sifen-estado-alerta-texto: var(--DS-color-content-warning-default-rest, var(--bs-warning-text-emphasis, #6b5900));
    /* Rechazado: hay trabajo pendiente sobre el documento. */
    --sifen-estado-error-fondo: var(--DS-color-surface-danger-subdued-rest, var(--bs-danger-bg-subtle, #fde7e9));
    --sifen-estado-error-texto: var(--DS-color-content-danger-default-rest, var(--bs-danger-text-emphasis, #a4262c));
    /* Esperando respuesta: NO es un error, es un desconocido. Nunca en rojo. */
    --sifen-estado-espera-fondo: var(--DS-color-surface-info-subdued-rest, var(--bs-info-bg-subtle, #e1f0fb));
    --sifen-estado-espera-texto: var(--DS-color-content-info-default-rest, var(--bs-info-text-emphasis, #0e5a8a));
    /* Borrador / sin enviar: todavia no entro al circuito fiscal. */
    --sifen-estado-neutro-fondo: var(--DS-color-surface-neutral-deep-rest, var(--bs-secondary-bg-subtle, #f0f0f0));
    --sifen-estado-neutro-texto: var(--DS-color-content-neutral-deep-rest, var(--bs-secondary-text-emphasis, #4a4a4a));
}

.sifen-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    /* 24px de alto minimo: WCAG 2.2 §2.5.8 Target Size, que es el punto de friccion
       de las pantallas compactas. */
    min-height: 24px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    /* El badge no se tacha nunca, ni cuando el documento esta anulado: el estado
       comercial es un eje aparte y tiene su propio badge. */
    text-decoration: none !important;
}

.sifen-estado-badge__glifo {
    font-size: 0.75rem;
    line-height: 1;
}

.sifen-estado-badge--ok {
    background-color: var(--sifen-estado-ok-fondo);
    color: var(--sifen-estado-ok-texto);
}

.sifen-estado-badge--alerta {
    background-color: var(--sifen-estado-alerta-fondo);
    color: var(--sifen-estado-alerta-texto);
}

.sifen-estado-badge--error {
    background-color: var(--sifen-estado-error-fondo);
    color: var(--sifen-estado-error-texto);
}

.sifen-estado-badge--espera {
    background-color: var(--sifen-estado-espera-fondo);
    color: var(--sifen-estado-espera-texto);
}

.sifen-estado-badge--neutro {
    background-color: var(--sifen-estado-neutro-fondo);
    color: var(--sifen-estado-neutro-texto);
}

/* Aviso de plazo de cancelacion por vencer (sifen-design §3.1 R4-bis).
   No es un badge de estado: es una cuenta regresiva, y por eso se ve distinto. */
.sifen-plazo-aviso {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 24px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sifen-estado-alerta-texto);
}

.sifen-plazo-aviso--vencido {
    color: var(--sifen-estado-error-texto);
    font-weight: 500;
}

/* ==========================================================================
   Indicador persistente del estado de SIFEN/DNIT (sifen-design 3.4)

   Vive en la barra superior del ApplicationWindowTemplate, en la categoria
   Diagnostic, asi que se ve en TODAS las pantallas. Es el "lugar donde mirar"
   que le faltaba al semaforo, que hasta ahora solo existia como toast de 20 s.

   Regla 1 (silencio cuando todo esta bien): sin degradacion ni lentitud el
   indicador es un punto gris SIN TEXTO. No desaparece (tiene que poder
   consultarse siempre) pero no pide atencion.

   Los colores reusan los MISMOS tokens --sifen-estado-* del badge fiscal: no
   se define una paleta nueva. Eso mantiene una sola gramatica de color en el
   producto y hereda el encadenamiento --DS-* -> --bs-* -> hex ya documentado
   arriba, con su limitacion conocida en los 4 temas Bootstrap.
   ========================================================================== */
.sifen-semaforo-compacto {
    /* Es un <button>: hay que sacarle la piel que le pone el navegador para que se vea
       como un indicador y no como un boton de formulario. El comportamiento de boton
       (clic, foco, Enter/Espacio) se conserva, que es justamente por lo que se eligio. */
    appearance: none;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    /* WCAG 2.2 2.5.8 Target Size: el item es clickeable, no puede ser mas chico. */
    min-height: 24px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    /* El texto puede ser largo ("Envio de documentos por lote sin servicio - y 2
       mas"): se recorta antes que empujar el resto de la barra.

       El ancho tiene que CEDER, no imponerse. Verificado en navegador
       (2026-09-27): con max-width fijo de 22rem (352 px) la barra adaptativa
       no lo hacia entrar por debajo de ~1000 px y lo colapsaba entero al menu
       "More items...", dejando el estado de la DNIT detras de un boton
       generico — lo contrario del "lugar persistente donde mirar"
       (sifen-design 3.4 R2). Con min-width:0 + un max-width proporcional el
       item se achica y sobrevive; lo que se pierde es cola de texto, no el
       indicador. El glifo nunca se recorta porque es el primer hijo y tiene
       flex-shrink:0.

       AdaptivePriority no aplica aca: ordena items ENTRE SI y esta Action es
       el unico item de su toolbar (ver el controller). */
    min-width: 0;
    max-width: min(22rem, 34vw);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El glifo es el portador de significado que sobrevive al recorte: nunca se
   encoge, aunque el texto se corte. */
.sifen-semaforo-compacto__glifo {
    flex-shrink: 0;
}

.sifen-semaforo-compacto__glifo {
    font-size: 0.75rem;
    line-height: 1;
}

/* Foco de teclado visible. Con outline (y no box-shadow) para que sobreviva al modo de
   alto contraste. Solo :focus-visible: el anillo aparece al tabular, no al hacer clic. */
.sifen-semaforo-compacto:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Afordancia de que es clickeable, sin cambiar el color (que porta significado). */
.sifen-semaforo-compacto:hover {
    filter: brightness(0.95);
}

.sifen-semaforo-compacto__texto {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Todo operativo y "no sabemos" comparten el gris discreto y sin fondo.
   Desconocido NUNCA se pinta como falla (Regla 7): no es un error, es
   ausencia de dato, y el rojo empujaria al operador a actuar sin motivo.

   CONTRASTE (medido en navegador con getComputedStyle, 2026-09-27):
   la discrecion se consigue con un gris mas claro que el texto normal, NO
   bajando la opacidad. La version anterior (token -deep- + opacity .75)
   daba 2.87:1 en los 4 temas Fluent claros y 3.48:1 en Dark Purple, contra
   el 4.5:1 que WCAG 2.2 AA exige para texto de 0.8125rem. El problema era
   la opacidad: al componer el gris sobre la barra se perdia justamente el
   contraste que el token ya traia bien.

   Se usa el token -subdued- (un escalon mas oscuro que -deep-) y se saca la
   opacity. Sigue leyendose como secundario porque el resto de la barra usa
   -default-, pero ahora es legible. Medido: 10.54:1 en los 4 temas claros
   y 9.15:1 en Dark Purple (el token invierte solo en modo oscuro). */
.sifen-semaforo-compacto--ok,
.sifen-semaforo-compacto--neutro {
    background-color: transparent;
    color: var(--DS-color-content-neutral-subdued-rest, var(--bs-secondary-color, #3f3f3e));
}

/* CONTRASTE: aca NO se puede usar --sifen-estado-alerta-texto. Ese token es
   --DS-color-content-warning-default-rest, que en Fluent claro es el naranja
   #f7630c: sobre el fondo ambar da 2.68:1 y falla AA. Es un color pensado
   para superficies, no para texto chico.

   El escalon -hovered- del MISMO token publico (#b24000 en claro) sube a
   4.99:1 sin salir del sistema de temas ni fijar un hex. En oscuro mejora
   igual (6.34:1 -> 7:1), asi que se aplica parejo y no por modo.
   El badge fiscal (.sifen-estado-badge--alerta) queda como esta: su tamano y
   su contexto son otros, y se mide por separado. */
.sifen-semaforo-compacto--alerta {
    background-color: var(--sifen-estado-alerta-fondo);
    color: var(--DS-color-content-warning-default-hovered, var(--sifen-estado-alerta-texto));
}

/* error ya cumple con el token -rest-: 5.22:1 en los 4 temas claros y
   4.74:1 en Dark Purple. No se toca. */
.sifen-semaforo-compacto--error {
    background-color: var(--sifen-estado-error-fondo);
    color: var(--sifen-estado-error-texto);
}

/* ---------- Detalle por operacion (modo expandido del componente) ---------- */
.sifen-semaforo-detalle {
    /* Pantalla de lectura y decision, no de captura: densidad Comfortable
       (sifen-design 2.4). */
    font-size: 0.875rem;
    line-height: 1.5;
}

.sifen-semaforo-detalle__atribucion {
    margin: 0 0 0.75rem 0;
}

.sifen-semaforo-detalle__pie {
    margin: 0.75rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--sifen-estado-neutro-texto);
}

.sifen-semaforo-tabla {
    width: 100%;
    border-collapse: collapse;
}

.sifen-semaforo-tabla__caption {
    text-align: left;
    font-weight: 600;
    padding-bottom: 0.375rem;
}

.sifen-semaforo-tabla th,
.sifen-semaforo-tabla td {
    text-align: left;
    padding: 0.375rem 0.75rem 0.375rem 0;
    vertical-align: top;
    border-bottom: 1px solid var(--sifen-estado-neutro-fondo);
}

/* Marca por que una operacion pesa mas en el estado global ponderado. */
.sifen-semaforo-tabla__critica {
    display: block;
    font-size: 0.75rem;
    color: var(--sifen-estado-neutro-texto);
}

.sifen-semaforo-tabla__impacto {
    max-width: 28rem;
}

.sifen-semaforo-tabla__sin-novedad {
    color: var(--sifen-estado-neutro-texto);
    opacity: 0.75;
}

/* Alerta del detalle por operacion.

   El alert de Blazor renderiza el mensaje colapsando los saltos de linea, asi que un
   listado de 6 operaciones sale como un parrafo corrido e ilegible. white-space:pre-line
   respeta los \n del texto sin necesidad de inyectar HTML en el mensaje — que ademas
   seria un vector de inyeccion, porque parte del texto sale de datos de la DNIT.

   Se aplica via WebMessageOptions.CssClass, que es API documentada de XAF.

   NOTA (actualizada 2026-09-27): la tabla del modo expandido YA existe y se renderiza
   en la home. Esta regla NO se borra: el alert sigue siendo el detalle que se ve desde
   cualquier otra pantalla sin tener que ir al Inicio. Son complementarios, no
   sustitutos — ver el comentario de MostrarDetalleAction_Execute, que explica por que
   no se navega al Inicio desde la barra (con TabbedMDI no funciona). */
.sifen-semaforo-alerta {
    white-space: pre-line;
}

/* Sangria francesa del listado de operaciones.

   Verificado en navegador (2026-09-27): con pre-line solo, una linea larga
   ("Envio inmediato de documentos: Intermitente (lento, ~16,8 s) - necesario
   para emitir") envuelve y su continuacion arranca pegada al margen, a la
   altura de la columna del glifo. Leido rapido parece una operacion mas.
   El hanging indent mete la continuacion debajo del texto y deja la columna
   del glifo libre, que es lo que hace que el listado se lea como lista.

   Como el mensaje es texto plano (no hay <li> donde colgar esto, y meter HTML
   seria el vector de inyeccion que se evito a proposito), se resuelve en el
   contenedor con text-indent negativo + padding compensatorio. */
.sifen-semaforo-alerta .xaf-alert-message {
    display: block;
    padding-left: 1.25rem;
    text-indent: -1.25rem;
}


/* ==========================================================================
   Dashboard de Inicio (WelcomeComponent)
   ==========================================================================

   Estas reglas vivian en un <style> inline dentro de WelcomeComponent.razor:
   ~390 lineas SIN scoped, con selectores genericos (.stat-card, .stat-value,
   .doc-info, .section-title). Eran reglas globales que cualquier otra vista
   del portal podia pisar o heredar sin querer.

   Se movieron aca con prefijo .sifen-home-* y no a un WelcomeComponent.razor.css
   (CSS isolation) por dos razones concretas, verificadas en el proyecto:

   1. El bundle scoped NO esta linkeado. _Host.cshtml carga styles.css de
      DevExpress y css/site.css, y no existe ningun link a
      SIFEN.Portal.Blazor.Server.styles.css (tampoco hay ningun .razor.css en
      el proyecto). Con isolation las reglas simplemente no se aplicarian
      hasta agregar ese link.
   2. El atributo b-xxxxx que agrega isolation no llega al DOM interno que
      renderiza DxButton, que es justo donde apuntan las reglas de
      .sifen-home-quick-access-btn con !important. Esas son las que mas
      riesgo tenian de romperse.

   Ademas site.css ya centraliza el resto de los estilos propios del portal
   con prefijo .sifen-*, asi que este es el patron del proyecto.

   Al mover se corrigio un bug real: tres declaraciones tenian un parentesis
   de mas — var(--DS-..., var(--bs-body-bg, white))) — lo que las volvia
   invalidas y el navegador las descartaba. Los botones secundarios no tenian
   el fondo/color que declaraban. Ver .sifen-home-btn-clientes y
   .sifen-home-btn-consulta.

   El prefijo aplica tambien a las custom properties: --wc-* paso a
   --sifen-home-*. */
/* Colores de acento de la home.

   Dos clases distintas, y la diferencia importa (sifen-design 4.1):

   - MARCA (Tier 1): el lila y el celeste de ImagineSOFT son la identidad y NO se
     tematizan. Son los mismos en ISBO y en SIFEN, en claro y en oscuro. Van fijos
     a proposito; no es deuda.
   - SEMANTICOS (exito / alerta / info): SI tienen que seguir al tema, porque su
     trabajo es comunicar estado y tienen que ser legibles en claro y en oscuro.
     Antes eran hex fijos (#2e7d32 / #ef6c00 / #1565c0) y en los temas oscuros
     quedaban ilegibles. Ahora derivan de los tokens publicos --DS-* del tema, con
     el mismo encadenamiento --DS-* -> --bs-* -> hex que usa site.css, y con el
     escalon -hovered- en warning por la misma razon medida alla: el -rest- es un
     naranja de superficie que no llega a 4.5:1 como texto. */
.sifen-home-welcome-container {
    --sifen-home-primary: #5f21ad;
    --sifen-home-primary-light: #7c3aed;
    --sifen-home-secondary: #149be9;
    --sifen-home-success: var(--DS-color-content-success-default-rest, var(--bs-success-text-emphasis, #2e7d32));
    --sifen-home-warning: var(--DS-color-content-warning-default-hovered, var(--bs-warning-text-emphasis, #ef6c00));
    --sifen-home-info: var(--DS-color-content-info-default-rest, var(--bs-info-text-emphasis, #1565c0));

    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sifen-home-welcome-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: var(--DS-color-surface-neutral-deep-rest, var(--bs-tertiary-bg, var(--bs-body-bg, #f8f5ff)));
    border-radius: 16px;
    border: 1px solid var(--DS-color-border-neutral-default-rest, var(--bs-border-color, #e6daf4));
}

.sifen-home-welcome-icon {
    margin-bottom: 1rem;
}

.sifen-home-welcome-header h1 {
    color: var(--sifen-home-primary);
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.sifen-home-welcome-subtitle {
    color: var(--DS-color-content-neutral-subdued-rest, var(--bs-secondary-color, #666));
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}

.sifen-home-welcome-user {
    color: var(--sifen-home-secondary);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.sifen-home-section-title {
    color: var(--DS-color-content-neutral-default-rest, var(--bs-body-color, #333));
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    border-left: 4px solid var(--sifen-home-primary);
}

.sifen-home-stats-section {
    margin-bottom: 2.5rem;
}

/* Cabecera de seccion con accion al margen derecho: la usa el bloque operativo para
   colgar su boton "Actualizar" a la altura del titulo. El titulo conserva su
   border-left, asi que se alinea con el resto de las secciones de la home. */
.sifen-home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sifen-home-section-header .sifen-home-section-title {
    margin-bottom: 0;
}

/* El refresco es secundario frente a las cifras: pesa poco, pero cumple el minimo de
   24px de area tactil (WCAG 2.2 2.5.8, el contrapeso obligatorio de la densidad). */
.sifen-home-refresh-btn {
    min-height: 24px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    color: var(--DS-color-content-neutral-subdued-rest, var(--bs-secondary-color, #666));
    white-space: nowrap;
}

.sifen-home-refresh-btn:hover {
    color: var(--sifen-home-primary);
}

.sifen-home-refresh-icon::before {
    content: "\27F3";
    font-size: 1rem;
    line-height: 1;
    margin-right: 0.25rem;
}

.sifen-home-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

/* Las tarjetas del resumen interno son BOTONES (abren la lista filtrada), y las de
   los otros dos dashboards siguen siendo div. La regla sirve a ambos: se neutraliza
   la piel de boton del navegador y se fuerza el alineado, que en un boton no se
   hereda igual que en un div. */
.sifen-home-stat-card {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    border-radius: 12px;
    background: var(--DS-color-surface-neutral-default-rest, var(--bs-body-bg, white));
    border: 1px solid var(--DS-color-border-neutral-default-rest, var(--bs-border-color, transparent));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    /* Reset de boton: el texto va a la izquierda y ocupa el ancho de la celda, igual
       que cuando era un div. */
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    appearance: none;
}

/* El hover ya existia, pero sobre un div SIN destino: parecia clickeable y no lo era.
   Ahora que si navega, se le agrega el cursor que corresponde. Solo en las que son
   boton: las tarjetas div de los otros dashboards no deben mostrar cursor de mano. */
button.sifen-home-stat-card {
    cursor: pointer;
}

.sifen-home-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Foco de teclado visible: la tarjeta se abre con Enter, asi que el anillo no puede
   faltar (WCAG 2.4.7). Con outline y no box-shadow para que sobreviva al modo de
   alto contraste. */
button.sifen-home-stat-card:focus-visible {
    outline: 2px solid var(--sifen-home-primary, #5f21ad);
    outline-offset: 2px;
}

.sifen-home-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.sifen-home-stat-primary .sifen-home-stat-icon {
    background: rgba(95, 33, 173, 0.15);
    color: var(--sifen-home-primary);
}

.sifen-home-stat-success .sifen-home-stat-icon {
    background: rgba(46, 125, 50, 0.15);
    color: var(--sifen-home-success);
}

.sifen-home-stat-warning .sifen-home-stat-icon {
    background: rgba(239, 108, 0, 0.15);
    color: var(--sifen-home-warning);
}

.sifen-home-stat-info .sifen-home-stat-icon {
    background: rgba(21, 101, 192, 0.15);
    color: var(--sifen-home-info);
}

.sifen-home-stat-content {
    display: flex;
    flex-direction: column;
}

.sifen-home-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--DS-color-content-neutral-default-rest, var(--bs-body-color, #333));
    line-height: 1.2;
}

.sifen-home-stat-label {
    font-size: 0.875rem;
    color: var(--DS-color-content-neutral-subdued-rest, var(--bs-secondary-color, #666));
    margin-top: 0.25rem;
}

/* Tercera linea de una tarjeta, para el dato concreto detras de la cifra (que timbrado
   vence y cuando). Va con tabular-nums porque lleva numero de timbrado y fecha, y se
   quiere que no baile entre tarjetas; tabular-nums va en la celda y nunca en el body
   (sifen-design 4.5). */
.sifen-home-stat-detail {
    font-size: 0.8125rem;
    color: var(--DS-color-content-neutral-subdued-rest, var(--bs-secondary-color, #666));
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.sifen-home-quick-access-section {
    margin-bottom: 2rem;
}

.sifen-home-quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.sifen-home-quick-access-btn {
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    transition: transform 0.2s !important;
}

.sifen-home-quick-access-btn:hover {
    transform: translateY(-2px);
}

.sifen-home-btn-factura {
    background: linear-gradient(135deg, var(--sifen-home-primary) 0%, var(--sifen-home-primary-light) 100%) !important;
    border: none !important;
}

.sifen-home-btn-clientes, .sifen-home-btn-remisiones, .sifen-home-btn-articulos {
    background: var(--DS-color-surface-neutral-default-rest, var(--bs-body-bg, white)) !important;
    border: 2px solid var(--DS-color-border-neutral-default-rest, var(--bs-border-color, #e0e0e0)) !important;
    color: var(--DS-color-content-neutral-default-rest, var(--bs-body-color, #333)) !important;
}

.sifen-home-btn-clientes:hover, .sifen-home-btn-remisiones:hover, .sifen-home-btn-articulos:hover {
    border-color: var(--sifen-home-secondary) !important;
    color: var(--sifen-home-secondary) !important;
}

/* ========== ESTILOS PORTAL PÚBLICO ========== */

.sifen-home-stats-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.sifen-home-quick-access-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.sifen-home-stat-secondary .sifen-home-stat-icon {
    background: rgba(124, 58, 237, 0.15);
    color: var(--sifen-home-primary-light);
}

.sifen-home-btn-consulta {
    background: var(--DS-color-surface-neutral-default-rest, var(--bs-body-bg, white)) !important;
    border: 2px solid var(--sifen-home-primary) !important;
    color: var(--sifen-home-primary) !important;
}

.sifen-home-btn-consulta:hover {
    background: rgba(95, 33, 173, 0.1) !important;
    border-color: var(--sifen-home-primary) !important;
    color: var(--sifen-home-primary) !important;
}

/* Sección de documentos recientes */
.sifen-home-recent-docs-section {
    margin-bottom: 2rem;
}

.sifen-home-recent-docs-list {
    background: var(--DS-color-surface-neutral-default-rest, var(--bs-body-bg, white));
    border-radius: 12px;
    border: 1px solid var(--DS-color-border-neutral-default-rest, var(--bs-border-color, transparent));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.sifen-home-recent-doc-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--DS-color-border-neutral-default-rest, var(--bs-border-color, #f0f0f0));
    transition: background 0.2s;
}

.sifen-home-recent-doc-item:last-child {
    border-bottom: none;
}

.sifen-home-recent-doc-item:hover {
    background: rgba(95, 33, 173, 0.08);
}

.sifen-home-doc-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.sifen-home-doc-type-factura {
    background: rgba(95, 33, 173, 0.15);
    color: var(--sifen-home-primary);
}

.sifen-home-doc-type-nc {
    background: rgba(5, 150, 105, 0.15);
    color: #059669;
}

.sifen-home-doc-type-nd {
    background: rgba(217, 119, 6, 0.15);
    color: #d97706;
}

.sifen-home-doc-type-rem {
    background: rgba(37, 99, 235, 0.15);
    color: #2563eb;
}

.sifen-home-doc-type-default {
    background: var(--DS-color-surface-neutral-deep-rest, var(--bs-tertiary-bg, #f3f4f6));
    color: var(--DS-color-content-neutral-subdued-rest, var(--bs-secondary-color, #6b7280));
}

.sifen-home-doc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sifen-home-doc-number {
    font-weight: 600;
    color: var(--DS-color-content-neutral-default-rest, var(--bs-body-color, #333));
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sifen-home-doc-razonsocial {
    font-size: 0.8rem;
    color: var(--sifen-home-primary);
    font-weight: 500;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sifen-home-doc-date {
    font-size: 0.8rem;
    color: var(--DS-color-content-neutral-subdued-rest, var(--bs-secondary-color, #666));
    margin-top: 0.15rem;
}

.sifen-home-doc-amount {
    font-weight: 600;
    color: var(--sifen-home-primary);
    font-size: 1rem;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .sifen-home-stats-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .sifen-home-quick-access-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sifen-home-welcome-container {
        padding: 1rem;
    }

    .sifen-home-welcome-header h1 {
        font-size: 1.5rem;
    }

    .sifen-home-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sifen-home-stats-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sifen-home-quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sifen-home-quick-access-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sifen-home-recent-doc-item {
        padding: 0.875rem 1rem;
    }

    .sifen-home-doc-type-icon {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }

    .sifen-home-doc-amount {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .sifen-home-stats-grid-5 {
        grid-template-columns: 1fr;
    }

    .sifen-home-quick-access-grid-5 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Historia fiscal del Documento Electronico (sifen-design 3.1)

   Pestaña "Historia fiscal" de Factura, Nota de credito/debito y Remision
   (componente HistoriaFiscal.razor, en SIFEN.Module.Blazor).

   - Pantalla de lectura y decision, no de captura: densidad Comfortable
     (sifen-design 2.4).
   - Ningun significado viaja solo por color: cada fila lleva el eje y el
     resultado con FORMA + TEXTO. No hay tachados ni filas coloreadas.
   - Colores: tokens --isbo-* (los definen los 6 temas ISBO, claro y oscuro)
     encadenados a los publicos --DS-* y a un hex de ultimo recurso. Nada de
     prefers-color-scheme (lee el sistema operativo, no el tema elegido) ni de
     opacity para "apagar" texto (destruye el contraste que trae el token).
   - Los badges de la cabecera son .sifen-estado-badge, el mismo del estado
     fiscal: una sola gramatica de estados en el producto.
   - CDC, numero de lote y codigos van en monoespaciado y sin separadores:
     son identificadores, no cantidades.
   ========================================================================== */
.sifen-historia {
    --sifen-historia-secundario: var(--isbo-text-secondary, var(--DS-color-content-neutral-subdued-rest, #615f6b));
    --sifen-historia-borde: var(--isbo-border, var(--DS-color-border-neutral-default-rest, #e3e1e8));
    --sifen-historia-fondo-alt: var(--isbo-surface-alt, var(--DS-color-surface-neutral-deep-rest, #f7f6fa));
    --sifen-historia-mono: var(--isbo-font-mono, ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace);
    max-width: 72rem;
    padding: 0.75rem 0.25rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.sifen-historia__vacio,
.sifen-historia__pie {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--sifen-historia-secundario);
}

.sifen-historia__mono {
    font-family: var(--sifen-historia-mono);
    font-variant-numeric: tabular-nums;
    /* 44 digitos seguidos: que corte en vez de desbordar en pantallas angostas. */
    overflow-wrap: anywhere;
}

.sifen-historia__rotulo,
.sifen-historia__ejes dt {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sifen-historia-secundario);
}

/* ---------- Cabecera: identidad del documento + los tres ejes ---------- */
.sifen-historia__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 2rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--sifen-historia-borde);
}

.sifen-historia__identidad {
    flex: 1 1 22rem;
    min-width: 0;
}

.sifen-historia__documento {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.sifen-historia__numero {
    font-variant-numeric: tabular-nums;
}

.sifen-historia__cdc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.5rem;
    margin-top: 0.25rem;
}

.sifen-historia__ejes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.sifen-historia__ejes dt {
    margin-bottom: 0.125rem;
}

.sifen-historia__ejes dd {
    margin: 0;
}

.sifen-historia__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-basis: 100%;
}

/* ---------- XML crudo, solo lectura ---------- */
.sifen-historia__xml {
    margin-top: 0.75rem;
}

.sifen-historia__xml-titulo {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.sifen-historia__xml-contenido {
    max-height: 24rem;
    margin: 0;
    padding: 0.75rem;
    overflow: auto;
    border: 1px solid var(--sifen-historia-borde);
    border-radius: 4px;
    background-color: var(--sifen-historia-fondo-alt);
    color: inherit;
    font-family: var(--sifen-historia-mono);
    font-size: 0.75rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- Lista de hechos: del mas reciente al mas antiguo ---------- */
.sifen-historia__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sifen-historia__hecho {
    display: grid;
    grid-template-columns: 10.5rem 6rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--sifen-historia-borde);
}

/* La unica fila que no es un hecho ocurrido: se separa con borde punteado y con su
   rotulo "Pendiente", no con un color. */
.sifen-historia__hecho--pendiente {
    border-bottom-style: dashed;
}

.sifen-historia__fecha {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--sifen-historia-secundario);
}

.sifen-historia__hecho--pendiente .sifen-historia__fecha {
    font-weight: 600;
}

/* Eje del hecho: forma + texto, sin color propio. */
.sifen-historia__eje {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    color: var(--sifen-historia-secundario);
}

.sifen-historia__cuerpo {
    min-width: 0;
}

.sifen-historia__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.5rem;
    font-weight: 600;
}

/* El glifo acompaña al titulo: la forma (● ▲ ■ ◐ ○) es la que distingue el resultado,
   el color solo refuerza. */
.sifen-historia__glifo {
    flex: none;
    width: 1em;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1;
}

.sifen-historia__glifo--ok {
    color: var(--isbo-success, var(--sifen-estado-ok-texto));
}

.sifen-historia__glifo--alerta {
    color: var(--isbo-warning, var(--DS-color-content-warning-default-hovered, var(--sifen-estado-alerta-texto)));
}

.sifen-historia__glifo--error {
    color: var(--isbo-danger, var(--sifen-estado-error-texto));
}

.sifen-historia__glifo--espera {
    color: var(--isbo-info, var(--sifen-estado-espera-texto));
}

.sifen-historia__glifo--neutro {
    color: var(--sifen-historia-secundario);
}

/* Codigo y mensaje oficiales de la DNIT: texto pleno, nunca atenuado. */
.sifen-historia__oficial {
    margin-top: 0.125rem;
    overflow-wrap: anywhere;
}

.sifen-historia__oficial .sifen-historia__mono {
    font-weight: 600;
}

.sifen-historia__detalle {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--sifen-historia-secundario);
    overflow-wrap: anywhere;
}

/* Enlace al lote (DxButton en modo Link): sin relleno para que lea como parte de la fila,
   con alto minimo de 24px (WCAG 2.2 2.5.8). */
.sifen-historia__enlace {
    min-height: 24px;
    padding: 0 0.25rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.sifen-historia__explicacion {
    margin-top: 0.375rem;
}

.sifen-historia__explicacion > summary {
    display: inline-block;
    min-height: 24px;
    cursor: pointer;
    font-size: 0.8125rem;
    text-decoration: underline;
}

.sifen-historia__explicacion > summary:focus-visible {
    outline: 2px solid var(--isbo-accent, var(--DS-color-border-primary-default-rest, currentColor));
    outline-offset: 2px;
}

.sifen-historia__explicacion-texto {
    margin-top: 0.375rem;
    padding: 0.625rem 0.75rem;
    border-left: 3px solid var(--sifen-historia-borde);
    background-color: var(--sifen-historia-fondo-alt);
    /* La explicacion llega como texto con saltos de linea. */
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .sifen-historia__hecho {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sifen-historia__cuerpo {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Vista de lote (sifen-design 3.3)

   Pestaña "Resumen" del Envio de lotes (componente VistaLote.razor, en
   SIFEN.Module.Blazor). Es de solo lectura: no hay reenvio manual.

   Se apoya en la Historia fiscal: la raiz lleva tambien la clase
   .sifen-historia, de la que hereda variables, tipografia, monoespaciado,
   filas del historial y glifos. Aca solo va lo propio del lote.

   Mismas reglas: tokens --isbo-* encadenados a --DS-* y a un hex de ultimo
   recurso; nada de prefers-color-scheme ni de opacity para atenuar texto;
   ningun significado viaja solo por color.
   ========================================================================== */
.sifen-lote__fecha {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Cabecera ---------- */
.sifen-lote__datos,
.sifen-lote__oficiales {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0.375rem 0 0;
}

.sifen-lote__datos dt,
.sifen-lote__oficiales dt {
    margin-bottom: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sifen-historia-secundario);
}

.sifen-lote__datos dd,
.sifen-lote__oficiales dd {
    margin: 0;
}

.sifen-lote__estado {
    flex: 0 1 24rem;
    min-width: 0;
}

.sifen-lote__estado-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-top: 0.125rem;
}

/* Ultimo envio y ultima consulta: ocupan todo el ancho, debajo de la identidad. */
.sifen-lote__oficiales {
    flex-basis: 100%;
    margin-top: 0;
}

.sifen-lote__oficiales > div {
    flex: 1 1 20rem;
    min-width: 0;
}

/* ---------- Aviso de la guarda de reenvio ----------
   No es un error: es "esperar". Se distingue por el borde lateral, el glifo y el
   texto; el fondo es el de superficie alterna, no un color de estado. */
.sifen-lote__aviso {
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--sifen-historia-borde);
    border-left: 4px solid var(--isbo-info, var(--sifen-estado-espera-texto));
    border-radius: 4px;
    background-color: var(--sifen-historia-fondo-alt);
}

.sifen-lote__cdcs {
    margin: 0.375rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}

/* ---------- Conteos ---------- */
.sifen-lote__conteos {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--sifen-historia-borde);
}

.sifen-lote__conteos p {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.sifen-lote__conteos p + p {
    margin-top: 0.25rem;
    color: var(--sifen-historia-secundario);
}

.sifen-lote__conteos p + p strong,
.sifen-lote__conteos p + p .sifen-lote__fecha {
    color: var(--isbo-text, var(--DS-color-content-neutral-default-rest, inherit));
}

.sifen-lote__seccion {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ---------- Filtros ----------
   Botones del tema (DxButton): el elegido va relleno y el resto con contorno, asi que
   la seleccion no depende del color. Alto minimo 24px (WCAG 2.2 2.5.8). */
.sifen-lote__filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.sifen-lote__filtro {
    min-height: 24px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Lista de documentos ---------- */
.sifen-lote__documento {
    display: grid;
    grid-template-columns: minmax(0, 24rem) 11.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--sifen-historia-borde);
}

.sifen-lote__doc-identidad {
    min-width: 0;
}

.sifen-lote__doc-numero {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sifen-lote__doc-cdc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.5rem;
    font-size: 0.8125rem;
}

.sifen-lote__doc-accion {
    justify-self: end;
}

@media (max-width: 960px) {
    .sifen-lote__documento {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sifen-lote__documento > .sifen-historia__cuerpo {
        grid-column: 1 / -1;
    }

    .sifen-lote__doc-accion {
        justify-self: start;
    }
}