/* ==========================================================
   SpaMaster 360 Enterprise ERP v27.1
   Agenda Master Safe Layout
   ========================================================== */

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

/* Recuperación: nunca permitir que el layout original se comprima por bloques inyectados */
#view-agenda,
.agenda-pro,
.agenda-master{
    width:100%!important;
    max-width:none!important;
    transform:none!important;
}

/* Header/KPI externo, NO se mete dentro del grid original */
.sm360-agenda-redesign-shell{
    width:100%!important;
    max-width:none!important;
    display:block!important;
    margin:0 0 18px!important;
    grid-column:1 / -1!important;
}

/* KPI Grid superior */
.sm360-agenda-kpi-grid-safe{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(180px,1fr))!important;
    gap:18px!important;
    margin:0 0 18px!important;
}

.sm360-agenda-kpi-safe{
    position:relative!important;
    overflow:hidden!important;
    min-height:142px!important;
    border-radius:28px!important;
    padding:24px 24px 20px 104px!important;
    background:
        radial-gradient(circle at 10% 12%,rgba(255,255,255,.90),transparent 34%),
        linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.66))!important;
    border:1px solid var(--sm360-am-line)!important;
    box-shadow:
        0 20px 52px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.86)!important;
    backdrop-filter:blur(22px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
}

.sm360-agenda-kpi-safe::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:-18px!important;
    height:64px!important;
    background:var(--sm360-wave)!important;
    opacity:.46!important;
    border-radius:50% 50% 0 0 / 48% 48% 0 0!important;
    transform:skewY(-4deg)!important;
}

.sm360-kpi-icon-safe{
    position:absolute!important;
    left:28px!important;
    top:30px!important;
    width:56px!important;
    height:56px!important;
    border-radius:20px!important;
    display:grid!important;
    place-items:center!important;
    background:var(--sm360-icon-bg)!important;
    border:1px solid var(--sm360-icon-border)!important;
    box-shadow:
        0 14px 32px var(--sm360-icon-shadow),
        inset 0 1px 0 rgba(255,255,255,.82)!important;
}

.sm360-kpi-icon-safe::before{
    content:""!important;
    width:26px!important;
    height:26px!important;
    background:var(--sm360-icon-color)!important;
    mask:var(--sm360-kpi-mask) center/contain no-repeat!important;
    -webkit-mask:var(--sm360-kpi-mask) center/contain no-repeat!important;
}

.sm360-kpi-label-safe{
    display:block!important;
    margin:10px 0 10px!important;
    color:var(--sm360-am-muted)!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:16px!important;
    font-weight:760!important;
    letter-spacing:-.01em!important;
}

.sm360-kpi-value-safe{
    display:block!important;
    color:var(--sm360-am-ink)!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:30px!important;
    line-height:1.05!important;
    font-weight:820!important;
    letter-spacing:-.04em!important;
}

.sm360-kpi-desc-safe{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    margin-top:18px!important;
    color:#64748B!important;
    font-size:14px!important;
    font-weight:560!important;
}

/* Variants */
.sm360-kpi-reservas-safe{
    --sm360-icon-bg:linear-gradient(135deg,rgba(109,74,255,.12),rgba(255,255,255,.66));
    --sm360-icon-border:rgba(109,74,255,.18);
    --sm360-icon-shadow:rgba(109,74,255,.12);
    --sm360-icon-color:#6D4AFF;
    --sm360-wave:linear-gradient(135deg,rgba(109,74,255,.18),rgba(109,74,255,.04));
    --sm360-kpi-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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E");
}
.sm360-kpi-asistencias-safe{
    --sm360-icon-bg:linear-gradient(135deg,rgba(47,128,237,.12),rgba(255,255,255,.66));
    --sm360-icon-border:rgba(47,128,237,.18);
    --sm360-icon-shadow:rgba(47,128,237,.12);
    --sm360-icon-color:#2F80ED;
    --sm360-wave:linear-gradient(135deg,rgba(47,128,237,.18),rgba(47,128,237,.04));
    --sm360-kpi-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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='m16 11 2 2 4-4'/%3E%3C/svg%3E");
}
.sm360-kpi-valor-safe{
    --sm360-icon-bg:linear-gradient(135deg,rgba(22,163,74,.12),rgba(255,255,255,.66));
    --sm360-icon-border:rgba(22,163,74,.18);
    --sm360-icon-shadow:rgba(22,163,74,.12);
    --sm360-icon-color:#16A34A;
    --sm360-wave:linear-gradient(135deg,rgba(22,163,74,.18),rgba(22,163,74,.04));
    --sm360-kpi-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.2' 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");
}
.sm360-kpi-canceladas-safe{
    --sm360-icon-bg:linear-gradient(135deg,rgba(239,68,68,.12),rgba(255,255,255,.66));
    --sm360-icon-border:rgba(239,68,68,.18);
    --sm360-icon-shadow:rgba(239,68,68,.12);
    --sm360-icon-color:#EF4444;
    --sm360-wave:linear-gradient(135deg,rgba(239,68,68,.18),rgba(239,68,68,.04));
    --sm360-kpi-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.2' 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");
}

