/* DocumentLibrary.css — Biblioteca de documentos: filtros, orden, tarjetas y paginación.
   Nodos 2691:57210 (PC, mesa de 1280), 2691:57473 (tablet, mesa de 768) y 2691:57735 (mobile,
   mesa de 375).
   ESCRITORIO: filtros en una columna de 300 a la izquierda, fija bajo el encabezado al desplazar, y
   cuadrícula de 3 tarjetas. TABLET: filtros apilados sobre los resultados y cuadrícula de 2. MOBILE:
   una tarjeta por fila.
   Lo que el diseño no dibuja (opción elegida, menú de orden abierto, paginación, carga y vacío)
   sigue la misma paleta y tipografía del nodo. */

/* --- Sección. --- */
.DocumentLibrary {
    --DocumentLibrary-ink: #0f0f12; /* Casi negro del diseño. */
    --DocumentLibrary-accent: #429cde; /* Celeste de enlaces y etiquetas. */
    --DocumentLibrary-line: rgba(15, 15, 18, 0.12); /* Divisores de los filtros. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    display: flex; /* Filtros y resultados en fila. */
    align-items: flex-start; /* Cada columna con su alto. */
    gap: 40px; /* Separación del nodo. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
    padding: 48px 48px 64px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--DocumentLibrary-ink); /* Color base del texto. */
}

    .DocumentLibrary *,
    .DocumentLibrary *::before,
    .DocumentLibrary *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    .DocumentLibrary [hidden] {
        display: none !important; /* El atributo gana a cualquier display de la hoja. */
    }

/* Texto solo para lectores de pantalla. */
.DocumentLibrary-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Columna de filtros. --- */
/* Columna de filtros. En escritorio queda FIJA (sticky) debajo del encabezado del sitio mientras los
   resultados se desplazan.

   EL ENCABEZADO ES FIXED Y CAMBIA DE ALTO: DocumentLibrary.js lo mide y deja el tope en
   --DocumentLibrary-sticky-top (alto del encabezado + 16px de aire). Sin script vale 134px: los
   118px del encabezado de escritorio (ver MainMenu-spacer) más el aire.

   Si los filtros abiertos son más altos que la pantalla, la columna tiene su propio scroll: si no,
   la parte de abajo quedaría inalcanzable mientras está pegada. overscroll-behavior evita que, al
   llegar al final de los filtros, el scroll siga en la página.

   El sticky funciona porque el padre (.DocumentLibrary) es tan alto como los resultados y ningún
   ancestro corta el desbordamiento: el overflow-x de body.container-fluid se propaga al viewport. */
.DocumentLibrary-sidebar {
    display: flex; /* Bloques apilados. */
    flex-direction: column; /* En columna. */
    gap: 18px; /* Separación del nodo. */
    flex: 0 0 300px; /* Ancho del nodo. */
    min-width: 0; /* Deja que el texto envuelva. */
    position: sticky; /* Fija mientras se desplazan los resultados. */
    top: var(--DocumentLibrary-sticky-top, 134px); /* Debajo del encabezado fixed. */
    max-height: calc(100vh - var(--DocumentLibrary-sticky-top, 134px) - 16px); /* Cabe en la pantalla. */
    overflow-y: auto; /* Scroll propio si los filtros abiertos no caben. */
    overscroll-behavior: contain; /* El scroll de los filtros no arrastra la página. */
    scrollbar-width: thin; /* Barra discreta. */
    padding: 4px 6px 4px 4px; /* Aire para los anillos de foco (el scroll los recortaría) y la barra. */
    margin: -4px 0 -4px -4px; /* Compensa el aire: la columna no se mueve de su lugar. */
}

.DocumentLibrary-sidebar-head {
    display: flex; /* Título y "Borrar filtros" en línea. */
    align-items: center; /* Centrados entre sí. */
    justify-content: space-between; /* Uno en cada extremo. */
    gap: 16px; /* Aire mínimo entre ambos. */
}

