/* ==========================================================================
   ESTILOS ÉLITE - THUNDERSHOP AGENDAMIENTO (Azul Oscuro #0F172A y Dorado #FACC15)
   ========================================================================== */

/* 1. Contenedor Principal */
.ts-dashboard-section {
    font-family: 'Poppins', 'Montserrat', system-ui, -apple-system, sans-serif;
    margin: 20px 0;
}

/* 2. Encabezado Premium */
.ts-header-box {
    background: #0F172A !important;
    border-left: 5px solid #FACC15;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.15);
}

.ts-header-box button#btn-nuevo-servicio {
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(250, 204, 21, 0.2);
}

.ts-header-box button#btn-nuevo-servicio:hover {
    background: #E2B80F !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(250, 204, 21, 0.3);
}

.ts-header-box button#btn-nuevo-servicio:active {
    transform: translateY(0);
}

/* 3. Tabla de Datos */
/* 🔥 INSERCIÓN QUIRÚRGICA RESPONSIVA: Contenedor elástico para evitar recortes en pantallas medianas y móviles */
.ts-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Scroll suave y de alto rendimiento en dispositivos iOS/Android */
    margin-top: 15px;
}

.ts-table-container table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
}

.ts-table-container th {
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.ts-table-container td {
    font-size: 14px;
    vertical-align: middle;
}

/* 4. Inputs del Modal Flotante */
#ts-form-nuevo-servicio input,
#ts-form-nuevo-servicio select {
    outline: none;
    transition: all 0.2s ease-in-out;
}

#ts-form-nuevo-servicio input:focus,
#ts-form-nuevo-servicio select:focus {
    border-color: #0F172A !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1) !important;
}

#ts-form-nuevo-servicio button[type="submit"] {
    transition: all 0.3s ease;
}

#ts-form-nuevo-servicio button[type="submit"]:hover {
    background: #1E293B !important;
    letter-spacing: 0.5px;
}

#ts-form-nuevo-servicio button[type="submit"]:disabled {
    background: #94a3b8 !important;
    cursor: not-allowed;
}

/* 5. Transiciones y Animaciones (Efecto Wow) */
@keyframes tsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tsSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Clases de animación controladas por JS */
#ts-modal-servicio {
    animation: tsFadeIn 0.25s ease-out forwards;
}

#ts-modal-servicio > div {
    animation: tsSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}