/* Ocultar solo tarjetas exactas antiguas, no layouts */
.sm360-hide-exact-agenda-card{
    display:none!important;
}

/* Cabecera/toolbar original como Liquid Glass, sin reparenting */
#view-agenda .sm360-agenda-toolbar-safe,
.agenda-pro .sm360-agenda-toolbar-safe{
    border-radius:26px!important;
    background:
        radial-gradient(circle at 5% 12%,rgba(109,74,255,.08),transparent 26%),
        linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.66))!important;
    border:1px solid rgba(148,163,184,.20)!important;
    box-shadow:
        0 18px 46px rgba(15,23,42,.070),
        inset 0 1px 0 rgba(255,255,255,.84)!important;
    backdrop-filter:blur(22px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
    padding:14px!important;
    margin-bottom:14px!important;
}

/* Botones toolbar / nueva reserva */
#view-agenda button,
.agenda-pro button{
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;
}

#view-agenda button:hover,
.agenda-pro button:hover{
    transform:translateY(-1px)!important;
}

#view-agenda .sm360-new-reservation-safe,
.agenda-pro .sm360-new-reservation-safe{
    color:#0F7A3D!important;
    background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(236,253,245,.78))!important;
    border-color:rgba(22,163,74,.34)!important;
    box-shadow:0 12px 28px rgba(22,163,74,.12), inset 0 1px 0 rgba(255,255,255,.88)!important;
    border-radius:17px!important;
}

/* Tarjetas Liquid Glass generales */
#view-agenda .card,
#view-agenda .panel,
#view-agenda .agenda-card,
#view-agenda .agenda-panel,
#view-agenda .calendar-card,
#view-agenda .sidebar-card,
.agenda-pro .card,
.agenda-pro .panel,
.agenda-pro .agenda-card,
.agenda-pro .agenda-panel,
.agenda-pro .calendar-card,
.agenda-pro .sidebar-card{
    background:
        radial-gradient(circle at 8% 8%,rgba(255,255,255,.82),transparent 34%),
        linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,255,255,.62))!important;
    border:1px solid rgba(148,163,184,.20)!important;
    box-shadow:
        0 16px 40px rgba(15,23,42,.065),
        inset 0 1px 0 rgba(255,255,255,.80)!important;
    backdrop-filter:blur(18px) saturate(1.16)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.16)!important;
    border-radius:22px!important;
}

/* Calendario más limpio sin alterar grid */
#view-agenda .calendar-grid,
#view-agenda .agenda-calendar,
#view-agenda .calendar,
#view-agenda table,
.agenda-pro .calendar-grid,
.agenda-pro .agenda-calendar,
.agenda-pro .calendar,
.agenda-pro table{
    border-radius:22px!important;
    overflow:hidden!important;
}

#view-agenda th,
.agenda-pro th{
    background:linear-gradient(135deg,rgba(248,250,252,.90),rgba(255,255,255,.70))!important;
    color:#0F172A!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-weight:760!important;
    border-color:rgba(148,163,184,.16)!important;
}

#view-agenda td,
.agenda-pro td{
    border-color:rgba(148,163,184,.14)!important;
}

/* Select estado */
#view-agenda select,
.agenda-pro select{
    min-height:46px!important;
    border-radius:16px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.88),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,.82)!important;
    color:#0F172A!important;
    font-weight:650!important;
}

/* Responsive */
@media(max-width:1100px){
    .sm360-agenda-kpi-grid-safe{
        grid-template-columns:repeat(2,minmax(180px,1fr))!important;
    }
}
@media(max-width:640px){
    .sm360-agenda-kpi-grid-safe{
        grid-template-columns:1fr!important;
    }
}