/* ProfileQuickAccessGrid.css — Accesos directos del perfil: cabecera y tarjetas de enlace.
   Nodos 2611:37956 (PC, contenido de 1184), 2611:38262 (tablet, mesa de 768) y 2611:38538 (mobile,
   mesa de 375).
   ESCRITORIO: 3 tarjetas por fila, blancas con contorno. TABLET: 2 por fila, grises sin contorno y
   el icono sobre celeste. MOBILE: 1 por fila. El eyebrow es el estándar
   del proyecto en los tres rangos. */

/* --- Sección. --- */
.ProfileQuickAccessGrid {
    --ProfileQuickAccessGrid-columns: 3; /* Tarjetas por fila en escritorio. */
    --ProfileQuickAccessGrid-ink: #0f0f12; /* Casi negro del diseño. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    padding: 8px 48px 56px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--ProfileQuickAccessGrid-ink); /* Color base del texto. */
}

/* Contenido centrado dentro del techo del sitio. */
.ProfileQuickAccessGrid-container {
    display: flex; /* Cabecera y grilla apiladas. */
    flex-direction: column; /* En columna. */
    gap: 24px; /* Separación del nodo. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Cabecera: eyebrow y título a todo el ancho. Sin nota (se quitó por pedido de QA: en mobile,
   a la derecha del título, lo apretaba en una columna angosta). --- */
.ProfileQuickAccessGrid-header {
    min-width: 0; /* El título envuelve dentro del ancho. */
}

.ProfileQuickAccessGrid-heading {
    display: flex; /* Eyebrow y título apilados. */
    flex-direction: column; /* En columna. */
    gap: 9px; /* Separación del nodo. */
    min-width: 0; /* Deja que el título envuelva. */
}

/* Eyebrow estándar. */
.ProfileQuickAccessGrid-eyebrow {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    margin: 0; /* La separación la da el gap. */
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    font-size: 14px; /* Heading/H6 del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

.ProfileQuickAccessGrid-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo. */
    height: 7px; /* Cuadrado. */
    background-color: currentColor; /* Acompaña a la etiqueta. */
}

/* Título: 34px en el piso del rango de escritorio (1200px). */
.ProfileQuickAccessGrid-title {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    margin: 0; /* La separación la da el gap. */
    font-size: clamp(28px, 2.8333vw, 34px); /* 34 / 1200 * 100. */
    font-weight: 900; /* Black del nodo. */
    line-height: normal; /* Interlineado del nodo. */
    letter-spacing: -0.02em; /* -0.68px sobre 34px. */
    color: var(--ProfileQuickAccessGrid-ink);
}

/* --- Grilla de tarjetas. --- */
.ProfileQuickAccessGrid-grid {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(var(--ProfileQuickAccessGrid-columns), minmax(0, 1fr)); /* Columnas iguales. */
    gap: 20px; /* Separación del nodo. */
    margin: 0; /* Sin el margen de la lista. */
    padding: 0; /* Sin la sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

.ProfileQuickAccessGrid-item {
    display: flex; /* La tarjeta ocupa toda la celda. */
    min-width: 0; /* Deja que el texto envuelva. */
}

.ProfileQuickAccessGrid-card {
    box-sizing: border-box; /* El relleno entra en el tamaño. */
    display: flex; /* Icono, texto y flecha en fila. */
    align-items: center; /* Centrados en el alto. */
    gap: 14px; /* Separación del nodo. */
    width: 100%; /* Ancho de la celda. */
    min-height: 100px; /* Alto del nodo; crece si el texto envuelve. */
    padding: 18px; /* Relleno del nodo. */
    border: 1px solid rgba(15, 15, 18, 0.1); /* Contorno del nodo. */
    border-radius: 6px; /* Radio del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; /* Suaviza el realce. */
}

    /* Los cinco estados le ganan al a:hover de Bootstrap. */
    .ProfileQuickAccessGrid-card,
    .ProfileQuickAccessGrid-card:link,
    .ProfileQuickAccessGrid-card:visited,
    .ProfileQuickAccessGrid-card:hover,
    .ProfileQuickAccessGrid-card:focus,
    .ProfileQuickAccessGrid-card:active {
        color: inherit; /* Sin el azul de los enlaces. */
        text-decoration: none; /* Sin subrayado. */
    }

    /* Realce de las tarjetas con destino. */
    .ProfileQuickAccessGrid-card.is-linked:hover,
    .ProfileQuickAccessGrid-card.is-linked:focus-visible {
        border-color: rgba(15, 15, 18, 0.22); /* Contorno más marcado. */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); /* Se despega levemente. */
    }

