/*
 * Sistema de diseño del CRM (estilo SaaS: limpio y denso en datos).
 *
 * Una sola fuente de verdad: los tokens --crm-* de este fichero. Los colores salen de la paleta
 * que configura AdminPanelProvider (--primary-*, --gray-*, --success-*…, en "r, g, b"), así que
 * el acento, los grises y los estados se cambian allí y el modo oscuro se deriva solo.
 *
 * Se carga sin compilar desde AdminPanelProvider (render hook HEAD_END): el deploy no pasa por npm.
 * Las reglas van bajo .fi-body (y .dark .fi-body) para ganar en especificidad a las utilidades de
 * Tailwind de Filament sin recurrir a !important.
 *
 * Fases: 1. tokens y base · 2. layout · 3. componentes · 4. pantallas.
 */

/* ═════════════════════════════════════════════════════════════════════════
   1. Tokens
   ═════════════════════════════════════════════════════════════════════════ */

:root {
    /* Tipografía: Inter, escala 12/13/14/16/20/24 px. */
    --crm-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --crm-text-xs: 0.75rem;    /* 12 px: metadatos, cabeceras de tabla */
    --crm-text-sm: 0.8125rem;  /* 13 px: tablas, badges, ayudas */
    --crm-text-base: 0.875rem; /* 14 px: texto por defecto */
    --crm-text-md: 1rem;       /* 16 px: títulos de sección y modal */
    --crm-text-lg: 1.25rem;    /* 20 px: subtítulos de página */
    --crm-text-xl: 1.5rem;     /* 24 px: título de página */
    --crm-leading-tight: 1.25;
    --crm-leading-normal: 1.5;
    --crm-weight-regular: 400;
    --crm-weight-medium: 500;
    --crm-weight-semibold: 600;
    --crm-tracking-tight: -0.011em;

    /* Espaciado: múltiplos de 4 px. */
    --crm-space-1: 4px;
    --crm-space-2: 8px;
    --crm-space-3: 12px;
    --crm-space-4: 16px;
    --crm-space-5: 20px;
    --crm-space-6: 24px;
    --crm-space-8: 32px;
    --crm-space-10: 40px;
    --crm-space-12: 48px;

    /* Radios: 6 px controles, 8 px superficies. */
    --crm-radius-sm: 6px;
    --crm-radius-md: 8px;
    --crm-radius-full: 9999px;

    /* Color ("r, g, b", para usar con rgb() o rgba()). */
    --crm-accent: var(--primary-600);          /* #4F46E5: acciones principales */
    --crm-accent-hover: var(--primary-700);
    --crm-accent-subtle: var(--primary-50);
    --crm-bg: var(--gray-50);                  /* fondo de la página */
    --crm-surface: 255, 255, 255;              /* tarjetas, tablas, modales */
    --crm-surface-muted: var(--gray-50);       /* cabeceras, filas al pasar el ratón */
    --crm-border: var(--gray-200);
    --crm-border-strong: var(--gray-300);
    --crm-text: var(--gray-950);
    --crm-text-muted: var(--gray-600);         /* 7,7:1 sobre blanco */
    --crm-text-subtle: var(--gray-500);        /* 4,8:1 sobre blanco: mínimo AA */
    --crm-success: var(--success-600);
    --crm-warning: var(--warning-600);
    --crm-danger: var(--danger-600);

    /* Elevación mínima: borde de 1 px y, como mucho, una sombra corta. */
    --crm-border-width: 1px;
    --crm-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --crm-shadow-overlay: 0 8px 24px -4px rgba(16, 24, 40, 0.12), 0 2px 6px -2px rgba(16, 24, 40, 0.06);

    /* Foco visible y accesible (anillo de 2 px separado del elemento). */
    --crm-focus-ring: 0 0 0 2px rgb(var(--crm-surface)), 0 0 0 4px rgb(var(--primary-500));
}

