/* ==========================================================
   SpaMaster 360 Enterprise ERP v27.5
   Agenda Modal Liquid Crystal
   ========================================================== */

:root{
    --sm360-modal-ink:#0F172A;
    --sm360-modal-muted:#64748B;
    --sm360-modal-purple:#6D4AFF;
    --sm360-modal-green:#16A34A;
    --sm360-modal-red:#EF4444;
}

/* Toolbar button rename target visual */
#view-agenda button,
.agenda-pro button{
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;
}

/* Modales de Agenda: apariencia Liquid Crystal */
#view-agenda .modal,
#view-agenda .modal-content,
#view-agenda .dialog,
#view-agenda .dialog-content,
#view-agenda [role="dialog"],
.agenda-pro .modal,
.agenda-pro .modal-content,
.agenda-pro .dialog,
.agenda-pro .dialog-content,
.agenda-pro [role="dialog"]{
    border-radius:28px!important;
}

#view-agenda .modal-content,
#view-agenda .dialog-content,
#view-agenda [role="dialog"],
.agenda-pro .modal-content,
.agenda-pro .dialog-content,
.agenda-pro [role="dialog"]{
    background:
        radial-gradient(circle at 8% 6%, rgba(109,74,255,.10), transparent 30%),
        radial-gradient(circle at 96% 8%, rgba(22,163,74,.06), transparent 28%),
        linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.72))!important;
    border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:
        0 30px 90px rgba(15,23,42,.20),
        inset 0 1px 0 rgba(255,255,255,.88)!important;
    backdrop-filter:blur(26px) saturate(1.22)!important;
    -webkit-backdrop-filter:blur(26px) saturate(1.22)!important;
    color:var(--sm360-modal-ink)!important;
}

/* Títulos del modal */
#view-agenda .modal h1,
#view-agenda .modal h2,
#view-agenda .modal h3,
#view-agenda .dialog h1,
#view-agenda .dialog h2,
#view-agenda .dialog h3,
.agenda-pro .modal h1,
.agenda-pro .modal h2,
.agenda-pro .modal h3,
.agenda-pro .dialog h1,
.agenda-pro .dialog h2,
.agenda-pro .dialog h3{
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    color:var(--sm360-modal-ink)!important;
    font-weight:780!important;
    letter-spacing:-.035em!important;
}

/* Labels más limpios */
#view-agenda .modal label,
#view-agenda .dialog label,
#view-agenda [role="dialog"] label,
.agenda-pro .modal label,
.agenda-pro .dialog label,
.agenda-pro [role="dialog"] label{
    color:var(--sm360-modal-muted)!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:12px!important;
    font-weight:760!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
}

/* Inputs/selects Liquid */
#view-agenda .modal input,
#view-agenda .modal select,
#view-agenda .modal textarea,
#view-agenda .dialog input,
#view-agenda .dialog select,
#view-agenda .dialog textarea,
#view-agenda [role="dialog"] input,
#view-agenda [role="dialog"] select,
#view-agenda [role="dialog"] textarea,
.agenda-pro .modal input,
.agenda-pro .modal select,
.agenda-pro .modal textarea,
.agenda-pro .dialog input,
.agenda-pro .dialog select,
.agenda-pro .dialog textarea,
.agenda-pro [role="dialog"] input,
.agenda-pro [role="dialog"] select,
.agenda-pro [role="dialog"] textarea{
    min-height:46px!important;
    border-radius:16px!important;
    background:
        linear-gradient(135deg,rgba(255,255,255,.90),rgba(255,255,255,.70))!important;
    border:1px solid rgba(148,163,184,.24)!important;
    box-shadow:
        0 10px 24px rgba(15,23,42,.045),
        inset 0 1px 0 rgba(255,255,255,.86)!important;
    color:var(--sm360-modal-ink)!important;
    font-family:var(--sc-font-body,"Manrope",sans-serif)!important;
    font-weight:620!important;
    outline:none!important;
}

