/* ===========================================================================
   TintaFiscal — hoja de estilos base
   ===========================================================================

   Pensada para quien trabaja con documentos fiscales todo el día: cuadra
   columnas de importes, compara UUID carácter por carácter y pasa horas
   frente a tablas.

   El concepto es tinta sobre papel de archivo. El fondo es un neutro cálido
   plano, las tarjetas son papel blanco encima, y el color se reserva para
   decir algo: azul para acciones, verde de abono, rojo de cargo, ámbar de
   aviso. Nada de degradados ni resplandores: en una jornada larga la
   decoración compite con las cifras, que es justo lo que hay que leer.

   Tres decisiones que no son cosméticas:

   1. Cifras con números tabulares. Con dígitos de ancho variable las columnas
      de importes quedan dentadas; alineadas se detecta de un vistazo un
      dígito de más.
   2. UUID, RFC y folios en monoespaciada. No se leen: se comparan.
   3. Foco visible y contundente. Esto se opera mucho con teclado.

   Sobre Bootstrap: en 5.3 los componentes leen variables propias
   (--bs-btn-bg, --bs-table-bg, ...). Redefinirlas es más limpio que pelear
   con !important contra las clases, así que eso es lo que se hace abajo.
   =========================================================================== */

:root {
    /* --- Papel y tinta ---------------------------------------------------- */
    /* El neutro es cálido a propósito, apenas unos puntos hacia el amarillo.
       Lee como papel y no como pantalla, y a las tres de la tarde cansa menos
       que un gris azulado. Las tarjetas van en blanco puro encima. */
    --paper: #f5f3ef;
    --paper-sunken: #ebe8e1;
    --card: #ffffff;
    --line: #e2ded5;
    --line-strong: #cfcabe;

    --ink: #1b1a17;
    --ink-soft: #4a473f;
    --ink-muted: #666259;

    /* --- Acción ----------------------------------------------------------- */
    /* Azul profundo de tinta, no el azul eléctrico de una landing. Sobre papel
       cálido se lee como acción sin gritar, y da 7.9:1 contra blanco. */
    --accent: #1a4fa0;
    --accent-strong: #143e80;
    --accent-soft: #eef2fa;

    /* --- Semántica contable ----------------------------------------------- */
    --credit: #1b6b4a;
    --credit-soft: #e6f0ea;
    --debit: #a32a1e;
    --debit-soft: #f8e9e6;
    --flag: #8f5407;
    --flag-soft: #f7eedf;

    /* --- Forma ------------------------------------------------------------ */
    /* Radios contenidos y sombras cálidas y bajas: esto es una herramienta de
       trabajo, no una portada. Las tarjetas se separan con un filo de 1px
       hecho con box-shadow, que se ve mejor que una sombra difusa sobre papel. */
    --radius: 8px;
    --radius-lg: 12px;
    --header-h: 68px;

    --ring: 0 0 0 1px var(--line);
    --shadow-sm: 0 0 0 1px var(--line), 0 1px 2px rgba(43, 36, 24, 0.05);
    --shadow-md: 0 0 0 1px var(--line-strong), 0 8px 24px rgba(43, 36, 24, 0.1);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* --- Tipografía -------------------------------------------------------- */
    /* IBM Plex se diseñó para producto técnico y trae las tres voces que hacen
       falta aquí, con métricas compatibles entre ellas. */
    --font-sans: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
        Roboto, Helvetica, Arial, sans-serif;
    --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono",
        monospace;

    /* --- Bootstrap --------------------------------------------------------- */
    --bs-primary: var(--accent);
    --bs-primary-rgb: 26, 79, 160;
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-strong);
    --bs-border-color: var(--line);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --bs-secondary-color: var(--ink-soft);
    --bs-tertiary-color: var(--ink-muted);
    --bs-font-sans-serif: var(--font-sans);
    --bs-font-monospace: var(--font-mono);
    --bs-emphasis-color: var(--ink);

    /* Los tonos "subtle" de Bootstrap son valores fijos, no derivados de
       --bs-primary, así que hay que teñirlos aparte. */
    --bs-primary-bg-subtle: var(--accent-soft);
    --bs-primary-border-subtle: rgba(26, 79, 160, 0.25);
    --bs-primary-text-emphasis: var(--accent-strong);
    --bs-success-bg-subtle: var(--credit-soft);
    --bs-danger-bg-subtle: var(--debit-soft);
    --bs-warning-bg-subtle: var(--flag-soft);
}

