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