#view-agenda .modal input:focus,
#view-agenda .modal select:focus,
#view-agenda .modal textarea:focus,
#view-agenda .dialog input:focus,
#view-agenda .dialog select:focus,
#view-agenda .dialog textarea:focus,
#view-agenda [role="dialog"] input:focus,
#view-agenda [role="dialog"] select:focus,
#view-agenda [role="dialog"] textarea:focus,
.agenda-pro .modal input:focus,
.agenda-pro .modal select:focus,
.agenda-pro .modal textarea:focus,
.agenda-pro .dialog input:focus,
.agenda-pro .dialog select:focus,
.agenda-pro .dialog textarea:focus,
.agenda-pro [role="dialog"] input:focus,
.agenda-pro [role="dialog"] select:focus,
.agenda-pro [role="dialog"] textarea:focus{
    border-color:rgba(109,74,255,.46)!important;
    box-shadow:
        0 0 0 4px rgba(109,74,255,.10),
        0 12px 28px rgba(109,74,255,.08)!important;
}

/* Barra búsqueda cliente */
.sm360-client-search-wrap{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    border-radius:18px!important;
    background:
        linear-gradient(135deg,rgba(255,255,255,.90),rgba(255,255,255,.70))!important;
    border:1px solid rgba(148,163,184,.24)!important;
    box-shadow:
        0 12px 28px rgba(15,23,42,.055),
        inset 0 1px 0 rgba(255,255,255,.86)!important;
    overflow:hidden!important;
}

.sm360-client-search-icon,
.sm360-client-clear-icon{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    display:grid!important;
    place-items:center!important;
    color:var(--sm360-modal-purple)!important;
}

.sm360-client-search-icon::before,
.sm360-client-clear-icon::before{
    content:""!important;
    width:20px!important;
    height:20px!important;
    display:block!important;
    background:currentColor!important;
    mask:var(--sm360-client-icon) center/contain no-repeat!important;
    -webkit-mask:var(--sm360-client-icon) center/contain no-repeat!important;
}

.sm360-client-search-icon{
    --sm360-client-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
}

.sm360-client-clear-icon{
    --sm360-client-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    color:#64748B!important;
    border-left:1px solid rgba(148,163,184,.16)!important;
    background:rgba(248,250,252,.55)!important;
}

.sm360-client-search-wrap input{
    flex:1!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    min-height:48px!important;
    border-radius:0!important;
}

/* Bloque de hora inicio/final */
.sm360-time-range-panel{
    margin:10px 0 14px!important;
    padding:14px!important;
    border-radius:20px!important;
    background:
        radial-gradient(circle at 8% 10%, rgba(109,74,255,.08), transparent 32%),
        linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.64))!important;
    border:1px solid rgba(148,163,184,.20)!important;
    box-shadow:
        0 14px 34px rgba(15,23,42,.060),
        inset 0 1px 0 rgba(255,255,255,.82)!important;
}

.sm360-time-range-title{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-bottom:12px!important;
    color:var(--sm360-modal-muted)!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:12px!important;
    font-weight:760!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
}

.sm360-time-range-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
}

.sm360-time-field{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
}

.sm360-time-field span{
    color:#475569!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:12px!important;
    font-weight:740!important;
}

.sm360-time-field input{
    min-height:44px!important;
    padding:0 12px!important;
}

/* Botones Guardar / Cancelar Liquid Crystal */
#view-agenda .modal button,
#view-agenda .dialog button,
#view-agenda [role="dialog"] button,
.agenda-pro .modal button,
.agenda-pro .dialog button,
.agenda-pro [role="dialog"] button{
    border-radius:16px!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-weight:820!important;
    transition:
        transform .16s cubic-bezier(.2,.8,.2,1),
        box-shadow .16s ease,
        border-color .16s ease!important;
}

#view-agenda .sm360-btn-cancel,
.agenda-pro .sm360-btn-cancel{
    color:#B4232A!important;
    background:
        linear-gradient(135deg,rgba(255,255,255,.88),rgba(254,226,226,.76))!important;
    border:1px solid rgba(239,68,68,.28)!important;
    box-shadow:
        0 12px 28px rgba(239,68,68,.10),
        inset 0 1px 0 rgba(255,255,255,.88)!important;
}

