/* HUBBDI CALENDAR - MEJORAS VISUALES AVANZADAS */

/* Detección automática de fondo y variables de tema */
:root {
    --hubcal-bg-light: rgba(255, 255, 255, 0.98);
    --hubcal-bg-dark: rgba(30, 30, 35, 0.98);
    --hubcal-text-light: #2c3e50;
    --hubcal-text-dark: #ecf0f1;
    --hubcal-border-light: rgba(0, 0, 0, 0.08);
    --hubcal-border-dark: rgba(255, 255, 255, 0.15);
    --hubcal-shadow-light: 0 6px 25px rgba(0, 0, 0, 0.12);
    --hubcal-shadow-dark: 0 6px 25px rgba(0, 0, 0, 0.4);
    --hubcal-hover-light: rgba(0, 0, 0, 0.04);
    --hubcal-hover-dark: rgba(255, 255, 255, 0.08);
    --hubcal-accent: var(--main-color, #3498db);
    --hubcal-accent-hover: var(--main-color-dark, #2980b9);
}

/* Contenedor principal de calendario items - Mejorado */
.hubcal-calitem {
    margin: 12px 8px;
    width: calc(100% - 16px);
    max-width: 420px;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--hubcal-bg-light);
    border-color: var(--hubcal-border-light);
    color: var(--hubcal-text-light);
    box-shadow: var(--hubcal-shadow-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hubcal-calitem:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--main-color-rgb, 52, 152, 219), 0.15);
    border-color: var(--hubcal-accent);
    background: var(--hubcal-hover-light);
}

/* Soporte para fondos oscuros - Detección automática */
.hubcal-dark-bg .hubcal-calitem,
[data-theme="dark"] .hubcal-calitem,
.dark-theme .hubcal-calitem {
    background: var(--hubcal-bg-dark);
    border-color: var(--hubcal-border-dark);
    color: var(--hubcal-text-dark);
    box-shadow: var(--hubcal-shadow-dark);
}

.hubcal-dark-bg .hubcal-calitem:hover,
[data-theme="dark"] .hubcal-calitem:hover,
.dark-theme .hubcal-calitem:hover {
    background: var(--hubcal-hover-dark);
    border-color: var(--hubcal-accent);
}

/* Contenedor principal del sistema de citas - Modernizado */
.hubcal-hubbappointment {
    max-width: 420px;
    width: 100%;
    margin: 20px auto;
    padding: 0;
    background: transparent;
    border-radius: 16px;
    position: relative;
    transition: all 0.3s ease;
}

/* Ajuste para layout horizontal - anular restricciones */
.hubcal-horizontal-layout.hubcal-hubbappointment {
    max-width: none;
    width: 100%;
    margin: 0;
    background: var(--hubcal-bg-light);
    border: 1px solid var(--hubcal-border-light);
    box-shadow: var(--hubcal-shadow-light);
}

.hubcal-dark-bg.hubcal-horizontal-layout.hubcal-hubbappointment,
[data-theme="dark"] .hubcal-horizontal-layout.hubcal-hubbappointment,
.dark-theme .hubcal-horizontal-layout.hubcal-hubbappointment {
    background: var(--hubcal-bg-dark);
    border-color: var(--hubcal-border-dark);
    box-shadow: var(--hubcal-shadow-dark);
}

