/* ==================== tutor-perfil.css ==================== */

@import 'variables.css';

/** TABLE OF CONTENTS PC
------------------------------------------------------------/

1 - Tutor Principal................................... 43-63
2 - Tutor BreadCrumb.................................. 65-85
3 - Tutor Grid........................................ 87-98
4 - Tutor Card...................................... 100-105
5 - Tutor Banner.................................... 107-153
    5.1 - Banner Video.............................. 116-153
6 - Tutor Perfil.................................... 155-220
7 - Tutor Tabs...................................... 222-382
8 - Tutor Calendario-Horario........................ 384-847
    8.1 - Dias-Horarios Disponibles................. 387-390
    8.2 - Dias Seleccionados........................ 392-397
    8.3 - Btn De Ocupado............................ 399-406
    8.4 - Btn De Seleccionado....................... 408-413
    8.5 - Mensaje De Exito.......................... 415-437
    8.6 - Dias Pasado............................... 439-443
    8.7 - Dias Reservados........................... 445-450
    8.8 - Dias Seleccionados Del Usuario............ 452-457
    8.9 - Content Horas............................. 459-480
9 - Tutor Modal..................................... 849-924
    9.1 - Modal Mostrar............................. 864-869
    9.2 - Modal Content............................. 871-883
    9.3 - Modal Aparecer............................ 885-889
    9.4 - Modal Body................................ 891-896
    9.5 - Modal Qr.................................. 898-914
    9.6 - Modal Form................................ 916-924
10 - Tutor Form..................................... 926-932
11 - Tutor Input.................................... 934-978
    11.1 - Input De Archivo Personalizado........... 944-978
12 - Turtor Select Personalisado.................... 980-995
13 - Tutor Info Box Horario........................ 997-1009
14 - Tutor Btn Action............................. 1011-1018
15 - Tutor Btn Generic............................ 1020-1051
    
/// END TABLE OF CONTENTS PC
------------------------------------------------------------*/


/* ==================== 1 - Tutor Principal ==================== */

.tutor-bg {
    margin: 0;
    padding: 0;
    /* background: linear-gradient(135deg, #023047 0%, #219EBC 100%); */
    background: var(--bg-gradient);
}

.navbar-container {
    position: sticky;
    top: 1px;
    z-index: 1000;
}

.tutor-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8rem 1rem;
}


/* ==================== 2 - Tutor BreadCrumb ==================== */

