/* ==========================================================
   SpaMaster 360 Enterprise ERP v27.2
   Agenda Master UI Polish
   ========================================================== */

/* KPI más delgadas */
.sm360-agenda-kpi-grid-safe{
    gap:14px!important;
    margin:0 0 14px!important;
}

.sm360-agenda-kpi-safe{
    min-height:104px!important;
    padding:18px 20px 16px 82px!important;
    border-radius:22px!important;
}

.sm360-kpi-icon-safe{
    left:20px!important;
    top:22px!important;
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
}

.sm360-kpi-icon-safe::before{
    width:21px!important;
    height:21px!important;
}

.sm360-kpi-label-safe{
    margin:2px 0 6px!important;
    font-size:14px!important;
    font-weight:740!important;
}

.sm360-kpi-value-safe{
    font-size:24px!important;
    font-weight:800!important;
}

.sm360-kpi-desc-safe{
    margin-top:9px!important;
    font-size:12.5px!important;
}

.sm360-agenda-kpi-safe::after{
    height:44px!important;
    bottom:-16px!important;
    opacity:.38!important;
}

/* Select Filtrar reservas: diseño premium */
#view-agenda .sm360-agenda-state-filter,
.agenda-pro .sm360-agenda-state-filter,
#view-agenda select,
.agenda-pro select{
    appearance:none!important;
    -webkit-appearance:none!important;
    min-height:46px!important;
    padding:0 44px 0 16px!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,.24)!important;
    box-shadow:
        0 12px 28px rgba(15,23,42,.055),
        inset 0 1px 0 rgba(255,255,255,.86)!important;
    color:#0F172A!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:14px!important;
    font-weight:740!important;
    letter-spacing:-.015em!important;
    cursor:pointer!important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236D4AFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.72))!important;
    background-repeat:no-repeat!important;
    background-position:right 15px center, center!important;
    background-size:18px, auto!important;
}

#view-agenda .sm360-agenda-state-filter:hover,
.agenda-pro .sm360-agenda-state-filter:hover,
#view-agenda select:hover,
.agenda-pro select:hover{
    border-color:rgba(109,74,255,.34)!important;
    box-shadow:
        0 14px 32px rgba(109,74,255,.09),
        inset 0 1px 0 rgba(255,255,255,.90)!important;
}

#view-agenda .sm360-agenda-state-filter:focus,
.agenda-pro .sm360-agenda-state-filter:focus,
#view-agenda select:focus,
.agenda-pro select:focus{
    outline:none!important;
    border-color:rgba(109,74,255,.52)!important;
    box-shadow:
        0 0 0 4px rgba(109,74,255,.10),
        0 14px 32px rgba(109,74,255,.10)!important;
}

/* El menú nativo no permite glass real, pero sí colores coherentes */
#view-agenda select option,
.agenda-pro select option{
    background:#FFFFFF!important;
    color:#0F172A!important;
    font-weight:560!important;
    padding:10px 14px!important;
}

/* Cabecera de agenda: eliminar espacio blanco entre toolbar y fechas */
#view-agenda .sm360-agenda-toolbar-safe,
.agenda-pro .sm360-agenda-toolbar-safe{
    margin-bottom:0!important;
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
    border-bottom-color:rgba(148,163,184,.14)!important;
}

/* Detectar contenedor del calendario y pegarlo al toolbar */
#view-agenda .sm360-agenda-grid-polished,
.agenda-pro .sm360-agenda-grid-polished{
    margin-top:0!important;
    border-top-left-radius:0!important;
    border-top-right-radius:0!important;
    border-top:0!important;
}

/* La fila de fechas debe iniciar inmediatamente debajo */
#view-agenda .sm360-agenda-grid-polished table,
#view-agenda .sm360-agenda-grid-polished .calendar-grid,
#view-agenda .sm360-agenda-grid-polished .agenda-calendar,
.agenda-pro .sm360-agenda-grid-polished table,
.agenda-pro .sm360-agenda-grid-polished .calendar-grid,
.agenda-pro .sm360-agenda-grid-polished .agenda-calendar{
    margin-top:0!important;
}

/* Reducir rellenos superiores grandes dentro del calendario */
#view-agenda .sm360-agenda-grid-polished > *:first-child,
.agenda-pro .sm360-agenda-grid-polished > *:first-child{
    margin-top:0!important;
}

/* Tabla/calendario más unido */
#view-agenda table,
.agenda-pro table{
    border-collapse:separate!important;
    border-spacing:0!important;
}

#view-agenda th,
.agenda-pro th{
    height:54px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    vertical-align:middle!important;
}

/* Quitar grandes espacios blancos de contenedores intermedios */
#view-agenda .sm360-calendar-compact-gap,
.agenda-pro .sm360-calendar-compact-gap{
    padding-top:0!important;
    margin-top:0!important;
}

/* Botón Nueva reserva: hover solo animado y sutil */
#view-agenda .sm360-new-reservation-safe:hover,
.agenda-pro .sm360-new-reservation-safe:hover,
#view-agenda .sm360-agenda-new-reservation:hover,
.agenda-pro .sm360-agenda-new-reservation:hover{
    transform:translateY(-2px) scale(1.01)!important;
    box-shadow:
        0 16px 34px rgba(22,163,74,.16),
        inset 0 1px 0 rgba(255,255,255,.92)!important;
}

/* Responsive KPIs delgadas */
@media(max-width:1100px){
    .sm360-agenda-kpi-safe{
        min-height:100px!important;
    }
}

@media(max-width:640px){
    .sm360-agenda-kpi-safe{
        padding-left:76px!important;
    }
}