/*
 * style.css
 * Estilos personalizados para complementar Bootstrap 5
 */

:root{/* Colores Principales del Tema */
    --primary-color: #FE0001; /* ROJO PRINCIPAL */
    --primary-rgb: 254, 0, 1; /* Versión RGB del color principal */

    /* Colores de Estado (inspirados en Bootstrap) */
    --success-color: #28a745; /* Verde para éxito */
    --success-rgb: 40, 167, 69;

    --info-color: #17a2b8; /* Azul claro para información */
    --info-rgb: 23, 162, 184;

    --warning-color: #ffc107; /* Amarillo para advertencias */
    --warning-rgb: 255, 193, 7;

    --danger-color: #dc3545; /* Rojo oscuro para errores/peligro */
    --danger-rgb: 220, 53, 69;

    --secondary-color: #6c757d; /* Gris para secundario */
    --secondary-rgb: 108, 117, 125;

    --dark-color: #212529; /* Negro oscuro */
    --dark-rgb: 33, 37, 41;

    --light-color: #f8f9fa; /* Gris muy claro */
    --light-rgb: 248, 249, 250;

    /* Colores de soporte/interfaz */
    --background-light: #f8f9fa; /* Fondo claro general del body */
    --border-light-grey: #dee2e6; /* Borde de elementos generales */
    --selected-bg-tint: rgba(var(--primary-rgb), 0.1); /* Fondo rojizo para seleccionados */
    --hover-bg-tint: rgba(var(--primary-rgb), 0.05); /* Fondo ligeramente rojizo al hover */}

body{background-color: #fff;
    background-size: cover; /* Cubre todo el área sin distorsionar */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative; /* Necesario para la superposición */}

body::before{/* Esto crea una capa semi-transparente sobre la imagen */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* Capa oscura (ajusta el 0.3 para más/menos opacidad) */
    /* O un tono de tu color primario para una superposición de color */
    /* background-color: rgba(var(--primary-rgb), 0.1); */
    z-index: -1; /* Asegura que la capa esté detrás del contenido */}

#main-logo{height: 45px; /* Altura fija para el logo, ajusta según sea necesario */
    width: auto; /* Mantener la proporción */
    object-fit: contain; /* Asegura que la imagen se vea completa dentro de su caja */}

.mb-5{margin-bottom: -1rem !important;}

.mt-5{margin-top: 1rem !important;}

.card-body h1{font-size: 2.1rem; /* Ligeramente más pequeño para que no domine tanto el espacio */
    /* REMOVER: margin-left: auto; */ /* Elimina esta línea */}

/* Media query para pantallas más pequeñas para el título principal */
@media (max-width: 576px){.card-body h1 {
    font-size: 1.6rem; /* Haz el título más pequeño en móviles */}

    #main-logo{height: 35px; /* Haz el logo más pequeño en móviles */}

}

/* --- INTERFAZ PACIENTE --- */

#cita-form .paso{display: none;
    animation: fadeIn 0.5s;}

#cita-form .paso.active{display: block;}

/* Estilos para las cards de servicio y selección */
.service-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border: 1px solid var(--border-light-grey);
    border-radius: 0.5rem;
    min-height: 180px !important; /* <--- ESTA ES LA LÍNEA QUE DEBES MODIFICAR */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    text-decoration: none;
    color: inherit;
}

/* Estas reglas adicionales que te gustan, déjalas tal cual están en tu style.css */
.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.service-card.selected {
    border: 2px solid var(--primary-color); /* O usa un color fijo */
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5); /* O usa un color fijo */
    background-color: var(--selected-bg-tint); /* O usa un color fijo */
}

.service-card .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    padding: 0;
}

.service-card i {
    font-size: 2.8rem;
    margin-bottom: 8px;
    color: var(--primary-color); /* O usa un color fijo */
    display: block;
}

.service-card .card-title {
    margin-bottom: 0;
    font-size: 1.05rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

/* Para el contenedor de los servicios */
#lista-servicios{margin-top: 20px;}

/* Estilos para la lista de selección (ej: horarios, médicos) */
.list-selection .list-group-item{cursor: pointer;
    transition: all 0.2s ease-in-out;}

.list-selection .list-group-item:hover,
.list-selection .list-group-item.active{background-color: var(--primary-color);
    color: white;
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);}