/* Recuadro del icono. */
.ProfileQuickAccessGrid-icon {
    box-sizing: border-box; /* El relleno entra en el lado. */
    flex: 0 0 auto; /* No se comprime. */
    display: flex; /* Para centrar el icono. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 38px; /* Lado del nodo. */
    height: 38px; /* Cuadrado. */
    padding: 6px; /* Aire alrededor del icono. */
    border-radius: 10px; /* Radio del nodo. */
    background-color: #ffffff; /* Fondo del nodo de escritorio. */
}

.ProfileQuickAccessGrid-icon-image {
    display: block; /* Sin la línea base. */
    max-width: 100%; /* No se sale del recuadro. */
    max-height: 100%; /* Ídem. */
    width: auto; /* Proporción propia. */
    height: auto; /* Ídem. */
    object-fit: contain; /* Entero, sin recortar. */
}

.ProfileQuickAccessGrid-text {
    flex: 1 1 0; /* Toma el espacio libre. */
    min-width: 0; /* Deja que el texto envuelva. */
    display: flex; /* Título y subtítulo apilados. */
    flex-direction: column; /* En columna. */
    gap: 3px; /* Separación del nodo. */
    line-height: normal; /* Interlineado del nodo. */
}

.ProfileQuickAccessGrid-card-title {
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar la página. */
    font-size: 15px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    color: var(--ProfileQuickAccessGrid-ink);
}