.tutor-breadcrumbs {
    color: white;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.tutor-breadcrumb-link {
    color: white;
    text-decoration: none;
    transition: var(--transition);
}

.tutor-breadcrumb-link:hover {
    color: var(--secundary-color);
}

.tutor-breadcrumb-current {
    color: var(--bg-gradient);
    font-weight: bold;
}


/* ==================== 3 - Tutor Grid ==================== */

.tutor-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.tutor-col-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


/* ==================== 4 - Tutor Card ==================== */

.tutor-card-main {
    border-radius: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}


/* ==================== 5 - Tutor Banner ==================== */

.tutor-banner {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #000;
}


/* ==================== 5.1 - Banner Video ==================== */

.tutor-banner-video {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.tutor-banner-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}

.tutor-banner-play {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    padding: 16px;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
}

.tutor-banner-play:hover {
    background: rgba(0, 0, 0, 0.8);
}

.tutor-banner-play-icon {
    width: 40px;
    height: 40px;
    color: #fff;
}


/* ==================== 6 - Tutor Perfil ==================== */

.tutor-card-main-content {
    background: #ffffff;
    z-index: 5;
    position: relative;
    padding: 1rem 2rem 2rem 2rem;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}


/*--------- Imagen de perfil --------*/

.tutor-profile-img {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    position: absolute;
    top: -64px;
    left: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.tutor-profile-info {
    margin-left: 150px;
}

.tutor-profile-name {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
}

.tutor-profile-meta {
    display: flex;
    gap: 2rem;
    color: #666;
}

.tutor-profile-rating,
.tutor-profile-students {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.tutor-star-icon {
    color: var(--terciary-color2);
    width: 20px;
    height: 20px;
}

.tutor-student-icon {
    color: var(--secundary-color);
    width: 20px;
    height: 20px;
}

.tutor-profile-quote {
    margin-top: 1.5rem;
    color: #555;
    font-size: 1.1rem;
    text-align: center;
}


/*Añadir a favoritos*/

.favorite-btn-blue {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out;
}

.heart-icon-blue {
    width: 24px;
    height: 24px;
    fill: none;
    /* Relleno inicial transparente */
    stroke: white;
    /* Color del borde del corazón (gris) */
    stroke-width: 1.5;
    /* Grosor del borde */
    transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

.favorite-btn-blue:hover .heart-icon-blue {
    stroke: white;
    /* Borde azul al pasar el mouse */
}

.tutor-btn-favorito {
    background: var(--primary-color) !important;
    color: white;
}

.favorite-btn-blue.is-favorited-blue .heart-icon-blue {
    fill: white;
    /* Relleno azul cuando se activa */
    stroke: white;
    /* Borde azul cuando se activa */
}


/*======================7 MATERIAS */


/* ======================================================= */


/* VARIABLES DE COLOR (Recomendado para consistencia) */


/* ======================================================= */

:root {
    --color-white: #FFFFFF;
    --color-gray-50: #F9FAFB;
    --color-gray-200: #E5E7EB;
    --color-gray-700: #4B5563;
    --color-gray-800: #1F2937;
    --color-blue-100: #DBEAFE;
    /* blue-100 */
    --color-blue-800: #1E40AF;
    /* blue-800 */
    --color-purple-100: #EDE9FE;
    /* purple-100 */
    --color-purple-800: #5B21B6;
    /* purple-800 */
    --color-green-100: #D1FAE5;
    /* green-100 */
    --color-green-800: #065F46;
    /* green-800 */
}


/* ======================================================= */


/* 1. CARD PRINCIPAL (subjects-card) */


/* ======================================================= */

.subjects-card {
    /* bg-white rounded-2xl shadow-sm */
    background-color: var(--color-white);
    border-radius: 1rem;
    /* rounded-2xl */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* shadow-sm */
    /* p-6: padding: 1.5rem; */
    padding: 1.5rem;
}




.subjects-card__title {
    /* text-2xl font-bold text-gray-800 mb-6 */
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    color: var(--color-gray-800);
    margin-bottom: 1.5rem;
    /* mb-6 */
    margin-top: 0;
}


/* ======================================================= */


/* 2. LISTA DE MATERIAS (subjects-list) */


/* ======================================================= */

.subjects-list {
    /* space-y-6 */
    /* Crea espacio entre los divs de cada materia */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* space-y-6 */
}


/* ======================================================= */


/* 3. ÍTEM INDIVIDUAL DE MATERIA (subject-item) */


/* ======================================================= */

.subject-item {
    /* Contenedor de una materia completa */
}

.subject-item__header {
    /* flex items-center gap-3 */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* gap-3 */
}

.subject-item__icon {
    /* p-2 rounded-lg */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    /* p-2 */
    border-radius: 0.5rem;
    /* rounded-lg */
    flex-shrink: 0;
    /* Evita que el icono se encoja */
}

.subject-item__svg {
    /* h-6 w-6 */
    width: 1.5rem;
    height: 1.5rem;
}


/* Colores Modificadores para los Íconos */

.subject-item__icon--math {
    /* bg-blue-100 text-blue-800 */
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
}

.subject-item__icon--design {
    /* bg-purple-100 text-purple-800 */
    background-color: var(--color-purple-100);
    color: var(--color-purple-800);
}

.subject-item__icon--mechanics {
    /* bg-green-100 text-green-800 */
    background-color: var(--color-green-100);
    color: var(--color-green-800);
}

.subject-item__name {
    /* text-lg font-semibold text-gray-700 */
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    /* font-semibold */
    color: var(--color-gray-700);
    margin: 0;
}


/* ======================================================= */


/* 4. LISTA DE TEMAS (subject-item__topics) */


/* ======================================================= */

.subject-item__topics {
    /* mt-3 ml-12 flex flex-wrap gap-2 */
    margin-top: 0.75rem;
    /* mt-3 */
    margin-left: 3rem;
    /* ml-12 (Alineado con el texto, 3rem = 1.5rem del ícono + 0.75rem de gap + 0.75rem del ícono) */
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* gap-2 */
}

.topic-tag {
    /* bg-gray-200 text-gray-800 text-sm font-medium px-3 py-1 rounded-full */
    background-color: var(--color-gray-200);
    color: var(--color-gray-800);
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    /* font-medium */
    padding: 0.6rem 0.75rem;
    /* py-1 px-3 */
    border-radius: 9999px;
    /* rounded-full */
    /* Pequeño ajuste para asegurar la línea base */
    line-height: 1;
}


/* ==================== 7 - Tutor Tabs ==================== */

.tutor-tabs-card {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.tutor-tabs-nav {
    border-bottom: 1px solid #e0e0e0;
    padding-top: 1rem;
}

.tutor-tabs-list {
    display: flex;
    gap: 2rem;
    padding: 0 2rem;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE y Edge */
}

.tutor-tabs-list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari y Opera */
}

.tutor-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #888;
    font-size: 1rem;
    font-weight: 500;
    padding: 1rem 0.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.tutor-tab-btn.active {
    border-color: var(--secundary-color);
    color: var(--secundary-color);
    font-weight: 600;
}

.tutor-tabs-content {
    padding: 2rem;
}

.tutor-tab-content {
    display: block;
}

.tutor-tab-content.hidden {
    display: none;
}

.tutor-section-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.tutor-section-title-lg {
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.tutor-section-text {
    color: #666;
    line-height: 1.7;
    padding-left: 1rem;
}

.tutor-section-more {
    color: var(--secundary-color);
    font-weight: 600;
    background: none;
    border: none;
    margin-top: 0.5rem;
    cursor: pointer;
}

.tutor-section-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 2rem 0;
}

.tutor-section-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.tutor-section-skills-materia {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.tutor-skill-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.tutor-skill-icon {
    background: var(--terciary-color);
    padding: 1rem;
    border-radius: 1rem;
}

.tutor-skill-svg {
    color: var(--secundary-color);
    width: 24px;
    height: 24px;
}

.tutor-skill-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.tutor-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tutor-skill-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 500;
    padding: 0.1em 0.5em;
    border-radius: 50px;
    min-width: 2.2em;
    min-height: 2.2em;
    text-align: center;
    line-height: 1;
    /* Elimina padding horizontal extra si lo tienes */
}
.space-languages-perfil{
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.tutor-language-tag {
    background: var(--secundary-color2);
    color: var(--primary-color);
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    border-radius: 1rem;
}


/*===================== Tutor reseñas, calificaciones y comentarios*/


/* ======================================================= */


/* VARIABLES DE COLOR (Para facilitar la gestión de colores) */


/* ======================================================= */

:root {
    --color-white: #FFFFFF;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-indigo-600: #4F46E5;
    /* Color primario del botón */
    --color-indigo-700: #4338CA;
    --color-indigo-100: #E0E7FF;
    --color-yellow-400: #FBBF24;
    /* Colores para Tags de Reseña */
    --tag-color-indigo-text: #4338CA;
    --tag-color-indigo-bg: #E0E7FF;
    --tag-color-green-text: #065F46;
    --tag-color-green-bg: #D1FAE5;
    --tag-color-purple-text: #5B21B6;
    --tag-color-purple-bg: #EDE9FE;
    --tag-color-blue-text: #2563EB;
    --tag-color-blue-bg: #DBEAFE;
    --tag-color-pink-text: #EC4899;
    --tag-color-pink-bg: #FCE7F3;
}


/* ======================================================= */


/* I. FORMULARIO DE RESEÑA (review-form) */


/* ======================================================= */

:root {
    --color-white: #FFFFFF;
    --color-slate-200: #E2E8F0;
    --color-slate-800: #1E293B;
    --color-custom-blue: #0f3a5d;
    /* Color del título */
    --color-cyan-600: #0891B2;
    --color-cyan-700: #0E7490;
    --color-amber-500: #F59E0B;
    /* Color de foco/estrella */
}


/* ======================================================= */


/* I. CONTENEDOR PRINCIPAL (bg-white p-6 sm:p-8 rounded-xl shadow-sm border) */


/* ======================================================= */

.review-form-container {
    background-color: var(--color-white);
    /* rounded-xl */
    border-radius: 0.75rem;
    /* shadow-sm */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* border border-slate-200 */
    border: 1px solid var(--color-slate-200);
    /* p-6 */
    padding: 1.5rem;
}




/* ======================================================= */


/* II. TÍTULO Y TIPOGRAFÍA */


/* ======================================================= */

.review-form__title {
    /* text-xl font-bold text-slate-800 mb-5 */
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-slate-800);
    margin-bottom: 1.25rem;
    margin-top: 0;
    /* style="color: #0f3a5d;" (Color personalizado) */
    color: var(--color-custom-blue);
}


/* ======================================================= */


/* III. ESTRELLAS (RATING) */


/* ======================================================= */

.review-form__rating-wrapper {
    /* flex justify-between items-center mb-6 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    /* Añadir un margen general para que las estrellas no toquen los bordes */
    padding: 0 0.5rem;
}

.review-form__star {
    color: #d1d5db;
    fill: #d1d5db;
    transition: color 0.2s ease, fill 0.2s ease;
    cursor: pointer;
    /* Asegurar que el cursor sea pointer en móvil también */
    -webkit-tap-highlight-color: transparent; /* Remover highlight azul en móvil */
}

.review-form__star.active,
.review-form__star:hover {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
}




/* Clases que serán añadidas por JavaScript para interactividad */

.review-form__star.hovered,
.review-form__star.selected {
    fill: var(--color-amber-500);
    color: var(--color-amber-500);
}


/* ======================================================= */


/* IV. TEXTAREA (Campo de Comentario) */


/* ======================================================= */


.review-form__textarea {
    /* w-full p-3 border border-slate-300 rounded-lg */
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #CBD5E1;
    /* border-slate-300 */
    border-radius: 0.5rem;
    /* rounded-lg */
    resize: vertical;
    /* focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition */
    transition: border-color 0.2s, box-shadow 0.2s;
}

.review-form__textarea:focus {
    outline: none;
    border-color: var(--color-amber-500);
    /* Simula focus:ring-2 */
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
}


/* ======================================================= */


/* V. BOTÓN DE ENVÍO */


/* ======================================================= */

.review-form__button-wrapper {
    /* mt-4 flex justify-end */
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.review-form__button {
    /* bg-cyan-600 text-white font-semibold py-2.5 px-6 rounded-lg */
    background-color: var(--color-cyan-600);
    color: var(--color-white);
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    /* py-2.5 px-6 */
    border-radius: 0.5rem;
    /* rounded-lg */
    border: none;
    cursor: pointer;
    /* hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-300 */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.review-form__button:hover {
    background-color: var(--color-cyan-700);
}

.review-form__button:focus {
    outline: none;
    /* Simula focus:ring-2 focus:ring-offset-2 */
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-amber-500);
}


/* ======================================================= */


/* II. LISTA Y TARJETA DE RESEÑA (review-list / review-card) */


/* ======================================================= */

.review-list {
    /* space-y-6 */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.review-card {
    /* border border-gray-200 rounded-lg p-5 transition hover:shadow-md */
    border: 1px solid var(--color-gray-200);
    border-radius: 0.5rem;
    padding: 1.25rem;
    transition: box-shadow 0.3s ease;
}

.review-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    /* hover:shadow-md */
}

.review-card__header {
    /* flex items-start justify-between */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.review-card__user-info {
    /* flex items-center gap-4 */
    display: flex;
    align-items: center;
    gap: 1rem;
}

.review-card__avatar {
    /* w-12 h-12 rounded-full object-cover */
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
}

.review-card__name {
    /* font-semibold text-gray-800 */
    font-weight: 600;
    color: var(--color-gray-800);
    margin: 0;
    text-transform: capitalize;
    /* Para asegurar el formato nombre */
}

.review-card__date {
    /* text-sm text-gray-500 */
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
}

.review-card__rating {
    /* flex items-center */
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.review-card__score {
    /* font-bold text-gray-700 mr-1 */
    font-weight: 700;
    color: var(--color-gray-700);
    margin-right: 0.25rem;
}

.review-card__star-icon--filled {
    /* w-5 h-5 text-yellow-400 */
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-yellow-400);
}

.review-card__text {
    /* mt-4 text-gray-600 leading-relaxed */
    margin-top: 1rem;
    color: var(--color-gray-600);
    line-height: 1.625;
    /* leading-relaxed */
}


/* ==================== 8 - Tutor Calendario-Horario ==================== */


/* Estilos para los días del calendario */


/* ==================== 8.1 - Dias-Horarios Disponibles ==================== */


/* .tutor-calendar-day.has-availability {
    border: 2px solid var(--terciary-color2);
} */

.tutor-calendar-day.has-availability {
    border: none;
    position: relative;
}

.tutor-calendar-day.has-availability::after {
    content: '';
    /* Campo obligatorio para que el pseudo-elemento se muestre */
    position: absolute;
    /* Permite posicionar el punto con precisión */
    bottom: 5px;
    /* Ajusta la distancia desde la parte inferior del div */
    left: 50%;
    /* Centra el punto horizontalmente */
    transform: translateX(-50%);
    /* Ajuste final para un centrado perfecto */
    width: 6px;
    /* Tamaño del punto */
    height: 6px;
    /* Tamaño del punto */
    background-color: var(--terciary-color2);
    /* Color del punto */
    border-radius: 50%;
    /* ¡Esto lo convierte en un círculo perfecto! */
}


/* ==================== 8.2 - Dias Seleccionados ==================== */

.tutor-calendar-day.selected {
    background-color: var(--primary-color);
    color: white;
    border-color: #db3434;
}


/* ==================== 8.3 - Btn De Ocupado ==================== */

.tutor-time-slot-btn.occupied {
    background-color: #e74c3c;
    color: white;
    text-decoration: line-through;
    cursor: not-allowed;
    border-color: #e74c3c;
}


/* ==================== 8.4 - Btn De Seleccionado ==================== */

.tutor-time-slot-btn.selected {
    background-color: #3498db;
    color: white;
    border-color: #2980b9;
}


/* ==================== 8.5 - Mensaje De Exito ==================== */

.alert-successs {
    background-color: #2ecc71;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
}

.tutor-calendar-day {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
}

.tutor-calendar-day:not(.past):hover {
    background-color: var(--terciary-color2);
}


/* ==================== 8.6 - Dias Pasado ==================== */

.tutor-calendar-day.past {
    color: #ccc;
    cursor: not-allowed;
}

.tutor-calendar-day.past.has-availability::after {
    display: none;
}


/* ==================== 8.7 - Dias Reservados ==================== */

.tutor-calendar-day.booked {
    background-color: #ffe8d6;
    color: #d9534f;
    font-weight: bold;
}


/* ==================== 8.8 - Dias Seleccionados Del Usuario ==================== */

.tutor-calendar-day.selected {
    background-color: #3498db;
    color: var(--primary-color);
    font-weight: bold;
}


/* ==================== 8.9 - Content Horas ==================== */

.tutor-time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.75rem;
}

.tutor-time-slot-btn {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.tutor-time-slot-btn:hover {
    border-color: var(--terciary-color2);
    color: white;
    font-weight: bold;
    background-color: var(--terciary-color2);
}

.tutor-no-availability {
    text-align: center;
    padding: 2rem;
    color: #777;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.section-reserva {
    display: flex;
    flex-flow: column wrap;
    height: auto;
}

.tutor-availability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    height: 100%;
}

.tutor-calendar-box {
    background: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #e0e0e0;
}

.tutor-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.tutor-calendar-nav-btn {
    background: none;
    border: none;
    border-radius: 50%;
    padding: 0.6rem;
    cursor: pointer;
    transition: var(--transition);
}

.tutor-calendar-nav-btn:hover {
    background: #f0f0f0;
}

.tutor-calendar-nav-icon {
    color: #888;
    width: 20px;
    height: 20px;
}

.tutor-calendar-month {
    font-weight: 600;
    color: var(--primary-color);
}

.tutor-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.2rem;
    text-align: center;
    font-size: 0.95rem;
}

.tutor-calendar-day-label {
    font-weight: 600;
    color: #bbb;
}

.tutor-calendar-day {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.tutor-calendar-day.selected {
    background: var(--secundary-color);
    color: #fff;
    font-weight: bold;
}

.tutor-calendar-day.selected.has-availability::after {
    display: none;
}

.tutor-time-selector-col {
    display: flex;
    flex-flow: column nowrap;
}

.tutor-time-selector-box {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #e0e0e0;
    height: 100%;
}

.tutor-time-range {
    color: #888;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.tutor-time-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    justify-content: center;
    height: auto;
}

.tutor-time-slot {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.7rem;
    background: none;
    cursor: pointer;
    transition: var(--transition);
}

.tutor-time-slot.selected,
.tutor-time-slot:hover {
    background: var(--secundary-color);
    color: #fff;
    border-color: var(--terciary-color2);
}

.tutor-time-exact-btn {
    width: 100%;
    margin-top: 1rem;
    background: var(--secundary-color);
    color: #fff;
    font-weight: 600;
    padding: 0.7rem 0;
    border-radius: 0.7rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.tutor-pay-btn-box {
    display: flex;
    text-align: center;
    padding: 2rem 4rem 0rem 4rem;
    justify-content: center;
}

.tutor-pay-btn {
    background: var(--terciary-color2);
    color: #fff;
    font-weight: bold;
    padding: 1rem 3rem;
    border-radius: 1rem;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
    transition: transform var(--button-transition-duration) ease-in-out, box-shadow var(--button-transition-duration) ease-in-out;
}

.tutor-pay-btn:hover {
    transform: scale(var(--button-hover-scale));
    box-shadow: var(--button-hover-shadow);
}

.tutor.pay.btn:active {
    transform: scale(var(--button-active-scale));
}

.tutor-subtabs-nav {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1.5rem;
}

.tutor-subtab-btn {
    background: none;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
    border-radius: 0.7rem;
    color: #888;
    cursor: pointer;
    transition: var(--transition);
}

.tutor-subtab-btn.active {
    background: var(--secundary-color);
    color: #fff;
}

.tutor-subtab-content {
    display: block;
}

.tutor-subtab-content.hidden {
    display: none;
}

.tutor-empty-box {
    text-align: center;
    padding: 3rem 0;
}

.tutor-empty-img {
    width: 96px;
    height: 96px;
    margin: 0 auto;
}

.tutor-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1rem;
}

.tutor-empty-text {
    color: #888;
    margin-top: 0.5rem;
}

.tutor-col-actions {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.tutor-actions-card {
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 1.5rem 2rem 1.5rem 2rem;
    position: sticky;
    top: 30px;
}

.tutor-actions-price-box {
    margin-bottom: 1.5rem;
}

.price-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.tutor-actions-price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
}

.tutor-actions-price-text {
    font-size: 1.1rem;
    color: #888;
    padding-left: 5px;
    padding-top: 6px;
}

.tutor-actions-price-unit {
    font-size: 1rem;
    color: #888;
    font-weight: 400;
}

.tutor-actions-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: #888;
    font-size: 1rem;
    margin-top: 0.5rem;
}

.tutor-actions-meta-icon {
    width: 18px;
    height: 18px;
    color: #888;
}

.tutor-actions-meta-icon-green {
    color: #10b981;
    margin-left: 1rem;
}

.tutor-actions-meta-verified {
    color: #10b981;
    font-weight: 600;
}

.tutor-actions-btns {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.tutor-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 1rem;
    border: none;
    padding: 1rem 0;
    cursor: pointer;
    transition: transform var(--button-transition-duration) ease-in-out, box-shadow var(--button-transition-duration) ease-in-out;
}

.tutor-btn-now {
    background: var(--terciary-color2);
    color: #fff;
}

.tutor-btn-reservar {
    background: var(--secundary-color);
    color: #fff;
}

.tutor-btn-share {
    background: #e0e0e0;
    color: #555;
}

.tutor-btn-reservar:hover,
.tutor-btn-now:hover,
.tutor-btn-share:hover {
    transform: scale(var(--button-hover-scale));
    box-shadow: var(--button-hover-shadow);
}

.tutor-btn-icon {
    width: 24px;
    height: 24px;
}

.tutor-footer {
    background: var(--primary-color);
    color: #fff;
    margin-top: 4rem;
    padding: 2rem 0;
    text-align: center;
}

.tutor-reviews-box {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: flex-start;
}

.tutor-reviews-summary {
    width: 33%;
    padding: 1.5rem;
    border-radius: 1rem;
    text-align: center;
}

.tutor-reviews-score {
    font-size: 2.5rem;
    font-weight: bold;
}

.tutor-reviews-stars {
    display: flex;
    justify-content: center;
    color: #ccc;
    margin: 1rem 0;
}

.tutor-reviews-count {
    color: #888;
}

.tutor-reviews-details {
    width: 67%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tutor-reviews-empty {
    border-top: 1px solid #e0e0e0;
    margin-top: 2rem;
    padding-top: 2rem;
}

body.modal-open {
    overflow: hidden;
}


/*
 * Clases CSS Base (para ambos tipos de alertas)
 */

.alert-box {
    padding: 1.5rem;
    /* p-6 */
    border-radius: 0.5rem;
    /* rounded-lg */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* shadow-sm */
    margin-top: 2rem;
}

.alert-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.alert-icon {
    width: 2rem;
    /* w-8 */
    height: 2rem;
    /* h-8 */
    margin-bottom: 0.75rem;
    /* mb-3 */
}

.alert-title {
    font-weight: 700;
    /* font-bold */
    font-size: 1.125rem;
    /* text-lg */
}

.alert-text {
    font-size: 0.875rem;
    /* text-sm */
    margin-top: 0.25rem;
    /* mt-1 */
}

.alert-link {
    font-weight: 600;
    /* font-semibold */
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.alert-link:hover {
    text-decoration: underline;
}


/*
 * Clases Modificadoras (para estilos específicos de cada alerta)
 */


/* Alerta de Éxito o Información (bg-teal-50) */

.alert-teal {
    background-color: #f0fdfa;
    /* bg-teal-50 */
    color: #0f766e;
    /* text-teal-800 */
}

.alert-teal .alert-icon {
    color: #14b8a6;
    /* text-teal-500 */
}

.alert-teal .alert-link {
    color: #0d9488;
    /* text-teal-600 */
}


/* Alerta de Advertencia (bg-amber-50) */

.alert-amber {
    background-color: #fffbeb;
    /* bg-amber-50 */
    color: #92400e;
    /* text-amber-800 */
}

.alert-amber .alert-icon {
    color: #f59e0b;
    /* text-amber-500 */
}

.alert-amber .alert-link {
    color: #b45309;
    /* text-amber-700 */
}

.alert-amber .alert-subtext {
    font-size: 0.75rem;
    /* text-xs */
    margin-top: 0.5rem;
    /* mt-2 */
    color: #b45309;
    /* text-amber-700 */
}


/* ==================== 9 - Tutor Modal ==================== */

.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}


/* ==================== 9.1 - Modal Mostrar ==================== */

.modal-overlay.is-visible {
    display: flex;
    /* Cambiar a flex para centrar el contenido */
    z-index: 999999999;
}


/* ==================== 9.2 - Modal Content ==================== */

.modal-content {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 800px;
    overflow: hidden;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    display: block;
    z-index: 1000000000 !important;
}


/* ==================== 9.3 - Modal Aparecer ==================== */

.modal-overlay.is-visible .modal-content {
    transform: scale(1);
    opacity: 1;
}


/* ==================== 9.4 - Modal Body ==================== */

.modal-body {
    display: flex;
    flex-direction: row;
    /* Diseño horizontal por defecto */
}


/* ==================== 9.5 - Modal Qr ==================== */

.modal-promocion-column {
    background-color: white;
    display: flex;
    align-self: center;
}

.banner_agosto {
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* Esta es la línea clave */
}

.modal-qr-column {
    width: 100%;
    background-color: #f9fafb;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
}

.qr-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 0.5rem;
    object-fit: contain;
}


/* ==================== 9.6 - Modal Form ==================== */

.modal-form-column {
    width: 100%;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* Espacio entre los elementos del formulario */
}


/* ==================== 10 - Tutor Form ==================== */

.form-title {
    font-size: 1.5rem;
    /* 24px */
    font-weight: bold;
    color: #1f2937;
}


/* ==================== 11 - Tutor Input ==================== */

.input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    /* margin-bottom: 0.5rem; */
}


/* ==================== 11.1 - Input De Archivo Personalizado ==================== */


/* 
.file-input-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
    transition: background-color 0.2s;
}

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

.upload-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.file-input-hidden {
    display: none;
}

.file-name-display {
    font-size: 0.875rem;
    color: #6b7281;
    margin-top: 0.25rem;
}

.reserva-info-container{
    display: flex;
    flex-flow: row wrap;
} */

.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    /* Combina py-3 y px-4 */
    border: 2px dashed #d1d5db;
    /* border-2 border-dashed border-gray-300 */
    border-radius: 0.5rem;
    /* rounded-lg */
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    /* transition */
}

.file-upload-label:hover {
    background-color: #f9fafb;
    /* hover:bg-gray-50 */
}

.file-upload-content {
    text-align: center;
}

.file-upload-icon {
    font-size: 1.5rem;
    /* text-2xl */
}

.file-upload-text {
    margin-top: 0.25rem;
    /* mt-1 */
    font-size: 0.875rem;
    /* text-sm */
    color: #6b7280;
    /* text-gray-500 */
    font-weight: 600;
    /* font-semibold */
}

.file-input-hidden {
    display: none;
}




/* ==================== 13 - Tutor Info Box Horario ==================== */

.info-box {
    background-color: #f3f4f6;
    padding: 5px 14px;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #4b5563;
    /* margin-top: 0.4rem; */
    display: flex;
    flex-direction: column;
    align-items: start;
}

.info-box p+p {
    margin-top: 0.25rem;
}


/* ==================== 14 - Tutor Btn Action ==================== */

.action-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    padding-top: 0.5rem;
    margin-top: auto;
    justify-content: end;

}


/* ==================== 15 - Tutor Btn Generic ==================== */

.btn {
    width: 100%;
    font-weight: bold;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background-color: var(--terciary-color2);
    color: white;
    transition: transform var(--button-transition-duration) ease-in-out, box-shadow var(--button-transition-duration) ease-in-out;
}

.btn-primary:hover {
    background-color: #ffa640;
    transform: scale(var(--button-hover-scale));
    box-shadow: var(--button-hover-shadow);
}

.btn-primary:active {
    transform: scale(var(--button-active-scale));
}

.btn-primary[type="button"] {
    background-color: #e5e7eb;
    color: #1f2937;
}

.btn-primary[type="button"]:hover {
    background-color: #c4c4c5;
}


/*=================== 16 CUPONES ===============*/


/* Base Styles */

.coupon-section {
    border-top: 1px solid #e5e7eb;
}

.coupon-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 0.5rem;
}


