/* ========================================================== SpaMaster 360 v28.6 — Payment Icons Liquid + Close Fix ========================================================== */ /* X de cierre perfectamente centrada */ .agenda-v221-close, .agenda-v221-modal:has(.sm360-summary-v285) .agenda-v221-close, .agenda-v221-modal:has(.sm360-summary-v284) .agenda-v221-close, .agenda-v221-modal:has(.agenda-detail-pro) .agenda-v221-close{ position:absolute!important; top:12px!important; right:14px!important; width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; padding:0!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:center!important; line-height:1!important; text-align:center!important; border-radius:16px!important; background:rgba(255,255,255,.84)!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; font-size:0!important; transform:none!important; z-index:120!important; } .agenda-v221-close::before, .agenda-v221-modal:has(.sm360-summary-v285) .agenda-v221-close::before, .agenda-v221-modal:has(.agenda-detail-pro) .agenda-v221-close::before{ content:""!important; width:20px!important; height:20px!important; display:block!important; background:#0F172A!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.6' 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.6' 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; } /* Métodos de pago: eliminar emojis viejos y usar Liquid Glass */ .sm360-summary-v285 .agenda-payment-methods button, .sm360-summary-v284 .agenda-payment-methods button, .agenda-payment-methods button.sm360-pay-method-liquid-v286{ position:relative!important; min-height:92px!important; padding:16px 14px 14px!important; border-radius:22px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:10px!important; background: radial-gradient(circle at 15% 8%,rgba(255,255,255,.96),transparent 35%), linear-gradient(135deg,rgba(255,255,255,.90),rgba(255,255,255,.68))!important; border:1px solid rgba(148,163,184,.22)!important; box-shadow: 0 14px 34px rgba(15,23,42,.060), inset 0 1px 0 rgba(255,255,255,.90)!important; color:#0F172A!important; font-family:var(--sc-font-display,"General Sans",sans-serif)!important; font-weight:820!important; overflow:hidden!important; transition: transform .16s cubic-bezier(.2,.8,.2,1), border-color .16s ease, box-shadow .16s ease!important; } .sm360-summary-v285 .agenda-payment-methods button:hover, .sm360-summary-v284 .agenda-payment-methods button:hover, .agenda-payment-methods button.sm360-pay-method-liquid-v286:hover{ transform:translateY(-2px) scale(1.01)!important; box-shadow: 0 18px 42px rgba(15,23,42,.085), inset 0 1px 0 rgba(255,255,255,.92)!important; } /* Ocultar spans/emoji heredados antes del texto */ .agenda-payment-methods button.sm360-pay-method-liquid-v286 > span:not(.sm360-pay-icon-liquid-v286):first-child, .agenda-payment-methods button.sm360-payment-icon-patched-v285 > span:not(.sm360-pay-icon-liquid-v286):first-child, .agenda-payment-methods button.sm360-payment-icon-patched-v285 > .sm360-pay-icon-v285{ display:none!important; } /* Icono liquid */ .sm360-pay-icon-liquid-v286{ width:40px!important; height:40px!important; min-width:40px!important; display:grid!important; place-items:center!important; border-radius:16px!important; background: radial-gradient(circle at 28% 18%,rgba(255,255,255,.58),transparent 42%), linear-gradient(135deg,var(--sm360-pay-a),var(--sm360-pay-b))!important; box-shadow: 0 14px 28px var(--sm360-pay-shadow), inset 0 1px 0 rgba(255,255,255,.46)!important; font-size:0!important; position:relative!important; } .sm360-pay-icon-liquid-v286::before{ content:""!important; width:20px!important; height:20px!important; display:block!important; background:#fff!important; mask:var(--sm360-pay-mask) center/contain no-repeat!important; -webkit-mask:var(--sm360-pay-mask) center/contain no-repeat!important; } .sm360-pay-liquid-cash-v286{ --sm360-pay-a:#22C55E; --sm360-pay-b:#0F7A3D; --sm360-pay-shadow:rgba(22,163,74,.24); --sm360-pay-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.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2.5'/%3E%3Ccircle cx='12' cy='12' r='2.3'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); } .sm360-pay-liquid-card-v286{ --sm360-pay-a:#38BDF8; --sm360-pay-b:#2563EB; --sm360-pay-shadow:rgba(37,99,235,.24); --sm360-pay-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.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2.5'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M7 15h.01M11 15h2'/%3E%3C/svg%3E"); } .sm360-pay-liquid-bank-v286{ --sm360-pay-a:#A78BFA; --sm360-pay-b:#6D4AFF; --sm360-pay-shadow:rgba(109,74,255,.24); --sm360-pay-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.25' 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"); } /* Estados activos por método */ .agenda-payment-methods button.sm360-pay-method-liquid-v286.active{ border-color:rgba(22,163,74,.44)!important; box-shadow: 0 18px 42px rgba(22,163,74,.14), inset 0 1px 0 rgba(255,255,255,.92)!important; background: radial-gradient(circle at 15% 8%,rgba(255,255,255,.98),transparent 35%), linear-gradient(135deg,rgba(236,253,245,.92),rgba(255,255,255,.70))!important; } /* Texto de método */ .agenda-payment-methods button.sm360-pay-method-liquid-v286 .sm360-pay-label-v286{ font-family:var(--sc-font-display,"General Sans",sans-serif)!important; font-size:15px!important; font-weight:820!important; color:#0F172A!important; line-height:1.1!important; }