.dark {
    --crm-accent: var(--primary-500);
    --crm-accent-hover: var(--primary-400);
    --crm-accent-subtle: var(--primary-950);
    --crm-bg: var(--gray-950);
    --crm-surface: var(--gray-900);
    --crm-surface-muted: var(--gray-800);
    --crm-border: var(--gray-800);
    --crm-border-strong: var(--gray-700);
    --crm-text: 255, 255, 255;
    --crm-text-muted: var(--gray-300);
    --crm-text-subtle: var(--gray-400);        /* el 500 no llega a AA sobre gris 900 */
    --crm-success: var(--success-400);
    --crm-warning: var(--warning-400);
    --crm-danger: var(--danger-400);

    --crm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --crm-shadow-overlay: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.3);
}

/* ═════════════════════════════════════════════════════════════════════════
   2. Base: los tokens aplicados a los cimientos de Filament
   ═════════════════════════════════════════════════════════════════════════ */

body.fi-body {
    font-family: var(--crm-font-sans);
    font-size: var(--crm-text-base);
    line-height: var(--crm-leading-normal);
    font-feature-settings: 'cv11', 'ss01'; /* Inter: cifras y letras más legibles en datos */
}

::selection {
    background-color: rgba(var(--crm-accent), 0.18);
}

/* Títulos: 600, escala del sistema. */
.fi-body .fi-header-heading {
    font-size: var(--crm-text-xl);
    font-weight: var(--crm-weight-semibold);
    line-height: var(--crm-leading-tight);
    letter-spacing: var(--crm-tracking-tight);
}

.fi-body .fi-header-subheading {
    font-size: var(--crm-text-base);
    color: rgb(var(--crm-text-muted));
}

.fi-body .fi-section-header-heading,
.fi-body .fi-modal-heading {
    font-size: var(--crm-text-md);
    font-weight: var(--crm-weight-semibold);
    letter-spacing: var(--crm-tracking-tight);
}

.fi-body .fi-section-header-description,
.fi-body .fi-modal-description {
    font-size: var(--crm-text-sm);
    color: rgb(var(--crm-text-muted));
}

/* Superficies: borde de 1 px, radio de 8 px y sombra mínima. */
.fi-body .fi-section,
.fi-body .fi-ta-ctn,
.fi-body .fi-wi-stats-overview-stat,
.fi-body .fi-simple-main,
.dark .fi-body .fi-section,
.dark .fi-body .fi-ta-ctn,
.dark .fi-body .fi-wi-stats-overview-stat,
.dark .fi-body .fi-simple-main {
    background-color: rgb(var(--crm-surface));
    border-radius: var(--crm-radius-md);
    box-shadow: 0 0 0 var(--crm-border-width) rgb(var(--crm-border)), var(--crm-shadow-xs);
}

/* Lo que flota (modales, menús) lleva la única sombra apreciable. */
.fi-body .fi-modal-window,
.fi-body .fi-dropdown-panel,
.dark .fi-body .fi-modal-window,
.dark .fi-body .fi-dropdown-panel {
    background-color: rgb(var(--crm-surface));
    border-radius: var(--crm-radius-md);
    box-shadow: 0 0 0 var(--crm-border-width) rgb(var(--crm-border)), var(--crm-shadow-overlay);
}

/* Controles: radio de 6 px. */
.fi-body .fi-btn,
.fi-body .fi-input-wrp,
.fi-body .fi-badge,
.fi-body .fi-icon-btn,
.fi-body .fi-dropdown-list-item,
.fi-body .fi-tabs-item,
.fi-body .fi-sidebar-item-button {
    border-radius: var(--crm-radius-sm);
}

/*
 * Botones sólidos con texto blanco legible (AA, 4,5:1). Filament usa el tono 500 en modo oscuro
 * y al pasar el ratón, y ahí ningún color llega (indigo 4,47; rojo 3,76): se fija el 600 y el
 * hover oscurece en vez de aclarar. Verde y ámbar no llegan ni en 600 y van en 700.
 */