/* Coupon Input and Apply Button */

.coupon-input-group {
    display: flex;
    gap: 0.5rem;
    height: 2rem;
}

.coupon-input {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
    font-size: 1rem;
    transition: all 0.15s ease-in-out;
}

.coupon-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--terciary-color2);
    box-shadow: 0 0 0 2px var(--terciary-color2);
}

.apply-button {
    padding: 0.5rem 1.25rem;
    background-color: #e5e7eb;
    color: #4b5563;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.15s ease-in-out;
}

.apply-button:hover {
    background-color: #d1d5db;
}


/* Applied Coupon Message */

.applied-coupon-container {
    display: none;
    align-items: center;
    justify-content: space-between;
    background-color: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    min-width: 318px;
}

.applied-coupon-text {
    font-weight: 600;
}

.remove-button {
    font-size: 0.875rem;
    font-weight: 700;
    color: #4b5563;
    /* Default color, not specified in Tailwind */
    cursor: pointer;
}

.remove-button:hover {
    color: #dc2626;
}


/* Message */

.coupon-message {
    font-size: 0.775rem;
    min-height: 1.25rem;
    /* Equivalent to h-5 */
    color: rgb(255, 80, 80);
}


/* Estilos para el contenido del dropdown */

.coupon-dropdown-content {
    display: block;
    /* Oculto por defecto */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 30% !important;
    /* Ocupa todo el ancho del contenedor */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 4px;
    margin-top: 5px;
    /* Pequeña separación del input */
}