/* LAYOUT HORIZONTAL TIPO CALENDLY - Solo en pantallas amplias */
@media (min-width: 1200px) {
    .hubcal-horizontal-layout {
        display: flex !important;
        gap: 24px;
        max-width: 1200px !important; /* Respetar límite del sitio */
        width: 100% !important;
        margin: 0 auto;
        padding: 24px;
        background: var(--hubcal-bg-light);
        border-radius: 20px;
        box-shadow: var(--hubcal-shadow-light);
        border: 1px solid var(--hubcal-border-light);
    }

    /* NO sobreescribir el contenedor general - mantener 1200px */
    body .modern-calendar-container .hubcal-horizontal-layout,
    .hubcal-horizontal-layout.hubcal-hubbappointment {
        max-width: 1200px !important; /* Límite respetado */
        width: 100% !important;
        margin: 24px auto !important; /* Centrado */
    }

    .hubcal-dark-bg .hubcal-horizontal-layout,
    [data-theme="dark"] .hubcal-horizontal-layout,
    .dark-theme .hubcal-horizontal-layout {
        background: var(--hubcal-bg-dark);
        border-color: var(--hubcal-border-dark);
        box-shadow: var(--hubcal-shadow-dark);
    }

    /* Panel izquierdo - Información del servicio */
    .hubcal-service-info-panel {
        flex: 0 0 300px !important;
        padding: 20px;
        border-radius: 16px;
        background: rgba(var(--main-color-rgb, 52, 152, 219), 0.05);
        border: 1px solid rgba(var(--main-color-rgb, 52, 152, 219), 0.1);
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .hubcal-dark-bg .hubcal-service-info-panel,
    [data-theme="dark"] .hubcal-service-info-panel,
    .dark-theme .hubcal-service-info-panel {
        background: rgba(var(--main-color-rgb, 52, 152, 219), 0.08);
        border-color: rgba(var(--main-color-rgb, 52, 152, 219), 0.2);
    }

    /* Panel central - Calendario */
    .hubcal-calendar-panel {
        flex: 1 !important;
        padding: 20px;
        border-radius: 16px;
        background: var(--hubcal-bg-light);
        border: 1px solid var(--hubcal-border-light);
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .hubcal-dark-bg .hubcal-calendar-panel,
    [data-theme="dark"] .hubcal-calendar-panel,
    .dark-theme .hubcal-calendar-panel {
        background: var(--hubcal-bg-dark);
        border-color: var(--hubcal-border-dark);
    }

    /* Panel derecho - Horarios disponibles */
    .hubcal-times-panel {
        flex: 0 0 280px !important;
        padding: 20px;
        border-radius: 16px;
        background: var(--hubcal-bg-light);
        border: 1px solid var(--hubcal-border-light);
        max-height: 600px;
        overflow-y: auto;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .hubcal-dark-bg .hubcal-times-panel,
    [data-theme="dark"] .hubcal-times-panel,
    .dark-theme .hubcal-times-panel {
        background: var(--hubcal-bg-dark);
        border-color: var(--hubcal-border-dark);
    }

    /* Ajustes del calendario en layout horizontal */
    .hubcal-horizontal-layout .hubcal-hubbappointment {
        max-width: none;
        width: 100%;
        margin: 0;
    }

    .hubcal-horizontal-layout .hubcal-body {
        max-width: none;
        box-shadow: none;
        border: none;
        background: transparent;
    }

    /* Comportamiento específico para layout horizontal */
    .hubcal-horizontal-layout #hubcalbody1,
    .hubcal-horizontal-layout [id^="hubcalbody"] {
        display: block !important; /* Siempre visible en layout horizontal HASTA seleccionar horario */
    }

    /* Cuando se está en paso de formulario/confirmación, ocultar calendario */
    .hubcal-horizontal-layout.hubcal-form-step #hubcalbody1,
    .hubcal-horizontal-layout.hubcal-form-step [id^="hubcalbody"],
    .hubcal-horizontal-layout .hubcal-form-active ~ #hubcalbody1,
    .hubcal-horizontal-layout .hubcal-form-active ~ [id^="hubcalbody"],
    .hubcal-horizontal-layout .hubcal-confirm-active ~ #hubcalbody1,
    .hubcal-horizontal-layout .hubcal-confirm-active ~ [id^="hubcalbody"] {
        display: none !important;
    }

    .hubcal-horizontal-layout #caltimes1,
    .hubcal-horizontal-layout [id^="caltimes"] {
        display: none !important; /* Solo mostrar en panel derecho */
    }

    /* Mantener el calendario central siempre visible EXCEPTO en pasos finales */
    .hubcal-horizontal-layout .hubcal-body {
        display: block !important;
        visibility: visible !important;
    }

    /* Ocultar elementos redundantes en layout horizontal */
    .hubcal-horizontal-layout .hubcal-calitem {
        display: none; /* Información ya está en el panel izquierdo */
    }

    /* Estilos para el panel de información */
    .hubcal-service-title {
        font-size: 24px;
        font-weight: 700;
        color: var(--hubcal-text-light);
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .hubcal-dark-bg .hubcal-service-title,
    [data-theme="dark"] .hubcal-service-title,
    .dark-theme .hubcal-service-title {
        color: var(--hubcal-text-dark);
    }

    .hubcal-service-duration {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: var(--hubcal-accent);
        margin-bottom: 20px;
        font-weight: 600;
    }

    .hubcal-service-duration i {
        margin-right: 8px;
    }

    .hubcal-service-instructions {
        background: rgba(255, 255, 255, 0.8);
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 20px;
        border-left: 4px solid var(--hubcal-accent);
    }

    .hubcal-dark-bg .hubcal-service-instructions,
    [data-theme="dark"] .hubcal-service-instructions,
    .dark-theme .hubcal-service-instructions {
        background: rgba(255, 255, 255, 0.1);
    }

    .hubcal-service-instructions h4 {
        margin: 0 0 8px 0;
        color: var(--hubcal-accent);
        font-size: 16px;
        font-weight: 600;
    }

    .hubcal-service-instructions p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--hubcal-text-light);
    }

    .hubcal-dark-bg .hubcal-service-instructions p,
    [data-theme="dark"] .hubcal-service-instructions p,
    .dark-theme .hubcal-service-instructions p {
        color: var(--hubcal-text-dark);
    }

    /* Título del panel de horarios */
    .hubcal-times-panel-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: var(--hubcal-text-light);
        display: flex;
        align-items: center;
    }

    .hubcal-dark-bg .hubcal-times-panel-title,
    [data-theme="dark"] .hubcal-times-panel-title,
    .dark-theme .hubcal-times-panel-title {
        color: var(--hubcal-text-dark);
    }

    .hubcal-times-panel-title i {
        margin-right: 8px;
        color: var(--hubcal-accent);
    }

    /* Estado vacío del panel de horarios */
    .hubcal-times-empty {
        text-align: center;
        padding: 40px 20px;
        color: var(--hubcal-text-light);
        opacity: 0.7;
    }

    .hubcal-dark-bg .hubcal-times-empty,
    [data-theme="dark"] .hubcal-times-empty,
    .dark-theme .hubcal-times-empty {
        color: var(--hubcal-text-dark);
    }

    .hubcal-times-empty i {
        font-size: 48px;
        margin-bottom: 16px;
        color: var(--hubcal-accent);
        opacity: 0.5;
    }

    /* Estilos para horarios en el panel derecho */
    .hubcal-times-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .hubcal-times-container .hubcal-time,
    .hubcal-times-container .hubcal-timex {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid var(--hubcal-border-light);
        border-radius: 8px;
        background: var(--hubcal-bg-light);
        color: var(--hubcal-text-light);
        text-align: center;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        margin: 0;
    }

    .hubcal-dark-bg .hubcal-times-container .hubcal-time,
    [data-theme="dark"] .hubcal-times-container .hubcal-time,
    .dark-theme .hubcal-times-container .hubcal-time,
    .hubcal-dark-bg .hubcal-times-container .hubcal-timex,
    [data-theme="dark"] .hubcal-times-container .hubcal-timex,
    .dark-theme .hubcal-times-container .hubcal-timex {
        background: var(--hubcal-bg-dark);
        border-color: var(--hubcal-border-dark);
        color: var(--hubcal-text-dark);
    }

    .hubcal-times-container .hubcal-time:hover,
    .hubcal-times-container .hubcal-timex:hover {
        border-color: var(--hubcal-accent);
        background: var(--hubcal-accent);
        color: white;
        transform: translateX(4px);
    }

    .hubcal-times-container .hubcal-selected-time {
        border-color: var(--hubcal-accent);
        background: var(--hubcal-accent);
        color: white;
    }

    /* Scrollbar para el panel de horarios */
    .hubcal-times-panel::-webkit-scrollbar {
        width: 6px;
    }

    .hubcal-times-panel::-webkit-scrollbar-track {
        background: var(--hubcal-border-light);
        border-radius: 3px;
    }

    .hubcal-times-panel::-webkit-scrollbar-thumb {
        background: var(--hubcal-accent);
        border-radius: 3px;
    }

    .hubcal-dark-bg .hubcal-times-panel::-webkit-scrollbar-track,
    [data-theme="dark"] .hubcal-times-panel::-webkit-scrollbar-track,
    .dark-theme .hubcal-times-panel::-webkit-scrollbar-track {
        background: var(--hubcal-border-dark);
    }
}

/* Responsive design mejorado */
@media (max-width: 768px) {
    .hubcal-hubbappointment {
        max-width: 100%;
        margin: 16px 8px;
    }
    
    .hubcal-calitem {
        margin: 8px 4px;
        padding: 12px;
    }

    /* En móvil, forzar diseño vertical */
    .hubcal-horizontal-layout {
        display: block !important;
        padding: 16px;
    }
}

/* Cuerpo del calendario - Diseño moderno y adaptativo */
.hubcal-body {
    display: block;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0;
    background: var(--hubcal-bg-light);
    border: 1px solid var(--hubcal-border-light);
    box-shadow: var(--hubcal-shadow-light);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Contenedores de horarios y login - Mejorados */
.hubcal-times, .hubcal-login {
    border-radius: 16px;
    border: 1px solid var(--hubcal-border-light);
    background: var(--hubcal-bg-light);
    box-shadow: var(--hubcal-shadow-light);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    margin: 12px 0;
    transition: all 0.3s ease;
}

/* Header de meses - Más elegante */
.hubcal-body .hubcal-months {
    position: relative;
    padding: 20px 16px 16px;
    margin: 0;
    text-align: center;
    background: linear-gradient(135deg, var(--hubcal-accent) 0%, var(--hubcal-accent-hover) 100%);
    color: white;
    font-weight: 600;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1; /* Base z-index para el header */
}

.hubcal-month {
    position: static;
    padding: 0;
    margin: 0;
    color: inherit;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Navegación de meses mejorada */
.hubcal-prev-month, .hubcal-next-month {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    z-index: 10; /* Z-index moderado pero suficiente */
}

.hubcal-prev-month {
    left: 16px;
}

.hubcal-next-month {
    right: 16px;
}

.hubcal-prev-month:hover, .hubcal-next-month:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.05);
}

.hubcal-prev-month i, .hubcal-next-month i {
    width: 16px;
    height: 16px;
    margin: 0;
    font-size: 16px;
}

/* Navegación deshabilitada */
.hubcal-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Contenedor interno mejorado */
.hubcal-body .hubcal-container {
    display: block;
    padding: 16px;
}

/* Header de días de semana - Más prominente */
.hubcal-body .hubcal-weekdays {
    text-align: center;
    overflow: hidden;
    border: none;
    margin-bottom: 12px;
    padding: 0 4px;
}

.hubcal-body .hubcal-weekdays-conatiner {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 8px 0;
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.08);
    border-radius: 8px;
    margin-bottom: 8px;
}

