/* ==========================================================
   SpaMaster 360 v28.5 — Summary Modal Stable Tabs + Icons
   ========================================================== */

/* Evitar parpadeo: no transiciones en layout del body del modal */
.agenda-v221-modal:has(.sm360-summary-v285),
.agenda-v221-modal:has(.sm360-summary-v285) *,
.sm360-summary-v285,
.sm360-summary-v285 *{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
}

/* Scroll estable */
.agenda-v221-modal-backdrop:has(.sm360-summary-v285){
    align-items:flex-start!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:18px 0!important;
}

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

.agenda-v221-modal:has(.sm360-summary-v285) .agenda-v221-modal-head{
    position:sticky!important;
    top:0!important;
    z-index:80!important;
    flex:0 0 auto!important;
    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.78))!important;
    border-bottom:1px solid rgba(148,163,184,.18)!important;
    backdrop-filter:blur(18px) saturate(1.14)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.14)!important;
}

.agenda-v221-modal:has(.sm360-summary-v285) .agenda-v221-modal-body{
    flex:1 1 auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    max-height:calc(100vh - 118px)!important;
    padding-bottom:22px!important;
}

/* X fija */
.agenda-v221-modal:has(.sm360-summary-v285) .agenda-v221-close{
    position:absolute!important;
    top:12px!important;
    right:14px!important;
    z-index:100!important;
    width:42px!important;
    height:42px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.82)!important;
    border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:0 12px 28px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.90)!important;
    color:#0F172A!important;
    transform:none!important;
}

/* Contenedor superior de tabs reubicado por JS */
.sm360-summary-tabs-anchor-v285{
    order:-100!important;
    width:100%!important;
    display:block!important;
    margin:0 0 12px!important;
}

/* Forzar tabs arriba y limpias */
.sm360-summary-v285 .agenda-detail-tabs,
.sm360-summary-tabs-v285{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:8px!important;
    margin:0!important;
    border-radius:20px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(255,255,255,.72))!important;
    border:1px solid rgba(148,163,184,.20)!important;
    box-shadow:0 12px 28px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.88)!important;
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    z-index:10!important;
}

.sm360-summary-v285 .agenda-detail-tabs button,
.sm360-summary-tabs-v285 button{
    min-height:40px!important;
    padding:0 18px!important;
    border-radius:15px!important;
    border:0!important;
    background:rgba(241,245,249,.72)!important;
    color:#475569!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-weight:760!important;
}

.sm360-summary-v285 .agenda-detail-tabs button.active,
.sm360-summary-tabs-v285 button.active{
    background:linear-gradient(135deg,#7C3AED,#5E2BFF)!important;
    color:#fff!important;
    box-shadow:0 12px 28px rgba(94,43,255,.22)!important;
}

/* Duplicadas ocultas */
.sm360-tabs-duplicate-v285,
.sm360-summary-v285 .agenda-detail-tabs:not(:first-of-type).sm360-tabs-duplicate-v285{
    display:none!important;
}

/* Leyenda justo debajo de tabs */
.sm360-summary-v285 .agenda-detail-legend{
    margin:8px 0 14px!important;
    padding:10px 12px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.55)!important;
    border:1px solid rgba(148,163,184,.16)!important;
    color:#64748B!important;
    line-height:1.45!important;
}

/* Modal y cards */
.sm360-summary-v285{
    border-radius:28px!important;
    background:
        radial-gradient(circle at 7% 4%,rgba(109,74,255,.10),transparent 30%),
        radial-gradient(circle at 98% 8%,rgba(47,128,237,.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 28px 76px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.90)!important;
}

.sm360-summary-v285 .agenda-v221-form-card,
.sm360-summary-v285 .agenda-service-option,
.sm360-summary-v285 .agenda-notes-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,.22)!important;
    box-shadow:0 16px 38px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.88)!important;
}

/* Pago amarillo por defecto, verde solo pagado */
.sm360-summary-v285 .agenda-payment-pro{
    border-radius:22px!important;
    background:
        radial-gradient(circle at 8% 10%,rgba(245,158,11,.13),transparent 34%),
        linear-gradient(135deg,rgba(255,251,235,.92),rgba(255,255,255,.72))!important;
    border:1px solid rgba(245,158,11,.38)!important;
    box-shadow:0 18px 44px rgba(245,158,11,.14), inset 0 1px 0 rgba(255,255,255,.88)!important;
}

