/* ===================================================
   KAIRO INSIGHTS - PREMIUM MODERN UI
   =================================================== */

/* -------------------------
   FONDO GENERAL
------------------------- */

body {
    background:
        radial-gradient(circle at top left,
            rgba(123,63,242,.06),
            transparent 500px),
        radial-gradient(circle at bottom right,
            rgba(74,99,255,.06),
            transparent 500px),
        #F7F8FC !important;
}

/* -------------------------
   TARJETAS
------------------------- */

div.ui-widget-content {
    background: #FFFFFF !important;
    border: 1px solid #E6EAF2 !important;
    border-radius: 20px !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.04),
        0 10px 30px rgba(0,0,0,.04);

    transition: all .3s ease !important;
}

div.ui-widget-content:hover {
    transform: translateY(-6px);

    border-color: rgba(123,63,242,.35) !important;

    box-shadow:
        0 20px 40px rgba(0,0,0,.08),
        0 0 0 1px rgba(123,63,242,.12);
}

/* -------------------------
   ENCABEZADOS
------------------------- */

div.ui-widget-header {

    background: linear-gradient(
        135deg,
        #4A63FF,
        #7B3FF2
    ) !important;

    border: none !important;
    color: white !important;
}

/* -------------------------
   TITULOS
------------------------- */

#events h3,
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {

    color: #1B1F33 !important;
    font-weight: 700 !important;
    letter-spacing: -.3px;

    transition: .25s ease;
}

#events h3:hover {
    color: #7B3FF2 !important;
}

/* -------------------------
   DESCRIPCIONES
------------------------- */

#events p.description,
#events div.description,
#events p.duration,
#events div.duration {

    color: #667085 !important;
    line-height: 1.6;
}

/* -------------------------
   EVENTO SELECCIONADO
------------------------- */

#events .selectedEvent {

    background: #F5F1FF !important;

    border: 2px solid #7B3FF2 !important;

    border-radius: 16px !important;

    box-shadow:
        0 10px 25px rgba(123,63,242,.12);
}

/* -------------------------
   BOTON PRINCIPAL
------------------------- */

#events input.reserve_time_btn,
#eventForm #save_button {

    background: linear-gradient(
        135deg,
        #8A4DFF,
        #B05CFF
    ) !important;

    color: #FFFFFF !important;

    border: none !important;

    border-radius: 50px !important;

    font-weight: 700 !important;

    padding: 12px 28px !important;

    box-shadow:
        0 8px 25px rgba(123,63,242,.25);

    transition: all .25s ease !important;
}

#events input.reserve_time_btn:hover,
#eventForm #save_button:hover {

    transform: translateY(-3px);

    filter: brightness(1.08);

    box-shadow:
        0 15px 35px rgba(123,63,242,.35),
        0 0 25px rgba(123,63,242,.25);

    cursor: pointer;
}

/* -------------------------
   BOTON SECUNDARIO
------------------------- */

#events input.select_another_btn {

    background: white !important;

    border: 1px solid #D0D5DD !important;

    border-radius: 50px !important;

    color: #1B1F33 !important;

    transition: all .25s ease !important;
}

#events input.select_another_btn:hover {

    background: #F5F1FF !important;

    border-color: #7B3FF2 !important;

    color: #7B3FF2 !important;
}

/* -------------------------
   INPUTS
------------------------- */

input,
textarea,
select {

    border-radius: 12px !important;

    border: 1px solid #DCE2EE !important;

    transition: all .25s ease !important;
}

input:hover,
textarea:hover,
select:hover {

    border-color: #7B3FF2 !important;
}

input:focus,
textarea:focus,
select:focus {

    border-color: #7B3FF2 !important;

    box-shadow:
        0 0 0 4px rgba(123,63,242,.12) !important;

    outline: none !important;
}

/* -------------------------
   CALENDARIO
------------------------- */

#timeline-container table.timeline {

    border-radius: 16px !important;

    overflow: hidden;
}

/* -------------------------
   HORAS DISPONIBLES
------------------------- */

.timeline td.free_time {

    background: #FFFFFF !important;

    transition: all .2s ease !important;
}

.timeline td.free_time:hover {

    background: #F3EDFF !important;

    color: #7B3FF2 !important;

    transform: scale(1.08);

    box-shadow:
        0 4px 15px rgba(123,63,242,.20);

    cursor: pointer;
}

/* -------------------------
   HORA SELECCIONADA
------------------------- */

.timeline td.selected_time {

    background: linear-gradient(
        135deg,
        #4A63FF,
        #7B3FF2
    ) !important;

    color: white !important;

    font-weight: 700 !important;

    box-shadow:
        0 0 20px rgba(123,63,242,.25);
}

/* -------------------------
   RESERVADAS
------------------------- */

.timeline td.reserved_time {

    background: #ECEFF5 !important;

    color: #A0A8B8 !important;
}

/* -------------------------
   NO LABORALES
------------------------- */

.timeline td.not_worked_time {

    background: #F6F8FB !important;
}

/* -------------------------
   LINKS
------------------------- */

a {

    color: #7B3FF2 !important;

    transition: .2s ease;
}

a:hover {

    color: #4A63FF !important;

    text-decoration: none !important;
}

/* -------------------------
   FORMULARIOS
------------------------- */

#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label {

    color: #1B1F33 !important;

    font-weight: 600 !important;
}

/* -------------------------
   LOADER
------------------------- */

div#loading {

    background: rgba(255,255,255,.85) !important;

    backdrop-filter: blur(8px);
}

/* -------------------------
   SCROLLBAR
------------------------- */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #F5F7FA;
}

::-webkit-scrollbar-thumb {

    background: linear-gradient(
        #4A63FF,
        #7B3FF2
    );

    border-radius: 50px;
}

/* -------------------------
   ANIMACIONES GLOBALES
------------------------- */

* {

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}