/* Estilos para los elementos de la lista */

.coupon-dropdown-content .list-cupon {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}


/* Cambia el color al pasar el ratón por encima */

.coupon-dropdown-content a:hover {
    background-color: #f1f1f1;
}


/* Clase para mostrar el dropdown con JavaScript */

.show {
    display: block;
}


/* Cuando el cupón se aplica */


/* Contenedor del cupón aplicado */

.applied-coupon-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #d1fae5;
    /* bg-green-100 */
    border: 2px dashed #6ee7b7;
    /* border-green-300 */
    color: #166534;
    /* text-green-800 */
    padding: 0.5rem 1rem;
    /* py-2 px-4 */
    border-radius: 0.5rem;
    /* rounded-lg */
}


/* Estilo del texto */

.applied-coupon-text {
    font-weight: 600;
    /* font-semibold */
}


/* Estilo del código del cupón */

.applied-coupon-code {
    /* Puedes añadir estilos adicionales para el código aquí si lo necesitas */
}


/* Botón para quitar el cupón */

.remove-coupon-btn {
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 700;
    /* font-bold */
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
    color: #166534;
}

.remove-coupon-btn:hover {
    color: #dc2626;
    /* hover:text-red-600 */
}


/* Contenedor del grupo del formulario (Opcional, para dar espacio) */
/* .modal-form-column > div {
    margin-bottom: 20px;
} */