.DocumentLibrary-sidebar-title {
    margin: 0; /* La separación la da el gap. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Compacto. */
    letter-spacing: 0.56px; /* Apertura del nodo. */
    text-transform: uppercase; /* "FILTROS". */
    color: var(--DocumentLibrary-ink);
}

/* Botón con aspecto de enlace. */
.DocumentLibrary-clear {
    padding: 0; /* Sin relleno de botón. */
    background: none; /* Sin fondo de botón. */
    border: 0; /* Sin borde de botón. */
    font: inherit; /* Hereda la pila de marca. */
    font-size: 12px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    color: var(--DocumentLibrary-accent); /* Celeste del nodo. */
    text-decoration: underline; /* Subrayado del nodo. */
    cursor: pointer; /* Es clicable. */
}

    .DocumentLibrary-clear:hover {
        color: #2a7fbd; /* Un tono más oscuro. */
    }

/* --- Filtros elegidos. --- */
.DocumentLibrary-chips {
    display: flex; /* En fila. */
    flex-wrap: wrap; /* Bajan de renglón. */
    gap: 10px 16px; /* Separación del nodo. */
    margin: 0; /* Sin margen de la lista. */
    padding: 0; /* Sin sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

.DocumentLibrary-chip {
    display: inline-flex; /* Cruz y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 8px; /* Separación del nodo. */
    padding: 0; /* Sin relleno de botón. */
    background: none; /* Sin fondo de botón. */
    border: 0; /* Sin borde de botón. */
    font: inherit; /* Hereda la pila de marca. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium del nodo. */
    line-height: 1.2; /* Compacto. */
    color: var(--DocumentLibrary-ink);
    text-align: left; /* Un nombre largo envuelve alineado. */
    cursor: pointer; /* Es clicable. */
}

.DocumentLibrary-chip-icon {
    flex: 0 0 auto; /* No se comprime. */
    width: 11px; /* Cruz de 13px de cuerpo del nodo. */
    height: 11px; /* Cuadrada. */
    stroke: currentColor; /* Del color del texto. */
    stroke-width: 2.5; /* Trazo grueso como el "✕" bold. */
    stroke-linecap: round; /* Extremos redondeados. */
    transition: transform 0.2s ease-out; /* Realce. */
}

    .DocumentLibrary-chip:hover .DocumentLibrary-chip-icon,
    .DocumentLibrary-chip:focus-visible .DocumentLibrary-chip-icon {
        transform: rotate(90deg); /* La cruz gira: invita a quitar. */
    }

/* --- Acordeones. --- */
.DocumentLibrary-facet {
    display: flex; /* Encabezado y panel apilados. */
    flex-direction: column; /* En columna. */
    gap: 18px; /* Misma separación que la columna. */
    padding-top: 18px; /* Aire bajo el divisor. */
    border-top: 1px solid var(--DocumentLibrary-line); /* Divisor del nodo. */
}

.DocumentLibrary-facet-heading {
    margin: 0; /* La separación la da el gap. */
    font: inherit; /* El botón define la tipografía. */
}

.DocumentLibrary-facet-toggle {
    display: flex; /* Título y flecha en línea. */
    align-items: center; /* Centrados entre sí. */
    justify-content: space-between; /* Uno en cada extremo. */
    gap: 16px; /* Aire mínimo entre ambos. */
    width: 100%; /* Toda la fila es clicable. */
    padding: 4px 0; /* Relleno del nodo. */
    background: none; /* Sin fondo de botón. */
    border: 0; /* Sin borde de botón. */
    font: inherit; /* Hereda la pila de marca. */
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.3; /* Compacto. */
    letter-spacing: 0.88px; /* Apertura del nodo. */
    text-transform: uppercase; /* "TIPO DE DOCUMENTO". */
    text-align: left; /* Un título largo envuelve alineado. */
    color: var(--DocumentLibrary-ink);
    cursor: pointer; /* Es clicable. */
}

