/* --- VARIABLES Y RESETEO --- */
:root {
    --bg-color: #f4f5f8;
    --card-bg: #ffffff;
    --primary-pink: #e84393;
    /* Ajustado al tono de tu imagen */
    --primary-pink-hover: #d81b60;
    --text-main: #2d3436;
    --text-muted: #a4b0be;
    --border-color: #dfe4ea;
    --font-main: 'Segoe UI', system-ui, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-main);
    -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-pink);
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* 🛡️ BLINDAJE ANTI-AUTOCOMPLETADO DEL NAVEGADOR */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--card-bg) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.view-container {
    display: none;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.view-container.active {
    display: flex;
}

.hidden {
    display: none !important;
}

/* --- ALERTAS PERSONALIZADAS --- */
#custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.custom-alert-box {
    background: var(--card-bg);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    min-width: 300px;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-alert-box p {
    margin-bottom: 20px;
    font-weight: 500;
}

@keyframes popIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- LOGIN VIEW (Idéntico a la captura) --- */
.login-card {
    background: var(--card-bg);
    padding: 50px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    width: 90%;
    max-width: 380px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-logo {
    width: 220px;
    height: auto;
    margin-bottom: 10px;
    object-fit: contain;
}

.divider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px 0 35px 0;
    width: 100%;
}

.divider-line {
    width: 40px;
    height: 1px;
    background-color: var(--primary-pink);
    margin-bottom: 10px;
}

.divider-text {
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* --- INPUTS Y BOTONES --- */
#login-form {
    width: 100%;
}

.custom-input-group {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}

.custom-input-group input {
    width: 100%;
    padding: 14px 45px 14px 16px;
    /* Espacio para el ícono */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    outline: none;
    transition: all 0.2s ease;
    background: var(--card-bg);
    color: var(--text-main);
    letter-spacing: 1px;
}

.custom-input-group input::placeholder {
    color: var(--text-muted);
}

.custom-input-group input:focus {
    border-color: var(--primary-pink);
}

.icon-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    color: var(--text-main);
}

/* Animación del SVG del Ojo */
.icon-btn svg {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-btn.pop-anim svg {
    transform: scale(0.6);
    /* Se encoge rápidamente al hacer click */
}



/* --- BOTONES PREMIUM (LIMPIOS, HOVER Y CLICK) --- */
.btn-primary {
    background: linear-gradient(180deg, #ff6b9d 0%, var(--primary-pink) 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow:
        0 4px 10px rgba(224, 64, 122, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        /* Brillo superior */
        inset 0 -3px 4px rgba(0, 0, 0, 0.15);
    /* Sombra interior */
    transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Efecto al pasar el ratón (se eleva un poco y brilla) */
.btn-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #ff8ab3 0%, var(--primary-pink-hover) 100%);
    box-shadow:
        0 6px 15px rgba(224, 64, 122, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -3px 4px rgba(0, 0, 0, 0.1);
}

/* Efecto al hacer clic (se hunde hacia adentro) */
.btn-primary:active {
    transform: translateY(1px) scale(0.95);
    box-shadow:
        0 2px 5px rgba(224, 64, 122, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

/* --- Variación Morada (Para "Nuevo Miembro") --- */
.btn-primary[style*="#a259ff"],
.btn-primary[style*="#6c5ce7"] {
    background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%) !important;
    box-shadow:
        0 4px 10px rgba(139, 92, 246, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -3px 4px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary[style*="#a259ff"]:hover,
.btn-primary[style*="#6c5ce7"]:hover {
    background: linear-gradient(180deg, #c4b5fd 0%, #7c3aed 100%) !important;
    box-shadow:
        0 6px 15px rgba(139, 92, 246, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -3px 4px rgba(0, 0, 0, 0.1) !important;
}

.btn-primary[style*="#a259ff"]:active,
.btn-primary[style*="#6c5ce7"]:active {
    box-shadow:
        0 2px 5px rgba(139, 92, 246, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1) !important;
}



/* Botón flotante tema oscuro */
.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--card-bg);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.theme-toggle:hover {
    transform: scale(1.05);
}

.reset-link {
    margin-top: 20px;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.reset-link:hover {
    color: var(--primary-pink);
}

/* --- ESTRUCTURA APP VIEW --- */
#app-view {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
}

/* --- SIDEBAR --- */
.sidebar {
    width: 250px;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    flex-shrink: 0;
}

.sidebar-header {
    padding: 20px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-logo {
    width: 120px;
    object-fit: contain;
}

.icon-btn-small {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-muted);
}

.user-profile {
    text-align: center;
    padding: 15px;
    margin: 0 15px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.user-profile h3 {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.role-badge {
    font-size: 0.65rem;
    color: var(--primary-pink);
    letter-spacing: 1px;
    font-weight: 600;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px;
}

.nav-section {
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin: 20px 0 10px 10px;
    font-weight: 600;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.85rem;
    border-radius: 8px;
    margin-bottom: 5px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-item:hover {
    background: var(--bg-color);
}

.nav-item.active {
    background: #fdf0f5;
    color: var(--primary-pink);
    font-weight: 600;
}

.nav-icon {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    stroke: currentColor;
}

.sidebar-footer {
    padding: 15px;
    border-top: 1px solid var(--border-color);
}

/* --- MAIN CONTENT --- */
.main-content {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
    background: var(--bg-color);
}

/* --- VISTAS DEL DASHBOARD --- */
.page-view {
    display: none;
    animation: fadeIn 0.3s ease;
}

.page-view.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-header {
    margin-bottom: 25px;
}

.page-header h2 {
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--text-main);
}

.text-pink {
    color: var(--primary-pink);
    font-weight: 700;
}



/* --- FORMULARIOS --- */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 25px;
    width: 100%;
}

.form-group.half {
    width: 50%;
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.pink-label {
    color: var(--primary-pink) !important;
}

.custom-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    background: var(--card-bg);
    color: var(--text-main);
    transition: border-color 0.2s;
}

.custom-input:focus {
    border-color: var(--primary-pink);
}

.text-center {
    text-align: center;
}

.text-lg {
    font-size: 1.1rem;
    font-weight: 600;
}

.custom-select-wrapper {
    position: relative;
}

.custom-select-wrapper::after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--text-muted);
    pointer-events: none;
}

select.custom-input {
    appearance: none;
    cursor: pointer;
}



/* --- MI PAGO LAYOUT --- */
.subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 5px;
}

.mi-pago-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    margin-top: 20px;
}

.card-top-border {
    height: 4px;
    background: #2ecc71;
    width: 100%;
}

.card-content {
    padding: 30px;
}

.pago-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.section-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}

.pago-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.badge-group {
    display: flex;
    gap: 10px;
}

.badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-main);
    background: var(--bg-color);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.btn-outline-purple {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f4f0ff;
    color: #7b61ff;
    border: 1px solid #e9e2ff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

.btn-outline-purple:hover {
    background: #e9e2ff;
}

.stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.stat-box {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 25px 20px;
    text-align: center;
}

.stat-box label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    margin-top: 10px;
}

.text-dark {
    color: var(--text-main);
}

.text-orange {
    color: #f39c12;
}

.highlight-green {
    background: #eafaf1;
    border-color: #d5f5e3;
}

.text-green {
    color: #27ae60;
}

.pago-footer-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
    margin-top: 20px;
    padding-top: 35px;
}

.pago-footer-msg svg {
    margin-bottom: 15px;
    width: 45px;
    height: 45px;
    opacity: 0.5;
}

.pago-footer-msg p {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- AGENDA HEADER & FILTERS --- */
.agenda-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-sm {
    padding: 10px 20px;
    font-size: 0.85rem;
    width: auto;
    margin-top: 0;
}

.btn-outline {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-main);
}

.icon-btn-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-main);
}

.agenda-filters {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
    align-items: center;
}

.pill-group {
    display: flex;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    overflow: hidden;
    padding: 4px;
}

