/* ==========================================================================
   1. VARIABLES, FUENTES Y CONFIGURACIÓN GENERAL (Heredado de la Landing)
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..990;1,100..990&display=swap');

   :root {
       --bg-light: #f4f1ea;
       --bg-dark: #0d0d0d;
       --blue-dark: #1e2a5e;
       --blue-intense: #1d3557;
       --red-brand: #e9464e;
       --yellow-brand: #ffcc00;
       --grid-color-dark: rgba(255, 255, 255, 0.03);
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Montserrat', sans-serif;
   }
   
   body {
       background-color: var(--bg-dark); /* Fondo oscuro total para que resalte la UI */
       color: #ffffff;
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       overflow-x: hidden;
       max-width: 100%;
       padding: 40px 20px;
       
       /* Fondo de cuadrícula global adaptado a modo oscuro */
       background-image: 
           linear-gradient(to right, var(--grid-color-dark) 1px, transparent 1px),
           linear-gradient(to bottom, var(--grid-color-dark) 1px, transparent 1px);
       background-size: 60px 60px;
   }
   
   /* ==========================================================================
      2. CONTENEDOR PRINCIPAL DEL ESTRUCTURADO (CARD)
      ========================================================================== */
   #date-section {
       width: 100%;
       max-width: 850px; /* Un poco más ancho para albergar cómodamente el calendario */
       margin: 0 auto;
   }
   
   .form-container-box {
       background: #111111; /* Contenedor gris oscuro contrastante */
       border: 2px solid var(--blue-dark);
       border-radius: 20px;
       padding: 40px;
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
       position: relative;
   }
   
   /* ==========================================================================
      3. BARRA DE PROGRESO DE PASOS
      ========================================================================== */
   .progress-bar-steps {
       display: flex;
       justify-content: space-between;
       margin-bottom: 35px;
       border-bottom: 1px dashed #222;
       padding-bottom: 20px;
   }
   
   .step-indicator {
       font-weight: 800;
       color: #444;
       text-transform: uppercase;
       font-size: 13px;
       letter-spacing: 1px;
       transition: color 0.3s;
   }
   
   .step-indicator.active {
       color: var(--yellow-brand);
   }
   
   /* ==========================================================================
      4. MANEJO DE PASOS (Vistas Dinámicas)
      ========================================================================== */
   .form-step {
       display: none; /* Oculto por defecto */
   }
   
   .form-step.active {
       display: block; /* Solo el paso activo se muestra */
   }
   
   .step-title {
       font-size: 24px;
       font-weight: 900;
       color: var(--red-brand);
       margin-bottom: 30px;
       text-transform: uppercase;
       letter-spacing: -0.5px;
   }
   
   /* ==========================================================================
      5. PASO 1: ELEMENTOS DE FORMULARIO (Inputs y Selects)
      ========================================================================== */
   .input-group {
       display: flex;
       flex-direction: column;
       margin-bottom: 22px;
   }
   
   .input-group label {
       font-weight: 700;
       font-size: 12px;
       margin-bottom: 8px;
       text-transform: uppercase;
       color: #888;
       letter-spacing: 0.5px;
   }
   
   .input-group input, 
   .input-group select {
       background: #161616;
       border: 2px solid #222;
       padding: 15px;
       border-radius: 8px;
       color: #fff;
       font-size: 14px;
       font-weight: 600;
       transition: all 0.3s ease;
       width: 100%;
   }
   
   .input-group input:focus, 
   .input-group select:focus {
       outline: none;
       border-color: var(--red-brand);
       background: #1a1a1a;
   }
   
   /* Estilo para los placeholders */
   .input-group input::placeholder {
       color: #444;
   }
   
   /* Caja de Resumen Superior del Paso 2 */
   .user-summary-box {
       background: rgba(30, 42, 94, 0.2);
       border-left: 4px solid var(--red-brand);
       padding: 15px 20px;
       border-radius: 0 10px 10px 0;
       margin-bottom: 30px;
       text-align: left;
   }
   
   .user-summary-box p {
       font-size: 14px;
       color: #aaa;
       margin-bottom: 4px;
   }
   
   .user-summary-box p:last-child {
       margin-bottom: 0;
   }
   
   .user-summary-box span {
       color: #fff;
       font-weight: 700;
   }
   
   /* ==========================================================================
      6. PASO 2: ESTRUCTURA DEL CALENDARIO E IMAGEN (Grid Premium)
      ========================================================================== */
   .calendar-booking-wrapper{
    display: grid;
    grid-template-columns: 1.7fr 0.8fr;
    gap: 30px;

    background: #080808;
    padding: 25px;
    border-radius: 14px;
    border: 1px solid #161616;

    height: 520px; /* o el alto que prefieras */
}
   
   /* Cabecera del Mes */
   .calendar-header-nav {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 30px;
       margin-bottom: 25px;
   }
   
   .calendar-header-nav h2 {
       color: var(--yellow-brand);
       font-size: 20px;
       font-weight: 900;
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   
   .cal-nav-btn {
       background: transparent;
       border: none;
       color: var(--red-brand);
       font-size: 16px;
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .cal-nav-btn:hover {
       transform: scale(1.2);
   }
   
   /* Grid de los Nombres de la Semana */
   .weekdays-grid {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       text-align: center;
       font-weight: 900;
       font-size: 11px;
       color: #3b4d8a; /* Azul corporativo de textos cortos */
       margin-bottom: 15px;
       letter-spacing: 0.5px;
   }

   .cal-day-cell.disabled{
    opacity: 0.15;
    background-color: #333 !important;
    color: #666 !important;
    cursor: not-allowed;
    pointer-events: none;
}
   
   /* Grid contenedor de los días */
   .days-grid {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       gap: 10px;
   }
   
   /* Celdas de los Días (Corte de Hoja Asimétrico) */
   .cal-day-cell {
       aspect-ratio: 1.2 / 1;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 15px;
       font-weight: 700;
       color: #fff;
       cursor: pointer;
       border-radius: 0px 16px 0px 16px; /* Curvas encontradas exactas */
       transition: all 0.2s ease;
       user-select: none;
   }
   
   /* Clases de Colores Asignadas por JS */
   .cal-day-cell.color-blue   { background-color: #1e2a5e; }
   .cal-day-cell.color-red    { background-color: #e9464e; }
   .cal-day-cell.color-yellow { background-color: #ffcc00; color: #1e2a5e; }
   
   /* Celdas vacías de desfase */
   .cal-day-cell.empty {
       background-color: #1e2a5e;
       opacity: 0.2;
       cursor: default;
   }
   
   /* Efecto de selección (Borde blanco iluminado) */
   .cal-day-cell.selected {
       outline: 3px solid #ffffff;
       box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
       transform: scale(1.05);
       z-index: 2;
   }

   .disabled:hover{
       cursor: not-allowed;
   }
   
   /* BARRA LATERAL DERECHA (HRS) */
   .time-sidebar-box {
       display: flex;
       flex-direction: column;
       align-items: center;
       border-left: 1px solid #1a1a1a;
       padding-left: 20px;
   }
   
   .hrs-title {
       color: var(--yellow-brand);
       font-size: 13px;
       font-weight: 900;
       letter-spacing: 1px;
       margin-bottom: 20px;
       text-transform: uppercase;
   }
   
   .hours-list-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;

    /* Nuevo */
    max-height: 430px; /* Ajusta este valor según el alto del calendario */
    overflow-y: auto;
    padding-right: 6px;
    }

    .hours-list-container::-webkit-scrollbar {
        width: 8px;
    }
    
    .hours-list-container::-webkit-scrollbar-track {
        background: #111;
        border-radius: 10px;
    }
    
    .hours-list-container::-webkit-scrollbar-thumb {
        background: #1e2a5e;
        border-radius: 10px;
    }
    
    .hours-list-container::-webkit-scrollbar-thumb:hover {
        background: #2d428c;
    }
   
   .info-select-date {
       font-size: 12px;
       color: #444;
       text-align: center;
       font-style: italic;
       margin-top: 20px;
   }
   
   /* Botones de Horas individuales (Cápsulas) */
   .time-slot-btn {
       width: 100%;
       background: #17224d; /* Azul noche profundo */
       border: none;
       color: #ffffff;
       padding: 14px 10px;
       font-size: 15px;
       font-weight: 700;
       border-radius: 0px 14px 0px 14px; /* Mismo corte asimétrico */
       cursor: pointer;
       transition: all 0.2s ease;
       text-align: center;
   }

   .busy-hour{
       width: 100%;
       background: #000000; /* Azul noche profundo */
       border: none;
       color: #ffffff;
       padding: 14px 10px;
       font-size: 15px;
       font-weight: 700;
       border-radius: 0px 14px 0px 14px; /* Mismo corte asimétrico */
       cursor: pointer;
       transition: all 0.2s ease;
       text-align: center;
   }

   .busy-hour:hover{
    cursor:not-allowed;
   }
   
   .time-slot-btn:hover {
       background: #202f6b;
   }
   
   .time-slot-btn.selected {
       background: var(--yellow-brand);
       color: #0d0d0d;
       font-weight: 800;
   }
   
  /* ==========================================================================
   7. BOTONERÍA Y FILA DE CONTROL DE PASOS (CORREGIDO)
   ========================================================================== */
.form-buttons-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 35px;
    gap: 20px;
    width: 100%;
}

/* El botón de avanzar del paso 1 se mantiene al 100% */
.btn-step-next {
    background-color: var(--yellow-brand);
    color: #0d0d0d;
    border: none;
    padding: 16px 32px;
    font-weight: 900;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.1s;
    width: 100%; /* Ocupa todo el bloque en el Paso 1 */
    text-align: center;
}

/* CORRECCIÓN: El botón final ahora comparte el espacio correctamente con "Volver" */
.appointment-button-submit {
    background-color: var(--yellow-brand);
    color: #0d0d0d;
    border: none;
    padding: 16px 32px;
    font-weight: 900;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.1s;
    flex: 1; /* Toma el espacio restante al lado de "Volver" sin duplicarse */
    text-align: center;
}

.btn-step-next:hover, 
.appointment-button-submit:hover {
    background-color: #e6b800;
}

.btn-step-next:active, 
.appointment-button-submit:active {
    transform: scale(0.99);
}

/* Botón Volver del Paso 2 */
.btn-step-prev {
    background: transparent;
    border: 2px solid #333;
    color: #888;
    padding: 16px 32px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    flex: 0 0 auto; /* Mantiene su tamaño de contenido sin estirarse */
}

.btn-step-prev:hover {
    border-color: #fff;
    color: #fff;
}
   
   /* ==========================================================================
      8. RESPONSIVE DESIGN (Adaptación Móvil)
      ========================================================================== */
      @media (max-width: 768px){

        .form-container-box{
            padding: 24px 16px;
        }
    
        .calendar-booking-wrapper{
            display:flex;
            flex-direction:column;
            height:auto;
            gap:20px;
            padding: 15px;
            min-width: 0;
        }
    
        /* El calendario ya NO scrollea, se achica para caber completo */
        .calendar-main-box{
            width:100%;
            min-width: 0;
            overflow-x: visible;
        }
    
        .calendar-header-nav{
            gap: 15px;
            margin-bottom: 18px;
        }
    
        .calendar-header-nav h2{
            font-size: 15px;
        }
    
        .weekdays-grid{
            min-width: 0;
            gap: 4px;
            font-size: 9px;
            margin-bottom: 10px;
        }
    
        .days-grid{
            min-width: 0;
            gap: 6px;
        }
    
        .cal-day-cell{
            font-size: 12px;
            border-radius: 0px 8px 0px 8px;
        }
    
        .time-sidebar-box{
            border-left:none;
            border-top:1px solid #222;
            padding:20px 0 0;
            width:100%;
            min-width: 0;
        }
    
        .hours-list-container{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:10px;
            max-height:none;
            overflow:visible;
        }
    }
    
    /* Pantallas muy angostas (iPhone SE, etc.) */
    @media (max-width: 380px){
        .weekdays-grid{
            font-size: 8px;
        }
        .cal-day-cell{
            font-size: 11px;
        }
        .days-grid{
            gap: 4px;
        }
    }