/* ==========================================================
   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;
    }
}