/* ============================================= */
/* --- REDISEÑO DEL ENCABEZADO (SIN STICKY) --- */
/* ============================================= */

.breadcrumbs {
    position: relative !important;
    top: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 30px 40px 10px 40px !important;
    padding-top: calc(30px + env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box !important;
    /* Espacio limpio solo arriba */
    margin: 0 !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    border: none !important;
    box-shadow: none !important;
}

/* ======================================================== */
/* --- CABECERAS STICKY CAMUFLADAS (Postulantes, Pagos, Mensajes, etc.) --- */
/* ======================================================== */
.profile-requests-header,
.expanded-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    margin: 0 -40px 25px -40px !important;
    /* Se estira a los bordes de la pantalla */
    padding: 0 40px 15px 40px !important;
    /* Espacio exacto para la línea inferior */

    /* MAGIA VISUAL: Fondo Camuflaje Sincronizado */
    background-color: #f4f7fa !important;
    background-image: radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.07) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(147, 51, 234, 0.05) 0px, transparent 50%), radial-gradient(at 100% 0%, rgba(2, 132, 199, 0.06) 0px, transparent 50%) !important;
    background-attachment: fixed !important;

    /* Matamos los desenfoques para que el camuflaje sea perfecto */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;

    /* Línea divisora idéntica a la de 'Mi Perfil' */
    border-bottom: 2px solid rgba(203, 213, 225, 0.6) !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Limpiamos los títulos internos para que dejen brillar a la caja maestra */
.profile-requests-header h2,
#expandedTitle {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #0f172a !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    box-shadow: none !important;
}

/* Nuevos estilos para el header del perfil (FORZADOS) */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px !important;
    padding-top: calc(15px + env(safe-area-inset-top, 0px)) !important;

    /* EL PARCHE NUCLEAR DE COLOR */
    background: rgba(244, 247, 250, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.05) !important;

    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    height: 75px !important;
    box-sizing: border-box;
}

.profile-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-header .logo {
    height: 40px;
    width: auto;
}

.profile-header .title {
    font-size: 1.5rem;
    color: #333;
    margin: 0;
}