/* Estilos para la barra de progreso */
.progress{height: 30px;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 10px;
    background-color: var(--light-color); /* Fondo de la barra principal puede ser light-color */
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);}

.progress-bar{white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--primary-color);
    background-image: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
    );
    background-size: 40px 40px;
    animation: progress-stripes 2s linear infinite;
    transition: width 0.6s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    border-radius: 10px;}

/* Pausar la animación de rayas cuando el progreso está completo */
.progress-bar[aria-valuenow="100"]{animation: none;}

/* Animación para las rayas del progress bar */
@keyframes progress-stripes{0% {
    background-position: 40px 0;}

    100%{background-position: 0 0;}

}

/* Media query para pantallas más pequeñas, si el texto se ve muy grande */
@media (max-width: 768px){.progress {
    height: 30px;
    font-size: 0.8rem;}

    .progress-bar{font-size: 0.75rem;}

}

@keyframes fadeIn{from {
    opacity: 0;
    transform: translateY(10px);}

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

}

/* --- PANEL DE ADMINISTRACIÓN --- */

body.admin-login{background: linear-gradient(to right, #F5E0E0, #B0C4DE); /* Rosa muy pálido/grisáceo a Gris Azulado */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;}

.login-container{background: white;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px;}

.filter-form{padding: 1.5rem;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(var(--dark-rgb), 0.05);}

.table{box-shadow: 0 2px 10px rgba(var(--dark-rgb), 0.05);}

.table thead{background-color: var(--dark-color);
    color: white;}

.estado-select{padding: 0.25rem 0.5rem;
    border-radius: 5px;
    border: 1px solid var(--border-light-grey);}

.estado-select:focus{outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.4);}

/* Estilos para los botones de Bootstrap, ahora usando tus nuevas variables */
.btn-primary{--bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: #d40000;
    --bs-btn-hover-border-color: #d40000;
    --bs-btn-active-bg: #bf0000;
    --bs-btn-active-border-color: #bf0000;
    --bs-btn-disabled-bg: rgba(var(--primary-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--primary-rgb), 0.6);}

/* Puedes definir otros botones como btn-success, btn-info, etc. aquí, si los usas */
.btn-success{--bs-btn-bg: var(--success-color);
    --bs-btn-border-color: var(--success-color);
    --bs-btn-hover-bg: #218838;
    --bs-btn-hover-border-color: #1e7e34;
    --bs-btn-active-bg: #1c7430;
    --bs-btn-active-border-color: #17692b;}

.btn-info{--bs-btn-bg: var(--info-color);
    --bs-btn-border-color: var(--info-color);
    --bs-btn-hover-bg: #117a8b;
    --bs-btn-hover-border-color: #106c7a;
    --bs-btn-active-bg: #0f6674;
    --bs-btn-active-border-color: #0d5d67;}

.btn-warning{--bs-btn-bg: var(--warning-color);
    --bs-btn-border-color: var(--warning-color);
    --bs-btn-hover-bg: #e0a800;
    --bs-btn-hover-border-color: #d39e00;
    --bs-btn-active-bg: #c69500;
    --bs-btn-active-border-color: #b98b00;}

.btn-danger{--bs-btn-bg: var(--danger-color);
    --bs-btn-border-color: var(--danger-color);
    --bs-btn-hover-bg: #c82333;
    --bs-btn-hover-border-color: #bd2130;
    --bs-btn-active-bg: #b01b2a;
    --bs-btn-active-border-color: #a41726;}

/* Ajustes para el espaciado entre columnas (si no usas las clases g-X de Bootstrap) */
.col-6.col-md-4.col-lg-3.mb-3{/* padding-left: 8px; */
    /* padding-right: 8px; */}

.row.g-3{--bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;}

/* Nuevas clases para los badges de estado en el dashboard, si los usas */
.badge-status-Pendiente{background-color: var(--info-color);
    color: white;}

.badge-status-Confirmada{background-color: var(--success-color);
    color: white;}

.badge-status-Cancelada{background-color: var(--danger-color);
    color: white;}

.badge-status-Completada{background-color: var(--secondary-color); /* O un verde más oscuro si quieres */
    color: white;}

/* Estilos para el contenedor del logo */
.logo-container{text-align: center; /* Centra la imagen dentro de este div */
    margin-bottom: 20px; /* Ajusta el espacio debajo del logo si mb-4 no es suficiente o es mucho */}

/* Estilos para la imagen del logo */
.login-logo{max-width: 180px; /* Ajusta el tamaño máximo del logo. Experimenta con este valor. */
    height: auto;     /* Mantiene la proporción de la imagen */
    display: block;   /* Asegura que max-width funcione correctamente y no haya espacios extra */
    margin: 0 auto;   /* Centra la imagen si el logo-container no fuera 100% ancho */}

/* --- COMPLEMENTOS PARA EL NUEVO DISEÑO --- */

.cita-card{border-radius: 1rem;
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen bien */}

.cita-card .card-header{border-bottom: 1px solid var(--border-light-grey); /* Línea divisoria suave */}

/* Estilos para la barra de navegación de pasos */
.steps-navigation{position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px; /* Espacio para la línea inferior si se desea */}

.step-item{display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--secondary-color);
    transition: color 0.3s ease;
    position: relative;
    padding: 0 10px; /* Espacio entre el texto de los pasos */}

.step-item:hover{color: var(--dark-color);}

.step-item.active{color: var(--primary-color);
    font-weight: bold;}

.step-circle{width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--light-color);
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 5px;
    border: 2px solid var(--border-light-grey);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;}

.step-item.active .step-circle{background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);}

.step-arrow{width: 40px; /* Ancho de la flecha */
    height: 2px;
    background-color: var(--border-light-grey);
    margin: 0 10px; /* Espacio entre el círculo y la flecha */}

/* Ajustes para el campo de búsqueda de especialidad */
#search-servicio{border-radius: 0.375rem; /* Asegura el redondeo completo */}

.input-group-text{border-radius: 0.375rem 0 0 0.375rem !important; /* Redondea solo el lado izquierdo */
    background-color: white;}

/* Estilos para las tarjetas de especialidad (Paso 1) */


/* Estilos específicos para las cards del paso 2 y 3 (resumen) */
.shadow-sm-light{box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;}

.shadow-sm{box-shadow: none !important;}

/* Estilos para la selección de médicos (Paso 2) */
#lista-medicos .form-check{padding: 1rem;
    border: 1px solid var(--border-light-grey);
    border-radius: 0.5rem; /* Bordes más redondeados */
    margin-bottom: 0.75rem; /* Más espacio entre médicos */
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    cursor: pointer;}

#lista-medicos .form-check input[type="radio"]{margin-right: 15px; /* Espacio entre el radio y la información del médico */
    transform: scale(1.2); /* Radio button un poco más grande */}