.hubcal-body span.hubcal-weekday {
    color: var(--hubcal-accent);
    cursor: default;
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
    text-align: center;
    padding: 4px 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* Contenedor de días - Grid moderno y responsivo */
.hubcal-body .hubcal-days-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 8px 4px;
    justify-items: center;
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.02);
    border-radius: 8px;
}

/* Días individuales - Diseño moderno y táctil */
.hubcal-body .hubcal-day {
    width: 42px;
    height: 42px;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    line-height: 42px;
    border: 1px solid transparent;
    text-align: center;
    color: var(--hubcal-text-light);
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

/* Estados de días interactivos */
.hubcal-body .hubcal-active, .hubcal-body .hubcal-today {
    cursor: pointer;
    border-color: var(--hubcal-border-light);
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.08);
    font-weight: 600;
}

/* Hover y estado activo mejorado */
.hubcal-body .hubcal-active:hover, .hubcal-body .hubcal-today:hover {
    background: var(--hubcal-accent);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(var(--main-color-rgb, 52, 152, 219), 0.3);
    z-index: 2;
    border-color: var(--hubcal-accent);
}

/* Día seleccionado */
.hubcal-body .hubcal-selected {
    background: var(--hubcal-accent) !important;
    color: white !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(var(--main-color-rgb, 52, 152, 219), 0.4);
    position: relative;
    overflow: hidden;
}

/* Animación de selección automática */
.hubcal-body .hubcal-selected::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    animation: hubcal-shimmer 1.5s ease-in-out;
}