.btn-back {
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background-color: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.mobile-profile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.mobile-profile-menu-btn img {
    width: 24px;
    height: 24px;
}

/* Sidebar responsivo */
.profile-sidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.password-wrapper {
    position: relative;
    width: 100%;
}

/* Deja espacio suficiente dentro del input para el botón */
.password-wrapper input {
    width: 100%;
    padding-right: 3em;
    /* antes: 2.5em; ampliamos el espacio */
    box-sizing: border-box;
    /* incluir padding en el ancho total */
}

/* Posiciona el botón centrado verticalmente y pegado a la derecha */
.toggle-password {
    position: absolute;
    top: 50%;
    /* mitad del alto del contenedor */
    right: 0.75em;
    /* separarlo un poco del borde */
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .mobile-profile-menu-btn {
        display: block;
    }

    .profile-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        z-index: 1000;
        transform: translateX(-100%);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .profile-sidebar.show {
        transform: translateX(0);
    }

    .profile-container {
        margin-left: 0;
    }
}

.btn-new-request {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-new-request:hover {
    background-color: #3e8e41;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* --- INICIO: NUEVOS ESTILOS PARA DASHBOARD FLUIDO --- */

/* Forzamos a la vista de asistente a no desbordar el contenedor */
#assistantView {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* El Dashboard ocupa el 100% del espacio sobrante mágico, sin matemáticas */
#assistantRequestsDashboard {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 20px;
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    /* Matamos el calc() viejo que causaba el doble scroll */
    overflow-x: auto;
    padding-bottom: 10px;
}

/* Las columnas toman la altura máxima y no desbordan */
.requests-section {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg, #ffffff);
    border-radius: 20px;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.03);
    max-height: 100% !important;
    overflow: hidden;
}

.requests-section .section-title {
    background-color: var(--card-bg, #ffffff);
    color: var(--text-color, #0f172a);
    font-weight: 800;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
    padding: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.requests-list {
    flex: 1;
    overflow-y: auto !important;
    /* MAGIA: SCROLL INDIVIDUAL Y EXCLUSIVO POR COLUMNA */
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- FIN: NUEVOS ESTILOS PARA DASHBOARD FLUIDO --- */

/* ============================================= */
/* --- 2. TARJETAS DE SOLICITUD PREMIUM --- */
/* ============================================= */
.requests-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    /* Tarjetas un poco más anchas para que respiren */
    gap: 25px;
    margin-top: 20px;
}

.request-card {
    border-radius: 20px;
    padding: 24px;
    background-color: var(--card-bg, #ffffff);
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Espaciado uniforme interno */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.request-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

/* Accent Top Line más sutil y elegante */
.request-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 20px 20px 0 0;
}


/* ============================================= */
/* --- 3. CONTENIDO INTERNO DE LA TARJETA --- */
/* ============================================= */
.request-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.request-title {
    font-size: 1.25rem;
    color: #0f172a;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
}

.request-description {
    color: var(--text-muted, #64748b);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* Trunca a 2 líneas si es muy larga */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Badges como Píldoras Modernas */
.request-student,
.request-type {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.request-student {
    background-color: #f1f5f9;
    color: #334155;
}

.request-type {
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.status-badge {
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================= */
/* --- 4. CARD FOOTER Y BOTONES --- */
/* ============================================= */
.request-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    margin-top: auto;
    /* Empuja el footer al fondo si la tarjeta es alta */
    border-top: 1px dashed #cbd5e1;
    /* Línea separadora elegante */
    flex-wrap: wrap;
    gap: 15px;
}

.request-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
}

.request-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-btn {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Botón Secundario (Ver Detalles / Neutro) */
.action-btn:not(.accept-btn):not(.btn-complete) {
    background-color: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.action-btn:not(.accept-btn):not(.btn-complete):hover {
    background-color: #e2e8f0;
    color: #0f172a;
}

/* Botón Primario (Aceptar) */
.accept-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

.accept-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3);
}

.accept-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    background: #cccccc;
    box-shadow: none;
    transform: none;
}

.loading-requests {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    padding: 40px;
}

.loading-requests img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.empty-requests {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #666;
}

.empty-requests img {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    opacity: 0.6;
}

/* --- INICIO: NUEVOS ESTILOS PARA VISTA DE DETALLE RESPONSIVA --- */

.request-detail-view {
    display: grid;
    /* En desktop: dos columnas, la del chat es 1.5 veces más ancha */
    grid-template-columns: 1fr 1.5fr;
    grid-template-areas: "info chat";
    gap: 25px;
}

.request-info-section {
    grid-area: info;
    /* Asignamos esta sección al área "info" */
}

.request-chat-section {
    grid-area: chat;
    /* Asignamos esta sección al área "chat" */
}

/* Media Query para apilar en pantallas de tabletas y móviles */
@media (max-width: 992px) {
    .request-detail-view {
        grid-template-columns: 1fr;
        /* Una sola columna */
        grid-template-areas:
            "info"
            "chat";
        /* Apilamos las áreas verticalmente */
    }
}

/* --- FIN: NUEVOS ESTILOS PARA VISTA DE DETALLE RESPONSIVA --- */

/* --- INICIO: LÓGICA PARA LA VISTA EXPANDIDA (CORREGIDO) --- */

/* Contenedor para la vista expandida (inicialmente oculto) */
#expandedViewContainer {
    display: none;
    /* ¡ESTA ES LA REGLA CLAVE! Oculto por defecto */
    flex-direction: column;
    width: 100%;
}

/* ============================================= */
/* --- TÍTULO DE VISTA EXPANDIDA STICKY --- */
/* ============================================= */
/* Redundant blocks removed */

#expandedContent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* --- INICIO: Estilos para la Barra de Filtro Avanzada (CORREGIDO) --- */

/* Por defecto (escritorio), el botón de toggle está OCULTO */
.filters-toggle-wrapper {
    display: none;
}

/* ============================================= */
/* --- 1. BARRA DE FILTROS "ISLAND TOOLBAR" --- */
/* ============================================= */
.filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-bottom: 30px;
    padding: 16px 24px;
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

#requestSearchInput {
    width: 100%;
    padding: 14px 22px;
    background-color: #f8fafc;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #1e293b;
    transition: all 0.3s ease;
}

#requestSearchInput:focus {
    background-color: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    outline: none;
}

.filter-select {
    padding: 14px 20px;
    background-color: #f8fafc;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 160px;
}

.filter-select:focus,
.filter-select:hover {
    background-color: #ffffff;
    border-color: #cbd5e1;
    outline: none;
}

/* --- FIN: Estilos para la Barra de Filtro Avanzada --- */


/* --- INICIO: Media Query para Filtros Desplegables (SOLUCIÓN DEFINITIVA) --- */

@media (max-width: 768px) {

    /* En móvil, el botón de toggle se HACE VISIBLE */
    .filters-toggle-wrapper {
        display: block;
        margin-bottom: 20px;
    }

    .btn-toggle-filters {
        width: 100%;
        padding: 12px 20px;
        background-color: #f0f7ff;
        border: 1px solid #dbe1e8;
        color: #2575fc;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
    }

    .btn-toggle-filters .filter-arrow {
        width: 24px;
        height: 24px;
        fill: #2575fc;
        transition: transform 0.3s ease;
    }

    .btn-toggle-filters.active .filter-arrow {
        transform: rotate(180deg);
    }

    /* El contenedor de filtros se OCULTA por defecto */
    .filters-container {
        display: none;
        flex-direction: column;
        gap: 12px;
    }

    .filters-container.show {
        display: flex;
    }

    .search-container,
    .filter-options {
        /* --- ¡LA SOLUCIÓN REAL ESTÁ AQUÍ! --- */
        /* Reseteamos por completo las propiedades flex heredadas del escritorio. */
        flex: none;
        width: 100%;
    }

    .filter-options {
        display: flex;
        /* Aseguramos que los selects se mantengan en fila */
        flex-direction: row;
        gap: 10px;
    }

    .filter-select {
        flex: 1;
        /* Hacemos que los selects compartan el espacio horizontal */
    }

    #requestSearchInput,
    .filter-select {
        font-size: 0.95rem;
    }
}

/* --- INICIO: Media Queries para Responsividad del Chat --- */

@media (max-width: 480px) {

    /* Hacemos el contenedor de entrada más compacto */
    .message-input-container {
        gap: 8px;
        /* Reducimos el espacio entre elementos */
    }

    /* Ajustamos el padding del campo de texto */
    #messageInput {
        padding: 10px 15px;
        font-size: 15px;
    }

    /* Optimizamos el botón de Enviar */
    #sendMessageBtn {
        padding: 10px 15px;
    }

    /* Hacemos el botón de adjuntar un poco más pequeño */
    .file-input-label {
        padding: 6px;
    }

    .file-input-label img {
        width: 20px;
        height: 20px;
    }
}

/* --- FIN: Media Queries para Responsividad del Chat --- */

/* --- INICIO: Media Query para Pie de Tarjeta Responsivo --- */

@media (max-width: 500px) {
    .request-footer {
        flex-direction: column;
        /* Apila los elementos verticalmente */
        align-items: flex-start;
        /* Alinea todo a la izquierda */
        gap: 12px;
        /* Crea espacio entre la fecha y la línea de estado/botones */
    }

    .request-status {
        width: 100%;
        /* Hace que la segunda línea ocupe todo el ancho */
        justify-content: space-between;
        /* Mantiene el estado a la izquierda y los botones a la derecha */
    }
}

/* --- FIN: Media Query para Pie de Tarjeta Responsivo --- */
/* /css/perfil_solicitudes.css */

/* ======================================================== */
/* --- VISTA DE DETALLE PREMIUM Y CHAT (CERO SCROLL EXTERNO) --- */
/* ======================================================== */
.request-detail-view {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 30px;
    flex: 1;
    /* Absorbe el espacio disponible exacto de la pantalla */
    min-height: 0;
    /* Bloquea el crecimiento infinito del Grid */
    overflow: hidden;
    /* Corta cualquier scroll global en esta vista */
}

/* --- Columna Izquierda (Info con Scroll Propio) --- */
.request-info-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    /* Magia: Solo esta columna hace scroll si hay mucho texto */
    padding-right: 10px;
    padding-bottom: 20px;
    /* Da espacio para que los botones respiren abajo */
}

.request-info-section::-webkit-scrollbar {
    width: 4px;
}

.request-info-section::-webkit-scrollbar-track {
    background: transparent;
}

.request-info-section::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4);
    border-radius: 10px;
}