#view-agenda .sm360-btn-save,
.agenda-pro .sm360-btn-save{
    color:#fff!important;
    background:
        radial-gradient(circle at 22% 14%, rgba(255,255,255,.26), transparent 34%),
        linear-gradient(135deg,#22C55E,#16A34A 56%,#0F7A3D)!important;
    border:1px solid rgba(255,255,255,.32)!important;
    box-shadow:
        0 16px 36px rgba(22,163,74,.24),
        inset 0 1px 0 rgba(255,255,255,.34)!important;
}

#view-agenda .sm360-btn-cancel:hover,
#view-agenda .sm360-btn-save:hover,
.agenda-pro .sm360-btn-cancel:hover,
.agenda-pro .sm360-btn-save:hover{
    transform:translateY(-2px) scale(1.02)!important;
}

/* Botón Bloquear horario */
.sm360-block-schedule-btn{
    min-width:132px!important;
}

/* Responsive */
@media(max-width:640px){
    .sm360-time-range-grid{
        grid-template-columns:1fr!important;
    }
}
/* ==========================================================
   SpaMaster 360 Enterprise ERP v27.6
   Agenda Modal REAL Redesign
   ========================================================== */

:root{
    --sm360-reserve-ink:#0F172A;
    --sm360-reserve-muted:#64748B;
    --sm360-reserve-purple:#6D4AFF;
    --sm360-reserve-green:#16A34A;
    --sm360-reserve-red:#EF4444;
    --sm360-reserve-line:rgba(148,163,184,.22);
}

/* Modal real de reserva: usar clases que JS aplica directamente */
.sm360-reserve-modal,
.sm360-reserve-modal .modal-content,
.sm360-reserve-modal .dialog-content,
.sm360-reserve-modal [role="dialog"],
body .sm360-reserve-dialog{
    border-radius:30px!important;
    background:
        radial-gradient(circle at 8% 6%, rgba(109,74,255,.11), transparent 30%),
        radial-gradient(circle at 96% 8%, rgba(22,163,74,.07), transparent 28%),
        linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.74))!important;
    border:1px solid rgba(148,163,184,.24)!important;
    box-shadow:
        0 34px 100px rgba(15,23,42,.22),
        inset 0 1px 0 rgba(255,255,255,.90)!important;
    backdrop-filter:blur(28px) saturate(1.22)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.22)!important;
    color:var(--sm360-reserve-ink)!important;
    overflow:hidden!important;
}

.sm360-reserve-modal h1,
.sm360-reserve-modal h2,
.sm360-reserve-modal h3,
.sm360-reserve-dialog h1,
.sm360-reserve-dialog h2,
.sm360-reserve-dialog h3{
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    color:var(--sm360-reserve-ink)!important;
    font-weight:780!important;
    letter-spacing:-.035em!important;
}

/* Form layout */
.sm360-reserve-modal label,
.sm360-reserve-dialog label{
    color:var(--sm360-reserve-muted)!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:12px!important;
    font-weight:760!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
}

.sm360-reserve-modal input,
.sm360-reserve-modal select,
.sm360-reserve-modal textarea,
.sm360-reserve-dialog input,
.sm360-reserve-dialog select,
.sm360-reserve-dialog textarea{
    min-height:46px!important;
    border-radius:16px!important;
    background:
        linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.72))!important;
    border:1px solid rgba(148,163,184,.25)!important;
    box-shadow:
        0 10px 24px rgba(15,23,42,.045),
        inset 0 1px 0 rgba(255,255,255,.88)!important;
    color:var(--sm360-reserve-ink)!important;
    font-family:var(--sc-font-body,"Manrope",sans-serif)!important;
    font-weight:620!important;
    outline:none!important;
}

.sm360-reserve-modal input:focus,
.sm360-reserve-modal select:focus,
.sm360-reserve-modal textarea:focus,
.sm360-reserve-dialog input:focus,
.sm360-reserve-dialog select:focus,
.sm360-reserve-dialog textarea:focus{
    border-color:rgba(109,74,255,.48)!important;
    box-shadow:
        0 0 0 4px rgba(109,74,255,.10),
        0 12px 28px rgba(109,74,255,.08)!important;
}

