/* ==========================================================================
   Job Search Page - LinkedIn/Indeed Style Design
   Reqlut Platform - Modern Job Search Interface
   ========================================================================== */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --job-card-radius: 12px;
    --job-card-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
    --job-card-shadow-hover: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.1);
    --job-badge-radius: 20px;
    --job-input-radius: 8px;
    --job-btn-radius: 8px;
}

/* ==========================================================================
   BASE CARD COMPONENT - Reusable across Events, News, and other content
   ========================================================================== */

/* ----- Base Card Structure ----- */
.content-card {
    background: #fff;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.content-card:hover {
    box-shadow: var(--job-card-shadow-hover);
    transform: translateY(-2px);
}

/* ----- Card Image Section ----- */
.content-card-image {
    position: relative;
    overflow: hidden;
}

.content-card-image-link {
    display: block;
    text-decoration: none;
}

/* Allow image-link to be used as button */
button.content-card-image-link {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

button.content-card-image-link:focus {
    outline: 2px solid #0a66c2;
    outline-offset: 2px;
}

.content-card-thumbnail {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: transform 0.3s ease;
}

.content-card:hover .content-card-thumbnail {
    transform: scale(1.05);
}

.content-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.content-card:hover .content-card-overlay {
    opacity: 1;
}

.content-card-overlay i {
    font-size: 2rem;
    color: #fff;
}

/* ----- Card Badge (Category/State) ----- */
.content-card-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--job-badge-radius);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    z-index: 2;
}

.content-card-badge--right {
    left: auto;
    right: 0.75rem;
}

/* ----- Card Content Section ----- */
.content-card-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.content-card-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.content-card-title-link {
    color: #191919;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.content-card-title-link:hover {
    color: #0a66c2;
}

/* ----- Card Meta Information ----- */
.content-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: auto;
}

.content-card-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.content-card-meta-item i {
    width: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ----- Card Footer/Actions ----- */
.content-card-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.content-card-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.content-card-btn {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.content-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.content-card-link:hover {
    gap: 0.6rem;
    text-decoration: none;
}

/* ----- Base Page Wrapper ----- */
.content-page-wrapper {
    background: #f4f2ee;
    min-height: 100vh;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ----- Base Page Header ----- */
.content-page-header {
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 1.5rem;
}

.content-page-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #191919;
    margin: 0 0 0.5rem;
}

.content-page-description {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ----- Base Filters Section ----- */
.content-filters {
    background: #fff;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.content-filters-form {
    margin: 0;
}

.content-filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.content-filter-group {
    flex: 1;
    min-width: 200px;
}

.content-filter-select {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: var(--job-input-radius);
    font-size: 0.9rem;
    color: #333;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.content-filter-select:focus {
    outline: none;
    border-color: #0a66c2;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1);
}

/* ----- Base Grid Layout ----- */
.content-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5rem;
}

.content-grid-item {
    padding: 0.5rem;
}

/* ----- Base Detail Layout ----- */
.content-detail-wrapper {
    background: #f4f2ee;
    min-height: 100vh;
    padding: 1.5rem 0 3rem;
}

.content-detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}

.content-detail-main {
    min-width: 0;
}

.content-detail-sidebar {
    position: sticky;
    top: 1.5rem;
}

/* ----- Base Detail Card ----- */
.content-detail-card {
    background: #fff;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    overflow: hidden;
}

.content-detail-card-header {
    padding: 1.5rem;
}

.content-detail-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #191919;
    margin: 0 0 0.75rem;
    line-height: 1.3;
}

.content-detail-subtitle {
    font-size: 1.05rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.content-detail-content {
    padding: 1.5rem;
    border-top: 1px solid #f0f0f0;
}

/* ----- Base Section Header ----- */
.content-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.content-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #191919;
    margin: 0;
}

.content-section-link {
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* ----- Base Pagination ----- */
.content-pagination {
    display: flex;
    justify-content: center;
    padding: 2rem 0 1rem;
}

/* ----- Base Back Button ----- */
.content-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: #666;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.content-back-link:hover {
    color: #191919;
    text-decoration: none;
}

/* ----- Base Responsive ----- */
@media (max-width: 991.98px) {
    .content-detail-layout {
        grid-template-columns: 1fr;
    }

    .content-detail-sidebar {
        position: static;
        margin-top: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .content-page-header {
        padding: 1.5rem 0 1rem;
    }

    .content-page-title {
        font-size: 1.5rem;
    }

    .content-filters-grid {
        flex-direction: column;
    }

    .content-filter-group {
        width: 100%;
        min-width: auto;
    }

    .content-detail-wrapper {
        padding: 1rem 0 2rem;
    }

    .content-detail-title {
        font-size: 1.35rem;
    }

    .content-detail-card-header,
    .content-detail-content {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .content-card-thumbnail {
        height: 150px;
    }

    .content-section-title {
        font-size: 1.15rem;
    }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* ----- Focus States ----- */
.content-card-title-link:focus,
.content-card-link:focus,
.content-card-image-link:focus,
.content-section-link:focus,
.content-back-link:focus,
.content-card-btn:focus {
    outline: 2px solid #0a66c2;
    outline-offset: 2px;
}

/* ----- Focus Within for Cards ----- */
.content-card:focus-within {
    box-shadow: var(--job-card-shadow-hover), 0 0 0 2px #0a66c2;
}

/* ----- Skip Link ----- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: #0a66c2;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--job-btn-radius);
    z-index: 9999;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 1rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ----- Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {
    .content-card,
    .content-card-thumbnail,
    .content-card-overlay,
    .content-card-link,
    .content-card-title-link {
        transition: none;
    }

    .content-card:hover {
        transform: none;
    }

    .content-card:hover .content-card-thumbnail {
        transform: none;
    }
}

/* ----- High Contrast Mode Support ----- */
@media (prefers-contrast: high) {
    .content-card {
        border: 2px solid #000;
    }

    .content-card-badge {
        border: 1px solid #000;
    }

    .content-card-title-link:hover,
    .content-card-link:hover {
        text-decoration: underline;
    }
}

/* ----- Screen Reader Only ----- */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----- Empty State ----- */
.content-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #666;
}

.content-empty-state i {
    font-size: 3rem;
    color: #ccc;
    margin-bottom: 1rem;
}

.content-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.5rem;
}

.content-empty-state p {
    font-size: 0.95rem;
    margin: 0;
}

/* ==========================================================================
   Page Wrapper
   ========================================================================== */
.jobs-page-wrapper {
    background: #f4f2ee;
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* ==========================================================================
   Search Header Section
   ========================================================================== */
.jobs-search-header {
    background: transparent;
    padding: 2.5rem 0 1.5rem 0;
    margin-bottom: 0.5rem;
}

.jobs-search-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
}

.jobs-search-header .subtitle {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 0;
}

/* ==========================================================================
   Search Tabs (buscador propio + feeds externos)
   Pills con el mismo estilo que .jobs-search-btn-filters y el activo relleno con el
   color del portal: los nav-tabs con subrayado pasaban desapercibidos sobre el fondo
   beige. Colores propios: sin esto el tab inactivo hereda el color de link del portal
   cuando hay sesion, y el #444 de loginModal cuando no la hay.
   ========================================================================== */
.jobs-search-tabs {
    /* Aire para que overflow-y:hidden no recorte la sombra del tab activo */
    padding: 2px 2px 6px;
}

.jobs-search-tabs .nav-link {
    padding: 0.5rem 1.125rem;
    border-radius: var(--job-btn-radius);
    border: 1px solid #e5e7eb;
    background: white;
    color: #374151;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.jobs-search-tabs .nav-link:hover,
.jobs-search-tabs .nav-link:focus {
    border-color: var(--portal-color, #0d6efd);
    color: var(--portal-color, #0d6efd);
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.06);
}

.jobs-search-tabs .nav-link.active {
    border-color: var(--portal-color, #0d6efd);
    background: var(--portal-color, #0d6efd);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--portal-color-rgb, 13, 110, 253), 0.3);
}

/* ==========================================================================
   Modern Search Bar
   ========================================================================== */
.jobs-search-bar {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.jobs-search-bar .search-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.jobs-search-input-wrapper {
    flex: 1;
    min-width: 180px;
    position: relative;
}

.jobs-search-input-wrapper.location-wrapper {
    max-width: 220px;
    flex: 0 1 220px;
}

.jobs-search-input-wrapper.jobs-search-select-wrapper {
    max-width: 200px;
    flex: 0 1 200px;
}

/* Job type select - hide icon since native selects don't work well with positioned icons */
.jobs-search-input-wrapper.jobs-search-select-wrapper .input-icon {
    display: none;
}

.jobs-search-input-wrapper.jobs-search-select-wrapper .form-select {
    padding-left: 0.875rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-size: 14px 10px;
    padding-right: 2.25rem;
}

.jobs-search-input-wrapper .input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    z-index: 2;
    pointer-events: none;
    font-size: 0.9rem;
}

.jobs-search-input-wrapper input,
.jobs-search-input-wrapper select,
.jobs-search-input-wrapper .form-control,
.jobs-search-input-wrapper .form-select {
    padding-left: 2.5rem;
    border-radius: var(--job-input-radius);
    border: 1px solid #e5e7eb;
    height: 44px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.jobs-search-input-wrapper input:focus,
.jobs-search-input-wrapper select:focus,
.jobs-search-input-wrapper .form-control:focus,
.jobs-search-input-wrapper .form-select:focus {
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 3px rgba(var(--portal-color-rgb, 13, 110, 253), 0.12);
    outline: none;
}

.jobs-search-input-wrapper input::placeholder {
    color: #9ca3af;
}

/* Selectize override for search bar */
.jobs-search-input-wrapper .selectize-control .selectize-input {
    padding-left: 2.5rem;
    border-radius: var(--job-input-radius);
    border: 1px solid #e5e7eb;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.jobs-search-input-wrapper .selectize-control .selectize-input.focus {
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 3px rgba(var(--portal-color-rgb, 13, 110, 253), 0.12);
}

/* Filter Button */
.jobs-search-btn-filters {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--job-btn-radius);
    border: 1px solid #e5e7eb;
    background: white;
    color: #374151;
    font-weight: 500;
    font-size: 0.9rem;
    height: 44px;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.jobs-search-btn-filters:hover,
.jobs-search-btn-filters:focus {
    border-color: var(--portal-color, #0d6efd);
    color: var(--portal-color, #0d6efd);
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.04);
}

.jobs-search-btn-filters.active {
    border-color: var(--portal-color, #0d6efd);
    color: var(--portal-color, #0d6efd);
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.08);
}

.jobs-search-btn-filters .filter-count {
    background: var(--portal-color, #0d6efd);
    color: white;
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    margin-left: 0.25rem;
}

/* Search Submit Button */
.jobs-search-btn-submit {
    padding: 0.625rem 1.5rem;
    border-radius: var(--job-btn-radius);
    font-weight: 600;
    font-size: 0.9rem;
    height: 44px;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.jobs-search-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--portal-color-rgb, 13, 110, 253), 0.3);
}

/* ==========================================================================
   Filters Panel
   ========================================================================== */
.jobs-filters-panel {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.jobs-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.jobs-filters-title {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jobs-filters-title i {
    color: #4b5563;
}

.jobs-filters-clear {
    font-size: 0.85rem;
    color: #4b5563;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.jobs-filters-clear:hover {
    opacity: 0.8;
    text-decoration: none;
    color: #374151;
}

.jobs-filters-panel .filter-group {
    margin-bottom: 1rem;
}

.jobs-filters-panel .filter-group:last-child {
    margin-bottom: 0;
}

.jobs-filters-panel .filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.5rem;
}

.jobs-filters-panel .filter-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

/* Filter panel form controls */
.jobs-filters-panel .form-select,
.jobs-filters-panel .form-control {
    border-radius: var(--job-input-radius);
    border: 1px solid #e5e7eb;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    height: auto;
    min-height: 40px;
}

.jobs-filters-panel .form-select:focus,
.jobs-filters-panel .form-control:focus {
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 2px rgba(var(--portal-color-rgb, 13, 110, 253), 0.1);
}

.jobs-filters-panel .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.375rem;
}

/* Selectize overrides in filters panel */
.jobs-filters-panel .selectize-control .selectize-input {
    border-radius: var(--job-input-radius);
    border: 1px solid #e5e7eb;
    min-height: 40px;
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
}

.jobs-filters-panel .selectize-control .selectize-input.focus {
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 2px rgba(var(--portal-color-rgb, 13, 110, 253), 0.1);
}

.jobs-filters-panel .selectize-dropdown {
    border-radius: var(--job-input-radius);
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ==========================================================================
   Results Header
   ========================================================================== */
.jobs-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.jobs-results-count {
    font-size: 0.9rem;
    color: #6b7280;
}

.jobs-results-count strong {
    color: var(--portal-color, #0d6efd);
    font-weight: 600;
}

.jobs-sort-dropdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jobs-sort-dropdown label {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0;
    white-space: nowrap;
}

.jobs-sort-dropdown .form-select {
    border-radius: var(--job-btn-radius);
    font-size: 0.85rem;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border: 1px solid #e5e7eb;
    min-width: 140px;
}

.jobs-sort-dropdown .form-select:focus {
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 2px rgba(var(--portal-color-rgb, 13, 110, 253), 0.1);
}

/* ==========================================================================
   Job Card - Modern Design
   ========================================================================== */
.job-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    margin-bottom: 0.75rem;
    padding: 1.25rem;
    transition: all 0.3s ease;
    position: relative;
    border-left: 4px solid transparent;
}

.job-card:hover {
    box-shadow: var(--job-card-shadow-hover);
}

.job-card.featured {
    border-left-color: #f59e0b;
}

.job-card.recommended {
    border-left-color: var(--portal-color, #0d6efd);
}

.job-card-inner {
    display: flex;
    gap: 1rem;
}

/* Company Logo Container */
.job-card-logo {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 10%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    align-self: center;
}

.job-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.job-card-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Job Card Content */
.job-card-content {
    flex: 1;
    min-width: 0;
}

.job-card-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
    line-height: 1.35;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.job-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.job-card-title a:hover {
    color: var(--portal-color, #0d6efd);
}

.job-card-title .sustainable-badge {
    color: #16a34a;
    font-size: 0.9rem;
}

.job-card-title .voice-btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.job-card-company {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.job-card-company a {
    color: var(--portal-color, #0d6efd);
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.job-card-company a:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* « · Área» después del nombre de la empresa, fuera del enlace y de itemprop="name". */
.job-card-company-area {
    color: #6b7280;
    font-weight: 400;
}

/* Metadata Row */
.job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.625rem;
}

.job-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.job-card-meta-item i {
    color: #9ca3af;
    width: 14px;
    text-align: center;
    font-size: 0.75rem;
}

/* Tags/Badges Row */
.job-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.job-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--job-badge-radius);
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.job-badge i {
    font-size: 0.65rem;
}

.job-badge-featured {
    background: #fef3c7;
    color: #b45309;
}

.job-badge-new {
    background: #d1fae5;
    color: #047857;
}

.job-badge-recommended {
    background: #dbeafe;
    color: #1d4ed8;
}

.job-badge-skill {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.job-badge-default {
    background: #f3f4f6;
    color: #4b5563;
}

.job-badge-type {
    background: #e5e7eb;
    color: #374151;
}

.job-badge-external {
    background: #e0e7ff;
    color: #4338ca;
}

.job-badge-more {
    background: #e5e7eb;
    color: #6b7280;
    font-weight: 600;
}

/* Right Actions Column */
.job-card-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    min-width: 130px;
}

.job-card-riah-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #d1fae5;
    color: #047857;
    border-radius: var(--job-badge-radius);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.job-card-riah-badge i {
    font-size: 0.75rem;
}

.job-card-riah-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.job-card-match {
    font-size: 0.75rem;
    color: #047857;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.job-card-match::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
}

.job-card-time {
    font-size: 0.75rem;
    color: #9ca3af;
}

.job-card-share {
    display: flex;
    gap: 0.375rem;
}

.job-card-share a {
    color: #9ca3af;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.job-card-share a:hover {
    color: var(--portal-color, #0d6efd);
}

/* Rating Buttons */
.job-card-rating {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.job-card-rating-btn {
    padding: 0;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 2px;
    transition: all 0.2s ease;
    background-color: #fff;
    overflow: hidden;
}

.job-card-rating-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Scale down the RIAH PNG icons to fit better */
.job-card-rating-btn .riah-love,
.job-card-rating-btn .riah-unhappy {
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Success button (like) */
.job-card-rating .btn-outline-success {
    border-color: #10b981;
    color: #10b981;
}

.job-card-rating .btn-outline-success:hover,
.job-card-rating .btn-outline-success:focus {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: #059669;
}

/* Danger button (dislike) */
.job-card-rating .btn-outline-danger {
    border-color: #ef4444;
    color: #ef4444;
}

.job-card-rating .btn-outline-danger:hover,
.job-card-rating .btn-outline-danger:focus {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #dc2626;
}

/* Apply Button */
.job-card-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--job-btn-radius);
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.job-card-apply-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--portal-color-rgb, 13, 110, 253), 0.25);
}

.job-card-apply-btn i {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.job-card-apply-btn:hover i {
    transform: translateX(2px);
}

/* Applied Status */
.job-card-applied {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: var(--job-btn-radius);
    font-size: 0.8rem;
    font-weight: 500;
}

.job-card-applied i {
    color: #10b981;
}

/* ==========================================================================
   Mini Job Card (Compact)
   ========================================================================== */
.job-card-mini {
    padding: 1rem;
}

.job-card-mini .job-card-inner {
    gap: 0.75rem;
}

.job-card-logo-sm {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.job-card-title-sm {
    font-size: 0.95rem;
    margin-bottom: 0.125rem;
}

.job-card-company-sm {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.job-card-meta-sm {
    font-size: 0.75rem;
    margin-bottom: 0;
}

.job-card-actions-sm {
    min-width: 90px;
    gap: 0.25rem;
}

.job-card-apply-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.job-card-applied-sm {
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
}

/* Mini card responsive */
@media (max-width: 767.98px) {
    .job-card-mini .job-card-inner {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .job-card-mini .job-card-logo-sm {
        position: static;
    }

    .job-card-mini .job-card-content {
        flex: 1;
        padding-left: 0;
        min-height: auto;
        min-width: 0;
    }

    .job-card-mini .job-card-actions-sm {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #f3f4f6;
    }
}

/* ==========================================================================
   Related Job Card (Grid)
   ========================================================================== */
.job-card-grid {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.job-card-grid:hover {
    box-shadow: var(--job-card-shadow-hover);
    transform: translateY(-2px);
}

.job-card-grid .card-logo {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem;
}

.job-card-grid .card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.job-card-grid .card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.job-card-grid .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

.job-card-grid .card-title a {
    color: inherit;
    text-decoration: none;
}

.job-card-grid .card-title a:hover {
    color: var(--portal-color, #0d6efd);
}

.job-card-grid .card-meta {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.job-card-grid .card-meta i {
    color: #9ca3af;
    width: 14px;
}

.job-card-grid .card-footer {
    padding: 1rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.job-card-grid-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #d1fae5;
    color: #047857;
    border-radius: var(--job-badge-radius);
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 1;
}

.job-card-grid-badge .job-card-riah-icon {
    width: 16px;
    height: 16px;
}

.job-card-grid {
    position: relative;
}

/* ==========================================================================
   Job Types & Categories Filter Buttons
   ========================================================================== */
.jobs-type-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.job-type-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: var(--job-btn-radius);
    border: 1px solid #e5e7eb;
    background: white;
    color: #4b5563;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
    min-width: 90px;
}

.job-type-btn i {
    font-size: 1.25rem;
    margin-bottom: 0.375rem;
    color: #9ca3af;
    transition: color 0.2s ease;
}

.job-type-btn:hover,
.job-type-btn.active {
    border-color: var(--portal-color, #0d6efd);
    color: var(--portal-color, #0d6efd);
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.04);
}

.job-type-btn:hover i,
.job-type-btn.active i {
    color: var(--portal-color, #0d6efd);
}

.job-type-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Home Page Search Bar
   ========================================================================== */
.jobs-search-bar-home {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1.5rem;
}

/* Vertical Layout (Sidebar Style) */
.jobs-search-bar-vertical .jobs-search-field {
    margin-bottom: 1rem;
}

.jobs-search-bar-vertical .jobs-search-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
}

.jobs-search-bar-vertical .form-control,
.jobs-search-bar-vertical .form-select {
    border-radius: var(--job-input-radius);
    border: 1px solid #e5e7eb;
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.jobs-search-bar-vertical .form-control:focus,
.jobs-search-bar-vertical .form-select:focus {
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 3px rgba(var(--portal-color-rgb, 13, 110, 253), 0.1);
}

.jobs-search-bar-vertical .jobs-search-input-wrapper .form-control {
    padding-left: 2.5rem;
}

/* Horizontal Layout (Hero Style) */
.jobs-search-bar-horizontal {
    padding: 1.25rem;
}

.jobs-search-bar-horizontal .search-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.jobs-search-bar-horizontal .jobs-search-input-wrapper {
    position: relative;
    min-width: 150px;
}

.jobs-search-bar-horizontal .jobs-search-select-wrapper {
    flex: 0 0 auto;
    min-width: 140px;
}

.jobs-search-bar-horizontal .form-control,
.jobs-search-bar-horizontal .form-select {
    padding-left: 2.5rem;
    border-radius: var(--job-input-radius);
    border: 1px solid #e5e7eb;
    height: 44px;
    font-size: 0.9rem;
}

.jobs-search-bar-horizontal .form-control:focus,
.jobs-search-bar-horizontal .form-select:focus {
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 3px rgba(var(--portal-color-rgb, 13, 110, 253), 0.1);
}

@media (max-width: 767.98px) {
    .jobs-search-bar-horizontal .search-inputs {
        flex-direction: column;
    }

    .jobs-search-bar-horizontal .jobs-search-input-wrapper,
    .jobs-search-bar-horizontal .jobs-search-select-wrapper {
        width: 100%;
        min-width: auto;
    }

    .jobs-search-bar-horizontal .jobs-search-btn-submit {
        width: 100%;
    }
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.jobs-empty-state {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 3rem 2rem;
    text-align: center;
}

.jobs-empty-state i {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.jobs-empty-state h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.jobs-empty-state p {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
}

/* ==========================================================================
   Last Page Notice
   ========================================================================== */
.jobs-last-page-notice {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--job-card-radius);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.jobs-last-page-notice p {
    margin: 0;
    font-size: 0.9rem;
    color: #92400e;
}

.jobs-last-page-notice .btn {
    white-space: nowrap;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 991.98px) {
    .jobs-search-input-wrapper.location-wrapper {
        max-width: none;
        flex: 1;
    }
}

@media (max-width: 767.98px) {
    .jobs-page-wrapper {
        background: #f8f9fa;
        padding-bottom: 1rem;
    }

    .jobs-search-header {
        padding: 1rem 0;
    }

    .jobs-search-header h1 {
        font-size: 1.25rem;
    }

    .jobs-search-bar {
        padding: 0.875rem;
        border-radius: var(--job-input-radius);
    }

    .jobs-search-bar .search-inputs {
        flex-direction: column;
    }

    .jobs-search-input-wrapper {
        width: 100%;
        min-width: auto;
    }

    .jobs-search-input-wrapper.location-wrapper {
        max-width: none;
    }

    /* Job type selector full width on mobile */
    .jobs-search-input-wrapper.jobs-search-select-wrapper {
        max-width: none;
        flex: 0 0 100%;
    }

    .jobs-search-btn-filters,
    .jobs-search-btn-submit {
        width: 100%;
        justify-content: center;
    }

    .jobs-results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .job-card {
        padding: 1rem;
        border-radius: var(--job-input-radius);
    }

    .job-card-inner {
        flex-direction: column;
    }

    .job-card-logo {
        width: 48px;
        height: 48px;
        position: absolute;
        top: 1rem;
        left: 1rem;
    }

    .job-card-content {
        padding-left: 60px;
        min-height: 48px;
    }

    .job-card-title {
        font-size: 0.95rem;
        /* Guard against a single very long token overflowing the page width */
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .job-card-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #f3f4f6;
        min-width: auto;
    }

    .job-card-actions .job-card-time {
        order: 1;
    }

    .job-card-actions .job-card-apply-btn,
    .job-card-actions .job-card-applied {
        order: 2;
        /* Comfortable touch target for the primary CTA on mobile */
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Keep the RIAH badge in normal flow on mobile — it takes its own line above
       the date/apply row (the actions block sits at the bottom of the card) so it
       never overlaps the job title. */
    .job-card-riah-badge {
        order: -1;
        flex-basis: 100%;
        font-size: 0.72rem;
        padding: 0.25rem 0.5rem;
        /* Allow wrap (base rule is nowrap) so a longer translated label can't
           overflow now that the badge spans the full row. */
        white-space: normal;
    }

    .job-card-share,
    .job-card-rating {
        display: none;
    }

    .jobs-filters-panel {
        border-radius: var(--job-input-radius);
        padding: 1rem;
    }

    .jobs-filters-panel .row.g-3 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    /* Make all filter columns full width on mobile for better UX */
    .jobs-filters-panel .row > [class*="col-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Location row stays 2 columns */
    .jobs-filters-panel #location .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .jobs-filters-panel .form-label {
        font-size: 0.75rem;
    }

    /* font-size is governed by the iOS-zoom rule (16px) further down; keeping a
       value here would be dead code (main.css forces .form-control !important). */
    .jobs-filters-panel .form-select,
    .jobs-filters-panel .form-control {
        min-height: 38px;
        padding: 0.375rem 0.625rem;
    }

    .jobs-filters-panel .selectize-control .selectize-input {
        min-height: 38px;
    }

    .jobs-filters-panel .filter-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .jobs-filters-panel .filter-actions .btn {
        width: 100%;
    }

    .jobs-filters-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .jobs-filters-title {
        font-size: 0.875rem;
    }

    .jobs-type-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
        margin: 0 -1rem 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .job-type-btn {
        flex: 0 0 auto;
        min-width: 80px;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .job-type-btn i {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .job-card-content {
        padding-left: 56px;
    }

    .job-card-logo {
        width: 44px;
        height: 44px;
    }

    .job-card-meta {
        flex-direction: column;
        gap: 0.25rem;
    }

    .job-card-tags {
        margin-top: 0.375rem;
    }

    .job-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
        /* Long single badges (e.g. experience descriptions) must wrap instead of
           forcing horizontal page scroll on narrow phones. */
        white-space: normal;
        max-width: 100%;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .jobs-page-wrapper {
        background: white;
    }

    .job-card {
        box-shadow: none;
        border: 1px solid #dee2e6;
        page-break-inside: avoid;
    }

    .job-card-apply-btn,
    .jobs-search-bar,
    .jobs-filters-panel,
    .job-card-share,
    .job-card-rating {
        display: none !important;
    }

    .job-card-actions {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */
.job-card:focus-within {
    outline: 2px solid var(--portal-color, #0d6efd);
    outline-offset: 2px;
}

.jobs-search-btn-filters:focus,
.jobs-search-btn-submit:focus,
.job-card-apply-btn:focus,
.job-type-btn:focus {
    outline: 2px solid var(--portal-color, #0d6efd);
    outline-offset: 2px;
}

/* Skip link for keyboard navigation */
.jobs-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--portal-color, #0d6efd);
    color: white;
    padding: 8px 16px;
    z-index: 100;
    text-decoration: none;
    border-radius: 0 0 var(--job-btn-radius) var(--job-btn-radius);
}

.jobs-skip-link:focus {
    top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .job-card {
        border: 2px solid #000;
    }

    .job-badge {
        border: 1px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .job-card,
    .job-card-apply-btn,
    .jobs-search-btn-submit,
    .job-card-grid {
        transition: none;
    }

    .job-card-apply-btn:hover,
    .jobs-search-btn-submit:hover,
    .job-card-grid:hover {
        transform: none;
    }
}

/* ==========================================================================
   Job Detail Page - LinkedIn/Indeed Style
   ========================================================================== */

/* Job Detail Wrapper */
.job-detail-wrapper {
    background: #f4f2ee;
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* Container uses default Bootstrap max-width to match company profile */

/* Job Detail Card */
.job-detail-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

/* Job Detail Header */
.job-detail-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.job-detail-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.job-detail-title .sustainable-icon {
    color: #16a34a;
    margin-left: 0.5rem;
}

.job-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.job-detail-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.75rem;
}

.job-detail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.job-detail-meta-item i {
    color: #4b5563;
    font-size: 0.8rem;
}

/* Job Detail Actions (top right) */
.job-detail-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.job-detail-actions .btn {
    border-radius: var(--job-btn-radius);
    font-weight: 600;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Job Detail Section */
.job-detail-section {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.job-detail-section:last-child {
    border-bottom: none;
}

/* Compact Section Variant */
.job-detail-section-compact {
    padding: 1rem 2rem;
}

.job-detail-section-title-sm {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.job-detail-section-title-sm i {
    color: #4b5563;
    font-size: 0.9rem;
}

/* Compact Details Grid */
.job-details-grid-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.job-details-grid-compact .job-detail-item {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 6px;
}

.job-details-grid-compact .job-detail-item-icon {
    font-size: 0.85rem;
    color: #4b5563;
}

.job-details-grid-compact .job-detail-item-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.job-details-grid-compact .job-detail-item-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.job-details-grid-compact .job-detail-item-value {
    font-size: 0.8rem;
    color: #374151;
    font-weight: 500;
}

/* Compact Requirements */
.job-requirements-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.job-req-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
    padding: 0.375rem 0;
}

.job-req-item i {
    color: #4b5563;
    font-size: 0.8rem;
    width: 16px;
    margin-top: 2px;
}

.job-req-label {
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.job-req-value {
    color: #374151;
}

.job-req-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.job-badge-sm {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #4b5563;
}

/* Inclusion Banner */
.job-inclusion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 8px;
    margin: 0 -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.job-inclusion-banner .btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #065f46;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.job-inclusion-banner .btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

.job-inclusion-banner-inactive {
    background: #f3f4f6;
}

.job-inclusion-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #065f46;
    font-size: 0.875rem;
}

.job-inclusion-badge i {
    font-size: 1.1rem;
}

.job-inclusion-details {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    margin-top: 0.75rem;
    background: #f0fdf4;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
}

.job-inclusion-details img {
    flex-shrink: 0;
}

.job-inclusion-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 12px;
    color: #059669;
    font-size: 1.25rem;
}

/* Related Jobs Section */
.job-related-section {
    background: #ffffff;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1.25rem;
    margin-top: 1rem;
}

.job-related-title {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.job-related-title i {
    color: #4b5563;
}

.job-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 100%;
}

.job-related-grid > * {
    max-width: 350px;
}

@media (min-width: 1200px) {
    .job-related-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .job-related-grid > * {
        max-width: none;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .job-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) and (min-width: 576px) {
    .job-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .job-related-grid {
        grid-template-columns: 1fr;
    }

    .job-related-grid > * {
        max-width: none;
    }
}


.job-detail-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.job-detail-section-title i {
    color: #4b5563;
}

.job-detail-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #374151;
    word-wrap: break-word;
    text-align: justify;
}

/* Job Details Grid */
.job-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.job-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
}

.job-detail-item-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.job-detail-item-value {
    font-size: 0.9rem;
    color: #212529;
    font-weight: 500;
}

/* Requirements Section */
.job-requirements-group {
    margin-bottom: 1.25rem;
}

.job-requirements-group:last-child {
    margin-bottom: 0;
}

.job-requirements-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.job-requirements-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.job-requirement-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    border-radius: var(--job-badge-radius);
    font-size: 0.8rem;
    color: #374151;
}

.job-requirement-tag i {
    font-size: 0.7rem;
    color: var(--portal-color, #0d6efd);
}

/* Apply Section */
.job-apply-section {
    background: linear-gradient(135deg, rgba(var(--portal-color-rgb, 13, 110, 253), 0.03) 0%, rgba(var(--portal-color-rgb, 13, 110, 253), 0.08) 100%);
    padding: 2rem;
}

.job-apply-section .job-detail-section-title {
    margin-bottom: 1.5rem;
}

.job-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--job-btn-radius);
    transition: all 0.2s ease;
    min-width: auto;
}

.job-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--portal-color-rgb, 13, 110, 253), 0.3);
}

.job-apply-btn i {
    font-size: 0.9rem;
}

/* Applied Status Box */
.job-applied-box {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: var(--job-card-radius);
    padding: 1.25rem;
    text-align: center;
}

.job-applied-box i {
    font-size: 2rem;
    color: #059669;
    margin-bottom: 0.5rem;
}

.job-applied-box h4 {
    color: #065f46;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.job-applied-box p {
    color: #047857;
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* Message Box (login required, etc) */
.job-message-box {
    background: #f8f9fa;
    border-radius: var(--job-card-radius);
    padding: 2rem;
    text-align: center;
}

.job-message-box i {
    font-size: 2.5rem;
    color: var(--portal-color, #0d6efd);
    margin-bottom: 1rem;
}

.job-message-box h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}

.job-message-box p {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

/* Exclusive Offer Banner */
.job-exclusive-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: var(--job-card-radius);
    padding: 1rem 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.job-exclusive-banner i {
    color: #d97706;
    margin-right: 0.5rem;
}

.job-exclusive-banner strong {
    color: #92400e;
    font-size: 1.1rem;
}

/* Related Jobs Section */
.job-related-section {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1.5rem 2rem;
    margin-top: 1.5rem;
}

.job-related-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 1.5rem;
}

/* Company Header Modern */
.company-header-modern {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
}

.company-header-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.company-header-info {
    flex: 1;
    min-width: 0;
}

.company-header-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.25rem;
}

.company-header-name a {
    color: inherit;
    text-decoration: none;
}

.company-header-name a:hover {
    color: var(--portal-color, #0d6efd);
}

.company-header-meta {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.company-header-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.company-header-meta-item i {
    font-size: 0.75rem;
    color: #9ca3af;
}

.company-header-social {
    display: flex;
    gap: 0.5rem;
}

.company-header-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6c757d;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.company-header-social a:hover {
    background: var(--portal-color, #0d6efd);
    color: white;
}

/* Application Form in Detail */
.job-application-form .form-label {
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.job-application-form .form-control,
.job-application-form .form-select {
    border-radius: var(--job-input-radius);
    border: 1px solid #d1d5db;
    padding: 0.625rem 0.875rem;
}

.job-application-form .form-control:focus,
.job-application-form .form-select:focus {
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 3px rgba(var(--portal-color-rgb, 13, 110, 253), 0.1);
}

/* Responsive - Job Detail */
@media (max-width: 767.98px) {
    .job-detail-wrapper {
        padding-bottom: 1rem;
    }

    .job-detail-header,
    .job-detail-section {
        padding: 1.25rem 1rem;
    }

    .job-detail-title {
        font-size: 1.25rem;
    }

    .job-details-grid {
        grid-template-columns: 1fr 1fr;
    }

    .job-detail-item {
        padding: 0.5rem 0.75rem;
    }

    .company-header-modern {
        padding: 1.25rem 1rem;
        gap: 1rem;
    }

    .company-header-logo {
        width: 60px;
        height: 60px;
    }

    .company-header-name {
        font-size: 1.1rem;
    }

    .job-apply-section {
        padding: 1.5rem 1rem;
    }

    .job-apply-btn {
        width: 100%;
    }

    .job-related-section {
        padding: 1.25rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .job-details-grid {
        grid-template-columns: 1fr;
    }

    .job-detail-actions {
        flex-direction: column;
        width: 100%;
    }

    .job-detail-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Company Profile Page - LinkedIn/Indeed Style
   ========================================================================== */

/* Company Profile Wrapper */
.company-profile-wrapper {
    background: #f4f2ee;
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* Company Profile Header with Banner */
.company-profile-header {
    position: relative;
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.company-profile-banner {
    background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #6b7280 100%);
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.company-profile-logo {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-profile-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.company-profile-info {
    flex: 1;
    min-width: 200px;
    color: white;
}

.company-profile-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.company-profile-name a {
    color: white;
    text-decoration: none;
}

.company-profile-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.company-profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.company-profile-meta-item i {
    font-size: 0.85rem;
    opacity: 0.9;
}

.company-profile-stats {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0;
}

.company-profile-stat {
    text-align: center;
    color: white;
}

.company-profile-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.company-profile-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

/* Company Profile Stat Link */
.company-profile-stat--link {
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.company-profile-stat--link:hover {
    background: rgba(255, 255, 255, 0.15);
}

.company-profile-stat--link .company-profile-stat-value,
.company-profile-stat--link .company-profile-stat-label {
    color: white;
}

/* Company Profile Name Link */
.company-profile-name-link {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.company-profile-name-link:hover {
    opacity: 0.9;
}

.company-profile-name-link .company-profile-name {
    color: white;
}

/* Company Header in Job View (no tabs) */
.company-profile-header--job {
    margin-bottom: 1.5rem;
}

.company-profile-header--job .company-profile-banner {
    border-radius: var(--job-card-radius);
}

/* Company Profile Tabs */
.company-profile-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: white;
    overflow-x: auto;
}

.company-profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.company-profile-tab:hover {
    color: #4b5563;
    background: rgba(75, 85, 99, 0.04);
}

.company-profile-tab.active {
    color: #374151;
    border-bottom-color: #374151;
}

.company-profile-tab i {
    font-size: 0.85rem;
}

.company-profile-tab .badge {
    background: #6b7280;
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

/* Company Profile Content - Two Columns */
.company-profile-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 1.5rem;
    align-items: start;
}

/* Full Width Mode - when no sidebar content */
.company-profile-content--full {
    grid-template-columns: 1fr;
}

.company-profile-content--full .company-profile-sidebar {
    display: none;
}

.company-profile-main--full {
    max-width: 100%;
}

/* Main Content Area */
.company-profile-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Sidebar */
.company-profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}

/* Company Section Card */
.company-section-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    overflow: hidden;
}

/* Tab Panel - add padding when used as tab panel */
.company-tab-panel.company-section-card {
    padding: 1.5rem;
}

.company-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.company-section-header:hover {
    background: #f8f9fa;
}

.company-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.company-section-title i {
    color: #4b5563;
    font-size: 0.85rem;
}

.company-section-toggle {
    font-size: 0.75rem;
    color: #6c757d;
    transition: transform 0.3s ease;
}

.company-section-header[aria-expanded="true"] .company-section-toggle,
.company-section-header.expanded .company-section-toggle {
    transform: rotate(180deg);
}

.company-section-content {
    padding: 1.25rem;
    border-top: 1px solid #e5e7eb;
}

.company-section-content p {
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #374151;
}

/* Company About Card in Sidebar */
.company-about-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1.25rem;
    transition: box-shadow 0.2s ease;
}

.company-about-card[data-tab] {
    cursor: pointer;
}

.company-about-card[data-tab]:hover {
    box-shadow: var(--job-card-shadow-hover);
}

.company-about-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.company-about-title i {
    color: #4b5563;
}

.company-about-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 1rem;
}

/* Full HTML content in main section */
.company-description-html {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #374151;
}

.company-description-html p {
    margin-bottom: 1rem;
}

.company-description-html ul,
.company-description-html ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.company-description-html li {
    margin-bottom: 0.5rem;
}

.company-about-full,
.company-mission-full {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.company-about-full:last-child,
.company-mission-full:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.company-about-text p {
    margin-bottom: 0.5rem;
}

.company-about-text p:last-child {
    margin-bottom: 0;
}

/* Company Social Links */
.company-social-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.company-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6c757d;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.company-social-link:hover {
    background: #4b5563;
    color: white;
    transform: translateY(-2px);
}

/* Company Benefits Card */
.company-benefits-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1.25rem;
}

.company-benefits-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.company-benefits-title i {
    color: #4b5563;
}

.company-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.company-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #374151;
}

.company-benefits-list li i {
    color: #10b981;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Jobs List in Company Page */
.company-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.company-job-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.company-job-card:hover {
    box-shadow: var(--job-card-shadow-hover);
    transform: translateY(-2px);
}

.company-job-icon {
    width: 48px;
    height: 48px;
    background: rgba(75, 85, 99, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.company-job-info {
    flex: 1;
    min-width: 0;
}

.company-job-title {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
}

.company-job-title a {
    color: inherit;
    text-decoration: none;
}

.company-job-title a:hover {
    color: #4b5563;
}

.company-job-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #6c757d;
}

.company-job-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.company-job-meta-item i {
    font-size: 0.7rem;
}

.company-area-filter {
    margin-bottom: 1.25rem;
}

/* Chips neutros (AA en cualquier portal); el activo recibe su fondo en línea desde la plantilla. */
.company-area-filter .rq-pill {
    color: #1f2937;
    background-color: #fff;
    border-color: #d1d5db;
}

.company-area-filter .rq-pill--active {
    color: #fff;
}

/* Áreas en /myCompany y el CRM */
.company-area-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: #374151;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}

.company-area-badge--all {
    color: #0b4f9c;
    background-color: #e8f1fd;
    border-color: #c7dcf7;
}

.company-area-select {
    min-width: 9rem;
}

.company-users-section__body > .company-area-toolbar {
    margin: 0;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Botones de áreas (neutros en todo portal) con anillo de foco propio: 97 CSS de portal reglan
   .btn-outline-primary:focus y Bootstrap deja .btn:focus-visible sin outline. */
.btn.company-area-action:focus-visible {
    outline: 2px solid #0a66c2;
    outline-offset: 2px;
}

.form-text.company-area-help {
    font-size: 0.8125rem;
}

/* Editar y borrar en fila; se apilan solo si la celda no alcanza (a 390 px en /myCompany y el CRM). */
.company-area-panel__actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
}

/* A 390 px, en /myCompany: en la tabla de usuarios el área y «Guardar» quedan a la vista (el correo
   se parte y el select va sobre el botón). El nombre se corta solo entre palabras y el avatar no se encoge. */
@media (max-width: 575.98px) {
    .company-users-section .company-users-table th,
    .company-users-section .company-users-table td {
        padding: 0.5rem 0.375rem;
        letter-spacing: 0;
    }

    .company-users-section .company-user-email {
        overflow-wrap: anywhere;
    }

    .company-users-section .company-user-avatar {
        flex-shrink: 0;
    }

    .company-users-section .company-area-assign {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

/* Accesibilidad de la oferta: a 390 px la columna «Opciones» (Otorgar, Quitar, motivo de área) se
   alcanza desplazando la tabla en vez de quedar cortada. */
.job-accessibility .talents-table-container {
    overflow-x: auto;
}

.company-job-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.company-job-applications {
    font-size: 0.75rem;
    color: #6c757d;
}

.company-job-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--job-btn-radius);
    transition: all 0.2s ease;
}

.company-job-btn:hover {
    transform: translateY(-1px);
}

/* Company Leave CV Section */
.company-leave-cv-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1.5rem;
}

.company-leave-cv-title {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.company-leave-cv-title i {
    color: var(--portal-color, #0d6efd);
}

.company-leave-cv-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 1rem;
}

/* Empty State */
.company-empty-state {
    background: #f8f9fa;
    border-radius: var(--job-card-radius);
    padding: 2rem;
    text-align: center;
}

.company-empty-state i {
    font-size: 2.5rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.company-empty-state p {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

/* Company Evaluations */
.company-evaluations-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1.5rem;
}

.company-rating-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

.company-rating-big {
    text-align: center;
}

.company-rating-score-big {
    font-size: 3rem;
    font-weight: 700;
    color: #212529;
    line-height: 1;
}

.company-rating-stars-big {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.company-rating-stars-big i {
    font-size: 1.25rem;
    color: #fbbf24;
}

.company-rating-stars-big i.empty {
    color: #e5e7eb;
}

/* Responsive - Company Profile */
@media (max-width: 991.98px) {
    .company-profile-content {
        grid-template-columns: 1fr;
    }

    .company-profile-sidebar {
        position: static;
        order: -1;
    }

    .company-profile-stats {
        width: 100%;
        justify-content: center;
        margin-top: 1rem;
    }
}

@media (max-width: 767.98px) {
    .company-profile-banner {
        padding: 1.5rem;
        flex-direction: column;
        text-align: center;
    }

    .company-profile-logo {
        width: 80px;
        height: 80px;
    }

    .company-profile-info {
        width: 100%;
    }

    .company-profile-name {
        font-size: 1.5rem;
    }

    .company-profile-meta {
        justify-content: center;
    }

    .company-profile-tabs {
        padding: 0 1rem;
    }

    .company-profile-tab {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    .company-job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .company-job-actions {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* ==========================================================================
   ACCOUNT VIEWS - Postulaciones, Actividad, Invitaciones, Referencias
   ========================================================================== */

/* ==========================================================================
   UNIFIED CARD ITEM - Base component for all account card types
   Used by: Applications, Invitations, Activity, References
   ========================================================================== */

/* Card Item - Base container */
.card-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}

.card-item:hover {
    background: #f9fafb;
}

.card-item:last-child {
    border-bottom: none;
}

/* Card Item - Icon/Logo container */
.card-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.card-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-item-icon i {
    font-size: 1.25rem;
    color: #9ca3af;
}

/* Icon variants */
.card-item-icon.rounded {
    border-radius: 50%;
}

.card-item-icon.primary {
    background: linear-gradient(135deg, var(--portal-color, #0d6efd) 0%, #3b82f6 100%);
}

.card-item-icon.primary i {
    color: white;
}

.card-item-icon.purple {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}

.card-item-icon.purple i {
    color: #4f46e5;
}

.card-item-icon.event {
    background: #dbeafe;
}

.card-item-icon.event i {
    color: #2563eb;
}

.card-item-icon.application {
    background: #d1fae5;
}

.card-item-icon.application i {
    color: #059669;
}

.card-item-icon.interview {
    background: #ede9fe;
}

.card-item-icon.interview i {
    color: #7c3aed;
}

/* Card Item - Info container */
.card-item-info {
    flex: 1;
    min-width: 0;
}

/* Card Item - Title */
.card-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.card-item-title a {
    color: inherit;
    text-decoration: none;
}

.card-item-title a:hover {
    color: var(--portal-color, #0d6efd);
}

/* Card Item - Subtitle */
.card-item-subtitle {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.card-item-subtitle a {
    color: inherit;
    text-decoration: none;
}

.card-item-subtitle a:hover {
    color: var(--portal-color, #0d6efd);
}

/* Card Item - Meta row */
.card-item-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Meta Item - Unified utility class */
.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.meta-item.success {
    color: #059669;
}

.meta-item.danger {
    color: #dc2626;
}

/* Meta Row - Container for meta items */
.meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
    flex-wrap: wrap;
}

/* Card Item - Badges container */
.card-item-badges {
    flex-shrink: 0;
}

/* Card Item - Actions container */
.card-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Card Logo - Company logo variant */
.card-logo {
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-logo i {
    font-size: 1.25rem;
    color: #9ca3af;
}

/* ==========================================================================
   END UNIFIED CARD ITEM
   ========================================================================== */

/* Account Page Wrapper */
.account-page-wrapper {
    background: #f4f2ee;
    min-height: calc(100vh - 80px);
    padding-bottom: 3rem;
}

/* Account Header with Stats */
.account-header {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.account-header-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
}

.account-header-subtitle {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

/* Account Stats Row */
.account-stats-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.account-stat-card {
    flex: 1;
    min-width: 120px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.account-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.account-stat-card.active {
    background: linear-gradient(135deg, var(--portal-color, #0d6efd) 0%, #3b82f6 100%);
}

.account-stat-card.active .account-stat-value,
.account-stat-card.active .account-stat-label {
    color: white;
}

.account-stat-card.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.account-stat-card.success .account-stat-value,
.account-stat-card.success .account-stat-label {
    color: white;
}

.account-stat-card.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.account-stat-card.warning .account-stat-value,
.account-stat-card.warning .account-stat-label {
    color: white;
}

.account-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.1;
}

.account-stat-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

/* Account Navigation Tabs */
.account-nav-tabs {
    display: flex;
    gap: 0.5rem;
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.account-nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.account-nav-tab:hover {
    color: var(--portal-color, #0d6efd);
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.05);
}

.account-nav-tab.active {
    color: white;
    background: var(--portal-color, #0d6efd);
}

.account-nav-tab .badge {
    background: rgba(0, 0, 0, 0.15);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
}

.account-nav-tab.active .badge {
    background: rgba(255, 255, 255, 0.25);
}

/* Account Section Card */
.account-section-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.account-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.account-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-section-title i {
    color: var(--portal-color, #0d6efd);
}

.account-section-body {
    padding: 1.25rem 1.5rem;
}

/* When section body contains a list that handles its own padding */
.account-section-body.no-padding {
    padding: 0;
}

/* List items inside section body - they handle their own horizontal padding */
.account-section-body > .application-list,
.account-section-body > .invitation-list,
.account-section-body > .activity-list {
    margin: -1.25rem -1.5rem;
}

/* Application Cards (for Postulaciones) */
.application-list {
    padding: 0;
}

.application-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}

.application-card:hover {
    background: #f9fafb;
}

.application-card:last-child {
    border-bottom: none;
}

.application-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.application-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.application-logo i {
    font-size: 1.25rem;
    color: #9ca3af;
}

.application-info {
    flex: 1;
    min-width: 0;
}

.application-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.application-title a {
    color: inherit;
    text-decoration: none;
}

.application-title a:hover {
    color: var(--portal-color, #0d6efd);
}

.application-company {
    font-size: 0.85rem;
    color: #6c757d;
}

.application-company a {
    color: inherit;
    text-decoration: none;
}

.application-company a:hover {
    color: var(--portal-color, #0d6efd);
}

.application-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 0.5rem;
}

.application-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.application-status {
    flex-shrink: 0;
}

.application-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.application-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f3f4f6;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.application-action-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.application-action-btn.danger:hover {
    background: #fee2e2;
    color: #dc2626;
}

.application-action-btn.success:hover {
    background: #d1fae5;
    color: #059669;
}

.application-action-btn.primary:hover {
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.1);
    color: var(--portal-color, #0d6efd);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.active {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.viewed {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.not-viewed {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.completed {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.rejected {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.interview {
    background: #ede9fe;
    color: #6d28d9;
}

/* Invitation Cards */
.invitation-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}

.invitation-card:hover {
    background: #f9fafb;
}

.invitation-card:last-child {
    border-bottom: none;
}

.invitation-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--portal-color, #0d6efd) 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.invitation-icon i {
    color: white;
    font-size: 1.25rem;
}

.invitation-info {
    flex: 1;
    min-width: 0;
}

.invitation-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
}

.invitation-title a {
    color: inherit;
    text-decoration: none;
}

.invitation-title a:hover {
    color: var(--portal-color, #0d6efd);
}

.invitation-company {
    font-size: 0.85rem;
    color: #6c757d;
}

.invitation-date {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

.invitation-actions {
    flex-shrink: 0;
}

/* Reference Cards */
.reference-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}

.reference-card:hover {
    background: #f9fafb;
}

.reference-card:last-child {
    border-bottom: none;
}

.reference-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #4f46e5;
}

.reference-info {
    flex: 1;
    min-width: 0;
}

.reference-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
}

.reference-position {
    font-size: 0.85rem;
    color: #6c757d;
}

.reference-contact {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 0.5rem;
}

.reference-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.reference-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Activity Cards */
.activity-card {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.activity-card:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon i {
    font-size: 1rem;
    color: var(--portal-color, #0d6efd);
}

.activity-icon.event {
    background: #dbeafe;
}

.activity-icon.event i {
    color: #2563eb;
}

.activity-icon.application {
    background: #d1fae5;
}

.activity-icon.application i {
    color: #059669;
}

.activity-icon.interview {
    background: #ede9fe;
}

.activity-icon.interview i {
    color: #7c3aed;
}

.activity-info {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
}

.activity-title a {
    color: inherit;
    text-decoration: none;
}

.activity-title a:hover {
    color: var(--portal-color, #0d6efd);
}

.activity-description {
    font-size: 0.85rem;
    color: #6c757d;
}

.activity-date {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

.activity-badges {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center;
}

/* Empty State */
.account-empty-state {
    padding: 3rem 2rem;
    text-align: center;
}

.account-empty-state > i {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.account-empty-state p {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.account-empty-state .btn {
    padding: 0.375rem 1rem;
    font-size: 0.85rem;
}

/* Account Filters */
.account-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.account-filter-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #374151;
    background: white;
    min-width: 120px;
}

.account-filter-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.account-filter-btn.primary {
    background: var(--portal-color, #0d6efd);
    color: white;
}

.account-filter-btn.primary:hover {
    opacity: 0.9;
}

/* Account Two Column Layout */
.account-content-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 1.5rem;
    align-items: start;
}

.account-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.account-sidebar {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile Responsive */
@media (max-width: 991.98px) {
    .account-content-grid {
        grid-template-columns: 1fr;
    }

    .account-sidebar {
        position: static;
    }

    .account-stats-row {
        flex-wrap: wrap;
    }

    .account-stat-card {
        min-width: calc(50% - 0.5rem);
    }
}

@media (max-width: 767.98px) {
    .account-header {
        padding: 1.5rem;
    }

    .account-header-title {
        font-size: 1.5rem;
    }

    .account-nav-tabs {
        padding: 0.375rem;
    }

    .account-nav-tab {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }

    .account-stat-card {
        min-width: 100%;
    }

    .application-card,
    .invitation-card,
    .reference-card,
    .activity-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .application-actions,
    .reference-actions,
    .activity-badges {
        width: 100%;
        justify-content: flex-end;
    }

    .application-status,
    .invitation-actions {
        align-self: flex-start;
    }
}

/* ==========================================================================
   Activity Page - Additional Styles
   ========================================================================== */

/* Activity Filter Form */
.activity-filter-form {
    margin: 0;
    padding: 1rem 1.5rem;
}

.activity-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.activity-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 150px;
}

.activity-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
}

/* Activity Card */
.activity-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.activity-card:last-child {
    border-bottom: none;
}

.activity-card:hover {
    background-color: #f9fafb;
}

/* Activity Icon with Color Variants */
.activity-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon i {
    font-size: 1.25rem;
    color: #4f46e5;
}

.activity-icon.applications {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.activity-icon.applications i {
    color: #2563eb;
}

.activity-icon.events {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.activity-icon.events i {
    color: #16a34a;
}

.activity-icon.speaker {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.activity-icon.speaker i {
    color: #d97706;
}

.activity-icon.advisors {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
}

.activity-icon.advisors i {
    color: #7c3aed;
}

/* Activity Info */
.activity-info {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.activity-title a {
    color: inherit;
    text-decoration: none;
}

.activity-title a:hover {
    color: var(--portal-color, #0d6efd);
}

.activity-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.activity-subtitle a {
    color: #6b7280;
    text-decoration: none;
}

.activity-subtitle a:hover {
    color: var(--portal-color, #0d6efd);
}

.activity-separator {
    margin: 0 0.5rem;
    color: #d1d5db;
}

.activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
}

.activity-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.activity-meta-item i {
    font-size: 0.75rem;
}

/* Activity Badges */
.activity-badges {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Activity Pagination */
.activity-pagination {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f0f0f0;
}

/* Status Badge Variants */
.status-badge.speaker {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.inactive {
    background: #f3f4f6;
    color: #6b7280;
}

/* ==========================================================================
   References Page - Additional Styles
   ========================================================================== */

/* Reference List */
.reference-list {
    display: flex;
    flex-direction: column;
}

/* Reference Card */
.reference-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.reference-card:last-child {
    border-bottom: none;
}

.reference-card:hover {
    background-color: #f9fafb;
}

/* Reference Avatar */
.reference-avatar {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reference-avatar i {
    font-size: 1.5rem;
    color: #4f46e5;
}

/* Reference Info */
.reference-info {
    flex: 1;
    min-width: 0;
}

.reference-name {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.reference-position {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.375rem;
}

.reference-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
}

.reference-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.reference-contact-item i {
    font-size: 0.75rem;
    color: var(--portal-color, #0d6efd);
}

/* Reference Actions */
.reference-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.reference-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.reference-action-btn.edit {
    background: #eff6ff;
    color: #2563eb;
}

.reference-action-btn.edit:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.reference-action-btn.delete {
    background: #fef2f2;
    color: #dc2626;
}

.reference-action-btn.delete:hover {
    background: #fee2e2;
    color: #b91c1c;
}

/* Reference Footer Actions */
.reference-footer-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid #f0f0f0;
}

.reference-footer-actions .btn {
    padding: 0.375rem 1rem;
    font-size: 0.85rem;
}

/* Reference Tips */
.reference-tips {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reference-tip {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

.reference-tip-icon {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.reference-tip-icon i {
    font-size: 1rem;
    color: var(--portal-color, #0d6efd);
}

.reference-tip-content {
    flex: 1;
}

.reference-tip-content strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.reference-tip-content p {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   Invitation Page - Additional Styles
   ========================================================================== */

/* Invitation List */
.invitation-list {
    display: flex;
    flex-direction: column;
}

/* Invitation Card */
.invitation-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.invitation-card:last-child {
    border-bottom: none;
}

.invitation-card:hover {
    background-color: #f9fafb;
}

/* Invitation Icon */
.invitation-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.invitation-icon i {
    font-size: 1.25rem;
    color: #2563eb;
}

/* Invitation Info */
.invitation-info {
    flex: 1;
    min-width: 0;
}

.invitation-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.invitation-title a {
    color: inherit;
    text-decoration: none;
}

.invitation-title a:hover {
    color: var(--portal-color, #0d6efd);
}

.invitation-company {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.invitation-company a {
    color: #6b7280;
    text-decoration: none;
}

.invitation-company a:hover {
    color: var(--portal-color, #0d6efd);
}

.invitation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
}

.invitation-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.invitation-meta-item i {
    font-size: 0.75rem;
}

/* Invitation Actions */
.invitation-actions {
    flex-shrink: 0;
}

/* Mobile Responsive for Activity */
@media (max-width: 767.98px) {
    .activity-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .activity-filter-group {
        min-width: 100%;
    }

    .activity-filter-row .btn {
        width: 100%;
    }

    .activity-icon,
    .invitation-icon {
        width: 40px;
        height: 40px;
    }

    .activity-icon i,
    .invitation-icon i {
        font-size: 1rem;
    }

    .reference-avatar {
        width: 48px;
        height: 48px;
    }

    .reference-avatar i {
        font-size: 1.25rem;
    }

    .reference-tip {
        flex-direction: column;
    }

    .reference-footer-actions {
        flex-direction: column;
    }

    .reference-footer-actions .btn {
        width: 100%;
    }

    .reference-contact {
        flex-direction: column;
        gap: 0.375rem;
    }
}

/* ==========================================================================
   ACCOUNT PAGES RESPONSIVE
   ========================================================================== */

/* Tablet and below */
@media (max-width: 991.98px) {
    .account-page-wrapper {
        padding-bottom: 2rem;
    }

    .account-header {
        padding: 1.25rem;
    }

    .account-stats-row {
        gap: 0.5rem;
    }

    .account-stat-card {
        padding: 0.75rem 1rem;
        min-width: 80px;
    }

    .account-stat-value {
        font-size: 1.25rem;
    }

    .account-section-header {
        padding: 1rem 1.25rem;
    }

    .account-section-body {
        padding: 1rem 1.25rem;
    }

    .account-section-body > .application-list,
    .account-section-body > .invitation-list,
    .account-section-body > .activity-list {
        margin: -1rem -1.25rem;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .account-page-wrapper .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .account-header {
        padding: 1rem;
        border-radius: 8px;
    }

    .account-header-title {
        font-size: 1.25rem;
    }

    .account-header-subtitle {
        font-size: 0.85rem;
    }

    .account-stats-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .account-stat-card {
        flex: 1 1 45%;
        min-width: 100px;
    }

    .account-nav-tabs {
        gap: 0;
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .account-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .account-nav-tab {
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .account-nav-tab i {
        margin-right: 0.35rem;
    }

    .account-section-card {
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .account-section-header {
        padding: 0.875rem 1rem;
    }

    .account-section-title {
        font-size: 0.95rem;
    }

    .account-section-body {
        padding: 1rem;
    }

    .account-section-body > .application-list,
    .account-section-body > .invitation-list,
    .account-section-body > .activity-list {
        margin: -1rem;
    }

    /* Card items on mobile */
    .card-item {
        padding: 0.875rem 1rem;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .card-item-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .card-item-icon i {
        font-size: 1rem;
    }

    .card-item-info {
        flex: 1 1 calc(100% - 56px);
        min-width: 0;
    }

    .card-item-title {
        font-size: 0.9rem;
    }

    .card-item-subtitle {
        font-size: 0.8rem;
    }

    .card-item-meta {
        gap: 0.5rem;
    }

    .card-item-badges {
        order: 3;
        flex-basis: 100%;
    }

    .card-item-actions {
        order: 4;
        flex-basis: 100%;
        display: flex;
        gap: 0.5rem;
    }

    .card-item-actions .btn {
        flex: 1;
    }

    /* Test cards on mobile */
    .test-cards-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .test-card {
        padding: 1rem;
    }

    .test-card-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1rem;
    }

    .test-card-title {
        font-size: 0.9rem;
    }

    .test-card-description {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    /* Privacy switch rows on mobile */
    .privacy-switch-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem 0;
    }

    .privacy-switch-row.master-switch {
        padding: 0.875rem;
    }

    .switch-widget {
        margin-left: 0;
        align-self: flex-start;
    }

    /* Authorization cards on mobile */
    .authorization-card {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    .authorization-info {
        width: 100%;
    }

    .authorization-toggle {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Form adjustments on mobile */
    .account-section-body .btn {
        padding: 0.5rem 1rem;
    }

    .account-section-body .d-flex.justify-content-end {
        justify-content: stretch !important;
    }

    .account-section-body .d-flex.justify-content-end .btn {
        width: 100%;
    }

    .account-section-body .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }

    .account-section-body .d-flex.justify-content-center .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Small mobile */
@media (max-width: 375px) {
    .account-stat-card {
        flex: 1 1 100%;
    }

    .account-nav-tab {
        padding: 0.625rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   EVENTS SYSTEM - Modern Design
   Extends: .content-card, .content-page-*, .content-filters
   ========================================================================== */

/* ----- Event Card Component (extends .content-card) ----- */
.event-card {
    /* Extends .content-card - add class="content-card event-card" in HTML */
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Event-specific: Category badge (extends .content-card-badge) */
.event-card-category {
    /* Extends .content-card-badge */
    background: var(--primary-color, #0a66c2);
}

/* Event-specific: State badge */
.event-card-state {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: #0a66c2;
    color: #fff;
    padding: 0.3rem 0.75rem;
    border-radius: var(--job-badge-radius);
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
}

/* Event-specific: Overlay icon size */
.event-card-overlay i {
    font-size: 2.5rem;
}

/* Event-specific: Title margin */
.event-card-title {
    margin-bottom: 0.75rem;
}

/* ----- Events Page Styles (extends .content-page-*) ----- */
.events-page-wrapper {
    /* Extends .content-page-wrapper */
    padding-bottom: 3rem;
}

.events-banner {
    margin-bottom: 1.5rem;
}

.events-banner-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Events page header extends .content-page-header */
.events-page-header {
    /* Extends .content-page-header - add both classes in HTML */
}

.events-page-title {
    /* Extends .content-page-title */
}

.events-page-description {
    /* Extends .content-page-description */
}

/* ----- Events Filters (extends .content-filters) ----- */
.events-filters {
    /* Extends .content-filters */
    background: #f8f9fa;
}

.events-filters-form {
    width: 100%;
}

.events-filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.events-filter-group {
    flex: 1;
    min-width: 150px;
}

.events-filter-select,
.events-filter-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.events-filter-select:focus,
.events-filter-input:focus {
    outline: none;
    border-color: #0a66c2;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1);
}

.events-filter-actions {
    flex: 0 0 auto;
}

.events-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.875rem;
}

/* ----- Events Content Layout ----- */
.events-content {
    display: flex;
    gap: 2rem;
}

/* Category Sidebar */
.events-sidebar {
    flex: 0 0 240px;
}

.events-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.events-category-item {
    margin-bottom: 2px;
}

.events-category-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #191919;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.events-category-link:hover {
    background: #f3f6f8;
    color: #0a66c2;
}

.events-category-item.active .events-category-link {
    background: #e8f0fe;
    color: #0a66c2;
    font-weight: 600;
}

.events-category-link i {
    width: 18px;
    text-align: center;
}

/* Events Main Area */
.events-main {
    flex: 1;
    min-width: 0;
}

.events-main-full {
    width: 100%;
}

.events-section {
    margin-bottom: 2rem;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.events-grid-item {
    display: flex;
}

.events-grid-item .event-card {
    width: 100%;
}

/* Empty State */
.events-empty {
    text-align: center;
    padding: 4rem 2rem;
}

.events-empty-icon {
    font-size: 4rem;
    color: #ccc;
    margin-bottom: 1.5rem;
}

.events-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #191919;
    margin: 0 0 0.75rem;
}

.events-empty-text {
    color: #666;
    font-size: 0.95rem;
    max-width: 400px;
    margin: 0 auto;
}

/* Past Events Section */
.events-past-section {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e8e8e8;
}

.events-past-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.events-past-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #191919;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.events-past-toggle-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #666;
    transition: transform 0.3s ease;
}

.events-past-content {
    transition: all 0.3s ease;
}

.events-past-collapsed {
    display: none;
}

/* Pagination */
.events-pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

/* ----- Event Detail Page ----- */
.event-detail-wrapper {
    padding: 1.5rem 0 3rem;
}

.event-detail-layout {
    display: flex;
    gap: 2rem;
}

.event-detail-main {
    flex: 1;
    min-width: 0;
}

.event-detail-sidebar {
    flex: 0 0 320px;
}

.event-detail-header {
    margin-bottom: 1rem;
}

.event-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0a66c2;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.event-detail-back:hover {
    color: #004182;
}

/* Event Detail Card */
.event-detail-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
}

.event-detail-card-header {
    margin-bottom: 1.5rem;
}

.event-detail-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #191919;
    margin: 0 0 0.75rem;
    line-height: 1.3;
}

.event-detail-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin: 0 0 0.75rem;
}

.event-detail-speakers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.event-detail-speakers i {
    color: #0a66c2;
}

.event-detail-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.375rem 0.75rem;
    background: #0a66c2;
    color: #fff;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Event Meta */
.event-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.event-detail-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.event-detail-meta-icon {
    width: 40px;
    height: 40px;
    background: #e8f0fe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a66c2;
    flex-shrink: 0;
}

.event-detail-meta-label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 2px;
}

.event-detail-meta-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: #191919;
}

/* Modality Badges */
.event-modality-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.event-modality-badge.presencial {
    background: #e3f5e8;
    color: #166534;
}

.event-modality-badge.remoto {
    background: #e8f0fe;
    color: #0a66c2;
}

.event-modality-badge.hibrido {
    background: #fef3c7;
    color: #92400e;
}

.event-modality-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.event-modality-badge-sm.presencial {
    background: #e3f5e8;
    color: #166534;
}

.event-modality-badge-sm.remoto {
    background: #e8f0fe;
    color: #0a66c2;
}

.event-modality-badge-sm.hibrido {
    background: #fef3c7;
    color: #92400e;
}

/* Social Share */
.event-detail-social {
    margin-bottom: 1.5rem;
}

/* Video Container */
.event-detail-video {
    margin-bottom: 1.5rem;
}

.event-detail-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.event-detail-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.event-detail-stream-link {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 0.9rem;
}

.event-detail-stream-link a {
    color: #0a66c2;
    word-break: break-all;
}

/* Event Image */
.event-detail-image {
    margin-bottom: 1.5rem;
    border-radius: 10px;
    overflow: hidden;
}

.event-detail-image-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Description */
.event-detail-description {
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: #333;
}

.event-detail-description-with-image {
    display: flex;
    gap: 1.5rem;
}

.event-detail-description-image {
    flex: 0 0 35%;
}

.event-detail-description-image img {
    width: 100%;
    border-radius: 10px;
}

.event-detail-description-text {
    flex: 1;
}

/* Registration Section */
.event-detail-registration {
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

/* Countdown Timer */
.event-countdown-wrapper {
    margin-bottom: 1.5rem;
}

.event-countdown {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.event-countdown-label {
    font-size: 0.95rem;
    color: #92400e;
    margin: 0 0 1rem;
    font-weight: 500;
}

.event-countdown-timer {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.event-countdown-unit {
    background: #fff;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    min-width: 70px;
}

.event-countdown-unit span:first-child {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #191919;
}

.event-countdown-unit-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-countdown-redirect {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Event Buttons - Layout only, colors from Bootstrap btn-primary/btn-outline-primary */
.event-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.event-btn:hover {
    text-decoration: none;
}

/* Subscription Form */
.event-subscription-form {
    margin-bottom: 1rem;
}

.event-subscription-form-inner {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.25rem;
}

.event-subscription-form-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #e8f0fe;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #0a66c2;
}

.event-subscription-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.event-subscription-form-actions {
    display: flex;
    justify-content: flex-end;
}

/* Registration Closed */
.event-registration-closed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #fef3c7;
    border-radius: 10px;
    color: #92400e;
    font-weight: 500;
}

/* Enter Event Button */
.event-enter-wrapper {
    margin-top: 1.5rem;
    text-align: center;
}

/* Login Required */
.event-login-required {
    text-align: center;
}

/* Direct Links */
.event-direct-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-direct-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 0.9rem;
}

.event-direct-link i {
    color: #0a66c2;
}

.event-direct-link a {
    color: #0a66c2;
    word-break: break-all;
}

/* Resources Section */
.event-detail-resources {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

.event-detail-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #191919;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.event-detail-section-description {
    color: #666;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.event-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.event-resource-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.event-resource-card:hover {
    background: #e8f0fe;
    transform: translateY(-2px);
}

.event-resource-icon {
    font-size: 2rem;
    color: #0a66c2;
    margin-bottom: 0.5rem;
}

.event-resource-name {
    font-size: 0.8rem;
    color: #333;
    text-align: center;
    word-break: break-word;
}

/* Chat Sidebar */
.event-chat-sidebar {
    display: flex;
    flex-direction: column;
}

.event-chat-container {
    flex: 1;
    min-height: 500px;
}

.event-chat-iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    border-radius: 12px;
}

/* Related Events Sidebar */
.event-related-header {
    margin-bottom: 1rem;
}

.event-related-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #191919;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.event-related-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-related-item .event-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.event-related-item .event-card-content {
    padding: 0.75rem;
}

.event-related-item .event-card-title {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.event-related-item .event-card-meta {
    gap: 0.25rem;
}

.event-related-item .event-card-meta-item {
    font-size: 0.8rem;
}

/* ----- Events Schedule/Timeline ----- */
.events-schedule {
    padding: 1.5rem 0;
}

.events-schedule-timeline {
    position: relative;
}

.events-schedule-item {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

/* Day Header */
.events-schedule-day {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #0a66c2;
}

.events-schedule-day-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
}

.events-schedule-day-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #191919;
}

/* Schedule Event */
.events-schedule-event {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
}

.events-schedule-time {
    flex: 0 0 80px;
    text-align: right;
}

.events-schedule-time time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.events-schedule-time-start {
    font-size: 1rem;
    font-weight: 600;
    color: #191919;
}

.events-schedule-time-separator {
    color: #999;
    font-size: 0.8rem;
}

.events-schedule-time-end {
    font-size: 0.85rem;
    color: #666;
}

.events-schedule-content {
    flex: 1;
    min-width: 0;
}

.events-schedule-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: all 0.2s ease;
}

.events-schedule-link:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateX(4px);
}

.events-schedule-image {
    flex: 0 0 60px;
}

.events-schedule-image img {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
}

.events-schedule-info {
    flex: 1;
    min-width: 0;
}

.events-schedule-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #191919;
    margin: 0 0 0.375rem;
    line-height: 1.3;
}

.events-schedule-speaker {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: #666;
}

.events-schedule-speaker i {
    color: #0a66c2;
}

.events-schedule-modality {
    margin-top: 0.5rem;
}

.events-schedule-arrow {
    color: #ccc;
    transition: color 0.2s ease;
}

.events-schedule-link:hover .events-schedule-arrow {
    color: #0a66c2;
}

/* ----- Event Survey Page ----- */
.event-survey-wrapper {
    padding: 2rem 0 4rem;
    background: #f8f9fa;
    min-height: calc(100vh - 200px);
}

.event-survey-layout {
    max-width: 700px;
    margin: 0 auto;
}

.event-survey-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.event-survey-header {
    color: #fff;
    padding: 2rem;
    text-align: center;
}

.event-survey-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.event-survey-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.event-survey-subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

.event-survey-event-info {
    padding: 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.event-survey-event-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #191919;
    margin: 0 0 0.5rem;
}

.event-survey-event-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 0.75rem;
}

.event-survey-event-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.event-survey-event-meta i {
    color: #0a66c2;
    width: 16px;
}

.event-survey-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #e8f0fe;
    color: #0a66c2;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Survey Form */
.event-survey-form {
    padding: 1.5rem;
}

.event-survey-question {
    border: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.event-survey-question-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #191919;
    margin-bottom: 0.75rem;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.event-survey-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #0a66c2;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.event-survey-select-wrapper {
    position: relative;
}

.event-survey-select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    appearance: none;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.event-survey-select:focus {
    outline: none;
    border-color: #0a66c2;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1);
}

.event-survey-select-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
}

/* Rating */
.event-survey-question-rating {
    display: none;
}

.event-survey-rating {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.event-survey-rating-stars {
    display: flex;
    gap: 0.25rem;
}

.event-survey-rating-stars i {
    font-size: 1.75rem;
    color: #0a66c2;
    cursor: pointer;
}

.event-survey-rating-hint {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

/* Textarea */
.event-survey-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.event-survey-textarea:focus {
    outline: none;
    border-color: #0a66c2;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1);
}

.event-survey-help-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #888;
}

/* Survey Actions */
.event-survey-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

.event-survey-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
}

/* ----- Events Grid Section (showEvents component) ----- */
.events-grid-section {
    padding: 1rem 0;
}

.events-grid-section .events-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -0.75rem;
    gap: 0;
}

.events-grid-section .events-grid-item {
    padding: 0.75rem;
}

/* ----- Responsive Styles ----- */
@media (max-width: 991.98px) {
    .events-content {
        flex-direction: column;
    }

    .events-sidebar {
        flex: none;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .events-categories-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .events-category-item {
        margin-bottom: 0;
    }

    .events-category-link {
        padding: 0.5rem 1rem;
        white-space: nowrap;
    }

    .event-detail-layout {
        flex-direction: column;
    }

    .event-detail-sidebar {
        flex: none;
        width: 100%;
        margin-top: 1.5rem;
    }

    .event-chat-sidebar {
        order: -1;
        margin-top: 0;
        margin-bottom: 1.5rem;
    }

    .event-chat-container {
        min-height: 400px;
    }

    .event-chat-iframe {
        min-height: 400px;
    }
}

@media (max-width: 767.98px) {
    .events-page-header {
        padding: 1.5rem 0 1rem;
    }

    .events-page-title {
        font-size: 1.5rem;
    }

    .events-filters-grid {
        flex-direction: column;
    }

    .events-filter-group {
        width: 100%;
        min-width: 100%;
    }

    .events-grid {
        grid-template-columns: 1fr;
    }

    .event-detail-card {
        padding: 1rem;
    }

    .event-detail-title {
        font-size: 1.35rem;
    }

    .event-detail-meta {
        flex-direction: column;
        gap: 1rem;
    }

    .event-countdown-timer {
        gap: 0.5rem;
    }

    .event-countdown-unit {
        padding: 0.5rem;
        min-width: 60px;
    }

    .event-countdown-unit span:first-child {
        font-size: 1.25rem;
    }

    .event-detail-description-with-image {
        flex-direction: column;
    }

    .event-detail-description-image {
        flex: none;
        width: 100%;
    }

    .events-schedule-event {
        flex-direction: column;
        gap: 0.5rem;
    }

    .events-schedule-time {
        flex: none;
        text-align: left;
    }

    .events-schedule-time time {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .events-schedule-link {
        flex-direction: column;
        align-items: flex-start;
    }

    .events-schedule-image {
        width: 100%;
    }

    .events-schedule-image img {
        width: 100%;
        height: auto;
        max-height: 120px;
    }

    .events-schedule-arrow {
        display: none;
    }

    .event-survey-header {
        padding: 1.5rem;
    }

    .event-survey-title {
        font-size: 1.25rem;
    }

    .event-survey-form {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .event-card-thumbnail {
        height: 150px;
    }

    .event-btn {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .event-btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }

    .event-resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   NEWS SECTION - Modern LinkedIn/Indeed Style Design
   Extends: .content-card, .content-page-*, .content-filters
   ========================================================================== */

/* ==========================================================================
   News Page Wrapper (extends .content-page-wrapper)
   ========================================================================== */
.news-page-wrapper {
    /* Extends .content-page-wrapper */
}

/* ==========================================================================
   News Page Header (extends .content-page-header)
   ========================================================================== */
.news-page-header {
    /* Extends .content-page-header */
    text-align: center;
    border-bottom: none;
}

.news-page-title {
    /* Extends .content-page-title */
    font-size: 2rem;
    font-weight: 700;
}

/* ==========================================================================
   News Carousel Section
   ========================================================================== */
.news-carousel-section {
    margin-bottom: 2rem;
}

.news-carousel {
    border-radius: var(--job-card-radius);
    overflow: hidden;
    box-shadow: var(--job-card-shadow);
}

.news-carousel-link {
    display: block;
    text-decoration: none;
}

.news-carousel-slide {
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.news-carousel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
    display: flex;
    align-items: flex-end;
}

.news-carousel-content {
    padding: 2rem;
    color: white;
    max-width: 700px;
}

.news-carousel-category {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--job-badge-radius);
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
}

.news-carousel-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    line-height: 1.3;
    color: white;
}

.news-carousel-subtitle {
    font-size: 1rem;
    margin: 0;
    opacity: 0.9;
    color: white;
}

.news-carousel .carousel-indicators {
    margin-bottom: 1.5rem;
}

.news-carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    margin: 0 0.25rem;
}

.news-carousel .carousel-indicators button.active {
    background: white;
}

.news-carousel .carousel-control-prev,
.news-carousel .carousel-control-next {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-carousel:hover .carousel-control-prev,
.news-carousel:hover .carousel-control-next {
    opacity: 1;
}

.news-carousel .carousel-control-prev {
    left: 1rem;
}

.news-carousel .carousel-control-next {
    right: 1rem;
}

.news-carousel .carousel-control-prev-icon,
.news-carousel .carousel-control-next-icon {
    filter: invert(1) grayscale(100);
}

/* ==========================================================================
   News Filters
   ========================================================================== */
.news-filters {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.news-filters-form {
    margin: 0;
}

.news-filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.news-filter-group {
    flex: 1;
    min-width: 200px;
}

.news-filter-actions {
    flex: 0 0 auto;
    min-width: auto;
}

.news-filter-select {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: var(--job-input-radius);
    font-size: 0.9rem;
    color: #333;
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.news-filter-select:focus {
    outline: none;
    border-color: #0a66c2;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1);
}

.news-filter-search {
    flex: 2;
}

.news-search-input-wrapper {
    position: relative;
}

.news-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.news-filter-input {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.75rem;
    border: 1px solid #e0e0e0;
    border-radius: var(--job-input-radius);
    font-size: 0.9rem;
    color: #333;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.news-filter-input:focus {
    outline: none;
    border-color: #0a66c2;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1);
}

.news-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--job-btn-radius);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ==========================================================================
   News Main Content Area
   ========================================================================== */
.news-main {
    margin-bottom: 2rem;
}

/* ==========================================================================
   News Grid Layout (extends .content-grid)
   ========================================================================== */
.news-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.news-grid-item {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   News Card - Main Component (extends .content-card)
   ========================================================================== */
.news-card {
    /* Extends .content-card - add class="content-card news-card" in HTML */
}

/* News-specific: Date display */
.news-card-date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.5rem;
}

/* News-specific: Subtitle */
.news-card-subtitle {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Linked News Card - External Sources (extends .content-card)
   ========================================================================== */
.news-linked-card {
    /* Extends .content-card - add class="content-card news-linked-card" in HTML */
}

/* Linked card specific: Smaller thumbnail */
.news-linked-card .content-card-thumbnail {
    height: 160px;
}

/* Linked card specific: Smaller icon */
.news-linked-card .content-card-overlay i {
    font-size: 1.75rem;
}

/* Linked card specific: Title size */
.news-linked-card .content-card-title {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

/* Linked card specific: Meta layout */
.news-linked-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.75rem;
}

.news-linked-card-date,
.news-linked-card-medium {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ==========================================================================
   News Card Variant - Quote Style
   ========================================================================== */
.news-card-variant {
    border-radius: var(--job-card-radius);
    overflow: hidden;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card-variant:hover {
    transform: translateY(-2px);
    box-shadow: var(--job-card-shadow-hover);
}

.news-card-variant.background-primary {
    background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
    color: white;
}

.news-card-variant.background-secondary {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
    color: white;
}

.news-card-variant.background-grey-light {
    background: #f8f9fa;
    color: #191919;
}

.news-card-variant.background-terciary {
    background: linear-gradient(135deg, #059669 0%, #065f46 100%);
    color: white;
}

.news-card-variant-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.news-card-variant-quote-start,
.news-card-variant-quote-end {
    font-size: 1.25rem;
    opacity: 0.7;
}

.news-card-variant.background-grey-light .news-card-variant-quote-start i,
.news-card-variant.background-grey-light .news-card-variant-quote-end i {
    opacity: 0.8;
}

.news-card-variant:not(.background-grey-light) .news-card-variant-quote-start i,
.news-card-variant:not(.background-grey-light) .news-card-variant-quote-end i {
    color: rgba(255,255,255,0.7) !important;
}

.news-card-variant-quote-end {
    text-align: right;
}

.news-card-variant-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0.5rem 0;
    flex: 1;
}

.news-card-variant-title-link {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-variant-title-link:hover {
    text-decoration: underline;
}

.news-card-variant-date {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 1rem;
}

.news-card-variant.background-grey-light .news-card-variant-date i {
    opacity: 1;
}

.news-card-variant:not(.background-grey-light) .news-card-variant-date i {
    color: rgba(255,255,255,0.8) !important;
}

.news-card-variant-actions {
    text-align: center;
}

.news-card-variant-btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

.news-card-variant:not(.background-grey-light) .news-card-variant-btn {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: white;
}

.news-card-variant:not(.background-grey-light) .news-card-variant-btn:hover {
    background: white;
    border-color: white;
    color: #191919;
}

/* ==========================================================================
   News Embed Card - RSS/XML Feed Items
   ========================================================================== */
.news-embed-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-embed-card:hover {
    box-shadow: var(--job-card-shadow-hover);
    transform: translateY(-2px);
}

.news-embed-card-image {
    position: relative;
    overflow: hidden;
}

.news-embed-card-image-link {
    display: block;
}

.news-embed-card-thumbnail {
    height: 150px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.3s ease;
}

.news-embed-card:hover .news-embed-card-thumbnail {
    transform: scale(1.05);
}

.news-embed-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-embed-card:hover .news-embed-card-overlay {
    opacity: 1;
}

.news-embed-card-overlay i {
    font-size: 1.75rem;
    color: white;
}

.news-embed-card-content {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-embed-card-date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.news-embed-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.5rem;
    flex: 1;
}

.news-embed-card-title-link {
    color: #191919;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-embed-card-title-link:hover {
    color: #0a66c2;
}

.news-embed-card-summary {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.news-embed-card-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.news-embed-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.news-embed-card-link:hover {
    gap: 0.6rem;
}

/* ==========================================================================
   News Sections and Lists
   ========================================================================== */
.news-category-section {
    margin-bottom: 2.5rem;
}

.news-category-header {
    margin-bottom: 1.25rem;
}

.news-category-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #191919;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e0e0e0;
}

.news-list-section,
.news-latest-section,
.news-embed-list,
.news-variant-section {
    margin-bottom: 1.5rem;
}

/* Variant Grid */
.news-variant-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5rem;
}

.news-variant-grid-item {
    padding: 0.5rem;
}

/* ==========================================================================
   News Linked Section
   ========================================================================== */
.news-linked-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.news-section-header {
    margin-bottom: 1.5rem;
}

.news-section-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #191919;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   News All Button
   ========================================================================== */
.news-all-btn-wrapper {
    text-align: center;
    margin-top: 1.5rem;
}

.news-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

/* ==========================================================================
   News Pagination
   ========================================================================== */
.news-pagination {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

/* ==========================================================================
   News Empty State
   ========================================================================== */
.news-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
}

.news-empty-state-icon {
    font-size: 3rem;
    color: #ccc;
    margin-bottom: 1rem;
}

.news-empty-state-text {
    font-size: 1rem;
    color: #666;
    margin: 0;
}

/* ==========================================================================
   News Detail Page
   ========================================================================== */
.news-detail-wrapper {
    background: #f4f2ee;
    min-height: 100vh;
    padding: 1.5rem 0 3rem;
}

.news-detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}

/* Main Content */
.news-detail-main {
    min-width: 0;
}

.news-detail-header {
    margin-bottom: 1rem;
}

.news-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.news-detail-back:hover {
    color: #0a66c2;
}

/* News Article Card */
.news-detail-card {
    background: white;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    overflow: hidden;
    position: relative;
}

/* Date Badge */
.news-detail-date-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    border-radius: 10px;
    color: white;
    min-width: 60px;
    margin: 1rem 0 0 1rem;
}

.news-detail-date-day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.news-detail-date-month {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.news-detail-date-year {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Card Header */
.news-detail-card-header {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.news-detail-category {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--job-badge-radius);
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
}

.news-detail-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #191919;
    line-height: 1.3;
    margin: 0 0 0.75rem;
}

.news-detail-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin: 0 0 1rem;
    line-height: 1.5;
}

/* Social Share */
.news-detail-social {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

/* Featured Image */
.news-detail-image {
    margin: 0;
}

.news-detail-image-img {
    width: 100%;
    height: auto;
    display: block;
}

.news-detail-image-caption {
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    background: #f8f9fa;
}

/* Article Content */
.news-detail-content {
    padding: 1.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}

.news-detail-content p {
    margin: 0 0 1.25rem;
}

.news-detail-content h2,
.news-detail-content h3,
.news-detail-content h4 {
    margin: 1.5rem 0 1rem;
    color: #191919;
}

.news-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.news-detail-content a {
    color: #0a66c2;
}

.news-detail-content ul,
.news-detail-content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.news-detail-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-left: 4px solid #0a66c2;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #555;
}

/* Protect semantic HTML formatting from portal CSS overrides (e.g. body * { font-weight: 400 }) */
strong, b {
    font-weight: 700 !important;
}

em, i:not([class]) {
    font-style: italic !important;
}

/* Sidebar */
.news-detail-sidebar {
    position: sticky;
    top: 1rem;
}

.news-related-header {
    margin-bottom: 1rem;
}

.news-related-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #191919;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.news-related-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.news-related-item .news-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.news-related-item .news-card-content {
    padding: 0.75rem;
}

.news-related-item .news-card-title {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.news-related-item .news-card-thumbnail {
    height: 120px;
}

/* ==========================================================================
   News Responsive Styles
   ========================================================================== */
@media (max-width: 991.98px) {
    .news-detail-layout {
        grid-template-columns: 1fr;
    }

    .news-detail-sidebar {
        position: static;
        margin-top: 2rem;
    }

    .news-related-list {
        flex-direction: row;
        flex-wrap: wrap;
        margin: -0.375rem;
    }

    .news-related-item {
        flex: 0 0 calc(50% - 0.75rem);
        padding: 0.375rem;
    }

    .news-carousel-slide {
        height: 350px;
    }

    .news-carousel-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .news-page-header {
        padding: 1.5rem 0 1rem 0;
    }

    .news-page-title {
        font-size: 1.5rem;
    }

    .news-filters-grid {
        flex-direction: column;
    }

    .news-filter-group,
    .news-filter-search {
        width: 100%;
        min-width: auto;
    }

    .news-filter-actions {
        width: 100%;
    }

    .news-filter-btn {
        width: 100%;
        justify-content: center;
    }

    .news-carousel-slide {
        height: 300px;
    }

    .news-carousel-content {
        padding: 1.25rem;
    }

    .news-carousel-title {
        font-size: 1.25rem;
    }

    .news-carousel-subtitle {
        font-size: 0.9rem;
    }

    .news-detail-wrapper {
        padding: 1rem 0 2rem;
    }

    .news-detail-title {
        font-size: 1.35rem;
    }

    .news-detail-subtitle {
        font-size: 1rem;
    }

    .news-detail-card-header {
        padding: 0.75rem 1rem 1rem 1rem;
    }

    .news-detail-content {
        padding: 1rem;
    }

    .news-related-item {
        flex: 0 0 100%;
    }

    .news-card-variant-content {
        padding: 1.25rem;
        min-height: 180px;
    }
}

@media (max-width: 575.98px) {
    .news-carousel-slide {
        height: 250px;
    }

    .news-carousel-category {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }

    .news-carousel-title {
        font-size: 1.1rem;
    }

    .news-carousel-subtitle {
        display: none;
    }

    .news-card-thumbnail {
        height: 150px;
    }

    .news-linked-card-thumbnail,
    .news-embed-card-thumbnail {
        height: 130px;
    }

    .news-detail-date-badge {
        padding: 0.5rem;
        min-width: 50px;
    }

    .news-detail-date-day {
        font-size: 1.25rem;
    }

    .news-detail-date-month {
        font-size: 0.7rem;
    }

    .news-section-title,
    .news-category-title {
        font-size: 1.15rem;
    }
}


/* ==========================================================================
   MODIFIERS FOR BASE COMPONENTS
   Customizations that extend existing .content-* classes
   ========================================================================== */

/* ----- content-detail-card modifiers ----- */
.content-detail-card-header--accent {
    border-left: 4px solid;
}

.content-detail-title--sm {
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ----- content-section-header modifiers ----- */
.content-section-header--center {
    text-align: center;
    justify-content: center;
}

/* ----- content-card-badge modifiers ----- */
.content-card-badge--inline {
    position: static;
    margin: 0;
}

/* ----- content-card-title-link as button ----- */
.content-card-title-link--button {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.content-card-title-link--button:hover {
    color: #0a66c2;
}

.content-card-title-link--button:focus {
    outline: 2px solid #0a66c2;
    outline-offset: 2px;
}

/* ----- content-empty-state modifiers ----- */
.content-empty-state--warning {
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
    border-radius: var(--job-card-radius);
    padding: 2rem;
}

.content-empty-state--warning i { color: #856404; }
.content-empty-state--warning h3 { color: #856404; }
.content-empty-state--warning p { color: #664d03; }
.content-empty-state--warning a { color: #664d03; font-weight: 600; }


/* ==========================================================================
   ABOUT PAGE - Section spacing and grids
   ========================================================================== */
.about-section {
    margin-bottom: 2rem;
}

.about-grid {
    display: grid;
    gap: 1.5rem;
}

.about-grid--two-cols {
    grid-template-columns: repeat(2, 1fr);
}

.about-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* About image (floating) */
.about-image-wrapper {
    float: right;
    margin: 0 0 1.5rem 2rem;
    max-width: 300px;
}

.about-image {
    width: 100%;
    height: auto;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
}

.about-content {
    font-size: 1rem;
    line-height: 1.75;
    color: #333;
}

@media (max-width: 991.98px) {
    .about-grid--two-cols { grid-template-columns: 1fr; }
    .about-image-wrapper { float: none; margin: 0 auto 1.5rem; max-width: 100%; }
    .about-image { max-width: 400px; display: block; margin: 0 auto; }
}

@media (max-width: 575.98px) {
    .about-grid--auto { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MISC SECTION - Lazy loaded misc sections for Who We Are page
   ========================================================================== */
.misc-section-lazy {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 1.5rem;
}

.misc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.misc-grid--circle {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* ==========================================================================
   MISC CARD - Card component for misc items
   ========================================================================== */
.misc-card {
    background: rgba(0,0,0,0.03);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.misc-card:hover,
.misc-card:focus {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    outline: none;
}

.misc-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8f9fa;
}

.misc-card--circle .misc-card__media {
    aspect-ratio: 1 / 1;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.misc-card--circle .misc-card__image,
.misc-card--circle .misc-card__placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.misc-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.misc-card:hover .misc-card__image {
    transform: scale(1.05);
}

.misc-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.misc-card__placeholder img {
    width: 60%;
    height: auto;
    opacity: 0.6;
}

.misc-card__badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: var(--portal-color, #0d6efd);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.misc-card__flag {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.misc-card__flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.misc-card__content {
    padding: 0.875rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.misc-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.misc-card__subtitle,
.misc-card__position,
.misc-card__company {
    font-size: 0.8125rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

.misc-card__position {
    font-weight: 500;
    color: #495057;
}

.misc-card__action {
    padding: 0 0.875rem 0.875rem;
    margin-top: auto;
}

.misc-card__cta {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--portal-color, #0d6efd);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.misc-card__cta i {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.misc-card:hover .misc-card__cta i {
    transform: translateX(3px);
}

/* Misc card responsive */
@media (max-width: 991px) {
    .misc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .misc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .misc-card__content {
        padding: 0.75rem;
    }

    .misc-card__title {
        font-size: 0.875rem;
    }
}

@media (max-width: 479px) {
    .misc-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Misc card text-only mode — quote style */
.misc-card--text {
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    position: relative;
}

.misc-card--text .misc-card__content {
    padding: 2.25rem 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.misc-card--text .misc-card__content::before {
    content: '\201C';
    position: absolute;
    top: 0.25rem;
    left: 0.75rem;
    font-size: 3rem;
    line-height: 1;
    color: var(--portal-color, #2563eb);
    opacity: 0.3;
    font-family: Georgia, serif;
}

.misc-card--text .misc-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    font-style: normal;
    color: #555;
    -webkit-line-clamp: 1;
    order: 2;
}

.misc-card--text .misc-card__subtitle {
    font-size: 0.8125rem;
    font-weight: 400;
    font-style: normal;
    color: #888;
    margin-top: 0.125rem;
    order: 3;
}

.misc-card--text .misc-card__description {
    font-size: 1rem;
    font-style: italic;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.5;
    -webkit-line-clamp: 4;
    order: 1;
    margin-bottom: 0.75rem;
}

/* Description size variants for long text (set by template based on char count) */
.misc-card__description--sm {
    font-size: 0.875rem;
    line-height: 1.45;
}

.misc-card__description--xs {
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Home-only: fixed height text-only cards so long descriptions don't reshape the grid */
.misc-card--text.misc-card--home {
    height: 250px;
}

.misc-card--text.misc-card--home .misc-card__content {
    height: 100%;
    overflow: hidden;
}

.misc-card--text.misc-card--home .misc-card__description {
    flex: 1 1 auto;
    min-height: 0;
    -webkit-line-clamp: 6;
}

.misc-card--text.misc-card--home .misc-card__description--sm {
    -webkit-line-clamp: 7;
}

.misc-card--text.misc-card--home .misc-card__description--xs {
    -webkit-line-clamp: 8;
}


.misc-card__description {
    font-size: 0.8125rem;
    color: #6c757d;
    margin: 0.25rem 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Content section link (used in headers) */
.content-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--portal-color, #0d6efd);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.content-section-link:hover {
    opacity: 0.8;
    text-decoration: none;
    color: var(--portal-color, #0d6efd);
}

.content-section-link i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.content-section-link:hover i {
    transform: translateX(2px);
}

@media (max-width: 767px) {
    .misc-section-lazy {
        padding: 1rem;
    }

    .misc-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.75rem;
    }

    .misc-grid--circle {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* ==========================================================================
   TEAM - Grid and member cards (unique circular avatars)
   ========================================================================== */
.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-member-card {
    width: 180px;
    flex-shrink: 0;
    background: #fff;
    border-radius: var(--job-card-radius);
    box-shadow: var(--job-card-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.team-member-card:hover {
    box-shadow: var(--job-card-shadow-hover);
    transform: translateY(-3px);
}

/* Flex break for org chart layout */
.team-grid-break {
    flex-basis: 100%;
    width: 100%;
    height: 0;
}

.team-member-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1.5rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
}

.team-member-button:focus {
    outline: 2px solid #0a66c2;
    outline-offset: -2px;
}

.team-member-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-bottom: 1rem;
    border: 3px solid #f0f0f0;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.team-member-card:hover .team-member-avatar {
    border-color: #0a66c2;
    transform: scale(1.05);
}

.team-member-avatar--placeholder {
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-member-avatar--placeholder i {
    font-size: 2.5rem;
    color: #adb5bd;
}

.team-member-name {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
}

.team-member-position {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
}

/* Team modal */
.team-modal-content {
    display: flex;
    gap: 1.5rem;
}

.team-modal-info { flex: 1; }

.team-modal-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
}

@media (max-width: 767.98px) {
    .team-grid { gap: 1rem; }
    .team-member-card { width: 140px; }
    .team-member-avatar { width: 80px; height: 80px; }
    .team-modal-content { flex-direction: column; }
}

@media (max-width: 575.98px) {
    .team-member-card { width: 130px; }
    .team-member-avatar { width: 70px; height: 70px; }
    .team-member-name { font-size: 0.85rem; }
}


/* ==========================================================================
   AUDITORIUM - Streaming page (modern video player layout)
   ========================================================================== */
.auditorium-wrapper {
    background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 100%);
    min-height: 100vh;
    padding-top: 1rem;
}

.auditorium-header {
    padding: 1.5rem 1rem 1rem;
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
}

.auditorium-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
}

.auditorium-main {
    padding: 0 1rem 2rem;
}

.auditorium-layout {
    display: flex;
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

.auditorium-layout--with-chat .auditorium-video { flex: 3; }
.auditorium-video {
    flex: 1;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.auditorium-countdown {
    background: linear-gradient(145deg, #1e2a2d 0%, #162023 100%);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.auditorium-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #000;
}

.auditorium-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.auditorium-video .text-center {
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
    font-size: 0.75rem;
}

.auditorium-chat {
    flex: 1;
    min-width: 320px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
}

.auditorium-chat-iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 991.98px) {
    .auditorium-layout {
        flex-direction: column;
        gap: 1rem;
    }
    .auditorium-chat {
        max-width: 100%;
        min-width: 100%;
    }
    .auditorium-chat-iframe { height: 400px; min-height: 400px; }
}

@media (max-width: 767.98px) {
    .auditorium-wrapper { padding-top: 0.5rem; }
    .auditorium-header { padding: 1rem; }
    .auditorium-title { font-size: 1.35rem; }
    .auditorium-countdown { padding: 2rem 1rem; min-height: 220px; }
    .auditorium-video { border-radius: 8px; }
    .auditorium-chat-iframe { border-radius: 8px; height: 350px; min-height: 350px; }
}

@media (max-width: 575.98px) {
    .auditorium-title { font-size: 1.15rem; }
    .auditorium-chat { display: none; }
    .auditorium-video {
        border-radius: 0;
        margin: 0 -1rem;
        box-shadow: none;
    }
}


/* ==========================================================================
   BENEFITS - Filter pills and card customizations
   ========================================================================== */
.benefits-filter {
    margin-bottom: 1.5rem;
}

.benefits-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border: 2px solid;
    border-radius: var(--job-badge-radius);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    background-color: transparent;
    transition: all 0.2s ease;
}

.benefits-filter-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.benefits-filter-btn--active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Benefit card customizations */
.benefit-card {
    cursor: pointer;
}

.benefit-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: #f8f9fa;
}

.benefit-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 575.98px) {
    .benefits-filter-list { justify-content: center; }
    .benefits-filter-btn { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
}

/* ==========================================================================
   WHO WE ARE - Lazy-loaded Miscs Overrides
   Override legacy misc styles when inside the modern WhoWeAre page context
   ========================================================================== */

/* Container override - remove old styles */
.about-section .content-feature {
    background: transparent;
    padding: 0;
    margin: 0;
}

/* Header override - modernize the heading block */
.about-section .heading-block.heading-minimal.heading-border {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    border-radius: 0;
}

.about-section .heading-block.heading-minimal.heading-border h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.about-section .heading-block.heading-minimal.heading-border h1 a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--portal-color, #0d6efd);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: opacity 0.2s ease;
    margin: 0;
    padding: 0;
    float: none;
}

.about-section .heading-block.heading-minimal.heading-border h1 a:hover {
    opacity: 0.8;
    text-decoration: none;
}

.about-section .heading-block.heading-minimal.heading-border h1 a i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.about-section .heading-block.heading-minimal.heading-border h1 a:hover i {
    transform: translateX(2px);
}

/* Grid wrapper override */
.about-section .content-feature .row {
    margin: 0;
}

.about-section .content-feature .nice-list {
    background: transparent;
    padding: 0;
    margin: 0;
}

.about-section .content-feature .nice-list > .row,
.about-section .content-feature .nice-list > .nice-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 0;
}

/* Column override - remove Bootstrap column styles in grid context */
.about-section .content-feature .nice-list [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0;
}

/* Nice box override */
.about-section .content-feature .nice-box {
    padding: 0;
    margin: 0;
}

/* Content feature list (circle style) override */
.about-section .content-feature .content-feature-list {
    padding: 0;
    margin: 0;
    text-align: left;
}

/* Clearfix override - hide in grid context */
.about-section .content-feature .clearfix {
    display: none;
}

/* Responsive overrides */
@media (max-width: 991.98px) {
    .about-section .content-feature .nice-list > .row,
    .about-section .content-feature .nice-list > .nice-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .about-section .content-feature .nice-list > .row,
    .about-section .content-feature .nice-list > .nice-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .about-section .heading-block.heading-minimal.heading-border h1 {
        font-size: 1.25rem;
    }
}

@media (max-width: 479.98px) {
    .about-section .content-feature .nice-list > .row,
    .about-section .content-feature .nice-list > .nice-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* =============================================================================
   NETWORKING MODULE - Modern BEM Styles
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Networking Contact Card (extends .content-card)
   ----------------------------------------------------------------------------- */
.networking-contact {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    position: relative;
}

.networking-contact--full {
    width: 100%;
}

.networking-contact__date {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.networking-contact__header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.networking-contact__photo {
    flex-shrink: 0;
}

.networking-contact__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.networking-contact__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: #adb5bd;
    font-size: 2rem;
}

.networking-contact__info {
    flex: 1;
    min-width: 0;
}

.networking-contact__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 0.375rem;
    line-height: 1.3;
}

.networking-contact__career,
.networking-contact__date-range,
.networking-contact__job,
.networking-contact__experience {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.networking-contact__career i,
.networking-contact__date-range i,
.networking-contact__job i {
    color: var(--portal-color, #0d6efd);
    width: 1rem;
    text-align: center;
}

.networking-contact__details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.networking-contact__detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 0.5rem;
}

.networking-contact__detail i {
    color: var(--portal-color, #0d6efd);
    width: 1rem;
    text-align: center;
}

.networking-contact__link {
    color: var(--portal-color, #0d6efd);
    text-decoration: none;
}

.networking-contact__link:hover {
    text-decoration: underline;
}

.networking-contact__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

.networking-contact__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    background: #495057;
    border-radius: 1rem;
}

.networking-contact__actions {
    margin-top: auto;
    padding-top: 1rem;
    text-align: center;
}

.networking-contact__content {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.networking-contact__message {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.networking-contact__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.networking-contact__status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.networking-contact__status-badge--success {
    background: #d1e7dd;
    color: #0f5132;
}

.networking-contact__status-badge--danger {
    background: #f8d7da;
    color: #842029;
}

.networking-contact__status-badge--warning {
    background: #fff3cd;
    color: #664d03;
}

.networking-contact__rejected-message {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.networking-contact__actions-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.networking-contact__delete {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    text-align: right;
}

/* -----------------------------------------------------------------------------
   Networking Grid
   ----------------------------------------------------------------------------- */
.networking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

@media (max-width: 575.98px) {
    .networking-grid {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------------------------------
   Networking Filters
   ----------------------------------------------------------------------------- */
.networking-filters {
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--job-card-shadow);
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
}

.networking-filters--inline {
    position: static;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
}

.networking-filters__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--portal-color, #0d6efd);
}

.networking-filters__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.networking-filters__group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.networking-filters__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #495057;
}

.networking-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.networking-filters__col {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.networking-filters__col--small {
    flex: 0 1 100px;
}

.networking-filters__submit {
    margin-top: 1rem;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   Networking Tabs
   ----------------------------------------------------------------------------- */
.networking-tabs {
    margin-bottom: 1.5rem;
}

.networking-tabs__list {
    display: flex;
    border-bottom: 2px solid #e9ecef;
}

.networking-tabs__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.networking-tabs__item:hover {
    color: var(--portal-color, #0d6efd);
}

.networking-tabs__item--active {
    color: var(--portal-color, #0d6efd);
    border-bottom-color: var(--portal-color, #0d6efd);
}

.networking-tabs__item i {
    font-size: 1rem;
}

/* -----------------------------------------------------------------------------
   Networking Contacts List
   ----------------------------------------------------------------------------- */
.networking-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* -----------------------------------------------------------------------------
   Networking Chat
   ----------------------------------------------------------------------------- */
.networking-chat {
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--job-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 250px);
    min-height: 400px;
}

.networking-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.networking-chat__message {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
}

.networking-chat__message--sent {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.networking-chat__message--received {
    align-self: flex-start;
}

.networking-chat__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.networking-chat__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.networking-chat__bubble {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    position: relative;
}

.networking-chat__message--sent .networking-chat__bubble {
    background: var(--portal-color, #0d6efd);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}

.networking-chat__message--received .networking-chat__bubble {
    border-bottom-left-radius: 0.25rem;
}

.networking-chat__text {
    margin: 0 0 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.networking-chat__time {
    display: block;
    font-size: 0.6875rem;
    opacity: 0.7;
}

.networking-chat__message--sent .networking-chat__time {
    text-align: right;
}

.networking-chat__composer {
    border-top: 1px solid #e9ecef;
    padding: 1rem;
    background: #f8f9fa;
}

.networking-chat__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.networking-chat__input-wrapper {
    position: relative;
}

.networking-chat__textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    resize: none;
    min-height: 60px;
    transition: border-color 0.2s ease;
}

.networking-chat__textarea:focus {
    outline: none;
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.networking-chat__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.networking-chat__emoji-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.375rem;
    transition: color 0.2s ease;
}

.networking-chat__emoji-btn:hover {
    color: var(--portal-color, #0d6efd);
}

/* Chat Sidebar */
.networking-chat-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.networking-chat-sidebar__cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.networking-chat-sidebar__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
}

/* -----------------------------------------------------------------------------
   Networking Config
   ----------------------------------------------------------------------------- */
.networking-config {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.25rem;
}

.networking-config__form {
    display: flex;
    flex-direction: column;
}

.networking-config__section {
    margin-bottom: 0.5rem;
}

.networking-config__divider {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 1rem 0;
}

.networking-config__legend {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}

.networking-config__description {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 1rem;
    text-align: justify;
}

.networking-config__add-topic {
    text-align: center;
    margin-bottom: 1rem;
}

.networking-config__topics {
    margin-bottom: 1rem;
}

.networking-config__submit {
    text-align: center;
    margin-top: 1rem;
}

/* -----------------------------------------------------------------------------
   Networking Sidebar Stats
   ----------------------------------------------------------------------------- */
.networking-sidebar__stats {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.networking-sidebar__stats i {
    font-size: 1.5rem;
    color: var(--portal-color, #0d6efd);
}

/* -----------------------------------------------------------------------------
   Networking Access Denied
   ----------------------------------------------------------------------------- */
.networking-access-denied {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #f8f9fa;
    border-radius: 12px;
    margin-top: 1.5rem;
}

.networking-access-denied i {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.networking-access-denied h3 {
    font-size: 1.25rem;
    color: #212529;
    margin-bottom: 0.5rem;
}

.networking-access-denied p {
    color: #6c757d;
    margin: 0;
}

/* -----------------------------------------------------------------------------
   Networking Pagination
   ----------------------------------------------------------------------------- */
.networking-pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

/* -----------------------------------------------------------------------------
   Networking Description
   ----------------------------------------------------------------------------- */
.networking-description {
    margin-bottom: 1.5rem;
    color: #495057;
    line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
   ----------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .networking-filters {
        position: static;
        margin-bottom: 1.5rem;
    }

    .networking-chat {
        height: auto;
        min-height: 500px;
        max-height: calc(100vh - 200px);
    }
}

@media (max-width: 767.98px) {
    .networking-contact__header {
        flex-direction: column;
        text-align: center;
    }

    .networking-contact__avatar {
        width: 100px;
        height: 100px;
    }

    .networking-contact__actions-group {
        justify-content: center;
    }

    .networking-tabs__item {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }

    .networking-tabs__item span {
        display: none;
    }

    .networking-tabs__item i {
        font-size: 1.25rem;
    }

    .networking-chat__message {
        max-width: 90%;
    }
}

/* ============================================================================
   ADVISOR MODULE
   BEM components for advisor/mentoring functionality
   ============================================================================ */

/* Advisor List - Main Container */
.advisor-list {
    padding: 1rem 0;
}

.advisor-list__content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.advisor-list__sidebar {
    flex: 0 0 100%;
    max-width: 100%;
}

.advisor-list__main {
    flex: 1;
    min-width: 0;
}

.advisor-list__main--full {
    flex: 0 0 100%;
    max-width: 100%;
}

.advisor-list__description {
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-left: 3px solid var(--portal-color, #0d6efd);
    border-radius: var(--rq-card-radius, 12px);
    box-shadow: var(--rq-card-shadow, 0 0 0 1px rgba(0, 0, 0, 0.06));
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #475569;
}

.advisor-list__register {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.advisor-list__info {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #495057;
}

.advisor-list__info p {
    margin: 0;
}

/* Advisor Filters */
.advisor-filters {
    margin-bottom: 1.5rem;
}

.advisor-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.advisor-filters__group {
    flex: 1 1 200px;
    min-width: 150px;
}

.advisor-filters__submit {
    flex: 0 0 auto;
}

.advisor-filters__submit button {
    white-space: nowrap;
}

/* Advisor Grid */
.advisor-grid {
    margin-bottom: 2rem;
}

.advisor-grid--horizontal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.advisor-grid--vertical {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Advisor Card - Horizontal Layout */
.advisor-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.advisor-card:hover,
.advisor-card:focus-within {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.advisor-card--horizontal {
    display: flex;
    flex-direction: row;
    padding: 1.25rem;
    gap: 1.25rem;
}

.advisor-card--horizontal .advisor-card__photo {
    flex: 0 0 auto;
}

.advisor-card--horizontal .advisor-card__avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 0.375rem;
}

.advisor-card--horizontal .advisor-card__avatar--placeholder {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    border-radius: 0.375rem;
    color: #6c757d;
    font-size: 3rem;
}

.advisor-card--horizontal .advisor-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.advisor-card__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 0.5rem 0;
}

.advisor-card__position {
    font-size: 0.9375rem;
    color: #495057;
    margin: 0 0 0.25rem 0;
}

.advisor-card__position i,
.advisor-card__categories i {
    color: var(--portal-color, #0d6efd);
    width: 1.25rem;
    margin-right: 0.25rem;
}

.advisor-card__categories {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0 0.75rem 0;
}

.advisor-card__actions {
    margin-top: auto;
    padding-top: 0.75rem;
}

/* Advisor Card - Vertical Layout */
.advisor-card--vertical {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.advisor-card--vertical:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

.advisor-card__image {
    position: relative;
    overflow: hidden;
}

.advisor-card__img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
}

.advisor-card__image--placeholder {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #adb5bd;
}

.advisor-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.advisor-card--vertical .advisor-card__name {
    font-size: 1.1rem;
}

.advisor-card--vertical .advisor-card__position {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.advisor-card--vertical .advisor-card__categories {
    font-size: 0.8125rem;
    flex: 1;
}

.advisor-card--vertical .advisor-card__actions {
    margin-top: 1rem;
    text-align: center;
}

/* Advisor Pagination */
.advisor-pagination {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

/* Advisor Profile - Show Page */
.advisor-profile {
    padding: 1rem 0;
}

.advisor-profile__instructions {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-left: 3px solid var(--portal-color, #0d6efd);
    border-radius: var(--rq-card-radius, 12px);
    box-shadow: var(--rq-card-shadow, 0 0 0 1px rgba(0, 0, 0, 0.06));
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.9375rem;
    color: #475569;
    line-height: 1.6;
}

.advisor-profile__instructions-title {
    font-size: 1rem;
    font-weight: 700;
    color: #191919;
    margin-bottom: 0.75rem;
}

.advisor-profile__content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    min-height: 400px;
}

.advisor-profile__sidebar {
    flex: 0 0 100%;
}

.advisor-profile__main {
    flex: 1;
    min-width: 0;
}

.advisor-profile__card {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-align: center;
}

.advisor-profile__photo {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.advisor-profile__position {
    font-size: 1.125rem;
    color: var(--portal-color, #0d6efd);
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.advisor-profile__detail {
    font-size: 0.9375rem;
    color: #495057;
    margin: 0.25rem 0;
}

.advisor-profile__categories,
.advisor-profile__topics {
    font-size: 0.9375rem;
    color: #495057;
    margin: 0.75rem 0 0.25rem;
}

.advisor-profile__description {
    line-height: 1.7;
}

.advisor-profile__actions {
    text-align: center;
    margin-top: 2rem;
}

/* ============================================================
   ADVISOR PROFILE HERO (ShowAdvisor)
   ============================================================ */
.advisor-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2rem;
    padding: 2rem;
    margin: 0 0 2rem;
    background: rgba(var(--portal-color-rgb), 0.06);
    border: 1px solid rgba(var(--portal-color-rgb), 0.15);
    border-radius: var(--rq-card-radius, 12px);
}

.advisor-hero__avatar {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(var(--portal-color-rgb), 0.35);
}

.advisor-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.advisor-hero__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--portal-color, #0d6efd);
    color: #fff;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
}

.advisor-hero__body {
    flex: 1 1 320px;
    min-width: 0;
}

.advisor-hero__name {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #191919;
    line-height: 1.2;
}

.advisor-hero__position {
    margin: 0.35rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--portal-color-dark, #475569);
}

.advisor-hero__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin: 0.85rem 0 0;
    padding: 0;
    font-size: 0.9rem;
    color: #666;
}

.advisor-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.advisor-hero__meta-item i {
    color: var(--portal-color, #0d6efd);
    opacity: 0.85;
}

.advisor-hero__signals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.85rem;
}

.advisor-hero__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    color: #f5a623;
    font-size: 0.95rem;
}

.advisor-hero__rating-value {
    margin-left: 0.35rem;
    font-weight: 700;
    color: #191919;
}

.advisor-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.advisor-hero__status i {
    font-size: 0.5rem;
}

.advisor-hero__status--available {
    color: #0f7b3f;
    background: rgba(34, 197, 94, 0.14);
}

.advisor-hero__chips {
    margin-top: 1rem;
}

.advisor-hero__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    min-width: 200px;
    margin-left: auto;
}

/* Chips shared (topics / categories) */
.advisor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Direct contact form, expanded below the hero */
.advisor-contact-collapse {
    margin-bottom: 2rem;
}

@media (max-width: 767.98px) {
    .advisor-hero {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    /* In the stacked (column) hero, the 320px flex-basis becomes a vertical
       size — drop it so the body fits its content. */
    .advisor-hero__body {
        flex-basis: auto;
    }

    .advisor-hero__meta,
    .advisor-hero__signals,
    .advisor-hero__chips {
        justify-content: center;
    }

    .advisor-hero__actions {
        width: 100%;
        margin-left: 0;
    }
}

/* Advisor Room */
.advisor-room {
    min-height: 400px;
}

.advisor-room__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--portal-color, #0d6efd);
}

.advisor-room__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.advisor-room__status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.advisor-room__status--active {
    background-color: #d1e7dd;
    color: #0f5132;
}

.advisor-room__status--inactive {
    background-color: #f8d7da;
    color: #842029;
}

.advisor-room__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.advisor-room__participants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.advisor-room__participant {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
}

.advisor-room__participant-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.advisor-room__participant-name {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.advisor-room__participant-info {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Advisor Meetings List */
.advisor-room__meetings {
    margin-bottom: 2rem;
}

.advisor-room__meetings-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--portal-color, #0d6efd);
    margin-bottom: 1rem;
}

.advisor-room__meeting {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--portal-color, #0d6efd);
}

.advisor-room__meeting--past {
    opacity: 0.7;
    border-left-color: #6c757d;
}

.advisor-room__meeting-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.advisor-room__meeting-date {
    font-weight: 600;
}

.advisor-room__meeting-date i {
    color: var(--portal-color, #0d6efd);
    margin-right: 0.5rem;
}

.advisor-room__meeting-actions {
    display: flex;
    gap: 0.25rem;
}

.advisor-room__meeting-link {
    font-size: 0.875rem;
}

.advisor-room__meeting-link a {
    color: var(--portal-color, #0d6efd);
}

.advisor-room__meeting--cancelled {
    opacity: 0.6;
    border-left-color: #dc3545;
}

.advisor-room__meeting-body {
    font-size: 0.9375rem;
}

.advisor-room__meeting-info {
    color: #6c757d;
    font-size: 0.875rem;
}

.advisor-room__meeting-detail {
    font-size: 0.875rem;
    margin: 0.25rem 0;
}

.advisor-room__meeting-status {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Advisor Room Content Layout */
.advisor-room__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .advisor-room__content {
        grid-template-columns: 2fr 1fr;
    }
}

.advisor-room__main {
    min-width: 0;
}

.advisor-room__chat {
    min-width: 0;
}

/* Advisor Room Login */
.advisor-room__login {
    max-width: 500px;
    margin: 3rem auto;
    padding: 2rem;
}

.advisor-room__login-form {
    text-align: center;
}

.advisor-room__login-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.advisor-room__login-field {
    margin-bottom: 1rem;
}

/* Advisor Room Comments */
.advisor-room__comments-trigger {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
}

.advisor-room__comment-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.advisor-room__comment-input {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.advisor-room__comment-submit {
    display: flex;
    align-items: flex-end;
}

.advisor-room__comments-list {
    margin-top: 1rem;
}

/* Advisor Panel (Login + Rooms) */
.advisor-panel {
    padding: 2rem 0;
}

.advisor-panel__login {
    max-width: 500px;
    margin: 4rem auto;
    padding: 2rem;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.advisor-panel__login-title {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--portal-color, #0d6efd);
}

.advisor-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.advisor-panel__title {
    font-size: 1.5rem;
    font-weight: 600;
}

.advisor-panel__actions {
    display: flex;
    gap: 0.5rem;
}

.advisor-panel__content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

.advisor-panel__table-wrapper {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
}

.advisor-panel__upcoming {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.advisor-panel__upcoming-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #dee2e6;
}

.advisor-panel__upcoming-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.advisor-panel__upcoming-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.875rem;
}

.advisor-panel__upcoming-item:last-child {
    border-bottom: none;
}

.advisor-panel__upcoming-item i {
    color: var(--portal-color, #0d6efd);
    width: 1.25rem;
    margin-right: 0.5rem;
}

/* Advisor Panel - Meetings List */
.advisor-panel__meetings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.advisor-panel__meeting-item {
    padding: 0.75rem;
    background-color: #fff;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--portal-color, #0d6efd);
}

.advisor-panel__meeting-item p {
    margin: 0.25rem 0;
    font-size: 0.875rem;
}

.advisor-panel__meeting-user {
    font-weight: 500;
}

.advisor-panel__meeting-user a {
    color: inherit;
    cursor: pointer;
}

.advisor-panel__meeting-user a:hover {
    color: var(--portal-color, #0d6efd);
}

.advisor-panel__meeting-date i,
.advisor-panel__meeting-link i,
.advisor-panel__meeting-location i,
.advisor-panel__meeting-user i {
    color: var(--portal-color, #0d6efd);
    width: 1rem;
    margin-right: 0.5rem;
}

.advisor-panel__meeting-link a {
    color: var(--portal-color, #0d6efd);
}

/* Advisor Panel - Code Section */
.advisor-panel__code-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
    text-align: center;
}

.advisor-panel__code-form {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #fff;
    border-radius: 0.375rem;
}

.advisor-panel__code-form form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Advisor Panel - Login */
.advisor-panel__login-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.advisor-panel__login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.advisor-panel__login-field {
    margin: 0;
}

/* Advisor Panel - Table Section */
.advisor-panel__table {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Advisor Form */
.advisor-form {
    max-width: 800px;
    margin: 0 auto;
}

.advisor-form__section {
    margin-bottom: 2rem;
}

.advisor-form__section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--portal-color, #0d6efd);
}

.advisor-form__group {
    margin-bottom: 1rem;
}

.advisor-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Advisor Poll */
.advisor-poll {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 0;
}

.advisor-poll__intro {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.advisor-poll__section {
    margin-bottom: 2rem;
}

.advisor-poll__section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--portal-color, #0d6efd);
}

.advisor-poll__question {
    margin-bottom: 1.25rem;
}

.advisor-poll__question label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--portal-color, #0d6efd);
}

.advisor-poll__content {
    max-width: 600px;
    margin: 0 auto;
}

.advisor-poll__submit {
    margin-top: 2rem;
    text-align: center;
}

.advisor-poll__session-date {
    font-weight: 600;
    padding: 0.5rem 0;
}

.advisor-poll__session-date i {
    color: var(--portal-color, #0d6efd);
    margin-right: 0.5rem;
}

/* Advisor Register */
.advisor-register {
    padding: 1rem 0;
}

.advisor-register__content {
    max-width: 700px;
    margin: 0 auto;
}

/* Advisor Calendar Page */
.advisor-calendar-page {
    padding: 1rem 0;
}

/* Advisor Calendar Wrapper */
.advisor-calendar {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: var(--rq-card-radius, 12px);
    box-shadow: var(--rq-card-shadow, 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.05));
    padding: 1.75rem;
    margin: 1.5rem 0;
}

.advisor-calendar__header {
    margin-bottom: 1.5rem;
}

.advisor-calendar__divider {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 1.5rem 0;
}

.advisor-calendar__info {
    background-color: #cfe2ff;
    border: 1px solid #b6d4fe;
    color: #084298;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.advisor-calendar__info i {
    margin-right: 0.5rem;
}

.advisor-calendar__form {
    margin-top: 1.5rem;
}

.advisor-calendar__alert {
    text-align: center;
    padding: 1.5rem;
}

.advisor-calendar__alert .alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.advisor-calendar__alert .alert p {
    margin: 0;
}

.advisor-calendar__cancel {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

/* Advisor Form - Request Form */
.advisor-form {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.advisor-form__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.advisor-form__hour-selected {
    text-align: center;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--portal-color, #0d6efd);
    margin-bottom: 1rem;
}

.advisor-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.advisor-form__group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.advisor-form__group--full {
    grid-column: 1 / -1;
}

.advisor-form__group label {
    font-weight: 500;
    font-size: 0.875rem;
}

.advisor-form__notes {
    background-color: #e9ecef;
    padding: 1rem;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    margin-top: 0.5rem;
    text-align: justify;
}

.advisor-form__submit {
    text-align: center;
    margin-top: 1rem;
}

/* ============================================================
   ADVISOR CALENDAR — booking widget theming (scoped)
   Themes the shared scheduleCalendar.html.twig via its stable
   classes/ids WITHOUT editing that template. Scoped to
   .advisor-calendar so only the advisor booking views change.
   ============================================================ */
.advisor-calendar .title-news {
    color: #191919;
    font-weight: 700;
}

/* Month navigation (prev / label / next) — replaces the month select */
.advisor-calendar .advisor-cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.advisor-calendar .advisor-cal-nav__label {
    min-width: 170px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #191919;
    text-transform: capitalize;
}

.advisor-calendar .advisor-cal-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e5e8eb;
    background: #fff;
    color: var(--portal-color-dark, #0d6efd);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.advisor-calendar .advisor-cal-nav__btn:hover,
.advisor-calendar .advisor-cal-nav__btn:focus-visible {
    background: var(--portal-color, #0d6efd);
    color: #fff;
    border-color: var(--portal-color, #0d6efd);
}

.advisor-calendar .advisor-cal-nav__btn--disabled {
    opacity: 0.35;
    color: #94a3b8;
    pointer-events: none;
    cursor: default;
}

/* Month calendar grid */
.advisor-calendar #calendar-table {
    width: 100%;
    margin: 0 0 0.5rem;
}

.advisor-calendar #calendar-table thead th {
    border: none;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.advisor-calendar #calendar-table tbody td {
    border: none;
    padding: 0.3rem;
    vertical-align: middle;
    height: 48px;
}

/* Weekend columns (Sat + Sun) get a subtle distinct tint */
.advisor-calendar #calendar-table .advisor-cal-weekend {
    background: #f2f4f7;
}

.advisor-calendar #calendar-table thead th.advisor-cal-weekend {
    background: #eef1f5;
    border-radius: 6px 6px 0 0;
}

/* Unavailable days: muted, non-interactive */
.advisor-calendar #calendar-table tbody td > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #cbd0d6;
    font-size: 0.95rem;
}

/* Available days: portal-tinted clickable pills */
.advisor-calendar .btnHour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50% !important;
    border: 1px solid rgba(var(--portal-color-rgb, 13, 110, 253), 0.4) !important;
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.08) !important;
    color: var(--portal-color-dark, #0d6efd) !important;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.advisor-calendar .btnHour:hover {
    background: var(--portal-color, #0d6efd) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Keep the tinted base look on programmatic/keyboard focus (beats Bootstrap's grey :focus) */
.advisor-calendar .btnHour:focus:not(.btn-excel):not(:hover),
.advisor-calendar .btnHour:active:not(.btn-excel):not(:hover) {
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.08) !important;
    color: var(--portal-color-dark, #0d6efd) !important;
    border-color: rgba(var(--portal-color-rgb, 13, 110, 253), 0.4) !important;
    box-shadow: none !important;
}

.advisor-calendar .btnHour.btn-excel {
    background: var(--portal-color, #0d6efd) !important;
    color: #fff !important;
    border-color: var(--portal-color, #0d6efd) !important;
}

/* Time-slot buttons (right column) */
.advisor-calendar #viewAvailability {
    background: #f8f9fb;
    border: 1px solid #f0f0f0;
    border-radius: var(--rq-input-radius, 8px);
    padding: 1rem 0.75rem;
}

.advisor-calendar .btnBlockHour {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(var(--portal-color-rgb, 13, 110, 253), 0.4) !important;
    border-radius: var(--rq-input-radius, 8px) !important;
    background: #fff !important;
    color: var(--portal-color-dark, #0d6efd) !important;
    font-weight: 600;
}

.advisor-calendar .btnBlockHour:hover,
.advisor-calendar .btnBlockHour.btn-excel {
    background: var(--portal-color, #0d6efd) !important;
    color: #fff !important;
    border-color: var(--portal-color, #0d6efd) !important;
}

/* Keep the base look on programmatic/keyboard focus (beats Bootstrap's grey :focus) */
.advisor-calendar .btnBlockHour:focus:not(.btn-excel):not(:hover),
.advisor-calendar .btnBlockHour:active:not(.btn-excel):not(:hover) {
    background: #fff !important;
    color: var(--portal-color-dark, #0d6efd) !important;
    border-color: rgba(var(--portal-color-rgb, 13, 110, 253), 0.4) !important;
    box-shadow: none !important;
}

/* Request form fills the booking panel width */
.advisor-calendar .advisor-form {
    max-width: none;
}

/* Cancel booking control */
.advisor-calendar__cancel .btn {
    border-radius: 20px;
}

/* Mobile: time slots stack below the calendar (col-md-*), tighten the panel */
@media (max-width: 767.98px) {
    .advisor-calendar {
        padding: 1.25rem 0.85rem;
    }

    .advisor-calendar #viewAvailability {
        margin-top: 1.25rem;
    }

    .advisor-calendar #calendar-table tbody td {
        padding: 0.15rem;
        height: 44px;
    }

    .advisor-calendar .btnHour,
    .advisor-calendar #calendar-table tbody td > span {
        width: 34px;
        height: 34px;
    }
}

/* Advisor Direct Contact Card */
.advisor-contact-card {
    background: #fff;
    border: 1px solid rgba(var(--portal-color-rgb, 13, 110, 253), 0.2);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    max-width: 600px;
    margin: 0 auto;
}
.advisor-contact-card__title {
    background: linear-gradient(135deg, var(--portal-color, #0d6efd), var(--portal-color-dark, #0b5ed7));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    margin: 0;
}
.advisor-contact-card__title i {
    margin-right: 0.5rem;
    opacity: 0.85;
}
.advisor-contact-card__body {
    padding: 1.25rem;
}
.advisor-contact-card__body textarea {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    resize: vertical;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}
.advisor-contact-card__body textarea:focus {
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(var(--portal-color-rgb, 13, 110, 253), 0.15);
}
.advisor-contact-card__footer {
    padding: 0 1.25rem 1.25rem;
    text-align: right;
}

/* Advisor Contact Status (existing request) */
.advisor-contact-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    background: #e8f4fd;
    border: 1px solid #b6d4fe;
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
    color: #084298;
}
.advisor-contact-status i {
    font-size: 1.1rem;
}

/* Advisor Form - Enhanced */
.advisor-form {
    border: 1px solid rgba(var(--portal-color-rgb, 13, 110, 253), 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem;
}
.advisor-form__hour-selected {
    color: var(--portal-color, #0d6efd);
}
.advisor-form__group label {
    color: #495057;
}
.advisor-form__group .form-control:focus,
.advisor-form__group .form-select:focus {
    border-color: var(--portal-color, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(var(--portal-color-rgb, 13, 110, 253), 0.15);
}

/* Advisor List - Related Section */
.advisor-list--related {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}

/* Advisor Grid - Compact */
.advisor-grid--compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

/* Advisor Card - Compact Variant */
.advisor-card--compact {
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.advisor-card--compact:hover,
.advisor-card--compact:focus {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.advisor-card--compact .advisor-card__image {
    height: 180px;
    overflow: hidden;
}

.advisor-card--compact .advisor-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.advisor-card--compact .advisor-card__body {
    padding: 1rem;
    text-align: center;
}

.advisor-card--compact .advisor-card__name {
    font-size: 1rem;
}

.advisor-card--compact .advisor-card__position {
    font-size: 0.8125rem;
}

.advisor-card--compact .advisor-card__categories {
    font-size: 0.8125rem;
}

/* Responsive - Tablet */
@media (min-width: 768px) {
    .advisor-list__sidebar {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .advisor-list__main {
        flex: 0 0 calc(66.667% - 2rem);
    }

    .advisor-list__main--full {
        flex: 0 0 100%;
    }

    .advisor-profile__sidebar {
        flex: 0 0 33.333%;
        max-width: 300px;
    }

    .advisor-profile__main {
        flex: 0 0 calc(66.667% - 2rem);
    }
}

/* Responsive - Mobile */
@media (max-width: 767.98px) {
    .advisor-card--horizontal {
        flex-direction: column;
        text-align: center;
    }

    .advisor-card--horizontal .advisor-card__avatar {
        width: 120px;
        height: 120px;
        margin: 0 auto;
    }

    .advisor-card--horizontal .advisor-card__avatar--placeholder {
        width: 120px;
        height: 120px;
    }

    .advisor-card__position i,
    .advisor-card__categories i {
        display: none;
    }

    .advisor-filters__row {
        flex-direction: column;
    }

    .advisor-filters__group {
        flex: 1 1 100%;
        width: 100%;
    }

    .advisor-filters__submit {
        width: 100%;
    }

    .advisor-filters__submit button {
        width: 100%;
    }

    .advisor-panel__content {
        grid-template-columns: 1fr;
    }

    .advisor-panel__upcoming {
        order: -1;
    }

    .advisor-room__header {
        flex-direction: column;
        text-align: center;
    }

    .advisor-room__actions {
        justify-content: center;
    }

    .advisor-profile__content {
        flex-direction: column;
    }

    .advisor-profile__sidebar {
        text-align: center;
    }

    .advisor-profile__card {
        max-width: 350px;
        margin: 0 auto;
    }

    .advisor-form__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Interview Simulator — Question Edit Form
   ========================================================================== */

.question-form-card {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 10px;
    padding: 2rem;
}

.question-lang-tabs .nav-link {
    color: var(--bs-secondary-color, #6b7280);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    border-radius: 8px 8px 0 0;
}

.question-lang-tabs .nav-link.active {
    color: var(--bs-body-color, #111827);
    font-weight: 600;
    background: var(--bs-body-bg, #fff);
    border-color: var(--bs-border-color, #dee2e6) var(--bs-border-color, #dee2e6) var(--bs-body-bg, #fff);
}

.question-tab-pane {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 1.25rem;
    background: var(--bs-body-bg, #fff);
}

.question-lang-textarea {
    width: 100%;
    min-height: 90px;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--bs-body-color, #111827);
    background-color: var(--bs-body-bg, #fff);
    resize: vertical;
    transition: border-color 0.15s;
}

.question-lang-textarea:focus {
    outline: 2px solid transparent; /* visible in forced-colors/high-contrast mode */
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15);
}

.lang-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6b7280);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auto-translate-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bs-success-bg-subtle, #d1e7dd);
    border: 1px solid var(--bs-success-border-subtle, #a3cfbb);
    border-radius: 8px;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    color: var(--bs-success-text-emphasis, #0a3622);
    margin-top: 0.5rem;
}

/* ==========================================================================
   Match Score — Badge, Buttons & Animations
   ========================================================================== */

/* ---- Badge container ---- */
.job-card-match-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    min-height: 52px;
}

/* Circular ring badge */
.match-score-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2.5px solid currentColor;
    background: #fff;
}

.match-score-ring.match-high {
    color: #059669;
    background: #ecfdf5;
    border-color: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}

.match-score-ring.match-medium {
    color: #b45309;
    background: #fffbeb;
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

.match-score-ring.match-low {
    color: #4b5563;
    background: #f9fafb;
    border-color: #d1d5db;
}

.match-score-value {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
}

.match-score-label {
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1px;
}

/* Placeholder ring (before scores load) */
.match-score-placeholder .match-score-ring {
    color: #d1d5db;
    border-color: #e5e7eb;
    background: #f9fafb;
}

/* Score reveal animation */
@keyframes ms-score-in {
    0%   { opacity: 0; transform: scale(0.72); }
    100% { opacity: 1; transform: scale(1); }
}

.match-score-ring.score-revealed {
    animation: ms-score-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ---- Focus indicators for custom buttons ---- */
.btn-match-score:focus-visible {
    outline: 3px solid var(--portal-color, #0d6efd);
    outline-offset: 3px;
}

.btn-sort-match:focus-visible {
    outline: 3px solid var(--portal-color, #0d6efd);
    outline-offset: 3px;
}

/* ---- "Calcular compatibilidad" button ---- */
.btn-match-score {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.125rem;
    min-height: 44px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 9999px;
    border: 2px solid var(--portal-color, #0d6efd);
    color: #fff;
    background: var(--portal-color, #0d6efd);
    cursor: pointer;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(var(--portal-color-rgb, 13, 110, 253), 0.30);
}

.btn-match-score:hover:not(:disabled) {
    opacity: 0.88;
    box-shadow: 0 4px 14px rgba(var(--portal-color-rgb, 13, 110, 253), 0.38);
}

.btn-match-score:disabled {
    cursor: not-allowed;
    opacity: 1;
}

/* Progress fill sweeps left-to-right during calculation (transform is GPU-composited) */
.btn-match-score::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.22);
    transform-origin: left center;
    transform: scaleX(var(--ms-progress-frac, 0));
    transition: transform 0.4s ease;
    pointer-events: none;
}

/* Secondary "Recalcular" state — ghost pill */
.btn-match-score.btn-match-secondary {
    background: transparent;
    color: var(--portal-color, #0d6efd);
    box-shadow: none;
}

.btn-match-score.btn-match-secondary::after {
    display: none;
}

.btn-match-score.btn-match-secondary:hover:not(:disabled) {
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.06);
    opacity: 1;
    box-shadow: none;
}

/* ---- Sort by match button ---- */
.btn-sort-match {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    min-height: 44px;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 9999px;
    border: 1.5px solid #d1d5db;
    color: #4b5563;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.btn-sort-match:hover {
    border-color: var(--portal-color, #0d6efd);
    color: var(--portal-color, #0d6efd);
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.04);
}

.btn-sort-match.is-sorted {
    border-color: var(--portal-color, #0d6efd);
    color: var(--portal-color, #0d6efd);
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.08);
}

/* ---- Section layout ---- */
.jobs-match-score-section {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* ---- Match info: wrapper + button ---- */
.match-info-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.btn-match-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}
.btn-match-info:hover,
.btn-match-info:focus-visible {
    color: var(--portal-color, #0d6efd);
    background: rgba(var(--portal-color-rgb, 13, 110, 253), 0.08);
    outline: none;
}
.btn-match-info:focus-visible {
    outline: 2px solid var(--portal-color, #0d6efd);
    outline-offset: 2px;
}
.btn-match-info i {
    font-size: 0.95rem;
}

/* ---- Match info tooltip panel ---- */
.match-info-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 296px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 14px 16px;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
    transition: opacity 0.17s ease, transform 0.17s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1060;
}
.match-info-wrapper:hover .match-info-tooltip,
.match-info-wrapper:focus-within .match-info-tooltip,
.match-info-wrapper.is-open .match-info-tooltip {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .match-info-tooltip { transition: none; }
}

/* Arrow */
.match-info-arrow {
    position: absolute;
    top: -5px;
    right: 9px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    transform: rotate(45deg);
}

/* Description */
.match-info-desc {
    font-size: 0.8rem;
    color: #374151;
    line-height: 1.5;
    margin: 0 0 11px 0;
    padding-bottom: 11px;
    border-bottom: 1px solid #f3f4f6;
}

/* Color tiers */
.match-info-tiers {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}
.match-tier {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
}
.match-tier-ring {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid currentColor;
    flex-shrink: 0;
}
.match-tier--high  { color: #059669; }
.match-tier--medium { color: #b45309; }
.match-tier--low   { color: #6b7280; }
.match-tier-pct {
    font-weight: 600;
    width: 52px;
    flex-shrink: 0;
    color: inherit;
}
.match-tier-lbl { color: #6b7280; }

/* Factors */
.match-info-factors-hdr {
    font-size: 0.6375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    color: #9ca3af;
    margin-bottom: 6px;
}
.match-info-factors {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.match-info-factors span {
    font-size: 0.6875rem;
    line-height: 1.5;
    padding: 2px 7px;
    background: #f3f4f6;
    color: #374151;
    border-radius: 4px;
}

/* Progress bar wrapper (visually hidden, for screen readers) */
.match-score-progress-bar-wrapper {
    height: 4px;
    width: 160px;
}

/* ============================================================
   REQLUT UI DESIGN SYSTEM (rq-*)
   Shared component system for all user-facing listing/detail pages.
   Spec: docs/superpowers/specs/2026-04-13-alumni-ui-system-design.md
   ============================================================ */

/* ----- Design Tokens ----- */
:root {
    --rq-page-bg: #f4f2ee;
    --rq-page-padding-y: 2.5rem;
    --rq-title-size: 1.75rem;
    --rq-title-weight: 700;
    --rq-section-gap: 1.5rem;
    --rq-card-radius: 12px;
    --rq-card-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
    --rq-card-shadow-hover: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.1);
    --rq-input-radius: 8px;
    /* Alto del bloque de label de un filtro (margin-top + línea + margin-bottom), para
       poder alinear con el input un elemento que no tiene label propio. */
    --rq-filter-label-offset: 1.9rem;

    /* Texto secundario. #666 es el gris del sistema y llega a 5,7:1 sobre blanco; los grises
       más claros que se ven "elegantes" (#8a8a8a en adelante) quedan bajo el 4,5:1 de WCAG AA
       justo en las etiquetas de las métricas, que es donde el dato tiene menos contexto. */
    --rq-text-muted: #666;

    /* Tinta de datos. La declaran acá y no en cada gráfico porque el JS de Chart.js las lee de
       estas variables: tenerlas dos veces (CSS y JS) ya significa que un día van a discrepar. */
    --rq-chart-ink: #334155;
    --rq-chart-muted: #64748b;
    --rq-chart-accent: #0f766e;
    --rq-chart-grid: #efece7;
    /* Fondo de la tarjeta que contiene el gráfico. Se usa como anillo de los puntos de la
       serie de línea: es lo que los despega de la barra que tienen detrás. */
    --rq-chart-surface: #fff;

    /* Único acento funcional de los paneles de administración: "esto vence / esto se borra".
       5,05:1 sobre blanco y 4,7:1 sobre su propio fondo suave. */
    --rq-alert: #b45309;
    --rq-alert-soft: #fdf6ec;
}

/* El beige de --rq-page-bg es la superficie de las páginas de portal, donde forma parte de la
   identidad visual. Ultron tiene su propio lienzo: el #f3f4f6 de .body-grey (main.css) que usan
   todas sus demás pantallas. Sin esto, cualquier vista de Ultron que adopte un wrapper rq-*
   importa el fondo del contexto equivocado y se ve amarillenta al lado del resto del back-office.

   Se redefine el token por contexto en vez de pintar cada wrapper: el <body> ya trae
   .context-ultron (base.html.twig, EnumContext::ADMIN_ULTRON), así que no hace falta tocar ningún
   template y las vistas rq-* que Ultron sume después quedan alineadas solas. Mantener este valor
   en sincronía con .body-grey. */
.context-ultron {
    --rq-page-bg: #f3f4f6;
}

/* ============================================================
   LISTING PAGES — rq-page
   ============================================================ */

/* ----- Page Wrapper ----- */
.rq-page {
    background: var(--rq-page-bg);
    min-height: 100vh;
    padding: var(--rq-page-padding-y) 0;
}

/* En admin el sidebar se come 250px, así que el max-width del `.container` no llega a
   activarse y su padding de 12px es todo el aire lateral que queda: el contenido termina
   pegado al sidebar y al borde derecho. En candidato y empresa el layout ya da ese
   margen, por eso va scopeado al contexto de admin y no al componente. */
.rq-admin-shell :is(.rq-page, .rq-detail) > .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ----- Page Header ----- */
.rq-page__header {
    padding: 0 0 var(--rq-section-gap);
    margin-bottom: var(--rq-section-gap);
}

.rq-page__title {
    font-size: var(--rq-title-size);
    font-weight: var(--rq-title-weight);
    color: #191919;
    margin: 0 0 0.5rem;
}

.rq-page__description {
    color: #475569;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    max-width: 900px;
}

.rq-page__description p {
    margin: 0 0 0.75rem;
}

.rq-page__description p:last-child {
    margin-bottom: 0;
}

/* Header with title + action buttons (e.g. "Buscar contactos", "Volver") */
.rq-page__header--with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ----- Filters (select-based) ----- */
.rq-page__filters {
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
    padding: 1rem 1.25rem;
    margin-bottom: var(--rq-section-gap);
}

.rq-filters-form {
    margin: 0;
}

.rq-filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.rq-filter-group {
    flex: 1;
    min-width: 180px;
}

/* El botón se alinea con el TOPE DEL INPUT de sus grupos hermanos, que llevan label arriba.
   Ni centrado ni al final: centrado queda flotando a media altura, y al final se despega
   apenas un hermano crece hacia abajo (un `.invalid-feedback` de validación mueve el botón
   20px). El tope del input es la única referencia que no se mueve, y se alcanza corriendo
   el grupo la altura del bloque de label. */
.rq-filter-group--action {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: var(--rq-filter-label-offset);
}

/* ...pero ese offset solo tiene sentido si la label ocupa alto. Con `.visually-hidden`
   el bloque mide 0 (position:absolute + clip) y el boton quedaba 30px mas abajo que los
   campos. En ese caso se cae al centrado normal de la grilla. Se usa :has() y no
   align-self:flex-end para no reintroducir el problema que documenta la regla de arriba:
   un `.invalid-feedback` creciendo hacia abajo volveria a mover el boton. */
.rq-filters-grid:has(> .rq-filter-group > label.visually-hidden) .rq-filter-group--action {
    align-self: center;
    margin-top: 0;
}

/* Bootstrap le mete a `.is-invalid` un ícono de fondo y padding a la derecha. Sobre un
   `.rq-filter-input` el borde ya viene neutralizado por la regla del sistema, así que el
   ícono quedaba flotando sobre el texto sin borde rojo que lo acompañe: se saca entero,
   igual que en el selectize. El error se comunica por el mensaje de abajo. */
.rq-filter-input.is-invalid,
input.rq-filter-input.is-invalid {
    background-image: none !important;
    padding-right: 1rem !important;
}

/* Misma altura que .rq-filter-input: un botón más bajo al lado de un campo se lee como
   un error de maquetado. */
.rq-filter-btn {
    padding: 0.625rem 1.25rem;
    line-height: 1.4;
    border-radius: var(--rq-input-radius);
}

.rq-filter-select,
.rq-filter-input,
input.rq-filter-input,
select.rq-filter-select {
    width: 100% !important;
    padding: 0.625rem 1rem !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: var(--rq-input-radius) !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    color: #333;
    background-color: #fff;
    height: auto !important;
    min-height: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Native <select> with rq-filter-select gets a consistent dropdown caret */
select.rq-filter-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.rq-filter-select:focus,
.rq-filter-input:focus {
    outline: 2px solid #0a66c2;
    outline-offset: 2px;
    border-color: #0a66c2;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.15);
}

/* When Selectize.js enhances a select, strip the duplicate border from its
   wrapper (.selectize-control) — the inner .selectize-input has its own.
   Uses !important to override the generic rq-filter-select rule above. */
.rq-filter-select.selectize-control {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    height: auto !important;
    box-shadow: none !important;
}

.rq-filter-select.selectize-control .selectize-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1.5px solid #e0e0e0;
    border-radius: var(--rq-input-radius);
    font-size: 0.9rem !important;
    /* Mismo line-height que .rq-filter-input: sin esto el selectize queda 2px más alto
       y un select junto a un input de texto se ve desalineado. */
    line-height: 1.4;
    color: #333;
    background: #fff;
    box-shadow: none;
}

.rq-filter-select.selectize-control .selectize-input.focus,
.rq-filter-select.selectize-control .selectize-input.input-active {
    border-color: #0a66c2;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.15);
    outline: none;
}

/* Selectize agrega `.invalid` apenas un campo required está vacío, y main.css lo pinta
   de rojo con ícono de error platform-wide. En un alta eso hace que el formulario nazca
   marcado como erróneo antes de que nadie haya intentado guardar. Acá se neutraliza sólo
   para los controles del sistema: estos forms van con `novalidate` y la validación real
   la hace el servidor, que responde por flash. `!important` porque la regla de main.css
   encadena cinco clases. */
.rq-filter-select.selectize-control .selectize-input.invalid {
    border-color: #e0e0e0 !important;
    background-image: none !important;
    padding-right: 1rem !important;
}

/* ----- Filters (pill-based) ----- */
.rq-page__pills {
    margin-bottom: var(--rq-section-gap);
}

.rq-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.rq-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid;
    transition: all 0.2s ease;
}

.rq-pill:hover {
    text-decoration: none;
    opacity: 0.85;
}

.rq-pill:focus-visible {
    outline: 2px solid #0a66c2;
    outline-offset: 2px;
}

.rq-pill--active {
    color: #fff;
}

/* ----- Grid ----- */
.rq-page__grid {
    display: grid;
    gap: 1.5rem;
}

.rq-page__grid--2 {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.rq-page__grid--3 {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.rq-page__grid--4 {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ----- Pagination ----- */
.rq-page__pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

/* ----- Empty State ----- */
.rq-page__empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
    margin-bottom: 2rem;
}

.rq-page__empty i,
.rq-page__empty .fas,
.rq-page__empty .far {
    font-size: 3rem;
    opacity: 0.4;
    margin-bottom: 1rem;
    display: block;
}

/* El ícono de la acción del estado vacío va en línea con su texto, no como el ícono grande */
.rq-page__empty .btn i,
.rq-page__empty .btn .fas,
.rq-page__empty .btn .far {
    font-size: inherit;
    opacity: 1;
    margin-bottom: 0;
    display: inline;
}

.rq-sgi .rq-page__empty h2,
.rq-page__empty h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.5rem;
}

.rq-page__empty p {
    font-size: 0.9rem;
    color: #999;
    max-width: 400px;
    margin: 0 auto;
}

/* ----- Sub-sections ----- */
.rq-section {
    margin-bottom: 2rem;
}

.rq-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.rq-section__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #191919;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rq-section__link {
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.rq-section__link:hover {
    text-decoration: underline;
}

/* ----- Responsive (listing pages) ----- */
@media (max-width: 767.98px) {
    .rq-page {
        padding: 1.5rem 0;
    }

    .rq-page__title {
        font-size: 1.5rem;
    }

    .rq-filter-group {
        min-width: 100%;
    }

    .rq-page__grid--2,
    .rq-page__grid--3,
    .rq-page__grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .rq-page__grid--4 {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ============================================================
   CARDS — rq-card
   ============================================================ */

/* ----- Card Base ----- */
.rq-card {
    position: relative;
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Whole-card click target: the primary link's ::after covers the card
   so the entire card behaves like a button (the hover already implies it). */
.rq-card .stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rq-card:hover {
    box-shadow: var(--rq-card-shadow-hover);
    transform: translateY(-2px);
}

.rq-card__image {
    position: relative;
    overflow: hidden;
}

.rq-card__body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rq-card__title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: #191919;
}

.rq-card__title a,
.rq-card__title button {
    color: inherit;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-align: inherit;
}

.rq-card__title a:hover,
.rq-card__title button:hover {
    color: #0a66c2;
    text-decoration: none;
}

.rq-card__title a:focus-visible,
.rq-card__title button:focus-visible {
    outline: 2px solid #0a66c2;
    outline-offset: 2px;
    border-radius: 2px;
}

.rq-card__meta {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.6;
}

.rq-card__meta > div {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.rq-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.rq-card__actions {
    margin-top: auto;
    padding-top: 0.75rem;
}

/* ----- Badge (standalone component) ----- */
.rq-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.rq-badge--overlay {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    color: #fff;
    z-index: 1;
}

/* Neutral chip/tag inside a card or section body.
   Kept neutral (not portal-tinted) so text contrast holds on every portal color
   — a portal-color text on a same-color tint is unreadable on light/yellow portals. */
.rq-badge--inline {
    background: #f1f3f5;
    color: #334155;
    border: 1px solid #e5e8eb;
}

/* Estados semánticos del chip inline. Existen porque las utilidades de Bootstrap
   (`bg-success`, `bg-warning`, …) solo pintan `background-color !important` y dejan el
   `color: #334155` de `--inline` intacto: slate oscuro sobre verde #198754 da ~2.5:1, por
   debajo del mínimo AA. Acá el texto es del MISMO tono que el fondo, dos pasos más oscuro,
   así el contraste queda ≥4.5:1 sin gritar. Van después de `--inline` a propósito: misma
   especificidad, gana el orden. La paleta ok/warn/muted vive en los tokens --rq-badge-* (bloque :root de la sección
   ADMIN). */
.rq-badge--ok {
    background: var(--rq-badge-ok-bg);
    color: var(--rq-badge-ok-ink);
    border-color: var(--rq-badge-ok-line);
}

.rq-badge--warn {
    background: var(--rq-badge-warn-bg);
    color: var(--rq-badge-warn-ink);
    border-color: var(--rq-badge-warn-line);
}

.rq-badge--danger {
    background: #fee2e2;
    color: #7f1d1d;
    border-color: #fecaca;
}

.rq-badge--muted {
    background: var(--rq-badge-muted-bg);
    color: var(--rq-badge-muted-ink);
    border-color: var(--rq-badge-muted-line);
}

/* ----- Variant: Featured ----- */
.rq-card--featured .rq-card__image {
    aspect-ratio: 16 / 9;
}

.rq-card--featured .rq-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.rq-card--featured:hover .rq-card__image img {
    transform: scale(1.03);
}

/* Background-image thumbnail (legacy pattern used by events, news, linked news) */
.rq-card__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.rq-card__thumbnail {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: transform 0.3s ease;
}

.rq-card:hover .rq-card__thumbnail {
    transform: scale(1.03);
}

/* Button reset inside card image (used in Benefits) */
.rq-card__image button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.rq-card__image button:focus-visible {
    outline: 2px solid #0a66c2;
    outline-offset: 2px;
}

/* ----- Variant: Compact ----- */
.rq-card__image--contained {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: #f9f9f9;
    height: 140px;
}

.rq-card__image--contained img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ----- Variant: Compact (Beneficios) -----
   Unica vista que usa --compact. Sube la imagen y la tipografia sin tocar
   .rq-card__title, que comparten mas de diez vistas. */
.rq-card--compact .rq-card__image--contained {
    height: 190px;
    padding: 1.25rem;
}

.rq-card--compact .rq-card__title {
    font-size: 1.1rem;
    line-height: 1.35;
}

.rq-card--compact .rq-card__actions .btn {
    font-size: 0.9rem;
}

/* ----- Variant: Horizontal ----- */
.rq-card--horizontal {
    flex-direction: row;
}

.rq-card--horizontal .rq-card__image {
    flex: 0 0 140px;
    aspect-ratio: auto;
}

.rq-card--horizontal .rq-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- Variant: Person ----- */
.rq-card--person .rq-card__body,
.rq-card--person > button {
    text-align: center;
    padding: 1.5rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
}

.rq-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 0.75rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.rq-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rq-card__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

/* ----- Card Overlay (hover effect for clickable images) ----- */
.rq-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #fff;
    font-size: 1.25rem;
}

.rq-card:hover .rq-card__overlay {
    opacity: 1;
}

/* ----- Responsive (cards) ----- */
@media (max-width: 575.98px) {
    .rq-card--horizontal {
        flex-direction: column;
    }

    .rq-card--horizontal .rq-card__image {
        flex: none;
        aspect-ratio: 16 / 9;
    }
}

/* ============================================================
   DETAIL PAGES — rq-detail
   ============================================================ */

/* ----- Detail Wrapper ----- */
.rq-detail {
    background: var(--rq-page-bg);
    min-height: 100vh;
    padding: var(--rq-page-padding-y) 0;
}

/* ----- Breadcrumb ----- */
.rq-detail__breadcrumb {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 1.5rem;
}

.rq-detail__breadcrumb a {
    color: #0a66c2;
    text-decoration: none;
}

.rq-detail__breadcrumb a:hover {
    text-decoration: underline;
}

.rq-detail__breadcrumb-separator {
    margin: 0 0.4rem;
    color: #ccc;
}

/* ----- Detail Layout ----- */
.rq-detail__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}

.rq-detail__layout--full {
    grid-template-columns: 1fr;
}

.rq-detail__main {
    min-width: 0;
}

.rq-detail__sidebar {
    position: sticky;
    top: 1.5rem;
}

/* ----- Detail Card ----- */
.rq-detail__card {
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
    overflow: hidden;
}

.rq-detail__hero {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.rq-detail__header {
    padding: 1.5rem;
}

.rq-detail__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #191919;
    margin: 0 0 0.75rem;
    line-height: 1.3;
}

.rq-detail__subtitle {
    font-size: 1.05rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.rq-detail__meta {
    padding: 0 1.5rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #555;
}

.rq-detail__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.rq-detail__meta-item i {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.rq-detail__content {
    padding: 1.5rem;
    border-top: 1px solid #f0f0f0;
}

.rq-detail__content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ----- Sidebar Cards ----- */
.rq-detail__sidebar-card {
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.rq-detail__sidebar-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #191919;
    margin: 0 0 0.75rem;
}

/* ----- Responsive (detail) ----- */
@media (max-width: 767.98px) {
    .rq-detail__layout {
        grid-template-columns: 1fr;
    }

    .rq-detail__sidebar {
        position: static;
    }

    .rq-detail__meta {
        grid-template-columns: 1fr;
    }

    .rq-detail__title {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Shared modal (#main_modal) — mobile containment
   The global modal injects AJAX content (profile forms, preferences, etc.).
   On phones keep it as a centered, height-capped, scrollable card so it does
   not dominate the whole viewport. Bootstrap defaults are untouched on larger
   screens.
   ========================================================================== */
@media (max-width: 575.98px) {
    #main_modal .modal-dialog {
        display: flex;
        align-items: center;
        min-height: calc(100% - 1rem);
        margin: 0.5rem;
    }

    /* AJAX content is injected inside an extra #pop_up_window wrapper (and often a
       <form>), so the standard header/body/footer flex chain can't reliably make
       only the body scroll. Cap the whole content box and let it scroll as one —
       robust to any inner wrapper and keeps the footer (e.g. "Guardar") reachable. */
    #main_modal .modal-content {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        overflow-y: auto;
    }
}

/* ==========================================================================
   iOS Safari auto-zoom prevention (candidate context only)
   Mobile Safari zooms the viewport whenever a focused field has font-size < 16px,
   which reads as "broken" on iPhone. Force candidate form controls to 16px on
   phones; compact sizing is preserved through existing padding / min-height.
   Scoped to `.context-default` (the candidate area) because content.css is loaded
   globally — this keeps admin/company/alumni contexts untouched.
   ========================================================================== */
@media (max-width: 767.98px) {
    /* !important is required because main.css forces .form-control/.form-select to
       .875rem !important; the added .context-default ancestor also raises specificity. */
    .context-default .form-control,
    .context-default .form-select,
    .context-default textarea.form-control,
    .context-default .selectize-input,
    .context-default .selectize-input input {
        font-size: 16px !important;
    }
}

/* ============================================================
   RQ-DRAWER — modal de formulario como panel lateral derecho.
   Opt-in por clase `rq-drawer` en el .modal raíz (NO por contexto):
   los usos de #main_modal que no la agregan siguen centrados.
   Spec: docs/superpowers/specs/2026-07-13-account-form-modals-drawer-design.md
   Adopción en otros módulos: skill rq-design-system (references/modals.md)
   ============================================================ */
.modal.rq-drawer .modal-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: min(clamp(560px, 46vw, 820px), 100%);
    max-width: none;
    height: 100%;
    display: flex;
}

.modal.rq-drawer.fade .modal-dialog {
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
}

.modal.rq-drawer.show .modal-dialog {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .modal.rq-drawer.fade .modal-dialog {
        transition: none;
    }
}

.modal.rq-drawer .modal-content {
    height: 100%;
    border: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
}

/* ── Chrome (tratamiento visual) vs geometría de panel ───────────────────
   El chrome se declara por CLASE (`rq-drawer__header` / `rq-drawer__footer`, las que ponen los
   partials `Components/_drawer{Header,Footer}.html.twig`) ADEMÁS de por el scope `.modal.rq-drawer`.
   Así el mismo partial se ve igual en un diálogo CENTRADO —confirmaciones, avisos de progreso— sin
   arrastrar la geometría de panel lateral. Es lista de selectores, no reemplazo: el scope se
   conserva porque hay drawers cuyo header/footer NO lleva la clase (viewers que mantienen su footer
   original — ver modals.md §Casos especiales — y `modal-profile-card`, que trae su propio header).
   La geometría (sticky, fixed, alto completo) queda scopeada al drawer y solo al drawer. */
.modal.rq-drawer .modal-header,
.rq-drawer__header {
    /* `relative` ancla el ::after; en el drawer lo pisa el `sticky` de abajo, que también sirve de
       containing block. Sin esto, en un modal centrado la barra se iría al fondo del .modal-content. */
    position: relative;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.75rem;
}

/* Header/footer fijos: sticky es robusto al anidamiento del contenido AJAX
   (#pop_up_window + <form>), a diferencia del chain flex (ver la contención
   mobile de #main_modal más arriba). */
.modal.rq-drawer .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
}

.modal.rq-drawer .modal-header::after,
.rq-drawer__header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--rq-grad, var(--portal-color, #0d6efd));
}

.modal.rq-drawer .modal-footer,
.rq-drawer__footer {
    border-top: 1px solid #f0f0f0;
    padding: 0.75rem 1.25rem;
    flex-wrap: nowrap;
    gap: 0.625rem;
}

.modal.rq-drawer .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #fff;
}

.rq-drawer__chip {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--rq-grad, rgba(var(--portal-color-rgb, 13, 110, 253), 0.1));
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Acento neutro fuera del área candidato (Principio 2 / contexts.md: el color del portal NO pinta
   superficies en admin, Ultron, empresa ni asociados). El chip y la barra del header son lo único
   del drawer que toma `--rq-grad`, así que basta neutralizarlos acá — sin tocar los ~90 templates
   ni el partial.
   Se escribe como `:not(.context-default)` en vez de enumerar contextos porque hay 8 valores
   posibles de `context` (admin_alumni, admin_faire, associates, companies, company, default,
   faire_company, ultron) y `default` es el ÚNICO que es área candidato: enumerar deja agujeros
   (`associates` ya se había quedado afuera). Especificidad (0,2,1) > la regla global (0,1,0). */
body:not(.context-default) .rq-drawer__chip,
body:not(.context-default) .modal.rq-drawer .modal-header::after,
body:not(.context-default) .rq-drawer__header::after {
    background: #64748b;
}

/* Variante ancha: para contenido tabular denso (9+ columnas) que en el ancho estándar del drawer
   obliga a scrollear horizontal en cada fila. Usar con criterio — el default sigue siendo el ancho
   normal. */
.modal.rq-drawer--wide .modal-dialog {
    width: min(clamp(560px, 72vw, 1140px), 100%);
}

/* Ficha de perfil (OpenUserProfile / OpenAnswersProfile, `modal-profile-card` en profile-card.css):
   trae hero + tabs + CV completo, así que el ancho estándar del drawer la deja ilegible. Sin tope
   superior a propósito — a más pantalla, más ficha; el resto de los drawers sí siguen clampeados.
   Va acá y no en profile-card.css porque tiene que ganarle a `.modal.rq-drawer .modal-dialog`
   (0,3,0) y este archivo carga siempre. */
.modal.rq-drawer .modal-dialog.modal-profile-card {
    width: min(max(75vw, 560px), 100%);
}

/* `profile-card.css` fue escrito para el modal centrado y todavía asume esa geometría en dos puntos
   que dentro del drawer se rompen. Se corrige acá (scopeado a `.rq-drawer`) en vez de allá para no
   tocar la variante centrada. */

/* `.pc-root .modal-body` mide `min(925px, 90vh)`; sumado al header sticky (~80px) pasa de 100vh en
   cualquier pantalla de menos de ~800px de alto, y ahí aparecían DOS scrollbars anidados y el header
   se iba scrolleando. En el drawer manda el scroll de `.modal-content`, como en todos los demás. */
.modal.rq-drawer .modal-profile-card .pc-root .modal-body {
    height: auto;
    overflow: visible;
}

/* El `filter: invert(1)` de la ✕ estaba pensado para flotar sobre el hero oscuro. Ahora vive en el
   header blanco del drawer, así que invertía el `#f5f5f5` del botón y quedaba una ✕ blanca sobre
   círculo negro — al revés que en el resto de los drawers. */
.modal.rq-drawer .modal-profile-card .pc-root .modal-header .btn-close {
    filter: none;
}

/* Variante persona: avatar redondo en el header (en vez del chip de ícono).
   Neutro (Principio 2: el color del portal solo en botones/detalles, no acá). */
.rq-drawer__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e7ebf0 center/cover no-repeat;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
}

.rq-drawer__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Nota en el footer del drawer para estados sin acción (ej. "no puede recibir
   más solicitudes"): mismo slot flex que el CTA, tratamiento muted centrado. */
.modal.rq-drawer .modal-footer .rq-drawer__footer-note,
.rq-drawer__footer .rq-drawer__footer-note {
    flex: 2;
    align-self: center;
    text-align: center;
    color: #666;
    font-size: 0.85rem;
}

/* Foto de contenido dentro del drawer (ej. detalle de misc): neutra, reutilizable. */
.rq-drawer__photo {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
}
.rq-drawer__photo--circle {
    border-radius: 50%;
}

/* Aviso de apertura del drawer: cuando el panel existe para explicar una situación antes de pedir
   datos (ej. la empresa ya estaba registrada), este bloque reemplaza al `form-text` suelto. Acento
   neutro a propósito — el drawer vive en área empresa, donde el color del portal no pinta
   superficies (Principio 2). */
.rq-drawer__notice {
    background: linear-gradient(180deg, #f8fafc 0%, #f4f7fa 100%);
    border: 1px solid #e3e9ef;
    border-radius: var(--rq-card-radius, 12px);
    padding: 1.25rem 1.375rem;
    margin-bottom: 1.25rem;
}

.rq-drawer__notice p {
    margin: 0 0 0.625rem;
    font-size: 0.975rem;
    line-height: 1.6;
    color: #475569;
}

.rq-drawer__notice p:last-child {
    margin-bottom: 0;
}

.rq-drawer__notice p.rq-drawer__notice-lead {
    font-size: 1.075rem;
    color: #334155;
}

.rq-drawer__notice p.rq-drawer__notice-strong {
    font-weight: 600;
    color: #334155;
}

.rq-drawer__notice p.rq-drawer__notice-outro {
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e3e9ef;
    font-weight: 600;
    color: #334155;
}

.rq-drawer__heading {
    flex: 1;
    min-width: 0;
}

.rq-drawer__heading .modal-title {
    color: #191919;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}

.rq-drawer__subtitle {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    margin: 0.125rem 0 0;
}

.modal.rq-drawer .modal-header .btn-close,
.rq-drawer__header .btn-close {
    box-sizing: border-box;
    background-color: #f5f5f5;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0.5rem;
    margin: 0;
    transition: background-color 0.2s ease;
}

.modal.rq-drawer .modal-header .btn-close:hover,
.rq-drawer__header .btn-close:hover {
    background-color: #e0e0e0;
}

.modal.rq-drawer .modal-footer .btn-cancel,
.rq-drawer__footer .btn-cancel {
    flex: 1;
    background: #fff;
    border: 1px solid #d9d9d9;
    color: #475569;
}

.modal.rq-drawer .modal-footer .btn-primary,
.rq-drawer__footer .btn-primary,
.modal.rq-drawer .modal-footer .btn-dark,
.rq-drawer__footer .btn-dark,
.modal.rq-drawer .modal-footer .btn-danger,
.rq-drawer__footer .btn-danger {
    flex: 2;
}

.modal.rq-drawer .form-control,
.modal.rq-drawer .form-select {
    border-radius: var(--rq-input-radius);
}

/* Cascadas de 3 columnas (país/región/comuna) quedan ilegibles a 520px: apilar */
.modal.rq-drawer .modal-body .col-sm-4 {
    flex: 0 0 100%;
    max-width: 100%;
}

.modal.rq-drawer #loading_main_modal {
    color: var(--portal-color, #0d6efd);
}

.rq-drawer__saving {
    pointer-events: none;
    opacity: 0.75;
}

/* Mobile: sheet a pantalla completa. Los selectores con #main_modal ganan en
   especificidad a la contención mobile genérica de #main_modal definida arriba. */
@media (max-width: 575.98px) {
    #main_modal.rq-drawer .modal-dialog,
    .modal.rq-drawer .modal-dialog,
    .modal.rq-drawer .modal-dialog.modal-profile-card {
        width: 100%;
        min-height: 100%;
        margin: 0;
        align-items: stretch;
    }

    #main_modal.rq-drawer .modal-content,
    .modal.rq-drawer .modal-content {
        border-radius: 0;
        max-height: none;
        height: 100%;
    }

    /* Touch targets >=44px en teléfonos (WCAG 2.5.5 / 2.5.8): el cierre y las
       acciones del footer son btn-sm (~32px) y quedan chicos para el dedo.
       btn-close usa box-sizing:content-box (Bootstrap) → forzar border-box para
       que 44px sea el total y no 44+padding. */
    .modal.rq-drawer .modal-header .btn-close,
    .rq-drawer__header .btn-close {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
    }

    .modal.rq-drawer .modal-footer .btn,
    .rq-drawer__footer .btn {
        min-height: 44px;
    }
}

/* ── Scoped neutralization of global portal-color pagination ──────────────
   Global rule lives in CoreBundle/Resources/views/Styles/portal.css.twig:238:
     `.active>.page-link, .page-link.active { background/border: portal.color !important; color:#fff }`
   and loads on EVERY page. content.css also loads on every context, so this one
   block neutralizes the active page-link for BOTH the default context (the whole
   candidate/public site — all paginated student pages, not only job views) and the
   company context (^/(myCompany|portal)). Scope is intentionally platform-wide:
   the active-state accent is a non-CTA element and reads cleaner as neutral.
   KNP markup is `li.page-item.active > span.page-link`, so `.active>.page-link`
   is the half that matches; `.page-link.active` mirrors the global rule.
   The `.context-*` prefix raises specificity (0,3,0) above the global rule (0,2,0);
   both carry !important so specificity decides the winner. */
.context-default .active > .page-link,
.context-default .page-link.active,
.context-companies .active > .page-link,
.context-companies .page-link.active {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #fff !important;
}

/* ==========================================================================
   Ficha de usuario cross-portal (Ultron)
   El cuerpo pc-* se reutiliza tal cual; lo único que no viaja del modal a la
   página completa es la geometría de scroll, escrita contra el markup del modal.
   ========================================================================== */

/* En página completa el scroll lo lleva la página: sin .modal-body no aplica la altura fija de
   profile-card.css, y el fondo lo pone el shell rq-detail.
   Selector de dos clases y no `.pc-root--page` a secas: `.pc-root { background: var(--pc-page-bg) }`
   (profile-card.css:78) tiene la misma especificidad y ese archivo carga DESPUÉS de content.css
   (base.html.twig:170 vs :142), así que un selector de una clase pierde. Vale para todo lo de este
   bloque que pise una propiedad ya escrita en profile-card.css. Sin !important: solo especificidad.

   `container-type: inline-size` es la única decisión arquitectural del bloque: todas las reglas de
   reflow de la ficha son de viewport, pero lo que se estrecha en Ultron es el CONTENEDOR — el 1fr
   del grid 1fr/320px, menos los 250px fijos del sidebar de admin. A 1440px de viewport quedan ~820px
   útiles y ninguna media query dispara: de ahí todo el "apretado". Acotado a .pc-root--page para que
   el render del drawer del lado portal/empresa no se entere. */
.pc-root.pc-root--page {
    background: transparent;
    container-type: inline-size;
    container-name: pcprofile;
    /* El gap hero↔panel lo aportaba .pc-scroll (display:flex; gap:16px), que bajo isUltron no se
       renderiza: sin esto el hero y el panel quedan pegados. */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* .pc-panel { margin: 0 24px } contra un hero a sangre completa desalineaba 24px por lado. */
.pc-root.pc-root--page .pc-panel {
    margin: 0;
}

.pc-root--page .pc-hero {
    border-radius: var(--pc-r-lg);
    overflow: hidden;
}

/* Los mismos saltos que las media queries de profile-card.css, disparados por el ancho del
   contenedor. Se mantienen los de viewport: cuando la ventana es angosta el contenedor también lo
   es, así que coinciden. */
@container pcprofile (max-width: 991px) {
    .pc-root--page .pc-hero-kpis {
        display: none;
    }

    .pc-root--page .pc-hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .pc-root--page .pc-hero-actions > .pc-btn {
        justify-content: center;
        flex: 1 1 auto;
        min-width: 140px;
    }

    /* profile-card.css pone 2 columnas desde min-width: 992px de VIEWPORT: con la ventana ancha y
       el contenedor angosto quedaban dos columnas de ~400px dentro de la ficha. */
    .pc-root--page .pc-profile-grid {
        column-count: 1;
    }
}

@container pcprofile (max-width: 768px) {
    .pc-root--page .pc-hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 22px 20px 30px;
        gap: 16px;
    }

    .pc-root--page .pc-hero-avatar {
        margin: 0 auto;
    }

    .pc-root--page .pc-hero-name {
        white-space: normal;
    }

    .pc-root--page .pc-hero-meta,
    .pc-root--page .pc-hero-tags,
    .pc-root--page .pc-hero-profiles {
        justify-content: center;
    }

    .pc-root--page .pc-hero-right {
        min-width: 0;
        width: 100%;
    }
}

/* El color del portal ayuda a reconocerlo cuando se operan decenas, pero nunca es
   el único canal: el nombre siempre acompaña al punto. */
.rq-portal-map__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Chip de portal de las filas agregadas ("Todos los portales"): mismo lenguaje del dot del
   sidebar, en tamaño de metadato. Inline-flex para convivir con texto y celdas de tabla. */
.rq-portal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.1rem 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f9fafb;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: #374151;
    white-space: nowrap;
    vertical-align: middle;
}

.rq-portal-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Filas legacy sin portal: el chip existe igual (el dato importa) pero en tono atenuado. */
.rq-portal-chip--none {
    color: #9ca3af;
    font-style: italic;
    font-weight: 500;
}

/* Scroller de barras de pestañas (fichas 360, usuario y empresa). La nav interior ya scrollea
   con overflow-x y la scrollbar oculta: este wrapper le superpone una flecha con fade SOLO del
   lado recortado (initTabScroller en main.js gobierna .is-visible). Las flechas van por dentro
   porque los contenedores de ambas fichas recortan con overflow: hidden; se detienen 1px antes
   del borde inferior para no tapar la línea base de la barra. */
.rq-tabscroll {
    --rq-tabscroll-bg: #fff;
    position: relative;
    min-width: 0;
}

.rq-tabscroll__arrow {
    position: absolute;
    top: 0;
    bottom: 1px;
    z-index: 2;
    display: none;
    align-items: center;
    width: 44px;
    padding: 0;
    border: none;
    color: #6b7280;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.15s;
}

.rq-tabscroll__arrow.is-visible {
    display: flex;
}

.rq-tabscroll__arrow:hover,
.rq-tabscroll__arrow:active {
    color: #111827;
}

.rq-tabscroll__arrow--prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 10px;
    background: linear-gradient(to right, var(--rq-tabscroll-bg) 45%, transparent);
}

.rq-tabscroll__arrow--next {
    right: 0;
    justify-content: flex-end;
    padding-right: 10px;
    background: linear-gradient(to left, var(--rq-tabscroll-bg) 45%, transparent);
}

.pc-tab-fallback {
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--pc-r-sm);
    background: #fef9e7;
    border: 1px solid #f6e2a8;
    color: #6b5313;
    font-size: 0.82rem;
}

/* ----- Mapa de portales (sidebar): selector de contexto + acceso por portal ----- */
/* El 0.4rem de antes lo pegaba al título que venía debajo. Sin ese título, el link es lo único que
   separa el encabezado del primer módulo, así que toma el gap de sección del sistema. */
.rq-user-profile__back {
    display: inline-block;
    margin-bottom: var(--rq-section-gap);
    font-size: 0.82rem;
    color: #4b5563;
    text-decoration: none;
}

.rq-user-profile__back:hover,
.rq-user-profile__back:focus-visible {
    text-decoration: underline;
}

/* La tarjeta blanca (fondo, radio, sombra, padding) la pone .rq-detail__sidebar-card: acá solo
   va lo propio del mapa. */
.rq-portal-map {
    display: flex;
    flex-direction: column;
    /* El tope se ata al viewport y no a la altura de la columna principal: el <aside> es
       sticky (top: 1.5rem), así que con 100vh - 3rem el mapa nunca pasa de una pantalla y
       acompaña el scroll. Atarlo al alto del main obligaría a medirlo por JS y re-medirlo
       en cada resize y en cada cambio de pestaña. */
    max-height: calc(100vh - 3rem);
}

.rq-portal-map__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.rq-portal-map__count {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
}

/* Título, ayuda y buscador quedan FUERA del área de scroll: son la cabecera fija del
   selector y deben seguir visibles con 122 portales debajo. */
.rq-portal-map__hint {
    margin: 0 0 0.6rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: #6b7280;
}

.rq-portal-map__filter {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.32rem 0.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #111827;
}

.rq-portal-map__filter:focus {
    outline: 2px solid #94a3b8;
    outline-offset: 1px;
    border-color: #94a3b8;
}

.rq-portal-map__list {
    overflow-y: auto;
    /* Sin min-height: 0 el ítem flex toma la altura de su contenido y la tarjeta se pasa
       del tope en vez de scrollear. */
    min-height: 0;
}

.rq-portal-map__row {
    position: relative;
    padding: 0.7rem 0.6rem;
    border-top: 1px solid #eef0f4;
    border-radius: 8px;
}

.rq-portal-map__row:first-of-type {
    border-top: 0;
}

.rq-portal-map__row.is-pickable:hover {
    background: #f8fafc;
    cursor: pointer;
}

.rq-portal-map__row.is-selected {
    /* Sin franja lateral de color: el fondo tintado, el peso del nombre y el marcador
       "Viendo" ya distinguen la fila, y una franja acoplada al padding del contenedor
       generaría scroll horizontal dentro del área con overflow. */
    background: #f1f5f9;
    border-top-color: transparent;
}

.rq-portal-map__row.is-selected + .rq-portal-map__row {
    border-top-color: transparent;
}

.rq-portal-map__row.is-selected .rq-portal-map__name {
    font-weight: 700;
}

/* Fila "Todos los portales": la vista inicial estándar de la ficha. Vive fija arriba de la
   lista, separada del resto por un borde más marcado, y usa un icono en vez del dot de color
   porque no representa a UN portal. */
.rq-portal-map__row--all {
    border-top: 0;
    border-bottom: 2px solid #e5e7eb;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0.25rem;
}

.rq-portal-map__row--all + .rq-portal-map__row {
    border-top: 0;
}

.rq-portal-map__row--all .rq-portal-map__pick {
    font-weight: 600;
}

.rq-portal-map__all-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    flex: 0 0 10px;
    font-size: 0.7rem;
    color: #6b7280;
}

/* El nombre es el link (y con .stretched-link, toda la fila es su área de click). Que el
   subrayado quede solo acá y no sobre badges y metadatos es deliberado: admin.css fuerza
   `text-decoration: underline !important` en todo <a> del admin, así que un <a> envolviendo
   la fila entera subrayaría también lo que no es control. */
.rq-portal-map__pick {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
}

.rq-portal-map__name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
}

.rq-portal-map__row-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.rq-portal-map__viewing {
    margin-left: auto;
    flex: none;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}

.rq-portal-map__chevron {
    margin-left: auto;
    flex: none;
    font-size: 0.7rem;
    color: #cbd5e1;
}

.rq-portal-map__institution,
.rq-portal-map__meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    color: #6b7280;
}

.rq-portal-map__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.rq-portal-map__badges .rq-badge {
    padding: 0.1rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 500;
}

/* Botón real (.btn del sistema) y no un link: además de ser la acción primaria de la fila,
   los :not([class*="btn"]) de admin.css lo dejan fuera del repintado neutro de links.
   z-index lo pone por encima del .stretched-link del nombre. */
.rq-portal-map__enter {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    margin-top: 0.5rem;
}

.rq-portal-map__enter.is-disabled {
    justify-content: flex-start;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #9ca3af;
    text-align: left;
    cursor: not-allowed;
}

.rq-portal-map__empty,
.rq-portal-map__no-results {
    font-size: 0.84rem;
    color: #6b7280;
}

.rq-portal-map__no-results {
    padding: 0.9rem 0.2rem;
}

/* Vista previa en drawer: hechos globales que alcanzan para reconocer a la persona. */
.rq-preview-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem 1.2rem;
    margin: 0 0 1.2rem;
}

.rq-preview-facts dt {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.rq-preview-facts dd {
    margin: 0.1rem 0 0;
    font-size: 0.88rem;
    color: #111827;
    overflow-wrap: anywhere;
}

/* En el drawer de acceso la identidad es contexto y no contenido: alcanza una línea de
   metadatos para confirmar que es la persona buscada, y el espacio queda para los portales. */
.rq-preview-facts--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.2rem;
    margin-bottom: 0.4rem;
}

.rq-preview-facts--inline > div {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.rq-preview-facts--inline dd {
    margin-top: 0;
}

/* Acciones de cuenta de la ficha: globales (viven en Auth), con la destructiva separada. */
/* Sin fallback de token: --rq-card-radius / --rq-card-shadow viven en :root de este mismo archivo,
   así que el `10px` de reserva solo servía para desalinearse del 12px real cuando alguien lo leía. */
.rq-account-actions {
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.rq-account-actions__title {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.rq-account-actions__group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.rq-account-actions__group--danger {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid #eef0f4;
}

.rq-account-actions__note {
    font-size: 0.78rem;
    color: #9ca3af;
}

/* Créditos de la empresa: son globales, no del portal seleccionado, así que viven en el bloque de
   cuenta y no en una pestaña. Dos tarjetas del mismo peso — ninguna es la principal. */
.rq-company-credits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
    margin-top: 0.7rem;
}

.rq-company-credits__card {
    border: 1px solid #eef0f4;
    border-radius: 8px;
    padding: 0.7rem 0.8rem;
}

.rq-company-credits__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.rq-company-credits__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
}

.rq-company-credits__grant {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.4rem;
}

.rq-company-credits__grant .form-select {
    width: auto;
    min-width: 72px;
}

/* Portales donde la empresa NO está: información, no navegación — entrar a uno de ellos la daría
   de alta ahí. Va plegado para que no compita con los portales reales. */
.rq-portal-map__others {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid #eef0f4;
}

.rq-portal-map__others summary {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
}

/* Listado de portales del drawer de acceso: una fila por portal, alto pero escaneable. */
.rq-impersonate-portals__title {
    margin: 0.9rem 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.rq-impersonate-portals {
    max-height: 50vh;
    overflow-y: auto;
}

.rq-impersonate-portals__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.2rem;
    font-size: 0.88rem;
    border-bottom: 1px solid #f3f4f6;
}

/* Variante con acción a la derecha (ficha de usuario). El row del lado empresa es un <a> que
   ocupa la fila entera; acá la fila es un contenedor y "Entrar" es la única acción, así que se
   separa en un modificador en vez de ensanchar la regla compartida. */
.rq-impersonate-portals__row--with-action {
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.5rem 0.2rem;
}

.rq-impersonate-portals__info {
    min-width: 0;
}

.rq-impersonate-portals__enter {
    flex: none;
}

.rq-impersonate-portals__blocked {
    flex: 0 1 55%;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #9ca3af;
    text-align: right;
}

/* Cada uno abre la ficha en ese portal, así que son links. El color va con !important porque la
   regla neutra de admin.css repinta todo <a> del back-office y acá el tono tiene que seguir siendo
   el secundario de la lista: son ~130 filas de apoyo, no la acción principal del sidebar. */
.rq-portal-map__other {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #4b5563 !important;
    padding: 0.15rem 0;
    border-radius: 6px;
    text-decoration-line: none !important;
}

.rq-portal-map__other:hover {
    background: #f8fafc;
    color: #111827 !important;
    text-decoration-line: underline !important;
}

.rq-portal-map__other.is-selected {
    padding: 0.15rem 0.35rem;
    background: #f1f5f9;
    color: #111827 !important;
    font-weight: 600;
}

/* ── rq-page__panel — superficie blanca para contenido tabular de un listado ──
   El sistema tenía grilla de tarjetas pero ninguna superficie para una tabla, y
   los listados de administración son tablas (grupos, miembros, restricciones).
   Es la misma superficie de `.rq-page__filters` / `.rq-page__empty` (fondo, radio,
   sombra) sin su padding, para que la tabla llegue al borde de la card.
   Agnóstico al contexto, igual que el resto de los componentes rq-*. */
.rq-page__panel {
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
    overflow: hidden;
    margin-bottom: var(--rq-section-gap);
}

.rq-page__panel > .table-responsive {
    margin: 0;
}

.rq-page__panel .table {
    margin: 0;
}

.rq-page__panel .table > thead > tr > th {
    background: #f5f5f5;
    border-bottom: 1px solid #f0f0f0;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.rq-page__panel .table > tbody > tr > td {
    border-bottom: 1px solid #f0f0f0;
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.rq-page__panel .table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* Bloque de ayuda dentro de un panel o un detalle: texto secundario sobre fondo suave. */
.rq-page__note {
    background: #f4f2ee;
    border-radius: var(--rq-input-radius);
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 0.75rem 1rem;
    margin-bottom: var(--rq-section-gap);
}

.rq-page__note p:last-child,
.rq-page__note ul:last-child {
    margin-bottom: 0;
}

/* ── rq-badge--inline ──────────────────────────────────────────────────────
   Estaba en el catálogo del design system ("fondo tintado dentro del body")
   pero nunca se había implementado: sin estas reglas `.rq-badge` sale como
   texto en negrita sin pastilla. Tinte neutro a propósito (Principio 2: el
   color del portal sólo en CTAs y detalles), así sirve igual en candidato,
   empresa y admin. Se usa para chips de estado y de criterio. */
.rq-badge--inline {
    background: #f0f0f0;
    color: #475569;
    border: 1px solid #e6e6e6;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

/* ── rq-eval: página pública de respuesta de evaluaciones (contrataciones) ──
   Wrapper opt-in sobre el motor compartido de formularios (Form.html.twig +
   formQuestion.html.twig): estiliza el markup heredado SOLO dentro de .rq-eval;
   los demás módulos que usan el motor (contacto, DISC, LMS, procesos) no se tocan.
   Los !important de padding/margin contrarrestan el <style> inline de
   _answerAssets.html.twig (`.form-question-answer{padding:10px !important; ...}`),
   que se conserva porque también lo usa JobOfferEvaluationForm (legacy); gana
   esta hoja por especificidad (0,2,0+ vs 0,1,0).
   Las preguntas REALES llegan con la clase `question-border` (formQuestion.html.twig
   la emite solo cuando type.isQuestion y no-modal): títulos y párrafos del
   formulario no se numeran ni se indentan. */
.rq-eval {
    max-width: 760px;
    margin: 32px auto 64px;
    padding: 0 16px;
    overflow-wrap: break-word;
}

.rq-eval__header {
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
    padding: 28px 32px 24px;
    margin-bottom: 12px;
}

/* Acento del portal como guión corto, no border-top: un borde superior
   seguiría el radio de las esquinas y dibuja un arco deforme. */
.rq-eval__header::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--portal-color);
    margin-bottom: 14px;
}

.rq-eval__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #666;
    margin: 0 0 10px;
}

.rq-eval__who {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rq-eval__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--portal-color);
}

.rq-eval__title {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #191919;
    margin: 0;
}

.rq-eval__context {
    font-size: 15px;
    color: #475569;
    margin: 10px 0 0;
}

.rq-eval__meta {
    font-size: 12.5px;
    color: #666;
    margin: 4px 0 0;
}

/* Instrucciones del formulario (form.message), dentro del header. */
.rq-eval__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: #475569;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}

/* El form llega como .col-sm-12 y las preguntas dentro de un .row de Bootstrap:
   el padding del col (12px) y los márgenes negativos del row (-12px) descuadran
   las tarjetas respecto del header. Neutralizar ambos dentro del scope. */
.rq-eval form#reqlutForm {
    padding-left: 0;
    padding-right: 0;
    counter-reset: rq-eval-q;
}

.rq-eval form#reqlutForm > .row {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

/* Cada elemento del formulario = tarjeta. */
.rq-eval .form-question-answer {
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
    padding: 20px 32px 24px !important;
    margin: 0 0 12px !important;
}

/* Solo las preguntas reales se numeran e indentan. El contador CSS cuenta las
   visibles: display:none (condicionales ocultas) no incrementa counters, así
   la numeración se reacomoda sola cuando aparecen/desaparecen. */
.rq-eval .form-question-answer.question-border {
    position: relative;
    padding-left: 68px !important;
    counter-increment: rq-eval-q;
}

.rq-eval .form-question-answer.question-border::before {
    content: counter(rq-eval-q, decimal-leading-zero);
    position: absolute;
    left: 26px;
    top: 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    /* 4.54:1 sobre blanco — los ::before los anuncian los screen readers, deben ser legibles. */
    color: #767676;
    font-variant-numeric: tabular-nums;
}

/* Label + badge en una fila alineada; wrap por si el motor antepone la
   subdimensión (form.type.hasSubDimensions) como <p> dentro de .question. */
.rq-eval .form-question-answer .question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rq-eval .form-question-answer .question p {
    flex: 1 1 100%;
    margin: 0 0 6px;
}

.rq-eval .form-question-answer .question .form-label {
    font-size: 15px;
    font-weight: 600;
    color: #191919;
    line-height: 1.45;
    margin-bottom: 8px;
    text-align: left;
}

/* form.css indenta .input (para el ícono que `simple` ya no emite) y limita
   anchos por breakpoint: dentro de la tarjeta el control ocupa el ancho útil. */
.rq-eval .form-question-answer .input {
    margin-left: 0;
}

.rq-eval .form-question-answer .form-control,
.rq-eval .form-question-answer .form-select {
    width: 100%;
    max-width: 100%;
    border-radius: var(--rq-input-radius);
}

.rq-eval .form-question-answer textarea.form-control {
    min-height: 96px;
}

/* Chip "requerido": rojo suave semántico en vez del warning amarillo del motor
   (formQuestion.html.twig hardcodea `badge text-bg-warning`). Expuesto también
   como variante del design system para el próximo chip de obligatoriedad. */
.rq-badge--danger,
.rq-eval .form-question-answer .badge.text-bg-warning {
    background: #fef2f2 !important;
    border: 1px solid #fecaca;
    color: #b91c1c !important;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.rq-eval .form-question-answer .checkbox label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    font-size: 14.5px;
    color: #191919;
}

/* Cierre: selector borrador/enviar + botón. */
.rq-eval #saveAndSend {
    max-width: 320px;
}

.rq-eval label[for="saveAndSend"] {
    color: #475569;
}

.rq-eval form#reqlutForm > .d-grid .btn {
    min-height: 44px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--rq-input-radius);
}

@media (max-width: 575.98px) {
    .rq-eval {
        margin-top: 16px;
        padding: 0 10px;
    }

    .rq-eval__header {
        padding-left: 20px;
        padding-right: 20px;
    }

    .rq-eval .form-question-answer {
        padding: 18px 20px 20px !important;
    }

    .rq-eval .form-question-answer.question-border {
        padding-left: 52px !important;
    }

    .rq-eval .form-question-answer.question-border::before {
        left: 18px;
    }

    .rq-eval__title {
        font-size: 21px;
    }
}

/* ============================================================
   RQ-REPORTS — panel lateral de reportes (pregenerados + personalizados).
   Monta el chrome de `rq-drawer` (chip, barra de 3px, ✕ pastilla) sobre un offcanvas de
   Bootstrap: el chrome cuelga de las clases `rq-drawer__header`, no del scope `.modal.rq-drawer`,
   así que el panel puede ser cualquiera. Ver skill rq-design-system, references/modals.md.
   Usado por: Alumni/Reports/offcanvasFileList.html.twig
   ============================================================ */
/* El ancho del offcanvas sale de `--bs-offcanvas-width` (Bootstrap lo aplica en `.offcanvas-end`,
   misma especificidad que una clase suelta): se pisa la variable en vez de la propiedad. */
.offcanvas.rq-reports {
    --bs-offcanvas-width: min(clamp(420px, 32vw, 520px), 100%);
}

/* El partial `_drawerHeader` emite `.modal-header.rq-drawer__header`, no `.offcanvas-header`: se
   re-declara el layout acá para no depender del orden de los archivos ni de reglas de Bootstrap
   pensadas para el otro contenedor. */
.rq-reports .rq-drawer__header {
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.75rem;
}

.rq-reports .offcanvas-body {
    padding: 1.125rem 1.25rem 1.5rem;
}

/* Aviso de alcance: para los reportes cuyo CSV no responde a los mismos filtros que la pantalla
   (hoy solo empresas, que ignora "¿Con publicaciones?"). Sin él los dos totales se leen como un
   error. */
.rq-reports__note {
    margin: 0 0 1.25rem;
    padding: 0.625rem 0.75rem;
    border-left: 2px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 0 6px 6px 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #475569;
}

/* ── Secciones ─────────────────────────────────────────────── */
.rq-reports__section + .rq-reports__section {
    margin-top: 1.75rem;
    padding-top: 1.375rem;
    border-top: 1px solid #f0f0f0;
}

.rq-reports__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rq-reports__section-title {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.rq-reports__count {
    font-size: 0.75rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* Divisor por mes dentro de los pregenerados: es un nivel POR DEBAJO del título de sección, así
   que baja de peso y de contraste en vez de repetir el mismo tratamiento. */
.rq-reports__group-title {
    margin: 0.875rem 0 0.375rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
}

/* ── Filas ─────────────────────────────────────────────────── */
.rq-reports__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rq-reports__item {
    position: relative;
    padding: 0.6875rem 0.5rem 0.6875rem 0.625rem;
    border-radius: 8px;
    transition: background-color 0.15s ease-out;
}

.rq-reports__item + .rq-reports__item {
    box-shadow: 0 -1px 0 #f0f0f0;
}

.rq-reports__item:hover {
    background: #f8fafc;
    box-shadow: none;
}

.rq-reports__item:hover + .rq-reports__item {
    box-shadow: none;
}

.rq-reports__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.625rem;
}

.rq-reports__main {
    min-width: 0;
    flex: 1;
}

/* Dato que distingue una fila de otra (rango de fechas, fecha de generación): es el que se lee
   primero, no el nombre del archivo. */
.rq-reports__primary {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #191919;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.rq-reports__meta {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: #666;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.rq-reports__meta-sep::before {
    content: "·";
    margin-right: 0.375rem;
    color: #cbd5e1;
}

/* El nombre del CSV es ruido (repite portal y tipo en cada fila): se muestra chico, truncado y
   solo como confirmación de qué se está bajando. */
.rq-reports__filename {
    display: block;
    margin-top: 0.1875rem;
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toda la fila del archivo es el destino de descarga: el ancla se estira sobre la fila y las
   acciones que van encima llevan `position: relative` para quedar por arriba. */
.rq-reports__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.rq-reports__link {
    color: inherit;
    text-decoration: none;
}

.rq-reports__item:hover .rq-reports__primary {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rq-reports__size {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    padding-top: 0.125rem;
}

/* ── Estado de un reporte personalizado ────────────────────── */
.rq-reports__status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.rq-reports__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}

.rq-reports__status--processing .rq-reports__dot {
    background: #d97706;
    animation: rq-reports-pulse 1.6s ease-in-out infinite;
}

.rq-reports__status--completed .rq-reports__dot {
    background: #16a34a;
}

.rq-reports__status--failed .rq-reports__dot {
    background: #dc2626;
}

.rq-reports__status--failed {
    color: #b91c1c;
}

@keyframes rq-reports-pulse {
    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rq-reports__status--processing .rq-reports__dot {
        animation: none;
    }
}

.rq-reports__progress {
    margin-top: 0.5rem;
    height: 3px;
    border-radius: 2px;
    background: #eef2f6;
    overflow: hidden;
}

.rq-reports__progress-bar {
    height: 100%;
    border-radius: inherit;
    background: #d97706;
    transition: width 0.3s ease-out;
}

.rq-reports__error {
    margin-top: 0.3125rem;
    font-size: 0.75rem;
    color: #b91c1c;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Acciones por fila ─────────────────────────────────────── */
.rq-reports__actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.rq-reports__action {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.8125rem;
    line-height: 1;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.rq-reports__action:hover,
.rq-reports__action:focus-visible {
    background: #eef2f6;
    color: #334155;
}

.rq-reports__action--danger:hover,
.rq-reports__action--danger:focus-visible {
    background: #fee2e2;
    color: #b91c1c;
}

/* ── Formulario de reporte personalizado ───────────────────── */
.rq-reports__new-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5625rem 0.75rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    transition: border-color 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
}

.rq-reports__new-toggle:hover,
.rq-reports__new-toggle:focus-visible {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #191919;
}

.rq-reports__new-toggle .rq-reports__chevron {
    margin-left: auto;
    color: #94a3b8;
    transition: transform 0.2s ease-out;
}

.rq-reports__new-toggle[aria-expanded="true"] {
    border-style: solid;
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #191919;
}

.rq-reports__new-toggle[aria-expanded="true"] .rq-reports__chevron {
    transform: rotate(180deg);
}

.rq-reports__form {
    margin-top: 0.625rem;
    padding: 1rem;
    border: 1px solid #e6ebf0;
    border-radius: var(--rq-card-radius, 12px);
    background: #fbfcfd;
}

.rq-reports__form .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.25rem;
}

.rq-reports__form .form-control,
.rq-reports__form .form-select {
    border-radius: var(--rq-input-radius, 8px);
    border-color: #dfe5ec;
    font-size: 0.875rem;
}

.rq-reports__form-hint {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.45;
}

/* ── Estados vacíos / carga ────────────────────────────────── */
.rq-reports__empty {
    padding: 1rem 0.625rem;
    font-size: 0.8125rem;
    color: #94a3b8;
    line-height: 1.5;
}

.rq-reports__empty strong {
    display: block;
    color: #475569;
    font-weight: 600;
    margin-bottom: 0.125rem;
}

@media (max-width: 575.98px) {
    .offcanvas.rq-reports {
        --bs-offcanvas-width: 100%;
    }
}/* ==========================================================================
   PANEL TABULAR (rq-page__panel)
   Cabecera y cuerpo de un panel con tabla. Lo usan las pantallas de audiencia y
   restricciones; el panel de uso de Buscar Talentos migró a `talents-report`.
   ========================================================================== */
.rq-page__panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 18px 13px;
    border-bottom: 1px solid #ececea;
}

.rq-page__panel-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #191919;
}

.rq-page__panel-note {
    font-size: 12px;
    color: var(--rq-text-muted);
    margin: 0;
}

.rq-page__panel-body {
    padding: 16px 18px;
}

.rq-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =========================================================================
   rq-import — pantalla de progreso del autocompletado de perfil (CV / LinkedIn).
   Tarjeta neutra sobre el fondo del sitio; el color del portal solo en la barra
   y en el paso activo. El chip de origen muestra QUÉ se está leyendo.
   ========================================================================= */
.rq-import-wrap {
    padding: 3rem 0 4rem;
}

.rq-import {
    max-width: 560px;
    margin: 0 auto;
    padding: 2rem 2rem 1.75rem;
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
}

.rq-import__source {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border-radius: 999px;
    background: #f5f5f5;
    color: #475569;
    margin-bottom: 1.5rem;
}

.rq-import__source-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.rq-import__source-icon--linkedin {
    background: #0a66c2;
    color: #fff;
}

.rq-import__source-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

.rq-import__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #191919;
    line-height: 1.25;
    margin: 0 0 0.5rem;
}

.rq-import__lead {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.rq-import__bar {
    height: 4px;
    border-radius: 2px;
    background: #f0f0f0;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.rq-import__bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--portal-color, #0d6efd);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.rq-import__steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rq-import__step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    color: #94a3b8;
    font-size: 0.95rem;
    border-top: 1px solid #f0f0f0;
    transition: color 0.3s;
}

.rq-import__step:first-child {
    border-top: 0;
}

.rq-import__dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.65rem;
}

.rq-import__dot i {
    display: none;
}

.rq-import__step--active {
    color: #191919;
    font-weight: 600;
}

.rq-import__step--active .rq-import__dot {
    border-color: rgba(var(--portal-color-rgb, 13, 110, 253), 0.25);
    border-top-color: var(--portal-color, #0d6efd);
    animation: rq-import-spin 0.8s linear infinite;
}

.rq-import__step--done {
    color: #475569;
}

.rq-import__step--done .rq-import__dot {
    border-color: #16a34a;
    background: #16a34a;
    color: #fff;
}

.rq-import__step--done .rq-import__dot i {
    display: inline;
}

.rq-import__note {
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    color: #666;
}

.rq-import__error {
    text-align: center;
}

.rq-import--error .rq-import__source {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.rq-import__error-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.rq-import__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes rq-import-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rq-import__step--active .rq-import__dot {
        animation: none;
    }

    .rq-import__bar > span {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .rq-import-wrap {
        padding: 1.5rem 0 3rem;
    }

    .rq-import {
        padding: 1.5rem 1.25rem;
    }

    .rq-import__title {
        font-size: 1.3rem;
    }
}

/* ── Contenido bloqueado (rq-card--locked / rq-locked-notice) ───────────────────────────────
   Estado "se lista pero no se puede usar" del enforcement de tres estados. Beneficios ya usaba
   .rq-card--locked y .rq-badge--lock sin que existieran reglas: el aspecto lo sostenían el ícono
   y estilos inline. Se define acá, en neutros — el candado y el motivo comunican, no el color. */
.rq-card--locked { background: #fafafa; }
.rq-card--locked .rq-card__image img,
.rq-card--locked .rq-card__avatar { opacity: .55; filter: grayscale(1); }
.rq-card--locked .rq-card__title { color: #475569; }

.rq-locked-notice {
    display: flex; align-items: flex-start; gap: .4rem;
    margin: .5rem 0 0; padding: .45rem .6rem;
    background: #f5f5f5; border: 1px solid #f0f0f0; border-radius: 8px;
    font-size: .82rem; line-height: 1.35; color: #475569;
}
.rq-locked-notice i { margin-top: .15rem; color: #666; }

.rq-badge--lock { background: rgba(0, 0, 0, .65); color: #fff; }

/* ── LMS: progreso y estrellas ─────────────────────────────────────────────
   Únicas piezas propias del módulo de cursos; el resto es catálogo rq-. */
.rq-progress {
    height: 6px;
    background: #f0f0f0;
    border-radius: 999px;
    overflow: hidden;
}

.rq-progress__bar {
    height: 100%;
    background: #475569;
    border-radius: 999px;
}

.context-default .rq-progress__bar {
    background: var(--portal-color, #475569);
}

.rq-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #f5b301;
    font-size: 0.85rem;
}

.rq-stars__value {
    color: #475569;
    margin-left: 0.25rem;
    font-weight: 600;
}

/* =========================================================================
   rq-cv-report — informe del analizador de CV (AnalyzeCvData.html.twig).
   Tarjeta de puntaje: resumen con anillo, índice neutro con scroll-spy y
   aspectos plegables. Base neutra; el color del portal solo en la barra del
   índice activo y en los botones. Los colores de nivel son semánticos y
   fijos: el relleno (--rq-cv-fill) es decorativo y el texto usa --rq-cv-ink,
   que llega a ≥ 6:1 sobre blanco y sobre #f5f5f5.
   ========================================================================= */
.rq-cv-report {
    /* El texto lo escribe el modelo y puede traer URLs largas sin espacios. */
    overflow-wrap: break-word;
    --rq-cv-sticky: 96px;
    /* Foco fijo y no el color del portal: un portal amarillo dejaría el foco invisible. */
    --rq-cv-focus: #0a66c2;
    padding-bottom: 4rem;
    font-size: 0.9375rem;
    color: #191919;
}

.rq-cv-level--ok { --rq-cv-fill: #16a34a; --rq-cv-ink: #166534; }
.rq-cv-level--warn { --rq-cv-fill: #f59e0b; --rq-cv-ink: #92400e; }
.rq-cv-level--danger { --rq-cv-fill: #dc2626; --rq-cv-ink: #991b1b; }
.rq-cv-level--none { --rq-cv-fill: #a3a3a3; --rq-cv-ink: #475569; }

/* Las variantes semánticas de rq-badge (--ok/--warn/--danger, sección CARDS) quedan pisadas
   por la segunda definición de --inline y por el chip "requerido" de rq-eval, que aparecen más
   arriba en este archivo pero después del catálogo. Se reafirman dentro del informe en vez de
   reordenar el catálogo global. */
.rq-cv-report .rq-badge {
    margin: 0;
}

.rq-cv-report .rq-badge--ok {
    background: var(--rq-badge-ok-bg);
    color: var(--rq-badge-ok-ink);
    border-color: var(--rq-badge-ok-line);
}

.rq-cv-report .rq-badge--warn {
    background: var(--rq-badge-warn-bg);
    color: var(--rq-badge-warn-ink);
    border-color: var(--rq-badge-warn-line);
}

.rq-cv-report .rq-badge--danger {
    background: #fee2e2 !important;
    color: #7f1d1d !important;
    border-color: #fecaca;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.rq-cv-report :is(a, button, summary):focus-visible {
    outline: 2px solid var(--rq-cv-focus);
    outline-offset: 2px;
}

/* ----- Resumen ----- */
.rq-cv-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 200px;
    gap: 2.5rem;
    align-items: center;
    padding: 2.5rem 2.75rem;
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
}

.rq-cv-summary--no-score {
    grid-template-columns: minmax(0, 1fr) 200px;
}

/* En rem y centrado por grid: si el usuario agranda el texto del navegador, el anillo crece con
   la cifra en vez de dejarla salirse. */
.rq-cv-ring {
    position: relative;
    width: 9.5rem;
    height: 9.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--rq-cv-fill) calc(var(--score) * 1%), #f0f0f0 0);
}

.rq-cv-ring::before {
    content: "";
    position: absolute;
    inset: 0.8rem;
    border-radius: 50%;
    background: #fff;
}

.rq-cv-ring__label {
    position: relative;
    display: flex;
    align-items: baseline;
}

.rq-cv-ring__value,
.rq-cv-ring__max {
    font-variant-numeric: tabular-nums;
}

.rq-cv-ring__value {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: #191919;
}

.rq-cv-ring__max {
    margin-left: 0.1em;
    font-size: 0.875rem;
    color: var(--rq-text-muted, #666);
}

.rq-cv-summary__body {
    min-width: 0;
}

.rq-cv-summary__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rq-text-muted, #666);
}

.rq-cv-summary__title {
    margin: 0 0 1rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #191919;
}

.rq-cv-summary__title:focus {
    outline: none;
}

.rq-cv-summary__impression {
    max-width: 72ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: #191919;
}

.rq-cv-summary__more {
    display: inline-flex;
    align-items: center;
    margin-top: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: #191919;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rq-cv-summary__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.75rem;
}

.rq-cv-summary__stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0 0 0 2rem;
    border-left: 1px solid #f0f0f0;
    list-style: none;
    font-size: 0.875rem;
    color: #475569;
}

.rq-cv-summary__stats li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rq-cv-summary__stats li::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rq-cv-fill);
}

.rq-cv-summary__stat-value {
    min-width: 1.5ch;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rq-cv-ink);
    font-variant-numeric: tabular-nums;
}

/* ----- Puntaje (insignia y número plano) ----- */
.rq-cv-score {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rq-cv-score__max {
    margin-left: 0.1em;
    font-weight: 400;
    color: var(--rq-text-muted, #666);
}

.rq-cv-score--plain {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--rq-cv-ink);
}

/* ----- Layout: índice + contenido ----- */
.rq-cv-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    margin-top: 2rem;
}

.rq-cv-index {
    position: sticky;
    top: var(--rq-cv-sticky);
    z-index: 5;
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
}

/* position: relative hace a la nav el bloque contenedor de los .visually-hidden (absolutos)
   de cada enlace: sin eso escapan del overflow de la fila móvil y ensanchan la página. */
.rq-cv-index__nav {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: calc(100vh - var(--rq-cv-sticky) - 1.5rem);
    overflow-y: auto;
    padding: 0.5rem;
    scrollbar-width: thin;
}

.rq-cv-index__group {
    padding: 0.85rem 0.65rem 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rq-text-muted, #666);
}

.rq-cv-index__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.3;
    color: #475569;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.rq-cv-index__link:hover {
    background: #f5f5f5;
    color: #191919;
}

.rq-cv-report .rq-cv-index__link:focus-visible {
    outline-offset: -2px;
}

.rq-cv-index__link[aria-current] {
    background: #f5f5f5;
    /* El color del portal oscurecido: un portal amarillo o celeste dejaría la barra invisible. */
    box-shadow: inset 3px 0 0 #191919;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--portal-color, #0d6efd) 65%, #000);
    color: #191919;
    font-weight: 600;
}

.rq-cv-index__link > i {
    flex: 0 0 1.1rem;
    text-align: center;
    color: var(--rq-text-muted, #666);
}

.rq-cv-index__text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Solo lo que pide atención lleva color: un índice con 11 números de colores no deja ver
   cuáles son los problemas. */
.rq-cv-index__score {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rq-text-muted, #666);
    font-variant-numeric: tabular-nums;
}

.rq-cv-index__score.rq-cv-level--warn,
.rq-cv-index__score.rq-cv-level--danger {
    font-weight: 700;
    color: var(--rq-cv-ink);
}

.rq-cv-index .rq-tabscroll__arrow {
    display: none;
}

/* ----- Secciones ----- */
.rq-cv-section {
    container-type: inline-size;
    scroll-margin-top: calc(var(--rq-cv-sticky) + 1rem);
    margin-bottom: 2rem;
    padding: 2rem 2.25rem;
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
}

.rq-cv-section__header {
    margin-bottom: 1.75rem;
}

.rq-cv-section__title,
.rq-cv-content__heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #191919;
}

.rq-cv-content__heading {
    margin: 2.75rem 0 1rem;
}

.rq-cv-section__lead {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--rq-text-muted, #666);
}

.rq-cv-meter {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #f0f0f0;
    overflow: hidden;
}

.rq-cv-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--rq-cv-fill);
}

.rq-cv-meter--empty {
    background: transparent;
}

.rq-cv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* El texto de las etiquetas lo escribe el modelo y puede ser una frase: tiene que poder
   partirse (el --inline global trae nowrap). */
.rq-cv-tags .rq-badge {
    max-width: 100%;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
}

.rq-cv-tags--sm .rq-badge {
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
}

/* ----- Por dónde empezar ----- */
/* Columnas según el ancho de la sección, no del viewport: con 2 o 3 prioridades nunca queda
   una tarjeta huérfana en su propia fila. */
.rq-cv-priorities {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Sin caja propia: dentro de la tarjeta de la sección, otra tarjeta sería ruido. Las prioridades
   se separan con filetes (arriba al apilarse, a la izquierda en fila). */
.rq-cv-priority {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rq-cv-priority + .rq-cv-priority {
    padding-top: 1.5rem;
    border-top: 1px solid #f0f0f0;
}

.rq-cv-priority__head {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.rq-cv-priority__score {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rq-cv-priority__score .rq-cv-meter {
    flex: 1 1 auto;
}

.rq-cv-priority__rank {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #191919;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.rq-cv-priority__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #191919;
}

.rq-cv-priority__tip {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #475569;
}

.rq-cv-priority__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.rq-cv-priority__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    font-size: 0.875rem;
    font-weight: 600;
    color: #191919;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.rq-cv-priority__link:hover {
    color: #191919;
    text-decoration-thickness: 2px;
}

.rq-cv-missing {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid #f0f0f0;
}

.rq-cv-section__header + .rq-cv-missing {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.rq-cv-missing__head,
.rq-cv-tagset__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.rq-cv-missing__head .rq-cv-missing__title,
.rq-cv-tagset__head .rq-cv-tagset__title {
    margin: 0;
}

.rq-cv-missing__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e;
}

/* ----- Cómo está escrito ----- */
/* Una columna en secciones angostas; desde 760px de sección, seis columnas: los dos puntajes
   ocupan media fila cada uno y los tres conteos un tercio. */
.rq-cv-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@container (min-width: 680px) {
    .rq-cv-priorities {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .rq-cv-priority + .rq-cv-priority {
        padding-top: 0;
        padding-left: 2rem;
        border-top: 0;
        border-left: 1px solid #f0f0f0;
    }

    /* Dos líneas reservadas para el título: así las barras quedan alineadas entre tarjetas. */
    .rq-cv-priority__title {
        min-height: 2.6em;
    }
}

@container (min-width: 760px) {
    .rq-cv-metrics {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .rq-cv-metric--score {
        grid-column: span 3;
    }

    .rq-cv-metric--count {
        grid-column: span 2;
    }
}

/* Indicadores como franja editorial (filete arriba), no como tarjetas dentro de la tarjeta. */
.rq-cv-metric {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.9rem;
    border-top: 1px solid #e6e6e6;
}

.rq-cv-metric__label .rq-badge {
    margin-left: auto;
}

.rq-cv-metric__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    /* Alto de la insignia de alerta: con o sin ella, las cifras quedan a la misma altura. */
    min-height: 1.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.rq-cv-metric__label > i {
    color: var(--rq-text-muted, #666);
}

.rq-cv-metric__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: #191919;
    font-variant-numeric: tabular-nums;
}

.rq-cv-metric--alert .rq-cv-metric__value {
    color: var(--rq-cv-ink);
}

.rq-cv-metric__unit {
    margin-left: 0.1em;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--rq-text-muted, #666);
}

.rq-cv-metric__note,
.rq-cv-tagset__note {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rq-text-muted, #666);
}

.rq-cv-tagset {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid #f0f0f0;
}

.rq-cv-tagset__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #191919;
}

.rq-cv-tagset__title > i {
    color: var(--rq-text-muted, #666);
}

.rq-cv-tagset__count {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #f5f5f5;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

.rq-cv-tagset__note {
    margin-top: 0.6rem;
}

/* ----- Visualización (CV adjunto) ----- */
.rq-cv-visual {
    margin: 0;
}

.rq-cv-visual > div + div {
    margin-top: 1.25rem;
}

.rq-cv-visual dt {
    font-size: 0.875rem;
    font-weight: 600;
    color: #191919;
}

.rq-cv-visual dd {
    margin: 0.2rem 0 0;
    line-height: 1.6;
    color: #191919;
}

/* ----- Aspectos ----- */
.rq-cv-aspect {
    scroll-margin-top: calc(var(--rq-cv-sticky) + 1rem);
    margin-bottom: 1rem;
    background: #fff;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
}

/* Toda la cabecera abre y cierra (el JS reenvía el clic al botón del título); el enlace a editar
   queda encima y no la dispara. */
.rq-cv-aspect__header {
    display: grid;
    /* Columna de "Editar" de ancho fijo (vacía si la sección no se edita): así barras y
       puntajes quedan alineados en todas las filas. */
    grid-template-columns: auto minmax(0, 1fr) 120px 4.5rem 7.5rem auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--rq-card-radius);
    cursor: pointer;
}


.rq-cv-aspect__header > .rq-cv-edit,
.rq-cv-aspect__header > .rq-cv-edit-menu {
    justify-self: end;
}

/* En escritorio el botón llena su columna: todas las filas muestran la misma pastilla. */
@media (min-width: 768px) {
    .rq-cv-aspect__header > .rq-cv-edit,
    .rq-cv-aspect__header > .rq-cv-edit-menu,
    .rq-cv-aspect__header > .rq-cv-edit-menu > .rq-cv-edit {
        width: 100%;
    }
}

.rq-cv-aspect__header:has(.rq-cv-aspect__toggle:focus-visible) {
    outline: 2px solid var(--rq-cv-focus);
    outline-offset: 2px;
}

.rq-cv-aspect__header .rq-cv-score {
    justify-self: end;
}

.rq-cv-aspect__toggle {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
}

.rq-cv-report .rq-cv-aspect__toggle:focus-visible {
    outline: none;
}

.rq-cv-aspect__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #475569;
    font-size: 0.875rem;
}

.rq-cv-aspect__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #191919;
}

.rq-cv-aspect__chevron {
    color: var(--rq-text-muted, #666);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.rq-cv-aspect.is-open .rq-cv-aspect__chevron {
    transform: rotate(180deg);
}

.rq-cv-aspect__body {
    margin: 0 1.5rem;
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid #f0f0f0;
}

.rq-cv-aspect__analysis {
    margin: 0;
    line-height: 1.65;
    color: #191919;
}

.rq-cv-aspect__subtitle {
    margin: 1.5rem 0 0.6rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #191919;
}

.rq-cv-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rq-cv-steps li {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    line-height: 1.55;
    color: #191919;
}

.rq-cv-steps li > span {
    min-width: 0;
}

.rq-cv-steps li > i {
    flex: 0 0 auto;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--rq-text-muted, #666);
}

.rq-cv-example {
    margin: 1.5rem 0 0;
    background: #f4f2ee;
    border-radius: 10px;
}

.rq-cv-example__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem 0.45rem 1rem;
    border-bottom: 1px solid #e8e4dc;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}

.rq-cv-example__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.25rem 0.6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #475569;
}

.rq-cv-example__copy:hover {
    background: #e8e4dc;
    color: #191919;
}

.rq-cv-example__copy.is-done {
    color: #166534;
}

.rq-cv-example__text {
    margin: 0;
    padding: 0.9rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #191919;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Enlace a la sección editable del perfil (aspectos, prioridades, habilidades): pastilla
   discreta, porque se repite en varias filas y no debe competir con el puntaje. */
.rq-cv-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: #475569;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rq-cv-edit > i {
    font-size: 0.75rem;
}

button.rq-cv-edit {
    font-family: inherit;
    cursor: pointer;
}

.rq-cv-edit > .rq-cv-edit__caret,
.rq-cv-edit > .rq-cv-edit__ext {
    font-size: 0.625rem;
    color: var(--rq-text-muted, #666);
}

/* Menú de "Editar" en experiencia y carreras: un ítem por registro. Los títulos los escribe el
   usuario: se parten en vez de ensanchar el menú más allá de la pantalla. */
.rq-cv-edit-menu__list {
    min-width: 16rem;
    max-width: min(22rem, calc(100vw - 2rem));
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.4rem;
    border: 1px solid #e6e6e6;
    border-radius: var(--rq-input-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    font-size: 0.875rem;
}

.rq-cv-edit-menu__list .dropdown-item {
    /* Columna fija para el ícono: agregar, editar y ver quedan alineados. */
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    white-space: normal;
    color: #191919;
}

.rq-cv-edit-menu__list .dropdown-item:hover,
.rq-cv-edit-menu__list .dropdown-item:focus {
    background: #f5f5f5;
    color: #191919;
}

.rq-cv-edit-menu__list .dropdown-item > i {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    margin-top: 0.35em;
    font-size: 0.75rem;
    color: var(--rq-text-muted, #666);
}

.rq-cv-edit-menu__label {
    grid-column: 2;
    font-weight: 600;
}

.rq-cv-edit-menu__sub {
    grid-column: 2;
    font-size: 0.75rem;
    color: var(--rq-text-muted, #666);
}

.rq-cv-edit-menu__list .dropdown-divider {
    margin: 0.35rem 0;
    border-color: #f0f0f0;
}

.rq-cv-edit:hover,
.rq-cv-edit[aria-expanded="true"] {
    background: #f5f5f5;
    border-color: #d9d9d9;
    color: #191919;
}

/* Acciones del resumen con la geometría del sistema (radio de input, aire de rq-filter-btn) en
   vez de la de Bootstrap. La secundaria es la de los footers de drawer: blanca con borde gris. */
.rq-cv-report .rq-cv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--rq-input-radius);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.rq-cv-report .rq-cv-btn--secondary {
    background: #fff;
    border: 1px solid #d9d9d9;
    color: #191919;
}

.rq-cv-report .rq-cv-btn--secondary:hover,
.rq-cv-report .rq-cv-btn--secondary:active {
    background: #f5f5f5;
    border-color: #c4c4c4;
    color: #191919;
}

/* Barra de informe desactualizado: tras guardar desde un drawer queda pegada al borde inferior
   mientras se recorre el informe, para seguir editando o volver a analizar. */
.rq-cv-outdated {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: var(--rq-card-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.rq-cv-outdated__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--portal-color, #0d6efd) 12%, #fff);
    color: color-mix(in srgb, var(--portal-color, #0d6efd) 80%, #000);
}

.rq-cv-outdated__text {
    flex: 1;
    margin: 0;
    line-height: 1.45;
}

.rq-cv-outdated .rq-cv-btn {
    flex: none;
}

@media (max-width: 575.98px) {
    .rq-cv-outdated {
        flex-wrap: wrap;
        bottom: 0.5rem;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }

    .rq-cv-outdated__icon {
        display: none;
    }

    .rq-cv-outdated__text {
        font-size: 0.875rem;
    }

    .rq-cv-outdated .rq-cv-btn {
        width: 100%;
    }
}

.rq-cv-aspect__why {
    margin: 1.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rq-text-muted, #666);
}

.rq-cv-recs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2.75rem;
}

.rq-cv-recs > .rq-cv-section__title {
    grid-column: 1 / -1;
    margin: 0;
}

.rq-cv-recs .rec-card {
    border: 0;
    border-radius: var(--rq-card-radius);
    box-shadow: var(--rq-card-shadow);
}

/* La card de recomendación es compartida y trae estilos de h6; aquí cuelga de un h3. */
.rq-cv-recs .rec-card__title {
    font-size: 1rem;
    font-weight: 600;
}

/* ----- Visor del CV ----- */
.rq-cv-pdf__object {
    display: block;
    width: 100%;
    height: min(80vh, 900px);
    border: 0;
}

.rq-cv-pdf__fallback {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
}

/* ----- Responsive ----- */
@media (max-width: 1199.98px) {
    .rq-cv-summary {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 2rem;
        row-gap: 1.75rem;
    }

    .rq-cv-summary--no-score {
        grid-template-columns: minmax(0, 1fr);
    }

    /* El anillo acompaña al veredicto, no al centro del bloque de texto. */
    .rq-cv-ring {
        align-self: start;
    }

    .rq-cv-summary__stats {
        grid-column: -2 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
        padding: 1.25rem 0 0;
        border-left: 0;
        border-top: 1px solid #f0f0f0;
    }
}

@media (max-width: 991.98px) {
    .rq-cv-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    /* El índice pasa a una fila de pastillas fija bajo la cabecera. */
    .rq-cv-index .rq-tabscroll__arrow.is-visible {
        display: flex;
    }

    .rq-cv-index__nav {
        flex-direction: row;
        gap: 0.35rem;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .rq-cv-index__nav::-webkit-scrollbar {
        display: none;
    }

    .rq-cv-index__group {
        display: none;
    }

    .rq-cv-index__link {
        flex: 0 0 auto;
        white-space: nowrap;
        border-radius: 999px;
        padding: 0.4rem 0.8rem;
    }

    .rq-cv-index__link[aria-current] {
        box-shadow: inset 0 0 0 1px #191919;
    }

    /* Bajo la cabecera queda además la fila del índice (~46px). */
    .rq-cv-section,
    .rq-cv-aspect {
        scroll-margin-top: calc(var(--rq-cv-sticky) + 4rem);
    }
}

@media (max-width: 767.98px) {
    /* Anillo chico junto al veredicto; lo accionable (conteos y botones) sube a la primera
       pantalla y la impresión se recorta a cuatro líneas. */
    .rq-cv-summary {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        grid-template-areas:
            "ring head"
            "text text"
            "stats stats"
            "actions actions";
        column-gap: 1rem;
        row-gap: 1.25rem;
        padding: 1.5rem 1.25rem;
    }

    .rq-cv-summary--no-score {
        grid-template-areas:
            "head head"
            "text text"
            "stats stats"
            "actions actions";
    }

    .rq-cv-summary__body {
        display: contents;
    }

    .rq-cv-ring {
        grid-area: ring;
        width: 5.5rem;
        height: 5.5rem;
    }

    .rq-cv-ring::before {
        inset: 0.5rem;
    }

    .rq-cv-ring__value {
        font-size: 1.75rem;
    }

    .rq-cv-ring__max {
        font-size: 0.75rem;
    }

    .rq-cv-summary__head {
        grid-area: head;
        align-self: center;
    }

    .rq-cv-summary__eyebrow {
        letter-spacing: 0.04em;
    }

    .rq-cv-summary__title {
        margin: 0;
        font-size: 1.25rem;
    }

    .rq-cv-summary__text {
        grid-area: text;
    }

    .rq-cv-summary__impression:not(.is-expanded) {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Tres columnas iguales con la cifra sobre la etiqueta: entra en 320px y en cualquier
       idioma sin partir una línea a la mitad. */
    .rq-cv-summary__stats {
        grid-area: stats;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        padding-top: 1rem;
    }

    .rq-cv-summary__stats li {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.15rem 0.35rem;
        text-align: center;
    }

    .rq-cv-summary__stats li::before {
        width: 8px;
        height: 8px;
    }

    .rq-cv-summary__stat-label {
        flex: 0 0 100%;
        font-size: 0.75rem;
    }

    .rq-cv-summary__stat-value {
        font-size: 1.25rem;
    }

    .rq-cv-summary__actions {
        grid-area: actions;
        margin-top: 0;
    }

    .rq-cv-summary__actions .btn {
        flex: 1 1 100%;
    }

    .rq-cv-section {
        padding: 1.5rem 1.25rem;
    }

    .rq-cv-aspect__header {
        grid-template-columns: auto minmax(0, 1fr) auto 2.75rem auto;
        gap: 0.6rem;
        padding: 1rem 1.25rem;
    }

    .rq-cv-aspect__header .rq-cv-meter {
        display: none;
    }

    /* En la cabecera del aspecto solo queda el lápiz, en un círculo; el nombre accesible sigue
       completo. */
    .rq-cv-aspect__header .rq-cv-edit {
        width: 2rem;
        height: 2rem;
        padding: 0;
    }

    /* Solo el ícono: el lápiz edita aquí mismo y la flecha avisa que se abre el perfil en otra
       pestaña (el lápiz se oculta en los enlaces). */
    .rq-cv-aspect__header .rq-cv-edit__caret,
    .rq-cv-aspect__header a.rq-cv-edit > .fa-pen {
        display: none;
    }

    .rq-cv-aspect__header a.rq-cv-edit > .rq-cv-edit__ext {
        font-size: 0.75rem;
        color: inherit;
    }

    .rq-cv-aspect__header .rq-cv-edit__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .rq-cv-aspect__body {
        margin: 0 1.25rem;
    }
}

/* Pantallas táctiles: los controles de texto llegan a 44px de alto (WCAG 2.5.5). */
@media (pointer: coarse) {
    .rq-cv-example__copy,
    .rq-cv-summary__more,
    .rq-cv-priority__link,
    .rq-cv-edit,
    .rq-cv-edit-menu__list .dropdown-item {
        min-height: 44px;
    }

    .rq-cv-aspect__header .rq-cv-edit {
        min-width: 44px;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rq-cv-aspect__chevron,
    .rq-cv-index__link,
    .rq-cv-edit {
        transition: none;
    }
}

/* Botón con aspecto de texto subrayado (p. ej. "Ver ejemplo" en el drawer de presentación).
   :where() deja su especificidad en cero: las clases de tipografía que lo acompañan mandan. */
:where(.rq-text-button) {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rq-text-button:focus-visible {
    outline: 2px solid #0a66c2;
    outline-offset: 2px;
}


/* ============================================================
   ADMIN — piezas de gestión, reporte y dashboard (Ultron + admin alumni)
   Spec: docs/superpowers/specs/2026-10-06-admin-design-system-design.md
   Estructura universal (sin .context-*); tema neutro: nunca el color del portal.
   Twig: templates/Components/Admin/ · Docs: .claude/skills/rq-design-system/references/admin.md
   ============================================================ */
:root {
    --rq-header-bg: linear-gradient(135deg, #334155 0%, #0f172a 100%);
    --rq-header-ink: #fff;
    --rq-header-muted: rgba(255, 255, 255, 0.78);
    --rq-header-glass: rgba(255, 255, 255, 0.12);
    --rq-header-field: rgba(255, 255, 255, 0.1);
    --rq-header-field-focus: rgba(255, 255, 255, 0.16);
    /* Borde de controles sobre la cabecera: .45 da ~3.4:1 sobre el degradado (WCAG 1.4.11). */
    --rq-header-line: rgba(255, 255, 255, 0.5);
    --rq-header-line-focus: rgba(255, 255, 255, 0.75);
    --rq-header-ring: 0 0 0 3px rgba(255, 255, 255, 0.14);
    --rq-control-h: 38px;
    /* Piso tipográfico de rótulos y notas (12px). */
    --rq-font-micro: 0.75rem;
    /* Área táctil mínima con puntero grueso (WCAG 2.5.5). */
    --rq-hit: 44px;
    /* Anillo de foco: blanco sobre la cabecera oscura, tinta sobre superficies claras. */
    --rq-focus-on-dark: 2px solid #fff;
    --rq-focus-on-light: 2px solid var(--rq-table-ink);
    --rq-table-ink: #1c1f24;
    --rq-table-muted: #6b7079;
    --rq-table-line: #eceef1;
    /* Borde de controles sobre superficie clara (3.2:1 sobre blanco); --rq-table-line queda para líneas decorativas. */
    --rq-control-line: #8b919c;
    --rq-table-hover: #f6f7f9;
    --rq-table-group: #f8f9fb;
    /* Gutter horizontal de celdas, toolbar, pie y paginación de la superficie de tabla. */
    --rq-table-pad-x: 1.125rem;
    /* Tonos fijos de las piezas (no dependen del portal). */
    --rq-info-bg: #e4ecfb;
    --rq-info-line: #cddcf7;
    --rq-info-ink: #1d4d9b;
    --rq-info-hover: #eef2fb;
    --rq-chip-bg: #e9edf2;
    --rq-chip-ink: #334155;
    --rq-diff-del-bg: #fdf4f2;
    --rq-diff-del-ink: #7d2a20;
    --rq-diff-add-bg: #f0f8f3;
    --rq-diff-add-ink: #17522f;
    --rq-row-child-bg: #fbfbfc;
    /* Acción destructiva (confirmar un borrado). */
    --rq-danger: #b42318;
    /* Íconos de estado sobre blanco (≥ 4.5:1) y badges semánticos de las piezas. */
    --rq-ok-ink: #15803d;
    --rq-warn-ink: #b45309;
    --rq-badge-ok-line: #bbf7d0;
    --rq-badge-ok-bg: #dcfce7;
    --rq-badge-ok-ink: #14532d;
    --rq-badge-warn-line: #fde68a;
    --rq-badge-warn-bg: #fef3c7;
    --rq-badge-warn-ink: #78350f;
    --rq-badge-muted-line: #e2e8f0;
    --rq-badge-muted-bg: #f1f5f9;
    --rq-badge-muted-ink: #475569;
    --rq-badge-accent-line: #c3e6e2;
    --rq-badge-accent-bg: #dff1ef;
    --rq-badge-accent-ink: #0f5e59;
    /* Fila a la que lleva un ancla (:target). */
    --rq-target-bg: #fef9c3;
    --rq-target-line: #ca8a04;
    /* Tooltip del calendario de disponibilidad (superficie oscura): niveles claros sobre fondo de tinta. */
    --rq-sla-tip-l4: #86efac;
    --rq-sla-tip-l2: #fcd34d;
    --rq-sla-tip-l1: #fca5a5;
    --rq-sla-tip-bar-l4: #4ade80;
    --rq-sla-tip-bar-l2: #fbbf24;
    --rq-sla-tip-bar-l1: #f87171;
    --rq-code-bg: #f3f4f6;
    --rq-segmented-ink: #4b5563;
    /* Ancho reservado a la columna fija de acciones al llevar el foco con Tab (scroll-padding). */
    --rq-sticky-end-w: 12rem;
    /* Series de gráficos: las lee public/js/rq-chart-theme.js. 1 = principal. Hex de 6 dígitos o rgb(). */
    --rq-chart-series-1: #0f766e;
    --rq-chart-series-2: #334155;
    --rq-chart-series-3: #b45309;
    --rq-chart-series-4: #0369a1;
    /* Cada serie ≥ 3:1 sobre --rq-chart-surface (WCAG 1.4.11). */
    --rq-chart-series-5: #64748b;
    /* Verde apagado: el único color que significa «esto es dinero» (6.2:1 sobre blanco). Distinto de toda
       --rq-chart-series-*: una serie de gráfico no puede leerse como costo. */
    --rq-money: #2f6b60;
    /* Parte apagada de una escala (estrellas sin marcar, segmento «Otros»): ≥ 3:1 sobre blanco (WCAG 1.4.11). */
    --rq-rating-off: #8b919c;
    /* Texto sobre un relleno de tinta (opción presionada de un grupo segmentado). */
    --rq-ink-inverse: #fff;
    /* Alto de la franja del botón de menú en mobile (ver «Banda del botón de menú»). */
    --rq-menu-band-h: 4.25rem;
    /* Ancho de la columna de _formLayout. */
    --rq-form-max: 56rem;
}

/* ----- Lienzo de página: cabecera + cuerpo con el mismo ritmo vertical ----- */
.rq-admin {
    padding: 1.5rem clamp(1rem, 2.5vw, 1.75rem) 2.5rem;
}

/* Cifras de forro (lining) en todo el admin y en su ficha: fuentes de portal como Raleway traen cifras de estilo
   antiguo por defecto ("9od"). font-variant-numeric no se combina con el heredado: cada regla con tabular-nums
   repite lining-nums. */
.rq-admin,
.rq-drawer .rq-sheet {
    font-variant-numeric: lining-nums;
}

.rq-admin > * + * {
    margin-top: 1.25rem;
}

/* ----- Cabecera ----- */
/* container-type crea contexto de apilamiento: sin z-index, la superficie que viene después taparía
   los desplegables de Selectize abiertos desde la cabecera. */
.rq-header {
    container: rq-header / inline-size;
    position: relative;
    z-index: 2;
    padding: 1.5rem 1.75rem;
    border-radius: 14px;
    background: var(--rq-header-bg);
    color: var(--rq-header-ink);
}

.rq-header__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem 2rem;
}

.rq-header__info {
    flex: 1 1 320px;
    min-width: 0;
}

.rq-header__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    color: var(--rq-header-muted);
    text-decoration: none;
}

.rq-header__back:hover,
.rq-header__back:focus-visible {
    color: var(--rq-header-ink);
}

.rq-header__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: inherit;
}

.rq-header__title small {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--rq-header-muted);
}

.rq-header__meta {
    max-width: 75ch;
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--rq-header-muted);
}

.rq-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.rq-header__actions .btn {
    border-color: rgba(255, 255, 255, 0.5);
    background: transparent;
    color: var(--rq-header-ink);
}

.rq-header__actions .btn:hover,
.rq-header__actions .btn:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.rq-header__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0;
}

/* <dt> etiqueta / <dd> valor: el valor se muestra arriba con `order`, el DOM queda en orden de lectura. */
.rq-header__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
    padding: 0.7rem 1rem;
    border-radius: var(--rq-card-radius);
    background: var(--rq-header-glass);
    text-align: center;
}

.rq-header__stat dt {
    order: 2;
    margin: 0.15rem 0 0;
    font-size: var(--rq-font-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rq-header-muted);
}

.rq-header__stat dd {
    order: 1;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-header__stat .rq-header__stat-sub {
    order: 3;
    margin-top: 0.1rem;
    font-size: var(--rq-font-micro);
    font-weight: 400;
    color: var(--rq-header-muted);
}

.rq-header__stat--ok dd:not(.rq-header__stat-sub) {
    color: #7dffb3;
}

.rq-header__stat--danger dd:not(.rq-header__stat-sub) {
    color: #ffb8a8;
}

.rq-header__filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--rq-header-line);
    border-radius: var(--rq-input-radius);
    background: var(--rq-header-field);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.rq-header__filters-toggle:hover {
    background: var(--rq-header-field-focus);
}

.rq-header__filters-toggle:active {
    border-color: var(--rq-header-line-focus);
    background: var(--rq-header-glass);
}

.rq-header__filters {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Fila de alcance (ej.: portal + configuración) sobre la grilla de la consulta. */
.rq-header__scope {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.rq-header__scope > .rq-field {
    flex: 1 1 320px;
    max-width: 460px;
}

.rq-header__query {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem 0.75rem;
    align-items: end;
}

/* ----- Campo con rótulo (cabecera y otros formularios de filtro) ----- */
.rq-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    margin: 0;
}

.rq-field--wide {
    grid-column: span 2;
}

.rq-field__label {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--rq-text-muted);
}

.rq-header .rq-field__label {
    color: var(--rq-header-muted);
}

.rq-header .form-control,
.rq-header .form-select {
    height: var(--rq-control-h);
    min-width: 0;
    border: 1px solid var(--rq-header-line);
    border-radius: var(--rq-input-radius);
    background-color: var(--rq-header-field);
    color: #fff;
    color-scheme: dark;
    font-size: 0.875rem;
    box-shadow: none;
}

.rq-header .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.rq-header .form-select option,
.rq-header .form-select optgroup {
    color: var(--rq-table-ink);
}

.rq-header .form-control::placeholder {
    color: rgba(255, 255, 255, 0.72);
}

.rq-header .form-control:focus,
.rq-header .form-select:focus {
    border-color: var(--rq-header-line-focus);
    background-color: var(--rq-header-field-focus);
    box-shadow: var(--rq-header-ring);
    color: #fff;
}

/* Foco visible en blanco (el borde al 75% con halo al 14% apenas se notaba). */
.rq-header :is(.form-control, .form-select):focus-visible {
    outline: var(--rq-focus-on-dark);
    outline-offset: 2px;
}

/* Desde–hasta como un solo control. */
.rq-range {
    display: flex;
    align-items: center;
    height: var(--rq-control-h);
    border: 1px solid var(--rq-header-line);
    border-radius: var(--rq-input-radius);
    background: var(--rq-header-field);
}

.rq-range:focus-within {
    border-color: var(--rq-header-line-focus);
    background: var(--rq-header-field-focus);
    box-shadow: var(--rq-header-ring);
}

.rq-header .rq-range .form-control {
    flex: 1 1 0;
    height: calc(var(--rq-control-h) - 2px);
    padding-inline: 0.65rem 0.4rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-range__sep {
    flex: none;
    color: var(--rq-header-muted);
}

.rq-header__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--rq-control-h);
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--rq-input-radius);
    background: #fff;
    color: var(--rq-table-ink);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.rq-header__submit:hover {
    background: #e2e8f0;
}

/* Foco visible en todo lo interactivo de la cabecera: el anillo por defecto se pierde sobre el fondo oscuro. */
.rq-header :is(a, button):focus-visible {
    outline: var(--rq-focus-on-dark);
    outline-offset: 2px;
}

.rq-header__submit:disabled {
    background: rgba(255, 255, 255, 0.75);
    cursor: not-allowed;
}

/* Configuración dentro de la cabecera: NO es un filtro. Borde punteado y rótulo ámbar para que no se lea como campo. */
.rq-header__panel {
    display: flex;
    flex: 0 1 460px;
    flex-direction: column;
    gap: 0.55rem;
    margin-left: auto;
    padding: 0.7rem 0.9rem 0.8rem;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    background: rgba(8, 14, 32, 0.22);
}

.rq-header__panel-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--rq-font-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd98a;
}

.rq-header__panel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.rq-header__panel-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.rq-header__panel-note {
    max-width: 52ch;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--rq-header-muted);
}

/* Selectize dentro de la cabecera: mismo cuerpo que los inputs; el desplegable queda claro. */
.rq-header .selectize-control {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
}

.rq-header .selectize-control .selectize-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: var(--rq-control-h);
    padding: 3px 2.1rem 3px 0.75rem;
    border: 1px solid var(--rq-header-line);
    border-radius: var(--rq-input-radius);
    background: var(--rq-header-field);
    box-shadow: none;
    color: #fff;
    font-size: 0.875rem;
}

.rq-header .selectize-control .selectize-input.focus {
    border-color: var(--rq-header-line-focus);
    background: var(--rq-header-field-focus);
    box-shadow: var(--rq-header-ring);
    outline: var(--rq-focus-on-dark);
    outline-offset: 2px;
}

.rq-header .selectize-control .selectize-input > .item {
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rq-header .selectize-control.multi .selectize-input > .item {
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.rq-header .selectize-control .selectize-input > input {
    color: #fff !important;
}

.rq-header .selectize-control .selectize-input > input::placeholder {
    color: rgba(255, 255, 255, 0.72);
}

/* Mismo chevron que los <select> nativos de la cabecera (no el triángulo de Selectize). */
.rq-header .selectize-control.single .selectize-input::after,
.rq-header .selectize-control.single .selectize-input.dropdown-active::after {
    right: 0.75rem;
    width: 16px;
    height: 12px;
    margin-top: -6px;
    border: 0;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat center / 16px 12px;
}

.rq-header .selectize-control.single .selectize-input.dropdown-active::after {
    transform: rotate(180deg);
}

/* copyClassesToDropdown copia `form-select` al desplegable: reiniciar lo que .rq-header .form-select le pone. */
.rq-header .selectize-dropdown {
    height: auto;
    padding: 0;
    background: #fff;
    background-image: none;
    color-scheme: light;
    margin-top: 4px;
    border: 0;
    border-radius: var(--rq-input-radius);
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(12, 20, 40, 0.3);
    color: var(--rq-table-ink);
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
}

.rq-header .selectize-dropdown .option {
    padding: 0.45rem 0.75rem;
}

.rq-header .selectize-dropdown .selected {
    background: var(--rq-info-bg);
    color: var(--rq-table-ink);
}

.rq-header .selectize-dropdown .active {
    background: var(--rq-info-hover);
    color: var(--rq-table-ink);
}

.rq-header .selectize-control.multi .selectize-input > .item.active {
    background: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.rq-option-meta {
    font-size: 0.75rem;
    color: #5f6470;
}

@container rq-header (max-width: 620px) {
    .rq-header__panel {
        flex-basis: 100%;
        margin-left: 0;
    }
}

@container rq-header (max-width: 420px) {
    .rq-field--wide {
        grid-column: 1 / -1;
    }

    /* Todas las stats en una fila de columnas iguales: con 3 en una grilla de 2 la tercera quedaba huérfana. */
    .rq-header__stats {
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        width: 100%;
    }

    .rq-header__stat {
        min-width: 0;
        padding-inline: 0.5rem;
    }

    /* Cuatro stats visibles (las ocultas llevan d-none) no entran en una fila de 358px: 2×2 en vez de apretarlas. */
    .rq-header__stats:has(> :not(.d-none) ~ :not(.d-none) ~ :not(.d-none) ~ :not(.d-none)) {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Sin tracking la etiqueta entra entera («INVITACIONES» a 390); si aun así no cabe, se parte entre palabras, no
       con guion («OFER-TAS»), y una palabra que no cabe entera sigue partiéndose. */
    .rq-header__stat dt {
        letter-spacing: 0;
        hyphens: manual;
        overflow-wrap: break-word;
    }
}

@media (max-width: 767.98px) {
    .rq-header {
        padding: 1.1rem 1rem;
        border-radius: 12px;
    }

    .rq-kpi {
        padding: 0.875rem 1rem;
    }

    .rq-kpi__value {
        font-size: 1.5rem;
    }

    .rq-header__actions .btn {
        flex: 1 1 auto;
    }
}

/* ----- Superficie de tabla ----- */
/* position: relative ancla los .visually-hidden (absolute) de la tabla: sin eso escapan del scroll horizontal
   y ensanchan la página en mobile. */
.rq-table-surface {
    container: rq-surface / inline-size;
    position: relative;
    overflow: hidden;
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
}

.rq-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 0.875rem var(--rq-table-pad-x);
    border-bottom: 1px solid var(--rq-table-line);
}

.rq-toolbar__search {
    position: relative;
    flex: 1 1 260px;
    max-width: 440px;
}

.rq-toolbar__search > .fa-search {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--rq-table-muted);
    pointer-events: none;
}

.rq-toolbar__search input {
    padding-inline: 2.1rem;
    border-color: var(--rq-control-line);
    border-radius: 999px;
}

.rq-toolbar__search input::-webkit-search-cancel-button {
    display: none;
}

.rq-toolbar__clear {
    position: absolute;
    top: 50%;
    right: 0.3rem;
    transform: translateY(-50%);
    padding: 0.15rem 0.5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--rq-table-muted);
}

.rq-toolbar__clear:hover {
    background: var(--rq-table-hover);
    color: var(--rq-table-ink);
}

/* Controles de formulario sobre superficie clara (columna de filtros, buscadores, filas por página): borde de
   3.2:1 y foco con el mismo outline de tinta que los botones, no el halo azul de Bootstrap (1.4:1). El :focus de
   mouse también se neutraliza: un select clicado no matchea :focus-visible y mostraba el azul. */
.rq-admin :is(.rq-report__filters, .rq-table-surface) :is(.form-control, .form-select),
.rq-admin :is(.rq-report__filters, .rq-table-surface) :is(.form-control, .form-select):focus {
    border-color: var(--rq-control-line);
    box-shadow: none;
}

.rq-admin :is(.rq-report__filters, .rq-table-surface) :is(.form-control, .form-select):focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 1px;
}

/* Contenedor que desplaza en horizontal y que main.js volvió enfocable (rqSyncScrollerFocus): anillo hacia adentro, porque
   la superficie recorta (overflow: hidden) lo que se dibuje fuera del scroller. */
.rq-admin-shell :is(.table-responsive, .fixed-table-body)[data-rq-scroll-focus]:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: -2px;
}

/* Destino de un foco programático (resultado de una búsqueda): región, no control; sin anillo. */
.rq-admin :is(.rq-table-surface, .rq-page__empty, .rq-note, .rq-embed)[tabindex="-1"]:focus {
    outline: none;
}

/* Foco visible en los controles propios sobre superficies claras. */
.rq-admin :is(.rq-report__filters-toggle, .rq-toolbar__clear, .rq-chip__remove, .rq-table__open, .rq-report__reset):focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

.rq-toolbar__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--rq-table-muted);
}

.rq-toolbar__size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    white-space: nowrap;
}

.rq-toolbar__size select {
    width: auto;
}

.rq-toolbar__count {
    font-variant-numeric: lining-nums tabular-nums;
}

/* Mientras una descarga corre, el botón no acepta otro clic. */
.rq-admin .rq-toolbar .btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.8;
}

/* ----- Tabla densa ----- */
.rq-table {
    --bs-table-color: var(--rq-table-ink);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--rq-table-hover);
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rq-table-ink);
}

.rq-table > :not(caption) > * > * {
    padding: 0.7rem var(--rq-table-pad-x);
    border-bottom-color: var(--rq-table-line);
    box-shadow: none;
}

/* main.css:1093 pinta todo `.table>thead>tr>th` con !important (0,1,3): misma especificidad + orden. */
.rq-table > thead > tr > th {
    background-color: transparent !important;
    color: var(--rq-table-muted) !important;
}

.rq-table thead th {
    font-size: var(--rq-font-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: bottom;
    white-space: nowrap;
    color: var(--rq-table-muted);
}

.rq-table thead th small {
    margin-left: 0.35rem;
    font-size: var(--rq-font-micro);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.rq-table > tbody > tr:last-child > * {
    border-bottom: 0;
}

/* Fila separadora (ej. por día). */
.rq-table > tbody > .rq-table__group > th {
    padding-top: 1.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rq-table-line);
    background: var(--rq-table-group);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rq-table-ink);
}

.rq-table__group > th::first-letter {
    text-transform: uppercase;
}

.rq-table__group-count {
    float: right;
    font-weight: 400;
    color: var(--rq-table-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-table__row--clickable {
    cursor: pointer;
}

.rq-table__row--clickable:hover > td,
.rq-table__row--clickable.is-open > td {
    background: var(--rq-table-hover);
}

.rq-table > tbody > .rq-table__row--child:hover > td {
    background: var(--rq-table-hover);
}

.rq-table > tbody > .rq-table__row--child > td {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    background: var(--rq-row-child-bg);
    font-size: 0.78rem;
}

.rq-table > tbody > .rq-table__row--child > .rq-table__time {
    padding-left: 2.25rem;
    font-weight: 400;
    color: var(--rq-table-muted);
}

.rq-table__time {
    width: 1%;
    white-space: nowrap;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Celda con línea principal + línea secundaria en <small>. */
.rq-table__time small,
.rq-table__stack small {
    display: block;
    font-weight: 400;
    color: var(--rq-table-muted);
    /* break-word y no anywhere: la columna se ensancha hasta la palabra más larga en vez de partirla. */
    overflow-wrap: break-word;
}

.rq-table__open {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rq-table-muted);
}

.rq-table__open i {
    transition: transform 0.15s ease-out;
}

.rq-table__row--clickable:hover .rq-table__open,
.rq-table__open:focus-visible {
    background: #fff;
    color: var(--rq-table-ink);
    box-shadow: inset 0 0 0 1px var(--rq-table-line);
}

.rq-table__row--clickable.is-open .rq-table__open i {
    transform: rotate(90deg);
}

.rq-table > tbody > .rq-table__empty-row > td {
    padding: 2.5rem var(--rq-table-pad-x);
    text-align: center;
    color: var(--rq-table-muted);
}

@media (prefers-reduced-motion: no-preference) {
    .rq-table tbody.is-fresh > tr {
        animation: rqTableIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@keyframes rqTableIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.rq-table-surface__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem var(--rq-table-pad-x);
    border-top: 1px solid var(--rq-table-line);
    font-size: 0.8125rem;
    color: var(--rq-table-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

/* Paginación (propia, KNP y bootstrap-table) en neutro. portal.css.twig pinta el activo con
   portal.color !important (0,2,0); aquí (0,3,0) + !important gana sin depender del orden.
   En admin la regla neutra de links de admin.css (1,5,1) pisa cualquier <a class="page-link">: su
   excepción para .rq-table-surface .pagination vive en admin.css, junto a la de .rq-header. */
.rq-table-surface .pagination {
    --bs-pagination-color: var(--rq-table-ink);
    --bs-pagination-border-color: var(--rq-table-line);
    --bs-pagination-hover-bg: var(--rq-table-hover);
    --bs-pagination-hover-color: var(--rq-table-ink);
    --bs-pagination-focus-box-shadow: none;
    margin: 0;
}

/* Foco de página con outline de tinta (el halo al 12% daba ~1.1:1). z-index: los enlaces van pegados y el vecino
   taparía el anillo. */
.rq-table-surface .pagination .page-link:focus-visible {
    position: relative;
    z-index: 3;
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
    box-shadow: none;
}

.rq-table-surface .active > .page-link,
.rq-table-surface .page-link.active {
    border-color: var(--rq-table-ink) !important;
    background-color: var(--rq-table-ink) !important;
    color: #fff !important;
}

/* bootstrap-table dentro de la superficie */
.rq-table-surface .bootstrap-table .fixed-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.875rem var(--rq-table-pad-x);
    border-bottom: 1px solid var(--rq-table-line);
}

.rq-table-surface .bootstrap-table .fixed-table-toolbar::after {
    content: none;
}

/* Sin buscador ni botones (tabla paginada por el servidor), la toolbar vacía no deja una franja en blanco. */
.rq-table-surface .bootstrap-table .fixed-table-toolbar:empty {
    display: none;
}

.rq-table-surface .bootstrap-table .fixed-table-toolbar .search {
    float: none;
    margin: 0 0 0 auto;
}

.rq-table-surface .bootstrap-table .fixed-table-toolbar .search input {
    min-width: 240px;
    padding-left: 2.1rem;
    border-color: var(--rq-control-line);
    border-radius: 999px;
    /* Misma lupa que .rq-toolbar__search (el buscador de bootstrap-table no admite ícono en el markup). */
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='7' cy='7' r='5' fill='none' stroke='%236b7079' stroke-width='2'/%3e%3cpath d='m11 11 3.5 3.5' stroke='%236b7079' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e") no-repeat 0.85rem 50% / 0.75rem;
}

.rq-table-surface .bootstrap-table .fixed-table-container {
    border: 0;
}

.rq-table-surface .bootstrap-table .fixed-table-container .table thead th .th-inner {
    padding: 0.7rem var(--rq-table-pad-x);
}

.rq-table-surface .bootstrap-table .fixed-table-pagination {
    padding: 0.5rem var(--rq-table-pad-x);
    border-top: 1px solid var(--rq-table-line);
    font-size: 0.8125rem;
    color: var(--rq-table-muted);
}

.rq-table-surface .bootstrap-table .fixed-table-container .no-records-found > td {
    padding: 2.5rem var(--rq-table-pad-x);
    color: var(--rq-table-muted);
}

/* "Sin coincidencias" de bootstrap-table con el mismo dibujo que .rq-page__empty (ícono grande atenuado). */
.rq-table-surface .bootstrap-table .fixed-table-container .no-records-found > td::before {
    content: '\f002' / '';
    display: block;
    margin-bottom: 1rem;
    font: 900 3rem/1 'Font Awesome 6 Free';
    opacity: 0.4;
    color: var(--rq-table-ink);
}

.rq-table-surface .navigation {
    padding: 0.75rem var(--rq-table-pad-x);
    border-top: 1px solid var(--rq-table-line);
}

/* ----- Estado vacío dentro de una superficie ----- */
.rq-page__empty--flat {
    margin: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* ----- Badges, tags, persona ----- */
.rq-badge--info {
    border-color: var(--rq-info-line);
    background: var(--rq-info-bg);
    color: var(--rq-info-ink);
}

.rq-badge--accent {
    border-color: var(--rq-badge-accent-line);
    background: var(--rq-badge-accent-bg);
    color: var(--rq-badge-accent-ink);
}

.rq-badge--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}

/* Color que viene de datos (ej. categoría): style="--rq-dot: #hex" en el elemento. */
.rq-badge--swatch::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rq-dot, currentColor);
}

.rq-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rq-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--rq-table-hover);
    color: var(--rq-table-muted);
    font-size: var(--rq-font-micro);
}

.rq-person {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.rq-person__body {
    min-width: 0;
    line-height: 1.3;
}

.rq-person__body small {
    display: block;
    color: var(--rq-table-muted);
}

.rq-person__name {
    overflow-wrap: anywhere;
}

.rq-avatar {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rq-table-hover);
    color: var(--rq-table-ink);
    font-size: 0.65rem;
    font-weight: 700;
}

.rq-avatar--lg {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    background: var(--rq-info-bg);
    color: var(--rq-info-ink);
    font-size: 0.75rem;
}

/* content.css redefine .rq-badge--inline (~l.13348) DESPUÉS de --ok/--warn/--muted, y .rq-badge--danger
   (~l.13545, estilo rq-eval con mayúsculas). Dentro de las piezas de admin se restauran los semánticos
   sin tocar las reglas globales (las usan _portalMap y el analizador de CV). En Ultron también dentro de los drawers
   (vista previa e impersonación de empresa); los drawers de otros contextos quedan como estaban. También en el
   semáforo del SGI (.rq-sgi) y en las severidades del changelog (.rq-badges-semantic). */
:is(.rq-table, .rq-sheet, .rq-table-surface, .rq-sgi, .rq-badges-semantic) .rq-badge--ok,
body.context-ultron .rq-drawer .rq-badge--ok {
    border-color: var(--rq-badge-ok-line);
    background: var(--rq-badge-ok-bg);
    color: var(--rq-badge-ok-ink);
}

:is(.rq-table, .rq-sheet, .rq-table-surface, .rq-sgi, .rq-badges-semantic) .rq-badge--warn,
body.context-ultron .rq-drawer .rq-badge--warn {
    border-color: var(--rq-badge-warn-line);
    background: var(--rq-badge-warn-bg);
    color: var(--rq-badge-warn-ink);
}

:is(.rq-table, .rq-sheet, .rq-table-surface, .rq-sgi, .rq-badges-semantic) .rq-badge--muted,
body.context-ultron .rq-drawer .rq-badge--muted {
    border-color: var(--rq-badge-muted-line);
    background: var(--rq-badge-muted-bg);
    color: var(--rq-badge-muted-ink);
}

:is(.rq-table, .rq-sheet, .rq-table-surface) .rq-badge--danger,
body.context-ultron .rq-drawer .rq-badge--danger {
    margin: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.rq-admin > .rq-page__empty {
    margin-bottom: 0;
}

/* El #999 global de .rq-page__empty p da 2.85:1; en el admin, el gris de la tabla (4.9:1). El título es <h2>
   (va bajo el <h1> de la cabecera) con el mismo dibujo que el h3 global. */
.rq-admin .rq-page__empty p {
    color: var(--rq-table-muted);
}

.rq-admin .rq-page__empty h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rq-table-ink);
}

/* Botones con la misma forma en todos los portales: el tema del portal (radio 0, sombra) no entra al admin (tampoco a
   las tarjetas de la lista legacy de formularios, .nice-list, que no tiene .rq-admin).
   !important porque muchas hojas de portal fijan `.btn { border-radius: 0 | 30px !important }`.
   Quedan fuera los grupos y las píldoras (sus esquinas las define Bootstrap) y el anillo de .btn-check.
   Los drawers y los diálogos con el pie compartido cuelgan del body, fuera de .rq-admin: se anclan al contexto del body
   (solo admin; en candidato el drawer conserva la forma del portal). .rq-admin queda sin contexto porque la empresa
   también usa esas piezas (constructor de formularios, flujos en /myCompany). */
.rq-admin .btn:not(.rounded-pill):not(.btn-group > .btn):not(.input-group > .btn),
.rq-admin-shell :is(.rq-drawer, .rq-drawer__footer) .btn:not(.rounded-pill):not(.btn-group > .btn):not(.input-group > .btn),
.rq-admin-shell .nice-list .btn:not(.rounded-pill):not(.btn-group > .btn):not(.input-group > .btn) {
    border-radius: 0.375rem !important;
}

.rq-admin .btn:not(.btn-check + .btn),
.rq-admin-shell :is(.rq-drawer, .rq-drawer__footer) .btn:not(.btn-check + .btn),
.rq-admin-shell .nice-list .btn:not(.btn-check + .btn) {
    box-shadow: none !important;
}

/* Foco con outline (no box-shadow, que la regla de arriba anula): tinta sobre superficie clara, blanco en la
   cabecera oscura. Bootstrap 5.3 pone `.btn:focus-visible { outline: 0 }`: sin esto no hay indicador. */
.rq-admin .btn:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

.rq-admin .rq-header .btn:focus-visible {
    outline: var(--rq-focus-on-dark);
}

/* Banda del botón de menú en mobile. admin.css fija .admin-menu-sidebar-button (top 20px, 40px de alto) arriba a
   la derecha hasta 768px inclusive (mismo corte que isMobile() de admin.js, no el 767.98px del resto). Flotando
   solo, tapaba la esquina de la cabecera y, al hacer scroll, lo que pasara por debajo (buscadores, toolbars).
   Ahora vive en una franja opaca del color del body: el contenido arranca debajo y al hacer scroll pasa por
   detrás de la franja. scroll-padding-top evita que un foco o un scrollIntoView quede bajo la franja.
   Admin alumni y Ultron con el botón presente (el login no lo trae); el admin de ferias usa el mismo botón, pero solo
   en sus pantallas .rq-admin: las legacy tienen otro cromo y quedan como estaban. :has() encadenado, no anidado (un
   :has() dentro de otro invalida el selector y, con él, la regla entera). */
@media (max-width: 768px) {
    html:has(> body:is(.context-admin_alumni, .context-ultron) > .admin-menu-sidebar-button),
    html:has(> body.context-admin_faire > .admin-menu-sidebar-button):has(.rq-admin) {
        scroll-padding-top: var(--rq-menu-band-h);
    }

    /* Bajo el overlay (1039), el sidebar (1040), el botón (1041) y los modales/drawers (1055). */
    body:is(.context-admin_alumni, .context-ultron):has(> .admin-menu-sidebar-button)::before,
    body.context-admin_faire:has(> .admin-menu-sidebar-button):has(.rq-admin)::before {
        content: '';
        position: fixed;
        inset: 0 0 auto;
        z-index: 1030;
        height: var(--rq-menu-band-h);
        background-color: inherit;
    }

    body:is(.context-admin_alumni, .context-ultron):has(> .admin-menu-sidebar-button) > #content-wrapper,
    body.context-admin_faire:has(> .admin-menu-sidebar-button):has(.rq-admin) > #content-wrapper {
        padding-top: var(--rq-menu-band-h);
    }

    /* La franja ya separa del borde: sin esto la cabecera arrancaría 1.5rem más abajo. */
    body:is(.context-admin_alumni, .context-ultron):has(> .admin-menu-sidebar-button) .rq-admin,
    body.context-admin_faire:has(> .admin-menu-sidebar-button) .rq-admin {
        padding-top: 0.25rem;
    }
}

/* Acción no disponible (aria-disabled en vez de disabled, para conservar el foco y el title).
   Acotado a .rq-admin: bootstrap-select y data-post-action usan aria-disabled con su propia opacidad. */
.rq-admin .btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* En una fila, lo deshabilitado sale del color y no de la opacidad: el tooltip de foco (::after) la heredaría y
   quedaría translúcido sobre los otros botones. Sin el relleno de hover de btn-outline-*. */
.rq-admin .rq-table__actions .btn[aria-disabled="true"],
.rq-admin .rq-table__actions .btn[aria-disabled="true"]:hover {
    border-color: var(--rq-table-line);
    background: transparent;
    color: var(--rq-table-muted);
    opacity: 1;
}

/* Igual en la cabecera: un botón deshabilitado no reacciona al hover. */
.rq-header__actions .btn[aria-disabled="true"]:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: transparent;
}

@media (max-width: 767.98px) {
    .rq-table .rq-avatar {
        display: none;
    }

    .rq-table .rq-person__body {
        min-width: 170px;
    }

    .rq-table thead th small {
        display: block;
        margin-left: 0;
    }

    .rq-toolbar__tools {
        margin-left: 0;
    }
}


/* ----- Layout de reporte (≠ .rq-reports, el offcanvas de alumni) ----- */
.rq-report,
.rq-sla-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.rq-report__filters {
    padding: 1.125rem;
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
}

.rq-report__filters-title {
    margin: 0 0 0.875rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rq-table-ink);
}

.rq-report__filters-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rq-table-ink);
    cursor: pointer;
}

.rq-report__filters-toggle .fa-chevron-down {
    transition: transform 0.15s ease-out;
}

.rq-report__filters-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.rq-report__filters-body {
    margin-top: 0.875rem;
}

.rq-report__filters .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    color: var(--rq-text-muted);
}

.rq-report__filters .form-select,
.rq-report__filters .form-control {
    border-radius: var(--rq-input-radius);
    font-size: 0.875rem;
}

.rq-report__reset {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    text-align: center;
}

/* Acción del formulario de un reporte: a todo el ancho en el riel (≥ 1400px) y en el teléfono; con los filtros
   apilados arriba (768–1399px) va a la derecha con su ancho, y «Limpiar filtros» se alinea con ella. */
.rq-report__submit {
    display: block;
    width: 100%;
    margin-top: 1rem;
}

@media (min-width: 768px) and (max-width: 1399.98px) {
    .rq-report__submit {
        width: auto;
        margin-left: auto;
    }

    .rq-report__reset {
        text-align: right;
    }
}

.rq-report__results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.rq-report__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rq-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.35rem 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--rq-chip-bg);
    color: var(--rq-chip-ink);
    font-size: 0.75rem;
    font-weight: 600;
}

.rq-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
}

.rq-chip__remove:hover,
.rq-chip__remove:focus-visible {
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
}

/* Columna de filtros a la izquierda solo desde 1400px: a 1280 un reporte ancho (mailing) necesita todo el ancho
   y los filtros pasan arriba, colapsados. */
@media (min-width: 1400px) {
    .rq-report {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .rq-report__filters {
        position: sticky;
        top: 1rem;
    }

    .rq-report__filters-body {
        margin-top: 0;
    }
}

/* ----- KPIs de dashboard ----- */
/* .rq-chart-row: fila de tarjetas de gráfico (≠ token --rq-chart-grid, color de la grilla del gráfico). */
.rq-kpi-grid,
.rq-chart-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.rq-kpi {
    padding: 1rem 1.125rem;
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
}

.rq-kpi__label {
    margin: 0;
    font-size: var(--rq-font-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rq-text-muted);
}

.rq-kpi__value {
    margin: 0.3rem 0 0.15rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--rq-table-ink);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-kpi__hint {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--rq-text-muted);
}

/* ----- Gráficos ----- */
.rq-chart-card {
    min-width: 0;
    padding: 1.125rem 1.25rem 1.25rem;
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
}

.rq-chart-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rq-chart-card__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rq-table-ink);
}

.rq-chart-card__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: var(--rq-text-muted);
}

.rq-chart-card__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.rq-chart-card__body {
    min-width: 0;
}

.rq-chart-card__canvas {
    position: relative;
    height: 340px;
}

/* Los datos del gráfico en una tabla plegable bajo el lienzo (alternativa en texto del tooltip). */
.rq-chart-card__data {
    margin-top: 1rem;
    border-top: 1px solid var(--rq-table-line);
}

.rq-chart-card__data > summary {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rq-table-ink);
    cursor: pointer;
}

.rq-chart-card__data > summary:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

.rq-chart-card__data .table-responsive {
    margin-top: 0.75rem;
}

/* KPI de un grupo sin datos: una sola tarjeta a todo el ancho de la grilla, con la cifra atenuada. */
.rq-kpi--muted {
    grid-column: 1 / -1;
}

.rq-kpi--muted .rq-kpi__value {
    color: var(--rq-table-muted);
}

/* ----- Grupo segmentado ----- */
.rq-segmented {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--rq-control-line);
    border-radius: var(--rq-input-radius);
    background: #fff;
}

.rq-segmented__option {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.3rem 0.85rem;
    border-radius: 5px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rq-segmented-ink);
    cursor: pointer;
    user-select: none;
}

.rq-segmented .btn-check:not(:checked, :disabled) + .rq-segmented__option:hover {
    background: var(--rq-table-hover);
}

.rq-segmented .btn-check:checked + .rq-segmented__option {
    background: var(--rq-table-ink);
    color: #fff;
}

.rq-segmented .btn-check:focus-visible + .rq-segmented__option {
    outline: 2px solid var(--rq-table-ink);
    outline-offset: 2px;
}

.rq-segmented .btn-check:disabled + .rq-segmented__option {
    cursor: not-allowed;
    opacity: 0.45;
}

.rq-segmented--glass {
    border-color: var(--rq-header-line);
    background: rgba(8, 14, 32, 0.18);
}

.rq-segmented--glass .rq-segmented__option {
    color: rgba(255, 255, 255, 0.78);
}

.rq-segmented--glass .btn-check:not(:checked, :disabled) + .rq-segmented__option:hover {
    background: var(--rq-header-field-focus);
}

.rq-segmented--glass .btn-check:checked + .rq-segmented__option {
    background: #fff;
    color: var(--rq-table-ink);
}

.rq-segmented--glass .btn-check:focus-visible + .rq-segmented__option {
    outline-color: #fff;
}

@media (min-width: 576px) {
    .rq-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .rq-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rq-chart-row--split {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* Acciones por fila: botones compactos en una línea, sin que el texto se parta. */
.rq-table__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
    align-items: center;
}

/* La celda de acciones toma el ancho de sus botones; las demás columnas ceden. */
.rq-table td:has(> .rq-table__actions) {
    width: 1%;
    white-space: nowrap;
}

.rq-table__actions > form {
    display: contents;
}

/* Vista de tarjetas de bootstrap-table (mobile): los botones bajan de línea en vez de salirse de la tarjeta. */
.rq-table .card-view .rq-table__actions {
    flex-wrap: wrap;
}

.rq-table__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* Tabla densa (muchas columnas): menos padding horizontal para que quepa sin scroll. */
.rq-table--compact > :not(caption) > * > * {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.rq-table-surface .bootstrap-table .fixed-table-container table.rq-table--compact thead th .th-inner {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    white-space: normal;
}

.rq-table-surface .bootstrap-table .fixed-table-container table.rq-table--compact thead th:first-child .th-inner {
    padding-left: var(--rq-table-pad-x);
}

.rq-table-surface .bootstrap-table .fixed-table-container table.rq-table--compact thead th:last-child .th-inner {
    padding-right: var(--rq-table-pad-x);
}

.rq-table--compact thead th {
    white-space: normal;
}

/* El borde exterior conserva el gutter de la superficie (--rq-table-pad-x). */
.rq-table--compact > :not(caption) > * > :first-child {
    padding-left: var(--rq-table-pad-x);
}

.rq-table--compact > :not(caption) > * > :last-child {
    padding-right: var(--rq-table-pad-x);
}

.rq-table__nowrap {
    white-space: nowrap;
}

/* Ultron: `.rq-table--compact thead th` (0,1,2) y el .th-inner de bootstrap-table (0,5,3) ponían
   `white-space: normal` y le ganaban a la clase: «Fecha registro» se partía en dos líneas. */
body.context-ultron .rq-table .rq-table__nowrap,
body.context-ultron .rq-table-surface .bootstrap-table .fixed-table-container table.rq-table--compact thead th.rq-table__nowrap .th-inner {
    white-space: nowrap;
}

/* Un token sin espacios (una URL de 900 caracteres) se parte donde haga falta: sin esto el min-content de la columna
   quedaba en su max-width y la tabla desbordaba a 1280. */
.rq-table__text {
    min-width: 11rem;
    max-width: 24rem;
    overflow-wrap: anywhere;
}

.rq-table--compact .rq-table__text {
    min-width: 10rem;
}

/* Un badge en la línea secundaria (ej. categoría bajo el estado) puede partirse: no fija el ancho de la columna. */
.rq-table__stack small > .rq-badge {
    justify-content: flex-start;
    border-radius: 0.5rem;
    white-space: normal;
    text-align: left;
}

/* Aviso dentro de la línea secundaria de una métrica: en su propia línea, no ensancha la columna. */
.rq-table__stack small > .rq-table__stat {
    display: flex;
    justify-content: flex-end;
    margin-right: 0;
}

/* Métricas: a la derecha y con dígitos de ancho fijo para compararlas en vertical. En th y td. */
.rq-table .rq-table__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Columna fija de acciones. La sombra hacia la izquierda avisa que la tabla sigue bajo la columna (en macOS la
   barra de scroll no se ve). Donde hay scroll-driven animations, la sombra solo existe mientras haya contenido
   debajo: sin desborde la línea de tiempo queda inactiva (sin sombra) y al llegar al final del scroll se apaga.
   Sin soporte, la sombra queda fija (el comportamiento anterior). */
.rq-table .rq-table__sticky-end {
    --rq-sticky-shadow: -16px 0 16px -16px rgba(15, 23, 42, 0.35);
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: #fff;
    box-shadow: inset 1px 0 0 var(--rq-table-line), var(--rq-sticky-shadow);
}

@supports (animation-timeline: scroll()) {
    .rq-table .rq-table__sticky-end {
        box-shadow: inset 1px 0 0 var(--rq-table-line);
        animation: rqStickyShadow linear both;
        animation-timeline: scroll(nearest inline);
    }
}

@keyframes rqStickyShadow {
    0%,
    97% { box-shadow: inset 1px 0 0 var(--rq-table-line), var(--rq-sticky-shadow); }
    100% { box-shadow: inset 1px 0 0 var(--rq-table-line); }
}

/* Al avanzar con Tab, el navegador desplaza lo mínimo: sin esta reserva el elemento enfocado quedaría bajo la
   columna fija (WCAG 2.4.11). */
.rq-table-surface :is(.fixed-table-body, .table-responsive):has(.rq-table__sticky-end) {
    scroll-padding-inline-end: var(--rq-sticky-end-w);
}

/* Encabezado con línea secundaria (ej. "Entregados" / "% entrega"): el <small> va debajo, como en la celda. */
.rq-table thead th.rq-table__stack small {
    display: block;
    margin-left: 0;
    white-space: nowrap;
}

/* Rótulo de una cifra secundaria que solo hace falta en la card view (en la tabla lo dice el <small> del th):
   «98,6% de entrega» en la tarjeta, «98,6%» en la columna. */
.rq-table__card-label {
    display: none;
}

.rq-table .card-view .rq-table__card-label {
    display: inline;
}

/* Card view de bootstrap-table (mobile): el rótulo es el th entero; su <small> sobra porque el valor ya lo trae.
   La card view descarta las clases del td: la línea secundaria se apila aquí. */
.rq-table .card-view-title small {
    display: none;
}

.rq-table .card-view-value small {
    display: block;
    color: var(--rq-table-muted);
}

.rq-table > thead > tr > th.rq-table__sticky-end {
    background-color: #fff !important;
}

.rq-table tbody tr:hover > .rq-table__sticky-end {
    background-color: var(--rq-table-hover);
}

/* ----- Ficha de detalle dentro de un rq-drawer (rq-sheet): hecho arriba, procedencia en grilla, cambios como diff ----- */
.rq-drawer .modal-body.rq-sheet {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #fff;
    color: var(--rq-table-ink);
    /* El cuerpo del drawer es el contenedor: el drawer mide 560px entre 768 y ~1217px de viewport, así que la
       derivación y la conversación se acomodan a su ancho y no al de la ventana. */
    container-type: inline-size;
}

.rq-sheet__lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 1.5rem 1.5rem 1.35rem;
}

.rq-sheet__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.rq-sheet__id {
    margin-left: 0.3rem;
    font-weight: 500;
    color: var(--rq-table-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-sheet__sub {
    margin: -0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--rq-table-muted);
}

.rq-sheet__who {
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--rq-table-line);
}

.rq-sheet__who .rq-person__name {
    font-size: 0.875rem;
    font-weight: 600;
}

.rq-sheet__who .rq-person__body small {
    font-size: 0.78rem;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-sheet__block {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--rq-table-line);
}

.rq-sheet__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
}

.rq-sheet__heading {
    margin: 0;
    font-size: var(--rq-font-micro);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--rq-table-muted);
}

.rq-sheet__count {
    font-size: 0.75rem;
    color: var(--rq-table-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 1.5rem;
    margin: 0;
}

.rq-facts > div {
    min-width: 0;
}

.rq-facts dt {
    margin: 0 0 0.15rem;
    font-size: var(--rq-font-micro);
    font-weight: 500;
    color: var(--rq-table-muted);
}

.rq-facts dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.rq-facts--plain dd {
    font-weight: 400;
}

.rq-facts__note {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
    overflow-wrap: anywhere;
}

.rq-diff {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rq-table-line);
    border-radius: var(--rq-card-radius);
}

.rq-diff__row {
    display: grid;
    grid-template-columns: minmax(110px, 22%) minmax(0, 1fr);
    border-top: 1px solid var(--rq-table-line);
}

.rq-diff__row:first-child {
    border-top: 0;
}

.rq-diff__field {
    padding: 0.55rem 0.75rem;
    background: var(--rq-table-hover);
    font-size: 0.78rem;
    font-weight: 600;
    overflow-wrap: break-word;
}

.rq-diff__lines {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rq-diff__line {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    align-items: baseline;
    padding: 0.5rem 0.8rem 0.5rem 0;
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* Si el nombre del campo ocupa dos líneas, el color del cambio llena toda la fila (sin franja blanca debajo). */
.rq-diff__line:last-child {
    flex-grow: 1;
}

.rq-diff__line + .rq-diff__line {
    box-shadow: inset 0 1px 0 rgba(28, 31, 36, 0.06);
}

.rq-diff__line--old {
    background: var(--rq-diff-del-bg);
    color: var(--rq-diff-del-ink);
}

.rq-diff__line--new {
    background: var(--rq-diff-add-bg);
    color: var(--rq-diff-add-ink);
}

.rq-diff__sign {
    font-weight: 700;
    text-align: center;
    opacity: 0.65;
    user-select: none;
}

.rq-diff__value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rq-nil {
    color: var(--rq-table-muted);
}

.rq-diff__value .rq-nil {
    color: inherit;
    opacity: 0.55;
}

.rq-json {
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: 0.75rem;
    white-space: pre-wrap;
}

.rq-facts .rq-json {
    margin-top: 0.2rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    background: var(--rq-table-hover);
}

@media (max-width: 575.98px) {
    .rq-facts,
    .rq-diff__row {
        grid-template-columns: 1fr;
    }

    .rq-diff__field {
        padding-bottom: 0.3rem;
    }
}

/* En la tabla el nombre (a menudo un correo) no se parte letra por letra: `break-word` solo corta si no cabe, y el
   <wbr> que el JS pone tras la @ deja cortar ahí cuando falta ancho. Con espacio de sobra, en una línea. */
.rq-table .rq-person__name {
    overflow-wrap: break-word;
}

/* Chrome corta en un <wbr> aunque haya nowrap: con ancho de sobra se oculta para que no corte. */
@media (min-width: 1400px) {
    .rq-table .rq-person__name {
        white-space: nowrap;
    }

    .rq-table .rq-person__name wbr {
        display: none;
    }
}

/* Opt-in: grilla pareja de filtros. 4 columnas (2 en angosto, 1 en teléfono); los campos --wide ocupan 2, así
   que conviene ordenarlos para completar filas. La acción va debajo, a la derecha, fuera de la grilla de campos:
   así ninguna fila queda con un hueco. */
.rq-header__query--even {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rq-header__query--even > .rq-header__submit {
    grid-column: 1 / -1;
    justify-self: end;
}

@container rq-header (max-width: 760px) {
    .rq-header__query--even {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container rq-header (max-width: 420px) {
    .rq-header__query--even {
        grid-template-columns: minmax(0, 1fr);
    }

    .rq-header__query--even > .rq-header__submit {
        justify-self: stretch;
    }
}

/* Estadísticas dentro de una celda (ej.: enviadas / respondidas): texto en tinta, el color solo en el ícono. */
.rq-table__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.5rem;
    color: var(--rq-table-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-table__stat--ok > i {
    color: var(--rq-ok-ink);
}

.rq-table__stat--warn > i {
    color: var(--rq-warn-ink);
}

/* Puntero grueso: los controles chicos llegan a --rq-hit sin cambiar su dibujo en escritorio. */
@media (pointer: coarse) {
    .rq-admin :is(.rq-table__open, .rq-segmented__option, .rq-table__actions .btn, .rq-header__filters-toggle) {
        min-height: var(--rq-hit);
    }

    .rq-table__open {
        min-width: var(--rq-hit);
    }

    /* .rq-toolbar__clear ya es absolute: su ::after se ubica respecto de él. */
    .rq-chip__remove {
        position: relative;
    }

    .rq-chip__remove::after {
        content: '';
        position: absolute;
        inset: -12px;
    }

    /* El botón vive dentro del input: el área crece hacia afuera y no sobre el texto (un toque cerca del final
       del texto no debe borrar la búsqueda). */
    .rq-toolbar__clear::after {
        content: '';
        position: absolute;
        inset: -12px -12px -12px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rq-admin :is(a, button, .btn, i, .rq-segmented__option),
    .rq-drawer .rq-sheet :is(a, button, i) {
        transition: none !important;
    }
}

/* Nota informativa neutra entre piezas (reemplaza a alert-info, que es cian). */
.rq-note {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--rq-table-muted);
    border-radius: 6px;
    background: #fff;
    color: var(--rq-table-ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

.rq-note > i {
    color: var(--rq-table-muted);
}

/* Avisos de una consulta (resultado incompleto / error) con la misma pieza neutra: solo cambia el filete. */
.rq-note--warn {
    border-left-color: var(--rq-warn-ink);
}

.rq-note--danger {
    border-left-color: var(--rq-danger);
}

/* Opt-in: en teléfono (< 576px) cada fila de la tabla pasa a tarjeta. Para tablas propias (no bootstrap-table,
   que tiene su card view): el encabezado queda solo para lectores, la última celda (acción de la fila) va arriba
   a la derecha y las celdas ocultas con d-none siguen ocultas. Las filas separadoras ocupan todo el ancho. */
@media (max-width: 575.98px) {
    .rq-table--stack-sm,
    .rq-table--stack-sm > tbody {
        display: block;
    }

    .rq-table--stack-sm > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .rq-table--stack-sm > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.75rem;
        padding: 0.6rem var(--rq-table-pad-x);
        border-bottom: 1px solid var(--rq-table-line);
    }

    .rq-table--stack-sm > tbody > tr > * {
        display: block;
        grid-column: 1;
        width: auto;
        padding: 0.15rem 0 !important;
        border: 0;
        background: transparent !important;
    }

    .rq-table--stack-sm > tbody > tr > :last-child:not(:first-child) {
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: center;
    }

    .rq-table--stack-sm > tbody > .rq-table__group,
    .rq-table--stack-sm > tbody > .rq-table__empty-row {
        display: block;
        padding: 0;
    }

    .rq-table--stack-sm > tbody > .rq-table__empty-row > td {
        padding: 2rem var(--rq-table-pad-x) !important;
    }

    .rq-table--stack-sm > tbody > .rq-table__group > th {
        padding: 1rem var(--rq-table-pad-x) 0.4rem !important;
        background: var(--rq-table-group) !important;
    }

    .rq-table--stack-sm > tbody > .rq-table__row--child {
        margin-left: var(--rq-table-pad-x);
        padding-left: 0.75rem;
        border-left: 2px solid var(--rq-table-line);
        background: var(--rq-row-child-bg);
    }

    .rq-table--stack-sm > tbody > .rq-table__row--clickable:hover,
    .rq-table--stack-sm > tbody > .rq-table__row--clickable.is-open {
        background: var(--rq-table-hover);
    }

    /* La celda con data-label muestra su rótulo antes del valor (la cabecera se oculta). */
    .rq-table--stack-sm > tbody > tr > [data-label]::before {
        content: attr(data-label) ": ";
        color: var(--rq-table-muted);
        font-weight: 600;
    }
}

/* Identificador técnico (clave, proveedor) en una celda: monoespaciado y neutro, no el <code> rosado. */
.rq-mono {
    padding: 0 0.3rem;
    border-radius: 4px;
    background: var(--rq-code-bg);
    color: var(--rq-table-ink);
    font-family: var(--bs-font-monospace);
    font-size: 0.8rem;
}

/* Acciones con ícono + texto: con la superficie angosta queda solo el ícono (el texto pasa a visually-hidden y
   el botón conserva su title). Así la columna fija de acciones no tapa media tabla a 1280. Solo con mouse: con
   puntero grueso (tablet) el title no se ve, así que el texto se queda y la tabla se desplaza. */
@container rq-surface (max-width: 1240px) {
    @media (hover: hover) and (pointer: fine) {
        .rq-table__action-label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        /* En la vista de tarjetas (mobile) hay lugar: el texto vuelve. */
        .rq-table .card-view .rq-table__action-label {
            position: static;
            width: auto;
            height: auto;
            overflow: visible;
            clip: auto;
        }

        /* Con teclado el title no aparece: al enfocar un botón solo-ícono, su title se muestra a la izquierda (dentro de
           la fila, así no lo recorta el scroll). Texto alternativo vacío: el nombre accesible ya es el label oculto.
           Un title largo se parte dentro de la caja (max-content hasta 16rem): con nowrap el texto salía de la caja y
           ensanchaba el scroll de la tabla. Esc lo oculta hasta que el foco se va (.is-tip-hidden, WCAG 1.4.13). */
        .rq-table__actions .btn {
            position: relative;
        }

        .rq-table__actions .btn[title]:focus-visible:not(.is-tip-hidden)::after {
            content: attr(title) / '';
            position: absolute;
            top: 50%;
            right: calc(100% + 6px);
            z-index: 2;
            width: max-content;
            max-width: 16rem;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            background: var(--rq-table-ink);
            color: #fff;
            font-size: var(--rq-font-micro);
            font-weight: 600;
            line-height: 1.35;
            text-align: start;
            white-space: normal;
            transform: translateY(-50%);
            pointer-events: none;
        }
    }
}

/* Tabla con muchas acciones por fila (Usuarios: hasta siete): solo íconos con cualquier ancho, no solo bajo 1240px.
   Con rótulo, las acciones se comían media tabla y partían el nombre y el correo. Mismas reglas que la consulta de
   arriba (title visible al enfocar con teclado); con puntero grueso el texto se queda. */
@media (hover: hover) and (pointer: fine) {
    .rq-table--icon-actions .rq-table__action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .rq-table--icon-actions .card-view .rq-table__action-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .rq-table--icon-actions .rq-table__actions .btn {
        position: relative;
    }

    .rq-table--icon-actions .rq-table__actions .btn[title]:focus-visible:not(.is-tip-hidden)::after {
        content: attr(title) / '';
        position: absolute;
        top: 50%;
        right: calc(100% + 6px);
        z-index: 2;
        width: max-content;
        max-width: 16rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        background: var(--rq-table-ink);
        color: #fff;
        font-size: var(--rq-font-micro);
        font-weight: 600;
        line-height: 1.35;
        text-align: start;
        white-space: normal;
        transform: translateY(-50%);
        pointer-events: none;
    }
}

/* Selector de filas por página de bootstrap-table: botón neutro y menú en tinta, no el azul de Bootstrap ni el
   color del portal (la excepción de subrayado de los enlaces vive en admin.css). */
.rq-table-surface .page-list .btn {
    border-color: var(--rq-control-line);
    background: #fff;
    color: var(--rq-table-ink);
}

.rq-table-surface .page-list .dropdown-item {
    color: var(--rq-table-ink);
    text-decoration: none;
}

.rq-table-surface .page-list .dropdown-item:is(:hover, :focus-visible):not(.active) {
    background: var(--rq-table-hover);
    color: var(--rq-table-ink);
}

.rq-table-surface .page-list .dropdown-item.active,
.rq-table-surface .page-list .dropdown-item:active {
    background: var(--rq-table-ink);
    color: #fff;
}

@media (max-width: 575.98px) {
    /* Buscador de bootstrap-table a todo el ancho, como el de la toolbar propia. */
    .rq-table-surface .bootstrap-table .fixed-table-toolbar .search {
        width: 100%;
        margin: 0;
    }

    .rq-table-surface .bootstrap-table .fixed-table-toolbar .search input {
        min-width: 0;
        width: 100%;
    }
}

/* ----- Pestañas al pie de la cabecera (opción `tabs` de _pageHeader) ----- */
/* El <nav> llega a los bordes de la cabecera (margen negativo = su padding) y se desplaza en horizontal cuando las
   pestañas no entran; el script del componente centra la activa al cargar. El color del texto lo fija admin.css para
   todo enlace de la cabecera (blanco, !important): aquí solo el indicador de la activa. */
.rq-header__tabs {
    position: relative;
    margin: 1.25rem -1.75rem -1.5rem;
    padding: 0 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.rq-header__tabs-list {
    display: flex;
    gap: 0.25rem;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rq-header__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--rq-hit);
    padding: 0 0.85rem;
    border-bottom: 3px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.rq-header__tab:hover {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.rq-header__tab[aria-current="page"] {
    border-bottom-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Anillo hacia adentro: el <nav> desplazable recortaría uno hacia afuera. */
.rq-header .rq-header__tab:focus-visible {
    outline-offset: -3px;
}

.rq-header__tab-count {
    min-width: 1.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--rq-header-glass);
    font-size: var(--rq-font-micro);
    font-variant-numeric: lining-nums tabular-nums;
    text-align: center;
}

@media (max-width: 767.98px) {
    .rq-header__tabs {
        margin: 1rem -1rem -1.1rem;
        padding: 0 0.5rem;
    }
}

/* Ultron: a 390 la fila de pestañas se cortaba por los dos lados sin indicio de que hay más. main.js marca el
   estado del desplazamiento y el borde con contenido oculto se desvanece; al llegar al extremo, el desvanecido se va.
   Máscara y no sombras: no depende del fondo de la cabecera. */
@media (max-width: 767.98px) {
    body.context-ultron .rq-header__tabs.is-scrollable:not(.is-at-end) {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    }

    body.context-ultron .rq-header__tabs.is-scrollable:not(.is-at-start) {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent);
    }

    body.context-ultron .rq-header__tabs.is-scrollable:not(.is-at-start):not(.is-at-end) {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
        mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
    }
}

/* ----- Sub-navegación por enlaces sobre superficie clara (admin.subnav) ----- */
/* Segundo nivel bajo las pestañas de la cabecera (ej. Contactadas / No contactadas). Los enlaces llevan
   .rq-surface-link para salir de la regla de enlaces de texto de admin.css. */
.rq-subnav {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--rq-card-radius);
    background: var(--rq-badge-muted-bg);
}

.rq-subnav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.85rem;
    border-radius: 7px;
    color: var(--rq-segmented-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.rq-subnav__link:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--rq-table-ink);
}

.rq-subnav__link:is([aria-current="page"], [aria-current="true"]) {
    background: #fff;
    color: var(--rq-table-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.rq-admin .rq-subnav__link:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .rq-subnav__link {
        min-height: var(--rq-hit);
    }
}


/* ----- Formulario (_formLayout): columna legible, tarjetas por sección y barra de acciones fija al pie ----- */
.rq-form {
    max-width: var(--rq-form-max);
    margin-inline: auto;
}

.rq-form > * + * {
    margin-top: 1rem;
}

/* Que el campo enfocado con Tab no quede bajo la barra fija. */
html:has(.rq-form-bar) {
    scroll-padding-bottom: 6rem;
}

.rq-form-section {
    padding: 1.25rem 1.5rem 1.5rem;
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
    color: var(--rq-table-ink);
}

.rq-form-section__head {
    margin-bottom: 1rem;
}

.rq-form-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rq-table-ink);
}

.rq-form-section__desc {
    max-width: 70ch;
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--rq-table-muted);
}

.rq-form-section__body > :last-child {
    margin-bottom: 0;
}

.rq-form-section .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rq-table-ink);
}

/* Controles sobre las superficies claras del formulario y de la ficha: mismo borde y foco que los filtros. */
.rq-admin :is(.rq-form-section, .rq-detail-section, .rq-detail__layout--admin .rq-detail__sidebar-card, .form-question) :is(.form-control, .form-select),
.rq-admin :is(.rq-form-section, .rq-detail-section, .rq-detail__layout--admin .rq-detail__sidebar-card, .form-question) :is(.form-control, .form-select):focus {
    border-color: var(--rq-control-line);
    box-shadow: none;
}

.rq-admin :is(.rq-form-section, .rq-detail-section, .rq-detail__layout--admin .rq-detail__sidebar-card, .form-question) :is(.form-control, .form-select):focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 1px;
}

.rq-admin :is(.rq-form-section, .rq-detail-section, .rq-detail__layout--admin .rq-detail__sidebar-card, .form-question) :is(.form-control, .form-select).is-invalid {
    border-color: var(--rq-danger);
}

.rq-admin :is(.rq-form-section, .rq-detail-section, .rq-detail__layout--admin .rq-detail__sidebar-card, .form-question) .invalid-feedback {
    color: var(--rq-danger);
    font-size: 0.8125rem;
}

.rq-admin :is(.rq-form-section, .rq-detail-section, .rq-detail__layout--admin .rq-detail__sidebar-card, .form-question) .form-text {
    color: var(--rq-table-muted);
    font-size: 0.8125rem;
}

/* Interruptores y casillas en tinta, no en el azul de Bootstrap ni en el color del portal. */
.rq-admin :is(.rq-form-section, .rq-detail-section, .rq-detail__layout--admin .rq-detail__sidebar-card, .form-question) .form-check-input {
    border-color: var(--rq-control-line);
}

.rq-admin :is(.rq-form-section, .rq-detail-section, .rq-detail__layout--admin .rq-detail__sidebar-card, .form-question) .form-check-input:checked {
    border-color: var(--rq-table-ink);
    background-color: var(--rq-table-ink);
}

/* Ultron: también las casillas de las tablas (Feedback, selección masiva de Empresas), sin el halo azul. */
.rq-admin :is(.rq-form-section, .rq-detail-section, .rq-detail__layout--admin .rq-detail__sidebar-card, .form-question) .form-check-input:focus,
body.context-ultron .rq-table-surface .form-check-input:focus {
    box-shadow: none;
}

.rq-admin :is(.rq-form-section, .rq-detail-section, .rq-detail__layout--admin .rq-detail__sidebar-card, .form-question) .form-check-input:focus-visible,
body.context-ultron .rq-table-surface .form-check-input:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

/* Resumen de errores: arriba del formulario, con enlaces a cada campo (el error por campo lo pinta el form theme). */
.rq-form-errors {
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--rq-danger);
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
    color: var(--rq-table-ink);
}

.rq-form-errors:focus {
    outline: none;
}

.rq-form-errors__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rq-danger);
}

.rq-form-errors__list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Barra de acciones fija al pie del viewport mientras el formulario está en pantalla. */
.rq-form-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1.25rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--rq-table-line);
    border-radius: var(--rq-card-radius) var(--rq-card-radius) 0 0;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
}

.rq-form-bar__extra,
.rq-form-bar__main {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rq-form-bar__main {
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .rq-form-section {
        padding: 1rem 1rem 1.25rem;
    }

    .rq-form-bar {
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    }

    /* Aquí la barra apila sus botones (Cancelar + Guardar mide 109px; con una acción extra, ~155px): la reserva
       para el foco con Tab crece con ella. Con los 6rem de escritorio el campo enfocado quedaba hasta 13px bajo
       la barra (medido a 390). */
    html:has(.rq-form-bar) {
        scroll-padding-bottom: calc(7.5rem + env(safe-area-inset-bottom));
    }

    html:has(.rq-form-bar__extra) {
        scroll-padding-bottom: calc(10.5rem + env(safe-area-inset-bottom));
    }

    /* Grupos a todo el ancho. Las acciones extra se apilan (la principal arriba); Cancelar y Guardar quedan lado a
       lado (ver «Barra de formulario a 390» más abajo). */
    .rq-form-bar__extra,
    .rq-form-bar__main {
        flex: 1 1 100%;
    }

    .rq-form-bar__extra {
        flex-direction: column-reverse;
    }

    .rq-form-bar :is(.btn, input[type="submit"]) {
        width: 100%;
    }
}

/* ----- Ficha de detalle (_detailLayout): rq-detail__* de las fichas + modificador --admin ----- */
/* En el DOM el resumen va primero (orden de lectura); en escritorio se dibuja a la derecha, como en las fichas de
   usuario y empresa. Bajo 992px queda arriba, a todo el ancho (la regla base de 768px de rq-detail sigue valiendo). */
.rq-detail__layout--admin > .rq-detail__sidebar {
    grid-column: 2;
    grid-row: 1;
    align-self: start; /* arranca arriba, junto a la primera sección (no centrado en la fila de la grilla) */
}

.rq-detail__layout--admin > .rq-detail__main {
    grid-column: 1;
    grid-row: 1;
}

.rq-detail__layout--admin > .rq-detail__main > * + * {
    margin-top: 1.25rem;
}

.rq-detail__layout--admin .rq-detail__sidebar-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rq-table-ink);
}

@media (max-width: 991.98px) {
    .rq-detail__layout--admin {
        grid-template-columns: minmax(0, 1fr);
    }

    .rq-detail__layout--admin > :is(.rq-detail__sidebar, .rq-detail__main) {
        grid-column: 1;
        grid-row: auto;
    }

    .rq-detail__layout--admin > .rq-detail__sidebar {
        position: static;
    }
}

/* Sección de la columna principal: tarjeta blanca con encabezado (título, meta y acciones) y cuerpo. */
.rq-detail-section {
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
    color: var(--rq-table-ink);
}

.rq-detail-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rq-table-line);
}

.rq-detail-section__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rq-table-ink);
}

.rq-detail-section__meta {
    margin: 0.15rem 0 0;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-detail-section__body {
    padding: 1.25rem;
}

.rq-detail-section .form-label,
.rq-detail__layout--admin .rq-detail__sidebar-card .form-label {
    margin-bottom: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rq-table-ink);
}

/* ----- Acciones de un formulario de filtros de la cabecera (envío + secundarias: Reiniciar, Descargar, Limpiar) ----- */
/* Fila completa bajo los campos, a la derecha; en una cabecera angosta, cada botón a todo el ancho. */
.rq-header__query-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

.rq-header__query-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: var(--rq-control-h);
}

@container rq-header (max-width: 420px) {
    .rq-header__query-actions > :not([type="hidden"]) {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ----- Card view de bootstrap-table (mobile): aire entre el rótulo y el valor ----- */
/* bootstrap-table fija el ancho del rótulo en 30%: un rótulo largo («Identificación») chocaba con su valor. Crece hasta
   la mitad de la tarjeta y deja un respiro; no se encoge (el que se ajusta es el valor) y solo parte una palabra que no
   cabe en esa mitad. */
.rq-table .card-view-title {
    width: auto !important;
    max-width: 50%;
    padding-inline-end: 0.75rem;
    flex-shrink: 0;
    overflow-wrap: break-word;
}

/* ----- Asistente por pasos (smartWizard) dentro de una superficie blanca: Merge de empresas ----- */
/* La superficie de tabla recorta su contenido (overflow: hidden); el asistente necesita mostrar sus desplegables. */
.rq-table-surface.rq-wizard {
    overflow: visible;
    padding: 1.25rem var(--rq-table-pad-x) 1.5rem;
}

.rq-wizard__title {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rq-table-ink);
}

.rq-wizard .tab-content {
    margin-top: 1.25rem;
}

/* Acordeón de seleccionados: neutro (sin el azul de Bootstrap) y con foco en tinta. */
.rq-wizard .accordion {
    --bs-accordion-active-bg: var(--rq-table-group);
    --bs-accordion-active-color: var(--rq-table-ink);
    --bs-accordion-btn-focus-box-shadow: none;
    margin-bottom: 1rem;
    border: 1px solid var(--rq-table-line);
    border-radius: var(--rq-card-radius);
    overflow: hidden;
}

.rq-wizard .accordion-button:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: -2px;
}

/* Barra y pasos de smartWizard (tema dots) en tinta. La librería pinta su barra en cian (blanco sobre #17a2b8 ≈ 3:1,
   bajo 4.5:1) con `.sw-theme-dots .toolbar > .btn`, que le gana a `.btn-dark` de #btnSend; el paso activo y los
   hechos van en cian/verde claros, y Bootstrap da a .nav-link un halo azul de foco casi invisible. */
.rq-wizard .sw-theme-dots .toolbar > .btn {
    border: 1px solid var(--rq-table-ink);
    background-color: var(--rq-table-ink);
    color: #fff;
}

.rq-wizard .sw-theme-dots > .nav .nav-link.active::after {
    background-color: var(--rq-table-ink) !important;
}

.rq-wizard .sw-theme-dots > .nav .nav-link.done::after {
    background-color: var(--rq-ok-ink);
}

.rq-wizard .nav-link:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
    box-shadow: none;
}

/* Interruptor «¿Con usuarios?» del paso 2 en tinta, como en formularios y fichas (no en el azul de Bootstrap). */
.rq-admin .rq-wizard .form-check-input {
    border-color: var(--rq-control-line);
}

.rq-admin .rq-wizard .form-check-input:checked {
    border-color: var(--rq-table-ink);
    background-color: var(--rq-table-ink);
}

.rq-admin .rq-wizard .form-check-input:focus {
    box-shadow: none;
}

.rq-admin .rq-wizard .form-check-input:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

/* Lista dentro de una nota informativa (varios puntos en vez de un párrafo). */
.rq-note__list {
    margin: 0;
    padding-left: 1.1rem;
}

.rq-note__list > li + li {
    margin-top: 0.25rem;
}

/* ----- Selección por tarjetas con logo e interruptor (multiposting: países, portales, agregadores) ----- */
/* Sin selección el logo va en gris; .is-selected (lo pone el JS de la página al cambiar el interruptor) lo colorea. */
.rq-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem;
}

.rq-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.9rem 0.75rem 0.75rem;
    border: 1px solid var(--rq-table-line);
    border-radius: var(--rq-card-radius);
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rq-pick--static {
    cursor: default;
}

.rq-pick__logo {
    width: 100%;
    max-width: 8rem;
    height: 3rem;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.rq-pick__name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rq-table-ink);
    overflow-wrap: anywhere;
}

.rq-pick__switch {
    min-height: 0;
    margin: 0;
}

.rq-pick.is-selected {
    border-color: var(--rq-table-ink);
    box-shadow: 0 0 0 1px var(--rq-table-ink);
}

.rq-pick.is-selected .rq-pick__logo {
    filter: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .rq-pick,
    .rq-pick__logo {
        transition: none;
    }
}

/* ----- Celdas largas en tablas del admin ----- */
/* Valor sin espacios (una URL guardada como identificación): se parte en cualquier punto en vez de ensanchar la
   columna. En una celda (td o data-class de bootstrap-table) además acota el ancho. */
.rq-table__break,
.rq-table__stack small.rq-table__break {
    overflow-wrap: anywhere;
}

.rq-table td.rq-table__break {
    min-width: 8rem;
    max-width: 14rem;
}

/* Card view de bootstrap-table: el valor cede y se parte para no salirse de la tarjeta a 390. */
.rq-table .card-view-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Texto largo en una celda (mensaje de una solicitud): tres líneas y el resto en un <details> («Ver mensaje
   completo»), que llega a teclado y tacto, a diferencia de un title. Al abrirlo, el recorte se oculta. */
.rq-table__clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

td:has(> .rq-table__more[open]) > .rq-table__clamp {
    display: none;
}

.rq-table__more > summary {
    margin-top: 0.25rem;
    font-size: var(--rq-font-micro);
    font-weight: 600;
    color: var(--rq-table-ink);
    text-decoration: underline;
    cursor: pointer;
}

.rq-table__more[open] > summary {
    margin-bottom: 0.25rem;
}

/* Estado vacío propio (admin.empty) dentro de la fila «sin registros» de bootstrap-table: su ícono reemplaza al
   genérico de la celda. */
.rq-table-surface .bootstrap-table .fixed-table-container .no-records-found > td:has(> .rq-page__empty)::before {
    content: none;
}

/* Pestaña activa con foco: el anillo se separa del indicador de 3px del borde inferior (si no, se montaban). */
.rq-header .rq-header__tab[aria-current="page"]:focus-visible {
    outline-offset: -6px;
}

/* Puntero grueso: más separación entre acciones de fila (botones a --rq-hit, centros a ≥ 24px). */
@media (pointer: coarse) {
    .rq-table__actions {
        gap: 0.5rem;
    }
}

/* =====================================================================================================
   Reportes de Ultron
   ===================================================================================================== */

/* ----- Calificación en estrellas (admin.stars): tono por valor; el número va en aria-label ----- */
/* rq-rating y no rq-stars: .rq-stars ya existe (estrellas de reseñas del LMS del candidato, Lms/reviewStars). */
.rq-rating {
    display: inline-flex;
    gap: 0.1rem;
    font-size: 0.9375rem;
    line-height: 1;
    white-space: nowrap;
}

.rq-rating__star {
    color: var(--rq-rating-off);
}

.rq-rating--low .rq-rating__star.is-on {
    color: var(--rq-danger);
}

.rq-rating--mid .rq-rating__star.is-on {
    color: var(--rq-warn-ink);
}

.rq-rating--high .rq-rating__star.is-on {
    color: var(--rq-ok-ink);
}

/* ----- Tarjeta KPI enlazada (admin.kpi con href): la tarjeta entera lleva al detalle de la cifra ----- */
.rq-kpi--link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease-out;
}

.rq-kpi--link:hover {
    color: inherit;
    /* Se eleva además del borde: el anillo solo apenas se notaba. */
    box-shadow: 0 0 0 1px var(--rq-control-line), var(--rq-card-shadow-hover);
}

.rq-kpi--link:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

.rq-kpi--link .rq-kpi__hint {
    text-decoration: underline;
    text-decoration-color: var(--rq-control-line);
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .rq-kpi--link {
        transition: none;
    }
}

/* ----- Barras horizontales (ranking, distribución): rótulo y cifra arriba, barra debajo a todo el ancho ----- */
/* El ancho llega como dato: style="--rq-share: 42.5%". La fila es un enlace (rq-surface-link) o un div. */
.rq-bars {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rq-bars__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.35rem 1rem;
    margin-inline: -0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    color: var(--rq-table-ink);
    text-decoration: none;
}

a.rq-bars__row:hover {
    background: var(--rq-table-hover);
    color: var(--rq-table-ink);
}

a.rq-bars__row:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

.rq-bars__label,
.rq-bars__value {
    min-width: 0;
    font-size: 0.875rem;
}

.rq-bars__value {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-bars__label small,
.rq-bars__value small {
    display: block;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-bars__track {
    grid-column: 1 / -1;
    height: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--rq-table-line);
}

.rq-bars__fill {
    display: block;
    width: var(--rq-share, 0%);
    min-width: 2px;
    height: 100%;
    border-radius: 4px;
    background: var(--rq-table-ink);
}

.rq-bars__fill--ok {
    background: var(--rq-ok-ink);
}

.rq-bars__fill--warn {
    background: var(--rq-warn-ink);
}

.rq-bars__fill--danger {
    background: var(--rq-danger);
}

.rq-bars__fill--muted {
    background: var(--rq-control-line);
}

.rq-bars__row--muted {
    color: var(--rq-table-muted);
}

/* Fila aparte del resto (ej. «Sin calificar» bajo las cinco calificaciones). */
.rq-bars__row--split {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--rq-table-line);
    border-radius: 0 0 8px 8px;
}

/* ----- Título de una superficie de tabla (h2 en el bloque toolbar de _tableSurface) ----- */
.rq-toolbar__title {
    margin: 0 auto 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rq-table-ink);
}

/* ----- Fila de totales de una tabla ----- */
.rq-table > tfoot > tr > * {
    border-top: 1px solid var(--rq-control-line);
    border-bottom: 0;
    font-weight: 700;
    color: var(--rq-table-ink);
}

/* ----- Grupo segmentado con botones (aria-pressed): cambia de vista con un envío; no es un radio que aplica al cambiar ----- */
button.rq-segmented__option {
    border: 0;
    background: transparent;
}

.rq-segmented__option[aria-pressed="true"] {
    background: var(--rq-table-ink);
    color: var(--rq-ink-inverse);
}

button.rq-segmented__option:not([aria-pressed="true"], :disabled):hover {
    background: var(--rq-table-hover);
}

.rq-segmented--glass button.rq-segmented__option:not([aria-pressed="true"], :disabled):hover {
    background: var(--rq-header-field-focus);
}

button.rq-segmented__option:focus-visible {
    outline: 2px solid var(--rq-table-ink);
    outline-offset: 2px;
}

/* ----- Consumo de IA: resumen del período (la cifra manda; su composición como una sola barra) ----- */
.rq-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
    color: var(--rq-table-ink);
}

/* Las dos columnas del resumen (la cifra · su composición): sin min-width la leyenda empuja la grilla. */
.rq-summary__main,
.rq-summary__side {
    min-width: 0;
}

.rq-summary__caption {
    margin: 0 0 0.35rem;
    font-size: var(--rq-font-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rq-table-muted);
}

.rq-summary__value {
    margin: 0;
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-summary__sub {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--rq-table-muted);
}

.rq-summary__cost {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--rq-table-line);
}

.rq-summary__money {
    margin: 0;
    font-size: clamp(1.35rem, 2.1vw, 1.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--rq-money);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-summary__currency {
    margin-right: 0.3rem;
    font-size: 0.5em;
    letter-spacing: 0.07em;
    color: var(--rq-table-muted);
    vertical-align: 0.5em;
}

/* «estimado» es parte del dato: sin esa palabra el número se lee como una factura. */
.rq-summary__tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: #e6f2f0;
    font-size: var(--rq-font-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rq-money);
    vertical-align: 0.35em;
}

.rq-summary__foot {
    margin: 0.875rem 0 0;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-summary__empty {
    margin: 0;
    padding: 1.75rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--rq-table-muted);
}

@media (min-width: 820px) {
    .rq-summary {
        grid-template-columns: minmax(14rem, auto) minmax(0, 1fr);
        gap: 2rem;
        align-items: center;
    }
}

/* Barra apilada: cada segmento recibe su ancho como dato (style="--rq-share: N%"). */
.rq-stackbar {
    display: flex;
    height: 26px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--rq-table-group);
}

.rq-stackbar__seg {
    display: block;
    width: var(--rq-share, 0%);
    height: 100%;
}

.rq-stackbar__seg--input {
    background: var(--rq-chart-series-2);
}

.rq-stackbar__seg--output {
    background: var(--rq-chart-series-5);
}

.rq-stackbar__seg--tools {
    background: var(--rq-chart-series-4);
}

.rq-stackbar__seg--other {
    background: var(--rq-rating-off);
}

.rq-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.rq-legend__item {
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-legend__swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 0.35rem;
    border-radius: 2px;
    vertical-align: middle;
}

.rq-legend__value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rq-table-ink);
    font-variant-numeric: lining-nums tabular-nums;
}

/* Un 0 con el mismo peso que el total se lee como «medimos cero», no como «no se mide». */
.rq-legend__value.is-zero {
    font-weight: 500;
    color: var(--rq-table-muted);
}

/* Cifras en dinero (en tablas le gana al color de celda de Bootstrap y al gris del <small> apilado). */
.rq-money,
small.rq-money,
.rq-table td.rq-money {
    color: var(--rq-money);
}

/* Aviso dentro de una fila de rq-bars (ej. «12% inferido» en el ranking que se factura). */
.rq-bars__flag {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0 0.375rem;
    border: 1px solid var(--rq-warn-ink);
    border-radius: 3px;
    font-size: var(--rq-font-micro);
    font-weight: 600;
    color: var(--rq-badge-warn-ink);
    white-space: nowrap;
}

/* Dos superficies lado a lado (5/12 + 7/12) desde 992px; apiladas debajo. */
.rq-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .rq-split {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
    }
}

/* ----- Casilla dentro de los filtros de la cabecera (ej. «Solo escaladas»), a la altura de los controles ----- */
.rq-header__check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--rq-control-h);
    margin: 0;
    color: var(--rq-header-ink);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.rq-header__check .form-check-input {
    --bs-form-check-bg-image: none;
    flex: none;
    margin: 0;
    border-color: var(--rq-header-line);
    background-color: var(--rq-header-field);
}

/* Marcada: fondo blanco y tilde en tinta (la de Bootstrap es blanca y se perdería). */
.rq-header__check .form-check-input:checked {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231c1f24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    border-color: #fff;
    background-color: #fff;
}

.rq-header__check .form-check-input:focus {
    box-shadow: none;
}

.rq-header__check .form-check-input:focus-visible {
    outline: var(--rq-focus-on-dark);
    outline-offset: 2px;
}

/* ----- Transcripción de una conversación (modal de agentes IA): neutra, sin el color del portal ----- */
.rq-chat {
    padding: 1.25rem 1rem 0.75rem;
    border: 1px solid var(--rq-table-line);
    border-radius: 12px;
    background: var(--rq-table-group);
}

.rq-chat__msg {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.rq-chat__msg--user {
    flex-direction: row-reverse;
}

.rq-chat__avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: var(--rq-font-micro);
    font-weight: 700;
}

.rq-chat__msg--agent .rq-chat__avatar {
    background: var(--rq-table-ink);
    color: #fff;
}

.rq-chat__msg--user .rq-chat__avatar {
    border: 1px solid var(--rq-table-line);
    background: #fff;
    color: var(--rq-table-muted);
}

.rq-chat__body {
    min-width: 0;
    max-width: 85%;
}

.rq-chat__bubble {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.rq-chat__msg--agent .rq-chat__bubble {
    border: 1px solid var(--rq-table-line);
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    color: var(--rq-table-ink);
}

.rq-chat__msg--user .rq-chat__bubble {
    border-radius: 14px 14px 4px 14px;
    background: var(--rq-chip-ink);
    color: #fff;
}

.rq-chat__time {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-chat__msg--user .rq-chat__time {
    text-align: right;
}

.rq-chat__day,
.rq-chat__event {
    margin: 0.25rem 0 1rem;
    text-align: center;
}

.rq-chat__event {
    margin-top: 1.25rem;
}

.rq-chat__day > span,
.rq-chat__event > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.875rem;
    border: 1px solid var(--rq-table-line);
    border-radius: 999px;
    background: #fff;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-chat__event--alert > span {
    border-color: var(--rq-danger);
    color: var(--rq-danger);
}

.rq-chat .rq-rating {
    font-size: 0.75rem;
}

/* ----- Derivación a una persona (ticket de Helpdesk) dentro del modal de conversación ----- */
.rq-handoff {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: 1rem;
}

.rq-handoff__label {
    margin: 0 0 0.35rem;
    font-size: var(--rq-font-micro);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--rq-table-muted);
}

.rq-handoff__quote {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rq-card-radius);
    background: var(--rq-table-group);
    font-size: 0.8125rem;
    color: var(--rq-table-muted);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.rq-handoff__answer {
    padding: 0.875rem 1rem;
    border: 1px solid var(--rq-table-line);
    border-radius: var(--rq-card-radius);
    font-size: 0.8125rem; /* el mismo cuerpo que la pregunta enviada */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.rq-handoff__meta {
    margin: 0.5rem 0 0;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
    white-space: normal;
}

.rq-handoff__survey {
    padding: 1rem;
    border: 1px solid var(--rq-table-line);
    border-radius: var(--rq-card-radius);
    font-size: 0.8125rem;
}

.rq-handoff__survey > * + * {
    margin-top: 0.75rem;
}

.rq-handoff__comment {
    margin-bottom: 0;
    font-style: italic;
}

/* ----- Tablero embebido (QuickSight) en una tarjeta sin padding ----- */
.rq-embed {
    overflow: hidden;
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
}

.rq-embed > .rq-note {
    margin: 1rem;
}

.rq-embed__frame {
    display: block;
    width: 100%;
    height: 800px;
    border: 0;
}

/* ----- Cifras de una sección de ficha (Prácticas Health por tipo): grilla de casillas con rótulo y valor ----- */
.rq-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.rq-metrics > div {
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--rq-table-line);
    border-radius: 8px;
}

.rq-metrics dt {
    margin: 0 0 0.2rem;
    font-size: var(--rq-font-micro);
    font-weight: 500;
    color: var(--rq-table-muted);
}

.rq-metrics dd {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--rq-table-ink);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-metrics .rq-metrics__value--ok {
    color: var(--rq-ok-ink);
}

.rq-metrics .rq-metrics__value--warn {
    color: var(--rq-warn-ink);
}

.rq-metrics .rq-metrics__value--danger {
    color: var(--rq-danger);
}

.rq-metrics__chart {
    margin-top: 1.25rem;
}

/* ----- Traspaso (rq-handoff) y conversación en dos columnas; paginación táctil ----- */
@container (min-width: 640px) {
    .rq-handoff {
        grid-template-columns: minmax(0, 1fr) 16rem;
    }

    .rq-chat__body {
        max-width: 68%;
    }
}

/* Puntero grueso: los enlaces de paginación (KNP y conversaciones) también llegan a --rq-hit. */
@media (pointer: coarse) {
    .rq-admin .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: var(--rq-hit);
        min-height: var(--rq-hit);
    }
}

/* ----- Variables de un correo (placeholders) bajo un campo o en la barra del editor ----- */
.rq-variables {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0.25rem 0 1rem;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-variables__title {
    font-weight: 600;
    color: var(--rq-table-ink);
}


/* ----- Seis KPIs (funnel de una campaña de invitación, Salud de prácticas): 2 / 3 / 6 por fila ----- */
@media (min-width: 1200px) {
    .rq-kpi-grid--six {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .rq-kpi-grid--six {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ----- Tarjetas de templates de mailing (lista de templates y paso 2 del envío) ----- */
.rq-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 1.125rem var(--rq-table-pad-x);
    list-style: none;
}

.rq-template-grid > li {
    min-width: 0;
}

.rq-template-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Sin overflow: hidden: recortaría el title que muestran al enfocarlas las acciones solo-ícono (::after hacia la
       izquierda). La miniatura recorta lo suyo. */
    border: 1px solid var(--rq-table-line);
    border-radius: var(--rq-card-radius);
    background: #fff;
    color: var(--rq-table-ink);
}

/* Destacado: borde en tinta (no el azul de Bootstrap ni el color del portal). */
.rq-template-card--featured {
    border-color: var(--rq-table-ink);
}

/* Inactivo: se atenúa la miniatura, no la tarjeta: textos y acciones conservan su contraste. */
.rq-template-card--inactive .rq-template-card__preview {
    opacity: 0.55;
}

.rq-template-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.875rem 1rem;
}

.rq-template-card__body--center {
    align-items: center;
    justify-content: center;
    min-height: 280px;
    text-align: center;
}

.rq-template-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
    min-height: 1.5rem;
}

.rq-template-card__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rq-template-card__title {
    margin: 0;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--rq-table-ink);
}

.rq-template-card__desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rq-table-muted);
}

.rq-template-card__icon {
    font-size: 3rem;
    color: var(--rq-table-muted);
}

/* Miniatura: el correo a la mitad de su tamaño. */
.rq-template-card__preview {
    position: relative;
    height: 180px;
    overflow: hidden;
    border: 1px solid var(--rq-table-line);
    border-radius: 6px;
    background: var(--rq-table-group);
}

.rq-template-card__preview iframe {
    width: calc(200% + 40px); /* la barra de desplazamiento del iframe queda fuera del recorte (20px a escala) */
    height: 360px;
    border: 0;
    transform: scale(0.5);
    transform-origin: top left;
    pointer-events: none;
}

.rq-template-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2rem;
    color: var(--rq-table-muted);
}

.rq-template-card__meta {
    margin: 0;
    font-size: var(--rq-font-micro);
    line-height: 1.6;
    color: var(--rq-table-muted);
}

.rq-template-card__foot {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--rq-table-line);
}

/* En la tarjeta las acciones pueden bajar de línea: no hay columna fija que respetar. */
.rq-template-card__foot .rq-table__actions {
    flex-wrap: wrap;
}

/* En la tarjeta las acciones son siempre solo ícono (no solo bajo 1240px de superficie, como en las filas): al
   enfocarlas con teclado su title se muestra en cualquier ancho. Va encima del botón, centrado (a la izquierda, como
   en las filas, lo recortaría el overflow de .rq-table-surface en la primera columna). Esc lo oculta (.is-tip-hidden,
   handler de main.js). */
.rq-template-card__foot .rq-table__actions .btn {
    position: relative;
}

.rq-template-card__foot .rq-table__actions .btn[title]:focus-visible:not(.is-tip-hidden)::after {
    content: attr(title) / '';
    position: absolute;
    top: auto;
    right: auto;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 2;
    width: max-content;
    max-width: 16rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--rq-table-ink);
    color: #fff;
    font-size: var(--rq-font-micro);
    font-weight: 600;
    line-height: 1.35;
    text-align: start;
    white-space: normal;
    transform: translateX(-50%);
    pointer-events: none;
}

.rq-template-card__choose {
    display: flex;
    gap: 0.5rem;
}

.rq-template-card__choose .btn {
    flex: 1 1 0;
}

/* Paso 2 del envío: toda la tarjeta elige; .selected la pone el JS del paso. */
.rq-template-card--selectable {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rq-template-card--selectable:hover {
    border-color: var(--rq-control-line);
}

.rq-template-card.selected {
    position: relative;
    border-color: var(--rq-table-ink);
    box-shadow: 0 0 0 2px var(--rq-table-ink);
}

/* Elegida: además del borde (que también tiene una destacada), cuerpo en gris y una marca de verificación en la esquina,
   así se distingue de una destacada sin depender del grosor del trazo. El nombre lo anuncia el estado del paso. */
.rq-template-card.selected .rq-template-card__body {
    background: var(--rq-table-group);
}

.rq-template-card.selected::after {
    content: "";
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--rq-table-ink) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") no-repeat 50% / 0.8rem;
}

.rq-template-card--scratch {
    border-style: dashed;
    background: var(--rq-table-group);
}

@media (prefers-reduced-motion: reduce) {
    .rq-template-card--selectable {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .rq-template-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Vista previa de un correo en un drawer: iframe a todo el ancho y al alto del cuerpo del drawer (el drawer ocupa la
   altura de la ventana; con 500px fijos sobraba espacio en pantallas altas y había doble scroll en las bajas). */
.modal-body:has(> .rq-preview-frame) {
    display: flex;
    flex-direction: column;
}

.rq-preview-frame {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 500px;
    border: 0;
}

/* Tutorial guiado (intro.js con tooltipClass: 'rq-tour'): avatar de Riah a la izquierda del mensaje. La clase propia
   le gana a la regla de intro.js sin !important y no toca los tutoriales de otras pantallas. */
.introjs-tooltip.rq-tour {
    min-width: min(400px, 92vw);
    max-width: min(600px, 92vw);
    font-size: 1rem;
    text-align: start;
}

.rq-tour__avatar {
    float: left;
    margin-right: 10px;
}

.rq-tour__avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.rq-tour__message {
    overflow: hidden;
}

/* ----- Editor de correos (GrapesJS) en una tarjeta, con variables y vista por dispositivo en su barra ----- */
.rq-editor-card {
    overflow: hidden;
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
    color: var(--rq-table-ink);
}

.rq-editor-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem var(--rq-table-pad-x);
    border-bottom: 1px solid var(--rq-table-line);
    background: var(--rq-table-group);
}

.rq-editor-card__head .rq-variables {
    margin: 0;
}

.rq-editor-card__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--rq-table-ink);
}

/* Vista por dispositivo (escritorio / tablet / móvil): grupo de botones; .active la pone el JS de la página. */
.rq-device-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 3px;
    border: 1px solid var(--rq-control-line);
    border-radius: var(--rq-input-radius);
    background: #fff;
}

.rq-device-switch__label {
    margin: 0 0.25rem 0 0.35rem;
    font-size: var(--rq-font-micro);
    font-weight: 600;
    color: var(--rq-table-muted);
}

.rq-device-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--rq-segmented-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.rq-device-switch__btn:hover {
    background: var(--rq-table-hover);
    color: var(--rq-table-ink);
}

.rq-device-switch__btn.active {
    background: var(--rq-table-ink);
    color: #fff;
}

.rq-device-switch__btn:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .rq-device-switch__btn {
        min-width: var(--rq-hit);
        min-height: var(--rq-hit);
        justify-content: center;
    }
}

/* Título de una tarjeta plegable (configuración del template): el botón ocupa el título y gira el chevrón. */
.rq-collapse-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
}

.rq-collapse-toggle .fa-chevron-down {
    transition: transform 0.15s ease-out;
}

.rq-collapse-toggle[aria-expanded="false"] .fa-chevron-down {
    transform: rotate(-90deg);
}

.rq-admin .rq-collapse-toggle:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rq-collapse-toggle .fa-chevron-down {
        transition: none;
    }
}

/* ----- Envío de mailing (asistente de 4 pasos en rq-wizard) ----- */
/* El asistente tiene overlays adentro (drawer de vista previa del paso 2, modales de GrapesJS del paso 4). El
   container de .rq-table-surface (inline-size) aplica layout containment: la superficie pasaría a ser contexto de
   apilamiento y bloque contenedor de los position: fixed, y el drawer quedaría bajo el backdrop de Bootstrap (que va
   en <body>). Nada del asistente usa las container queries de rq-surface. */
.rq-table-surface.rq-wizard--open {
    container-type: normal;
}

/* Los desplegables de Selectize del paso (campaña, portal de envío, filtros) bajan fuera del panel: visible solo en
   vertical. En horizontal se recorta (clip, que a diferencia de hidden no convierte el otro eje en scroll): la
   transición slide-horizontal de smartWizard mueve los pasos con position: absolute fuera del ancho del panel, y sin
   recorte se veían cruzar la página y ensanchaban el documento durante la animación. La hoja de smartWizard pone
   overflow: hidden y esta regla le gana por especificidad, sin !important. Mientras smartWizard anima el alto
   (autoAdjustHeight, .animate de jQuery) el overflow: hidden en línea que pone jQuery manda; es a propósito: recorta
   el paso que entra y se quita al terminar. */
.rq-wizard--open .sw > .tab-content {
    overflow-x: clip;
    overflow-y: visible;
}

/* El aviso de carga de bootstrap-table es absoluto dentro de .fixed-table-container, que va debajo de la barra (buscador
   + Seleccionar todos): aunque la barra baje a dos líneas, no la tapa. bootstrap-table le pone en línea top = alto del
   encabezado + 1, pero mide el encabezado al iniciar, con el paso 3 oculto (0px): el aviso taparía el encabezado. Los
   64px dejan el encabezado a la vista; !important porque el top de bootstrap-table va en línea. */
.rq-composer .bootstrap-table .fixed-table-loading {
    top: 64px !important;
    position: absolute !important;
}

.rq-composer__step {
    padding: 1.25rem 0 0.5rem;
}

.rq-composer__step--users {
    min-height: 650px;
}

.rq-composer__intro {
    max-width: 40rem;
    margin: 0 auto 1rem;
    text-align: center;
}

.rq-composer__intro p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--rq-table-muted);
}

.rq-composer__intro--split {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rq-table-line);
}

.rq-composer__field {
    max-width: 32rem;
    margin: 0 auto;
}

.rq-composer__campaign {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}

.rq-composer__muted {
    color: var(--rq-table-muted);
}

.rq-composer__help {
    margin-bottom: 1rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--rq-table-line);
    border-radius: 8px;
    font-size: 0.8125rem;
}

.rq-composer__help-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rq-table-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.rq-composer__help-toggle:hover {
    color: var(--rq-table-ink);
}

.rq-admin .rq-composer__help-toggle:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

/* Filtros del paso 3 (personas y empresas): panel gris con títulos por grupo y acciones a la derecha. */
.rq-composer__filters {
    padding: 1rem 1.125rem;
    border: 1px solid var(--rq-table-line);
    border-radius: var(--rq-card-radius);
    background: var(--rq-table-group);
}

.rq-composer__filters-title {
    margin: 1rem 0 0.5rem;
    font-size: var(--rq-font-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rq-table-muted);
}

.rq-composer__filters-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.rq-admin .rq-composer__filters :is(.form-control, .form-select),
.rq-admin .rq-composer__filters :is(.form-control, .form-select):focus {
    border-color: var(--rq-control-line);
    box-shadow: none;
}

.rq-admin .rq-composer__filters :is(.form-control, .form-select):focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 1px;
}

/* Tope del Selectize múltiple de carreras: con muchas elegidas no tapa los filtros de abajo. */
.rq-selectize-capped .selectize-input {
    max-height: 120px;
    overflow-y: auto;
}

.rq-composer .accordion {
    margin-top: 1rem;
}

.rq-composer__total {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Resumen del envío en el diálogo de confirmación (SweetAlert, fuera de .rq-admin). */
.rq-send-summary {
    font-size: 0.875rem;
    line-height: 1.8;
    text-align: start;
}

.rq-send-summary p {
    margin: 0;
}

/* ----- Paso 2 del envío, template elegido (.show la pone el JS al elegir) ----- */
.rq-template-picked {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--rq-ok-ink);
    border-radius: 6px;
    background: var(--rq-table-group);
    font-size: 0.875rem;
    color: var(--rq-table-ink);
}

.rq-template-picked.show {
    display: flex;
}

.rq-template-picked > span > i {
    color: var(--rq-ok-ink);
}

/* ----- Paso 4 del envío (configuración del correo, editor y asistente de IA) ----- */
.rq-mail-config {
    padding: 1.25rem 0 0.5rem;
    border-bottom: 1px solid var(--rq-table-line);
}

.rq-mail-editor {
    padding-top: 1.25rem;
}

.rq-mail-editor__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rq-table-line);
    border-radius: var(--rq-card-radius);
    background: var(--rq-table-group);
}

.rq-mail-editor__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.rq-mail-editor__info .rq-variables {
    margin: 0;
}

.rq-mail-editor__tip {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rq-table-muted);
}

.rq-mail-editor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .rq-mail-editor__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* --- Asistente de IA del envío. mai-*: clases que también arma public/js/assets/mailingAiChat.js (no renombrar). --- */
.mai-panel {
    border: 1px solid var(--rq-table-line);
    border-radius: var(--rq-input-radius);
    /* Vertical en auto: en un portátil de 1366x768 (viewport útil ~640px), con una imagen elegida la fila de Archivo y
       Enviar quedaba fuera de la caja e inalcanzable con el mouse. */
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
    /* Empata con el editor, pero sin pasarse del fold en un portátil de 768px de alto. */
    height: min(600px, calc(100vh - 220px));
    background: #fff;
}

.mai-header {
    background: var(--rq-table-group);
    padding: 10px 15px;
    border-bottom: 1px solid var(--rq-table-line);
    font-weight: 600;
    font-size: 14px;
    /* Es un encabezado de verdad (nombra la región): sin esto heredaría el margen del tema. */
    margin: 0;
}

.mai-anchor {
    padding: 10px 12px;
    border-bottom: 1px solid var(--rq-table-line);
}

.mai-mensajes {
    flex: 1;
    /* El flex item no se encoge por debajo de su contenido salvo que se le diga. */
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Piso de la conversación (la bienvenida entera, en el idioma más largo) solo con alto de sobra: por debajo de 700px el
   piso empujaba la fila de Archivo y Enviar fuera del panel. */
@media (min-height: 700px) {
    .mai-mensajes {
        min-height: 122px;
    }
}

.mai-vacio {
    color: var(--rq-table-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: auto 0;
    text-align: center;
    padding: 0 10px;
}

.mai-msg {
    padding: 8px 12px;
    border-radius: var(--rq-card-radius);
    font-size: 13px;
    line-height: 1.5;
    max-width: 90%;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Burbuja del admin en tinta (tema neutro; antes, azul de Bootstrap). */
.mai-msg-admin {
    background: var(--rq-table-ink);
    color: #fff;
    align-self: flex-end;
}

.mai-msg-ia {
    background: var(--rq-badge-muted-bg);
    color: var(--rq-table-ink);
    align-self: flex-start;
}

/* El envío frenado por la revisión: se ve inactivo sin disputarle `disabled` al wizard. */
.mai-bloqueado {
    opacity: .5;
    cursor: not-allowed;
}

/* Un error no puede parecerse a una respuesta del asistente. */
.mai-msg-error {
    background: var(--rq-diff-del-bg);
    color: var(--rq-diff-del-ink);
    align-self: flex-start;
}

.mai-pensando {
    padding: 0 12px 8px;
    font-size: 12px;
    color: var(--rq-table-muted);
}

.mai-input {
    padding: 10px 12px;
    border-top: 1px solid var(--rq-table-line);
}

/* El panel tiene alto fijo: agrandar el textarea con el tirador dejaba «Enviar» fuera de la caja hasta recargar. */
.mai-input textarea {
    resize: none;
}

/* El layout del correo mide 600px de ancho y el canvas de GrapesJS tiene overflow oculto: con el asistente abierto, entre
   la paleta (200px) y el panel de estilos (220px) el canvas quedaba en 355px y se perdían 246px de cada correo. Mientras
   el asistente está abierto gana el correo.
   Los selectores llevan dos ids porque las reglas de `_gjsEditor` usan `!important` y se imprimen después: ganar por
   orden no alcanza, hay que ganar por especificidad. */
#editorCol.mai-sin-paneles #gjsMailing-editor-wrapper .gjs-pn-views-container,
#editorCol.mai-sin-paneles #gjsMailing-editor-wrapper .gjs-pn-views {
    display: none !important;
}

/* Pantalla ancha: la paleta se angosta pero sigue ahí, así que arrastrar bloques a mano sigue disponible con el asistente
   abierto. */
#editorCol.mai-sin-paneles #gjsMailing-blocks-panel {
    width: 160px !important;
}

#editorCol.mai-sin-paneles #gjsMailing-editor-wrapper .gjs-cv-canvas {
    left: 160px !important;
    width: calc(100% - 160px) !important;
}

#editorCol.mai-sin-paneles #gjsMailing-editor-wrapper .gjs-pn-panel.gjs-pn-options {
    left: 160px !important;
}

/* Más angosto que esto no entran las dos cosas: se esconde la paleta, que vuelve entera al cerrar el asistente. Por
   debajo de 992px las columnas se apilan y el editor vuelve a tener el ancho completo. */
@media (min-width: 992px) and (max-width: 1550px) {
    #editorCol.mai-sin-paneles #gjsMailing-blocks-panel {
        display: none !important;
    }
    #editorCol.mai-sin-paneles #gjsMailing-editor-wrapper .gjs-cv-canvas {
        left: 0 !important;
        width: 100% !important;
    }
    #editorCol.mai-sin-paneles #gjsMailing-editor-wrapper .gjs-pn-panel.gjs-pn-options {
        left: 0 !important;
    }
}

@media (max-width: 991.98px) {
    /* Apilado a ancho completo no compite con el canvas: sin caja fija, «Archivo» y «Enviar» no se recortan. */
    .mai-panel {
        height: auto;
        margin-top: 16px;
    }
}

/* ----- Botón solo-ícono junto a un valor de una celda (editar el portal o el tipo de un feedback) ----- */
.rq-inline-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--rq-table-muted);
    vertical-align: middle;
}

.rq-inline-edit:hover {
    background: var(--rq-badge-muted-bg);
    color: var(--rq-table-ink);
}

.rq-inline-edit:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 1px;
}

@media (pointer: coarse) {
    .rq-inline-edit {
        width: var(--rq-hit);
        height: var(--rq-hit);
    }
}

/* ----- Archivos adjuntos bajo el texto de una celda ----- */
.rq-table__files {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0 0;
    border-top: 1px solid var(--rq-table-line);
    list-style: none;
    font-size: var(--rq-font-micro);
}

/* ----- Conteo dentro de un botón de fila (registros unidos). Va fuera de rq-table__action-label: se ve
   también cuando el botón queda solo con el ícono. ----- */
.rq-table__action-count {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--rq-table-ink);
    color: var(--rq-ink-inverse);
    font-size: var(--rq-font-micro);
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: lining-nums tabular-nums;
}

/* ----- Preguntas en lenguaje natural (Q&A de QuickSight) sobre el tablero embebido ----- */
.rq-embed__frame--qna {
    height: 300px;
}

.rq-embed__frame--qna:not([hidden]) + .rq-embed__frame {
    border-top: 1px solid var(--rq-table-line);
}

/* ----- Texto largo de una celda en una sola copia. El botón despliega el recorte de rq-table__clamp
   y solo se muestra (atributo hidden) cuando el recorte esconde texto. ----- */
.rq-table__clamp--open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.rq-table__more-toggle {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--rq-font-micro);
    font-weight: 600;
    color: var(--rq-table-ink);
    text-decoration: underline;
    cursor: pointer;
}

.rq-table__more-toggle:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 1px;
}

/* ----- Campo obligatorio y su error junto al control (formularios armados a mano) ----- */
.rq-required {
    margin-left: 0.125rem;
    color: var(--rq-danger);
}

.rq-field-error {
    margin: 0.25rem 0 0;
    color: var(--rq-danger);
    font-size: 0.8125rem;
}

/* ----- Tablero embebido que cabe en la ventana (en un teléfono, 800 px eran pantalla y media) ----- */
.rq-embed__frame--fit {
    height: min(800px, 85vh);
}

/* «Ver tabla de datos» de Highcharts (export-data): la tabla que el módulo inserta bajo el gráfico, con la tinta, las
   líneas y la alineación numérica de rq-table (sin esto se veía en 12 px, con bordes crudos y foco azul). */
.rq-admin .highcharts-data-table {
    margin-top: 1rem;
    overflow-x: auto;
}

.rq-admin .highcharts-data-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    color: var(--rq-table-ink);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-admin .highcharts-data-table caption {
    caption-side: top;
    padding: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--rq-table-ink);
    text-align: left;
}

.rq-admin .highcharts-data-table :is(th, td) {
    padding: 0.5rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--rq-table-line);
    text-align: left;
}

.rq-admin .highcharts-data-table thead th {
    font-size: var(--rq-font-micro);
    font-weight: 600;
    color: var(--rq-table-muted);
}

.rq-admin .highcharts-data-table td.highcharts-number,
.rq-admin .highcharts-data-table thead th:not(:first-child) {
    text-align: right;
}

.rq-admin .highcharts-data-table :focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

/* Datos clave en dos columnas también en el teléfono (Totales de Prácticas Health: doce líneas en una columna). */
@media (max-width: 575.98px) {
    .rq-facts.rq-facts--duo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ranking en una tarjeta angosta (Top campañas del dashboard): la cifra con ancho fijo a la derecha y el nombre
   recortado con «…» (completo en el title); a 1280 la tasa quedaba fuera de la tarjeta. */
.rq-table.rq-table--rank {
    table-layout: fixed;
    width: 100%;
}

.rq-table--rank :is(th, td):last-child {
    width: 6.5rem;
    white-space: nowrap;
}

.rq-table--rank thead th:last-child {
    white-space: normal;
}

.rq-table--rank .rq-badge {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Valor sin espacios que no se parte (un correo): una línea recortada con «…», completo en el title. En la card view
   vuelve a partirse para verse entero. */
.rq-table td.rq-table__clip {
    max-width: 11rem;
}

.rq-table__clip-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rq-table .card-view .rq-table__clip-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Barra de formulario a 390: Cancelar y Guardar lado a lado (apilados medían ~130px y tapaban el campo enfocado con
   Tab); el campo enfocado además guarda distancia de la barra. */
@media (max-width: 575.98px) {
    .rq-form-bar__main {
        flex-direction: row;
    }

    .rq-form-bar__main > :is(.btn, input[type="submit"], button) {
        flex: 1 1 0;
        width: auto;
    }

    html:has(.rq-form-bar) .rq-admin :is(input, select, textarea, .selectize-input) {
        scroll-margin-bottom: calc(7.5rem + env(safe-area-inset-bottom));
    }
}

/* Editores GrapesJS del Mailing de Ultron: paso 4 del envío (#gjsMailing) y editor de plantillas (#gjs). Entre 992 y
   1439px la paleta y el panel de estilos se angostan para que el canvas llegue a los 600px del correo (a 1280 quedaba en
   536 y 592px). Las reglas de _gjsEditor llevan !important y se imprimen después: el paso 4 gana con dos ids y la
   plantilla con clase + id. Con el asistente abierto mandan las reglas mai-sin-paneles. */
@media (min-width: 992px) and (max-width: 1439.98px) {
    #editorCol:not(.mai-sin-paneles) #gjsMailing-blocks-panel {
        width: 136px !important;
    }

    #editorCol:not(.mai-sin-paneles) #gjsMailing-blocks-panel .gjs-block {
        width: 100% !important;
        min-height: 60px !important;
    }

    .rq-editor-card #gjs-editor-wrapper #gjs-blocks-panel {
        width: 136px;
    }

    #editorCol:not(.mai-sin-paneles) #gjsMailing-editor-wrapper .gjs-cv-canvas,
    .rq-editor-card #gjs-editor-wrapper .gjs-cv-canvas {
        left: 136px !important;
        width: calc(100% - 136px - 160px) !important;
    }

    #editorCol:not(.mai-sin-paneles) #gjsMailing-editor-wrapper .gjs-pn-panel.gjs-pn-options,
    .rq-editor-card #gjs-editor-wrapper .gjs-pn-panel.gjs-pn-options {
        left: 136px !important;
    }

    #editorCol:not(.mai-sin-paneles) #gjsMailing-editor-wrapper .gjs-pn-views-container,
    .rq-editor-card #gjs-editor-wrapper .gjs-pn-views-container {
        width: 160px !important;
    }
}

/* En el teléfono el panel de estilos tapaba el canvas (quedaban 140 y 196px): el canvas toma todo el ancho (se edita el
   texto en el correo; estilos y capas quedan para pantallas más anchas). */
@media (max-width: 767.98px) {
    #editorCol #gjsMailing-editor-wrapper .gjs-pn-views-container,
    #editorCol #gjsMailing-editor-wrapper .gjs-pn-views,
    .rq-editor-card #gjs-editor-wrapper .gjs-pn-views-container,
    .rq-editor-card #gjs-editor-wrapper .gjs-pn-views {
        display: none !important;
    }

    #editorCol #gjsMailing-editor-wrapper .gjs-cv-canvas,
    .rq-editor-card #gjs-editor-wrapper .gjs-cv-canvas {
        left: 0 !important;
        width: 100% !important;
    }
}

/* Pasos del asistente a 390: los cuatro puntos en una fila y solo el rótulo del paso actual (apilados ocupaban la
   primera pantalla entera). !important: la hoja de smartWizard apila la barra con flex-direction: column !important. */
@media (max-width: 575.98px) {
    .rq-wizard .sw > .nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
    }

    .rq-wizard .sw > .nav .nav-item {
        flex: 1 1 0;
        min-width: 0;
    }

    .rq-wizard .sw > .nav .nav-link {
        padding-inline: 0.25rem;
        text-align: center;
    }

    .rq-wizard .sw > .nav .nav-link:not(.active) {
        font-size: 0;
    }

    .rq-wizard .sw > .nav .nav-link:not(.active) strong {
        font-size: var(--rq-font-micro);
    }
}

/* Paso 3 del envío: deslizadores y Selectize en tinta (no el azul de Bootstrap / jQuery UI). */
.rq-wizard .ui-slider .ui-slider-range,
.rq-wizard .ui-slider.ui-widget-content .ui-widget-header {
    border-color: var(--rq-table-ink);
    background: var(--rq-table-ink);
}

.rq-wizard .ui-slider .ui-slider-handle,
.rq-wizard .ui-slider .ui-slider-handle:is(.ui-state-default, .ui-state-hover, .ui-state-focus, .ui-state-active) {
    border-color: var(--rq-table-ink);
    background: #fff;
    color: var(--rq-table-ink);
}

.rq-wizard .ui-slider .ui-slider-handle:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

.rq-admin .rq-wizard .selectize-dropdown .active {
    background-color: var(--rq-table-hover);
    color: var(--rq-table-ink);
}

.rq-admin .rq-wizard .selectize-input.focus {
    border-color: var(--rq-table-ink);
    box-shadow: 0 0 0 1px var(--rq-table-ink);
}

/* Acciones solo-ícono de una fila: el título con teclado va encima del botón (a la izquierda tapaba la celda vecina);
   en la primera fila sigue a la izquierda para que no lo recorte el borde de la superficie. Enfocado, el botón
   conserva su fondo (con el gris de Bootstrap parecía deshabilitado). */
.rq-table tbody tr:not(:first-child) .rq-table__actions .btn[title]:focus-visible:not(.is-tip-hidden)::after {
    top: auto;
    right: 0;
    bottom: calc(100% + 6px);
    transform: none;
}

.rq-admin .rq-table__actions .btn-outline-secondary:focus-visible:not(:hover) {
    border-color: var(--rq-control-line);
    background-color: #fff;
    color: var(--rq-table-ink);
    box-shadow: none;
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

/* Selector de ícono de una categoría: el ícono elegido en una caja con borde junto al campo. */
.rq-admin .input-group > .input-group-text.selected-icon {
    justify-content: center;
    min-width: 2.5rem;
    border: 1px solid var(--rq-control-line);
    background: var(--rq-table-group);
    color: var(--rq-table-ink);
}

/* Subtítulo de la cabecera a 390: en su propia línea, alineado con el título. */
@media (max-width: 575.98px) {
    .rq-header__title small {
        display: block;
        margin: 0.15rem 0 0;
    }
}

/* Seis KPIs (funnel de una campaña) y cuatro (Feedback) a 390: dos por fila (uno por fila medían ~730px). */
@media (max-width: 575.98px) {
    .rq-kpi-grid:is(.rq-kpi-grid--six, .rq-kpi-grid--duo) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Casilla de selección de una fila: el borde gris claro de Bootstrap (1,3:1) casi no se ve; la tinta secundaria
   llega a 3:1 (WCAG 1.4.11). La marcada conserva el de Bootstrap. */
.rq-table .form-check-input:not(:checked) {
    border-color: var(--rq-table-muted);
}

/* rq-table--stack-sm con las acciones debajo del resto de la fila (y no en una columna a la derecha): con varios
   botones, esa columna se comía la mitad de la pantalla. */
@media (max-width: 575.98px) {
    .rq-table--stack-sm.rq-table--actions-below > tbody > tr > :last-child:not(:first-child) {
        grid-column: 1;
        grid-row: auto;
        align-self: start;
        position: static;
        box-shadow: none;
        animation: none;
    }

    .rq-table--stack-sm.rq-table--actions-below > tbody > tr > :last-child:not(:first-child):has(> .rq-table__actions) {
        width: auto;
        min-width: 0;
        white-space: normal;
    }

    .rq-table--stack-sm.rq-table--actions-below .rq-table__actions {
        flex-wrap: wrap;
        white-space: normal;
    }

    .rq-table--stack-sm.rq-table--actions-below .rq-table__text {
        min-width: 0;
        max-width: none;
    }
}

/* Columna de texto que necesita más aire que el mínimo compacto (título de una notificación). */
.rq-table--compact .rq-table__text.rq-table__text--wide {
    min-width: 11rem;
}

/* Encabezado de una métrica que puede ir en dos líneas: no fija el ancho de la columna con su rótulo. */
.rq-table thead th.rq-table__head-wrap {
    white-space: normal;
}

/* Celda centrada en vertical (una etiqueta junto a un badge de la fila). */
.rq-table td.rq-table__middle {
    vertical-align: middle;
}

/* Mensaje (TinyMCE) con error: el borde rojo de los demás campos. */
.rq-admin .tox-tinymce[aria-invalid="true"] {
    border-color: var(--rq-danger);
}

/* Footer de un drawer con contenido corto: al fondo del panel, no a media altura. */
.modal.rq-drawer #pop_up_window:has(> .rq-drawer__footer--end) {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.modal.rq-drawer .rq-drawer__footer--end {
    margin-top: auto;
}

/* ── rq-spark: mini tendencia en barras (SGI y cualquier serie corta). El alto de cada barra
   viene del dato en pasos de 10 % (custom property --rq-h en el elemento); tinta neutra del sistema. El borrador se distingue por forma
   (contorno), no solo por color. ── */
.rq-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; vertical-align: middle; }
.rq-spark__bar { width: 5px; height: var(--rq-h, 50%); background: var(--rq-chart-ink, #334155); border-radius: 1px; }
.rq-spark__bar--draft { background: repeating-linear-gradient(0deg, var(--rq-chart-ink, #334155) 0 2px, transparent 2px 4px); }
/* En alto contraste el navegador forzaría el fondo de las barras y desaparecerían: se pintan con el color de texto
   del sistema y el borrador conserva su rayado. */
@media (forced-colors: active) {
    .rq-spark__bar { forced-color-adjust: none; background: CanvasText; }
    .rq-spark__bar--draft { background: repeating-linear-gradient(0deg, CanvasText 0 2px, transparent 2px 4px); }
}

/* ── rq-tally: tira de conteos por estado sobre un listado; cada ítem filtra el listado.
   El color va solo en el borde izquierdo (base neutra). ── */
.rq-tally { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--rq-section-gap); }
.rq-tally__item { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.5rem 0.875rem; background: #fff; border: 1px solid var(--rq-table-line); border-left-width: 3px; border-radius: var(--rq-input-radius); color: #334155; font-size: 0.875rem; text-decoration: none; }
.rq-tally__item:hover, .rq-tally__item[aria-current] { border-top-color: var(--rq-table-muted); border-right-color: var(--rq-table-muted); border-bottom-color: var(--rq-table-muted); color: var(--rq-table-ink); }
.rq-tally__item[aria-current] { box-shadow: inset 0 -2px 0 var(--rq-table-ink); }
.rq-tally__item:focus-visible { outline: var(--rq-focus-on-light); outline-offset: 2px; }
.rq-tally__n { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rq-table-ink); }
.rq-tally__item--danger { border-left-color: var(--rq-danger); }
.rq-tally__item--warn { border-left-color: var(--rq-warn-ink); }
.rq-tally__item--ok { border-left-color: var(--rq-ok-ink); }
.rq-tally__item--muted { border-left-color: var(--rq-table-muted); }

/* Alto contraste (forced-colors): el estado seleccionado/actual se marca con fondo, sombra o color de borde, y el
   navegador los reemplaza por colores del sistema. Aquí se marca con Highlight/HighlightText (relleno), con el borde
   inferior de la pestaña o con un contorno, que sobreviven. */
@media (forced-colors: active) {
    .rq-segmented .btn-check:checked + .rq-segmented__option,
    .rq-segmented--glass .btn-check:checked + .rq-segmented__option,
    .rq-segmented__option[aria-pressed="true"],
    .rq-subnav__link:is([aria-current="page"], [aria-current="true"]) {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }

    .rq-header__tab {
        border-bottom-color: Canvas;
    }

    .rq-header__tab[aria-current="page"] {
        border-bottom-color: Highlight;
    }

    .rq-tally__item[aria-current] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

/* ── rq-code: código corto (OBJ-01, IA-03.1) antes de un nombre, para escanear listados. ── */
.rq-code { font-variant-numeric: tabular-nums; color: var(--rq-table-muted); font-weight: 600; margin-right: 0.25rem; }

/* ── rq-sublist: lista compacta dentro de una celda o tarjeta (evidencias, tratamientos, versiones). ── */
.rq-sublist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.rq-sublist > li { padding-left: 0.625rem; border-left: 2px solid var(--rq-table-line); }
.rq-sublist__meta { color: var(--rq-table-muted); font-size: 0.875em; }

/* ── rq-icon-btn: botón de solo ícono con área táctil mínima de 24×24 (WCAG 2.5.8). ── */
.rq-icon-btn { min-width: 24px; min-height: 24px; padding: 0.125rem 0.25rem; line-height: 1; }
.rq-icon-btn:is(:hover, :focus-visible) { background: var(--rq-table-hover); box-shadow: inset 0 0 0 1px var(--rq-table-line); }

/* ── rq-table--fixed: columnas de ancho fijo para que tablas apiladas (un panel por grupo) queden
   alineadas entre sí. La primera columna toma el resto. ── */
.rq-table--fixed { table-layout: fixed; min-width: 60rem; }
.rq-table--fixed .rq-col-sm { width: 7.5rem; }
.rq-table--fixed .rq-col-md { width: 10rem; }
.rq-table--fixed .rq-col-lg { width: 15rem; }


/* ── rq-sgi: pantallas de Objetivos del SGI (Ultron). Ajustes acotados a ese módulo para no cambiar
   otras páginas que comparten los mismos componentes. ── */
/* Chip «peligro» del semáforo: la regla de --danger de rq-eval (mayúsculas, !important) no debe pisar el color
   semántico (ok/warn/muted van con las piezas de admin). rq-badges-semantic aplica solo estos colores fuera del módulo
   (severidades del changelog) sin el resto de .rq-sgi. */
:is(.rq-sgi, .rq-badges-semantic) .rq-badge--danger {
    background: #fee2e2 !important;
    color: #7f1d1d !important;
    border-color: #fecaca;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    margin-top: 0;
}
/* El estado vacío dentro de un panel no repite el marco del panel. */
.rq-sgi .rq-page__panel > .rq-page__empty { box-shadow: none; border-radius: 0; margin: 0; }
/* Claves técnicas (recolector): neutras, no el rosa de Bootstrap. */
.rq-sgi code { color: var(--rq-badge-muted-ink); background: var(--rq-badge-muted-bg); padding: 0 0.25rem; border-radius: 4px; font-size: 0.8125rem; }
/* Encabezado con acciones: el texto toma el espacio y las acciones quedan a la derecha. */
.rq-sgi .rq-page__header--with-actions > :first-child { flex: 1 1 28rem; min-width: 0; }
/* Texto de varias líneas escrito en un textarea (acciones planificadas): respeta los saltos. */
.rq-sgi .rq-pre-line { white-space: pre-line; }
/* Fila a la que lleva un enlace de "pendientes anteriores": se resalta para encontrarla. */
.rq-sgi tr:target > td { background: var(--rq-target-bg); }
.rq-sgi tr:target > td:first-child { box-shadow: inset 3px 0 0 var(--rq-target-line); }
/* Desglose del recolector dentro de la celda Período: ancho acotado para que la tabla no salte al abrirlo ni desborde en móvil. */
.rq-sgi .rq-sgi-breakdown { min-width: 16rem; max-width: 28rem; overflow-wrap: anywhere; }
/* La fila con desglose alinea arriba (el panel fija middle en sus celdas) y el término no se parte letra a letra. */
.rq-sgi .rq-page__panel .table > tbody > tr.align-top > td { vertical-align: top; }
.rq-sgi .rq-sgi-breakdown .rq-preview-facts--inline > div { flex-wrap: wrap; }
.rq-sgi .rq-sgi-breakdown .rq-preview-facts--inline dt { flex: 0 0 auto; overflow-wrap: normal; }
/* Los textos .visually-hidden (absolutos) de las celdas quedan dentro del scroll de la tabla, no ensanchan la página en móvil. */
.rq-sgi .table-responsive { position: relative; }
/* Historial de mediciones: 8 columnas junto al menú lateral; celdas más angostas y encabezados que parten línea para caber a 1440 px sin scroll. */
.rq-sgi .rq-page__panel .rq-sgi-history > :is(thead, tbody) > tr > :is(th, td) { padding-left: 0.75rem; padding-right: 0.75rem; }
.rq-sgi .rq-page__panel .rq-sgi-history > thead > tr > th { white-space: normal; }
/* Con columnas fijas, un encabezado en mayúsculas sin corte desborda y se monta sobre el siguiente: se parte en líneas (y en sílabas si es una sola palabra). */
.rq-sgi .rq-page__panel .rq-table--fixed > thead > tr > th { white-space: normal; hyphens: auto; }
/* Tabla clave/valor (encabezado de fila): la etiqueta toma un ancho acotado, no la mitad del panel. */
.rq-sgi .table > tbody > tr > th[scope="row"] { width: 16rem; }
@media (max-width: 767.98px) { .rq-sgi .table > tbody > tr > th[scope="row"] { width: 40%; } }

/* Grupo de filtro de ancho acotado (un solo select no ocupa toda la fila). */
.rq-filter-group--auto { flex: 0 1 18rem; }

/* Menús desplegables: mismo cuerpo de texto que las tablas. */
.rq-sgi .dropdown-menu { font-size: 0.875rem; }

/* Acciones de fila en pantallas táctiles o angostas: área de toque de 44 px (el btn-sm mide ~31 px). */
@media (pointer: coarse), (max-width: 767.98px) {
    .rq-sgi .table .btn-sm { min-height: 44px; min-width: 44px; }
    /* Las acciones del encabezado también; inline-flex centra el texto de los <a class="btn"> (inline-block lo deja arriba). */
    .rq-sgi .rq-page__header .btn-sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; }
}

/* Contenedor de gráfico (Chart.js con maintainAspectRatio: false): alto fijo legible también en móvil. */
.rq-chart { position: relative; height: 16rem; }


/* ── rq-sgi-docs: Documentos del SGI (Ultron). Va sobre .rq-sgi; solo lo propio del módulo. ── */
/* «Mis pendientes» se separa de las secciones: es un contador personal, no otra sección. */
.rq-sgi-docs .rq-sgi-docs__nav-end { margin-left: auto; }

/* Vista previa de una política: ancho de lectura por bloque (las tablas no se limitan y hacen scroll) y títulos por debajo del h2 del panel. */
.rq-sgi-docs .rq-sgi-docs__prose { font-size: 0.9375rem; line-height: 1.6; color: var(--rq-table-ink); overflow-wrap: break-word; }
.rq-sgi-docs .rq-sgi-docs__prose > :not(.table-responsive) { max-width: 72ch; }
.rq-sgi-docs .rq-sgi-docs__prose :is(td, th) { overflow-wrap: normal; min-width: 8rem; }
.rq-sgi-docs .rq-sgi-docs__prose > :first-child { margin-top: 0; }
.rq-sgi-docs .rq-sgi-docs__prose :is(h3, h4, h5, h6) { margin: 1.5rem 0 0.5rem; font-weight: 700; line-height: 1.3; color: var(--rq-table-ink); }
.rq-sgi-docs .rq-sgi-docs__prose h3 { font-size: 1.125rem; }
.rq-sgi-docs .rq-sgi-docs__prose h4 { font-size: 1rem; }
.rq-sgi-docs .rq-sgi-docs__prose :is(h5, h6) { font-size: 0.9375rem; }
.rq-sgi-docs .rq-sgi-docs__prose :is(p, ul, ol, blockquote, .table-responsive) { margin-bottom: 0.875rem; }
.rq-sgi-docs .rq-sgi-docs__prose li + li { margin-top: 0.25rem; }
.rq-sgi-docs .rq-sgi-docs__prose blockquote { padding-left: 1rem; border-left: 3px solid var(--rq-badge-muted-line); color: var(--rq-badge-muted-ink); }
.rq-sgi-docs .rq-sgi-docs__prose .table { font-size: 0.875rem; }
/* Las tablas de la política no llevan el encabezado de tabla de datos del panel: se respeta su texto tal cual. */
.rq-sgi-docs .rq-page__panel .rq-sgi-docs__prose .table > thead > tr > th { text-transform: none; letter-spacing: normal; white-space: normal; font-size: inherit; }
.rq-sgi-docs .rq-page__panel .rq-sgi-docs__prose .table > tbody > tr > td { vertical-align: top; }

/* Evidencias: un nombre de archivo o título largo sin espacios corta en vez de salirse de su columna fija. */
.rq-sgi-docs .rq-sgi-docs__records td { overflow-wrap: anywhere; }

/* SoA en pantallas angostas: sin la columna Respaldo, la tabla puede ser más angosta y «Evaluar» queda a mano (fijas 32.5rem, Nombre ≥ 16rem). */
@media (max-width: 767.98px) {
    .rq-sgi-docs .rq-sgi-docs__soa { min-width: 48.5rem; }
}

/* Versiones con un borrador: la columna de acciones (15rem) no le quita el espacio a «Qué cambió» (fijas hasta 62.5rem, «Qué cambió» ≥ 15rem). */
.rq-sgi-docs .rq-sgi-docs__versions--actions { min-width: 77.5rem; }

/* Foto de la SoA: Justificación es la única columna libre (fijas 57.5rem, Justificación ≥ 20rem; en el área máxima de Ultron, 79.5rem, cabe sin scroll con 22rem). Las celdas de texto libre cortan palabra en vez de ensanchar la tabla; Control, ¿Aplica? e Implementación no. */
.rq-sgi-docs .rq-sgi-docs__snapshot { min-width: 77.5rem; }
.rq-sgi-docs .rq-sgi-docs__snapshot td { overflow-wrap: anywhere; }
.rq-sgi-docs .rq-sgi-docs__snapshot td.rq-sgi-docs__keep-words { overflow-wrap: break-word; }

/* ----- rq-facts en una columna (resumen lateral angosto: enlaces largos, uno debajo del otro) ----- */
.rq-facts--stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

/* ----- rq-facts a todo el ancho (panel de información de un portal): tantas columnas como quepan ----- */
.rq-facts--wide {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* ----- Superficie que deja ver un desplegable de su toolbar (selector de columnas de bootstrap-table). La
   tabla ancha se sigue desplazando dentro de .fixed-table-body. ----- */
.rq-table-surface--open {
    overflow: visible;
}

/* ----- Tabla del admin fuera de una rq-table-surface (tabla de administradores compartida, también en la
   página legacy del admin alumni): el mismo contenedor de consultas que la superficie (los rótulos de acción se ocultan
   bajo 1240px) y la misma reserva para que el foco no quede bajo la columna fija. Dentro de una superficie, la consulta
   resuelve contra este contenedor, que mide lo mismo. ----- */
.rq-table-scope {
    container: rq-surface / inline-size;
}

.rq-table-scope :is(.fixed-table-body, .table-responsive):has(.rq-table__sticky-end) {
    scroll-padding-inline-end: var(--rq-sticky-end-w);
}

/* ----- Teléfono con intl-tel-input a todo el ancho dentro de un drawer (alta de alumno desde
   /ultron/alumnis; antes, un <style> de la página) ----- */
.rq-admin-shell .rq-drawer .iti {
    width: 100%;
}

/* ----- «Módulos & uso» de /ultron/alumnis (offcanvas + tabla que llega por AJAX). Movido desde
   el <style> de _modules_usage.html.twig: las clases rq-usage-* las dibuja también el fragmento _modules_usage_table. Tema
   neutro: el hover de la regla en tinta (antes, el color primario del portal); el botón que abre el panel es un botón
   estándar del resumen (sin .rq-usage-trigger). ----- */
.rq-usage-oc .offcanvas-header {
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 1rem;
}

.rq-usage-oc .offcanvas-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rq-usage-sub {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.rq-usage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.rq-usage-legend .rq-usage-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: var(--rq-font-micro);
    font-weight: 600;
}

.rq-usage-legend .rq-usage-chip b {
    color: var(--bs-emphasis-color);
}

.rq-usage-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.rq-usage-dot--in_use { background: var(--rq-ok-ink); }
.rq-usage-dot--low_use { background: var(--rq-warn-ink); }
.rq-usage-dot--no_use { background: var(--rq-danger); }
.rq-usage-dot--not_measurable { background: var(--rq-control-line); }
.rq-usage-dot--not_enabled { background: var(--rq-chip-bg); box-shadow: inset 0 0 0 1px var(--rq-control-line); }

.rq-usage-table {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.rq-usage-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: var(--rq-font-micro);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rq-usage-table tbody tr {
    box-shadow: inset 3px 0 0 transparent;
    transition: background-color 0.12s ease;
}

.rq-usage-table tbody tr:hover {
    background: var(--bs-tertiary-bg);
}

.rq-usage-table tbody td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.rq-usage-row--in_use { box-shadow: inset 3px 0 0 var(--rq-ok-ink); }
.rq-usage-row--low_use { box-shadow: inset 3px 0 0 var(--rq-warn-ink); }
.rq-usage-row--no_use { box-shadow: inset 3px 0 0 var(--rq-danger); }

.rq-usage-row--not_enabled .rq-usage-module {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.rq-usage-module {
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

.rq-usage-en { font-size: 1.05rem; }
.rq-usage-en--yes { color: var(--rq-ok-ink); }
.rq-usage-en--no { color: var(--bs-secondary-color); }

.rq-usage-num {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-usage-win {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-usage-detail {
    margin-top: 0.1rem;
    color: var(--bs-secondary-color);
    font-size: var(--rq-font-micro);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-usage-na {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--bs-secondary-color);
    font-size: 0.76rem;
    font-style: italic;
}

.rq-usage-state {
    padding: 0.25rem 0.6rem;
    font-size: var(--rq-font-micro);
    font-weight: 600;
}

.rq-usage-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: var(--rq-font-micro);
    font-weight: 600;
    white-space: nowrap;
}

.rq-usage-pill--urgent { background: var(--rq-diff-del-bg); color: var(--rq-danger); }
.rq-usage-pill--watch { background: var(--rq-badge-warn-bg); color: var(--rq-badge-warn-ink); }
.rq-usage-pill--upsell { background: var(--rq-info-bg); color: var(--rq-info-ink); }

.rq-usage-rule {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -0.6rem 0;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    line-height: 1;
    cursor: help;
    transition: color 0.12s ease;
}

.rq-usage-rule:hover,
.rq-usage-rule:focus-visible {
    color: var(--rq-table-ink);
}

.rq-usage-rule:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: -4px;
}

.rq-usage-rule::after {
    content: attr(data-tip);
    position: absolute;
    top: 100%;
    right: 0.4rem;
    z-index: 1090;
    width: max-content;
    max-width: 240px;
    margin-top: -0.2rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.375rem;
    background: var(--rq-table-ink);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.28);
    color: var(--rq-header-ink);
    font-size: var(--rq-font-micro);
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.15rem);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}

.rq-usage-rule:hover::after,
.rq-usage-rule:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ----- Zona de Dropzone en una tarjeta del admin (repositorio de Ultron): borde punteado neutro en vez del
   gris grueso de dropzone.css ----- */
.rq-dropzone.dropzone {
    min-height: 0;
    padding: 1.25rem;
    border: 2px dashed var(--rq-control-line);
    border-radius: var(--rq-card-radius);
    background: var(--rq-table-group);
}

.rq-dropzone.dropzone.dz-drag-hover {
    border-style: solid;
    border-color: var(--rq-table-ink);
}

.rq-dropzone.dropzone .dz-message {
    margin: 1.5rem 0;
    color: var(--rq-table-muted);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* ----- Enlace con forma de texto dentro de una tabla del admin (carpeta del repositorio): foco en tinta y el
   nombre largo se parte ----- */
.rq-table .rq-text-button {
    text-align: start;
    overflow-wrap: anywhere;
}

.rq-table .rq-text-button:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

/* ----- Lista de ítems con su acción dentro de una celda (portales de un dashboard con su botón de Q&A) ----- */
.rq-cell-list {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rq-cell-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

/* ----- La regla de «Módulos & uso» se abre hacia arriba en las dos últimas filas (abajo la recortaba
   el contenedor con scroll) ----- */
.rq-usage-table tbody tr:nth-last-child(-n+2) .rq-usage-rule::after {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: -0.2rem;
}

/* ----- En pantallas táctiles, los interruptores de fila, los botones de Q&A y las casillas de
   bootstrap-table llegan al área táctil del admin (las acciones de fila ya la tienen) ----- */
@media (pointer: coarse) {
    :is(.rq-admin, .rq-table-scope) :is(.rq-table__actions .btn, .rq-cell-list .btn, .toggle-notifications-btn, .toggle-reminder-btn) {
        min-width: var(--rq-hit);
        min-height: var(--rq-hit);
    }

    :is(.rq-admin, .rq-table-scope) .rq-table input[name^="btSelect"] {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* ----- rq-table-surface--open no recorta: las esquinas de la primera y la última pieza se redondean
   para que la cabecera, el hover y la sombra de la columna fija no asomen por fuera de la tarjeta ----- */
.rq-table-surface--open > :first-child {
    border-top-left-radius: var(--rq-card-radius);
    border-top-right-radius: var(--rq-card-radius);
}

.rq-table-surface--open > :last-child {
    border-bottom-left-radius: var(--rq-card-radius);
    border-bottom-right-radius: var(--rq-card-radius);
}

/* ----- Botón «Seleccionar archivos» dentro de la zona de subida (uso con teclado y táctil) ----- */
.rq-dropzone .dz-message .btn {
    margin-top: 0.75rem;
}

/* ----- En la superficie abierta (tabla de administradores de /ultron/alumnis), el selector de columnas
   va después del buscador, al final de la toolbar: su menú (alineado a la derecha del botón) se abría hacia la izquierda
   desde el inicio de la fila y quedaba bajo el menú lateral fijo ----- */
.rq-table-surface--open .bootstrap-table .fixed-table-toolbar .columns {
    order: 1;
}


/* ----- «¿Cómo funciona?» plegable en una tarjeta (pasos de una configuración) ----- */
.rq-howto {
    color: var(--rq-table-ink);
}

.rq-howto__summary {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--rq-table-ink);
    cursor: pointer;
}

.rq-howto__steps {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--rq-table-ink);
}

.rq-howto__steps > li + li {
    margin-top: 0.35rem;
}

/* ----- Fila de configuración: rótulo a la izquierda, control (rq-segmented) a la derecha ----- */
/* Reglas de acceso: una fila por dimensión y, anidadas, las de cada tipo (asesor, evento). Bajo 576px el control baja. */
.rq-setting-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rq-table-line);
}

.rq-setting-row:first-child {
    padding-top: 0;
}

.rq-setting-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.rq-setting-row__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rq-table-ink);
}

.rq-setting-row--nested {
    padding-left: 1.5rem;
}

.rq-setting-row--nested .rq-setting-row__label {
    font-weight: 400;
    color: var(--rq-table-muted);
}

.rq-setting-row .rq-segmented {
    flex-wrap: wrap;
    max-width: 100%;
}

/* ----- Grilla de íconos generados (PWA): miniatura, «sin generar» si falta y su rótulo ----- */
.rq-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rq-icon-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}

.rq-icon-grid__img {
    width: 100%;
    max-width: 7.5rem;
    height: auto;
    border: 1px solid var(--rq-table-line);
    border-radius: 0.5rem;
}

.rq-icon-grid__missing {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 7.5rem;
    aspect-ratio: 1;
    border: 1px dashed var(--rq-control-line);
    border-radius: 0.5rem;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-icon-grid__missing[hidden] {
    display: none;
}

.rq-icon-grid__label {
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

/* Vista previa del ícono elegido junto a un selector (links del menú de la PWA). */
.rq-icon-preview {
    min-width: 1.5rem;
    text-align: center;
    color: var(--rq-table-muted);
}

/* Puntero grueso: los resúmenes plegables de la configuración de portal («¿Cómo funciona?», «Ver todo» de un error
   largo) alcanzan el tamaño de toque; con line-height y no con display: así conservan su marcador de <summary>. */
@media (pointer: coarse) {
    .rq-howto__summary,
    .rq-table__more > summary {
        line-height: var(--rq-hit);
    }
}

/* Barra de formulario con acciones secundarias (PWA: Regenerar iconos, Deshabilitar PWA): bajo 576px quedan solo con
   ícono al lado de Cancelar y Guardar; el rótulo se oculta a la vista pero sigue siendo el nombre del botón. */
@media (max-width: 575.98px) {
    /* .btn en el selector: los :is(.btn, input[type="submit"]) de arriba pesan (0,2,1) y, sin él, ganaban al compacto
       (el botón de solo ícono se estiraba a todo el ancho). */
    .rq-form-bar__main > .rq-form-bar__compact.btn {
        flex: 0 0 auto;
        width: auto;
        min-width: var(--rq-hit);
    }

    /* Con acciones compactas la acción principal ocupa su propia fila (arriba) y Cancelar + los íconos comparten la
       de abajo: a 390 las cuatro no caben en una. */
    .rq-form-bar__main:has(> .rq-form-bar__compact) > .btn-dark:not(.rq-form-bar__compact) {
        flex: 1 1 100%;
        order: -1;
    }

    .rq-form-bar__compact .rq-form-bar__label {
        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 texto largo que debe llevarse el ancho de la tabla (error de la cola de webhooks): sin esto, columnas
   numéricas angostas quedaban anchas y el error se partía en tres líneas. */
.rq-table__grow {
    width: 55%;
    min-width: 16rem;
}

/* ----- Caja con desplazamiento propio para texto de un usuario dentro de un drawer (mensaje, hilo, constancia) ----- */
.rq-scrollbox {
    max-height: min(14rem, 30vh);
    overflow: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rq-table-line);
    border-radius: 6px;
    background: var(--rq-table-group);
    font-size: 0.8125rem;
    color: var(--rq-table-ink);
    overflow-wrap: anywhere;
}

.rq-scrollbox--pre {
    white-space: pre-wrap;
}

.rq-scrollbox:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

/* Hilo de mensajes (respuestas al titular y las suyas): cada mensaje con su línea de autor y fecha. */
.rq-thread {
    font-size: 0.8125rem;
}

.rq-thread__item + .rq-thread__item {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rq-table-line);
}

.rq-thread__meta {
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-thread__body {
    white-space: pre-wrap;
}

/* Conteo de un botón de fila que pide atención (ej. el titular respondió y falta contestar). */
.rq-table__action-count--alert {
    background: var(--rq-warn-ink);
}

/* ----- Disponibilidad (Monitoreo): banda de KPIs, línea de tiempo, calendario de 12 meses y tooltip de días -----
   Movido del <style> de la plantilla con prefijo rq- y tokens del admin (antes, --bs-primary: el color del portal).
   Los niveles l1–l4 / none son los de la escala (parte en la meta, no en 100 %); el tooltip los lee de data-level. */
.rq-sla {
    --rq-sla-l4: var(--rq-ok-ink);
    /* l3 y l2 con ≥ 3:1 contra blanco (3,16 y 3,19): con 45 % y #f59e0b quedaban en 1,91 y 2,15. */
    --rq-sla-l3: color-mix(in oklab, var(--rq-ok-ink) 75%, #fff);
    --rq-sla-l2: #d97706;
    --rq-sla-l1: var(--rq-danger);
    --rq-sla-none: var(--rq-badge-muted-bg);
    --rq-sla-rule: var(--rq-table-line);
}

.rq-sla-pct {
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-sla-pct--ok {
    color: var(--rq-ok-ink);
}

.rq-sla-pct--below {
    color: var(--rq-danger);
    font-weight: 600;
}

/* Banda de KPIs: una celda por período, separadas por un filete. */
.rq-sla-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    border-radius: var(--rq-card-radius);
    background: #fff;
    box-shadow: var(--rq-card-shadow);
    color: var(--rq-table-ink);
}

.rq-sla-band__cell {
    padding: 1rem 1.25rem;
}

.rq-sla-band__cell + .rq-sla-band__cell {
    border-top: 1px solid var(--rq-sla-rule);
}

@media (min-width: 768px) {
    .rq-sla-band__cell + .rq-sla-band__cell {
        border-top: 0;
        border-left: 1px solid var(--rq-sla-rule);
    }
}

.rq-sla-band__label {
    font-size: var(--rq-font-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rq-table-muted);
}

.rq-sla-band__value {
    margin: 0.15rem 0 0.5rem;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    line-height: 1.2;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-sla-band__note {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--rq-table-muted);
}

/* Margen del SLA usado: el ancho llega como dato en --rq-share. */
.rq-sla-budget {
    height: 0.375rem;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--rq-sla-none);
}

.rq-sla-budget__bar {
    width: var(--rq-share, 0%);
    height: 100%;
    border-radius: 1rem;
}

.rq-sla-budget__bar--ok {
    background: var(--rq-sla-l4);
}

.rq-sla-budget__bar--warn {
    background: var(--rq-sla-l2);
}

.rq-sla-budget__bar--danger {
    background: var(--rq-sla-l1);
}

/* Un día (línea de tiempo, calendario y leyenda). */
.rq-sla-day {
    border-radius: 2px;
    background: var(--rq-sla-none);
}

.rq-sla-day--l4 {
    background: var(--rq-sla-l4);
}

.rq-sla-day--l3 {
    background: var(--rq-sla-l3);
}

.rq-sla-day--l2 {
    /* Trama además del color (rayas oscuras a 45°): sin color, «Bajo la meta» no se confunde con «En la meta»
       (casi la misma luminancia). «Sin dato» usa líneas a 135° sobre gris. */
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.3) 0 1.5px, transparent 1.5px 4px), var(--rq-sla-l2);
}

.rq-sla-day--l1 {
    /* Líneas claras horizontales: sin color, «< 99,9 %» no se confunde con «≥ 99,99 %» (1,31:1 entre sí). */
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 1.5px 4px), var(--rq-sla-l1);
}

.rq-sla-day--none {
    /* Trama en --rq-control-line (3,2:1 contra blanco, WCAG 1.4.11): con el filete de tabla (1,16:1) los días sin dato
       y su muestra en la leyenda se leían como huecos en blanco. El fondo claro se mantiene. */
    background-image: repeating-linear-gradient(135deg, transparent 0 2px, var(--rq-control-line) 2px 3px);
}

/* En alto contraste (forced-colors) el navegador quitaría los fondos: la escala y sus tramas se conservan. */
@media (forced-colors: active) {
    .rq-sla-day {
        forced-color-adjust: none;
    }
}

.rq-sla-day[data-tip-date] {
    cursor: pointer;
}

.rq-sla-day[data-tip-date]:hover,
.rq-sla-day.is-active {
    outline: 2px solid var(--rq-table-ink);
    outline-offset: 1px;
}

.rq-sla-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.5rem;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-sla-legend .rq-sla-day {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.3rem;
    vertical-align: -1px;
}

/* Línea de tiempo: un tramo por día, a todo el ancho (--rq-sla-n = cantidad de días). */
.rq-sla-strip,
.rq-sla-strip__ticks {
    display: grid;
    grid-template-columns: repeat(var(--rq-sla-n), minmax(0, 1fr));
    column-gap: 2px;
}

.rq-sla-strip .rq-sla-day {
    height: 2.25rem;
}

.rq-sla-strip__ticks {
    margin-bottom: 0.3rem;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-sla-strip__ticks span {
    padding-left: 0.25rem;
    overflow: visible;
    border-left: 1px solid var(--rq-sla-rule);
    white-space: nowrap;
}

.rq-sla-strip__ticks span:empty {
    padding: 0;
    border: 0;
}

/* Calendario y detalle diario lado a lado desde 1200px (la base es la de .rq-report); el calendario queda fijo al
   desplazar. */
@media (min-width: 1200px) {
    .rq-sla-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rq-sla-sticky {
        position: sticky;
        top: 1rem;
    }
}

/* Calendario de 12 meses: columnas = días del mes, con encabezado 1–31. */
.rq-sla-cal {
    display: grid;
    row-gap: 0.3rem;
}

.rq-sla-cal__row {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) 5.5rem;
    align-items: center;
    column-gap: 0.75rem;
}

.rq-sla-cal__axis {
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-sla-cal__days {
    display: grid;
    grid-template-columns: repeat(31, minmax(0, 1fr));
    gap: 2px;
}

.rq-sla-cal__days .rq-sla-day {
    aspect-ratio: 1;
}

/* Encabezado 1–31: cuántos números se ven depende del ancho real de la grilla (container query), no del viewport. */
.rq-sla-cal__head {
    container-type: inline-size;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
    text-align: center;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-sla-cal__head span {
    overflow: visible;
    white-space: nowrap;
}

@container (max-width: 26rem) {
    .rq-sla-cal__head .rq-sla-cal__minor {
        visibility: hidden;
    }
}

@container (max-width: 18rem) {
    .rq-sla-cal__head .rq-sla-cal__mid {
        visibility: hidden;
    }
}

/* Excepción bajo el piso de 12px: entre 26 y 34rem se ven los 31 números en celdas de 13 a 17px y a 12px se tocan. */
@container (min-width: 26rem) and (max-width: 34rem) {
    .rq-sla-cal__head span {
        font-size: 0.62rem;
    }
}

.rq-sla-cal__month {
    position: relative;
    font-size: 0.85rem;
    color: var(--rq-table-ink);
    text-decoration: none;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-sla-cal__month[aria-current] {
    font-weight: 700;
}

.rq-sla-cal__month[aria-current]::before {
    content: '';
    position: absolute;
    top: 15%;
    bottom: 15%;
    left: -0.6rem;
    width: 2px;
    background: var(--rq-table-ink);
}

.rq-sla-cal__pct {
    font-size: 0.8rem;
    text-align: right;
}

/* Fila del detalle diario bajo la meta. */
.rq-table > tbody > tr.rq-sla-row--below > * {
    background: var(--rq-diff-del-bg);
}

/* Tooltip de días: uno solo, compartido; el script lo posiciona con --rq-tip-top / --rq-tip-left / --rq-tip-arrow-x. */
.rq-sla-tip {
    --rq-tip-bg: var(--rq-table-ink);
    --rq-tip-fg: #f8fafc;
    position: fixed;
    top: var(--rq-tip-top, 0);
    left: var(--rq-tip-left, 0);
    z-index: 1080;
    min-width: 12.5rem;
    max-width: 17rem;
    padding: 0.6rem 0.8rem 0.65rem;
    border-radius: 0.5rem;
    background: var(--rq-tip-bg);
    color: var(--rq-tip-fg);
    box-shadow: 0 0.6rem 1.6rem rgba(15, 23, 42, 0.3);
    font-size: 0.8rem;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.12s cubic-bezier(0.25, 1, 0.5, 1), transform 0.12s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.12s;
}

.rq-sla-tip[data-side="below"] {
    transform: translateY(-4px);
}

.rq-sla-tip.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.rq-sla-tip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: var(--rq-tip-arrow-x, 50%);
    width: 10px;
    height: 10px;
    background: var(--rq-tip-bg);
    transform: translateX(-50%) rotate(45deg);
}

.rq-sla-tip[data-side="below"]::after {
    top: -5px;
    bottom: auto;
}

.rq-sla-tip__date {
    font-size: var(--rq-font-micro);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.75;
}

.rq-sla-tip__pct {
    margin-top: 0.1rem;
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-sla-tip__pct[data-level="l4"],
.rq-sla-tip__pct[data-level="l3"] {
    color: var(--rq-sla-tip-l4);
}

.rq-sla-tip__pct[data-level="l2"] {
    color: var(--rq-sla-tip-l2);
}

.rq-sla-tip__pct[data-level="l1"] {
    color: var(--rq-sla-tip-l1);
}

.rq-sla-tip__pct[data-level="none"] {
    font-weight: 400;
    opacity: 0.75;
}

.rq-sla-tip__track {
    height: 4px;
    margin: 0.45rem 0 0.25rem;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(248, 250, 252, 0.18);
}

.rq-sla-tip__bar {
    display: block;
    width: var(--rq-share, 0%);
    height: 100%;
    border-radius: 2px;
    background: var(--rq-sla-tip-bar-l4);
}

.rq-sla-tip__bar[data-level="l2"] {
    background: var(--rq-sla-tip-bar-l2);
}

.rq-sla-tip__bar[data-level="l1"] {
    background: var(--rq-sla-tip-bar-l1);
}

.rq-sla-tip__meta {
    opacity: 0.85;
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-sla-tip__error {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(248, 250, 252, 0.18);
    color: var(--rq-sla-tip-l2);
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .rq-sla-tip {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    /* Mes y % en una línea, los días a todo el ancho debajo: no se pierde el % del mes. */
    .rq-sla-cal {
        row-gap: 0.6rem;
    }

    .rq-sla-cal__row {
        grid-template-columns: 1fr auto;
        row-gap: 0.2rem;
    }

    .rq-sla-cal__days {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 1px;
    }

    .rq-sla-strip .rq-sla-day {
        height: 1.75rem;
    }

    .rq-sla-strip,
    .rq-sla-strip__ticks {
        column-gap: 1px;
    }
}

/* Tabla del admin fuera de una rq-table-surface (historial de Documentos propios): el scroller ancla los
   .visually-hidden (absolute) de sus celdas. Sin esto escapaban del scroll horizontal hasta <body> y la página se
   desplazaba de lado a 390 (la superficie ya lo hace con su propio position: relative). Las columnas fijas
   (sticky) no dependen del ancestro posicionado. */
.rq-admin .table-responsive {
    position: relative;
}

/* Conteo que pide atención: además del color, un punto antes del número (WCAG 1.4.1). Sin texto en content: el
   lector de pantalla ya lee «… con respuesta del titular pendiente». */
.rq-table__action-count--alert::before {
    content: "";
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    margin-right: 0.2rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.1em;
}

/* Barra de formulario: el rótulo de un botón no se parte («Guardar cambios» quedaba en dos líneas con el ícono encima a
   390). Si los botones no entran en una fila, la barra pasa el que sobra a otra (flex-wrap) en vez de partir texto; a
   390 la base es la de su contenido para que eso ocurra (los compactos, solo ícono, conservan su ancho fijo). */
.rq-form-bar :is(.btn, input[type="submit"]) {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .rq-form-bar__main > :is(.btn, input[type="submit"], button):not(.rq-form-bar__compact) {
        flex: 1 1 auto;
    }
}

/* ----- Vista de un formulario en el drawer (Forms/Form.html.twig, rq-sheet) ----- */
.rq-form-view__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding-left: 1.25rem;
}

.rq-form-view__item {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--rq-table-line);
    border-radius: var(--rq-card-radius);
}

.rq-form-view__item::marker {
    color: var(--rq-table-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-form-view__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0 0 0.35rem;
    font-size: var(--rq-font-micro);
    color: var(--rq-table-muted);
}

.rq-form-view__text {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.rq-form-view__text > :last-child {
    margin-bottom: 0;
}

/* Tablas que el contenido trae en su HTML (rúbricas en la ayuda): no ensanchan el drawer. */
.rq-form-view__text table,
.rq-form-view__help table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.rq-form-view__choices {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.rq-form-view__choices li + li {
    margin-top: 0.2rem;
}

.rq-form-view__score {
    color: var(--rq-table-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

.rq-form-view__item .rq-facts {
    margin-top: 0.5rem;
}

.rq-form-view__help {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--rq-table-muted);
}

/* ----- Constructor de formularios (FormForm, FormProfilesForm; tarjetas form-question de form.css) ----- */
/* Los controles de las tarjetas (form-question) usan el bloque compartido de controles de las secciones, que también
   pinta el borde de error (.is-invalid). */
/* Selects de una condición de visibilidad (antes, max-width en línea, también en el HTML que arma form.js). */
.rq-condition__select {
    min-width: 0;
    max-width: 250px;
}

.rq-condition__select--value {
    max-width: 200px;
}

.rq-question__divider {
    margin: 1rem 0 0.5rem;
    border-top: 1px dashed var(--rq-table-line);
    opacity: 1;
}

/* Editor TinyMCE obligatorio vacío (FormForm): borde de error; el aviso es un rq-field-error. */
.rq-editor--invalid .tox-tinymce {
    border: 2px solid var(--rq-danger) !important;
}

/* El formulario usa la barra fija de _formLayout: el padding inferior de la vieja barra (builder-dock) sobra. */
.rq-admin.form-builder .form-question:last-child {
    margin-bottom: 0;
}

/* ----- Vista previa de un cuestionario (PreviewEvaluationForm), con el aspecto de quien responde ----- */
#content-wrapper.rq-form-preview {
    margin-left: 0;
    background-color: #fff;
}

.rq-form-preview .ui-slider .ui-slider-handle {
    width: 2em;
    left: -0.6em;
    text-decoration: none;
    text-align: center;
}

.rq-form-preview .form-question-answer {
    margin: 5px 0;
    padding: 10px;
}

.rq-form-preview .form-question-answer.question-border {
    border: 0;
}

/* ----- Usuarios de un flujo (ProcessUsers). El teléfono del drawer de alta/edición (intl-tel-input envuelve el
   campo en .iti, inline-block) ocupa el ancho de su fila, como hacía el bloque de estilos de la plantilla. ----- */
.rq-associates-page .iti {
    width: 100%;
}

/* ----- Fila de una opción del constructor en el teléfono. La opción ocupa su propia línea y el
   puntaje, el perfil, el segmento y «Quitar» (solo ícono) pasan a la siguiente; antes el texto quedaba en ~75 px. ----- */
@media (max-width: 575.98px) {
    .rq-admin .form-question .choices .input-group {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .rq-admin .form-question .choices .input-group > .form-control:first-of-type {
        flex: 1 1 calc(100% - 3rem);
        border-top-right-radius: var(--bs-border-radius);
        border-bottom-right-radius: var(--bs-border-radius);
    }

    .rq-admin .form-question .choices .input-group > :not(:first-child):not(.choice-icon):not(.form-control:first-of-type) {
        flex: 1 1 4.5rem;
        margin-left: 0;
        border-radius: var(--bs-border-radius);
    }

    .rq-admin .form-question .choices .input-group > .btn {
        flex: 0 0 auto;
    }

    /* Formularios con puntaje: form.css le da 80px al ícono (display-inline-flex) y la opción bajaba a otra línea. */
    .rq-admin .form-question .choices .input-group > .choice-icon {
        min-width: 0;
    }
}

/* Nombre con color (swatch) en una celda: se parte en varias líneas. Con el nowrap de .rq-badge--inline un nombre de
   70 caracteres fijaba la columna en ~384 px: la tabla de campañas desbordaba a 1280 y la tarjeta de 390 sacaba la
   cuarta acción de la pantalla. El punto no se encoge y queda alineado con la primera línea. */
.rq-table td .rq-badge--swatch {
    align-items: baseline;
    border-radius: 0.5rem;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
}

.rq-table td .rq-badge--swatch::before {
    flex-shrink: 0;
}

/* Barra fija del formulario (.rq-form-bar) en un portal cuya hoja pone overflow-x: hidden en html/body (ej. «Prevent
   horizontal overflow globally»): con hidden, body pasa a ser el contenedor de scroll y position: sticky se resuelve
   contra una caja que nunca se desplaza, así que la barra quedaba al final del formulario. clip recorta igual sin crear
   contenedor de scroll. Solo en páginas con la barra (formularios del admin), no en las públicas del portal. */
html:has(.rq-form-bar),
body:has(.rq-form-bar) {
    overflow-x: clip;
}

/* Rótulos de los pasos del asistente sin subrayado: la regla de enlaces de admin.css (#content-wrapper a:not(...),
   text-decoration-line: underline !important) tiene más especificidad: esta es la única regla que quita el subrayado de los pasos. */
.rq-admin-shell #content-wrapper .rq-wizard .sw > .nav .nav-item > a.nav-link {
    text-decoration-line: none !important;
}


/* Foco en los botones de todo el admin, colgado del contexto del body y no de un envoltorio .rq-admin escrito a mano:
   las ramas legacy de pantallas rediseñadas (ej. «Ver» de las tarjetas de formularios, con el color del portal) solo
   tenían el box-shadow del tema al 25 %. Mismos valores que las reglas .rq-admin de arriba, que siguen valiendo. */
.rq-admin-shell .btn:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

.rq-admin-shell :is(.rq-header, .detail-header) .btn:focus-visible {
    outline: var(--rq-focus-on-dark);
}

/* Una sola estadística en la cabecera a 390: una píldora en línea (número + rótulo), no una caja de ancho completo que
   empuja la tabla un pantallazo hacia abajo. */
@container rq-header (max-width: 420px) {
    .rq-header__stats:has(> .rq-header__stat:only-child) {
        display: flex;
        width: auto;
    }

    .rq-header__stats > .rq-header__stat:only-child {
        flex-direction: row;
        gap: 0.4rem;
        align-items: baseline;
        padding: 0.35rem 0.75rem;
    }

    .rq-header__stats > .rq-header__stat:only-child dt {
        order: 2;
        margin: 0;
    }
}

/* Constructor de formularios: el select2 «Tipo» (copia las clases form-select-sm del select) medía 40px junto a
   controles de 31px; mismo alto que form-select-sm, con el texto y la flecha centrados en esa altura. */
.rq-admin .form-question .select2-container .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px);
}

.rq-admin .form-question .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    line-height: 1.5;
}

.rq-admin .form-question .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

/* «Ir al contenido» (base.html.twig, contextos de administración): visible solo con foco, arriba a la izquierda y por
   encima del menú lateral. El destino (main#content-wrapper, tabindex -1) no muestra anillo al recibir el foco. */
.rq-skip:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 0.875rem;
    border-radius: var(--rq-input-radius);
    background: #fff;
    color: var(--rq-table-ink);
    font-weight: 600;
    text-decoration: none;
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

main#content-wrapper:focus {
    outline: none;
}

/* «Duplicar» en la esquina de la tarjeta de un formulario (Forms/formCard, admin de portal). */
.rq-card-corner-action {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    margin: 0;
}

/* Estado inicial de un bloque que el JS muestra con .show()/.slideDown() de jQuery (preguntas condicionales y pasos de
   la vista previa de un formulario). No sirven [hidden] ni d-none: su !important le gana al display que pone jQuery. */
.rq-start-hidden {
    display: none;
}

/* Ayuda bajo el enunciado de una pregunta (vista previa de un formulario), alineada con el texto tras el ícono. */
.rq-question-helper {
    margin-left: 35px;
    font-size: var(--rq-font-micro);
}

/* Rótulo de los campos chicos de una opción del constructor (puntaje, perfil, segmento): en escritorio queda solo para
   lectores (el campo va junto a la opción, con su placeholder); en el teléfono esos campos bajan a otra línea y, ya
   llenos («-28», «I»), no decían qué eran: el rótulo se muestra sobre cada uno. Sin wrapper (rompería el input-group):
   con `order`, los rótulos forman una línea (más un espaciador del ancho de «Quitar», ::after) y los campos la
   siguiente (::before fuerza el salto), así cada rótulo queda sobre su campo. */
.rq-field-micro {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 575.98px) {
    .rq-admin .form-question .choices .input-group:has(> .rq-field-micro)::after {
        content: "";
        order: 2;
        flex: 0 0 2.25rem;
    }

    .rq-admin .form-question .choices .input-group:has(> .rq-field-micro)::before {
        content: "";
        order: 3;
        flex: 0 0 100%;
        height: 0;
    }

    .rq-admin .form-question .choices .input-group > .rq-field-micro {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 -0.35rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
        order: 2;
        flex: 1 1 4.5rem;
        min-width: 0;
        color: var(--rq-table-muted);
        font-size: var(--rq-font-micro);
        line-height: 1.3;
    }

    .rq-admin .form-question .choices .input-group > .rq-field-micro + *,
    .rq-admin .form-question .choices .input-group > .rq-field-micro + * + .selectize-control {
        order: 4;
    }

    .rq-admin .form-question .choices .input-group:has(> .rq-field-micro) > .btn {
        order: 4;
        flex: 0 0 2.25rem;
    }
}

/* Ultron (decisión #70): los mini rótulos se ven a todo ancho. La fila de la opción usa en cualquier ancho el
   arreglo del teléfono: la opción en su propia línea, los rótulos en la siguiente y debajo cada campo con «Quitar». */
body.context-ultron .rq-admin .form-question .choices .input-group:has(> .rq-field-micro) {
    flex-wrap: wrap;
    row-gap: 0.35rem;
}

body.context-ultron .rq-admin .form-question .choices .input-group:has(> .rq-field-micro) > .form-control:first-of-type {
    flex: 1 1 calc(100% - 3rem);
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

body.context-ultron .rq-admin .form-question .choices .input-group:has(> .rq-field-micro) > .choice-icon {
    min-width: 0;
}

body.context-ultron .rq-admin .form-question .choices .input-group:has(> .rq-field-micro) > :not(:first-child):not(.choice-icon):not(.form-control:first-of-type):not(.btn) {
    flex: 1 1 4.5rem;
    margin-left: 0;
    border-radius: var(--bs-border-radius);
}

body.context-ultron .rq-admin .form-question .choices .input-group:has(> .rq-field-micro)::after {
    content: "";
    order: 2;
    flex: 0 0 2.25rem;
}

body.context-ultron .rq-admin .form-question .choices .input-group:has(> .rq-field-micro)::before {
    content: "";
    order: 3;
    flex: 0 0 100%;
    height: 0;
}

body.context-ultron .rq-admin .form-question .choices .input-group > .rq-field-micro {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 -0.35rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
    order: 2;
    flex: 1 1 4.5rem;
    min-width: 0;
    color: var(--rq-table-muted);
    font-size: var(--rq-font-micro);
    line-height: 1.3;
}

body.context-ultron .rq-admin .form-question .choices .input-group > .rq-field-micro + *,
body.context-ultron .rq-admin .form-question .choices .input-group > .rq-field-micro + * + .selectize-control {
    order: 4;
}

/* «Quitar» con ancho de botón ícono: la regla de los campos (arriba) lo excluye y :last-child le gana a la regla
   compartida del teléfono (0,8,0); si no, entraba al reparto flex y medía media fila. */
body.context-ultron .rq-admin .form-question .choices .input-group:has(> .rq-field-micro) > .btn:last-child {
    order: 4;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    margin-left: 0;
    border-radius: var(--bs-border-radius);
}

/* «Quitar» queda solo en ícono, como en el teléfono: con el texto visible el botón no cabe en los 2.25rem del espaciador
   de la fila de rótulos. El nombre accesible sigue en «Quitar opción» (visually-hidden). */
body.context-ultron .rq-admin .form-question .choices .input-group:has(> .rq-field-micro) > .btn .hidden-xs {
    display: none;
}

/* Foco en los botones de las confirmaciones (SweetAlert) del admin: el anillo propio es un box-shadow al 50 % del color
   del botón (≈2:1 sobre blanco). Mismo contorno que el resto de los botones del admin. El diálogo cuelga del body, fuera
   de .rq-admin: se ancla al contexto del body; en el portal SweetAlert conserva el suyo. */
.rq-admin-shell .swal2-actions .swal2-styled:focus-visible {
    box-shadow: none;
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

/* Ultron: las alertas de resultado (Swal.fire sin color) pintaban «OK» en el morado de SweetAlert. SweetAlert 11
   lee el color de --swal2-confirm-button-background-color (definida en :root) y, cuando el llamador pasa
   confirmButtonColor, la escribe en línea en el botón, que sigue ganando a este valor heredado. */
body.context-ultron .swal2-popup {
    --swal2-confirm-button-background-color: var(--rq-table-ink);
}

/* ----- Tema neutro anclado a los tres contextos del admin (body), no a .rq-admin ni a dos de ellos -----
   El CSS dinámico de ferias (faire.css.twig, carga después de este archivo) pinta .btn-outline-secondary y su :focus con
   el color secundario de la feria, y portal.css.twig pinta el título y el chip de las tarjetas .nice-list con los
   colores del portal. En el admin el secundario es neutro (barra de formulario, constructor, tarjetas): en reposo
   (0,3,0) gana al (0,2,0) del tema y con :focus/:hover (0,4,0) gana a su (0,3,0), sin !important. Seleccionado (toggle .btn-check, .active, menú abierto) en tinta sólida.
   El mismo trío (reposo, hover, seleccionado) lo comparten, cada uno con su propio contexto:
   - Ultron: los «Sí/No» de radio con botón (btn-check + btn-outline-primary, p. ej. «Mostrar puntaje» de Formularios),
     que iban en el azul de Bootstrap. Solo los que son radio: otros btn-outline-primary no cambian.
   - «Anterior» del asistente (smartWizard): blanco con borde, junto al «Siguiente» en tinta.
   - Primario del admin de ferias en reposo (ver «Primario neutro en el admin de ferias», más abajo).
   Van como listas separadas por comas (no dentro de :is()) para que cada selector conserve su especificidad. */
.rq-admin-shell .btn.btn-outline-secondary,
.rq-admin-shell .btn.btn-outline-secondary:focus,
body.context-ultron .rq-admin .btn-check + .btn.btn-outline-primary,
.rq-wizard .sw-theme-dots .toolbar > .sw-btn-prev {
    background-color: #fff;
    border-color: var(--rq-control-line);
    color: var(--rq-table-ink);
}

.rq-admin-shell .btn.btn-outline-secondary:is(:hover, :active),
body.context-ultron .rq-admin .btn-check + .btn.btn-outline-primary:hover {
    background-color: var(--rq-table-hover);
    border-color: var(--rq-table-ink);
    color: var(--rq-table-ink);
}

.rq-admin-shell .btn.btn-outline-secondary:is(.active, .show),
.rq-admin-shell .btn-check:checked + .btn.btn-outline-secondary,
body.context-ultron .rq-admin .btn-check:checked + .btn.btn-outline-primary,
.context-admin_faire .btn.btn-primary,
.context-admin_faire .btn.btn-primary:is(.disabled, :disabled) {
    background-color: var(--rq-table-ink);
    border-color: var(--rq-table-ink);
    color: #fff;
}

.rq-admin-shell .nice-list .nice-card-content .nice-title {
    color: var(--rq-table-ink);
}

.rq-admin-shell .nice-list .nice-card-content .nice-category-br {
    background-color: var(--rq-badge-muted-bg);
    color: var(--rq-badge-muted-ink);
}

/* Títulos en mayúscula inicial: 8 hojas de portal fijan `h1…h6 { text-transform: uppercase }` y entraba en la cabecera,
   las secciones, los drawers y los diálogos. (0,0,2) con :where(): gana a la regla de tipo del portal (0,0,1) y cede a
   cualquier clase con mayúsculas a propósito (.rq-sheet__heading, .rq-composer__filters-title). */
body:where(.rq-admin-shell) :where(.rq-admin, .rq-drawer, .swal2-popup) :is(h1, h2, h3, h4, h5, h6) {
    text-transform: none;
}

/* Familia neutra en esos títulos (decisión #69): unas 30 hojas de portal fijan `h1…h6 { font-family: … !important }` con
   tipografías display, y el mismo admin se leía distinto en cada portal. !important para ganarles; (0,0,2) con :where()
   gana a su regla de tipo (0,0,1) sin depender del orden de carga. Regla aparte para poder revertirla sola. */
body:where(.rq-admin-shell) :where(.rq-admin, .rq-drawer, .swal2-popup) :is(h1, h2, h3, h4, h5, h6) {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* Ultron: el portal anfitrión fija la familia del cuerpo y no la de los títulos, así que la regla anterior los
   separaba en dos sans parecidas. En Ultron los títulos vuelven a heredar la del cuerpo. (0,1,2) gana a (0,0,2) sin
   depender del orden; admin de portal y de ferias siguen con la familia neutra. */
body.context-ultron :where(.rq-admin, .rq-drawer, .swal2-popup) :is(h1, h2, h3, h4, h5, h6) {
    font-family: inherit !important;
}

/* ----- Pie del drawer al fondo del panel en formularios cortos -----
   El contenido AJAX llega envuelto (#pop_up_window, <form> o ambos) y el pie quedaba pegado a los campos, a media
   altura, con el panel vacío debajo. Cadena flex con :has() para los cuatro anidamientos (directo, #pop_up_window, form,
   los dos): el envoltorio que contiene el pie crece, el cuerpo crece y el pie se va al fondo. En formularios largos el
   pie sigue sticky. Un anidamiento no cubierto queda como antes. Solo en los tres contextos admin: los drawers de
   empresa (/myCompany, dashboard de feria) quedan como en release. */
.rq-admin-shell .modal.rq-drawer .modal-content {
    display: flex;
    flex-direction: column;
}

.rq-admin-shell .modal.rq-drawer .modal-content > :is(#pop_up_window, form):has(.modal-footer),
.rq-admin-shell .modal.rq-drawer .modal-content > #pop_up_window > form:has(> .modal-footer) {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.rq-admin-shell .modal.rq-drawer :is(.modal-content, #pop_up_window, form) > .modal-body {
    flex: 1 0 auto;
}

.rq-admin-shell .modal.rq-drawer .modal-footer {
    margin-top: auto;
}

/* Al abrir, el foco va al título del drawer (tabindex="-1", para lectores de pantalla): sin el halo azul del navegador
   cuando el foco es programático; con teclado, el contorno de tinta del sistema. */
.rq-admin-shell .rq-drawer__header .modal-title:focus:not(:focus-visible) {
    outline: none;
}

.rq-admin-shell .rq-drawer__header .modal-title:focus-visible {
    outline: var(--rq-focus-on-light);
    outline-offset: 2px;
}

/* ----- Grilla de tarjetas de formularios en el admin (Forms y Campaign/FormList) -----
   nice-system.css da a cada .nice-card (que es la columna de Bootstrap, con el borde) margin: 20px 10px: los 20 px de
   más dejaban 2 por fila desde 1200 y 1 por fila entre 768 y 1199. La fila pasa a grilla con hueco propio (3 / 2 / 1
   columnas en los mismos cortes que col-xl-4 / col-md-6) y la tarjeta conserva su caja (borde, cinta «destacado»,
   «Duplicar» en la esquina). El chip «N preguntas» entra al flujo bajo el título (antes absoluto, sobre «Editar» y
   fuera del borde) y la tarjeta no se desvanece al pasar el mouse. La rama de empresa (/myCompany) queda como estaba. */
.rq-admin-shell .nice-list > .row:has(> .nice-card) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0 0 1rem;
}

@media (min-width: 768px) {
    .rq-admin-shell .nice-list > .row:has(> .nice-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .rq-admin-shell .nice-list > .row:has(> .nice-card) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.rq-admin-shell .nice-list > .row > .nice-card[class*="col-"] {
    width: auto;
    max-width: none;
    margin: 0;
}

.rq-admin-shell .nice-list .nice-card-content:hover {
    opacity: 1;
}

.rq-admin-shell .nice-list .nice-card-content .nice-category-br {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.25rem 0 0.5rem;
}

.rq-admin-shell .nice-list .nice-card-content:has(.rq-card-corner-action) .nice-title {
    padding-inline-end: 2.75rem;
}

/* Clasificador de un perfil (Forms/formProfileClassificationForm): campo y «Quitar» en una fila también a 390 (se
   partía y la ✕ quedaba sola en otra línea), con las esquinas interiores del campo rectas. */
.rq-admin .form-question .input-group.rq-classifier {
    flex-wrap: nowrap;
}

.rq-admin .form-question .input-group.rq-classifier > .form-control {
    min-width: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

/* ----- Primario neutro en el admin de ferias -----
   faire.css.twig (carga después de este archivo) pinta .btn-primary con el color de la feria (1,45:1 con blanco sobre
   un color claro): «Filtrar», «Guardar» y el resto de los primarios del admin de ferias quedaban ilegibles. En el
   contexto admin_faire el primario es tinta, como btn-dark. Solo ese contexto: en el admin de portal y en Ultron los
   primarios ya son btn-dark, y el candidato y la empresa conservan el color del portal. En reposo (0,3,0) gana al
   (0,1,0) del tema; con estados (0,4,0) gana a su (0,3,0); sin !important. El reposo va con el trío neutro del tema
   de botones (más arriba). */
.context-admin_faire .btn.btn-primary:is(:hover, :focus, .focus, :active, .active, .show) {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

/* Título de las confirmaciones del admin en tinta (SweetAlert trae #545454). */
.rq-admin-shell .swal2-title {
    color: var(--rq-table-ink);
}

/* La ayuda de la barra de estado de TinyMCE («Presione Alt+0…») en un drawer angosto: una línea con elipsis, no dos con
   la segunda cortada. */
.rq-admin-shell .modal.rq-drawer .tox .tox-statusbar__help-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Admin de ferias a 390: el h1 de las pantallas legacy pasa por debajo del botón del menú (fijo arriba a la derecha). */
@media (max-width: 575.98px) {
    body.context-admin_faire:has(> .admin-menu-sidebar-button) #content-wrapper .heading-block > h1 {
        padding-inline-end: 3.5rem;
    }
}

/* Vista previa de un correo de mailing. El cuerpo vive en un iframe con `sandbox` vacío para que
   no ejecute nada en la página del admin (ver `_previewModal.html.twig`). La altura es fija y el
   scroll queda adentro: sin scripts dentro del iframe no hay forma de que se autodimensione, y un
   correo masivo siempre es más alto que el modal. */
.rq-mail-preview__frame { display: block; width: 100%; height: min(70vh, 900px); border: 1px solid var(--rq-table-line); border-radius: var(--rq-card-radius, 12px); background: #fff; }
/* En el telefono `70vh` mas la cabecera pasa el tope de `.modal-content`, y el cuerpo del modal
   termina con su propio scroll ademas del que ya tiene el marco. `dvh` descuenta la barra de
   direcciones, que es justo lo que `vh` ignora en iOS. */
@media (max-width: 575.98px) {
    .rq-mail-preview__frame { height: calc(100dvh - 13rem); min-height: 18rem; }
}