@keyframes hubcal-shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    50% {
        transform: translateX(0%) translateY(0%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Días deshabilitados */
.hubcal-body .hubcal-disabled {
    opacity: 0.3;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Responsive para móviles - Días más grandes */
@media (max-width: 768px) {
    .hubcal-body .hubcal-days-container {
        gap: 2px;
        padding: 6px 2px;
    }
    
    .hubcal-body .hubcal-day {
        width: 38px;
        height: 38px;
        line-height: 38px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .hubcal-body .hubcal-day {
        width: 34px;
        height: 34px;
        line-height: 34px;
        font-size: 0.85rem;
    }
}

/* Sección de horarios - Diseño moderno y accesible */
.hubcal-times-det {
    text-align: center;
    padding: 20px 16px;
    background: var(--hubcal-bg-light);
    border-radius: 12px;
}

/* Fix para tema oscuro - Fondo transparente para horarios */
.hubcal-dark-bg .hubcal-times-det {
    background: rgba(255, 255, 255, 0.05);
}

/* Horarios individuales - Botones modernos */
.hubcal-time, .hubcal-timex {
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.08);
    border: 2px solid var(--hubcal-border-light);
    color: var(--hubcal-text-light);
    padding: 12px 8px;
    display: inline-block;
    min-width: 70px;
    margin: 6px 4px;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    letter-spacing: 0.3px;
}

.hubcal-time:hover, .hubcal-timex:hover {
    background: var(--hubcal-accent);
    border-color: var(--hubcal-accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--main-color-rgb, 52, 152, 219), 0.25);
}

/* Horario seleccionado */
.hubcal-selected-time {
    background: var(--hubcal-accent) !important;
    color: white !important;
    border-color: var(--hubcal-accent) !important;
    box-shadow: 0 2px 8px rgba(var(--main-color-rgb, 52, 152, 219), 0.4);
    font-weight: 700;
}

/* Steps del calendario - Navegación mejorada */
.hubcal-calstep {
    text-align: center;
    padding: 12px 8px 8px 8px; /* Reducido padding */
    margin-bottom: 16px; /* Reducido de 20px */
}

.hubcal-calstepdet {
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.08);
    border: 2px solid var(--hubcal-border-light);
    color: var(--hubcal-text-light);
    padding: 10px 8px; /* Reducido de 12px */
    display: inline-block;
    width: calc(25% - 6px); /* Reducido margen */
    min-width: 75px; /* Reducido de 80px */
    margin: 2px 3px; /* Reducido de 4px */
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.8rem; /* Reducido de 0.85rem */
    letter-spacing: 0.2px;
    line-height: 1.2;
    position: relative;
}

/* Step activo */
.hubcal-calstepactive {
    background: var(--hubcal-accent) !important;
    color: white !important;
    border-color: var(--hubcal-accent) !important;
    box-shadow: 0 2px 8px rgba(var(--main-color-rgb, 52, 152, 219), 0.3);
}

/* Estilos mejorados para modo oscuro */
.hubcal-dark-bg .hubcal-calstepdet,
[data-theme="dark"] .hubcal-calstepdet,
.dark-theme .hubcal-calstepdet {
    background: rgba(255, 255, 255, 0.12); /* Fondo más visible en oscuro */
    border: 2px solid rgba(255, 255, 255, 0.25); /* Borde más prominente */
    color: rgba(255, 255, 255, 0.95); /* Texto más brillante */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Sombra para profundidad */
}

.hubcal-dark-bg .hubcal-calstepdet:hover,
[data-theme="dark"] .hubcal-calstepdet:hover,
.dark-theme .hubcal-calstepdet:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--hubcal-accent);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--main-color-rgb, 52, 152, 219), 0.4);
    transform: translateY(-1px);
}

/* Step activo en modo oscuro - más realzado */
.hubcal-dark-bg .hubcal-calstepactive,
[data-theme="dark"] .hubcal-calstepactive,
.dark-theme .hubcal-calstepactive {
    background: var(--hubcal-accent) !important;
    color: white !important;
    border-color: var(--hubcal-accent) !important;
    box-shadow: 0 4px 16px rgba(var(--main-color-rgb, 52, 152, 219), 0.6) !important;
    font-weight: 700 !important;
}

/* Step deshabilitado en modo oscuro */
.hubcal-dark-bg .hubcal-calstepdisabled,
[data-theme="dark"] .hubcal-calstepdisabled,
.dark-theme .hubcal-calstepdisabled {
    opacity: 0.3;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Tooltips mejorados para steps */
.hubcal-calstepdet[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    margin-bottom: 6px;
    pointer-events: none;
}

.hubcal-calstepdet[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    margin-bottom: 1px;
}

.hubcal-calstepdet[data-tooltip]:hover::before,
.hubcal-calstepdet[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Iconos en steps más pequeños */
.hubcal-calstepdet i {
    margin-right: 3px;
    font-size: 0.85em;
}

/* Step deshabilitado */
.hubcal-calstepdisabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Animaciones de feedback para steps */
@keyframes hubcal-step-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes hubcal-step-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.hubcal-step-shake {
    animation: hubcal-step-shake 0.5s ease-in-out;
}

.hubcal-step-clicking {
    animation: hubcal-step-pulse 0.2s ease-in-out;
    transform-origin: center;
}

/* Mejoras para animaciones de selección de tiempo */
@keyframes hubcal-time-select {
    0% { transform: scale(1); background: var(--hubcal-accent); }
    50% { transform: scale(1.1); background: var(--hubcal-accent-hover, #2980b9); }
    100% { transform: scale(1.05); background: var(--hubcal-accent); }
}

.hubcal-time-selecting {
    animation: hubcal-time-select 0.6s ease-in-out;
    background: var(--hubcal-accent) !important;
    color: white !important;
    border-color: var(--hubcal-accent) !important;
    pointer-events: none;
}

/* Botones de acción - Diseño consistente */
.hubcal-calchangeend, .hubcal-calchangeend2 {
    color: white;
    background: var(--hubcal-accent);
    border: 2px solid var(--hubcal-accent);
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    max-width: 280px;
    padding: 14px 20px;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(var(--main-color-rgb, 52, 152, 219), 0.2);
}

.hubcal-calchangeend:hover, .hubcal-calchangeend2:hover {
    color: var(--hubcal-accent);
    border-color: var(--hubcal-accent);
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--main-color-rgb, 52, 152, 219), 0.3);
}

/* Mes sin disponibilidad - Mensaje mejorado */
.hubcal-emptymonth {
    display: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--hubcal-accent);
    text-align: center;
    cursor: pointer;
    padding: 20px 80px; /* Más espacio lateral para evitar botones */
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.05);
    border-radius: 8px;
    margin: 12px 16px; /* Margen lateral adicional */
    transition: all 0.2s ease;
    position: relative;
    z-index: 1; /* Z-index normal para el contenedor */
}