.section-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.badge-yellow {
    background: #fef3c7;
    color: #d97706;
}

.badge-blue {
    background: #e0f2fe;
    color: #0284c7;
}

.badge-green {
    background: #d1fae5;
    color: #059669;
}

.badge-purple {
    background: #f3e8ff;
    color: #9333ea;
}

.request-meta-premium {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    padding: 15px;
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.meta-item {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.meta-value {
    font-size: 1.1rem;
    color: #0f172a;
    font-weight: 800;
}

/* Caja de Descripción Fija (Optimizada) */
.request-description-box {
    background: var(--hover-bg, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 20px;
    min-height: 100px;
    /* Reducido de 180px para que no se vea tan vacío */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Botones en el fondo */
.action-buttons-wrapper {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.action-buttons-wrapper .btn-submit {
    margin: 0;
    padding: 18px;
    font-size: 1.05rem;
}

/* Asistente Premium */
.assistant-details-premium {
    display: flex;
    align-items: center;
    gap: 20px;
}

.assistant-avatar-large {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #eff6ff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.assistant-name {
    font-size: 1.1rem;
    color: #0f172a;
    margin: 0 0 5px 0;
    font-weight: 800;
}

/* --- Columna Derecha (Chat) --- */
.request-chat-section {
    height: 100%;
    /* El chat se congela y toma todo el espacio disponible */
    background: #ffffff;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Evita que el contenedor del chat se rompa */
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.chat-header {
    padding: 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #ffffff;
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.message-sent {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.message-sent .message-time {
    color: rgba(255, 255, 255, 0.7) !important;
}

.message-received {
    background-color: #f1f5f9;
    color: #0f172a;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    border: 1px solid #e2e8f0;
}

.chat-input-wrapper {
    padding: 15px 20px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

#messageInput {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 14px 20px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 24px;
    font-size: 0.95rem;
    transition: all 0.3s;
    box-sizing: border-box;
}

#messageInput:focus {
    background: white;
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#sendMessageBtn {
    flex-shrink: 0;
    background: #2563eb;
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    box-sizing: border-box;
    min-width: 90px;
}

#sendMessageBtn:hover {
    background: #1d4ed8;
}

.file-input-label {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    padding: 10px;
    background: #f1f5f9;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    box-sizing: border-box;
}

.file-input-label:hover {
    background: #e2e8f0;
}

.file-input-label img {
    width: 20px;
    opacity: 0.7;
}

@media (max-width: 992px) {
    .request-detail-view {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .request-chat-section {
        height: 60vh;
        min-height: 500px;
        flex: none;
    }

    .request-info-section {
        overflow: visible;
        padding-right: 0;
        flex: none;
    }
}

/* /css/perfil_solicitudes.css */

/* --- INICIO: ESTILOS FALTANTES PARA EL CHAT --- */

.message {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    padding: 10px 15px;
    line-height: 1.4;
    position: relative;
}

/* --- DASHBOARD DE GESTIÓN DE USUARIOS (CORREGIDO) --- */

/* Contenedor principal de las 3 columnas */
.users-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

/* Tarjeta contenedora de cada rol */
.role-section-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 500px;
    /* Altura fija necesaria para el scroll interno */
    transition: transform 0.2s, box-shadow 0.2s;
}

.role-section-card:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Encabezado de la tarjeta */
.role-header {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.role-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #2A3166;
}

.role-count-badge {
    background-color: #2575fc;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Área de lista con scroll interno */
.role-scroll-area {
    flex: 1;
    /* Ocupa el espacio restante */
    overflow-y: auto;
    /* Activa el scroll vertical */
    padding: 10px;
    background-color: #fff;
}

/* Tarjeta pequeña de usuario (dentro de las cajas) */
.mini-user-card {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    gap: 10px;
}

.mini-user-card img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.mini-user-info p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.mini-user-info small {
    color: #777;
    font-size: 0.75rem;
}

/* Botón inferior "Ver Todos" */
.btn-expand-role {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: none;
    border-top: 1px solid #eee;
    color: #2575fc;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-expand-role:hover {
    background-color: #f0f7ff;
}

/* Colores superiores por rol */
.role-card-estudiante {
    border-top: 4px solid #2575fc;
}

/* Azul */
.role-card-asistente {
    border-top: 4px solid #ffc107;
}

/* Amarillo */
.role-card-admin {
    border-top: 4px solid #dc3545;
}

/* Rojo */

.message-sent {
    background-color: #dcf8c6;
    /* Verde claro para enviados */
    align-self: flex-end;
    /* Alinea a la derecha */
    border-bottom-right-radius: 4px;
}

.message-received {
    background-color: #ffffff;
    /* Blanco para recibidos */
    align-self: flex-start;
    /* Alinea a la izquierda */
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.message-sender {
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.sender-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
}

.message-time {
    font-size: 0.75rem;
    color: #888;
}

.message-content {
    font-size: 0.95rem;
}

.message-status {
    position: absolute;
    bottom: 5px;
    right: 10px;
    display: flex;
    align-items: center;
}

.message-status svg {
    width: 16px;
    height: 16px;
}

/* Estilo para archivos adjuntos */
.message-file {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0056b3;
}

.message-file a {
    word-break: break-word;
}

.message-sent .message-file a {
    color: #ffffff !important;
}

.message-sent .message-file img {
    filter: brightness(0) invert(1);
}

.message-received .message-file a {
    color: #0f172a !important;
}

.message-file img {
    width: 20px;
}

/* Estilos para miniaturas de imagen dentro del chat */
.chat-thumbnail {
    width: 150px;
    height: auto;
    max-height: 200px;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.chat-thumbnail:hover {
    transform: scale(1.02);
}

/* --- FIN: ESTILOS FALTANTES PARA EL CHAT --- */
/* /css/perfil_solicitudes.css */

/* --- INICIO: CORRECCIÓN PARA CHAT SCROLEABLE --- */

/* 1. Hacemos que la sección del chat ocupe la altura disponible
  dentro del grid sin desbordarse.
*/
.request-chat-section {
    display: flex;
    flex-direction: column;
    /* Importante: Evita que el contenedor se estire infinitamente */
    overflow: hidden;
    /* Opcional: define una altura máxima si es necesario, 
       pero el overflow y el flex-grow del hijo deberían ser suficientes. */
    max-height: 80vh;
}

/* 2. Hacemos que el contenedor de mensajes crezca para llenar
  el espacio y active su propio scroll cuando sea necesario.
*/
.messages-container {
    flex-grow: 1;
    /* <-- La clave: hace que este elemento ocupe el espacio sobrante. */
    overflow-y: auto;
    /* <-- La clave: activa el scroll vertical solo para los mensajes. */
    min-height: 200px;
    /* Asegura una altura mínima visible. */
}

/* --- FIN: CORRECCIÓN PARA CHAT SCROLEABLE --- */
/* ============================================= */
/* --- ESTILOS PARA LA VENTANA EMERGENTE (MODAL) DE PAGO --- */
/* ============================================= */

.modal {
    display: flex;
    /* Flexbox para centrar el modal en la pantalla */
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 2000;
    /* Muy por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    width: 90%;
    max-width: 450px;
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    /* ¡CRUCIAL! Centra el texto y los elementos inline (QR, botones) */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centra elementos flex hijos */
    animation: slideIn 0.4s ease-out;
}

/* Asegurar que el contenido dentro del modal se comporte bien */
.modal-content h3 {
    margin-top: 0;
    color: #2575fc;
    font-size: 1.5rem;
}

.modal-content p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Estilo para la imagen QR */
.modal-content img[alt="QR Pago"] {
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 5px;
    margin: 15px auto;
    max-width: 180px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Botón de cerrar */
.close-modal {
    color: #aaa;
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    transition: color 0.2s;
}

.close-modal:hover {
    color: #333;
}

/* Input de archivo (Icono) */
.btn-upload-icon {
    width: 100%;
    max-width: 300px;
    /* Que no sea demasiado ancho */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px dashed #cccccc;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
    margin: 10px auto;
}

.btn-upload-icon:hover {
    border-color: #2575fc;
    background-color: #f0f7ff;
}

/* Checkbox de términos */
.checkbox-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    width: 100%;
}

/* Botón de confirmar */
#confirmPaymentBtn {
    width: 100%;
    margin-top: 20px;
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================================= */
/* --- ESTILOS PARA EL BOTÓN DE SUBIR ARCHIVO (ICONO) --- */
/* ============================================= */

.btn-upload-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px dashed #cccccc;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
}

.btn-upload-icon img {
    width: 40px;
    margin-bottom: 10px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.btn-upload-icon span {
    font-weight: 600;
    color: #555;
    transition: color 0.3s ease;
}

.btn-upload-icon:hover {
    border-color: #2575fc;
    background-color: #f0f7ff;
}

.btn-upload-icon:hover img {
    opacity: 1;
}

.btn-upload-icon:hover span {
    color: #2575fc;
}

/* Añade esto al final de: public/css/perfil_solicitudes.css */

/* --- ESTILOS PARA EL PANEL DE ASISTENTE MEJORADO --- */

.assistant-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.requests-section .section-title {
    font-size: 1.2rem;
    padding: 15px;
    margin: 0;
    background-color: #f0f2f5;
    /* Un fondo gris claro para el encabezado */
    color: #2c3e50;
    /* Un color de texto oscuro y profesional (casi negro) */
    cursor: pointer;
    text-align: center;
    border-bottom: 1px solid #e0e5ec;
    transition: all 0.2s ease-in-out;
}

.requests-section .section-title:hover {
    background-color: #e9ecef;
}

/* --- ESTILOS PARA LA VISTA EXPANDIDA --- */

#expandedViewContainer {
    display: none;
    /* Oculto por defecto */
    flex-direction: column;
    width: 100%;
    animation: fadeIn 0.4s ease;
}

/* ============================================= */
/* --- TÍTULO DE VISTA EXPANDIDA STICKY --- */
/* ============================================= */
/* Redundant blocks removed */

.expanded-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* --- ESTILOS PARA LA BARRA DE FILTROS --- */

.filters-toggle-wrapper {
    display: none;
    /* Oculto en desktop */
}

.filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 10px;
}

.search-container {
    position: relative;
    flex: 1 1 300px;
    /* Crece para ocupar espacio */
}

#requestSearchInput {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #e0e5ec;
    border-radius: 25px;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
}

#requestSearchInput:focus {
    outline: none;
    border-color: #a0cfff;
    box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.2);
}

.filter-options {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
    /* Crece pero no tanto como el search */
    justify-content: flex-end;
}

.filter-select {
    padding: 10px 15px;
    border: 1px solid #e0e5ec;
    border-radius: 8px;
    background-color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    min-width: 150px;
}

/* --- RESPONSIVIDAD PARA FILTROS --- */

@media (max-width: 768px) {
    .filters-toggle-wrapper {
        display: block;
        margin-bottom: 20px;
    }

    .btn-toggle-filters {
        width: 100%;
        padding: 12px 20px;
        background-color: #f0f7ff;
        border: 1px solid #dbe1e8;
        color: #2575fc;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .filter-arrow {
        width: 24px;
        height: 24px;
        fill: var(--primary-color, #2575fc);
        transition: transform 0.3s ease;
    }

    .btn-toggle-filters.active .filter-arrow {
        transform: rotate(180deg);
    }

    .filters-container {
        display: none;
        /* Oculto por defecto en móvil */
        flex-direction: column;
        gap: 12px;
    }

    .filters-container.show {
        display: flex;
    }

    .search-container,
    .filter-options {
        flex: none;
        width: 100%;
    }

    .filter-options {
        flex-direction: column;
    }
}

/* Añade esto al final de: public/css/perfil_solicitudes.css */

/* --- ESTILO PARA LOS TÍTULOS DE SECCIÓN DEL PANEL --- */

.requests-section .section-title {
    font-size: 1.2rem;
    padding: 15px;
    margin: 0;
    /* Encabezado de la columna un poco más gris para diferenciar */
    background-color: #f8f9fa;
    color: #2c3e50;
    /* Un color de texto oscuro y profesional (casi negro) */
    cursor: pointer;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.2s ease-in-out;
}

.requests-section .section-title:hover {
    background-color: #e9ecef;
}

/* --- Estilos para Panel de Admin --- */
.nav-divider {
    border: none;
    border-top: 1px solid #e0e5ec;
    margin: 15px 0;
}

.nav-section-title {
    padding: 0 15px 10px;
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 600;
}

/* REEMPLAZA los estilos de .admin-verification-list y .verification-card con estos */

.admin-verification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.verification-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.verification-receipt {
    width: 100%;
    height: 200px;
    background-color: #f0f2f5;
}

.receipt-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* <-- ESTA ES LA CORRECCIÓN */
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.receipt-image:hover {
    transform: scale(1.05);
}

.verification-info {
    padding: 15px;
}

.verification-info h4 {
    margin: 0 0 10px 0;
    color: #2575fc;
}

.verification-info p {
    margin: 5px 0;
    font-size: 0.9rem;
    color: #555;
}

.verification-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 15px 15px 15px;
}

.verification-actions button {
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

/* --- Estilos para el Lightbox de la imagen --- */

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    animation: fadeIn 0.3s;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.btn-approve {
    background-color: #28a745;
    color: white;
}

.btn-approve:hover {
    background-color: #218838;
}

.btn-reject {
    background-color: #dc3545;
    color: white;
}

.btn-reject:hover {
    background-color: #c82333;
}

@media (max-width: 768px) {
    .verification-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .verification-receipt {
        margin: 15px 0;
    }

    .verification-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* --- Estilos para la Gestión de Usuarios --- */
.user-management-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.user-list-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
    color: #333;
}

.user-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.user-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.user-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    flex-grow: 1;
}

.user-info p,
.user-info small {
    margin: 0;
    line-height: 1.4;
}

.user-info small {
    color: #777;
}

.role-select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    cursor: pointer;
}

@media (max-width: 992px) {
    .user-management-container {
        grid-template-columns: 1fr;
    }
}


/* public/css/perfil_solicitudes.css */

/* --- NUEVO: Estilos para el botón de completar y su contenedor --- */

.assistant-actions-container {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.btn-complete {
    width: 100%;
    background-color: #6f42c1;
    /* Un color morado distintivo */
    font-size: 1rem;
}

.btn-complete:hover {
    background-color: #5a37a0;
    /* Un morado más oscuro al pasar el mouse */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(111, 66, 193, 0.2);
}

.btn-complete:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================= */
/* --- ESTILOS PARA EL MODAL DE CALIFICACIÓN --- */
/* ============================================= */

.rating-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.star {
    font-size: 40px;
    cursor: pointer;
    color: #ddd;
    /* Color inactivo (gris) */
    transition: color 0.2s;
}

.star:hover,
.star.active {
    color: #ffc107;
    /* Color activo (dorado) */
}

/* Ocultar el contenedor de notificaciones en la página de perfil */
.notifications-wrapper {
    display: none !important;
}

.rating-comment-area {
    width: 100%;
    padding: 15px;
    border: 2px solid #eee;
    border-radius: 8px;
    margin-bottom: 20px;
    resize: vertical;
    font-family: inherit;
}

.rating-comment-area:focus {
    border-color: #2575fc;
    outline: none;
}

/* ============================================= */
/* --- ESTILOS PARA RATING EN TARJETA ASISTENTE --- */
/* ============================================= */

.assistant-rating {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.assistant-stars {
    color: #ffc107;
    /* Dorado */
    font-size: 14px;
    letter-spacing: 1px;
}

.rating-count {
    font-size: 11px;
    color: #777;
    margin-top: 2px;
}

/* ============================================= */
/* --- SKELETON LOADING (PANTALLAS DE CARGA) --- */
/* ============================================= */

.skeleton {
    background: var(--card-bg, #f0f0f0);
    background-image: linear-gradient(to right,
            var(--card-bg, #f0f0f0) 0%,
            var(--hover-bg, #e0e0e0) 20%,
            var(--card-bg, #f0f0f0) 40%,
            var(--card-bg, #f0f0f0) 100%);
    background-repeat: no-repeat;
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear forwards;
    border-radius: 4px;
    color: transparent !important;
}

@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

/* Estilos específicos para el esqueleto del Ranking */
.ranking-card.skeleton-card {
    pointer-events: none;
    background: var(--card-bg, white);
    border-left: 5px solid var(--border-color, #e0e0e0);
    /* Borde gris mientras carga */
}

.skeleton-rank-pos {
    width: 40px;
    height: 30px;
    margin-right: 15px;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
}

.skeleton-info-group {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-score-badge {
    width: 50px;
    height: 25px;
    border-radius: 12px;
    margin-left: 10px;
}

/* ============================================= */
/* --- BARRA DE PROGRESO DE SUBIDA (CHAT) --- */
/* ============================================= */

#uploadProgressContainer {
    display: none;
    /* Oculto por defecto */
    width: 100%;
    padding: 10px 15px;
    background-color: #f0f7ff;
    border-top: 1px solid #e0e5ec;
    font-size: 0.85rem;
    color: #2575fc;
}

.progress-track {
    width: 100%;
    height: 6px;
    background-color: #e0e0e0;
    border-radius: 3px;
    margin-top: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: #2575fc;
    width: 0%;
    transition: width 0.2s ease;
    border-radius: 3px;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

/* ============================================= */
/* Redundant breadcrumbs removed */

.breadcrumb-item a {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-item a:hover {
    color: #1d4ed8;
}

.breadcrumb-item.active {
    color: #0f172a;
}

/* ============================================= */
/* --- ESTILOS PARA EL RANKING DE ASISTENTES --- */
/* ============================================= */

.ranking-container {
    max-width: 800px;
    margin: 0 auto;
}

.ranking-card {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
    border: 1px solid #eee;
    /* Borde izquierdo transparente por defecto */
    border-left: 5px solid transparent;
}

.ranking-card:hover {
    transform: scale(1.02);
}

.rank-position {
    font-size: 1.5rem;
    font-weight: 800;
    width: 40px;
    text-align: center;
    margin-right: 15px;
    color: #ccc;
    /* Color gris para puestos > 3 */
}

/* Colores del Podio (Oro, Plata, Bronce) */
.rank-1 {
    border-left-color: #FFD700;
}

.rank-1 .rank-position {
    color: #FFD700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 2rem;
}

.rank-2 {
    border-left-color: #C0C0C0;
}

.rank-2 .rank-position {
    color: #C0C0C0;
    font-size: 1.8rem;
}

.rank-3 {
    border-left-color: #CD7F32;
}

.rank-3 .rank-position {
    color: #CD7F32;
    font-size: 1.8rem;
}

.rank-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid #f0f2f5;
}

.rank-1 .rank-avatar {
    border-color: #FFD700;
}

.rank-info {
    flex-grow: 1;
}

.rank-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}

.rank-stats {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

.rank-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.score-badge {
    background-color: #e3f2fd;
    color: #2575fc;
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: 800;
    font-size: 1.1rem;
}

/* ============================================= */
/* --- OPTIMIZACIÓN DE RENDIMIENTO (NUEVO) --- */
/* ============================================= */

/* 1. Optimizar el contenedor del scroll */
.requests-list {
    /* Le dice al navegador que el contenido de esta lista es independiente */
    contain: content;
    /* Sugiere al navegador optimizar el scroll */
    will-change: scroll-position;
}

/* 2. Optimizar las tarjetas individuales */
.request-card {
    /* MAGIA: No renderiza la tarjeta si está fuera de la pantalla */
    content-visibility: auto;
    /* Necesario para content-visibility: estima la altura para que la barra de scroll no salte */
    contain-intrinsic-size: 200px;

    /* Optimización de composición */
    transform: translateZ(0);
    /* Fuerza aceleración por GPU */
    backface-visibility: hidden;
}

/* 3. Simplificar sombras (Las sombras complejas matan el rendimiento) */
.request-card {
    /* Sombra más simple y performante */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.request-card:hover {
    /* Evitamos cambiar layout (width/height) en hover, solo transform */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Cuando el cuerpo tiene la clase is-scrolling, ignoramos interacciones del mouse */
.is-scrolling .request-card {
    pointer-events: none;
    /* Desactiva hover y clicks mientras se mueve */
}

/* Estilo para el badge de ganancia total */
.total-earnings-badge {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 6px rgba(40, 167, 69, 0.2);
    display: flex;
    gap: 10px;
    align-items: center;
}

@media (max-width: 480px) {
    .profile-requests-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .total-earnings-badge {
        width: 100%;
        justify-content: space-between;
    }
}


/* --- ESTILOS DEL DASHBOARD FINANCIERO (ADMIN) --- */

.financial-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #ccc;
    transition: transform 0.2s;
}

.kpi-card:hover {
    transform: translateY(-3px);
}

.kpi-card h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-card span {
    font-size: 1.8rem;
    font-weight: 800;
    display: block;
}

.kpi-card small {
    display: block;
    margin-top: 5px;
    color: #999;
    font-size: 0.85rem;
}

/* Colores específicos */
.kpi-blue {
    border-left-color: #2575fc;
}

.kpi-blue span {
    color: #2A3166;
}

.kpi-yellow {
    border-left-color: #ffc107;
}

.kpi-yellow span {
    color: #eebb00;
}

.kpi-green {
    border-left-color: #28a745;
}

.kpi-green span {
    color: #28a745;
}

@media (max-width: 768px) {

    .profile-requests-header,
    .expanded-header {
        margin: 0 -20px 25px -20px !important;
        padding: 0 20px 15px 20px !important;
    }

    .requests-container {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        overflow-x: hidden !important;
        gap: 15px;
    }

    .request-card {
        padding: 18px !important;
    }

    .request-header {
        flex-wrap: wrap;
    }

    #dynamicContent {
        overflow-x: hidden !important;
    }

    #assistantRequestsDashboard {
        flex-direction: column !important;
        overflow-x: hidden !important;
        height: auto !important;
    }

    .requests-section {
        min-width: 100% !important;
        width: 100% !important;
        min-height: 350px !important;
        max-height: 450px !important;
        margin-bottom: 25px;
    }
}

@media (max-width: 480px) {
    .request-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .request-actions {
        width: 100%;
        justify-content: space-between;
    }

    .action-btn {
        flex: 1;
        text-align: center;
        justify-content: center;
        display: flex;
    }
}

@media (max-width: 768px) {
    .breadcrumbs {
        padding: 15px 20px 10px 20px !important;
        box-sizing: border-box !important;
    }
}

#mobileHeaderProfilePic {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    /* La hace completamente redonda */
    object-fit: cover !important;
    /* Evita que la foto se estire o aplaste */
    border: 2px solid #ffffff !important;
    /* Borde blanquito limpio */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    /* Sombra sutil y premium */
    background-color: #f1f5f9 !important;
    /* Color de fondo por si la imagen tarda en cargar */
    transition: transform 0.3s ease !important;
}

#mobileProfileMenuBtn:hover #mobileHeaderProfilePic {
    transform: scale(1.08) !important;
}

/* Fuerza el estilo premium de caja blanca para el botón Volver del Dashboard */
#backToDashboardBtn {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    /* Destruye el ancho gigante */
    margin-bottom: 20px !important;
    /* Le da espacio para que no se pegue al contenido de abajo */
}

#backToDashboardBtn:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05) !important;
}

/* ======================================================== */
/* Ajuste de la Barra Superior en Móviles */
/* ======================================================== */
@media (max-width: 768px) {

    /* 1. Barra superior principal */
    .profile-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 20px !important;
        padding-top: max(35px, env(safe-area-inset-top)) !important;
        /* Espacio forzado para Status Bar (APK/Android) */
        min-height: 75px !important;
    }

    /* 2. Mantener la palabra visible en versión compacta */
    .profile-header .title,
    .profile-header .brand-text {
        display: inline-block !important;
        font-size: 1.1rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .profile-header-left {
        gap: 8px !important;
    }

    /* 3. Acciones de la derecha */
    .profile-header-right,
    .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 15px !important;
    }

    /* 4. Ajuste del switch */
    .profile-header .theme-switch-wrapper,
    .profile-header .switch {
        margin: 0 !important;
        transform: scale(0.85) !important;
        transform-origin: right center !important;
        flex-shrink: 0 !important;
    }
}

/* Mantener fijos los bloques de resumen de dinero al hacer scroll */
.financial-dashboard {
    position: sticky !important;
    top: 55px !important;
    /* Ajuste milimétrico para sellar el hueco sin tapar las tarjetas */
    z-index: 40 !important;
    background-color: #f1f5f9 !important;
    padding-top: 10px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Hacer las tarjetas de resumen financiero más compactas y eficientes en escritorio */
.financial-dashboard .kpi-card {
    padding: 12px 20px !important;
    /* Reducimos drásticamente el espacio vacío arriba y abajo */
    min-height: auto !important;
    /* Quitamos alturas mínimas forzadas */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.financial-dashboard .kpi-card h4 {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
    /* Casi pegado al número */
    letter-spacing: 0.5px !important;
}

.financial-dashboard .kpi-card span {
    font-size: 1.6rem !important;
    /* Un tamaño contundente pero no gigante */
    margin: 0 !important;
    line-height: 1.1 !important;
}

.financial-dashboard .kpi-card small {
    font-size: 0.75rem !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* Cabecera ultra-compacta con título y migas de pan en horizontal para escritorio */
.profile-requests-header {
    padding: 15px 40px !important;
    margin-bottom: 20px !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    /* Cambiado a horizontal */
    justify-content: space-between !important;
    /* Título a la izquierda, migas a la derecha */
    align-items: center !important;
    /* Centrados verticalmente */
    flex-wrap: wrap !important;
    /* Por si la pantalla se achica un poco */
    gap: 15px !important;
}

/* Ajuste del título para que no tenga márgenes */
.profile-requests-header h2 {
    margin: 0 !important;
    font-size: 1.6rem !important;
    /* Tamaño elegante y eficiente */
    line-height: 1 !important;
}

/* Ajuste de las migas de pan para que se alineen perfecto con el título */
.profile-requests-header .breadcrumbs {
    padding: 0 !important;
    margin: 0 !important;
    /* Quitamos el margen inferior porque ya no están apilados */
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
}

/* ======================================================== */
/* Transformar a Cápsulas el Resumen de Dinero (Móvil) */
/* ======================================================== */
@media (max-width: 768px) {

    /* 0. Volver a apilar la cabecera ordenadamente en celular */
    .profile-requests-header {
        flex-direction: column !important;
        /* Apila el texto uno sobre otro */
        align-items: flex-start !important;
        /* Alinea todo a la izquierda */
        padding: 15px 20px 5px 20px !important;
        /* Menos espacio abajo para no empujar las cápsulas */
        margin-bottom: 0 !important;
        gap: 5px !important;
        background-color: #f1f5f9 !important;
        /* Fondo sólido de seguridad */
    }

    .profile-requests-header h2 {
        font-size: 1.4rem !important;
        /* Tamaño perfecto para móvil */
        text-align: left !important;
    }

    /* 1. Sellar la rendija del contenedor sticky de las cápsulas y Contenedor Sticky para Móvil */
    .financial-dashboard {
        position: sticky !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        gap: 8px !important;
        top: 50px !important;
        /* Reducido drásticamente para sellar el hueco */
        z-index: 50 !important;
        /* Prioridad máxima para que nada se superponga */
        background-color: #f1f5f9 !important;
        /* El fondo sólido es obligatorio para tapar */
        padding: 12px 10px 15px 10px !important;
        margin-top: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    /* 2. Transformar las Tarjetas en Cápsulas */
    .financial-dashboard .kpi-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        border-radius: 50px !important;
        margin: 0 !important;
        width: auto !important;
        flex: 1 !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* 3. Ocultar Texto e Iconos */
    .financial-dashboard .kpi-card h4,
    .financial-dashboard .kpi-card small,
    .financial-dashboard .kpi-card i,
    .financial-dashboard .kpi-card img {
        display: none !important;
    }

    /* 4. Estilo de los Valores (Lo único visible) */
    .financial-dashboard .kpi-card span {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. Asignar Colores Compactos */
    /* Revenue / Ingresos Totales (Verde) */
    .financial-dashboard .kpi-blue {
        background-color: #16a34a !important;
        color: #ffffff !important;
    }

    .financial-dashboard .kpi-blue span {
        color: #ffffff !important;
    }

    /* Payout / Por pagar (Azul) */
    .financial-dashboard .kpi-yellow {
        background-color: #2563eb !important;
        color: #ffffff !important;
    }

    .financial-dashboard .kpi-yellow span {
        color: #ffffff !important;
    }

    /* Utility / Utilidad (Gris claro con borde) */
    .financial-dashboard .kpi-green {
        background-color: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #cbd5e1 !important;
    }

    .financial-dashboard .kpi-green span {
        color: #475569 !important;
    }

    /* 6. Corregir el cuerpo de las tarjetas de pago (Asistente vs Banco) */
    .payment-card .request-body {
        grid-template-columns: 1fr !important;
        /* Stack vertical */
        gap: 15px !important;
    }

    /* 7. Apilar cálculos de la tarjeta de pago */
    .payment-calculations {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }
}

/* --- INICIO: DISEÑO DE TARJETA GURÚ ASIGNADO --- */
.assistant-details-premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.guru-profile-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 768px) {
    .assistant-details-premium {
        flex-direction: column;
        justify-content: center;
    }

    .guru-profile-info {
        flex-direction: column;
        text-align: center;
    }

    .guru-rating-wrapper {
        justify-content: center !important;
        margin-top: 10px;
    }
}

/* --- FIN: DISEÑO DE TARJETA GURÚ ASIGNADO --- */

/* ============================================= */
/* --- RESPONSIVIDAD CANCELACIONES --- */
/* ============================================= */

/* === TABLET Y MÓVIL (max-width: 768px) === */
@media (max-width: 768px) {

    /* --- 1. LISTA DE CANCELACIONES (#cancellationsList) --- */

    /* Tarjetas de cancelación: reducir padding */
    .status-cancelled-card {
        padding: 15px !important;
    }

    /* Header de la tarjeta: apilar verticalmente */
    .status-cancelled-card .request-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Badges dentro del header: que hagan wrap y no se salgan */
    .status-cancelled-card .request-header .status-badge {
        max-width: 100% !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-align: left !important;
        line-height: 1.4 !important;
        font-size: 0.7rem !important;
    }

    /* Caja de explicación interna: evitar desborde de texto */
    .status-cancelled-card .request-body div[style*="background: var(--hover-bg)"] {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 12px !important;
    }

    .status-cancelled-card .request-body p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* --- 2. VISTA DE DETALLE DE CANCELACIÓN --- */

    /* Encabezado del detalle: título más pequeño */
    .profile-requests-header h2 {
        font-size: 1.3rem !important;
    }

    /* Encabezado: botón volver y título se apilan si no caben */
    .profile-requests-header > div {
        flex-wrap: wrap !important;
    }

    /* ID badge en el topbar: ancho completo en móvil */
    .profile-requests-header > span[style*="monospace"] {
        font-size: 0.7rem !important;
    }

    /* Banner de origen de cancelación: centrar y ancho completo */
    div[style*="border-radius: 14px; display: flex; align-items: center; gap: 15px"] {
        flex-direction: column !important;
        text-align: center !important;
        padding: 15px !important;
    }

    div[style*="border-radius: 14px; display: flex; align-items: center; gap: 15px"] h3 {
        font-size: 1.1rem !important;
    }

    /* Metadatos (Presupuesto/Fecha/Materia): apilar verticalmente */
    div[style*="display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    div[style*="display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px"] > div {
        min-width: auto !important;
    }

    /* Cajas de descripción y motivos: padding reducido y texto legible */
    div[style*="border-radius: 14px"][style*="padding: 20px"] {
        padding: 15px !important;
    }

    div[style*="border-radius: 14px"] p {
        line-height: 1.6 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Grid de personas (Estudiante + Asistente): una columna */
    div[style*="display: grid; grid-template-columns: 1fr 1fr; gap: 20px"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Tarjetas de usuario: apilar foto y datos verticalmente */
    .form-section div[style*="display: flex; gap: 20px; align-items: flex-start"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Título del detalle de solicitud más compacto */
    .form-section h3[style*="font-size: 1.5rem"] {
        font-size: 1.2rem !important;
    }
}

/* === MÓVIL PEQUEÑO (max-width: 480px) === */
@media (max-width: 480px) {

    .modal-content {
        padding: 20px 15px;
    }

    .modal-content h3 {
        font-size: 1.2rem;
        margin-top: 10px;
    }

    .modal-content p {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .close-modal {
        top: 10px;
        right: 15px;
        font-size: 28px;
    }

    .btn-upload-icon {
        padding: 15px;
    }

    /* Botón "Ver Detalles": ancho completo */
    .status-cancelled-card .request-footer {
        justify-content: stretch !important;
    }

    .status-cancelled-card .request-footer .action-btn {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Tarjeta aún más compacta */
    .status-cancelled-card {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    /* Título de la actividad más pequeño */
    .status-cancelled-card .request-title {
        font-size: 1.05rem !important;
    }

    /* form-section compacto en detalle */
    .form-section {
        padding: 15px !important;
    }

    /* Encabezado del detalle: título aún más reducido */
    .profile-requests-header h2 {
        font-size: 1.15rem !important;
    }

    /* Encabezado: apilar botón volver + título si falta espacio */
    .profile-requests-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
}

/* === TRANSICIONES SUAVES AL REDIMENSIONAR === */
.status-cancelled-card,
.status-cancelled-card .request-header,
.status-cancelled-card .request-footer,
.status-cancelled-card .status-badge,
.form-section {
    transition: padding 0.3s ease, gap 0.3s ease, font-size 0.3s ease;
}

/* =========================================
   OPTIMIZACION DEL CHAT PARA PANTALLAS GRANDES
   ========================================= */
@media (min-width: 992px) {
    .request-chat-section {
        max-width: 850px;
        margin: 0 auto;
        width: 100%;
    }

    .message {
        max-width: 65%;
    }

    .messages-container {
        display: flex;
        flex-direction: column;
    }

    .message-sent {
        align-self: flex-end;
        margin-left: auto;
    }

    .message-received {
        align-self: flex-start;
        margin-right: auto;
    }
}