/* Cliente search rediseñado */
.sm360-real-client-search{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:52px!important;
    border-radius:18px!important;
    background:
        linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.72))!important;
    border:1px solid rgba(148,163,184,.25)!important;
    box-shadow:
        0 12px 28px rgba(15,23,42,.055),
        inset 0 1px 0 rgba(255,255,255,.88)!important;
    overflow:hidden!important;
}

.sm360-real-client-search::before{
    content:""!important;
    width:22px!important;
    height:22px!important;
    margin-left:16px!important;
    background:linear-gradient(135deg,#6D4AFF,#2F80ED)!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center/contain no-repeat!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center/contain no-repeat!important;
}

.sm360-real-client-search input{
    flex:1!important;
    min-height:52px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    border-radius:0!important;
    padding-left:12px!important;
}

.sm360-real-client-clear{
    width:48px!important;
    min-width:48px!important;
    height:52px!important;
    display:grid!important;
    place-items:center!important;
    border-left:1px solid rgba(148,163,184,.16)!important;
    background:rgba(248,250,252,.60)!important;
    cursor:pointer!important;
}

.sm360-real-client-clear::before{
    content:""!important;
    width:19px!important;
    height:19px!important;
    background:#64748B!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/contain no-repeat!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/contain no-repeat!important;
}

/* Panel horario inicio/final */
.sm360-real-time-panel{
    margin:12px 0 16px!important;
    padding:16px!important;
    border-radius:22px!important;
    background:
        radial-gradient(circle at 8% 10%, rgba(109,74,255,.09), transparent 34%),
        linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.66))!important;
    border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:
        0 16px 38px rgba(15,23,42,.065),
        inset 0 1px 0 rgba(255,255,255,.86)!important;
}

.sm360-real-time-head{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:12px!important;
    margin-bottom:14px!important;
}

.sm360-real-time-title{
    color:var(--sm360-reserve-muted)!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:12px!important;
    font-weight:780!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
}

.sm360-real-time-badge{
    border-radius:999px!important;
    padding:5px 10px!important;
    background:rgba(109,74,255,.10)!important;
    color:#5E2BFF!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:12px!important;
    font-weight:780!important;
}

.sm360-real-time-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:14px!important;
}

.sm360-real-time-field{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
}

.sm360-real-time-field span{
    color:#475569!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:12px!important;
    font-weight:760!important;
    letter-spacing:.02em!important;
}

.sm360-real-time-field input{
    min-height:46px!important;
    padding:0 14px!important;
}

/* Botones modal */
.sm360-reserve-modal button,
.sm360-reserve-dialog button{
    border-radius:16px!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-weight:820!important;
    transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease, border-color .16s ease!important;
}

.sm360-real-cancel-btn,
.sm360-reserve-modal .sm360-real-cancel-btn,
.sm360-reserve-dialog .sm360-real-cancel-btn{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    min-height:48px!important;
    padding:0 18px!important;
    color:#B4232A!important;
    background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(254,226,226,.78))!important;
    border:1px solid rgba(239,68,68,.30)!important;
    box-shadow:0 12px 28px rgba(239,68,68,.10), inset 0 1px 0 rgba(255,255,255,.90)!important;
}

