/* 
Nombre del archivo: frontend-styles.css
Breve descripción: Estilos adicionales para el frontend (combinar con Tailwind CDN).
Versión actual del archivo: 1.0.28
Fecha de la última modificación: 21 de julio de 2025
Autor: Grok by xAI
*/

/* Estilos específicos del contenedor para evitar conflictos globales */
#fb-wrapper .weekly-view {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-left: auto;
    margin-right: auto; /* Centrar el conjunto de columnas */
    justify-content: center; /* Centrar adicionalmente el contenido del grid */
    gap: 0; /* Juntar columnas sin espacio */
}
#fb-wrapper .day-col {
    min-width: 205px; /* Aumentado 5px más ancho (anterior min-width implícito ~200px en mobile, pero general para todas) */
    border-color: transparent !important; /* Quitar color al borde */
    padding: 0.25rem; /* Padding reducido para acercar cajas a los bordes de la columna; ajusta este valor (ej. 0.5rem para más espacio) si necesitas modificar el espacio entre columna y cajas */
}
#fb-wrapper .box {
    background-color: #ffffff !important; /* Blanco forzando !important */
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
#fb-wrapper .box p {
    font-size: 12px !important; /* Ajustado a 12px como solicitado previamente */
    color: black !important; /* Color negro forzado, restaurado de cambios anteriores */
    word-break: break-word; /* Romper palabras largas */
    overflow-wrap: break-word; /* Wrap overflow texto */
    hyphens: auto; /* Hyphenation para mejor ajuste */
    text-align: justify; /* Justificar texto para fill caja */
    white-space: normal; /* Permitir breaks naturales */
    max-width: 100%; /* Limitar ancho a caja */
}
#fb-wrapper .past-time {
    background-color: #9ca3af !important; /* gray-400 */
    cursor: not-allowed;
}
#fb-wrapper .full-time {
    background-color: #fce7f3 !important; /* pink-200, rosa claro */
    cursor: not-allowed;
}
/* Estilos para modal */
#fb-modal {
    z-index: 1000;
}
#fb-modal .modal-inner {
    position: relative; /* Para posicionar el X */
}
#fb-modal #close-modal-x {
    position: absolute;
    top: -10px; /* Mover más arriba para que esté en la esquina superior */
    right: -10px; /* Ajustar a la derecha */
    background: white; /* Fondo blanco para visibilidad */
    border: 1px solid #ccc; /* Borde ligero */
    border-radius: 50%; /* Redondeado para mejor estética */
    font-size: 1.8rem; /* Aumentado un poco más grande (de 1.5rem a 1.8rem) */
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    line-height: 1;
}
#fb-modal #modal-content p:last-of-type {
    margin-bottom: 1rem; /* Espacio agradable entre el último p (Clases disponibles) y el botón, sin ser pegado */
}
#fb-modal hr {
    border-top: 1px solid #ccc; /* Línea división */
    margin: 8px 0;
}
#fb-modal #reserve-btn {
    margin: 0 auto; /* Centrar */
    width: 95%; /* Casi todo ancho */
    display: block;
    background-color: #000000; /* Cambiado a negro */
}
#fb-no-paq-modal .buttons {
    text-align: center; /* Centrar botones */
}
/* Para móvil: Scroll horizontal */
@media (max-width: 768px) {
    #fb-wrapper .weekly-view {
        overflow-x: auto; /* Suave en touch */
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap; /* Prevenir wrap de columnas */
        position: relative; /* Para posicionar flechas */
    }
    #fb-wrapper .day-col {
        min-width: 205px; /* Ajuste ancho también en mobile */
    }
    /* Flechas semitransparentes para indicar scroll (discretas) */
    #fb-wrapper .weekly-view::before {
        content: '←'; /* Flecha izquierda */
        position: fixed; /* Fija al viewport, siempre visible */
        left: 5px; /* Borde izquierdo pantalla */
        top: 55%; /* Bajo mitad, ajustado */
        transform: translateY(-50%);
        font-size: 2rem; /* Más grande */
        color: rgba(0, 0, 0, 0.8); /* Opacidad aumentada */
        background: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente */
        width: 40px; /* Tamaño fijo para círculo */
        height: 40px; /* Tamaño fijo para círculo */
        line-height: 40px; /* Centrar vertical */
        text-align: center; /* Centrar horizontal */
        border-radius: 50%; /* Círculo perfecto */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera para estética */
        pointer-events: none; /* No interferir con scroll/touch */
        z-index: 10; /* Por encima */
    }
    #fb-wrapper .weekly-view::after {
        content: '→'; /* Flecha derecha */
        position: fixed; /* Fija al viewport, siempre visible */
        right: 5px; /* Borde derecho pantalla */
        top: 55%; /* Bajo mitad, ajustado */
        transform: translateY(-50%);
        font-size: 2rem; /* Más grande */
        color: rgba(0, 0, 0, 0.8); /* Opacidad aumentada */
        background: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente */
        width: 40px; /* Tamaño fijo para círculo */
        height: 40px; /* Tamaño fijo para círculo */
        line-height: 40px; /* Centrar vertical */
        text-align: center; /* Centrar horizontal */
        border-radius: 50%; /* Círculo perfecto */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera para estética */
        pointer-events: none; /* No interferir con scroll/touch */
        z-index: 10; /* Por encima */
    }
}
/* Botones nav */
#fb-wrapper #prev-week, #fb-wrapper #next-week {
    font-size: calc(1rem - 3px); /* Reducido 1px adicional (anterior -2px, ahora -3px) */
    background-color: #000000; /* Cambiado a negro */
}
/* Botón next deshabilitado */
#fb-wrapper #next-week.disabled {
    background-color: #9ca3af; /* Gris cuando deshabilitado */
    cursor: not-allowed;
}
/* Estilos para loader full-screen del modal */
#fb-full-loader {
    z-index: 9999; /* Por encima de todo */
}
#fb-full-loader .loader {
    border: 4px solid #f3f3f3; /* Spinner simple */
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Agrega más si necesitas */