.DocumentLibrary-facet-chevron,
.DocumentLibrary-sort-chevron {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* El "▾" del nodo. */
    height: 5px; /* Proporción del triángulo. */
    fill: rgba(15, 15, 18, 0.7); /* Gris del nodo. */
    transition: transform 0.2s ease-out; /* Gira al abrir. */
}

.DocumentLibrary-facet-toggle[aria-expanded="true"] .DocumentLibrary-facet-chevron,
.DocumentLibrary-sort-button[aria-expanded="true"] .DocumentLibrary-sort-chevron {
    transform: rotate(180deg); /* "▴" abierto. */
}

/* Opciones: una columna; Tipo, Marca y Categoría en dos, como el nodo. */
.DocumentLibrary-options {
    display: grid; /* Columnas parejas. */
    grid-template-columns: minmax(0, 1fr); /* Una columna. */
    gap: 16px 20px; /* Separación del nodo. */
    margin: 0; /* Sin margen de la lista. */
    padding: 0; /* Sin sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

.DocumentLibrary-options--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas del nodo. */
}

/* Marca trae decenas de opciones: la lista se acota y desplaza para no estirar la columna. */
.DocumentLibrary-options--columns {
    max-height: 320px; /* Unas diez filas. */
    overflow-y: auto; /* El resto se desplaza. */
    overscroll-behavior: contain; /* El desplazamiento no arrastra la página. */
    margin: -4px; /* Compensa el relleno: el texto queda alineado con el resto. */
    padding: 4px; /* El anillo de foco no se recorta contra el borde desplazable. */
}

.DocumentLibrary-option {
    display: block; /* Ocupa su celda. */
    width: 100%; /* Toda la celda es clicable. */
    padding: 0; /* Sin relleno de botón. */
    background: none; /* Sin fondo de botón. */
    border: 0; /* Sin borde de botón. */
    font: inherit; /* Hereda la pila de marca. */
    font-size: 13.5px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular. */
    line-height: 1.2; /* Compacto. */
    text-align: left; /* Alineada a la izquierda. */
    color: rgba(15, 15, 18, 0.6); /* Gris del nodo. */
    cursor: pointer; /* Es clicable. */
    transition: color 0.2s ease-out; /* Realce. */
}

    .DocumentLibrary-option:hover,
    .DocumentLibrary-option:focus-visible {
        color: var(--DocumentLibrary-ink); /* Se enciende al pasar. */
    }

    /* Elegida: tinta y negrita; además sube como filtro con ✕. */
    .DocumentLibrary-option[aria-pressed="true"] {
        font-weight: 700;
        color: var(--DocumentLibrary-ink);
    }

/* Anillo de foco común de los controles. */
.DocumentLibrary-clear:focus-visible,
.DocumentLibrary-chip:focus-visible,
.DocumentLibrary-facet-toggle:focus-visible,
.DocumentLibrary-option:focus-visible,
.DocumentLibrary-sort-button:focus-visible,
.DocumentLibrary-empty-button:focus-visible {
    outline: 2px solid var(--color-cool-neutral-02); /* Anillo de foco. */
    outline-offset: 2px;
}

/* --- Resultados. --- */
.DocumentLibrary-results {
    display: flex; /* Barra, cuadrícula y botón apilados. */
    flex-direction: column; /* En columna. */
    gap: 20px; /* Separación del nodo. */
    flex: 1 1 0; /* Toma el ancho sobrante. */
    min-width: 0; /* Deja que la cuadrícula se ajuste. */
}

.DocumentLibrary-toolbar {
    display: flex; /* Conteo y orden en línea. */
    align-items: center; /* Centrados entre sí. */
    justify-content: space-between; /* Uno en cada extremo. */
    gap: 16px; /* Aire mínimo entre ambos. */
}

.DocumentLibrary-count {
    margin: 0; /* La separación la da el gap. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium. */
    line-height: 1.2; /* Compacto. */
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo. */
}

/* --- Ordenar por. --- */
.DocumentLibrary-sort {
    position: relative; /* Ancla del menú. */
    flex: 0 0 auto; /* Su ancho natural. */
}