.sm360-real-save-btn,
.sm360-reserve-modal .sm360-real-save-btn,
.sm360-reserve-dialog .sm360-real-save-btn{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    min-height:48px!important;
    padding:0 18px!important;
    color:#fff!important;
    background:
        radial-gradient(circle at 22% 14%, rgba(255,255,255,.26), transparent 34%),
        linear-gradient(135deg,#22C55E,#16A34A 56%,#0F7A3D)!important;
    border:1px solid rgba(255,255,255,.32)!important;
    box-shadow:0 16px 36px rgba(22,163,74,.24), inset 0 1px 0 rgba(255,255,255,.34)!important;
}

.sm360-real-cancel-btn:hover,
.sm360-real-save-btn:hover{
    transform:translateY(-2px) scale(1.02)!important;
}

.sm360-reserve-btn-icon{
    width:18px!important;
    height:18px!important;
    display:inline-block!important;
    background:currentColor!important;
    mask:var(--sm360-reserve-btn-icon) center/contain no-repeat!important;
    -webkit-mask:var(--sm360-reserve-btn-icon) center/contain no-repeat!important;
}

.sm360-reserve-btn-icon-cancel{
    --sm360-reserve-btn-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

.sm360-reserve-btn-icon-save{
    --sm360-reserve-btn-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background:#fff!important;
}

/* Bloquear horario */
.sm360-block-schedule-btn{
    min-width:132px!important;
}

/* Ocultar bloque viejo de hora solo visualmente */
.sm360-old-time-hidden{
    position:absolute!important;
    opacity:0!important;
    pointer-events:none!important;
    height:0!important;
    min-height:0!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
}

@media(max-width:640px){
    .sm360-real-time-grid{
        grid-template-columns:1fr!important;
    }
}
/* ==========================================================
   SpaMaster 360 v28.3 — New Reservation Clean Modal
   Limpia scroll + autocomplete sin romper estructura original
   ========================================================== */

:root{
    --sm360-clean-ink:#0F172A;
    --sm360-clean-muted:#64748B;
    --sm360-clean-purple:#6D4AFF;
    --sm360-clean-green:#16A34A;
    --sm360-clean-red:#EF4444;
}

/* Modal: scroll funcional */
.agenda-v221-modal-backdrop{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    align-items:flex-start!important;
    padding:18px 0!important;
}

.agenda-v221-modal{
    max-height:calc(100vh - 36px)!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
}

.agenda-v221-modal-head{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    flex:0 0 auto!important;
}

.agenda-v221-modal-body{
    flex:1 1 auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    max-height:calc(100vh - 112px)!important;
    padding-bottom:24px!important;
}

/* Nueva reserva visual */
.sm360-clean-reservation-modal,
.agenda-reservation-pro.sm360-clean-reservation-modal{
    border-radius:28px!important;
    background:
        radial-gradient(circle at 8% 6%,rgba(109,74,255,.10),transparent 30%),
        radial-gradient(circle at 96% 8%,rgba(22,163,74,.06),transparent 28%),
        linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.76))!important;
    border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:0 24px 70px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.90)!important;
    backdrop-filter:blur(24px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.18)!important;
}

/* Cards internas */
.sm360-clean-reservation-modal .agenda-v221-form-card{
    border-radius:22px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.68))!important;
    border:1px solid rgba(148,163,184,.20)!important;
    box-shadow:0 16px 38px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.88)!important;
    overflow:visible!important;
}

/* Inputs */
.sm360-clean-reservation-modal input,
.sm360-clean-reservation-modal select,
.sm360-clean-reservation-modal textarea{
    border-radius:16px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.72))!important;
    border:1px solid rgba(148,163,184,.24)!important;
    box-shadow:0 10px 24px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.88)!important;
    color:var(--sm360-clean-ink)!important;
}

.sm360-clean-reservation-modal input:focus,
.sm360-clean-reservation-modal select:focus,
.sm360-clean-reservation-modal textarea:focus{
    outline:none!important;
    border-color:rgba(109,74,255,.46)!important;
    box-shadow:0 0 0 4px rgba(109,74,255,.10),0 12px 28px rgba(109,74,255,.08)!important;
}

/* Buscador cliente: una sola lupa, estructura original intacta */
.agenda-client-search-wrap.sm360-clean-client-search{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:52px!important;
    overflow:visible!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.74))!important;
    border:1px solid rgba(148,163,184,.25)!important;
    box-shadow:0 12px 28px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.90)!important;
    z-index:100!important;
}

.agenda-client-search-wrap.sm360-clean-client-search::before,
.agenda-client-search-wrap.sm360-clean-client-search::after{
    content:none!important;
    display:none!important;
}

.sm360-clean-search-icon{
    width:50px!important;
    min-width:50px!important;
    height:52px!important;
    display:grid!important;
    place-items:center!important;
    font-size:0!important;
}

.sm360-clean-search-icon::before{
    content:""!important;
    width:21px!important;
    height:21px!important;
    background:linear-gradient(135deg,#6D4AFF,#2F80ED)!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center/contain no-repeat!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center/contain no-repeat!important;
}

.agenda-client-search-wrap.sm360-clean-client-search #arClientSearch{
    flex:1!important;
    min-height:52px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    padding-left:0!important;
    border-radius:0!important;
}