.pill {
    background: transparent;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.pill.active {
    background: var(--primary-pink);
    color: white;
}

/* --- DROPDOWN PERSONALIZADO --- */
.custom-dropdown {
    position: relative;
    width: 250px;
    user-select: none;
}

.dropdown-selected {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    color: var(--text-main);
    align-items: center;
}

.dropdown-selected span {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.dropdown-options {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: none;
    z-index: 100;
    overflow: hidden;
}

.custom-dropdown.open .dropdown-options {
    display: block;
    animation: fadeIn 0.2s;
}

.dropdown-item {
    padding: 12px 20px;
    font-size: 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: var(--bg-color);
    color: var(--primary-pink);
}

/* --- GRID DE CITAS --- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding-bottom: 30px;
}

.cita-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid var(--primary-pink);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.cita-card.card-purple {
    border-left-color: #9b59b6;
}

.cita-card.card-blue {
    border-left-color: #3498db;
}

.cita-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cita-time {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.text-purple {
    color: #9b59b6;
}

.text-blue {
    color: #3498db;
}

.icon-btn-dots {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-muted);
}

.cita-client {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.cita-service {
    font-size: 0.85rem;
    color: var(--text-main);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cita-specialist {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot-yellow {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f1c40f;
    display: inline-block;
}

.dot-purple {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9b59b6;
    display: inline-block;
}

.dot-blue {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3498db;
    display: inline-block;
}

.btn-outline-full {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 1px;
}

.btn-outline-full:hover {
    background: var(--bg-color);
    border-color: var(--text-muted);
}



/* --- MODALES PERSONALIZADOS --- */
#modal-agendar-overlay,
#modal-config-fisica-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

.custom-modal-box {
    background: var(--card-bg);
    width: 90%;
    max-width: 450px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header-custom {
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.modal-icon-bg {
    background: var(--primary-pink);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.modal-title-group h3 {
    font-size: 1.1rem;
    color: var(--text-main);
}

.modal-title-group p {
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    font-weight: 600;
    margin-top: 3px;
}

.icon-btn-gray {
    background: #f0f0f0;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: bold;
}

.icon-btn-gray:hover {
    background: #e0e0e0;
    color: var(--text-main);
}

.modal-body {
    padding: 25px;
    overflow-y: auto;
}

.modal-footer {
    padding: 20px 25px;
    border-top: 1px solid var(--border-color);
}

.w-100 {
    width: 100% !important;
}

/* SERVICIOS PILLS */
.service-pills {
    display: flex;
    gap: 10px;
}

.service-pill {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.service-pill.active {
    border-color: var(--primary-pink);
    color: var(--primary-pink);
    background: #fdf0f5;
}

/* SLIDER PERSONALIZADO Y ALINEACIÓN PERFECTA 1:1 */
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.slider-value {
    font-size: 1.2rem;
    font-weight: 700;
}

.custom-slider-container {
    position: relative;
    margin-bottom: 25px;
    user-select: none;
    padding: 0 12px;
    /* Margen para que los textos de los bordes no se corten */
}

.slider-track {
    width: 100%;
    height: 6px;
    background: #e4e6ef;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

.slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--primary-pink);
    border-radius: 3px;
    pointer-events: none;
}

.slider-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 3px solid var(--primary-pink);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: grab;
    z-index: 2;
    transition: transform 0.1s;
}

.slider-thumb:active {
    transform: translate(-50%, -50%) scale(1.15);
    cursor: grabbing;
}

/* Posicionamiento Absoluto para cuadrar exacto con los porcentajes (100% / 7) */
.slider-labels {
    position: relative;
    height: 20px;
    margin-top: 15px;
}

.slider-labels span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-muted);
}

.slider-labels span:nth-child(1) {
    left: 0%;
}

.slider-labels span:nth-child(2) {
    left: 14.28%;
}

.slider-labels span:nth-child(3) {
    left: 28.57%;
}

.slider-labels span:nth-child(4) {
    left: 42.85%;
}

.slider-labels span:nth-child(5) {
    left: 57.14%;
}

.slider-labels span:nth-child(6) {
    left: 71.42%;
}

.slider-labels span:nth-child(7) {
    left: 85.71%;
}

.slider-labels span:nth-child(8) {
    left: 100%;
}

/* MAPA PLACEHOLDER */
.text-purple-label {
    color: #9b59b6 !important;
}

.map-placeholder {
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
}

.map-placeholder svg {
    margin-bottom: 10px;
    opacity: 0.6;
}

.map-placeholder p {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

/* --- MODAL CALENDARIO --- */
#modal-calendario-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.calendar-modal-box {
    background: var(--card-bg);
    width: 95%;
    max-width: 1200px;
    height: 90vh;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popIn 0.3s ease;
}

.calendar-header-top {
    padding: 15px 25px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-title-group {
    display: flex;
    align-items: center;
}

.calendar-title-group h3 {
    font-weight: 400;
    font-size: 1.2rem;
}

.calendar-title-group strong {
    color: var(--primary-pink);
}

.calendar-controls {
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.nav-arrows {
    display: flex;
    gap: 5px;
}

.btn-sm-box {
    padding: 5px 12px;
    height: 32px;
    font-size: 0.8rem;
}

.calendar-current-date {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
}

/* GRID DEL CALENDARIO (POR COLUMNAS) */
.calendar-grid-container {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    padding: 15px 15px 15px 15px;
    background: var(--bg-color);
}

/* --- ESTRUCTURA BASE DEL CALENDARIO --- */
.calendar-grid {
    min-width: 700px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
}

.cal-row {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    height: 90px;
    min-height: 90px;
}

.cal-row:last-child {
    border-bottom: none;
}

/* --- CABECERAS GENERALES --- */
.cal-header-row {
    min-height: 65px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 5;
}

.cal-time-col {
    width: 65px;
    border-right: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cal-col-header {
    flex: 1;
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.cal-col-header:last-child {
    border-right: none;
}

/* --- CELDAS (HUECOS DE LA AGENDA) --- */
.cal-cell {
    flex: 1;
    border-right: 1px solid var(--border-color);
    padding: 5px;
    position: relative;
    transition: background 0.2s;
}

.cal-cell:last-child {
    border-right: none;
}

.cal-cell.empty-cell {
    cursor: pointer;
}

.add-btn-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-pink);
    background: rgba(255, 71, 133, 0.04);
    opacity: 0;
    transition: all 0.2s;
}

.cal-cell.empty-cell:hover .add-btn-hover {
    opacity: 1;
    transform: scale(0.98);
    border-radius: 8px;
}

/* ========================================= */
/* VISTA SEMANA: PÍLDORA ORIGINAL INTACTA    */
/* ========================================= */
.header-name-pill {
    background: var(--bg-color);
    color: var(--text-main);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
}

.header-name-pill strong {
    color: var(--primary-pink);
    font-weight: 800;
    font-size: 0.95rem;
    margin-left: 4px;
}

.cal-col-header:hover .header-name-pill {
    background: #fdf0f5;
    color: var(--primary-pink);
    border-color: #fadbd8;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 71, 133, 0.15);
}

/* ========================================= */
/* VISTA DÍA: NOMBRES FLOTANTES (FUERA)      */
/* ========================================= */
.calendar-grid.day-view {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* La caja interior asume el rol del calendario en la vista diaria */
.calendar-grid.day-view .cal-body-box {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* La cabecera se vuelve invisible para que el texto flote */
.calendar-grid.day-view .cal-header-row {
    background: transparent !important;
    border-bottom: none !important;
    height: auto !important;
    /* Mata los 90px heredados de .cal-row */
    min-height: 20px !important;
    margin-bottom: 5px !important;
}

.calendar-grid.day-view .cal-header-row .cal-time-col,
.calendar-grid.day-view .cal-header-row .cal-col-header {
    border-right: none !important;
    background: transparent !important;
}

.calendar-grid.day-view .cal-col-header {
    align-items: flex-end;
    padding-bottom: 5px;
}

/* Estilo del texto y LED flotante */
.manicurista-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: default;
}

.manicurista-name::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-color);
    transition: all 0.3s ease;
}

/* ✨ MAGIA HOVER EN VISTA DÍA (Se ilumina el nombre al tocar la columna abajo) ✨ */
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(2):hover) .cal-header-row>*:nth-child(2) .manicurista-name,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(3):hover) .cal-header-row>*:nth-child(3) .manicurista-name,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(4):hover) .cal-header-row>*:nth-child(4) .manicurista-name,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(5):hover) .cal-header-row>*:nth-child(5) .manicurista-name,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(6):hover) .cal-header-row>*:nth-child(6) .manicurista-name,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(7):hover) .cal-header-row>*:nth-child(7) .manicurista-name,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(8):hover) .cal-header-row>*:nth-child(8) .manicurista-name,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(9):hover) .cal-header-row>*:nth-child(9) .manicurista-name,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(10):hover) .cal-header-row>*:nth-child(10) .manicurista-name {
    color: var(--primary-pink);
    transform: translateY(-3px);
}

.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(2):hover) .cal-header-row>*:nth-child(2) .manicurista-name::before,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(3):hover) .cal-header-row>*:nth-child(3) .manicurista-name::before,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(4):hover) .cal-header-row>*:nth-child(4) .manicurista-name::before,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(5):hover) .cal-header-row>*:nth-child(5) .manicurista-name::before,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(6):hover) .cal-header-row>*:nth-child(6) .manicurista-name::before,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(7):hover) .cal-header-row>*:nth-child(7) .manicurista-name::before,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(8):hover) .cal-header-row>*:nth-child(8) .manicurista-name::before,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(9):hover) .cal-header-row>*:nth-child(9) .manicurista-name::before,
.calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(10):hover) .cal-header-row>*:nth-child(10) .manicurista-name::before {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}

/* ========================================= */
/* MODO OSCURO (GLOBAL)                      */
/* ========================================= */
body.dark-theme .cal-header-row {
    background: #181924;
}

body.dark-theme .header-name-pill {
    background: #12131c;
    border-color: #2a2b3d;
    color: #e2e8f0;
}

body.dark-theme .cal-col-header:hover .header-name-pill {
    background: rgba(255, 71, 133, 0.1);
    border-color: rgba(255, 71, 133, 0.3);
    color: #fff;
}