/* Estilos de la Etiqueta (Label) */
.input-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155; /* Gris pizarra oscuro */
    /* margin-bottom: 8px; */
    text-transform: short; /* Opcional */
}

/* Estilos del Selector (Select) */
.select-input {
    width: 100%;
    padding: 12px 40px 12px 16px; /* Más espacio a la derecha para la flecha */
    font-size: 0.95rem;
    color: #1e293b;
    background-color: #ffffff;
    border: 1px solid #cbd5e1; /* Gris suave */
    border-radius: 10px; /* Bordes sutilmente redondeados */
    outline: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;

    /* Resetear la flecha nativa del navegador */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Inyectar flecha personalizada en SVG */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    
    /* Sombra interna muy sutil */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Estado Focus (Cuando el usuario hace clic en el select) */
.select-input:focus {
    border-color: #3b82f6; /* Azul brillante que hace juego con el CTA */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); /* Efecto de brillo exterior suave */
    background-color: #fafafa;
}

/* Estilos para las opciones de adentro (Menú desplegable) */
.select-input option {
    color: #1e293b;
    padding: 12px;
    background-color: #ffffff;
}

/* Opción por defecto deshabilitada o vacía */
.select-input option[value=""] {
    color: #94a3b8;
}

/* Mensaje de Error de Validación */
.form-error {
    display: block;
    /* margin-top: 6px; */
    font-size: 0.8rem;
    font-weight: 500;
    color: #ef4444; /* Rojo de alerta estándar */
    animation: fadeInError 0.2s ease-in-out;
}

/* Animación sutil para que el error aparezca suavemente */
@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.tutor-main-bg {
    background: #fff !important;
}


/* Cards para la informacion de los tutores*/

.info-card {
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #f3f4f6;
    transition-property: box-shadow;
    transition-duration: 0.15s;
    margin-bottom: 1rem;
}

.info-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}