.DocumentLibrary-sort-button {
    display: inline-flex; /* Texto y flecha en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 8px; /* Los dos espacios del nodo. */
    padding: 9px 16px; /* Relleno del nodo. */
    background-color: #ffffff; /* Fondo blanco. */
    border: 1px solid rgba(15, 15, 18, 0.16); /* Borde del nodo. */
    border-radius: 18px; /* Píldora del nodo. */
    font: inherit; /* Hereda la pila de marca. */
    font-size: 12.5px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium. */
    line-height: 1.2; /* Compacto. */
    white-space: nowrap; /* No se corta. */
    color: var(--DocumentLibrary-ink);
    cursor: pointer; /* Es clicable. */
    transition: border-color 0.2s ease-out; /* Realce. */
}

    .DocumentLibrary-sort-button:hover,
    .DocumentLibrary-sort-button[aria-expanded="true"] {
        border-color: rgba(15, 15, 18, 0.4); /* El borde se marca. */
    }

.DocumentLibrary-sort-menu {
    position: absolute; /* Flota sobre las tarjetas. */
    top: calc(100% + 6px); /* Bajo el botón. */
    right: 0; /* Alineado al botón. */
    z-index: 5; /* Sobre las tarjetas. */
    min-width: 200px; /* Las opciones entran en una línea. */
    margin: 0; /* Sin margen de la lista. */
    padding: 6px; /* Aire interior. */
    list-style: none; /* Sin viñetas. */
    background-color: #ffffff; /* Fondo blanco. */
    border: 1px solid rgba(15, 15, 18, 0.12); /* Borde suave. */
    border-radius: 12px; /* Redondeo de las tarjetas. */
    box-shadow: 0 12px 28px rgba(15, 15, 18, 0.12); /* Separación del fondo. */
}

    .DocumentLibrary-sort-menu:focus {
        outline: none; /* El foco se marca en la opción activa. */
    }

.DocumentLibrary-sort-option {
    display: flex; /* Marca y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 8px; /* Aire entre marca y texto. */
    padding: 9px 10px; /* Fila cómoda. */
    border-radius: 8px; /* Resalte redondeado. */
    font-size: 13px; /* Un punto más que el botón. */
    font-weight: 500; /* Medium. */
    line-height: 1.2; /* Compacto. */
    white-space: nowrap; /* No se corta. */
    color: var(--DocumentLibrary-ink);
    cursor: pointer; /* Es clicable. */
}

    .DocumentLibrary-sort-option:hover,
    .DocumentLibrary-sort-option.is-active {
        background-color: rgba(15, 15, 18, 0.05); /* Resalte de la opción. */
    }

    .DocumentLibrary-sort-option[aria-selected="true"] {
        font-weight: 700; /* La elegida en negrita. */
    }

.DocumentLibrary-sort-check {
    flex: 0 0 auto; /* No se comprime. */
    width: 14px; /* Marca chica. */
    height: 14px; /* Cuadrada. */
    fill: none; /* Solo trazo. */
    stroke: var(--DocumentLibrary-accent); /* Celeste. */
    stroke-width: 2.5; /* Trazo marcado. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértices redondeados. */
    visibility: hidden; /* Reserva el lugar en todas. */
}

.DocumentLibrary-sort-option[aria-selected="true"] .DocumentLibrary-sort-check {
    visibility: visible; /* Solo en la elegida. */
}

/* --- Cuadrícula de tarjetas. --- */
.DocumentLibrary-grid {
    display: grid; /* Columnas parejas. */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tres tarjetas de 268 del nodo. */
    gap: 20px; /* Separación del nodo. */
    margin: 0; /* Sin margen de la lista. */
    padding: 0; /* Sin sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

    .DocumentLibrary-grid[aria-busy="true"] .DocumentLibrary-item:not(.DocumentLibrary-item--skeleton) {
        opacity: 0.5; /* Lo anterior se apaga mientras llega lo nuevo. */
    }