.hubcal-emptymonth:hover {
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.1);
}

.hubcal-emptymonth i {
    margin-left: 8px;
    font-size: 1rem;
}

/* Botón para siguiente mes en mensaje vacío */
.hubcal-empty-next-month {
    display: inline-block;
    background: var(--hubcal-accent);
    color: white !important;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    margin-top: 10px;
    position: relative;
    z-index: 50; /* Z-index medio - mayor que contenedor, menor que flechas navegación */
}

.hubcal-empty-next-month:hover {
    background: var(--hubcal-accent-hover);
    transform: translateY(-1px);
    z-index: 50; /* Mantener z-index en hover */
}

/* Contenido del mensaje vacío */
.hubcal-empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 20px; /* Espaciado interno adicional */
}

.hubcal-empty-icon {
    font-size: 1.2rem;
    margin-bottom: 5px;
    opacity: 0.8;
}

.hubcal-empty-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Estado activo mejorado para días */
.hubcal-active {
    border-radius: 10px !important;
    border: 2px solid var(--hubcal-accent) !important;
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.1) !important;
}

/* MEJORAS ADICIONALES PARA TEMAS Y RESPONSIVO */

/* Soporte para fondos oscuros */
.hubcal-dark-bg .hubcal-body,
.hubcal-dark-bg .hubcal-times, 
.hubcal-dark-bg .hubcal-login {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.hubcal-dark-bg .hubcal-body .hubcal-day {
    color: #ffffff !important;
}

/* Headers y títulos en fondo oscuro */
.hubcal-dark-bg .hubcal-times-header,
.hubcal-dark-bg .hubcal-times-title,
.hubcal-dark-bg h4,
.hubcal-dark-bg .hubcal-step-info {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Texto de selección de horarios más visible */
.hubcal-dark-bg .hubcal-times .fa-check {
    color: #00ff88 !important; /* Verde más brillante para el check */
}

.hubcal-dark-bg .hubcal-time, 
.hubcal-dark-bg .hubcal-timex {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important; /* Color blanco directo para máxima visibilidad */
    border-color: rgba(255, 255, 255, 0.3) !important;
    font-weight: 700 !important; /* Texto más grueso para mejor visibilidad */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Sombra para contraste */
}

.hubcal-dark-bg .hubcal-time:hover, 
.hubcal-dark-bg .hubcal-timex:hover {
    background: var(--hubcal-accent, #007bff) !important;
    color: white !important;
    border-color: var(--hubcal-accent, #007bff) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.6); /* Sombra más intensa */
    text-shadow: none; /* Remover sombra en hover */
}

.hubcal-dark-bg .hubcal-selected-time {
    background: var(--hubcal-accent, #007bff) !important;
    color: white !important;
    border-color: var(--hubcal-accent, #007bff) !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3); /* Anillo de selección */
    text-shadow: none;
}

/* Headers y títulos mejorados - Espaciado optimizado */
.hubcal-step-info {
    text-align: center;
    padding: 8px 8px 12px 8px; /* Reducido de 16px */
    margin-bottom: 16px; /* Reducido de 20px */
}

.hubcal-selected-info {
    color: var(--hubcal-accent);
    margin: 0 0 4px 0; /* Reducido margen inferior */
    font-size: 1.1rem; /* Reducido de 1.2rem */
    font-weight: 600;
    line-height: 1.2;
}

.hubcal-timezone-info {
    color: var(--hubcal-text-light);
    margin: 0;
    font-size: 0.85rem; /* Reducido de 0.9rem */
    font-weight: 400;
    opacity: 0.75; /* Reducido opacidad */
    line-height: 1.2;
}

.hubcal-dark-bg .hubcal-timezone-info {
    color: var(--hubcal-text-dark);
}

/* Títulos de secciones */
.hubcal-times-header {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid var(--hubcal-border-light);
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.03);
}

.hubcal-times-title {
    margin: 0;
    color: var(--hubcal-accent);
    font-size: 1.1rem;
    font-weight: 600;
}

.hubcal-login-header {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid var(--hubcal-border-light);
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.03);
}

.hubcal-login-title {
    margin: 0;
    color: var(--hubcal-accent);
    font-size: 1.1rem;
    font-weight: 600;
}

.hubcal-login-content {
    padding: 20px 16px !important;
}

/* Sección de confirmación mejorada */
.hubcal-done-content {
    text-align: center;
    padding: 30px 20px;
}

.hubcal-done-icon {
    margin-bottom: 16px;
}

.hubcal-done-icon i {
    font-size: 3rem;
    color: var(--hubcal-accent);
    opacity: 0.8;
}

.hubcal-done-title {
    color: var(--hubcal-accent);
    margin: 0 0 20px 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.hubcal-done-summary {
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.05);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    text-align: left;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.hubcal-done-summary p {
    margin: 8px 0;
    color: var(--hubcal-text-light);
}

.hubcal-dark-bg .hubcal-done-summary {
    background: rgba(255, 255, 255, 0.08);
}

.hubcal-dark-bg .hubcal-done-summary p {
    color: var(--hubcal-text-dark);
}

.hubcal-done-actions {
    text-align: center;
    margin-top: 25px;
}

/* Contenido de mes vacío mejorado */
.hubcal-empty-content {
    text-align: center;
    padding: 40px 20px;
}

.hubcal-empty-icon {
    font-size: 2.5rem;
    color: var(--hubcal-accent);
    opacity: 0.6;
    display: block;
    margin-bottom: 12px;
}

.hubcal-empty-text {
    color: var(--hubcal-text-light);
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 500;
}

.hubcal-dark-bg .hubcal-empty-text {
    color: var(--hubcal-text-dark);
}

.hubcal-empty-action {
    display: inline-block;
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.08);
    color: var(--hubcal-accent);
    padding: 10px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    font-weight: 500;
}

.hubcal-empty-action:hover {
    background: rgba(var(--main-color-rgb, 52, 152, 219), 0.15);
    transform: translateY(-1px);
}

.hubcal-empty-action i {
    margin-left: 6px;
}

/* Item de calendario con título mejorado */
.hubcal-calitem-title {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--hubcal-text-light);
    line-height: 1.4;
}

.hubcal-dark-bg .hubcal-calitem-title {
    color: var(--hubcal-text-dark);
}

.hubcal-status {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Formulario mejorado */
.hubcal-form {
    background: transparent;
}

/* Responsive mejorado para tablets */
@media (max-width: 992px) {
    .hubcal-calstepdet {
        width: calc(50% - 8px);
        margin: 4px;
    }
    
    .hubcal-times-header,
    .hubcal-login-header {
        padding: 12px;
    }
    
    .hubcal-done-content {
        padding: 25px 16px;
    }
}

/* Responsive para móviles pequeños */
@media (max-width: 480px) {
    .hubcal-hubbappointment {
        margin: 12px 4px;
    }
    
    .hubcal-body .hubcal-months {
        padding: 16px 12px 12px;
    }
    
    .hubcal-prev-month, .hubcal-next-month {
        padding: 6px 8px;
    }
    
    .hubcal-prev-month {
        left: 8px;
    }
    
    .hubcal-next-month {
        right: 8px;
    }
    
    .hubcal-calstepdet {
        width: calc(50% - 4px);
        margin: 2px;
        padding: 10px 6px;
        font-size: 0.8rem;
    }
    
    .hubcal-time, .hubcal-timex {
        min-width: 65px;
        margin: 4px 2px;
        padding: 10px 6px;
        font-size: 0.85rem;
    }
    
    .hubcal-done-icon i {
        font-size: 2.5rem;
    }
    
    .hubcal-done-title {
        font-size: 1.2rem;
    }
    
    .hubcal-empty-content {
        padding: 30px 16px;
    }
    
    .hubcal-empty-icon {
        font-size: 2rem;
    }
}

/* Mejoras de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus states para accesibilidad */
.hubcal-calstepdet:focus,
.hubcal-time:focus,
.hubcal-timex:focus,
.hubcal-calchangeend:focus,
.hubcal-day:focus {
    outline: 2px solid var(--hubcal-accent);
    outline-offset: 2px;
}

/* Estados de carga mejorados */
.hubcal-loading {
    position: relative;
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Spinner principal para botones */
.hubcal-loading-btn {
    position: relative;
    pointer-events: none;
}

.hubcal-loading-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: hubcal-spin-btn 0.8s linear infinite;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Spinner para contenedores grandes */
.hubcal-loading-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border: 3px solid var(--hubcal-accent);
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hubcal-spin-container 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform: translate(-50%, -50%);
    z-index: 100;
}

/* Spinner con pulso para estados críticos */
.hubcal-loading-pulse::after {
    animation: hubcal-spin-container 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite, 
               hubcal-pulse 1.5s ease-in-out infinite;
}

/* Spinner para horarios */
.hubcal-times-loading {
    position: relative;
    min-height: 120px;
}

.hubcal-times-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid var(--hubcal-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: hubcal-pulse-spin 1.5s ease-in-out infinite;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Animaciones de spinner mejoradas */
@keyframes hubcal-spin-btn {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes hubcal-spin-container {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% { 
        transform: translate(-50%, -50%) rotate(180deg) scale(0.8);
        opacity: 0.7;
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
        opacity: 1;
    }
}

@keyframes hubcal-pulse-spin {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% { 
        transform: translate(-50%, -50%) rotate(90deg) scale(1.1);
        opacity: 1;
    }
    50% { 
        transform: translate(-50%, -50%) rotate(180deg) scale(0.9);
        opacity: 0.6;
    }
    75% { 
        transform: translate(-50%, -50%) rotate(270deg) scale(1.1);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
        opacity: 0.8;
    }
}

@keyframes hubcal-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

/* Overlay de loading con blur */
.hubcal-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: inherit;
}

.hubcal-dark-bg .hubcal-loading-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* ==============================================
   FORMULARIO DE REGISTRO - DISEÑO MODERNO
   ============================================== */

/* Encabezado del formulario */
.hubcal-form-header {
    text-align: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--hubcal-border-light);
    margin-bottom: 16px;
}

.hubcal-dark-bg .hubcal-form-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.hubcal-form-title {
    color: var(--hubcal-text-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hubcal-form-subtitle {
    color: var(--hubcal-text-secondary);
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.8;
}

/* Contenedor del formulario */
.hubcal-form {
    max-width: 100%;
    padding: 0 16px;
}

/* Grupos de campos */
.hubcal-form-group {
    margin-bottom: 16px;
    position: relative;
}

.hubcal-form-group:last-child {
    margin-bottom: 0;
}

/* Etiquetas */
.hubcal-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hubcal-text-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.hubcal-dark-bg .hubcal-form-label {
    color: var(--hubcal-text-primary);
}

/* Inputs principales */
.hubcal-form-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--hubcal-border-light);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--hubcal-bg-white);
    color: var(--hubcal-text-primary);
    transition: all 0.3s ease;
    outline: none;
}

.hubcal-form-input:focus {
    border-color: var(--hubcal-accent, #007bff);
    box-shadow: 0 0 0 3px rgba(var(--main-color-rgb, 0, 123, 255), 0.1);
    background: var(--hubcal-bg-white);
}

.hubcal-form-input::placeholder {
    color: var(--hubcal-text-muted);
    opacity: 0.7;
}

/* Tema oscuro para inputs */
.hubcal-dark-bg .hubcal-form-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.hubcal-dark-bg .hubcal-form-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--hubcal-accent, #007bff);
    box-shadow: 0 0 0 3px rgba(var(--main-color-rgb, 0, 123, 255), 0.15);
}

.hubcal-dark-bg .hubcal-form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Select (código de país) */
.hubcal-form-select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--hubcal-border-light);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--hubcal-bg-white);
    color: var(--hubcal-text-primary);
    transition: all 0.3s ease;
    outline: none;
    cursor: pointer;
}

