/* Estilo para mejorar la visualización de iconos SVG */
.svg-icon {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.discipline-image.svg-icon {
    width: 80px;
    height: 80px;
}

.badge-icon.svg-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.mobile-badge-icon.svg-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* Estilos específicos para evitar iconos cuadrados en tarjetas de disciplinas */
.theme-icon {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background-color: #F1EFE3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.theme-img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    background: transparent !important;
    /* Evitar que se muestre como cuadrado durante la carga */
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
}

/* Asegurar que las imágenes dentro de theme-icon siempre sean circulares */
.theme-icon img {
    border-radius: 50% !important;
    object-fit: cover !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
}

/* Prevenir parpadeo de imágenes durante la carga */
.theme-icon {
    position: relative !important;
}

.theme-icon img {
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
}

/* Asegurar que las imágenes SVG también sean circulares */
.theme-icon svg {
    border-radius: 50% !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
}

/* Estilos para evitar que las imágenes se muestren como cuadrados antes de cargar */
.theme-icon * {
    border-radius: 50% !important;
}

/* Estilos específicos para imágenes de perfil en event_details.php */
.event_details .teacher-avatar,
.event_details .teacher-photo {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
}

.teacher-photo {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
}

.participant-avatar-img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
}

.participant-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #eef4ff !important;
    color: #3b5bdb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
}

/* Prevenir que las imágenes de perfil se muestren como cuadrados antes de cargar */
.event_details .teacher-avatar,
.event_details .teacher-photo,
.participant-avatar-img {
    position: relative !important;
}

/* Asegurar que todas las imágenes de perfil sean circulares */
.event_details .teacher-avatar *,
.event_details .teacher-photo *,
.participant-avatar-img * {
    border-radius: 50% !important;
}

/* Estilos específicos para la imagen del evento en event_details.php */
.event-image {
    width: 100% !important;
    max-height: 400px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
    display: block !important;
}

/* Prevenir que la imagen del evento se muestre incorrectamente antes de cargar */
.event-image {
    position: relative !important;
}

/* Configuración general de la fuente Montserrat */
:root {
    --font-family-montserrat: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Aplicar Montserrat a todo el sitio */
body, 
input, 
button, 
select, 
optgroup, 
textarea,
.btn,
.form-control {
    font-family: var(--font-family-montserrat) !important;
}

/* Estilos para el botón de mostrar/ocultar contraseña */
.toggle-password {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #ced4da;
    border-left: none;
}

.toggle-password:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.toggle-password:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    border-color: #80bdff;
}

.toggle-password i {
    transition: color 0.2s ease;
}

.toggle-password:hover i {
    color: #495057;
}

/* Asegurar que el input group funcione correctamente */
.input-group .form-control:focus {
    z-index: 3;
}

.input-group .toggle-password {
    z-index: 2;
}

/* Ajuste específico para títulos */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family-montserrat) !important;
    font-weight: 600;
}

/* Ajustes específicos para tarjetas */
.card-title {
    font-family: var(--font-family-montserrat) !important;
    font-weight: 600;
}

/* Ajustes para la navegación */
.navbar,
.nav-link,
.dropdown-item {
    font-family: var(--font-family-montserrat) !important;
}

/* Ajustar el peso de la fuente para elementos seleccionados */
.lead {
    font-weight: 300;
}

.text-bold, 
.font-weight-bold {
    font-weight: 700 !important;
}

.text-medium, 
.font-weight-medium {
    font-weight: 500 !important;
}

/* Mantener la legibilidad */
body {
    font-weight: 400;
    letter-spacing: -0.015em;
}

/* Estilos para espaciado de tarjetas - Prioridad alta */
.event-card {
    margin-bottom: 1.5rem !important;
}

.event-card:last-child,
.row-cols-md-2 .event-card:nth-last-child(-n+2),
.row-cols-lg-4 .event-card:nth-last-child(-n+4) {
    margin-bottom: 0 !important;
}

/* Espaciado específico para las tarjetas de temáticas */
.row-cols-2 > * {
    margin-bottom: 1.5rem !important;
}

.row-cols-2 > *:last-child,
.row-cols-2 > *:nth-last-child(2) {
    margin-bottom: 0 !important;
}

.row-cols-md-3 > * {
    margin-bottom: 1.5rem !important;
}

.row-cols-md-3 > *:last-child,
.row-cols-md-3 > *:nth-last-child(2),
.row-cols-md-3 > *:nth-last-child(3) {
    margin-bottom: 0 !important;
}

/* Espaciado para tarjetas de maestros */
.teacher-card {
    margin-bottom: 1.5rem !important;
}

.row-cols-1 .teacher-card:last-child,
.row-cols-md-2 .teacher-card:nth-last-child(-n+2),
.row-cols-lg-4 .teacher-card:nth-last-child(-n+4) {
    margin-bottom: 0 !important;
}

/* Aumentar espaciado vertical entre tarjetas en móvil */
.row-cols-1 > * {
    margin-bottom: 2rem !important;
}

.row-cols-1 > *:last-child {
    margin-bottom: 0 !important;
}

/* Espaciado adicional para tablet */
.row-cols-md-2 > * {
    margin-bottom: 1.5rem !important;
}

.row-cols-md-2 > *:last-child,
.row-cols-md-2 > *:nth-last-child(2) {
    margin-bottom: 0 !important;
}

/* Estilos específicos para las tarjetas de temáticas */
.hover-card {
    margin-bottom: 2rem !important;
}

/* Espaciado para temáticas en móvil (2 columnas) */
.row-cols-2 .hover-card {
    margin-bottom: 2rem !important;
}

.row-cols-2 .hover-card:last-child,
.row-cols-2 .hover-card:nth-last-child(2) {
    margin-bottom: 0 !important;
}

/* Espaciado para temáticas en tablet (3 columnas) */
.row-cols-md-3 .hover-card {
    margin-bottom: 2rem !important;
}

.row-cols-md-3 .hover-card:last-child,
.row-cols-md-3 .hover-card:nth-last-child(2),
.row-cols-md-3 .hover-card:nth-last-child(3) {
    margin-bottom: 0 !important;
}

/* Espaciado para temáticas en desktop (5 columnas) */
.row-cols-lg-5 .hover-card {
    margin-bottom: 2rem !important;
}

.row-cols-lg-5 .hover-card:last-child,
.row-cols-lg-5 .hover-card:nth-last-child(2),
.row-cols-lg-5 .hover-card:nth-last-child(3),
.row-cols-lg-5 .hover-card:nth-last-child(4),
.row-cols-lg-5 .hover-card:nth-last-child(5) {
    margin-bottom: 0 !important;
}

/* Aumentar el espaciado general de la fila para temáticas */
.row-cols-2.row-cols-md-3.row-cols-lg-5 {
    row-gap: 2rem !important;
}

/* Espaciado adicional para múltiples filas */
.row-cols-2.row-cols-md-3.row-cols-lg-5 > * {
    margin-bottom: 2rem !important;
}