/* ==========================================================
   SpaMaster 360 Enterprise ERP v27.7
   Reserva Summary Modal Liquid Glass
   ========================================================== */

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

/* Modal resumen / edición de reserva */
.sm360-reserva-summary-modal,
.sm360-reserva-summary-modal .modal-content,
.sm360-reserva-summary-modal .dialog-content,
.sm360-reserva-summary-modal [role="dialog"],
body .sm360-reserva-summary-dialog{
    border-radius:30px!important;
    background:
        radial-gradient(circle at 8% 6%, rgba(109,74,255,.10), transparent 30%),
        radial-gradient(circle at 96% 8%, rgba(47,128,237,.06), 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-rs-ink)!important;
    overflow:hidden!important;
}

/* Header */
.sm360-reserva-summary-modal h1,
.sm360-reserva-summary-modal h2,
.sm360-reserva-summary-modal h3,
.sm360-reserva-summary-dialog h1,
.sm360-reserva-summary-dialog h2,
.sm360-reserva-summary-dialog h3{
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    color:var(--sm360-rs-ink)!important;
    font-weight:800!important;
    letter-spacing:-.04em!important;
}

.sm360-reserva-summary-modal [data-close],
.sm360-reserva-summary-dialog [data-close],
.sm360-reserva-summary-modal .modal-close,
.sm360-reserva-summary-dialog .modal-close,
.sm360-reserva-summary-modal button[aria-label*="close" i],
.sm360-reserva-summary-dialog button[aria-label*="close" i]{
    border-radius:14px!important;
    background:rgba(255,255,255,.66)!important;
    border:1px solid rgba(148,163,184,.18)!important;
    box-shadow:0 10px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.88)!important;
}

/* Labels */
.sm360-reserva-summary-modal label,
.sm360-reserva-summary-dialog label,
.sm360-reserva-summary-modal .agenda-section-label,
.sm360-reserva-summary-dialog .agenda-section-label{
    color:var(--sm360-rs-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;
}

/* Cards internas */
.sm360-reserva-summary-modal .agenda-v221-form-card,
.sm360-reserva-summary-modal .agenda-payment-card,
.sm360-reserva-summary-modal .agenda-payment-section,
.sm360-reserva-summary-modal .agenda-service-card,
.sm360-reserva-summary-modal .agenda-notes-card,
.sm360-reserva-summary-dialog .agenda-v221-form-card,
.sm360-reserva-summary-dialog .agenda-payment-card,
.sm360-reserva-summary-dialog .agenda-payment-section,
.sm360-reserva-summary-dialog .agenda-service-card,
.sm360-reserva-summary-dialog .agenda-notes-card,
.sm360-reserva-summary-modal .sm360-rs-card,
.sm360-reserva-summary-dialog .sm360-rs-card{
    border-radius:22px!important;
    background:
        radial-gradient(circle at 8% 10%, rgba(255,255,255,.82), transparent 36%),
        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;
    backdrop-filter:blur(18px) saturate(1.16)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.16)!important;
}

/* Card de pago con verde más premium */
.sm360-reserva-summary-modal .agenda-payment-card,
.sm360-reserva-summary-modal .agenda-payment-section,
.sm360-reserva-summary-dialog .agenda-payment-card,
.sm360-reserva-summary-dialog .agenda-payment-section,
.sm360-rs-payment-card{
    background:
        radial-gradient(circle at 8% 10%, rgba(22,163,74,.11), transparent 34%),
        linear-gradient(135deg,rgba(236,253,245,.86),rgba(255,255,255,.68))!important;
    border-color:rgba(22,163,74,.26)!important;
    box-shadow:
        0 18px 42px rgba(22,163,74,.10),
        inset 0 1px 0 rgba(255,255,255,.86)!important;
}

/* Inputs */
.sm360-reserva-summary-modal input,
.sm360-reserva-summary-modal select,
.sm360-reserva-summary-modal textarea,
.sm360-reserva-summary-dialog input,
.sm360-reserva-summary-dialog select,
.sm360-reserva-summary-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-rs-ink)!important;
    font-family:var(--sc-font-body,"Manrope",sans-serif)!important;
    font-weight:620!important;
    outline:none!important;
}

.sm360-reserva-summary-modal input:focus,
.sm360-reserva-summary-modal select:focus,
.sm360-reserva-summary-modal textarea:focus,
.sm360-reserva-summary-dialog input:focus,
.sm360-reserva-summary-dialog select:focus,
.sm360-reserva-summary-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;
}

/* Servicio seleccionado y lista de servicios */
.sm360-reserva-summary-modal .service-selected,
.sm360-reserva-summary-modal .agenda-service-selected,
.sm360-reserva-summary-dialog .service-selected,
.sm360-reserva-summary-dialog .agenda-service-selected{
    border-radius:20px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(248,250,252,.72))!important;
    border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:0 14px 32px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.86)!important;
}

