/**
 * Fase 5 / Operacional #10 — cierre visual y consolidación PRE GO-LIVE.
 * Capa final: tokens, empty states, loaders, micro-UX, limpieza legacy.
 * Solo CSS — sin lógica de negocio.
 */

:root {
    --f5-space-xs: 0.35rem;
    --f5-space-sm: 0.65rem;
    --f5-space-md: 1rem;
    --f5-space-lg: 1.35rem;
    --f5-radius-sm: 10px;
    --f5-radius-md: 12px;
    --f5-radius-lg: 14px;
    --f5-shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.14);
    --f5-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.18);
    --f5-glow-accent: 0 0 10px rgba(236, 72, 153, 0.1);
    --f5-empty-bg: rgba(255, 255, 255, 0.03);
    --f5-empty-border: rgba(255, 255, 255, 0.08);
    --f5-empty-text: rgba(203, 213, 225, 0.82);
    --f5-empty-muted: rgba(148, 163, 184, 0.78);
}

/* —— Limpieza legacy sidebar (index.php inline .admin-brand) —— */
.admin-sidebar .admin-brand.saas-brand-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--f5-space-sm) !important;
}

.admin-sidebar .admin-brand .brand-dot,
.admin-sidebar .admin-brand .brand-title {
    display: none !important;
}

/* —— Espaciado enterprise módulos —— */
.header-panel,
.chart-card,
.card-panel,
.saas-card {
    margin-bottom: var(--f5-space-lg);
}

.header-panel h2,
.header-panel .h4 {
    margin-bottom: var(--f5-space-xs);
}

/* —— Empty states premium —— */
.saas-empty-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 132px;
    padding: 1.15rem 1rem;
    border-radius: var(--f5-radius-lg);
    border: 1px dashed var(--f5-empty-border);
    background: var(--f5-empty-bg);
    text-align: center;
    color: var(--f5-empty-text);
}

.saas-empty-premium--compact {
    min-height: 96px;
    padding: 0.85rem 0.75rem;
}

.saas-empty-premium__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: color-mix(in srgb, var(--primary, #ec4899) 55%, #cbd5e1);
    font-size: 0.95rem;
    box-shadow: var(--f5-glow-accent);
}

.saas-empty-premium__title {
    margin: 0.15rem 0 0;
    font-size: 0.86rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: rgba(241, 245, 249, 0.9);
}

.saas-empty-premium__text {
    margin: 0;
    max-width: 36ch;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--f5-empty-muted);
}

.saas-empty-premium__cta {
    margin-top: 0.35rem;
}

.saas-empty-row td {
    border: 0 !important;
    background: transparent !important;
}

/* Unificar empty-state legacy con premium */
.empty-state,
.saas-empty-state {
    border-radius: var(--f5-radius-lg);
    border: 1px dashed var(--f5-empty-border);
    background: var(--f5-empty-bg);
    color: var(--f5-empty-muted);
    min-height: 120px;
    padding: 1rem 0.85rem;
}

.empty-state-text,
.saas-empty-state__text {
    color: var(--f5-empty-muted) !important;
    font-size: 0.82rem;
}

.audit-empty-state {
    border-radius: var(--f5-radius-lg);
    border: 1px dashed var(--f5-empty-border);
    background: var(--f5-empty-bg);
}

.audit-empty-state__icon {
    box-shadow: var(--f5-glow-accent);
}

html[data-belleza-surface="light"] .saas-empty-premium,
html[data-belleza-surface="light"] .empty-state,
html[data-belleza-surface="light"] .saas-empty-state {
    --f5-empty-bg: #f8fafc;
    --f5-empty-border: rgba(148, 163, 184, 0.45);
    --f5-empty-text: #334155;
    --f5-empty-muted: #64748b;
}

html[data-belleza-surface="light"] .saas-empty-premium__title {
    color: #1e293b;
}

html[data-belleza-surface="light"] .saas-empty-premium__icon {
    background: rgba(15, 23, 42, 0.04);
    color: color-mix(in srgb, var(--primary, #c2185b) 70%, #475569);
    box-shadow: none;
}

/* —— Loaders suaves —— */
.admin-frame-loader.is-visible {
    will-change: opacity;
}

.admin-frame-loader:not(.is-visible) {
    will-change: auto;
}

.admin-frame-spinner {
    border-width: 2px;
    border-top-color: color-mix(in srgb, #ff5c7a 75%, #fff 25%);
    animation-duration: 0.85s;
}

.admin-frame-loader-text {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

/* —— Micro-interacciones discretas —— */
@media (prefers-reduced-motion: no-preference) {
    .saas-empty-premium {
        animation: f5EmptyFade 0.35s ease both;
    }

    .admin-nav-item,
    .saas-btn,
    .btn-outline-primary,
    .table tbody tr {
        transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            transform 0.18s ease,
            box-shadow 0.18s ease;
    }

    .admin-nav-item:hover {
        transform: translateY(-1px);
    }

    .btn:active:not(:disabled) {
        transform: scale(0.98);
    }
}

@keyframes f5EmptyFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* —— Performance UI: sombras moderadas —— */
.admin-app .admin-topbar,
.admin-sidebar,
.admin-iframe-wrap {
    box-shadow: var(--f5-shadow-soft) !important;
}

.card-panel:hover,
.chart-card:hover {
    box-shadow: var(--f5-shadow-card);
}

/* —— Responsive QA —— */
@media (max-width: 991.98px) {
    .saas-topbar-brand {
        max-width: min(42vw, 220px);
    }

    .admin-main {
        padding: 16px !important;
    }

    .admin-iframe-wrap,
    #adminFrame.admin-frame {
        height: calc(100vh - 128px);
    }
}

@media (max-width: 767.98px) {
    .saas-empty-premium {
        min-height: 108px;
        padding: 0.95rem 0.75rem;
    }

    .saas-topbar-brand {
        max-width: min(36vw, 168px);
    }

    .admin-topbar .right {
        gap: 0.45rem;
    }

    .admin-user-chip {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (prefers-reduced-motion: reduce) {
    .saas-empty-premium,
    .admin-frame-spinner,
    .admin-frame-skeleton-bar {
        animation: none !important;
    }

    .admin-nav-item,
    .btn,
    .table tbody tr {
        transition: none !important;
    }
}