/* Modo Oscuro específico para Vista Día */
body.dark-theme .calendar-grid.day-view .cal-body-box {
    border-color: #2a2b3d;
    background: #181924;
}

body.dark-theme .calendar-grid.day-view .cal-header-row {
    background: transparent !important;
}

body.dark-theme .manicurista-name {
    color: #8b8d9b;
}

body.dark-theme .manicurista-name::before {
    background: #3b3d54;
}

body.dark-theme .calendar-grid.day-view:has(.cal-body-box .cal-row > *:nth-child(n+2):hover) .cal-header-row>* .manicurista-name {
    color: #fff;
}

/* EVENTOS */
.cal-event {
    padding: 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.evt-time {
    font-weight: 700;
    font-size: 0.65rem;
}

.evt-service {
    font-size: 0.65rem;
    opacity: 0.8;
}

.event-yellow {
    background: #fcf3d9;
    border-left: 3px solid #f1c40f;
    color: #8a7306;
}

.event-yellow .evt-time {
    color: #d4ac0d;
}

.event-blue {
    background: #e0f2fce6;
    border-left: 3px solid #3498db;
    color: #1e628f;
}

.event-blue .evt-time {
    color: #2980b9;
}

.event-purple {
    background: #f3e5f5;
    border-left: 3px solid #9b59b6;
    color: #613175;
}

.event-purple .evt-time {
    color: #8e44ad;
}

/* LÍNEA DE HORA ACTUAL */
.current-time-line {
    position: absolute;
    left: 60px;
    right: 0;
    height: 1px;
    background: red;
    z-index: 10;
    pointer-events: none;
}

.current-time-line::before {
    content: "▶";
    position: absolute;
    left: -8px;
    top: -7px;
    color: red;
    font-size: 0.7rem;
}



/* --- MEJORAS TIPOGRÁFICAS Y ANIMACIONES DEL SIDEBAR --- */
.nav-section {
    font-size: 0.65rem;
    color: #8b5cf6;
    /* Un morado vibrante en lugar del rosado para dar contraste */
    letter-spacing: 2px;
    margin: 25px 0 10px 10px;
    font-weight: 800;
}

.nav-item {
    color: #3f4254;
    /* Tono grafito moderno y muy legible */
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

body.dark-theme .nav-item {
    color: #a1a5b7;
}

/* Efecto Hover: Slide de luz rosa desde la izquierda */
.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(255, 71, 133, 0.08) 0%, transparent 100%);
    z-index: -1;
    transition: width 0.4s ease;
}

/* Efecto Hover dinámico controlado por JS */
.nav-item.force-hover {
    color: var(--primary-pink);
    transform: translateX(6px);
}

.nav-item.force-hover::before {
    width: 100%;
}

.nav-item.active {
    color: var(--primary-pink);
    background: rgba(255, 71, 133, 0.06);
    border-left: 3px solid var(--primary-pink);
    border-radius: 0 10px 10px 0;
}

body.dark-theme .nav-item.force-hover {
    color: #ffffff;
}

/* --- ANIMACIONES DE LOS ÍCONOS SUPERIORES --- */
#theme-btn-sidebar {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s;
}

#theme-btn-sidebar.force-hover {
    transform: rotate(-25deg) scale(1.15);
    color: #8b5cf6;
}

/* También incluimos el botón de tema principal del Login */
.theme-toggle.force-hover {
    transform: scale(1.05);
}

@keyframes ringBell {
    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(20deg);
    }

    30% {
        transform: rotate(-15deg);
    }

    50% {
        transform: rotate(10deg);
    }

    70% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0);
    }
}

#btn-notificaciones {
    transition: transform 0.2s, color 0.3s;
    transform-origin: top center;
    /* Gira anclado desde arriba, como campana real */
}


#btn-notificaciones:hover {
    color: var(--primary-pink);
    /* Mantiene el color rosa al estar encima */
}

/* Clase independiente para forzar la animación completa */
.ring-anim {
    animation: ringBell 0.6s ease-in-out;
}


/* Rebote de la campana al hacer clic */
.bell-click-anim {
    animation: bellPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes bellPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.6);
    }

    100% {
        transform: scale(1);
    }
}

/* --- DROPDOWN DE NOTIFICACIONES --- */

/* Elevamos la barra lateral para que las notificaciones no se queden detrás del contenido */
.sidebar {
    z-index: 8999;
    position: relative;
}

/* --- DROPDOWN DE NOTIFICACIONES --- */
.notificaciones-dropdown {
    position: absolute;
    top: 45px !important;
    /* Lo bajamos un poquito para que respire del botón */
    left: -10px !important;
    /* EN PC: Se ancla a la izquierda y sale hacia la derecha */
    right: auto !important;
    width: 320px !important;
    /* Más ancho y elegante */
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--border-color);
    z-index: 999999 !important;
    /* EL FIX: Siempre por encima de cualquier objeto */
    overflow: hidden;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Matamos las reglas en línea del HTML que atrapaban la campana */
.sidebar-header>div,
.mobile-header>div {
    z-index: 999999 !important;
}

.notif-header {
    padding: 12px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary-pink);
    background: #fdf0f5;
    letter-spacing: 0.5px;
}

body.dark-theme .notif-header {
    background: #222436;
}