.sm360-summary-v285 .agenda-payment-pro.sm360-payment-paid-v285{
    background:
        radial-gradient(circle at 8% 10%,rgba(22,163,74,.12),transparent 34%),
        linear-gradient(135deg,rgba(236,253,245,.88),rgba(255,255,255,.70))!important;
    border-color:rgba(22,163,74,.30)!important;
    box-shadow:0 18px 44px rgba(22,163,74,.12), inset 0 1px 0 rgba(255,255,255,.88)!important;
}

/* Métodos de pago: iconos reales insertados por JS */
.sm360-summary-v285 .agenda-payment-methods button{
    position:relative!important;
    min-height:84px!important;
    border-radius:20px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(255,255,255,.70))!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,.86)!important;
    transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease!important;
}

.sm360-summary-v285 .agenda-payment-methods button:hover{
    transform:translateY(-1px)!important;
}

.sm360-pay-icon-v285{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:14px!important;
    background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.52),transparent 42%),linear-gradient(135deg,var(--payA),var(--payB))!important;
    box-shadow:0 12px 26px var(--payShadow), inset 0 1px 0 rgba(255,255,255,.42)!important;
    font-size:0!important;
}

.sm360-pay-icon-v285::before{
    content:""!important;
    width:19px!important;
    height:19px!important;
    background:#fff!important;
    mask:var(--payIcon) center/contain no-repeat!important;
    -webkit-mask:var(--payIcon) center/contain no-repeat!important;
}

.sm360-pay-cash-v285{--payA:#22C55E;--payB:#0F7A3D;--payShadow:rgba(22,163,74,.22);--payIcon: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%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");}
.sm360-pay-card-v285{--payA:#38BDF8;--payB:#2563EB;--payShadow:rgba(37,99,235,.22);--payIcon: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%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M7 15h.01M11 15h2'/%3E%3C/svg%3E");}
.sm360-pay-bank-v285{--payA:#A78BFA;--payB:#6D4AFF;--payShadow:rgba(109,74,255,.22);--payIcon: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='M3 21h18'/%3E%3Cpath d='M5 21V10'/%3E%3Cpath d='M19 21V10'/%3E%3Cpath d='M9 21V10'/%3E%3Cpath d='M15 21V10'/%3E%3Cpath d='M12 3 2 9h20z'/%3E%3C/svg%3E");}

/* Ocultar emojis antiguos solo si el icono nuevo existe */
.sm360-payment-icon-patched-v285 > span:first-child:not(.sm360-pay-icon-v285){
    display:none!important;
}

/* Botones principales */
.sm360-rs-cancel-btn,
.sm360-rs-save-btn,
.sm360-rs-payment-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-rs-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-rs-save-btn{
    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{
    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;
}

/* Eliminar pago icono rojo */
#rdDeletePayment,
.sm360-rs-delete-btn{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    padding:0!important;
    display:inline-grid!important;
    place-items:center!important;
    border-radius:16px!important;
    color:#EF4444!important;
    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(254,226,226,.82))!important;
    border:1px solid rgba(239,68,68,.34)!important;
    box-shadow:0 12px 28px rgba(239,68,68,.14), inset 0 1px 0 rgba(255,255,255,.92)!important;
}

#rdDeletePayment .sm360-rs-btn-icon,
.sm360-rs-delete-btn .sm360-rs-btn-icon{
    width:20px!important;
    height:20px!important;
    display:block!important;
    background:#EF4444!important;
    opacity:1!important;
    visibility:visible!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.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") 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.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") center/contain no-repeat!important;
}

/* Iconos botones inferiores */
.sm360-rs-btn-icon{
    width:18px!important;
    height:18px!important;
    display:inline-block!important;
    background:currentColor!important;
    mask:var(--rsIcon) center/contain no-repeat!important;
    -webkit-mask:var(--rsIcon) center/contain no-repeat!important;
}
.sm360-rs-icon-cancel{--rsIcon: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{--rsIcon: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{--rsIcon: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;}