/* public/css/spa-style.css */

:root {
    --nude-bg: #FFF9F5;
    --nude-dark: #F4EAE0;
    --rosa-pastel: #F1BABD;
    --dorado: #D4AF37;
    --dorado-hover: #B8962E;
    --texto-cafe: #5D4037;
    --blanco: #FFFFFF;
}

body {
    background-color: var(--nude-bg);
    font-family: 'Poppins', sans-serif;
    color: var(--texto-cafe);
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

/* Tarjeta de Login */
.login-card {
    border: none;
    border-radius: 20px;
    background-color: var(--blanco);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    overflow: hidden;
}

.login-header {
    background: linear-gradient(135deg, var(--rosa-pastel), var(--nude-dark));
    padding: 40px;
    text-align: center;
    border-bottom: 3px solid var(--dorado);
}

/* Inputs con estilo Nude */
.form-control {
    border-radius: 10px;
    border: 1px solid var(--nude-dark);
    padding: 12px;
    background-color: var(--nude-bg);
}

.form-control:focus {
    border-color: var(--rosa-pastel);
    box-shadow: 0 0 0 0.25 darkred; /* Sutil */
    box-shadow: 0 0 8px rgba(241, 186, 189, 0.5);
}

/* Botones Dorados */
.btn-gold {
    background-color: var(--dorado);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-gold:hover {
    background-color: var(--dorado-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.text-gold {
    color: var(--dorado) !important;
}

.bg-gold {
    background-color: var(--dorado);
    color: white;
}

/* Sidebar Estilo Nude */
.sidebar {
    min-width: 250px;
    max-width: 250px;
    background-color: var(--blanco);
    border-right: 1px solid var(--nude-dark);
    min-height: 100vh;
}

.sidebar .nav-link {
    color: var(--texto-cafe);
    padding: 15px 25px;
    font-weight: 500;
    transition: all 0.3s;
}

.sidebar .nav-link:hover, .sidebar .nav-link.active {
    background-color: var(--nude-bg);
    color: var(--dorado);
    border-left: 4px solid var(--dorado);
}

/* Tarjetas de Resumen */
.stat-card {
    border: none;
    border-radius: 15px;
    padding: 20px;
    background-color: var(--blanco);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background-color: var(--nude-bg);
    color: var(--dorado);
}

/* Avatar circular en el nav */
.avatar-circle {
    width: 32px;
    height: 32px;
    background-color: var(--rosa-pastel);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
}

.navbar .nav-link {
    color: var(--texto-cafe);
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    transition: 0.3s;
}

.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--dorado) !important;
}

.dropdown-item:active {
    background-color: var(--rosa-pastel);
}

/* Estructura del Layout */
.wrapper {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.sidebar {
    min-width: 280px;
    max-width: 280px;
    background: var(--blanco);
    border-right: 1px solid var(--nude-dark);
    display: flex;
    flex-direction: column;
}

.nav-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #bcaaa4;
    letter-spacing: 1.5px;
}

.sidebar .nav-link {
    padding: 12px 25px;
    color: var(--texto-cafe);
    font-size: 0.95rem;
    transition: all 0.3s;
    border-left: 4px solid transparent;
}

.sidebar .nav-link:hover {
    background-color: var(--nude-bg);
    color: var(--dorado);
}

.sidebar .nav-link.active {
    background-color: var(--nude-bg);
    color: var(--dorado);
    border-left: 4px solid var(--dorado);
    font-weight: 600;
}

.avatar-circle {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--rosa-pastel), var(--dorado));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.btn-outline-gold {
    color: var(--dorado);
    border: 1px solid var(--dorado);
    background-color: transparent;
    transition: 0.3s;
}

.btn-outline-gold:hover {
    background-color: var(--nude-bg);
    color: var(--dorado-hover);
    border-color: var(--dorado-hover);
}

/* Personalización FullCalendar */
.fc { max-width: 100%; background: white; padding: 20px; border-radius: 15px; }
.fc-toolbar-title { font-family: 'Playfair Display', serif; color: var(--texto-cafe); }
.fc-button-primary {
    background-color: var(--nude-dark) !important;
    border: none !important;
    color: var(--texto-cafe) !important;
    text-transform: capitalize !important;
}
.fc-button-active { background-color: var(--dorado) !important; color: white !important; }
.fc-event { cursor: pointer; padding: 2px 5px; border-radius: 5px; font-size: 0.85rem; transition: 0.3s; }
.fc-event:hover { transform: scale(1.02); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.fc-v-event { border-left: 4px solid var(--dorado) !important; } /* Línea vertical dorada en eventos */

/* ELIMINAR AZULES Y APLICAR ESTILO SPA */

/* 1. Fondo del encabezado de días (Lunes, Martes...) */
.fc .fc-col-header-cell {
    background-color: var(--nude-dark) !important;
    padding: 12px 0 !important;
}

.fc .fc-col-header-cell-cushion {
    color: var(--texto-cafe) !important;
    font-family: 'Playfair Display', serif;
    text-transform: capitalize;
    text-decoration: none !important;
}

/* 2. Estilo de las horas (columna izquierda) */
.fc .fc-timegrid-slot-label-cushion {
    color: var(--dorado) !important;
    font-size: 0.85rem;
    font-weight: 600;
}

/* 3. Hoy (Resaltado suave, no azul) */
.fc .fc-day-today {
    background-color: rgba(241, 186, 189, 0.1) !important; /* Rosa pastel muy tenue */
}

/* 4. Bordes del calendario */
.fc td, .fc th {
    border-color: #f2e8df !important;
}

/* 5. Botones del Calendario (Hoy, Semana, Día) */
.fc .fc-button-primary {
    background-color: var(--blanco) !important;
    border: 1px solid var(--nude-dark) !important;
    color: var(--texto-cafe) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.fc .fc-button-primary:hover {
    background-color: var(--nude-bg) !important;
    border-color: var(--dorado) !important;
}

.fc .fc-button-active {
    background-color: var(--dorado) !important;
    border-color: var(--dorado) !important;
    color: white !important;
}

/* 6. Título del mes/año */
.fc .fc-toolbar-title {
    font-family: 'Playfair Display', serif;
    color: var(--texto-cafe);
    font-size: 1.5rem !important;
}

/* 7. Línea de tiempo actual */
.fc .fc-timegrid-now-indicator-line {
    border-color: var(--dorado) !important;
}
.fc .fc-timegrid-now-indicator-arrow {
    border-color: var(--dorado) !important;
    background-color: var(--dorado) !important;
}

/* Resaltado del encabezado del día de hoy */
.fc .fc-col-header-cell.fc-day-today {
    background-color: var(--rosa-pastel) !important; /* Un fondo rosa suave para diferenciarlo */
    position: relative;
}

/* El texto del día de hoy en el encabezado */
.fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
    color: var(--blanco) !important; /* Texto blanco para que resalte sobre el rosa */
    font-weight: 700;
}

/* El cuerpo de la columna de hoy (debajo del encabezado) */
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
    background-color: rgba(241, 186, 189, 0.05) !important; /* Un velo casi invisible de rosa */
    /*border-left: 1px solid var(--rosa-pastel) !important;
    border-right: 1px solid var(--rosa-pastel) !important;*/
}

/* Indicador de número de día de hoy si aplica */
.fc .fc-day-today .fc-daygrid-day-number {
    background-color: var(--dorado);
    color: white;
    border-radius: 50%;
    padding: 2px 7px;
}





/* Forzar que los eventos ocupen casi todo el ancho aunque coincidan */
.fc-timegrid-event-harness {
    margin-right: 5px !important;
}

/* Cuando dos o más eventos chocan, les permitimos ser anchos */
.fc-timegrid-event {
    min-width: 90% !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid rgba(255,255,255,0.3) !important;
    transition: z-index 0.2s, transform 0.2s;
}

/* Efecto de 'apilado' elegante: el evento que tocas se viene al frente */
.fc-timegrid-event:hover {
    z-index: 99 !important;
    transform: scale(1.02);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* Ajuste del contenedor de texto para que no se corte */
.fc-event-main {
    padding: 4px !important;
    white-space: normal !important; /* Permite que el texto baje a la siguiente línea */
}

.fc-event-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Muestra hasta 2 líneas de texto */
    -webkit-box-orient: vertical;
}




.fc-timegrid-slot-label-cushion,
.fc-event-time {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
}

/****************************** FIN CALENDAR  ********************************/

/****************************** INICIO CITA  ********************************/
.bg-nude { background-color: rgb(212, 175, 55); border: 1px solid #e2d5c5; }

.bg-nude-div { background-color: #f8f1f1; }

.slots-grid:empty::after {
    content: 'No hay espacios disponibles';
    font-size: 0.8rem;
    color: #bbb;
    font-style: italic;
}
.time-slot {
    background: #fff;
    border: 1px solid #eee;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    text-align: center;
    min-width: 100px;
}
.time-slot:hover {
    border-color: var(--dorado);
    background: var(--nude-bg);
    transform: translateY(-2px);
}
.time-slot.selected {
    background: var(--dorado) !important;
    color: white !important;
    border-color: var(--dorado) !important;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}
.time-period-section { display: none; } /* Se muestran solo si tienen hijos */



/* Borde superior decorativo dorado */
.border-gold-top {
    border-top: 4px solid var(--dorado) !important;
}

/****************************** FIN CITA  ********************************/

.active-gold {
    background-color: var(--dorado) !important;
    color: white !important;
}
.bg-nude {
    background-color: #fcf8f5 !important;
}
.btn-outline-gold {
    color: var(--dorado);
    border-color: var(--dorado);
}
.btn-outline-gold:hover, .btn-outline-gold.active {
    background-color: var(--dorado);
    color: white;
}

/***************** MODAL *********************/
#paymentModal .btn-check:checked + .btn-outline-gold {
    background-color: var(--dorado);
    color: white;
    border-color: var(--dorado);
    box-shadow: 0 4px 8px rgba(212, 175, 55, 0.3);
}

#paymentModal .modal-content {
    background-image: linear-gradient(to bottom, #ffffff, #fdf8f5);
}

/****************************** RESPONSIVE MOBILE ********************************/

/* Media query para tablets y móviles (< 992px) */
@media (max-width: 991.98px) {
    /* Ocultar sidebar de escritorio */
    .sidebar {
        display: none !important;
    }

    /* Contenido ocupa todo el ancho en móvil */
    #content {
        width: 100% !important;
        padding: 0 !important;
    }

    /* Reducir padding interno en móvil */
    #content > .p-4 {
        padding: 1rem !important;
    }

    /* Ajustar navbar en móvil */
    .navbar {
        padding: 0.75rem 1rem !important;
    }

    /* Hacer tablas scrollables horizontalmente */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }

    table {
        min-width: 600px; /* Ancho mínimo para evitar que se comprima demasiado */
    }

    /* Tarjetas estadísticas en columna */
    .stat-card {
        margin-bottom: 1rem !important;
    }

    /* Reducir font size en títulos grandes */
    h2.font-playfair {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    /* Botones de grupo más compactos */
    .btn-group .btn {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Avatar más pequeño en móvil */
    .avatar-circle {
        width: 35px;
        height: 35px;
        font-size: 0.75rem;
    }

    /* Ocultar textos largos en móvil */
    .d-none.d-md-inline,
    .d-none.d-md-block {
        display: none !important;
    }

    /* Ajustar márgenes de cards */
    .card {
        margin-bottom: 1rem;
    }

    /* Reducir padding en modales */
    .modal-body {
        padding: 1rem !important;
    }

    /* Hacer badges más pequeños */
    .badge {
        font-size: 0.75rem !important;
        padding: 0.35em 0.65em !important;
    }

    /* Ajustar acordeones en móvil */
    .employee-card .card-header {
        padding: 0.75rem !important;
    }

    .employee-card h4 {
        font-size: 1.1rem !important;
    }
}

/* Media query para móviles pequeños (< 576px) */
@media (max-width: 575.98px) {
    /* Reducir aún más el padding */
    #content > .p-4 {
        padding: 0.5rem !important;
    }

    /* Navbar más compacto */
    .navbar {
        padding: 0.5rem !important;
    }

    /* Títulos aún más pequeños */
    h2.font-playfair {
        font-size: 1.25rem !important;
    }

    /* Botones de grupo en columna si es necesario */
    .btn-group {
        flex-wrap: wrap !important;
    }

    /* Cards sin sombra excesiva */
    .stat-card, .card {
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    /* Formularios más compactos */
    .form-control, .form-select {
        font-size: 0.9rem !important;
        padding: 0.5rem !important;
    }

    /* Reducir espaciado en listas */
    .list-group-item {
        padding: 0.75rem !important;
    }

    /* Iconos más pequeños */
    .icon-box {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

/* Asegurar que las tablas siempre tengan scroll horizontal en móvil */
@media (max-width: 991.98px) {
    .table-responsive table {
        display: table;
    }

    /* Hacer que los botones de acción en tablas sean más pequeños */
    table .btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    table .btn i {
        font-size: 0.85rem;
    }
}

/* Offcanvas personalizado para mantener el estilo SPA */
.offcanvas {
    background-color: var(--blanco);
}

.offcanvas-header {
    border-bottom: 1px solid var(--nude-dark);
}

.offcanvas .sidebar {
    display: flex !important; /* Mostrar sidebar dentro del offcanvas */
    border-right: none;
    min-width: 100%;
    max-width: 100%;
}