.notif-body {
    padding: 35px 15px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.notif-body svg {
    color: #2ecc71;
    opacity: 0.9;
}

.notif-body p {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.notif-header {
    padding: 12px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary-pink);
    background: #fdf0f5;
    letter-spacing: 0.5px;
    text-align: left;
}

body.dark-theme .notif-header {
    background: #222436;
}

.notif-body {
    padding: 35px 15px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.notif-body svg {
    color: #2ecc71;
    /* Check verde de "todo bien" */
    opacity: 0.9;
}

.notif-body p {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

/* ========================================= */
/* BOTONES DE ACCIÓN PRO (FABs - AGENDA)     */
/* ========================================= */
.floating-actions-mobile {
    display: flex;
    gap: 12px;
    align-items: center;
}

.floating-actions-mobile {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pro-fab-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    position: relative;
    z-index: 100;
    /* Transición suave para colores y resortes */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Colores Base (Estado Normal) */
.fab-purple {
    background: #f4eaff;
    color: #8e44ad;
    border: 1px solid #ebd9ff;
}

.fab-outline {
    background: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.fab-pink {
    background: linear-gradient(135deg, #ff6b9d 0%, var(--primary-pink) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 71, 133, 0.25);
}

/* =============================================== */
/* EL CLIC FÍSICO: Aplica para Móviles y Escritorio */
/* =============================================== */
.pro-fab-btn:active,
.pro-fab-btn.is-pressed {
    transform: scale(0.85) translateY(2px) !important;
    transition: transform 0.05s ease !important;
    /* Se hunde al instante */
}

/* =============================================== */
/* HOVER SEGURO: SOLO funciona si tienes un Ratón  */
/* =============================================== */
@media (hover: hover) and (pointer: fine) {
    .pro-fab-btn:hover {
        transform: translateY(-2px) scale(1.03);
    }

    .fab-purple:hover {
        background: #8e44ad;
        color: #fff;
        box-shadow: 0 8px 20px rgba(142, 68, 173, 0.3);
    }

    .fab-outline:hover {
        border-color: var(--text-main);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .fab-pink:hover {
        box-shadow: 0 8px 25px rgba(255, 71, 133, 0.4);
    }
}

/* Adaptación a Modo Oscuro */
body.dark-theme .fab-outline {
    background: #222436;
    color: #e2e8f0;
    border-color: #3b3d54;
}

body.dark-theme .fab-outline:hover {
    border-color: #e2e8f0;
}

body.dark-theme .fab-purple {
    background: #2a1f3d;
    color: #b39ddb;
    border-color: #3b2d54;
}

body.dark-theme .fab-purple:hover {
    background: #8e44ad;
    color: #fff;
}

/* ================================================= */
/* 📱 AGENDA MÓVIL (DISEÑO NATIVO APP Y FULL FEATURES) */
/* ================================================= */
@media (max-width: 900px) {

    /* 1. LAYOUT PRINCIPAL Y BARRA SUPERIOR RESTAURADA */
    #app-view {
        flex-direction: column !important;
        overflow: hidden !important;
        height: 100vh !important;
        display: flex !important;
        width: 100vw !important;
    }

    .mobile-header {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 8999 !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
        background: var(--card-bg) !important;
        border-bottom: 1px solid var(--border-color) !important;
        width: 100% !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .mobile-header>* {
        z-index: 2;
        flex-shrink: 0;
    }

    .mobile-header img {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        height: 22px !important;
        z-index: 1;
    }

    .main-content {
        padding: 0 !important;
        height: calc(100vh - 55px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex: 1 !important;
    }

    #view-agenda {
        flex: 1 !important;
        display: none;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #view-agenda.active {
        display: flex !important;
    }

    /* 2. CABECERA DE AGENDA: TÍTULO CENTRADO Y BOTÓN MUEBLES DERECHA */
    #view-agenda .agenda-header {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 15px 20px !important;
        background: transparent !important;
        border: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 70px !important;
        flex-shrink: 0 !important;
    }

    #view-agenda .agenda-title-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        flex: 1 !important;
    }

    #view-agenda .agenda-title-center h2 {
        font-size: 1.3rem !important;
        margin: 0 !important;
        font-weight: 800 !important;
        color: var(--text-main) !important;
    }

    #view-agenda .agenda-title-center p {
        font-size: 0.7rem !important;
        margin: 2px 0 0 0 !important;
        opacity: 0.8 !important;
    }

    #view-agenda .header-action-left {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        display: flex !important;
        z-index: 10 !important;
    }

    #view-agenda .header-action-right {
        display: block !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: visible !important;
    }

    #view-agenda #btn-abrir-config {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        background: rgba(142, 68, 173, 0.08) !important;
        color: #8e44ad !important;
        border: 1px solid rgba(142, 68, 173, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* 3. 🚀 BOTÓN FAB AGENDAR (+) BURBUJA DE AGUA TRANSPARENTE */
    #btn-abrir-agendar {
        position: fixed !important;
        bottom: 25px !important;
        right: 20px !important;
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        z-index: 8500 !important;
        background: rgba(255, 71, 133, 0.15) !important;
        backdrop-filter: blur(1px) !important;
        -webkit-backdrop-filter: blur(1px) !important;
        border: 1.5px solid rgba(255, 71, 133, 0.4) !important;
        color: var(--primary-pink) !important;
        box-shadow: 0 10px 30px rgba(255, 71, 133, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.6) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    #btn-abrir-agendar svg {
        width: 30px !important;
        height: 30px !important;
        stroke-width: 2.5 !important;
    }

    #btn-abrir-agendar:active {
        transform: scale(0.85) translateY(4px) !important;
        background: rgba(255, 71, 133, 0.3) !important;
        border-color: rgba(255, 71, 133, 0.6) !important;
        box-shadow: 0 5px 15px rgba(255, 71, 133, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
    }

    /* ⚡ FIX CRÍTICO: Si la agenda NO está activa (ej: estás en Login o Finanzas), el botón desaparece mágicamente */
    #view-agenda:not(.active) #btn-abrir-agendar,
    body:has(#login-view.active) #btn-abrir-agendar {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 4. CONTROLES DEL CALENDARIO */
    #view-agenda .calendar-inline-box {
        margin: 0 10px 10px 10px !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        flex: 1 !important;
        border-radius: 16px !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--card-bg) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        min-height: 0 !important;
    }

    #view-agenda .calendar-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px !important;
        border-bottom: 1px solid var(--border-color) !important;
        box-sizing: border-box !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    #view-agenda .nav-arrows {
        width: 100% !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    #view-agenda .nav-arrows .btn-outline {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 18px !important;
        height: 36px !important;
        border-radius: 20px !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        background: linear-gradient(135deg, rgba(255, 71, 133, 0.12) 0%, rgba(255, 71, 133, 0.04) 100%) !important;
        border: 1px solid rgba(255, 71, 133, 0.3) !important;
        color: var(--primary-pink) !important;
        box-shadow: 0 4px 12px rgba(255, 71, 133, 0.05) !important;
        transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    #view-agenda .nav-arrows .btn-outline:active {
        transform: scale(0.92) !important;
        background: rgba(255, 71, 133, 0.22) !important;
    }

    #view-agenda .nav-arrows .btn-sm-box {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    #view-agenda .calendar-current-date {
        font-size: 1.05rem !important;
        order: -1 !important;
        text-align: center !important;
        margin: 0 !important;
        width: 100% !important;
    }

    #view-agenda .pill-group {
        width: 100% !important;
        display: flex !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #view-agenda .pill-group .pill {
        flex: 1 !important;
        padding: 8px 0 !important;
        font-size: 0.75rem !important;
        text-align: center !important;
    }

    #view-agenda #cal-filter-specialist {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #view-agenda #cal-filter-specialist .dropdown-selected {
        padding: 10px !important;
        font-size: 0.8rem !important;
        border-radius: 10px !important;
    }

    /* 5. CUADRÍCULA BAJO COMPRESIÓN INTEGRA */
    #view-agenda .calendar-grid-container {
        flex: 1 !important;
        padding-bottom: 85px !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: var(--bg-color) !important;
        box-sizing: border-box !important;
    }

    #view-agenda .calendar-grid {
        border: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    #view-agenda .cal-row {
        height: 55px !important;
        min-height: 55px !important;
        display: flex !important;
        width: 100% !important;
    }

    #view-agenda .cal-time-col {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        font-size: 0.5rem !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 40 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(5px) !important;
        border-right: 1px solid var(--border-color) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* ⚡ FIX: ANCLA NATIVA DE SCROLL (Evita que el Auto-Scroll quede tapado por la cabecera) */
    #view-agenda .cal-row {
        scroll-margin-top: 55px !important;
    }

    body.dark-theme #view-agenda .cal-time-col {
        background: rgba(24, 25, 36, 0.95) !important;
        border-color: #2a2b3d !important;
    }

    /* ⚡ --- VISTA DÍA (CERO LÍNEAS, CERO CASILLAS EN CABECERA) --- ⚡ */
    #view-agenda .calendar-grid.day-view .cal-row.cal-header-row {
        height: auto !important;
        min-height: 45px !important;
        position: relative !important;
        top: auto !important;
        z-index: 5 !important;
        background: transparent !important;
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        /* BLINDAJE CONTRA LA RAYA INFERIOR */
        box-shadow: none !important;
        margin-bottom: 8px !important;
    }

    #view-agenda .calendar-grid.day-view .cal-col-header {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        padding: 4px 2px !important;
        margin: 0 !important;
        border: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: none !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    #view-agenda .calendar-grid.day-view .cal-header-row .cal-time-col {
        border: none !important;
        border-right: none !important;
        border-bottom: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #view-agenda .calendar-grid.day-view .manicurista-name {
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.1 !important;
        margin-bottom: 3px !important;
        overflow: visible !important;
    }

    #view-agenda .calendar-grid.day-view .cal-cell {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        padding: 2px !important;
        margin: 0 !important;
        border-right: 1px solid var(--border-color) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* ⚡ --- VISTA SEMANA --- ⚡ */
    #view-agenda .calendar-grid.week-view {
        width: 100% !important;
        min-width: 100% !important;
    }

    #view-agenda .calendar-grid.week-view .cal-header-row {
        height: auto !important;
        min-height: 40px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        background: var(--card-bg) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    #view-agenda .calendar-grid.week-view .cal-col-header,
    #view-agenda .calendar-grid.week-view .cal-cell {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        padding: 2px 1px !important;
        margin: 0 !important;
        border-right: 1px solid var(--border-color) !important;
        box-sizing: border-box !important;
    }

    #view-agenda .calendar-grid.week-view .cal-header-row .cal-time-col {
        z-index: 40 !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    #view-agenda .calendar-grid.week-view .week-summary-faint {
        display: none !important;
    }

    #view-agenda .calendar-grid.week-view .header-name-pill {
        padding: 2px !important;
        font-size: 0.5rem !important;
        background: transparent !important;
        border: none !important;
    }

    #view-agenda .calendar-grid.week-view .header-name-pill strong {
        font-size: 0.55rem !important;
        display: block !important;
        margin-top: 1px !important;
    }

    /* --- VISTA MES --- */
    #view-agenda .cal-month-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        width: 100% !important;
        min-width: 100% !important;
        border: 1px solid var(--border-color) !important;
        gap: 1px !important;
        background: var(--border-color) !important;
    }

    #view-agenda .cal-month-day {
        min-height: 60px !important;
        padding: 2px !important;
        background: var(--card-bg) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #view-agenda .cal-day-num {
        font-size: 0.75rem !important;
        margin-bottom: 2px !important;
        font-weight: 800 !important;
        color: var(--text-main) !important;
    }

    #view-agenda .cal-month-header {
        padding: 4px 0 !important;
        font-size: 0.55rem !important;
        font-weight: 800 !important;
        background: var(--bg-color) !important;
        text-align: center !important;
        color: var(--text-muted) !important;
    }

    #view-agenda .cal-month-grid .week-summary-faint {
        display: none !important;
    }

    /* 6. DETALLES TARJETAS Y ARRASTRE */
    #view-agenda .drag-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        padding: 4px 2px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #view-agenda .drag-handle-icon {
        display: flex !important;
        padding: 2px !important;
        cursor: grab !important;
        color: var(--border-color) !important;
        background: transparent !important;
    }

    /* 🚀 REDISEÑO DE TARJETAS MÓVILES (Cubren el bloque completo y se apilan) */
    #view-agenda .cal-cell {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 2px !important;
    }

    /* Ajuste de tarjetas móviles: Encaje perfecto sin recortes en el borde derecho */
    #view-agenda .cal-event-block {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        min-height: 48px !important;
        width: auto !important;
        /* ⚡ Dejamos que el navegador calcule el ancho natural */
        align-self: stretch !important;
        /* ⚡ Se estira hasta el límite exacto sin desbordarse */
        margin: 0 4px 4px 0 !important;
        /* Margen sutil para respirar de la pared derecha */
        padding: 6px 5px !important;
        border-radius: 6px !important;
        gap: 4px !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        z-index: 30 !important;
    }

    #view-agenda .evt-time-badge {
        font-size: 0.55rem !important;
        padding: 2px 4px !important;
        border-radius: 4px !important;
        display: inline-block !important;
        margin-bottom: 2px !important;
    }

    #view-agenda .evt-client {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        margin: 0 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Ocultamos las etiquetas extra para no saturar la columna estrecha */
    #view-agenda .evt-spec-pill,
    #view-agenda .evt-tags,
    #view-agenda .evt-watermark {
        display: none !important;
    }

    #view-agenda .bloqueo-title {
        font-size: 0.55rem !important;
        letter-spacing: 0.5px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.1 !important;
    }

    #view-agenda .bloqueo-time {
        display: none !important;
    }

    /* Píldoras de resumen móvil */
    #view-agenda .week-summary-badge {
        font-size: 0.55rem !important;
        padding: 4px 2px !important;
        border-radius: 4px !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* Menú Móvil Overlays */
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        height: 100vh;
        z-index: 10000;
        width: 260px;
        transition: left 0.3s ease;
    }

    .sidebar.open {
        left: 0;
    }

    #mobile-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: 0.3s;
    }

    #mobile-sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .custom-modal-box {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        position: absolute;
        bottom: 0;
        animation: slideUpMobile 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    @keyframes slideUpMobile {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    /* ========================================= */
    /* 🔔 FIX: CAMPANA DE NOTIFICACIONES MÓVIL   */
    /* ========================================= */

    /* 1. Posicionar el panel de notificaciones correctamente a la derecha sin recortarse */
    #notificaciones-panel-mobile {
        left: auto !important;
        right: 10px !important;
        /* ⚡ FIX: Lo separamos 10px del borde para evitar el recorte en pantalla */
        width: 300px !important;
        /* ⚡ FIX: Lo hacemos de 300px para que respire mejor en móviles */
        max-width: 85vw !important;
        transform-origin: top right !important;
    }

    /* 2. Ocultar la campana cuando el menú lateral se abre */
    body:has(.sidebar.open) .mobile-header>div:last-child {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Transición suave para que la campana regrese elegantemente al cerrar el menú */
    .mobile-header>div:last-child {
        transition: opacity 0.3s ease !important;
    }

    /* 3. ⚡ FIX: Ocultar la campana duplicada (de PC) dentro del menú lateral móvil */
    .sidebar-header .campana-pc-wrapper {
        display: none !important;
    }

    /* 4. ⚡ FIX: Forzar la aparición del botón "X" para cerrar el menú */
    .sidebar-header #btn-close-sidebar {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

}