/* ---------------------------------------------------------------------------
   Estructura: el pie siempre al fondo
   --------------------------------------------------------------------------- */

/* Con poco contenido, el pie subía a media pantalla. La columna flexible lo
   empuja abajo sin fijarlo: sigue desplazándose con páginas largas. */
html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    /* 15px en vez de 16: aquí se leen tablas densas, no artículos. */
    font-size: 0.9375rem;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1 0 auto;
}

body > footer {
    flex-shrink: 0;
    background-color: var(--card) !important;
    border-top: 1px solid var(--line) !important;
}

/* ---------------------------------------------------------------------------
   Foco
   --------------------------------------------------------------------------- */

/* Capturar y validar CFDI se hace mucho con teclado. El foco tiene que verse
   sin buscarlo, y :focus-visible evita que aparezca al hacer clic con mouse. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.btn:focus-visible,
.page-link:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Tipografía
   --------------------------------------------------------------------------- */

/* Los títulos en serif dan el aire de documento formal; el resto de la
   interfaz se queda en sans, que es lo que se lee cómodo en pantalla. */
h1,
h2,
h3,
.h1,
.h2,
.h3,
.display-5,
.modal-title {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.display-5 {
    font-size: calc(1.5rem + 1.2vw);
    letter-spacing: -0.02em;
}

/* .h4 y .h5 se usan para cifras y contadores, no para titulares: se quedan en
   sans para que las columnas de números sigan cuadrando. */
.h4,
.h5 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

/* Los encabezados de tabla son etiquetas, no títulos. */
.table > thead th {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Números tabulares: todos los dígitos ocupan lo mismo, así las columnas de
   importes quedan alineadas y se ve de inmediato un dígito de más. IBM Plex ya
   los trae uniformes; esto es el seguro para cuando la fuente no carga. Solo
   afecta a las cifras, no al texto. */
.table,
.kpi-card,
.cfdi-detail-list dd,
.badge,
.pagination,
.font-monospace,
#analysisTableStatus {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* UUID, RFC y folios: identificadores que se comparan, no se leen. */
.font-monospace {
    font-family: var(--font-mono) !important;
    font-size: 0.9em;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
   Encabezado
   --------------------------------------------------------------------------- */

.navbar {
    min-height: var(--header-h);
    background-color: var(--card) !important;
    border-bottom: 1px solid var(--line) !important;
}

/* La tipografía y el color del logotipo viven en .brand-* porque el mismo
   lockup se usa en el pie. Aquí solo queda su acomodo dentro de la barra. */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    padding-block: 0;
}

.navbar .nav-link {
    color: var(--ink-soft);
    font-weight: 500;
    font-size: 0.9375rem;
    border-radius: var(--radius);
    padding-inline: 0.75rem;
    transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--accent);
    background-color: var(--accent-soft);
}

/* ---------------------------------------------------------------------------
   Marca
   --------------------------------------------------------------------------- */

/* El logotipo se coloca en partials/brand.html y se usa en la barra y en el
   pie. Todo lo que cambia entre los dos lugares es el tamaño, así que el
   modificador .brand-lockup-sm es lo único que hace falta. */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* El archivo trae símbolo y nombre juntos y viene recortado al dibujo, sin
   margen transparente alrededor. Por eso se fija el alto y el ancho se deja
   libre: así la altura del logotipo es la que se ve, y no la de un lienzo
   con aire.

   Que el recorte sea honesto es lo que hace que estas medidas signifiquen
   algo. Mientras el archivo cargaba el halo de alfa de los originales, 24px
   de altura dibujaban 14px de logotipo y el resto era aire; el tamaño había
   que inflarlo a ojo hasta que se viera bien. Lo recorta de verdad
   tools/build_brand_assets.py. */
.brand-logo {
    height: 1.5rem;
    width: auto;
    display: block;
    transition: opacity 0.15s var(--ease);
}

/* Al pasar por encima el logotipo apenas se atenúa. Es un PNG de color fijo:
   no se le puede oscurecer solo la tinta como al SVG anterior, y teñirlo
   entero con un filtro rompería el azul de la marca. */
.navbar-brand:hover .brand-logo,
.navbar-brand:focus-visible .brand-logo,
.footer-brand:hover .brand-logo,
.footer-brand:focus-visible .brand-logo {
    opacity: 0.78;
}

.brand-lockup-sm .brand-logo {
    height: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Pie de página
   --------------------------------------------------------------------------- */

.site-footer {
    background-color: var(--card);
}

.footer-brand {
    display: inline-block;
    text-decoration: none;
}


/* Los enlaces legales van en gris y solo se subrayan al pasar por encima: no
   compiten con los botones de la página, pero se encuentran cuando se buscan,
   que es la única vez que alguien los mira. */
.footer-legal a {
    color: var(--ink-muted);
    text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Páginas legales
   --------------------------------------------------------------------------- */

/* Medida de lectura, no de formulario: estas páginas son prosa corrida y a
   más de ~75 caracteres por línea el ojo pierde el renglón al regresar. */
.legal-page {
    max-width: 760px;
}

.legal-page article h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

/* El primer apartado abre el documento: no necesita una raya que lo separe de
   nada. */
.legal-page article h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.legal-page article p,
.legal-page article li {
    color: var(--ink-soft);
    line-height: 1.7;
}

.legal-page article p {
    margin-bottom: 0.9rem;
}

.legal-page article ul {
    margin-bottom: 0.9rem;
    padding-left: 1.2rem;
}

.legal-page article li {
    margin-bottom: 0.4rem;
}

.legal-page article strong {
    color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------- */

/* Esquinas contenidas, sin forma de píldora y sin resplandor: se leen como
   control de aplicación. */
.btn {
    --bs-btn-border-radius: var(--radius);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1rem;
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
        color 0.15s var(--ease);
}

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-strong);
    --bs-btn-hover-border-color: var(--accent-strong);
    --bs-btn-active-bg: var(--accent-strong);
    --bs-btn-active-border-color: var(--accent-strong);
    --bs-btn-disabled-bg: var(--ink-muted);
    --bs-btn-disabled-border-color: var(--ink-muted);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent-strong);
    --bs-btn-active-border-color: var(--accent-strong);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-soft);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--paper-sunken);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-bg: var(--line);
    --bs-btn-active-color: var(--ink);
    background-color: var(--card);
}