.medico-info{flex-grow: 1; /* Permite que la información del médico ocupe el espacio restante */}

.medico-info img{width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid var(--border-light-grey);}

.medico-info .medico-nombre{font-size: 1.1rem;
    margin-bottom: 3px;
    color: var(--dark-color);}

.medico-info .medico-especialidad{font-size: 0.9rem;
    color: var(--secondary-color);
    margin-bottom: 5px;}

.medico-info .ficha-vida{font-size: 0.85rem;
    color: var(--info-color); /* Un azul más suave para el enlace */
    text-decoration: none;}

.medico-info .ficha-vida:hover{text-decoration: underline;}

/* Estilos para la selección de horas (Paso 2) */
#lista-horas .hora-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-light-grey); /* Borde por defecto gris claro */
    border-radius: 0.75rem;
    background-color: white;
    color: var(--dark-color); /* ¡Este es el color de texto por defecto (negro)! */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    min-width: 90px;
    font-weight: 500;
}

#lista-horas .hora-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: var(--info-color); /* ¡FONDO AZUL al pasar el ratón! */
    color: var(--dark-color); /* ¡TEXTO NEGRO al pasar el ratón! */
    border-color: var(--border-light-grey); /* ¡BORDE GRIS CLARO al pasar el ratón! */
}

/* El resto de tus estilos se mantienen como están */
#lista-horas .hora-btn.selected{
    background-color: var(--primary-color); /* Fondo ROJO cuando está seleccionado */
    color: white !important; /* Texto BLANCO cuando está seleccionado (¡con !important para asegurar!) */
    border-color: var(--primary-color); /* Borde ROJO cuando está seleccionado */
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
}