/* <--- LLAVE DE CIERRE DEL MÓVIL */

/* Transición fluida para el swipe del calendario */
.calendar-grid {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* --- CONFIGURACIÓN FÍSICA --- */
.espacio-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.espacio-row .custom-input {
    flex: 1;
}

.btn-delete-row {
    background: #fdf0f0;
    color: #e74c3c;
    border: 1px solid #fadbd8;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-delete-row:hover {
    background: #fadbd8;
}

.btn-primary[style*="#a259ff"]:hover {
    background: #8e44ad !important;
}


/* ========================================= */
/* 💎 UPGRADE PREMIUM - UI/UX MODERNO 💎 */
/* ========================================= */

/* 1. Variables mejoradas (Colores más vivos y sombras suaves) */
:root {
    --bg-color: #f8f9fc;
    /* Fondo ligeramente más limpio y luminoso */
    --primary-pink: #ff4785;
    /* Rosa más vibrante */
    --primary-pink-hover: #e0356e;
    --text-main: #1e1e2d;
    /* Texto más oscuro para mayor contraste */
    --text-muted: #8c8c9e;
    --border-color: #e4e6ef;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.04);
    --shadow-glow-pink: 0 8px 25px rgba(255, 71, 133, 0.25);
    --shadow-glow-purple: 0 8px 25px rgba(142, 68, 173, 0.2);
}

/* 2. Tipografía global más pulida */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h2,
h3 {
    letter-spacing: -0.5px;
}

.subtitle {
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #7e8299;
}

/* Etiquetas y pequeños títulos (más elegantes) */
.section-label,
.pink-label,
.text-purple-label,
.nav-section {
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
}



/* 4. Botones Outline (Interacción moderna) */
.btn-outline,
.btn-outline-full {
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    font-weight: 600;
    transition: all 0.3s ease;
    background: var(--card-bg);
}

.btn-outline:hover,
.btn-outline-full:hover {
    border-color: var(--primary-pink);
    color: var(--primary-pink);
    background: #fff5f8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 71, 133, 0.08);
}

/* 5. Inputs y Selects más suaves */
.custom-input {
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background-color: #fcfcfd;
    transition: all 0.3s ease;
}

.custom-input:focus {
    border-color: var(--primary-pink);
    background-color: var(--card-bg);
    box-shadow: 0 0 0 4px rgba(255, 71, 133, 0.1);
}

/* 6. Tarjetas (Cards) más limpias */
.login-card,
.payments-form-card,
.ticket-card,
.mi-pago-card,
.custom-modal-box,
.equipo-card,
.servicio-card,
.finanzas-panel,
.calendar-modal-box {
    box-shadow: var(--shadow-soft);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    /* Efecto glass sutil */
}

/* 7. Píldoras (Pills) y Filtros */
.pill-group {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    background: #f4f5f8;
    border: 1px solid var(--border-color);
}

.pill.active {
    background: var(--card-bg);
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
}

/* 8. Menú lateral (Sidebar) refinado */
.nav-item {
    font-weight: 500;
    border-radius: 10px;
}

.nav-item.active {
    background: linear-gradient(90deg, #fff5f8 0%, transparent 100%);
    border-left: 3px solid var(--primary-pink);
    border-radius: 0 10px 10px 0;
}

/* --- CORRECCIÓN SWIPE NATIVO MÓVIL --- */
#calendar-swipe-area {
    touch-action: pan-y;
    /* Bloquea el gesto de ir atrás/adelante del navegador para priorizar nuestro swipe */
    overflow-x: hidden;
}

/* ========================================= */
/* 🌙 MODO OSCURO PREMIUM Y ANIMACIONES       */
/* ========================================= */
body.dark-theme {
    --bg-color: #0d0e15;
    --card-bg: #181924;
    --text-main: #f5f5f5;
    --text-muted: #8b8d9b;
    --border-color: #2a2b3d;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 1. Transición suave general para que el cambio de día/noche sea un "fade" elegante */
body,
.sidebar,
.main-content,
.login-card,
.payments-form-card,
.ticket-card,
.mi-pago-card,
.custom-modal-box,
.equipo-card,
.servicio-card,
.finanzas-panel,
.calendar-modal-box,
.custom-input,
.custom-dropdown,
.dropdown-options,
.dropdown-selected {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* 2. Correcciones de fondos internos (Inputs y Cajas) */
body.dark-theme .custom-input,
body.dark-theme .pill-group,
body.dark-theme .equipo-salary,
body.dark-theme .amounts-box,
body.dark-theme .cal-header-row,
body.dark-theme .calendar-grid-container {
    background-color: #12131c !important;
    color: var(--text-main);
    border-color: #2a2b3d;
}

/* 3. FIX: Botones Outline, Toggle, Píldoras y Cajas de Íconos (Ahora resaltan perfecto) */
body.dark-theme .btn-outline,
body.dark-theme .btn-outline-full,
body.dark-theme .icon-btn-box,
body.dark-theme .icon-btn-gray,
body.dark-theme .theme-toggle,
body.dark-theme .method-btn,
body.dark-theme .service-pill {
    background-color: #222436 !important;
    /* Gris azulado que resalta sobre el fondo oscuro */
    border: 1px solid #3b3d54 !important;
    /* Borde sutil para darle forma */
    color: #e2e8f0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Hover y Active de todos estos botones en Modo Oscuro */
body.dark-theme .btn-outline:hover,
body.dark-theme .btn-outline-full:hover,
body.dark-theme .icon-btn-box:hover,
body.dark-theme .icon-btn-gray:hover,
body.dark-theme .theme-toggle:hover,
body.dark-theme .method-btn.active,
body.dark-theme .service-pill.active {
    background-color: #2f3146 !important;
    border-color: var(--primary-pink) !important;
    color: #ffffff !important;
}

/* Otros hovers en modo oscuro */
body.dark-theme .nav-item:hover,
body.dark-theme .dropdown-item:hover {
    background-color: #222333;
}

body.dark-theme .nav-item.active {
    background: linear-gradient(90deg, rgba(255, 71, 133, 0.15) 0%, transparent 100%);
}

body.dark-theme .price-display {
    background-color: #12131c;
    color: var(--text-main);
}

/* 4. Animación física del botón al hacer click (Giro y Pop) */
.theme-toggle-anim {
    animation: spinPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes spinPop {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(0.6) rotate(180deg);
    }

    100% {
        transform: scale(1) rotate(360deg);
    }
}

/* ========================================= */
/* 🚨 ALERTAS, BORDES ROJOS Y TEMBLOR        */
/* ========================================= */

/* Borde rojo suave para el error */
.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Animación del sacudón */
.shake-anim {
    animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* Notificación flotante (Toast) debajo del botón de tema */
.toast-alert {
    position: fixed;
    top: 75px;
    right: -350px;
    background: var(--card-bg);
    border-left: 4px solid #ef4444;
    color: var(--text-main);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999999;
    font-size: 0.85rem;
    font-weight: 600;
    transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.toast-alert.show {
    right: 20px;
    /* Aparece alineado con el botón */
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.toast-close:hover {
    color: var(--text-main);
}

body.dark-theme .toast-alert {
    background-color: #222436;
}

/* ========================================= */
/* 💧 GOTA DE AGUA: CRISTAL PURA Y BRILLO    */
/* ========================================= */

.drop-container {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    background: rgba(220, 225, 235, 0.4);
    border-radius: 30px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(255, 255, 255, 0.8);
    z-index: 1;
}

.drop-container .pill {
    position: relative;
    z-index: 1;
    background: transparent !important;
    color: var(--text-muted);
    font-weight: 600 !important;
    box-shadow: none !important;
    transform-origin: center;
    /* Renderizado de hardware para máxima nitidez */
    will-change: transform, color;
    -webkit-font-smoothing: antialiased;
}

/* 1. La Gota de Agua (Cristal puro flotante) */
.drop-selector {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    border-radius: 30px;
    z-index: 2;

    /* CRÍTICO: Ahora la gota recibe los toques y tiene cursor de agarre */
    pointer-events: auto;
    cursor: grab;

    will-change: transform, width, border-radius;

    /* El Lente de Refracción Real */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: brightness(1.05) contrast(1.15) saturate(1.2);
    -webkit-backdrop-filter: brightness(1.05) contrast(1.15) saturate(1.2);

    /* Tensión del agua y reflejos */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        inset 1px 3px 5px rgba(255, 255, 255, 0.9),
        inset -2px -4px 6px rgba(0, 0, 0, 0.1),
        0 4px 10px rgba(0, 0, 0, 0.12);
}

.drop-selector:active {
    cursor: grabbing;
    /* La mano se cierra al hacer clic */
}

body.dark-theme .drop-container {
    background: rgba(18, 19, 28, 0.6);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

body.dark-theme .drop-selector {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 2px 3px 5px rgba(255, 255, 255, 0.2), inset -2px -4px 6px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.6);
}

.anim-snap {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-radius 0.3s ease;
}

/* ========================================= */
/* 📅 VISTAS DINÁMICAS DEL CALENDARIO        */
/* ========================================= */

/* Adaptación para Vista de Mes (CSS Grid) */
.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.cal-month-header {
    background: #fafafa;
    font-weight: 800;
    text-align: center;
    padding: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cal-month-day {
    background: var(--card-bg);
    min-height: 120px;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.cal-month-day:hover {
    background: rgba(255, 71, 133, 0.04);
}

.cal-day-num {
    font-weight: 800;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cal-month-day.today {
    background: #fff0f5;
}

.cal-month-day.today .cal-day-num {
    color: var(--primary-pink);
}

body.dark-theme .cal-month-header {
    background: #12131c;
}

body.dark-theme .cal-month-day {
    background: var(--card-bg);
}

body.dark-theme .cal-month-day.today {
    background: rgba(255, 71, 133, 0.1);
}

/* ========================================= */
/* 📱 RESPONSIVIDAD MÓVIL: FILTROS Y GOTA    */
/* ========================================= */
@media (max-width: 900px) {
    .agenda-filters {
        flex-direction: column;
        align-items: center;
        /* Centrado perfecto */
        gap: 15px;
        width: 100%;
    }

    .pill-group.drop-container {
        width: 100%;
        /* Ocupa el ancho completo */
        display: flex;
        justify-content: space-between;
        overflow: hidden !important;
        /* EL FIX: Sellamos los bordes para que la gota NUNCA se salga */
        padding: 4px;
        border-radius: 30px;
    }

    .pill-group.drop-container .pill {
        flex: 1;
        /* Reparte el espacio exactamente igual para cada botón */
        padding: 10px 2px;
        font-size: 0.7rem;
        /* Letra ajustada para evitar que se amontone */
        text-align: center;
        white-space: nowrap;
        letter-spacing: -0.2px;
    }
}

/* ========================================= */
/* WIZARD: ANIMACIONES Y ESTILOS PASO A PASO */
/* ========================================= */
.wizard-progress {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
}

.wizard-progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border-color);
    z-index: 1;
    transform: translateY(-50%);
}

.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
    transition: all 0.3s;
}

.step-dot.active {
    border-color: var(--primary-pink);
    background: var(--primary-pink);
    color: white;
    box-shadow: 0 0 10px rgba(255, 71, 133, 0.3);
}

.step-dot.completed {
    border-color: var(--primary-pink);
    background: #fdf0f5;
    color: var(--primary-pink);
}

body.dark-theme .step-dot.completed {
    background: #2f3146;
}

.wizard-step {
    display: none;
    animation: slideInRight 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.wizard-step.active {
    display: block;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================= */
/* MINI CALENDARIO Y RELOJ SCROLL (WIZARD)   */
/* ========================================= */
/* El contenedor del calendario ahora empuja la caja y la hace crecer */
.custom-picker-popover {
    position: relative !important;
    width: 100% !important;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    padding: 15px;
    margin-top: 10px;
    animation: popIn 0.2s ease;
    left: 0 !important;
    right: 0 !important;
}

body.dark-theme .custom-picker-popover {
    background: #222436;
    border-color: #3b3d54;
}

/* Para evitar que al crecer el calendario, el input de la hora se estire de forma fea */
#step-1 .form-row {
    align-items: flex-start;
}

body.dark-theme .custom-picker-popover {
    background: #222436;
    border-color: #3b3d54;
}

/* Calendario */
.picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.picker-header button {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 5px;
}

.picker-header button:hover {
    color: var(--primary-pink);
}

#dp-month-year {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dp-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.dp-cell {
    text-align: center;
    padding: 8px 0;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    color: var(--text-main);
}

.dp-cell:hover:not(.disabled) {
    background: #fdf0f5;
    color: var(--primary-pink);
}

.dp-cell.active {
    background: var(--primary-pink) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(255, 71, 133, 0.3);
}

.dp-cell.disabled {
    color: var(--text-muted);
    opacity: 0.3;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Reloj */
.time-picker-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-color);
    border-radius: 8px;
    height: 140px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
}

.time-picker-center-bar {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 38px;
    transform: translateY(-50%);
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    z-index: 0;
}

.time-col {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    width: 60px;
    padding: 51px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
    text-align: center;
}

.time-col::-webkit-scrollbar {
    display: none;
}

.time-slot {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    scroll-snap-align: center;
    cursor: pointer;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out, color 0.1s ease-out;
    /* Transición súper rápida */
    transform: scale(0.85);
    /* Las horas no seleccionadas se ven más lejos */
    opacity: 0.3;
}

.time-slot.active {
    color: var(--primary-pink);
    font-size: 1.3rem;
    font-weight: 800;
    transform: scale(1.1);
    /* La hora central salta hacia adelante */
    opacity: 1;
}

.time-slot.disabled {
    opacity: 0.15;
    text-decoration: line-through;
}

.time-separator {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 5px;
    z-index: 1;
    color: var(--text-main);
}

/* ========================================= */
/* FIX: DROPDOWNS TIPO ACORDEÓN EN EL WIZARD */
/* ========================================= */
.wizard-body .custom-dropdown .dropdown-options {
    position: relative !important;
    top: 0 !important;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--border-color);
}

/* En modo oscuro adaptamos el borde para que se vea limpio */
body.dark-theme .wizard-body .custom-dropdown .dropdown-options {
    border-color: #3b3d54;
}

/* --- FIX PARA SUPERPONER MENÚ DE MUEBLES --- */

/* 1. Apaga la "caja restrictiva" para que el menú pueda flotar sobre el pie de página sin generar scroll */
#modal-config-fisica-overlay .modal-body {
    overflow: visible !important;
    position: relative;
    z-index: 10;
}

/* 2. Trae al frente absoluto la fila que estás tocando para que no quede detrás de otros inputs */
.espacio-row:has(.custom-dropdown.open) {
    position: relative;
    z-index: 9999 !important;
}

/* --- ANIMACIÓN DE LA FLECHA DEL MENÚ DESPLEGABLE --- */

/* 1. Preparamos el triangulito para que pueda girar de forma suave */
.dropdown-selected span {
    display: inline-block;
    /* Necesario para que los elementos de texto puedan rotar */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Efecto rebote sutil */
}

/* 2. Cuando el menú se abre, giramos el triángulo 180 grados hacia arriba */
.custom-dropdown.open .dropdown-selected span {
    transform: rotate(180deg);
}

/* --- ESTILOS PARA MENÚS DE SELECCIÓN MÚLTIPLE --- */
.dropdown-item.active-multi {
    background: #eafaf1 !important;
    color: #2ecc71 !important;
    font-weight: 700;
    position: relative;
}

.dropdown-item.active-multi::after {
    content: "✓";
    position: absolute;
    right: 15px;
    font-weight: 900;
    font-size: 1.1rem;
}

/* --- TARJETAS DE MUEBLES PREMIUM (WIZARD PASO 4) --- */
.muebles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.mueble-card {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    user-select: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mueble-card:hover {
    border-color: #ffb6c1;
    background: #fffafb;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(255, 71, 133, 0.12);
}

.mueble-card.selected {
    border-color: var(--primary-pink);
    background: #fdf0f5;
    box-shadow: var(--shadow-glow-pink);
    transform: translateY(-4px);
}

.mueble-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-muted);
    transition: all 0.3s;
}

.mueble-icon svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
    transition: all 0.3s;
}

.mueble-card.selected .mueble-icon {
    color: var(--primary-pink);
}

.mueble-card.selected .mueble-icon svg {
    transform: scale(1.25);
    filter: drop-shadow(0 4px 10px rgba(255, 71, 133, 0.35));
}

.mueble-name {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: 0.5px;
}

/* Adaptación para Modo Oscuro */
body.dark-theme .mueble-card:hover {
    border-color: rgba(255, 71, 133, 0.5);
    background: #2f1d26;
}

body.dark-theme .mueble-card.selected {
    background: #2f1d26;
}

/* --- Estilos para Mesas Ocupadas --- */
.mueble-card.ocupado {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(1);
    background: repeating-linear-gradient(45deg, #f4f5f8, #f4f5f8 10px, #eceef5 10px, #eceef5 20px) !important;
    border-color: var(--border-color) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.dark-theme .mueble-card.ocupado {
    background: repeating-linear-gradient(45deg, #181924, #181924 10px, #202130 10px, #202130 20px) !important;
}

/* Mesa Compartida (Habilitada en rosa rayado) */
.mueble-card.ocupado.selected {
    opacity: 1 !important;
    filter: grayscale(0) !important;
    cursor: pointer;
    border-color: var(--primary-pink) !important;
    background: repeating-linear-gradient(45deg, #fdf0f5, #fdf0f5 10px, #fce4ec 10px, #fce4ec 20px) !important;
    box-shadow: var(--shadow-glow-pink) !important;
    transform: translateY(-4px) !important;
}

body.dark-theme .mueble-card.ocupado.selected {
    background: repeating-linear-gradient(45deg, #2f1d26, #2f1d26 10px, #3a2330 10px, #3a2330 20px) !important;
}

/* 🔒 Etiqueta Premium de Mueble Ocupado */
.mueble-ocupado-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #ff4785 0%, #e0356e 100%);
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(255, 71, 133, 0.4);
    z-index: 5;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
}

/* 🚫 Etiqueta y Opacidad de Mueble Incompatible (Manos en Pies) */
.mueble-card.incompatible {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(1) opacity(0.8);
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.dark-theme .mueble-card.incompatible {
    background: #12131c !important;
}

.mueble-incompatible-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #7e8299 0%, #5e6278 100%);
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 5;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ⚡ ANIMACIÓN DE RECHAZO AZUL */
.shake-blue-anim {
    animation: shakeBlue 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    border-color: #3498db !important;
    background: #ebf5fb !important;
    filter: none !important;
}

.shake-blue-anim .mueble-icon {
    color: #3498db !important;
}

body.dark-theme .shake-blue-anim {
    background: #132738 !important;
}

@keyframes shakeBlue {

    10%,
    90% {
        transform: translate3d(-2px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(3px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-5px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(5px, 0, 0);
    }
}

/* 👩‍🎨 AVATARES ESPECIALISTAS (PASO 5) */
.spec-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ========================================= */
/* TARJETAS PREMIUM (SIN RAYAS, 100% CLEAN)  */
/* ========================================= */
.cal-event-block {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 10px;
    padding: 8px 10px;
    z-index: 20;
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    background: var(--evt-bg, #ffffff);
    color: var(--evt-text, #333333);
    min-height: 28px;
    /* ⚡ FIX CRÍTICO: Escudo físico. Nunca podrá aplastarse más que esto */
}

.cal-event-block * {
    pointer-events: none !important;
}

.cal-event-block:hover {
    transform: scale(1.01) translateY(-2px);
    z-index: 25;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* 🎨 PALETAS SUAVES (Bordes integrados) */
.card-color-1 {
    --evt-bg: linear-gradient(135deg, #fff0f3 0%, #ffe4e6 100%);
    --evt-accent: #e11d48;
    --evt-text: #881337;
    border-color: #fecdd3;
}

.card-color-2 {
    --evt-bg: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    --evt-accent: #7c3aed;
    --evt-text: #4c1d95;
    border-color: #ddd6fe;
}

.card-color-3 {
    --evt-bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    --evt-accent: #0284c7;
    --evt-text: #082f49;
    border-color: #bae6fd;
}

.card-color-4 {
    --evt-bg: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    --evt-accent: #059669;
    --evt-text: #064e3b;
    border-color: #a7f3d0;
}

.card-color-5 {
    --evt-bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    --evt-accent: #d97706;
    --evt-text: #78350f;
    border-color: #fde68a;
}

/* 💎 Citas Completadas (Pagadas) */
.cal-event-block.cita-completada {
    --evt-bg: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
    --evt-accent: #10b981;
    --evt-text: #064e3b;
    border-color: #a7f3d0 !important;
    opacity: 1 !important;
}

/* ⏱️ Tiempo Libre / Descanso */
.cal-event-block.tipo-bloqueo {
    --evt-bg: repeating-linear-gradient(45deg, #F8FAFC, #F8FAFC 8px, #F1F5F9 8px, #F1F5F9 16px);
    --evt-accent: #94A3B8;
    --evt-text: #475569;
    border-color: #E2E8F0 !important;
}

/* Modo Oscuro: Fondos profundos limpios */
body.dark-theme .cal-event-block {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-theme .cal-event-block:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

body.dark-theme .card-color-1 {
    --evt-bg: linear-gradient(135deg, #2d151c 0%, #220f14 100%);
    --evt-accent: #fb7185;
    --evt-text: #ffe4e6;
    border-color: #4c1d28;
}

body.dark-theme .card-color-2 {
    --evt-bg: linear-gradient(135deg, #231a36 0%, #171124 100%);
    --evt-accent: #a78bfa;
    --evt-text: #ede9fe;
    border-color: #3b2b5a;
}

body.dark-theme .card-color-3 {
    --evt-bg: linear-gradient(135deg, #102436 0%, #0a1724 100%);
    --evt-accent: #38bdf8;
    --evt-text: #e0f2fe;
    border-color: #1a3c5a;
}

body.dark-theme .card-color-4 {
    --evt-bg: linear-gradient(135deg, #112a22 0%, #0a1a15 100%);
    --evt-accent: #34d399;
    --evt-text: #ecfdf5;
    border-color: #1a4538;
}

body.dark-theme .card-color-5 {
    --evt-bg: linear-gradient(135deg, #2b2011 0%, #1d150b 100%);
    --evt-accent: #fbbf24;
    --evt-text: #fffbeb;
    border-color: #47351c;
}

body.dark-theme .cal-event-block.cita-completada {
    --evt-bg: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
    border-color: #065f46 !important;
    --evt-text: #a7f3d0;
    opacity: 1 !important;
}

body.dark-theme .cal-event-block.tipo-bloqueo {
    --evt-bg: repeating-linear-gradient(45deg, #1E1E2E, #1E1E2E 8px, #252636 8px, #252636 16px);
    --evt-accent: #64748B;
    --evt-text: #CBD5E1;
    border-color: #2A2B3D !important;
}


/* 📐 ESTRUCTURA INTERNA */
.evt-watermark {
    position: absolute;
    right: -5%;
    bottom: -10%;
    width: 75px;
    height: 75px;
    color: var(--evt-accent);
    opacity: 0.15;
    transform: rotate(-10deg);
    z-index: 1;
}

.cal-event-block.cita-completada .evt-watermark {
    opacity: 0.25;
}

.evt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    z-index: 2;
    position: relative;
}

.evt-time-badge {
    background: var(--evt-accent);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
}

body.dark-theme .evt-time-badge {
    color: #000;
}

.evt-spec-pill {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--evt-text);
    opacity: 0.7;
    letter-spacing: 0.5px;
    padding-top: 1px;
}

.evt-client {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.3px;
    color: var(--evt-text);
    z-index: 2;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.evt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
    z-index: 2;
    position: relative;
}

.evt-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--evt-text);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

body.dark-theme .evt-tag {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
}

.evt-tag svg {
    width: 14px;
    height: 14px;
    color: var(--evt-accent);
    flex-shrink: 0;
    stroke-width: 1.8;
}

.evt-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
}

/* ⚡ INTELIGENCIA RESPONSIVA POR CLASES JS (INFALIBLE) */
/* Citas Medias (45 min) */
.cal-event-block.evt-short {
    padding: 6px 8px;
    gap: 2px;
}

.cal-event-block.evt-short .evt-tags,
.cal-event-block.evt-short .evt-watermark {
    display: none !important;
}

.cal-event-block.evt-short .evt-client {
    font-size: 0.95rem;
    -webkit-line-clamp: 2;
}

/* Citas Micro (30 min) -> Pone todo en una sola línea horizontal */
.cal-event-block.evt-micro {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 6px;
    gap: 8px;
}

.cal-event-block.evt-micro .evt-tags,
.cal-event-block.evt-micro .evt-watermark,
.cal-event-block.evt-micro .evt-spec-pill {
    display: none !important;
}

.cal-event-block.evt-micro .evt-header {
    width: auto;
    margin: 0;
}

.cal-event-block.evt-micro .evt-client {
    margin: 0;
    font-size: 0.85rem;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    flex: 1;
}

/* Modificadores de Bloqueo */
.bloqueo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 4px;
    z-index: 2;
}

.bloqueo-title {
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    color: var(--evt-accent);
}

.bloqueo-time {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--evt-text);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

body.dark-theme .bloqueo-time {
    background: rgba(255, 255, 255, 0.05);
}


/* ========================================= */
/* ALINEACIÓN Y DISEÑO DEL DRAG & DROP       */
/* ========================================= */

.calendar-grid.day-view .cal-header-row .cal-col-header {
    align-items: center !important;
    padding-bottom: 0 !important;
}

.drag-header {
    display: flex;
    align-items: center !important;
    justify-content: center;
    gap: 8px;
    height: 100%;
}

.drag-handle-icon {
    cursor: grab;
    color: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    /* Mantiene las rayas a la altura perfecta del nombre */
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s;
    background: transparent;
}

.drag-handle-icon:hover {
    color: var(--primary-pink);
    background: rgba(255, 71, 133, 0.1);
}

.drag-handle-icon:active {
    cursor: grabbing;
}

/* El "Hueco" limpio que deja la columna original (Efecto Trello) */
.col-placeholder {
    background: rgba(255, 71, 133, 0.04) !important;
    border: 2px dashed rgba(255, 71, 133, 0.4) !important;
    border-radius: 8px;
    z-index: 1;
}

.col-placeholder * {
    opacity: 0.4 !important;
    /* El contenido no desaparece, solo se ve como marca de agua */
    filter: none !important;
    /* Quitamos cualquier filtro que lo ponga gris */
}

body.dark-theme .col-placeholder {
    background: rgba(255, 71, 133, 0.08) !important;
}

/* ========================================= */
/* CLON DE ARRASTRE (PLANO Y SEGUIMIENTO 1:1)*/
/* ========================================= */
.custom-drag-ghost-col {
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Sombra muy sutil, sin levantarse */
    opacity: 0.95;
    overflow: hidden;
    border: 2px solid var(--primary-pink);
    /* Hemos eliminado el scale() y rotate() para que sea 100% plano */
}

body.dark-theme .custom-drag-ghost-col {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    background: #181924;
}

.custom-drag-ghost-col .drag-header {
    background: rgba(255, 71, 133, 0.05);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 5px;
}

.custom-drag-ghost-col .manicurista-name,
.custom-drag-ghost-col .drag-handle-icon {
    color: var(--primary-pink);
}

.custom-drag-ghost-col .manicurista-name::before {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}

.custom-drag-ghost-col .cal-cell {
    height: 90px;
    min-height: 90px;
    padding: 5px;
    background: var(--card-bg);
}

body.dark-theme .custom-drag-ghost-col .cal-cell {
    background: #181924;
}

/* ========================================= */
/* PROTECCIÓN ANTI-SELECCIÓN GLOBAL          */
/* ========================================= */
/* Convierte la web en una App Nativa: bloquea el subrayado azul accidental */
body {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Solo permite escribir y seleccionar texto dentro de los campos de formulario */
input,
textarea,
select {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
}

/* ========================================= */
/* VISTA SEMANA/MES: RESUMEN INTELIGENTE     */
/* ========================================= */
.week-summary-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: 2px;
    justify-content: center;
}

.week-summary-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 2px;
    border-radius: 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: popIn 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-summary-citas {
    background: rgba(255, 71, 133, 0.1);
    color: var(--primary-pink);
    border: 1px solid rgba(255, 71, 133, 0.2);
}

.week-summary-bloqueos {
    background: rgba(148, 163, 184, 0.15);
    color: #475569;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

body.dark-theme .week-summary-citas {
    background: rgba(255, 71, 133, 0.15);
    border-color: rgba(255, 71, 133, 0.3);
    color: #ff8ab3;
}

body.dark-theme .week-summary-bloqueos {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.4);
}

/* ⚡ Efecto de Resaltado de Citas (2 Segundos Exactos) */
.highlight-flash {
    animation: pulseGlow 1s ease-in-out 2 !important;
    /* 1 segundo x 2 ciclos = 2 segundos */
    z-index: 50 !important;
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0px var(--primary-pink);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 20px var(--primary-pink);
        border-color: var(--primary-pink);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0px var(--primary-pink);
    }
}

/* ========================================= */
/* 🚨 ESCUDO ANTI-TARJETAS ROTAS             */
/* ========================================= */
/* Asesina instantáneamente cualquier tarjeta gigante que intente renderizarse en Semana o Mes */
.calendar-grid.week-view .cal-event-block,
.cal-month-grid .cal-event-block {
    display: none !important;
}

/* Efecto visual premium al pasar el ratón por los resúmenes */
.cal-cell:has(.week-summary-container),
.cal-month-day:has(.week-summary-container) {
    transition: all 0.2s ease;
}

.cal-cell:has(.week-summary-container):hover,
.cal-month-day:has(.week-summary-container):hover {
    background: rgba(255, 71, 133, 0.08) !important;
    box-shadow: inset 0 0 0 2px rgba(255, 71, 133, 0.3);
}

/* 🟢 Píldora de Espacio Disponible (Cuando hay mezcla) */
.week-summary-libres {
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

body.dark-theme .week-summary-libres {
    background: rgba(46, 204, 113, 0.2);
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

/* 👻 Marca de agua (Cuando está todo completamente vacío) */
.week-summary-faint {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 5px;
    transition: opacity 0.2s ease;
    /* Transición suave */
}

/* ⚡ Desaparece fluidamente cuando pasas el ratón para dar espacio al botón +Agendar */
.cal-cell:hover .week-summary-faint,
.cal-month-day:hover .week-summary-faint {
    opacity: 0 !important;
}

/* ========================================= */
/* MARCA DE AGUA VISTA DÍA                   */
/* ========================================= */
/* Centrado exacto dentro de la celda grande */
.day-available {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    width: 100%;
    pointer-events: none;
}

/* 🧠 MAGIA CSS: Si la celda contiene una tarjeta de cita adentro, apagamos la marca de agua */
.cal-cell:has(.cal-event-block)>.day-available {
    display: none !important;
}

/* ========================================= */
/* 🛡️ ESCUDO ANTI-FUGAS (TARJETAS AGENDA)    */
/* ========================================= */
/* ⚡ FIX: Solo ocultamos los textos de fondo en la vista DÍA. Las vistas Semana/Mes conservan sus resúmenes. */
.calendar-grid.day-view .cal-cell:has(.cal-event-block) .day-available,
.calendar-grid.day-view .cal-cell:has(.cal-event-block) .add-btn-hover {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Quitar transparencia a la tarjeta completada para que tape el fondo físicamente */
.cal-event-block.cita-completada {
    --evt-bg: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
    --evt-accent: #10b981;
    --evt-text: #064e3b;
    border-color: #a7f3d0;
    opacity: 1 !important;
    /* ⚡ FIX: 100% Sólido */
}

body.dark-theme .cal-event-block.cita-completada {
    --evt-bg: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
    border-color: #065f46;
    --evt-text: #a7f3d0;
    opacity: 1 !important;
    /* ⚡ FIX: 100% Sólido */
}

/* ⚡ MEJORAS ESTÉTICAS MINI CALENDARIO Y SWIPE RESPONSIVE */
.custom-picker-popover {
    border: 1px solid rgba(255, 71, 133, 0.2) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
}

.picker-header {
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#dp-month-year {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--primary-pink) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    display: block !important;
    /* ⚡ FIX: Obliga al texto a existir físicamente */
    margin: 0 auto !important;
    width: 100% !important;
    /* ⚡ FIX: Evita que colapse en móviles */
}

.dp-cell {
    padding: 10px 0 !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
}

@media (max-width: 900px) {
    .custom-picker-popover {
        padding: 25px 15px !important;
        width: 100% !important;
    }

    .dp-cell {
        padding: 12px 0 !important;
        font-size: 0.95rem !important;
    }

    .dp-grid-header span {
        font-size: 0.75rem !important;
    }
}