.fi-body .fi-btn.fi-color-custom:not(.fi-btn-outlined),
.dark .fi-body .fi-btn.fi-color-custom:not(.fi-btn-outlined) {
    background-color: rgb(var(--c-600));
}

.fi-body .fi-btn.fi-color-success:not(.fi-btn-outlined),
.dark .fi-body .fi-btn.fi-color-success:not(.fi-btn-outlined) {
    background-color: rgb(var(--success-700));
}

.fi-body .fi-btn.fi-color-warning:not(.fi-btn-outlined),
.dark .fi-body .fi-btn.fi-color-warning:not(.fi-btn-outlined) {
    background-color: rgb(var(--warning-700));
}

.fi-body .fi-btn.fi-color-custom:not(.fi-btn-outlined):hover {
    filter: brightness(0.92);
}

/* Foco accesible y consistente al navegar con teclado. */
.fi-body a:focus-visible,
.fi-body button:focus-visible,
.fi-body [role='button']:focus-visible,
.fi-body [tabindex]:not([tabindex='-1']):focus-visible {
    outline: none;
    box-shadow: var(--crm-focus-ring);
}

.fi-body .fi-input-wrp:not(.fi-invalid):focus-within {
    box-shadow: 0 0 0 var(--crm-border-width) rgb(var(--crm-accent)), 0 0 0 3px rgba(var(--crm-accent), 0.2);
}

/* ═════════════════════════════════════════════════════════════════════════
   3. Layout: sidebar compacta (sin topbar) y contenido
   ═════════════════════════════════════════════════════════════════════════ */

/* En escritorio el sidebar es una columna de superficie con un borde, sin sombra. */
@media (min-width: 1024px) {
    .fi-body .fi-sidebar,
    .dark .fi-body .fi-sidebar {
        background-color: rgb(var(--crm-surface));
        box-shadow: var(--crm-border-width) 0 0 0 rgb(var(--crm-border));
    }
}

.fi-body .fi-sidebar-header,
.dark .fi-body .fi-sidebar-header {
    height: 56px;
    padding-inline: var(--crm-space-4);
    background-color: transparent;
    box-shadow: none;
}

.fi-body .fi-sidebar-nav {
    padding: var(--crm-space-2) var(--crm-space-3) var(--crm-space-4);
    row-gap: var(--crm-space-5);
}

.fi-body .fi-sidebar-nav-groups {
    margin-inline: 0;
    row-gap: var(--crm-space-5);
}

.fi-body .fi-sidebar-group-button {
    padding: var(--crm-space-1) var(--crm-space-2);
}

.fi-body .fi-sidebar-group-label {
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-medium);
    line-height: var(--crm-leading-normal);
    color: rgb(var(--crm-text-subtle));
}

.fi-body .fi-sidebar-group-items {
    row-gap: 2px;
}

/* Ítems de 32 px de alto: densos y con un objetivo de clic cómodo. */
.fi-body .fi-sidebar-item-button {
    min-height: 32px;
    padding: var(--crm-space-1) var(--crm-space-2);
    column-gap: var(--crm-space-2);
}

.fi-body .fi-sidebar-item-label {
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-medium);
    color: rgb(var(--crm-text-muted));
}

.fi-body .fi-sidebar-item-icon {
    width: 18px;
    height: 18px;
    color: rgb(var(--crm-text-subtle));
}

.fi-body .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: rgb(var(--crm-text));
}

.fi-body .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: rgb(var(--crm-accent));
}

/* Pie del sidebar: menú de usuario (sustituye a la topbar). */
.crm-sidebar-footer {
    display: flex;
    align-items: center;
    gap: var(--crm-space-2);
    padding: var(--crm-space-3);
    border-top: var(--crm-border-width) solid rgb(var(--crm-border));
}