/* Encabezado de la tarjeta */

.info-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


/* Contenedor del título y metadatos */

.info-card-content {
    display: flex;
    flex-direction: column;
}


/* Título */

.info-card-title {
    font-weight: 700;
    color: #1f2937;
    font-size: 1rem;
}


/* Contenedor de los metadatos (íconos y texto) */

.info-card-meta {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}


/* Elemento de metadato individual */

.info-card-meta-item {
    display: flex;
    align-items: center;
}


/* Íconos */

.info-card-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    color: #9ca3af;
}





/* ======================================================= */
/* 17. TUTOR TOOLTIP (Instrucciones Hover - CORREGIDO)     */
/* ======================================================= */

/* 1. CONFIGURACIÓN BASE (Para los títulos del calendario) */
.tutor-tooltip-wrapper {
    position: relative;
    display: inline-flex; /* IMPORTANTE: inline-flex evita que rompa el diseño */
    width: auto;          /* IMPORTANTE: Solo ocupa el ancho del texto */
    align-items: center;  /* Alinea el texto con el icono i */
    gap: 6px;             /* Espacio entre texto e icono */
    text-decoration: none;
    vertical-align: middle;
}

/* 2. EXCEPCIÓN PARA EL BOTÓN DE RESERVAR (Para mantenerlo grande) */
/* Como el botón es un enlace <a>, le forzamos el ancho completo */
a.tutor-tooltip-wrapper {
    display: block;
    width: 100%;
}