.DocumentLibrary-item {
    display: flex; /* La tarjeta estira a la fila. */
    min-width: 0; /* Deja que el texto envuelva. */
    transition: opacity 0.2s ease-out; /* Apagado suave. */
}

/* Cambio de página o de filtro animado (lo maneja el script, mismo movimiento que el paginado de
   OfficeEventsCalendar): las tarjetas actuales se desvanecen subiendo un poco y las nuevas entran
   desde abajo, una tras otra. La salida dura lo mismo que LEAVE_MS del script.

   El selector de la salida es tan específico como el de aria-busy y va después, para ganarle: el
   apagado a 0.5 de la carga no debe frenar la salida a 0. */
.DocumentLibrary-grid .DocumentLibrary-item.DocumentLibrary-item--leave:not(.DocumentLibrary-item--skeleton) {
    opacity: 0; /* Se desvanece. */
    transform: translateY(-6px); /* Sube un poco al irse. */
    transition: opacity 0.16s ease-in, transform 0.16s ease-in; /* Salida corta. */
}

.DocumentLibrary-item--enter {
    animation: DocumentLibrary-enter 0.32s ease-out both; /* Entrada; "both" la oculta durante el retraso. */
    animation-delay: var(--DocumentLibrary-delay, 0ms); /* Escalonado que pone el script. */
}