#lista-horas .hora-btn.unavailable{
    background-color: var(--light-color);
    color: var(--secondary-color);
    cursor: not-allowed;
    opacity: 0.6;
    border-style: dashed;
}

#lista-horas .hora-btn.unavailable:hover{
    transform: none;
    box-shadow: none;
}

/* Estilos para el legend de disponibilidad de horas */
.legend{font-size: 0.85rem;
    color: var(--secondary-color);
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Envolver en líneas si no hay espacio */
    gap: 10px;}

.legend .badge{display: inline-flex;
    align-items: center;
    font-weight: normal; /* No tan negrita como los botones */}

.legend .badge i{font-size: 0.7rem;
    margin-right: 5px;}

/* Asegura que el input de Flatpickr esté oculto si solo se muestra el calendario inline */
#fecha_cita_flatpickr {
    display: none !important;
}

/* Ocultar días del mes anterior y siguiente que aparecen en la vista del mes actual */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    display: none !important; /* Usar !important para asegurar que se sobrescriban los estilos por defecto de Flatpickr */
}

/* Ajustes para Flatpickr (calendario) */
.flatpickr-calendar{box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    border-radius: 0.75rem !important; /* Más redondeado */
    padding: 15px !important;
    background-color: white !important;}

.flatpickr-calendar.inline{width: 100%; /* Ajusta el ancho al contenedor */
    max-width: none;}

.flatpickr-months .flatpickr-month{background-color: white !important;
    color: var(--dark-color) !important;}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-month,
.flatpickr-current-month .numInputWrapper span.arrowUp:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:after{color: var(--primary-color); /* Color para las flechas y mes */}

.flatpickr-month, .flatpickr-weekday{font-weight: 600; /* Días y meses más negrita */}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonth, .flatpickr-day.startRange.prevMonth, .flatpickr-day.endRange.prevMonth,
.flatpickr-day.selected.nextMonth, .flatpickr-day.startRange.nextMonth, .flatpickr-day.endRange.nextMonth{background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;}

.flatpickr-day.today{border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;}

.flatpickr-day.today:hover{background-color: var(--primary-color) !important;
    color: white !important;}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover{color: var(--secondary-color) !important;
    opacity: 0.4;}

.flatpickr-day.inRange{background-color: rgba(var(--primary-rgb), 0.1) !important;
    border-color: rgba(var(--primary-rgb), 0.1) !important;
    box-shadow: none !important; /* Elimina sombra si Flatpickr la añade */}

/* Estilos para las tarjetas de resumen y datos de paciente (Paso 4) */
.summary-card, .patient-data-card{background-color: white;
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}

.summary-card h4, .patient-data-card h4{font-size: 1.5rem;
    border-bottom: 2px solid rgba(var(--primary-rgb), 0.1);
    padding-bottom: 10px;
    margin-bottom: 15px;}

.summary-card ul, .patient-data-card ul{font-size: 1.05rem;}

.summary-card ul li span, .patient-data-card ul li span{color: var(--dark-color);}

/* Ajustes para inputs y selects */
.form-control-lg, .form-select-lg{padding: 0.75rem 1rem; /* Aumenta el padding para hacerlos más grandes */
    font-size: 1.1rem; /* Fuente más grande */}

/* Media queries para adaptar la navegación de pasos en móviles */
@media (max-width: 768px){.steps-navigation {
    flex-wrap: wrap; /* Permite que los pasos se envuelvan */
    justify-content: center;}

    .step-arrow{display: none !important; /* Oculta las flechas en móviles para evitar amontonamiento */}

    .step-item{margin-bottom: 10px; /* Espacio entre filas de pasos en móviles */}

    .col-lg-10.col-md-11{padding-left: 0;
        padding-right: 0;}

    .cita-card{border-radius: 0; /* Sin bordes redondeados en móviles para ocupar todo el ancho */}

}

/* Contenedor principal del formulario */
.form-container{background-color: #ffffff;
    border-radius: 1rem;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    overflow: hidden;}

.form-header .form-title{font-weight: 700;
    color: var(--dark-color);}

.form-header .form-subtitle{color: var(--secondary-color);
    font-size: 1.1rem;}