/* ---------------------------------------------------------------------------
   Superficies
   --------------------------------------------------------------------------- */

.card {
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-border-color: var(--line);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-bg: var(--card);
}

/* Sobre papel, un filo de 1px separa mejor que una sombra difusa. Va dentro
   del box-shadow para no pelear con las clases border-0 de las plantillas. */
.card.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.card-header {
    background-color: var(--card) !important;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-weight: 600;
}

.card-header i {
    color: var(--accent);
}

.text-primary {
    color: var(--accent) !important;
}

.hero-section {
    background: transparent;
    border-bottom-color: var(--line) !important;
}

/* La tarjeta entera es clicable (el enlace lleva .stretched-link), así que el
   realce al pasar el mouse dice la verdad. */
.tool-card {
    border-radius: var(--radius-lg);
    transition: box-shadow 0.18s var(--ease);
}

.tool-card:hover,
.tool-card:focus-within {
    box-shadow: var(--shadow-md) !important;
}

/* El icono de cada herramienta es un dibujo de la marca y ya trae su propio
   color: verde para Excel, rojo para PDF, azul para el resto. Por eso va sin
   la pastilla de fondo que llevaba el icono de tipografía: un cuadro azul
   claro detrás del verde de Excel ensucia los dos. El dibujo viene recortado
   y centrado en un lienzo cuadrado, así que los cinco ocupan lo mismo aunque
   la lupa del analizador se salga de la hoja. */
