@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400;700&display=swap');

/* Aplicar la fuente a todo el sitio */
body {
    font-family: 'Rethink Sans', sans-serif !important;
    background-color: #f4f4f4;
    color: #333;
}

/* Títulos más llamativos */
#events h3, 
#eventForm #start_date-block-container h3, 
#eventForm #timeline-container h3 {
    font-family: 'Rethink Sans', sans-serif !important;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Estilo para los párrafos y descripciones */
#events p.duration, #events div.duration,
#events p.description, #events div.description,
.timeline td.not_worked_time, 
.timeline td.free_time, 
.timeline td.selected_time, 
.timeline td.reserved_time {
    font-family: 'Rethink Sans', sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}

/* 🟦 Botones modernos */
#events input.reserve_time_btn, 
#events input.select_another_btn, 
#eventForm #save_button,
.sb-button {
    font-family: 'Rethink Sans', sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 10px !important;
    padding: 12px 18px;
    background-color: #007bff;
    color: white;
    border: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
}

#events input.reserve_time_btn:hover, 
#events input.select_another_btn:hover, 
#eventForm #save_button:hover,
.sb-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* 🔘 Bordes redondeados y sombras en los eventos */
#events div {
    border-radius: 12px !important;
    padding: 20px;
    background-color: #fff;
    box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
}

#events div:hover {
    transform: translateY(-3px);
}

/* 🔘 Bordes redondeados para cuadros de descripción */
#events p.description, #events div.description {
    border-radius: 8px !important;
    padding: 12px;
    background-color: #f8f9fa;
}

/* 📅 Mejora en las tablas del timeline */
#timeline-container table.timeline, 
.timeline td {
    border-radius: 6px !important;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #ddd;
    transition: all 0.3s ease-in-out;
}

.timeline td:hover {
    background-color: #e9ecef;
    transform: scale(1.02);
}

/* ⏳ Estilo para la ventana de carga */
div#loading {
    border-radius: 15px !important;
    padding: 18px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-weight: 700;
    text-align: center;
}

/* Bordes redondeados en la interfaz general */
div.ui-widget-content, 
div.ui-widget-header {
    border-radius: 12px !important;
    padding: 12px;
    background-color: #ffffff;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.08);
}

/* ⚡ Eliminación del copyright original y nuevo diseño */
footer, .sb-footer, #footer {
    font-size: 14px;
    color: white !important;
    text-align: right;
    padding-right: 20px;
}

/* Ocultar el copyright original */
footer::before, .sb-footer::before, #footer::before {
    content: "" !important;
    display: none;
}

/* Agregar nuevo copyright en blanco, alineado a la derecha y sin negritas */
footer::after, .sb-footer::after, #footer::after {
    content: "© 2024 balancestudio.mx" !important;
    display: block;
    font-weight: normal;
    margin-top: 10px;
}

/* Etiquetas y títulos del formulario con mejor legibilidad */
#start_date-block-container .zend_form dt, 
#start_date-block-container .zend_form dt b, 
#start_date-block-container .zend_form dd label {
    font-family: 'Rethink Sans', sans-serif !important;
    font-weight: 400;
    color: #444;
}

/* 📱 Ajustes responsivos para pantallas pequeñas */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }

    #events div {
        padding: 15px;
    }

    .sb-button {
        padding: 10px 14px;
        font-size: 14px;
    }
}