/* --- INDICADOR DE PROGRESO --- */
.progress-indicator-container{display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 2.5rem 0;}

.step-indicator{display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    text-align: center;
    color: var(--secondary-color);
    transition: all 0.3s ease;}

.step-indicator .step-icon{width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border: 3px solid #e9ecef;
    transition: all 0.3s ease;}

.step-indicator .step-label{margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;}

/* Estado activo y completado */
.step-indicator.active .step-icon,
.step-indicator.completed .step-icon{background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    border-color: var(--primary-color);}

.step-indicator.active{color: var(--primary-color);
    font-weight: 700;}

.step-indicator.completed .step-icon{background-color: var(--primary-color);
    color: white;}

.step-connector{flex-grow: 1;
    height: 2px;
    background-color: #e9ecef;
    margin-top: 25px; /* Alinea con el centro de los círculos */
    transition: all 0.3s ease;}

.step-connector.completed{background-color: var(--primary-color);}

/* Estilos de los pasos del formulario */
.paso{display: none;}

.paso.active{display: block;
    animation: fadeIn 0.5s;}

@keyframes fadeIn{from { opacity: 0; transform: translateY(10px);}

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

}
.step-title{font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--dark-color);}

/* --- PASO 1: TARJETAS DE ESPECIALIDAD --- */
.service-card{border: 2px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--light-color);}

.service-card.selected{border-color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.05);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.2);
    transform: translateY(-5px);}

.service-card .service-icon{font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;}

.service-card .service-name{font-weight: 600;
    color: var(--dark-color);}

/* --- PASO 2: MÉDICO Y FECHA --- */
#calendario-container .flatpickr-calendar{width: 100%;
    box-shadow: none;
    border: 1px solid #dee2e6;}

/* Estilos para la selección de médicos (Paso 2) */
/* Consolida y ajusta esta regla principal para las tarjetas de médico */
#lista-medicos .form-check {
    /* padding: 1rem; */ /* ¡COMENTA o ELIMINA esta línea para que 'p-2' del JS tenga efecto (0.5rem)! */
    border: 1px solid var(--border-light-grey);
    border-radius: 0.5rem; /* Mantén 0.5rem para bordes redondeados */
    margin-bottom: 0.5rem; /* Ajusta a 0.5rem para menos altura entre tarjetas */
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    display: flex; /* Ya estaba aquí, pero lo mantenemos explícito */
    align-items: center; /* Ya estaba aquí, pero lo mantenemos explícito */
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Mantiene la transición del hover */
}

/* Estilo al pasar el ratón sobre la tarjeta */
#lista-medicos .form-check:hover {
    border-color: var(--primary-color);
    background-color: var(--hover-bg-tint); /* Asegúrate de que --hover-bg-tint esté definido */
}

/* Estilo cuando el radio de la tarjeta está seleccionado */
#lista-medicos .form-check input[type="radio"]:checked + label {
    font-weight: bold;
    color: var(--primary-color);
}

/* Ajuste del input de radio para que el 'ms-3' del JS funcione */
#lista-medicos .form-check input[type="radio"] {
    margin-right: 0; /* Asegura que no haya margen derecho */
    width: 0.8em; /* Mantiene el tamaño que definimos */
    height: 0.8em; /* Mantiene el tamaño que definimos */
    margin-top: 0; /* ¡MUY IMPORTANTE! Anula cualquier margen superior por defecto */
    margin-bottom: 0; /* Asegura que no haya margen inferior */
    vertical-align: middle; /* Añade esto para ayudar a la alineación vertical dentro del flexbox */
}

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

.medico-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid var(--border-light-grey);
}

.medico-info .medico-nombre {
    font-size: 0.95rem; /* ¡Tamaño de fuente más pequeño! (antes 1.1rem) */
    margin-bottom: 3px;
    color: var(--dark-color);
}

.medico-info .medico-especialidad {
    font-size: 0.8rem; /* Mantiene el tamaño de la especialidad */
    color: var(--secondary-color);
    margin-bottom: 5px;
}

.medico-info .ficha-vida {
    font-size: 0.85rem;
    color: var(--info-color);
    text-decoration: none;
}

.medico-info .ficha-vida:hover {
    text-decoration: underline;
}