.favorite-button-container-blue {
    display: block;
    width: 100%;
}

/* 3. LA CAJA DEL MENSAJE (Globo) */
.tutor-tooltip-content {
    position: absolute;
    z-index: 99999;
    
    /* Diseño Visual */
    background-color: #1f2937; /* Gris oscuro */
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    
    /* Configuración por defecto (Centrado - Para el botón) */
    width: 240px;
    text-align: center;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    /* Animación */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
}

/* 4. CONTENIDO INTERNO */
.tutor-tooltip-content strong {
    display: block;
    color: #fbbf24; /* Amarillo */
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.tutor-tooltip-content p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #e5e7eb;
}

/* 5. FLECHITA (Por defecto centrada) */
.tutor-tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #1f2937 transparent transparent transparent;
}

/* 6. INTERACCIÓN HOVER (General) */
.tutor-tooltip-wrapper:hover .tutor-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ======================================================= */
/* 7. MODIFICADORES PARA LOS TÍTULOS (Alineación Izquierda) */
/* ======================================================= */

.tooltip-left-align {
    left: 0 !important; /* Alineado al inicio del texto */
    transform: translateY(10px) !important; /* Reseteamos la traslación X */
    text-align: left !important;
    width: 260px; /* Un poco más ancho para texto largo */
    bottom: 100% !important; /* Justo encima */
    margin-bottom: 8px; /* Un poco de aire */
}

/* Ajuste de la flecha para alineación izquierda */
.tooltip-left-align .tutor-tooltip-arrow {
    left: 20px !important; /* Flecha a la izquierda */
    margin-left: 0 !important;
}

/* Hover específico para alineación izquierda */
.tutor-tooltip-wrapper:hover .tooltip-left-align {
    transform: translateY(0) !important;
}
/* =================== RESPONSIVE DESIGN TABLETS=================== */

/* =================== RESPONSIVE DESIGN TABLETS =================== */

@media (max-width: 900px) {
    .tutor-main {
        padding: 1.5rem 0.5rem;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .tutor-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .tutor-col-actions {
        margin-top: 2rem;
    }

    .tutor-profile-info {
        margin-left: 0;
        padding-left: 0;
        margin-top: 80px;
    }

    .tutor-card-main-content {
        padding: 1.2rem;
    }

    .tutor-tabs-list {
        gap: 1rem;
        padding: 0 0.5rem;
    }

    .tutor-actions-card {
        padding: 1.2rem;
    }
}

/* =================== RESPONSIVE <= 768px =================== */

@media (max-width: 768px) {

    .tutor-tooltip-content {
        display: none;
    }

    .review-form__star {
        width: 2.5rem;
        height: 2.5rem;
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .review-form__star.active {
        color: #fbbf24;
        fill: #fbbf24;
    }

    /* 🔥 Bloque táctil: debe estar dentro del media de 768px */
    @media (hover: none) and (pointer: coarse) {
        .review-form__star:hover {
            color: inherit;
            fill: inherit;
        }

        .review-form__star.active:hover {
            color: #fbbf24;
            fill: #fbbf24;
        }
    }

    /* ===== Barra fija inferior (móvil) ===== */

    .tutor-col-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10 !important;
        background-color: white;
        box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.15);
        border-radius: 1rem 1rem 0 0;
        transition: transform 0.3s ease;
    }

    .tutor-col-actions.hidden {
        transform: translateY(100%);
    }

    .tutor-actions-card {
        border-radius: 0;
        margin: 0;
        padding: 0.75rem 1rem;
    }

    .tutor-actions-price-box {
        margin-bottom: 0.5rem;
    }

    .tutor-actions-btns {
        flex-direction: row;
        gap: 0.3rem;
        justify-content: space-around;
        margin-top: 0rem;
    }

    .tutor-btn {
        gap: 0.2rem;
        padding: 0.8rem 0.8rem;
    }

    .tutor-col-actions {
        border-radius: 1rem 1rem 0 0;
    }

    .tutor-actions-card {
        border-radius: 1rem 1rem 0 0;
    }

    .tutor-col-main {
        padding-bottom: 80px;
        z-index: 1;
    }

    .tutor-tabs-card {
        position: relative;
        z-index: 1;
    }

    .tutor-main {
        padding-bottom: 120px;
    }

    .tutor-bg ~ footer,
    .tutor-bg footer,
    body:has(.tutor-bg) footer {
        display: none;
    }

    a.tutor-tooltip-wrapper {
        display: inline-flex;
        width: 50%;
    }
    .favorite-button-container-blue {
        display: inline-flex;
        width: 50%;
    }

    .tutor-btn-share {
        display: none;
    }
}