.sm360-clean-client-clear{
    width:48px!important;
    min-width:48px!important;
    height:52px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:0 18px 18px 0!important;
    border-left:1px solid rgba(148,163,184,.16)!important;
    background:rgba(248,250,252,.62)!important;
    color:#64748B!important;
    font-size:0!important;
    cursor:pointer!important;
}

.sm360-clean-client-clear::before{
    content:""!important;
    width:19px!important;
    height:19px!important;
    background:#64748B!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/contain no-repeat!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/contain no-repeat!important;
}

/* Dropdown/lista de clientes: no se corta y queda sobre el modal */
#arClientSuggestions,
.agenda-client-suggestions,
.agenda-client-results,
.client-suggestions{
    z-index:999999!important;
    max-height:260px!important;
    overflow-y:auto!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.88))!important;
    border:1px solid rgba(148,163,184,.24)!important;
    box-shadow:0 22px 60px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.92)!important;
    backdrop-filter:blur(22px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
}

/* Evitar que el modal corte dropdowns internos */
.sm360-clean-reservation-modal,
.sm360-clean-reservation-modal .agenda-v221-form-card,
.sm360-clean-reservation-modal .agenda-v221-field{
    overflow:visible!important;
}

/* Horario */
.sm360-clean-time-panel{
    margin-top:14px!important;
    padding:16px!important;
    border-radius:22px!important;
    background:
        radial-gradient(circle at 8% 10%,rgba(109,74,255,.09),transparent 34%),
        linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.68))!important;
    border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:0 16px 38px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.86)!important;
}

.sm360-clean-time-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    margin-bottom:12px!important;
}

.sm360-clean-time-head span{
    color:#64748B!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:12px!important;
    font-weight:780!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
}

.sm360-clean-time-head b{
    padding:5px 10px!important;
    border-radius:999px!important;
    background:rgba(109,74,255,.10)!important;
    color:#5E2BFF!important;
    font-size:12px!important;
}

.sm360-clean-time-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:14px!important;
}

.sm360-clean-time-grid label{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
}

.sm360-clean-time-grid label span{
    color:#475569!important;
    font-size:12px!important;
    font-weight:740!important;
}

/* Botones */
.sm360-clean-cancel-btn,
.sm360-clean-save-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    min-height:48px!important;
    padding:0 18px!important;
    border-radius:16px!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-weight:820!important;
    transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease!important;
}

.sm360-clean-cancel-btn{
    color:#B4232A!important;
    background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(254,226,226,.78))!important;
    border:1px solid rgba(239,68,68,.30)!important;
    box-shadow:0 12px 28px rgba(239,68,68,.10), inset 0 1px 0 rgba(255,255,255,.90)!important;
}