.tool-icon {
    width: 48px;
    height: 48px;
    display: block;
}

.drop-zone {
    background-color: var(--card);
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    min-height: 260px;
    transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.drop-zone-active {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}

/* Páginas de una sola columna (formularios de carga). */
.tool-page {
    max-width: 720px;
}

.tool-tagline {
    color: var(--ink);
    font-weight: 600;
}

/* El analizador es lo que distingue a este producto de los muchos
   convertidores gratuitos de XML, así que su tarjeta se despega del resto. */
.tool-card-featured {
    box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(26, 79, 160, 0.12) !important;
}

.tool-card-flag {
    background-color: var(--accent-soft);
    color: var(--accent);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.drop-zone-meta {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
   Nota de privacidad
   --------------------------------------------------------------------------- */

.privacy-note {
    background-color: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--credit);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
}

.privacy-note-icon {
    color: var(--credit);
    font-size: 1.15rem;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------------- */

/* Grupo de opciones como tarjetas: con tres alternativas se leen todas de un
   vistazo, en vez de esconderlas detrás de un desplegable. */
.choice-grid {
    display: grid;
    gap: 0.5rem;
}

.choice-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background-color: var(--card);
    cursor: pointer;
    transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.choice-option:hover {
    border-color: var(--accent);
}

/* :has() permite marcar la tarjeta entera, no solo el círculo del radio.
   Donde no esté soportado se ve el radio seleccionado igual, solo sin
   el realce de la tarjeta. */
.choice-option:has(input:checked) {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}

.choice-option:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.choice-option input {
    margin: 0;
    flex-shrink: 0;
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

fieldset legend.form-label {
    float: none;
    width: auto;
    font-size: 0.9375rem;
}

.form-control,
.form-select {
    border-color: var(--line-strong);
    border-radius: var(--radius);
    background-color: var(--card);
    color: var(--ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 79, 160, 0.15);
}

.form-label {
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9375rem;
}

.form-text,
.text-muted,
.text-secondary {
    color: var(--ink-muted) !important;
}

/* El RFC se escribe en mayúsculas y se revisa carácter por carácter. */
#id_owner_rfc {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   Detalle del CFDI
   --------------------------------------------------------------------------- */

.cfdi-detail-list dt {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--ink-muted);
    padding-bottom: 0.5rem;
}

.cfdi-detail-list dd {
    padding-bottom: 0.5rem;
    margin-bottom: 0;
    color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Tablas y avisos
   --------------------------------------------------------------------------- */

.table {
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: var(--accent-soft);
    color: var(--ink);
}

.table > thead {
    --bs-table-bg: var(--paper-sunken);
}

/* Franjas alternas: en una tabla larga evitan saltar de renglón al recorrerla
   con la vista. El `of :not([hidden])` cuenta solo las filas visibles, porque
   el tablero de resultados oculta filas al paginar y al filtrar; sin eso las
   franjas salen desparejas. Donde el navegador no soporte esa sintaxis
   simplemente no hay franjas. */
.table > tbody > tr:nth-child(odd of :not([hidden])) {
    background-color: rgba(122, 104, 66, 0.05);
}

.alert {
    --bs-alert-border-radius: var(--radius);
    border: 1px solid transparent;
}

.progress {
    --bs-progress-bg: var(--line);
}

.progress-bar {
    background-color: var(--accent);
}

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 5px;
}

.text-bg-light {
    background-color: var(--paper-sunken) !important;
    color: var(--ink-soft) !important;
}

footer span i {
    margin-right: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Semántica contable
   --------------------------------------------------------------------------- */

/* Verde de abono y rojo de cargo, apagados como los de un libro mayor: los
   brillantes compiten con las cifras cuando hay cien filas en pantalla.
   Ingreso y gasto nunca dependen solo del color: las plantillas les ponen
   además flecha y etiqueta, que es lo que salva a quien no distingue rojo de
   verde. */
.text-success {
    color: var(--credit) !important;
}

.text-danger {
    color: var(--debit) !important;
}

.text-warning {
    color: var(--flag) !important;
}

.bg-success-subtle {
    background-color: var(--credit-soft) !important;
}

.bg-danger-subtle {
    background-color: var(--debit-soft) !important;
}

.bg-warning-subtle {
    background-color: var(--flag-soft) !important;
}

.text-bg-success {
    background-color: var(--credit) !important;
    color: #fff !important;
}

.text-bg-danger {
    background-color: var(--debit) !important;
    color: #fff !important;
}

.text-bg-warning {
    background-color: var(--flag-soft) !important;
    color: var(--flag) !important;
}

.alert-success {
    --bs-alert-color: var(--credit);
    --bs-alert-bg: var(--credit-soft);
    --bs-alert-border-color: #c9dfd4;
}

.alert-warning {
    --bs-alert-color: var(--flag);
    --bs-alert-bg: var(--flag-soft);
    --bs-alert-border-color: #ecd9b6;
}

.alert-danger {
    --bs-alert-color: var(--debit);
    --bs-alert-bg: var(--debit-soft);
    --bs-alert-border-color: #eecdc7;
}

.alert-info {
    --bs-alert-color: var(--accent-strong);
    --bs-alert-bg: var(--accent-soft);
    --bs-alert-border-color: #cfdcf1;
}

/* ---------------------------------------------------------------------------
   Pantalla de resultados
   --------------------------------------------------------------------------- */

.kpi-card .kpi-icon,
.alert-tile-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

/* Los KPI son lectura, no controles: no se levantan al pasar el mouse. */
.kpi-card {
    border-radius: var(--radius-lg);
}

.alert-lead {
    background-color: var(--debit-soft);
    border: 1px solid #eecdc7;
}

.alert-lead-icon {
    font-size: 1.6rem;
    line-height: 1;
}

/* Los tiles son botones para que se alcancen con el teclado, pero deben
   leerse como tarjetas, no como controles. */
.alert-tile {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    border-radius: var(--radius);
}

.alert-tile:disabled {
    opacity: 0.45;
    cursor: default;
}

.alert-tile:not(:disabled) {
    cursor: pointer;
}

.alert-tile:not(:disabled):hover .h5 {
    text-decoration: underline;
}

.chart-container {
    position: relative;
    height: 260px;
}

.donut-container {
    position: relative;
    height: 170px;
    width: 170px;
}

/* Los nombres largos de empresa no deben estirar la tabla. */
.supplier-name {
    max-width: 220px;
}

.analysis-search {
    min-width: 260px;
}

.nav-underline {
    --bs-nav-underline-link-active-color: var(--accent);
    --bs-nav-link-color: var(--ink-soft);
}

.nav-underline .nav-link {
    background: none;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
}

/* Filas más compactas y un punto más chicas: aquí se recorren cientos de
   renglones y cada píxel de alto es una fila menos en pantalla. */
#analysisTable {
    font-size: 0.875rem;
}

#analysisTable td,
#analysisTable th {
    white-space: nowrap;
    padding-block: 0.5rem;
}

#analysisTable td .supplier-name {
    white-space: normal;
}

.page-link {
    --bs-pagination-color: var(--ink-soft);
    --bs-pagination-bg: var(--card);
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-hover-color: var(--accent);
    --bs-pagination-hover-bg: var(--accent-soft);
    --bs-pagination-border-color: var(--line);
}

/* ---------------------------------------------------------------------------
   Movimiento
   --------------------------------------------------------------------------- */

/* Quien pide menos movimiento en su sistema no debería recibir animaciones. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Impresión
   --------------------------------------------------------------------------- */

/* Estas pantallas acaban impresas o guardadas en PDF con frecuencia. */
@media print {
    body {
        background: none;
        font-size: 10pt;
    }

    .navbar,
    .btn,
    .pagination,
    .analysis-search {
        display: none !important;
    }

    .card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid var(--line-strong) !important;
    }
}

/* Nombre de la herramienta encima del encabezado de resultado. */
.tool-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}