/* ==========================================================================
   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;
}

/* 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-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-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. */
:is(.context-admin_alumni, .context-ultron) :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;
}

.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. */
.rq-badge--ok {
    background: #dcfce7;
    color: #14532d;
    border-color: #bbf7d0;
}

.rq-badge--warn {
    background: #fef3c7;
    color: #78350f;
    border-color: #fde68a;
}

.rq-badge--danger {
    background: #fee2e2;
    color: #7f1d1d;
    border-color: #fecaca;
}

.rq-badge--muted {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

/* ----- 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 {
    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;
}