.sm360-clean-save-btn{
    color:#fff!important;
    background:radial-gradient(circle at 22% 14%,rgba(255,255,255,.24),transparent 34%), linear-gradient(135deg,#22C55E,#16A34A 58%,#0F7A3D)!important;
    border:1px solid rgba(255,255,255,.32)!important;
    box-shadow:0 16px 36px rgba(22,163,74,.24), inset 0 1px 0 rgba(255,255,255,.32)!important;
}

.sm360-clean-cancel-btn:hover,
.sm360-clean-save-btn:hover{
    transform:translateY(-2px) scale(1.02)!important;
}

.sm360-clean-btn-icon{
    width:18px!important;
    height:18px!important;
    display:inline-block!important;
    background:currentColor!important;
    mask:var(--sm360-clean-icon) center/contain no-repeat!important;
    -webkit-mask:var(--sm360-clean-icon) center/contain no-repeat!important;
}

.sm360-clean-icon-x{
    --sm360-clean-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}

.sm360-clean-icon-check{
    --sm360-clean-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background:#fff!important;
}

@media(max-width:640px){
    .sm360-clean-time-grid{grid-template-columns:1fr!important;}
}
/* ==========================================================
   SpaMaster 360 v30.3 — Compact New Reservation Modal
   Reduce alto y espacios en Nueva Reserva sin tocar lógica.
   ========================================================== */

/* Modal más eficiente */
.agenda-v221-modal,
.sm360-clean-reservation-modal{
    max-width:760px!important;
}

.agenda-v221-modal-body{
    padding:10px 14px 14px!important;
    gap:10px!important;
}

/* Header más compacto */
.agenda-v221-modal-header{
    min-height:48px!important;
    padding:10px 16px!important;
}

.agenda-v221-modal-header h2,
.agenda-v221-modal-title{
    font-size:18px!important;
    line-height:1.1!important;
    margin:0!important;
}

/* Tarjetas del formulario más delgadas */
.agenda-v221-form-card,
.agenda-v221-card,
.sm360-real-card{
    border-radius:20px!important;
    padding:12px 14px!important;
    margin-bottom:10px!important;
}

/* Quitar aire extra de sección fecha/hora */
.agenda-v221-form-card:has(#arDate),
.agenda-v221-form-card:has(#arStartTime),
.agenda-v221-form-card:has(#arEndTime){
    padding:10px 14px!important;
}

/* Compactar títulos/labels */
.agenda-v221-form-card label,
.agenda-v221-field label,
.agenda-v221-label,
.agenda-v221-form-card > label,
.agenda-v221-form-card .section-label{
    font-size:11px!important;
    letter-spacing:.055em!important;
    line-height:1.1!important;
    margin:0 0 5px!important;
    color:#64748B!important;
}

/* Fecha: un solo campo delgado */
#arDate{
    height:44px!important;
    min-height:44px!important;
    padding:0 14px!important;
    border-radius:15px!important;
}

/* Caja Horario más compacta */
.agenda-v221-time-card,
.agenda-v221-form-card:has(#arStartTime):has(#arEndTime){
    padding:10px 14px!important;
    border-radius:18px!important;
}

/* Ocultar badge Ajustable innecesario */
.agenda-v221-time-card .badge,
.agenda-v221-time-card .pill,
.agenda-v221-time-card [class*="badge"],
.agenda-v221-time-card [class*="pill"],
.agenda-v221-form-card:has(#arStartTime):has(#arEndTime) [class*="badge"],
.agenda-v221-form-card:has(#arStartTime):has(#arEndTime) [class*="pill"]{
    display:none!important;
}

/* Inputs de hora más bajos */
#arStartTime,
#arEndTime{
    height:42px!important;
    min-height:42px!important;
    padding:0 14px!important;
    border-radius:15px!important;
}

/* Grid de fecha/hora más pegado */
.agenda-v221-time-grid,
.agenda-v221-row:has(#arStartTime),
.agenda-v221-row:has(#arEndTime){
    gap:10px!important;
}

/* Cliente: tarjeta más compacta */
.agenda-v221-form-card:has(#arClientSearch){
    padding:10px 14px 12px!important;
}

/* Barra búsqueda cliente más baja */
.agenda-client-search-wrap{
    min-height:48px!important;
    height:48px!important;
    grid-template-columns:48px 1fr 48px!important;
    border-radius:17px!important;
}

.agenda-client-search-wrap #arClientSearch{
    height:48px!important;
    min-height:48px!important;
    font-size:14px!important;
}

.agenda-client-search-wrap .sm360-clean-search-icon,
.agenda-client-search-wrap > span:first-child{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
}

.agenda-client-search-wrap .sm360-clean-search-icon::before,
.agenda-client-search-wrap > span:first-child::before{
    width:20px!important;
    height:20px!important;
}

#arClientClear,
.agenda-client-clear,
.sm360-clean-client-clear{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    border-radius:0 17px 17px 0!important;
}

/* Resultados siguen visibles pero más compactos */
#arClientResults{
    top:calc(100% + 7px)!important;
    max-height:245px!important;
    border-radius:17px!important;
    padding:6px!important;
}

#arClientResults .agenda-v221-client-option{
    min-height:50px!important;
    padding:9px 12px!important;
    border-radius:14px!important;
}

#arClientResults .agenda-v221-client-option strong{
    font-size:13.5px!important;
}

#arClientResults .agenda-v221-client-option small{
    font-size:11.5px!important;
}