@keyframes DocumentLibrary-enter {
    from {
        opacity: 0; /* Aparece... */
        transform: translateY(10px); /* ...desde abajo. */
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.DocumentLibrary-card {
    position: relative; /* Ancla del enlace estirado. */
    display: flex; /* Portada y cuerpo apilados. */
    flex-direction: column; /* En columna. */
    width: 100%; /* Toda la celda. */
    overflow: hidden; /* Recorta la portada al redondeo. */
    background-color: #ffffff; /* Fondo del nodo. */
    border: 1px solid rgba(15, 15, 18, 0.1); /* Borde del nodo. */
    border-radius: 12px; /* Redondeo del nodo. */
    transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out; /* Realce. */
}

    .DocumentLibrary-card:hover,
    .DocumentLibrary-card:focus-within {
        border-color: rgba(15, 15, 18, 0.18); /* El borde se marca. */
        box-shadow: 0 10px 24px rgba(15, 15, 18, 0.08); /* La tarjeta se despega. */
    }

.DocumentLibrary-card-media {
    position: relative; /* Ancla del velo. */
    display: flex; /* Centra el formato sin portada. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    height: 150px; /* Alto del nodo. */
    overflow: hidden; /* Recorta la portada. */
    background-color: #eef1f4; /* Gris de fondo sin portada. */
}

.DocumentLibrary-card-image {
    position: absolute; /* Cubre el recuadro. */
    inset: 0; /* De borde a borde. */
    width: 100%; /* Todo el ancho. */
    height: 100%; /* Todo el alto. */
    object-fit: cover; /* Recorta sin deformar. */
    transition: transform 0.4s ease-out; /* Acercamiento suave. */
}

    .DocumentLibrary-card:hover .DocumentLibrary-card-image {
        transform: scale(1.05); /* Realce estándar. */
    }

/* Formato del archivo en lugar de la portada. */
.DocumentLibrary-card-format {
    position: relative; /* Sobre el fondo. */
    font-size: 28px; /* Grande y legible. */
    font-weight: 900; /* Black. */
    letter-spacing: 1.5px; /* Apertura de etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del sistema. */
    opacity: 0.35; /* Discreto. */
}

/* Velo de legibilidad del nodo ("scrim · legibilidad"). */
.DocumentLibrary-card-scrim {
    position: absolute; /* Sobre la portada. */
    inset: 0; /* De borde a borde. */
    background: linear-gradient(180deg, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%); /* Degradado del nodo. */
    pointer-events: none; /* No tapa el enlace. */
}

.DocumentLibrary-card-body {
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Alineados a la izquierda. */
    gap: 6px; /* Separación del nodo. */
    flex: 1 1 auto; /* Estira para alinear los enlaces. */
    padding: 14px 18px 18px; /* Rellenos del nodo. */
}

.DocumentLibrary-card-type {
    margin: 0; /* La separación la da el gap. */
    font-size: 9px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Compacto. */
    letter-spacing: 0.9px; /* Apertura del nodo. */
    text-transform: uppercase; /* "CATÁLOGO". */
    color: var(--DocumentLibrary-accent); /* Celeste del nodo. */
}

.DocumentLibrary-card-title {
    margin: 0; /* La separación la da el gap. */
    font-size: 15px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Compacto. */
    color: var(--DocumentLibrary-ink);
    overflow-wrap: anywhere; /* Un código largo no desborda. */
}

.DocumentLibrary-card-meta {
    margin: 0; /* La separación la da el gap. */
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular. */
    line-height: 1.2; /* Compacto. */
    color: rgba(15, 15, 18, 0.45); /* Gris del nodo. */
}

.DocumentLibrary-card-link {
    display: inline-flex; /* Texto y flecha en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Los dos espacios del nodo. */
    margin-top: auto; /* Al pie del cuerpo. */
    font-size: 12px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Compacto. */
    color: var(--DocumentLibrary-accent); /* Celeste del nodo. */
    text-decoration: none; /* Sin subrayado. */
}

    /* Estira el enlace sobre toda la tarjeta: un solo elemento enfocable por documento. */
    .DocumentLibrary-card-link::after {
        content: "";
        position: absolute; /* Relativo a la tarjeta. */
        inset: 0; /* De borde a borde. */
        border-radius: inherit; /* Mismo redondeo. */
    }

    /* Bootstrap colorea y subraya los enlaces con el puntero encima. */
    .DocumentLibrary-card-link:hover,
    .DocumentLibrary-card-link:focus {
        color: var(--DocumentLibrary-accent);
        text-decoration: none;
    }

    .DocumentLibrary-card-link:focus-visible {
        outline: none; /* El anillo lo lleva la tarjeta. */
    }

        .DocumentLibrary-card-link:focus-visible::after {
            outline: 2px solid var(--color-cool-neutral-02); /* Anillo sobre la tarjeta. */
            outline-offset: -2px; /* Dentro del recorte. */
        }

.DocumentLibrary-card-arrow {
    flex: 0 0 auto; /* No se comprime. */
    width: 13px; /* Flecha del nodo. */
    height: 13px; /* Cuadrada. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Del color del enlace. */
    stroke-width: 2.5; /* Trazo marcado. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértices redondeados. */
    transition: transform 0.2s ease-out; /* Micro animación estándar. */
}

    .DocumentLibrary-card:hover .DocumentLibrary-card-arrow,
    .DocumentLibrary-card-link:focus-visible .DocumentLibrary-card-arrow {
        transform: translateY(3px); /* La flecha baja: descarga. */
    }

/* Tarjeta de carga con los bloques grises de site.css. */
.DocumentLibrary-item--skeleton .DocumentLibrary-card-media {
    background-color: transparent; /* El bloque gris lo pone Skeleton-box. */
}

.DocumentLibrary-item--skeleton .Skeleton-box {
    width: 100%; /* Todo el recuadro. */
    height: 100%; /* Todo el alto. */
}

/* --- Sin resultados (nodo "Empty state" 1831:15799) y error. --- */
.DocumentLibrary-empty {
    display: flex; /* Bloques apilados. */
    flex-direction: column; /* En columna. */
    align-items: center; /* Centrados. */
    gap: 16px; /* Separación del nodo. */
    padding: 24px 0 8px; /* Rellenos del nodo. */
    text-align: center; /* Texto centrado. */
}

.DocumentLibrary-empty-icon {
    flex: 0 0 auto; /* No se comprime. */
    width: 80px; /* Tamaño del nodo. */
    height: 80px; /* Cuadrado. */
}

.DocumentLibrary-empty-title {
    max-width: 480px; /* Ancho del nodo. */
    margin: 0; /* La separación la da el gap. */
    font-size: 24px; /* Tamaño del nodo. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.25; /* Interlineado de titular. */
    color: var(--DocumentLibrary-ink);
}

.DocumentLibrary-empty-text {
    max-width: 420px; /* Ancho del nodo. */
    margin: 0; /* La separación la da el gap. */
    font-size: 14px; /* Tamaño del nodo. */
    line-height: 1.4; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo. */
}

.DocumentLibrary-empty-actions {
    display: flex; /* Botones en fila. */
    flex-wrap: wrap; /* Bajan de renglón si no entran. */
    justify-content: center; /* Centrados. */
    gap: 12px; /* Separación del nodo. */
    padding-top: 10px; /* Relleno del nodo. */
}

.DocumentLibrary-error {
    margin: 0;
    font-size: 13px; /* Como el conteo. */
    font-weight: 500; /* Medium. */
    color: #b3261e; /* Rojo de error. */
}

/* --- Paginación: "Página 2 de 7 · ‹ Anterior | Siguiente ›", el mismo patrón de
   SplitPreviewShowcase y OfficeEventsCalendar. --- */
.DocumentLibrary-pager {
    display: flex; /* Estado y leyendas en una sola fila. */
    flex-wrap: wrap; /* En un ancho muy chico las leyendas bajan en lugar de salirse. */
    align-items: center; /* Centrados verticalmente. */
    justify-content: space-between; /* Estado a la izquierda, leyendas a la derecha. */
    gap: 4px 16px; /* Separación mínima al envolver. */
    padding-top: 12px; /* Aire con la última fila de tarjetas. */
    border-top: 1px solid var(--DocumentLibrary-line); /* Divisor, como los de los filtros. */
}

/* "Página 2 de 7": discreto. */
.DocumentLibrary-pager-status {
    margin: 0; /* Sin margen propio. */
    font-size: 12px; /* Pequeño: no satura. */
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan al cambiar de página. */
    letter-spacing: 0.2px; /* Apertura leve. */
    color: rgba(15, 15, 18, 0.5); /* Gris del diseño. */
}

.DocumentLibrary-pager-actions {
    display: flex; /* Leyendas en línea. */
    align-items: center; /* Centradas entre sí. */
    justify-content: flex-end; /* Pegadas a la derecha, también cuando se ve una sola. */
    gap: 12px; /* Separación entre leyendas. */
    margin-left: auto; /* Quedan a la derecha aunque la fila envuelva. */
}

/* Leyenda de texto, no botón: sin caja, sin contorno y sin fondo. */
.DocumentLibrary-pager-button {
    display: inline-flex; /* Texto e ícono en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Separación entre texto e ícono. */
    margin: 0; /* Sin el margen propio del botón. */
    padding: 8px 2px; /* Zona de toque cómoda sin caja visible. */
    border: 0; /* Sin contorno. */
    background: transparent; /* Sin fondo. */
    font: inherit; /* El botón no trae la tipografía del sitio. */
    font-size: 14px; /* Tamaño. */
    font-weight: 700; /* Bold. */
    color: var(--DocumentLibrary-accent); /* Celeste de enlaces del diseño. */
    cursor: pointer; /* Indica que es accionable. */
    transition: opacity 0.2s ease-in-out; /* Respuesta suave. */
}

    /* Cuando se ven las dos, una raya fina las separa. */
    .DocumentLibrary-pager-button:not([hidden]) ~ .DocumentLibrary-pager-button:not([hidden]) {
        padding-left: 12px;
        border-left: 1px solid rgba(15, 15, 18, 0.2);
    }

    .DocumentLibrary-pager-button:hover,
    .DocumentLibrary-pager-button:active {
        opacity: 0.7; /* Respuesta al puntero y al toque. */
    }

    .DocumentLibrary-pager-button:disabled {
        opacity: 0.5; /* Mientras llega la página. */
        cursor: progress; /* Indica espera. */
    }

    .DocumentLibrary-pager-button:focus-visible {
        outline: 2px solid var(--color-cool-neutral-02); /* Anillo de foco, como los demás controles. */
        outline-offset: 2px;
    }

.DocumentLibrary-pager-icon {
    width: 14px; /* Tamaño del glifo. */
    height: 14px; /* Cuadrado. */
    stroke: currentColor; /* Toma el color del botón. */
    stroke-width: 2.5; /* Grosor del trazo. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* El conteo recibe el foco al cambiar de página (lo anuncia); sin anillo, no es un control. */
.DocumentLibrary-count:focus {
    outline: none;
}

/* Botón secundario del estado vacío ("button-secondary" del nodo). */
.DocumentLibrary-empty-button {
    padding: 12px 22px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    border: 1px solid rgba(15, 15, 18, 0.2); /* Borde del nodo. */
    border-radius: 8px; /* Redondeo del nodo. */
    font: inherit; /* Hereda la pila de marca. */
    font-size: 13.5px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 1.2; /* Compacto. */
    white-space: nowrap; /* No se corta. */
    color: var(--DocumentLibrary-ink);
    cursor: pointer; /* Es clicable. */
    transition: transform 0.2s ease-out, border-color 0.2s ease-out; /* Realce. */
}

    .DocumentLibrary-empty-button:hover,
    .DocumentLibrary-empty-button:focus-visible {
        transform: scale(1.05); /* Realce estándar de botones. */
        border-color: rgba(15, 15, 18, 0.4); /* El borde se marca. */
    }

/* --- Tablet (hasta 1024px): filtros apilados y dos tarjetas por fila. --- */
@media (max-width: 1024px) {
    .DocumentLibrary {
        flex-direction: column; /* Filtros arriba y resultados abajo. */
        align-items: stretch; /* Ambos a todo el ancho. */
        gap: 24px; /* Separación del nodo. */
        padding: 32px 32px 48px; /* Rellenos del nodo. */
    }

    .DocumentLibrary-sidebar {
        flex: 0 0 auto; /* Ya no es una columna fija. */
        position: static; /* Apilados sobre los resultados: no se fijan. */
        max-height: none; /* Alto natural. */
        overflow-y: visible; /* Sin scroll propio. */
        padding: 0; /* Sin el aire de la columna fija. */
        margin: 0; /* Ídem. */
    }

    .DocumentLibrary-results {
        flex: 0 0 auto; /* Alto natural. */
    }

    .DocumentLibrary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos tarjetas de 342 del nodo. */
    }
}

/* --- Mobile (hasta 500px): una tarjeta por fila. --- */
@media (max-width: 500px) {
    .DocumentLibrary {
        padding: 32px 20px 48px; /* Rellenos del nodo. */
    }

    .DocumentLibrary-grid {
        grid-template-columns: minmax(0, 1fr); /* Una tarjeta de 335 del nodo. */
    }

    .DocumentLibrary-sort-menu {
        min-width: 180px; /* Entra junto al borde de la pantalla. */
    }

    .DocumentLibrary-empty-title {
        font-size: 20px; /* Entra en dos renglones sobre la mesa de 375. */
    }
}

/* Movimiento reducido: nada se agranda ni gira. */
@media (prefers-reduced-motion: reduce) {
    .DocumentLibrary-chip-icon,
    .DocumentLibrary-facet-chevron,
    .DocumentLibrary-sort-chevron,
    .DocumentLibrary-card-image,
    .DocumentLibrary-card-arrow,
    .DocumentLibrary-pager-button,
    .DocumentLibrary-empty-button {
        transition: none;
    }

    .DocumentLibrary-grid .DocumentLibrary-item.DocumentLibrary-item--leave:not(.DocumentLibrary-item--skeleton),
    .DocumentLibrary-item--enter {
        transition: none; /* El script ya no las usa con movimiento reducido; por si acaso. */
        animation: none;
    }
}