.ProfileQuickAccessGrid-card-subtitle {
    font-size: 11.5px; /* Tamaño del nodo. */
    color: rgba(15, 15, 18, 0.5); /* Gris del nodo. */
    /* Ahora es la Short description del recurso, que puede ser larga: hasta dos renglones con
       puntos suspensivos, y una palabra larga se corta en vez de desbordar la tarjeta. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Flecha estándar de LegalLinksSection, sola al pie de la tarjeta. */
.ProfileQuickAccessGrid-arrow {
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    flex: none; /* No se comprime. */
    margin-inline: 0 4px; /* Reserva los 4px que avanza: el texto no cambia de ancho. */
    fill: none; /* Solo trazo. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
    stroke: currentColor; /* Trazo sólido. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
    transition: margin 0.2s ease-in-out; /* Mismo ritmo que el gap estándar. */
}

/* La flecha avanza 4px hacia su punta con el puntero encima o el foco del teclado. */
.ProfileQuickAccessGrid-card.is-linked:hover .ProfileQuickAccessGrid-arrow,
.ProfileQuickAccessGrid-card.is-linked:focus-visible .ProfileQuickAccessGrid-arrow {
    margin-inline: 4px 0; /* Pasa la reserva de la derecha a la izquierda. */
}

/* --- Tablet (hasta 1024px): 2 por fila, tarjetas grises sin contorno. --- */
@media (max-width: 1024px) {
    .ProfileQuickAccessGrid {
        --ProfileQuickAccessGrid-columns: 2; /* Tarjetas por fila del nodo. */
        padding: 48px 32px; /* Rellenos del nodo. */
    }

    .ProfileQuickAccessGrid-container {
        gap: 20px; /* Separación del nodo. */
    }

    .ProfileQuickAccessGrid-heading {
        gap: 6px; /* Separación del nodo. */
    }

    .ProfileQuickAccessGrid-eyebrow {
        font-size: 12px; /* Tamaño del nodo de tablet. */
    }

    .ProfileQuickAccessGrid-title {
        font-size: min(3.125vw, 24px); /* 24px sobre la mesa de 768. */
        font-weight: 700; /* Bold del nodo de tablet. */
        letter-spacing: 0; /* Sin ajuste en el nodo. */
    }

    .ProfileQuickAccessGrid-grid {
        gap: 14px; /* Separación del nodo. */
    }

    .ProfileQuickAccessGrid-card {
        min-height: 0; /* Alto según el contenido. */
        padding: 16px; /* Relleno del nodo. */
        border-color: transparent; /* Sin contorno en el nodo de tablet. */
        background-color: #fafafa; /* Gris del nodo. */
    }

        .ProfileQuickAccessGrid-card.is-linked:hover,
        .ProfileQuickAccessGrid-card.is-linked:focus-visible {
            border-color: transparent; /* Sin contorno también en el realce. */
            background-color: #f3f3f3; /* Se oscurece apenas. */
        }

    .ProfileQuickAccessGrid-icon {
        width: 34px; /* Lado del nodo. */
        height: 34px; /* Cuadrado. */
        border-radius: 6px; /* Radio del nodo. */
        background-color: rgba(66, 156, 222, 0.15); /* Celeste tenue del nodo. */
    }

    .ProfileQuickAccessGrid-text {
        gap: 2px; /* Separación del nodo. */
    }

    .ProfileQuickAccessGrid-card-title {
        font-size: 14px; /* Tamaño del nodo de tablet. */
        font-weight: 600; /* Semibold del nodo. */
    }

    .ProfileQuickAccessGrid-card-subtitle {
        font-size: 12px; /* Tamaño del nodo de tablet. */
        color: rgba(15, 15, 18, 0.55); /* Gris del nodo de tablet. */
    }

    .ProfileQuickAccessGrid-arrow {
        color: #0f0f12; /* Trazo sólido... */
        opacity: 0.4; /* ...y la transparencia en el svg: gris del nodo de tablet. */
    }
}

/* --- Mobile (hasta 500px): 1 por fila. --- */
@media (max-width: 500px) {
    .ProfileQuickAccessGrid {
        --ProfileQuickAccessGrid-columns: 1; /* Una tarjeta por fila. */
        padding: 32px 20px; /* Rellenos del nodo. */
    }

    .ProfileQuickAccessGrid-title {
        font-size: min(5.3333vw, 20px); /* 20px sobre la mesa de 375. */
    }
}

/* Movimiento reducido: la flecha y el realce no se animan. */
@media (prefers-reduced-motion: reduce) {
    .ProfileQuickAccessGrid-card,
    .ProfileQuickAccessGrid-arrow {
        transition: none;
    }

    .ProfileQuickAccessGrid-card.is-linked:hover .ProfileQuickAccessGrid-arrow,
    .ProfileQuickAccessGrid-card.is-linked:focus-visible .ProfileQuickAccessGrid-arrow {
        margin-inline: 0 4px; /* La flecha no se mueve. */
    }
}

/* --- Paginación (más de seis tarjetas): "Página 1 de 2 · ‹ Anterior | Siguiente ›". Mismo patrón y
   estilo que DocumentLibrary. Igual en PC, tablet y mobile. --- */
.ProfileQuickAccessGrid-item[hidden] {
    display: none !important; /* La página que no se ve no ocupa lugar en la grilla. */
}

.ProfileQuickAccessGrid-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. */
    margin-top: 20px; /* Aire con la última fila de tarjetas. */
    padding-top: 12px; /* Ídem. */
    border-top: 1px solid rgba(15, 15, 18, 0.12); /* Divisor. */
}

    .ProfileQuickAccessGrid-pager[hidden] {
        display: none; /* Sin script no se pinta. */
    }

/* "Página 1 de 2": discreto. */
.ProfileQuickAccessGrid-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. */
}

.ProfileQuickAccessGrid-pager-actions {
    display: flex; /* Leyendas en línea. */
    align-items: center; /* Centradas entre sí. */
    justify-content: flex-end; /* Pegadas a la derecha. */
    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. */
.ProfileQuickAccessGrid-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: #429cde; /* Celeste de enlaces del diseño. */
    cursor: pointer; /* Indica que es accionable. */
    transition: opacity 0.2s ease; /* Respuesta suave. */
}

/* Leyenda del botón: dos renglones como máximo con puntos suspensivos (estándar). */
.ProfileQuickAccessGrid-link-text {
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    min-width: 0; /* Cede ancho al ícono. */
    overflow: hidden; /* Recorta lo que no entra. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

    /* Con las dos leyendas visibles, una barra las separa. */
    .ProfileQuickAccessGrid-pager-button:not([hidden]) ~ .ProfileQuickAccessGrid-pager-button:not([hidden]) {
        padding-left: 12px;
        border-left: 1px solid rgba(15, 15, 18, 0.2);
    }

    .ProfileQuickAccessGrid-pager-button[hidden] {
        display: none; /* En el extremo, la leyenda que no aplica no se ve. */
    }

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

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

.ProfileQuickAccessGrid-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. */
}

@media (prefers-reduced-motion: reduce) {

    .ProfileQuickAccessGrid-pager-button {
        transition: none; /* Sin animaciones. */
    }
}