/* Campos de cliente más delgados */
#arClientName,
#arNombre,
#arNuevoNombre,
#arClientLastName,
#arApellido,
#arPhone,
#arClientPhone,
#arTelefono,
#arDocument,
#arClientDoc,
#arCedula,
#arEmail,
#arClientEmail,
.agenda-v221-form-card:has(#arClientSearch) input:not(#arClientSearch){
    height:42px!important;
    min-height:42px!important;
    padding:0 13px!important;
    border-radius:15px!important;
    font-size:14px!important;
}

/* Menos separación entre filas de datos cliente */
.agenda-v221-form-card:has(#arClientSearch) .agenda-v221-grid,
.agenda-v221-form-card:has(#arClientSearch) .agenda-v221-row,
.agenda-v221-form-card:has(#arClientSearch) [class*="grid"],
.agenda-v221-form-card:has(#arClientSearch) [class*="row"]{
    gap:9px 10px!important;
}

/* Campo teléfono con prefijos más compacto */
.agenda-v221-phone-wrap,
.phone-input-wrap,
[class*="phone"]:has(input){
    min-height:42px!important;
}

.agenda-v221-phone-wrap input,
.phone-input-wrap input{
    height:42px!important;
    min-height:42px!important;
}

/* Servicio también un poco más compacto para aprovechar el modal */
.agenda-v221-form-card:has(.agenda-v221-service-card),
.agenda-v221-form-card:has(.agenda-package-card){
    padding:10px 14px!important;
}

.agenda-v221-service-card,
.agenda-package-card,
.agenda-v221-service-option{
    min-height:64px!important;
    padding:9px 11px!important;
    border-radius:16px!important;
}

.agenda-v221-service-card img,
.agenda-package-card img,
.agenda-v221-service-option img{
    width:48px!important;
    height:48px!important;
    border-radius:12px!important;
}

.agenda-v221-service-card strong,
.agenda-package-card strong,
.agenda-v221-service-option strong{
    font-size:13.5px!important;
}

.agenda-v221-service-card small,
.agenda-package-card small,
.agenda-v221-service-option small{
    font-size:11.5px!important;
}

/* Compactar sección de precio/estado/adicionales/notas */
.agenda-v221-form-card input,
.agenda-v221-form-card select,
.agenda-v221-form-card textarea{
    border-radius:15px!important;
}

.agenda-v221-form-card input,
.agenda-v221-form-card select{
    min-height:42px!important;
    height:42px!important;
}

.agenda-v221-form-card textarea{
    min-height:72px!important;
}

/* Footer del modal más compacto y sticky más limpio */
.agenda-v221-modal-footer{
    padding:10px 14px!important;
    gap:10px!important;
}

.agenda-v221-modal-footer button{
    min-height:42px!important;
    padding:0 18px!important;
    border-radius:15px!important;
}

/* Responsive */
@media (max-width: 820px){
    .agenda-v221-modal,
    .sm360-clean-reservation-modal{
        max-width:calc(100vw - 18px)!important;
    }

    .agenda-v221-modal-body{
        padding:8px 10px 12px!important;
    }

    .agenda-v221-form-card{
        padding:10px!important;
    }
}

/* SpaMaster360 v84.3.1 — authoritative canonical shell */
html,body{min-height:100%}
html:not(.sm360-modal-open),body:not(.sm360-modal-open){pointer-events:auto!important}
html.sm360-mobile-shell-booting-v7160 body>.app-shell,
html.sm360-mobile-shell-booting-v7160 body>.mobile-top{visibility:visible!important;opacity:1!important;pointer-events:auto!important}
#sm360MobileBootV7160,.sm360-mobile-blocker,.sm360-route-blocker{display:none!important;pointer-events:none!important}
#sm360ReceptionDashboard[data-sm360-canonical="84.3.1"]{display:block!important;visibility:visible!important;opacity:1!important}
@media(max-width:900px){
  body{overflow-x:hidden!important}
  .app-shell,.content,.main-content,main{min-width:0!important;max-width:100%!important}
  .view:not(.hidden){display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .view.hidden{display:none!important}
  #view-general{min-height:auto!important}
  #sm360ReceptionDashboard{padding:12px!important}
  #sm360ReceptionDashboard .sm360-reception-kpis,
  #sm360ReceptionDashboard .sm360-reception-columns{grid-template-columns:1fr!important}
  #sm360ReceptionDashboard .sm360-reception-shortcuts{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
}