.crm-sidebar-footer.is-collapsed {
    flex-direction: column;
}

.crm-sidebar-footer-user {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--crm-leading-tight);
}

.crm-sidebar-footer-name {
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-medium);
    color: rgb(var(--crm-text));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-sidebar-footer-email {
    font-size: var(--crm-text-xs);
    color: rgb(var(--crm-text-subtle));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Botón para abrir el menú en móvil y tablet; en escritorio el sidebar siempre está a la vista. */
.crm-mobile-menu {
    display: flex;
    padding-top: var(--crm-space-4);
    margin-inline-start: calc(var(--crm-space-2) * -1);
}

@media (min-width: 1024px) {
    .crm-mobile-menu {
        display: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   4. Componentes
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Tablas compactas ──────────────────────────────────────────────────── */

.fi-body .fi-ta-table {
    font-variant-numeric: tabular-nums; /* cifras alineadas en columna */
}

.fi-body .fi-ta-header-toolbar {
    padding: var(--crm-space-2) var(--crm-space-4);
}

.fi-body .fi-ta-header-cell {
    padding-block: var(--crm-space-2);
}

.fi-body .fi-ta-header-cell-label,
.dark .fi-body .fi-ta-header-cell-label {
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-medium);
    color: rgb(var(--crm-text-muted));
}

/* Filas de ~40 px: las columnas de Filament traen 16 px arriba y abajo. */
.fi-body .fi-ta-cell .py-4 {
    padding-block: 10px;
}

.fi-body .fi-ta-text-item-label,
.fi-body .fi-ta-cell .text-sm {
    font-size: var(--crm-text-sm);
}

.fi-body .fi-ta-row:hover,
.dark .fi-body .fi-ta-row:hover {
    background-color: rgb(var(--crm-surface-muted));
}

/* Acciones de fila con texto, compactas. */
.fi-body .fi-ta-actions .fi-link {
    font-size: var(--crm-text-sm);
}

.fi-body .fi-pagination {
    font-size: var(--crm-text-sm);
    padding: var(--crm-space-2) var(--crm-space-4);
}

/* Carga diferida: filas esqueleto en lugar del spinner centrado. */
.fi-body .fi-ta.animate-pulse .fi-ta-content > .h-32 {
    display: block;
    height: auto;
    padding: var(--crm-space-4) var(--crm-space-6);
}

.fi-body .fi-ta.animate-pulse .fi-ta-content > .h-32 > * {
    display: none;
}

.fi-body .fi-ta.animate-pulse .fi-ta-content > .h-32::before {
    content: '';
    display: block;
    height: 200px;
    border-radius: var(--crm-radius-sm);
    background-image: repeating-linear-gradient(
        to bottom,
        rgb(var(--crm-surface-muted)) 0 12px,
        transparent 12px 40px
    );
}

/* ── Estado vacío: tarjeta con dos más detrás, a modo de ilustración ───── */

.fi-body .fi-ta-empty-state-icon-ctn,
.dark .fi-body .fi-ta-empty-state-icon-ctn {
    position: relative;
    padding: var(--crm-space-3);
    border-radius: var(--crm-radius-md);
    background-color: rgb(var(--crm-surface));
    box-shadow: 0 0 0 var(--crm-border-width) rgb(var(--crm-border)), var(--crm-shadow-xs);
}

.fi-body .fi-ta-empty-state-icon-ctn::before,
.fi-body .fi-ta-empty-state-icon-ctn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--crm-radius-md);
    background-color: rgb(var(--crm-surface-muted));
    box-shadow: 0 0 0 var(--crm-border-width) rgb(var(--crm-border));
}

.fi-body .fi-ta-empty-state-icon-ctn::before {
    transform: translate(-10px, 6px) rotate(-8deg);
}

.fi-body .fi-ta-empty-state-icon-ctn::after {
    transform: translate(10px, 6px) rotate(8deg);
}