.sm360-reserva-summary-modal .service-option,
.sm360-reserva-summary-modal .agenda-service-option,
.sm360-reserva-summary-dialog .service-option,
.sm360-reserva-summary-dialog .agenda-service-option{
    border-radius:18px!important;
    background:rgba(255,255,255,.72)!important;
    border:1px solid rgba(148,163,184,.18)!important;
    box-shadow:0 10px 24px rgba(15,23,42,.04)!important;
    transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease!important;
}

.sm360-reserva-summary-modal .service-option:hover,
.sm360-reserva-summary-modal .agenda-service-option:hover,
.sm360-reserva-summary-dialog .service-option:hover,
.sm360-reserva-summary-dialog .agenda-service-option:hover{
    transform:translateY(-1px)!important;
    border-color:rgba(109,74,255,.32)!important;
    box-shadow:0 14px 30px rgba(109,74,255,.08)!important;
}

/* Método de pago como cards liquid */
.sm360-reserva-summary-modal .payment-method,
.sm360-reserva-summary-modal .agenda-payment-method,
.sm360-reserva-summary-modal .pay-method,
.sm360-reserva-summary-dialog .payment-method,
.sm360-reserva-summary-dialog .agenda-payment-method,
.sm360-reserva-summary-dialog .pay-method{
    border-radius:18px!important;
    background: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 12px 28px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.84)!important;
    transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease!important;
}

.sm360-reserva-summary-modal .payment-method:hover,
.sm360-reserva-summary-modal .agenda-payment-method:hover,
.sm360-reserva-summary-modal .pay-method:hover,
.sm360-reserva-summary-dialog .payment-method:hover,
.sm360-reserva-summary-dialog .agenda-payment-method:hover,
.sm360-reserva-summary-dialog .pay-method:hover{
    transform:translateY(-1px)!important;
    border-color:rgba(22,163,74,.32)!important;
}

.sm360-reserva-summary-modal .payment-method.active,
.sm360-reserva-summary-modal .agenda-payment-method.active,
.sm360-reserva-summary-modal .pay-method.active,
.sm360-reserva-summary-dialog .payment-method.active,
.sm360-reserva-summary-dialog .agenda-payment-method.active,
.sm360-reserva-summary-dialog .pay-method.active{
    border-color:rgba(22,163,74,.54)!important;
    background:linear-gradient(135deg,rgba(236,253,245,.86),rgba(255,255,255,.70))!important;
    box-shadow:0 14px 32px rgba(22,163,74,.12), inset 0 1px 0 rgba(255,255,255,.88)!important;
}

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

.sm360-rs-cancel-btn,
.sm360-reserva-summary-modal .sm360-rs-cancel-btn,
.sm360-reserva-summary-dialog .sm360-rs-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-rs-save-btn,
.sm360-reserva-summary-modal .sm360-rs-save-btn,
.sm360-reserva-summary-dialog .sm360-rs-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,.24), transparent 34%),
        linear-gradient(135deg,#7C3AED,#5E2BFF 58%,#4C1D95)!important;
    border:1px solid rgba(255,255,255,.32)!important;
    box-shadow:0 16px 36px rgba(94,43,255,.24), inset 0 1px 0 rgba(255,255,255,.32)!important;
}

.sm360-rs-payment-btn,
.sm360-reserva-summary-modal .sm360-rs-payment-btn,
.sm360-reserva-summary-dialog .sm360-rs-payment-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,.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-rs-delete-btn,
.sm360-reserva-summary-modal .sm360-rs-delete-btn,
.sm360-reserva-summary-dialog .sm360-rs-delete-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    padding:0!important;
    border-radius:16px!important;
    color:#EF4444!important;
    background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(254,226,226,.76))!important;
    border:1px solid rgba(239,68,68,.24)!important;
    box-shadow:0 12px 28px rgba(239,68,68,.10), inset 0 1px 0 rgba(255,255,255,.90)!important;
}

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

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

.sm360-rs-icon-cancel{
    --sm360-rs-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-rs-icon-save{
    --sm360-rs-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='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7H7v7'/%3E%3Cpath d='M7 3v5h8'/%3E%3C/svg%3E");
    background:#fff!important;
}

.sm360-rs-icon-payment{
    --sm360-rs-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='M12 2v20'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
    background:#fff!important;
}

.sm360-rs-icon-delete{
    --sm360-rs-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='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

/* Badges pagada / pendiente */
.sm360-reserva-summary-modal .badge,
.sm360-reserva-summary-modal .status-badge,
.sm360-reserva-summary-dialog .badge,
.sm360-reserva-summary-dialog .status-badge{
    border-radius:999px!important;
    padding:7px 12px!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-weight:820!important;
    letter-spacing:-.01em!important;
    background:rgba(255,255,255,.62)!important;
    border:1px solid rgba(148,163,184,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.86)!important;
}

/* Checkbox marcada como pagada */
.sm360-reserva-summary-modal input[type="checkbox"],
.sm360-reserva-summary-dialog input[type="checkbox"]{
    accent-color:#16A34A!important;
}