/* =================== MIN-WIDTH 768 =================== */

@media (min-width: 768px) {
    .subjects-card {
        padding: 2rem;
    }
}

/* =================== MIN-WIDTH 640 =================== */

@media (min-width: 640px) {
    .review-form-container {
        padding: 2rem;
    }

    .review-form__star {
        width: 4rem;
        height: 4rem;
    }

    .info-card-title {
        font-size: 1.125rem;
    }

    .info-card-meta {
        flex-direction: row;
        column-gap: 1.5rem;
        row-gap: 0;
        align-items: center;
    }
}

/* =================== MAX-WIDTH 600px =================== */

@media (max-width: 600px) {

    .review-form__rating-wrapper {
        padding: 1rem 0;
        gap: 0.5rem;
        justify-content: center;
    }

    html,
    body {
        width: 100vw;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body.modal-open {
        overflow: hidden;
    }

    .tutor-breadcrumbs {
        display: none;
    }

    .tutor-bg {
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .tutor-main {
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        margin: 0;
        padding: 0 0 2rem 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .tutor-grid {
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        margin: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .tutor-tabs-card {
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        margin: 0;
        border-radius: 30px;
        box-sizing: border-box;
        overflow-x: hidden;
        padding: 0;
    }

    .tutor-tabs-nav {
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: auto;
        margin: 0;
        padding: 0.4rem 0.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

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

    .tutor-tabs-list {
        display: flex;
        flex-direction: row;
        gap: 0.2rem;
        width: max-content;
        box-sizing: border-box;
        overflow-x: auto;
        margin: 0;
        padding: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tutor-tabs-list::-webkit-scrollbar {
        height: 4px;
        background: #eee;
    }

    .tutor-tabs-list::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 2px;
    }

    .tutor-tabs-content {
        padding: 1.2rem 0.5rem 2rem 0.5rem;
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        box-sizing: border-box;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .tutor-tab-content {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tutor-section-title-lg,
    .tutor-section-title {
        text-align: center;
        width: 100%;
    }
    .space-languages-perfil {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
        max-width: 380px;
    }

    .tutor-availability-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 100vw;
        max-width: 100vw;
        box-sizing: border-box;
        padding: 0 0.5rem;
        overflow-x: hidden;
    }

    .tutor-calendar-box,
    .tutor-time-selector-box {
        margin: 0 auto;
        width: 100%;
        max-width: 340px;
        min-width: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        overflow-x: hidden;
    }

    .tutor-time-selector-col {
        display: block;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .tutor-subtab-content {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tutor-reviews-box {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .tutor-reviews-summary,
    .tutor-reviews-details {
        width: 100%;
        padding: 0.5rem;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .tutor-card-main {
        border-radius: 0rem;
    }

    .tutor-banner {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 280px;
        background: #000;
    }

    .tutor-banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 150px;
        z-index: 2;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
        pointer-events: none;
    }

    .tutor-profile-img {
        left: 50%;
        transform: translateX(-50%);
        position: relative;
        top: 0;
        margin-top: -5rem;
    }

    .tutor-profile-info {
        margin-left: 0;
        padding-left: 0;
        margin-top: 0.5rem;
        text-align: center;
    }

    .tutor-profile-meta {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        gap: 1px;
    }

    .tutor-profile-quote {
        margin-top: 0rem;
        padding: 1rem 1rem;
        text-align: center;
    }

    .tutor-section-skills-grupos {
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        word-break: break-word;
    }

    .tutor-section-skills-materias {
        display: flex;
        flex-wrap: wrap;
        gap: 1.2rem;
        margin-top: 0.5rem;
        margin-left: 0;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        word-break: break-word;
    }

    .tutor-skill-materia {
        word-break: break-word;
        white-space: normal;
        max-width: 80vw;
        min-width: 0;
        box-sizing: border-box;
    }

    .tutor-subtab-btn {
        width: 100px;
        padding: 0.7rem 0.4rem;
    }

    .modal-content {
        width: 90%;
        height: 95%;
        padding: 0rem;
        margin: 0rem;
        overflow: scroll;
    }

    .modal-body {
        display: flex;
        flex-direction: column;
    }

    .modal-qr-column {
        height: auto;
        display: flex;
        justify-content: center;
        padding: 0.6rem 0.6rem 0rem 0.6rem;
    }

    .qr-image {
        width: 100%;
        height: auto;
    }

    .modal-form-column {
        width: 100%;
        padding: 1rem;
        display: flex;
        justify-content: start;
        gap: 5px;
    }

    .action-buttons {
        flex-direction: row;
    }

    .form-title {
        text-align: centers;
    }

    .file-input-label {
        gap: 0.2rem;
        padding: 0.5rem 1rem;
        font-weight: 500;
        width: 100%;
    }

    .file-name-display {
        font-size: 0.675rem;
        color: #6b7281;
        margin-top: 0.25rem;
        padding: 0rem;
    }

    .info-box p {
        margin-top: 0.25rem;
        padding: 0.4rem 1rem;
    }

    .select-input {
        font-weight: 500;
    }

    .coupon-input-group {
        width: 100%;
    }

    .coupon-input {
        width: 100%;
    }

    .btn btn-secondary {
        width: 30%;
    }

    .coupon-dropdown-content {
        min-width: 80%;
    }

    .applied-coupon-container {
        min-width: 100px;
    }
}