.fi-body .fi-ta-empty-state-content {
    isolation: isolate; /* para que las tarjetas de detrás no se salgan del estado vacío */
}

.fi-body .fi-ta-empty-state-icon {
    color: rgb(var(--crm-accent));
}

/* ── Badges de estado ──────────────────────────────────────────────────── */

.fi-body .fi-badge {
    min-height: 20px;
    padding: 2px var(--crm-space-2);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-medium);
    line-height: 16px;
}

/*
 * Texto de estado legible (AA, 4,5:1) en modo claro. Filament usa el tono 600: verde, ámbar y
 * rojo se quedan en 3,6 / 3,1 / 4,4 sobre el fondo del badge y en 3,8 / 3,2 sobre blanco. Con el
 * 700 pasan todos (5,2 / 4,8 / 5,9). En oscuro se mantiene el 400 de Filament.
 */
.fi-body .fi-badge.fi-color-success,
.fi-body .fi-wi-stats-overview-stat-description.fi-color-success {
    color: rgb(var(--success-700));
}

.fi-body .fi-badge.fi-color-warning,
.fi-body .fi-wi-stats-overview-stat-description.fi-color-warning {
    color: rgb(var(--warning-700));
}

.fi-body .fi-badge.fi-color-danger,
.fi-body .fi-wi-stats-overview-stat-description.fi-color-danger {
    color: rgb(var(--danger-700));
}

.dark .fi-body .fi-badge.fi-color-success,
.dark .fi-body .fi-wi-stats-overview-stat-description.fi-color-success {
    color: rgb(var(--success-400));
}

.dark .fi-body .fi-badge.fi-color-warning,
.dark .fi-body .fi-wi-stats-overview-stat-description.fi-color-warning {
    color: rgb(var(--warning-400));
}

.dark .fi-body .fi-badge.fi-color-danger,
.dark .fi-body .fi-wi-stats-overview-stat-description.fi-color-danger {
    color: rgb(var(--danger-400));
}

/* ── Formularios: label visible, ayuda y error claros ───────────────────── */

.fi-body .fi-fo-field-wrp-label {
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-medium);
}

.fi-body .fi-fo-field-wrp-helper-text,
.fi-body .fi-fo-field-wrp-hint {
    font-size: var(--crm-text-xs);
    color: rgb(var(--crm-text-subtle));
}

.fi-body .fi-fo-field-wrp-error-message {
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-medium);
    color: rgb(var(--crm-danger));
}

.fi-body .fi-input,
.fi-body .fi-select-input {
    font-size: var(--crm-text-base);
}

/* ── Panel lateral y toasts ────────────────────────────────────────────── */

/* Pegado al borde de la pantalla: sin esquinas redondeadas. */
.fi-body .fi-modal-slide-over-window,
.dark .fi-body .fi-modal-slide-over-window {
    border-radius: 0;
}

.fi-body .fi-no-notification:not(.fi-inline),
.dark .fi-body .fi-no-notification:not(.fi-inline) {
    border-radius: var(--crm-radius-md);
    background-color: rgb(var(--crm-surface));
    box-shadow: 0 0 0 var(--crm-border-width) rgb(var(--crm-border)), var(--crm-shadow-overlay);
}

/* ═════════════════════════════════════════════════════════════════════════
   5. Pantallas: escritorio (KPIs)
   ═════════════════════════════════════════════════════════════════════════ */

.fi-body .fi-wi-stats-overview-stat-label {
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-medium);
    color: rgb(var(--crm-text-muted));
}

.fi-body .fi-wi-stats-overview-stat-value {
    font-size: var(--crm-text-xl);
    font-weight: var(--crm-weight-semibold);
    letter-spacing: var(--crm-tracking-tight);
    font-variant-numeric: tabular-nums;
}

.fi-body .fi-wi-stats-overview-stat-description {
    font-size: var(--crm-text-xs);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .fi-body *,
    .fi-body *::before,
    .fi-body *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}