/* **NUEVA REGLA CSS para el icono del corazón** */
/* Este estilo se aplicará al icono dentro de cualquier .medico-card */
.medico-card .bi-heart-fill {
    font-size: 0.8rem; /* Mantiene el tamaño del icono */
    color: var(--primary-color);
    vertical-align: middle; /* Añade esto para ayudar a la alineación vertical con el radio */
    opacity: 0.4;
}

/* --- PASO 3: BOTONES DE HORA --- */
.time-slot-btn{border: 2px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;}

.time-slot-btn:hover{background-color: var(--light-color);
    border-color: var(--primary-color);}

.time-slot-btn.selected{background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);}

.time-slot-btn.disabled{background-color: #e9ecef;
    border-color: #e9ecef;
    color: var(--secondary-color);
    cursor: not-allowed;
    text-decoration: line-through;}

/* --- PASO 5: RESUMEN --- */
.summary-card, .patient-data-card{background-color: var(--light-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    height: 100%;}

.summary-card h4, .patient-data-card h4{color: var(--primary-color);
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;}

.summary-card ul li, .patient-data-card ul li{font-size: 1.05rem;
    margin-bottom: 0.5rem;}

.summary-card ul li strong, .patient-data-card ul li strong{color: var(--dark-color);}

/* --- NAVEGACIÓN --- */
.form-navigation{display: flex;
    justify-content: space-between;}

.btn-lg{padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;}

/* --- OTROS --- */
.form-control-lg, .form-select-lg{padding: 0.75rem 1.25rem;
    font-size: 1rem;}

.sticky-top{z-index: 1030 !important;
    border-bottom: 1px solid #fff; /* ← ELIMINA esta línea */}

.sticky-buttons-wrapper{position: sticky;
    bottom: 0;
    background: #fff;
    padding: 1rem 0;
    margin-top: 2rem;
    z-index: 1000;
    border-top: 1px solid #eee;}

/* Adjust content wrapper to prevent overlap with fixed header and footer buttons */
.content-wrapper{padding-top: 100px; /* Adjust based on header height */
    padding-bottom: 80px; /* Adjust based on fixed button container height */}

/* --- CABECERA FIJA --- */
.fixed-top-header{position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff; /* White background for header */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1030;
    padding: 10px 0;}

/* Custom styles for fixed buttons */
.fixed-bottom-right-buttons{position: fixed;
    bottom: 0; /* Changed from 20px to 0 for a full-width footer-like bar */
    right: 0;
    left: 0; /* Added to make it full width */
    padding: 15px 20px; /* Add some padding */
    background-color: #fff; /* White background for the button container */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Shadow for a lifted effect */
    z-index: 1030;
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px;}

.header-content{display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1200px;}

.main-logo{height: 50px;
    object-fit: contain;}

/* --- NAVEGACIÓN POR PASOS (EN CABECERA) --- */
.steps-navigation{display: flex; gap: 15px; align-items: center;}

.step-item{display: flex; align-items: center; gap: 8px; color: #6c757d; opacity: 0.6; transition: all 0.3s ease;}

.step-item .step-circle{width: 30px; height: 30px; border-radius: 50%; border: 2px solid #6c757d; display: flex; justify-content: center; align-items: center; font-weight: bold; transition: all 0.3s ease;}

.step-item .step-text{font-weight: 500;}

.step-item.active{color: #0d6efd; opacity: 1;}

.step-item.active .step-circle{background-color: #0d6efd; color: #ffffff; border-color: #0d6efd;}

.step-item.completed{color: #198754; opacity: 1;}

.step-item.completed .step-circle{background-color: #198754; color: #ffffff; border-color: #198754;}

.step-item{display: flex;
    align-items: center;
    gap: 8px;
    color: #6c757d; /* Color por defecto */
    opacity: 0.6;
    transition: all 0.3s ease;}

.step-item .step-circle{width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #6c757d;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transition: all 0.3s ease;}

/* Estilo para el paso activo y completado */
.step-item.active{color: #0d6efd; /* Azul primario de Bootstrap */
    opacity: 1;}

.step-item.active .step-circle{background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;}

.step-item.completed{color: #198754; /* Verde success de Bootstrap */
    opacity: 1;}

.step-item.completed .step-circle{background-color: #198754;
    color: #ffffff;
    border-color: #198754;}

/* --- TARJETA PRINCIPAL DEL FORMULARIO --- */
.card-header{background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;}

#card-title{color: #343a40;
    font-weight: 600;}

.paso{display: none;}

.paso.active{display: block;
    animation: fadeIn 0.5s ease-in-out;}

@keyframes fadeIn{from { opacity: 0; transform: translateY(15px);}

}

/* --- CONTENIDO CON SCROLL --- */
.scrollable-content{max-height: 600px; /* <-- AUMENTA ESTE VALOR (ej. de 400px a 600px o 700px) */
    overflow-y: auto; /* Habilitar scroll vertical */
    padding-right: 10px; /* Espacio para la barra de scroll */
    /* Asegúrate de que las reglas para la barra de scroll (::-webkit-scrollbar, etc.) también estén presentes */}

/* --- ESTILOS DE COMPONENTES INTERNOS --- */

/* Tarjetas de especialidad */
.service-card{border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;}

.service-card:hover{transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);}

.service-card img{width: 60px;
    height: 60px;
    margin-bottom: 10px;
    object-fit: cover;}

.service-name{font-weight: 500;
    font-size: 0.9rem;}

/* Tarjetas de médico */
.doctor-card{display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;}

.doctor-card:hover{background-color: #f8f9fa;}

.doctor-card.selected{border-color: #0d6efd;
    background-color: #e7f1ff;}

.doctor-avatar{width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;}

.doctor-name{font-weight: 600;}

.doctor-specialty{font-size: 0.85rem;
    color: #6c757d;}

/* Botones de hora */
.time-slot{border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #ffffff;
    color: #212529;}

.time-slot.selected{background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;}

.time-slot.disabled{background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    text-decoration: line-through;}

/* Tarjetas de resumen */
.summary-card, .patient-data-card{background-color: #f8f9fa;
    border-radius: 8px;}

.summary-card li, .patient-data-card li{font-size: 1rem;
    padding: 5px 0;}

/* --- Media Queries para responsividad --- */
@media (max-width: 992px){.header-content {
    flex-direction: column;
    gap: 15px;}

    .content-wrapper{padding-top: 150px; /* Más espacio para cabecera en móvil */}

}

@media (max-width: 768px){.steps-navigation {
    flex-wrap: wrap;
    justify-content: center;}

    .step-text{display: none; /* Oculta el texto en pantallas muy pequeñas */}

}
/* Forzar el ancho completo */
.flatpickr-calendar, .flatpickr-days, .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Forzar la altura completa */
.flatpickr-calendar, .flatpickr-days, .dayContainer {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box;
}


/* Altura uniforme para la tarjeta de cita */
.cita-card {
    min-height: 70vh; /* Puedes ajustar según tu diseño: 70-80vh */
    display: flex;
    flex-direction: column;
}

/* Asegurar que el cuerpo de la tarjeta crezca */
.cita-card .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Cada paso debe ocupar el espacio restante */
.paso {
    flex-grow: 1;
    display: none;
    flex-direction: column;
}

/* Solo el paso activo se muestra */
.paso.active {
    display: flex;
}

/* Scroll interno en pasos largos, sin romper altura */
.scrollable-content {
    overflow-y: auto;
}

/* Estilo para los botones de hora */
.hora-btn{min-width: 80px; /* Para que tengan un tamaño mínimo uniforme */
    text-align: center;
    transition: all 0.2s ease-in-out; /* Suaviza el cambio de estilo */}

/* Estilo para el botón de hora seleccionado */
.hora-btn.active{
    background-color: #0d6efd !important; /* Usa el color primario de Bootstrap por defecto o tu variable */
    color: #fff !important;
    border-color: var(--primary-color, #007bff);
    /* box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); Un pequeño brillo para indicar selección */}


.hora-btn:hover:not(.active){background-color: var(--background-light, #f8f9fa); /* Un sutil hover para los no seleccionados */}


.servicio-item {
    background-color: #f0f8ff; /* Fondo ligero para la tarjeta de servicio */
    border: 1px solid #e0e7e9;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px !important; /* <-- CAMBIA ESTE VALOR (ej. de 120px a 150px o más) */
}