.hubcal-form-select:focus {
    border-color: var(--hubcal-accent, #007bff);
    box-shadow: 0 0 0 3px rgba(var(--main-color-rgb, 0, 123, 255), 0.1);
}

.hubcal-dark-bg .hubcal-form-select {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.hubcal-dark-bg .hubcal-form-select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--hubcal-accent, #007bff);
}

.hubcal-dark-bg .hubcal-form-select option {
    background: #2c2c2c;
    color: white;
}

/* Grupo de teléfono */
.hubcal-phone-group {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.hubcal-phone-code {
    flex: 0 0 120px;
    min-width: 120px;
}

.hubcal-phone-number {
    flex: 1;
}

/* Mensaje de ayuda */
.hubcal-form-help {
    font-size: 0.8rem;
    color: var(--hubcal-text-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
}

.hubcal-dark-bg .hubcal-form-help {
    color: rgba(255, 255, 255, 0.6);
}

/* Sugerencia de email */
.hubcal-form-suggestion {
    font-size: 0.8rem;
    color: var(--hubcal-text-muted);
    margin: 6px 0 0 0;
    min-height: 20px;
}

.hubcal-dark-bg .hubcal-form-suggestion {
    color: rgba(255, 255, 255, 0.6);
}

/* Checkbox personalizado */
.hubcal-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(var(--main-color-rgb, 0, 123, 255), 0.05);
    border: 1px solid rgba(var(--main-color-rgb, 0, 123, 255), 0.1);
    border-radius: 8px;
    margin: 8px 0;
}

.hubcal-dark-bg .hubcal-checkbox-group {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.hubcal-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--hubcal-accent, #007bff);
}

.hubcal-checkbox-label {
    flex: 1;
    font-size: 0.9rem;
    color: var(--hubcal-text-secondary);
    cursor: pointer;
    line-height: 1.4;
    margin: 0;
}

.hubcal-dark-bg .hubcal-checkbox-label {
    color: rgba(255, 255, 255, 0.8);
}

.hubcal-terms-link {
    color: var(--hubcal-accent, #007bff);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.hubcal-terms-link:hover {
    color: var(--hubcal-accent, #0056b3);
    text-decoration: underline;
}

.hubcal-dark-bg .hubcal-terms-link {
    color: #66b3ff;
}

.hubcal-dark-bg .hubcal-terms-link:hover {
    color: #99ccff;
}

/* reCAPTCHA container */
.hubcal-recaptcha {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}

/* Botón principal */
.hubcal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    position: relative;
    overflow: hidden;
}

.hubcal-btn-primary {
    background: var(--hubcal-accent, #007bff);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--main-color-rgb, 0, 123, 255), 0.3);
}

.hubcal-btn-primary:hover {
    background: var(--hubcal-accent-dark, #0056b3);
    box-shadow: 0 6px 20px rgba(var(--main-color-rgb, 0, 123, 255), 0.4);
    transform: translateY(-1px);
}

.hubcal-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--main-color-rgb, 0, 123, 255), 0.3);
}

.hubcal-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Grupo de submit centrado */
.hubcal-submit-group {
    text-align: center;
    padding-top: 8px;
}

.hubcal-submit-group .hubcal-btn {
    width: 100%;
    max-width: 280px;
}

/* Responsive design */
@media (max-width: 768px) {
    .hubcal-form {
        padding: 0 12px;
    }
    
    .hubcal-form-header {
        padding: 12px 0;
        margin-bottom: 16px;
    }
    
    .hubcal-form-title {
        font-size: 1.2rem;
    }
    
    .hubcal-phone-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .hubcal-phone-code {
        flex: none;
        min-width: auto;
    }
    
    .hubcal-form-group {
        margin-bottom: 14px;
    }
    
    .hubcal-submit-group .hubcal-btn {
        width: 100%;
        max-width: none;
    }
    
    .hubcal-checkbox-group {
        gap: 8px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .hubcal-form {
        padding: 0 10px;
    }
    
    .hubcal-form-input,
    .hubcal-form-select {
        padding: 10px 12px;
        font-size: 16px; /* Evitar zoom en iOS */
    }
    
    .hubcal-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
    
    .hubcal-checkbox-group {
        gap: 6px;
        padding: 8px;
    }
    
    .hubcal-checkbox {
        width: 16px;
        height: 16px;
        margin-top: 2px;
    }
    
    .hubcal-form-group {
        margin-bottom: 12px;
    }
}

/* ==============================================
   VISTA DE CONFIRMACIÓN DE CITA - DISEÑO MODERNO
   ============================================== */

/* Contenedor principal de confirmación */
.hubcal-confirm-container {
    padding: 2px;
    max-width: 100%;
}

/* Encabezado de confirmación */
.hubcal-confirm-header {
    text-align: center;
    margin-bottom: 24px;
}

.hubcal-confirm-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hubcal-accent, #007bff), var(--hubcal-accent-dark, #0056b3));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    box-shadow: 0 4px 12px rgba(var(--main-color-rgb, 0, 123, 255), 0.3);
}

.hubcal-confirm-icon i {
    font-size: 1.8rem;
    color: white;
}

.hubcal-confirm-title {
    color: var(--hubcal-text-light);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.hubcal-confirm-subtitle {
    color: var(--hubcal-text-light);
    font-size: 1rem;
    margin: 0;
    opacity: 0.8;
}

/* Estilos específicos para tema oscuro */
.dark-theme .hubcal-confirm-title,
.hubcal-dark-bg .hubcal-confirm-title,
[data-theme="dark"] .hubcal-confirm-title {
    color: var(--hubcal-text-dark) !important;
}

.dark-theme .hubcal-confirm-subtitle,
.hubcal-dark-bg .hubcal-confirm-subtitle,
[data-theme="dark"] .hubcal-confirm-subtitle {
    color: var(--hubcal-text-dark) !important;
    opacity: 0.9;
}

/* Sección de detalles */
.hubcal-confirm-details {
    background: var(--hubcal-bg-light);
    border: 1px solid var(--hubcal-border-light);
    border-radius: 12px;
    overflow: hidden;
}

.hubcal-dark-bg .hubcal-confirm-details {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Información de la cita */
.hubcal-confirm-info {
    padding: 20px;
    border-bottom: 1px solid var(--hubcal-border-light);
}

.hubcal-dark-bg .hubcal-confirm-info {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.hubcal-confirm-info-title {
    color: var(--hubcal-text-light);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

/* Estilos específicos para tema oscuro */
.dark-theme .hubcal-confirm-info-title,
.hubcal-dark-bg .hubcal-confirm-info-title,
[data-theme="dark"] .hubcal-confirm-info-title {
    color: var(--hubcal-text-dark) !important;
}

/* Resumen de la cita */
.hubcal-confirm-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hubcal-summary-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: rgba(var(--main-color-rgb, 0, 123, 255), 0.05);
    border-left: 3px solid var(--hubcal-accent, #007bff);
    border-radius: 6px;
}

.hubcal-dark-bg .hubcal-summary-item {
    background: rgba(255, 255, 255, 0.05);
}

.hubcal-summary-text {
    color: var(--hubcal-text-light);
    font-weight: 700; /* Más bold para mejor visibilidad */
    font-size: 1.1rem; /* Más grande para mejor legibilidad */
    min-height: 24px; /* Altura mínima ajustada */
    line-height: 1.4; /* Mejor espacio entre líneas */
    display: block; /* Asegurar que se muestre como bloque */
}

/* Estilos específicos para tema oscuro */
.dark-theme .hubcal-summary-text,
.hubcal-dark-bg .hubcal-summary-text,
[data-theme="dark"] .hubcal-summary-text {
    color: var(--hubcal-text-dark) !important;
}

/* Estado cuando tiene contenido válido */
.hubcal-summary-text:not(:empty) {
    color: var(--hubcal-accent, #007bff); /* Color de acento para datos válidos */
    background: rgba(var(--main-color-rgb, 0, 123, 255), 0.08);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(var(--main-color-rgb, 0, 123, 255), 0.2);
}

/* Placeholder cuando no hay contenido */
.hubcal-summary-text:empty::before {
    content: "No disponible";
    color: var(--hubcal-text-muted);
    font-style: italic;
    opacity: 0.6;
    font-weight: 400;
}

.hubcal-dark-bg .hubcal-summary-text:empty::before {
    color: rgba(255, 255, 255, 0.4);
}

/* Estados para datos faltantes */
.hubcal-missing-data .hubcal-missing-text {
    color: #dc3545; /* Rojo para errores */
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hubcal-missing-data .hubcal-missing-text i {
    font-size: 0.85rem;
}

/* Acciones de confirmación */
.hubcal-confirm-actions {
    padding: 20px;
    text-align: center;
}

.hubcal-confirm-message {
    color: var(--hubcal-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hubcal-dark-bg .hubcal-confirm-message {
    background: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

/* Botones de confirmación */
.hubcal-confirm-buttons {
    display: flex;
    justify-content: center;
}

.hubcal-btn-large {
    padding: 14px 32px;
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 200px;
}

.hubcal-btn-large:hover {
    transform: translateY(-2px);
}

/* Responsive para confirmación */
@media (max-width: 768px) {
    .hubcal-confirm-container {
        padding: 2px;
    }
    
    .hubcal-confirm-header {
        margin-bottom: 20px;
    }
    
    .hubcal-confirm-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 12px;
    }
    
    .hubcal-confirm-icon i {
        font-size: 1.5rem;
    }
    
    .hubcal-confirm-title {
        font-size: 1.3rem;
    }
    
    .hubcal-confirm-subtitle {
        font-size: 0.9rem;
    }
    
    .hubcal-confirm-info,
    .hubcal-confirm-actions {
        padding: 16px;
    }
    
    .hubcal-summary-item {
        padding: 8px 12px;
    }
    
    .hubcal-btn-large {
        width: 100%;
        min-width: auto;
        padding: 12px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hubcal-confirm-container {
        padding: 2px;
    }
    
    .hubcal-confirm-summary {
        gap: 8px;
    }
    
    .hubcal-summary-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px;
    }
    
    .hubcal-summary-item i {
        margin-right: 0 !important;
        margin-bottom: 4px;
    }
    
    .hubcal-confirm-message {
        flex-direction: column;
        gap: 6px;
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    .hubcal-confirm-message i {
        margin-right: 0 !important;
        margin-bottom: 4px;
    }
}