/* ===================================================================
   ELESIS UI · v2 — Sistema visual unificado y profesional
   ------------------------------------------------------------------
   Capa visual global. NO modifica ni lógica, ni datos, ni formularios.
   Sólo CSS — todo el JS/PHP del CRM sigue intacto.
   =================================================================== */

/* -------- 1. Tokens -------- */
:root {
    --el-font: 'Inter', 'Segoe UI', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Paleta corporativa */
    --el-blue-50:  #eff6ff;
    --el-blue-100: #dbeafe;
    --el-blue-500: #3b82f6;
    --el-blue-600: #2563eb;
    --el-blue-700: #1d4ed8;
    --el-blue-900: #1e3a8a;

    --el-slate-50:  #f8fafc;
    --el-slate-100: #f1f5f9;
    --el-slate-200: #e2e8f0;
    --el-slate-300: #cbd5e1;
    --el-slate-500: #64748b;
    --el-slate-700: #334155;
    --el-slate-800: #1e293b;
    --el-slate-900: #0f172a;

    /* Superficies */
    --el-bg: #f5f7fb;
    --el-surface: #ffffff;
    --el-border: #e6eaf1;
    --el-border-strong: #d4dae3;

    /* Texto */
    --el-text: #0b1220;
    --el-text-muted: #64748b;
    --el-text-soft: #94a3b8;

    /* Radios */
    --el-radius-sm: 0.5rem;
    --el-radius-md: 0.75rem;
    --el-radius-lg: 1rem;
    --el-radius-xl: 1.25rem;

    /* Sombras escalonadas y suaves */
    --el-shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --el-shadow-sm: 0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.04);
    --el-shadow-md: 0 4px 12px -2px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
    --el-shadow-lg: 0 12px 32px -8px rgba(15,23,42,0.14), 0 4px 12px rgba(15,23,42,0.06);
    --el-shadow-xl: 0 24px 48px -12px rgba(15,23,42,0.18), 0 8px 24px rgba(15,23,42,0.08);
    --el-shadow-focus: 0 0 0 4px rgba(37,99,235,0.14);
}

/* -------- 2. Tipografía global: FORZAR INTER EN TODO (máxima especificidad) -------- */
html, body, body *,
html body .font-mono, html body .font-sans, html body .font-serif,
html body code, html body pre, html body kbd, html body samp, html body tt,
html body span, html body div, html body p, html body a,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body input, html body button, html body select, html body textarea, html body label,
html body table, html body th, html body td,
html body [class*="font-"]:not([class*="font-awesome"]):not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: var(--el-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Excepción única: FontAwesome (sus íconos requieren su fuente propia) */
.fa, .fas, .far, .fal, .fab,
.fa-solid, .fa-regular, .fa-brands,
i[class^="fa-"], i[class*=" fa-"],
[class^="fa-"]:before, [class*=" fa-"]:before,
i.fa, i.fas, i.far, i.fab,
.fa::before, .fas::before, .far::before, .fab::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
                 "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
}
.far, .fa-regular, .fab, .fa-brands {
    font-weight: 400 !important;
}

/* font-mono (Tailwind) ahora también usa Inter, pero con números tabulares */
.font-mono, code, kbd, pre, samp, tt {
    font-family: var(--el-font) !important;
    font-variant-numeric: tabular-nums slashed-zero !important;
    font-feature-settings: "tnum", "zero" !important;
    letter-spacing: 0 !important;
}

/* -------- 3. Body / fondo global -------- */
body {
    background-color: var(--el-bg) !important;
    color: var(--el-text);
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    font-feature-settings: "cv11", "ss01", "ss03";
    min-height: 100vh;
}

/* Fondo con gradiente sutil para páginas principales (sólo cuando no hay otro fondo dominante) */
body.bg-slate-100, body.bg-slate-50 {
    background: linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%) !important;
}

/* -------- 4. Jerarquía tipográfica -------- */
h1 { letter-spacing: -0.028em; line-height: 1.18; }
h2 { letter-spacing: -0.022em; line-height: 1.22; }
h3 { letter-spacing: -0.018em; line-height: 1.28; }
h4 { letter-spacing: -0.012em; line-height: 1.32; }
h5, h6 { letter-spacing: -0.008em; }

/* Números tabulares en métricas/tablas */
table, td, th, .tabular-nums,
[class*="text-2xl"], [class*="text-3xl"], [class*="text-4xl"],
.font-black, .font-extrabold {
    font-variant-numeric: tabular-nums;
}

/* -------- 5. Botones — refinamiento global -------- */
button, a[href], .btn, [role="button"] {
    transition: background-color 0.22s cubic-bezier(.4,0,.2,1),
                color 0.18s ease,
                box-shadow 0.22s cubic-bezier(.4,0,.2,1),
                transform 0.14s ease,
                border-color 0.18s ease !important;
}

/* Botón primario azul — gradiente sutil y sombra azulada */
.bg-blue-600 {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 1px 2px rgba(37,99,235,0.18),
                inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 6px 16px -4px rgba(37,99,235,0.4),
                inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transform: translateY(-1px);
}
.bg-blue-600:active { transform: translateY(0); }

/* Botón oscuro / slate-900 */
.bg-slate-900 {
    background: linear-gradient(180deg, #1e293b 0%, #0b1220 100%) !important;
}
button.bg-slate-900:hover,
a.bg-slate-900:hover,
.hover\:bg-slate-800:hover {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%) !important;
    box-shadow: 0 6px 16px -4px rgba(15,23,42,0.4) !important;
}

/* Botones secundarios slate-100 */
.bg-slate-100:hover,
.hover\:bg-slate-200:hover {
    background-color: #e6eaf1 !important;
}

/* Botones rojos y verdes igual de pulidos */
.bg-red-600 {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 1px 2px rgba(220,38,38,0.18),
                inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.bg-emerald-600, .bg-green-600 {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 1px 2px rgba(5,150,105,0.18),
                inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* Focus visible accesible */
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--el-blue-600);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* -------- 6. Inputs / selects / textareas -------- */
input, select, textarea {
    font-size: 0.875rem !important;
    line-height: 1.45;
    transition: border-color 0.18s ease, box-shadow 0.22s ease,
                background-color 0.18s ease !important;
}

input::placeholder, textarea::placeholder {
    color: #94a3b8 !important;
    font-weight: 400;
    opacity: 1;
}

input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none !important;
    border-color: var(--el-blue-600) !important;
    box-shadow: var(--el-shadow-focus) !important;
    background-color: #ffffff !important;
}

/* Auto-fill Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 32px #ffffff inset !important;
    -webkit-text-fill-color: var(--el-text) !important;
    font-family: var(--el-font) !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* -------- 7. Tarjetas / superficies / shadows -------- */
/* Hacemos las sombras más suaves y modernas en TODO */
.shadow-sm, [class*="shadow-sm"] {
    box-shadow: var(--el-shadow-sm) !important;
}
.shadow, [class~="shadow"]:not([class*="shadow-"]) {
    box-shadow: var(--el-shadow-sm) !important;
}
.shadow-md {
    box-shadow: var(--el-shadow-md) !important;
}
.shadow-lg {
    box-shadow: var(--el-shadow-md) !important;
}
.shadow-xl {
    box-shadow: var(--el-shadow-lg) !important;
}
.shadow-2xl {
    box-shadow: var(--el-shadow-xl) !important;
}

/* Bordes globales más finos y agradables */
.border, .border-slate-100, .border-slate-200 {
    border-color: var(--el-border) !important;
}
.border-slate-300 {
    border-color: var(--el-border-strong) !important;
}

/* Hover en tarjetas/elementos clickeables */
a.block.hover\:bg-slate-50:hover,
a.block.hover\:bg-blue-50:hover {
    transform: translateX(2px);
}

/* -------- 8. Tablas refinadas -------- */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
table thead th {
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    color: #475569 !important;
    background-color: #f8fafc !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    border-bottom: 1px solid var(--el-border);
}
table tbody tr {
    transition: background-color 0.14s ease;
}
table tbody tr:hover {
    background-color: #f9fbfd !important;
}
table tbody td {
    border-color: var(--el-border) !important;
}

/* -------- 9. Sidebar refinado -------- */
aside.bg-slate-900,
aside#sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #050a15 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.04);
}

aside .border-slate-800 {
    border-color: rgba(255,255,255,0.06) !important;
}

aside nav a {
    transition: all 0.18s cubic-bezier(.4,0,.2,1) !important;
    position: relative;
}
aside nav a:hover {
    transform: translateX(2px);
}

/* Estado activo del sidebar — barra lateral azul */
aside nav a.bg-blue-600 {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 16px -4px rgba(37,99,235,0.5),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
aside nav a.bg-blue-600::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background: #60a5fa;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 8px rgba(96,165,250,0.6);
}

/* Perfil en el footer del sidebar */
aside .bg-slate-800\/50 {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06);
    transition: background-color 0.18s ease;
}
aside .bg-slate-800\/50:hover {
    background: rgba(255,255,255,0.07) !important;
}

/* -------- 10. Header pages refinement -------- */
header.bg-white {
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    background-color: rgba(255,255,255,0.92) !important;
    border-bottom: 1px solid var(--el-border) !important;
}

/* -------- 11. Badges / pills más afilados -------- */
.rounded-full.text-xs,
.rounded-full.text-\[10px\],
.rounded-full.text-\[11px\],
span.rounded-full {
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    padding-top: 0.18rem;
    padding-bottom: 0.18rem;
}

/* -------- 12. Modales / overlays -------- */
.fixed.inset-0[class*="bg-slate-900"],
.fixed.inset-0[class*="bg-black"],
[class*="bg-slate-900\/"] {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* -------- 13. Scrollbars finos y consistentes -------- */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
    min-height: 32px;
}
*::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: padding-box;
    border: 3px solid transparent;
}

/* En zonas oscuras */
.bg-slate-900 ::-webkit-scrollbar-thumb,
aside ::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.12);
    background-clip: padding-box;
}
.bg-slate-900 ::-webkit-scrollbar-thumb:hover,
aside ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,0.2);
    background-clip: padding-box;
}

/* -------- 14. Selección de texto -------- */
::selection {
    background: #bfdbfe;
    color: #1e3a8a;
}

/* -------- 15. Animaciones -------- */
.fade-in { animation: elFadeIn 0.45s cubic-bezier(.16,1,.3,1); }
.slide-in { animation: elSlideIn 0.4s cubic-bezier(.16,1,.3,1); }
.animate-in { animation: elFadeIn 0.4s cubic-bezier(.16,1,.3,1); }

@keyframes elFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes elSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Spinner suavizado */
.fa-spinner.fa-spin, .fa-spin {
    animation: fa-spin 0.85s linear infinite !important;
}

/* -------- 16. Detalles finales -------- */
hr {
    border-color: var(--el-border) !important;
    opacity: 0.8;
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { transition: color 0.16s ease; }

/* Rings (focus, ring-2) más suaves */
[class*="ring-blue"]:focus, [class*="focus:ring-blue"]:focus {
    --tw-ring-color: rgba(37,99,235,0.18) !important;
    --tw-ring-shadow: 0 0 0 4px rgba(37,99,235,0.14) !important;
}

/* Tipografía en el sidebar (asegurar pesos correctos) */
aside .text-white { color: #f8fafc !important; }
aside .text-slate-300 { color: #cbd5e1 !important; }
aside .text-slate-400 { color: #94a3b8 !important; }
aside .text-slate-500 { color: #64748b !important; }

/* Logo box en sidebar */
aside .bg-blue-600.w-8.h-8,
aside .bg-blue-600.w-10.h-10 {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 12px -2px rgba(37,99,235,0.5),
                inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* -------- 17. Impresión -------- */
@media print {
    body { background: #ffffff !important; }
    aside, .no-print, header button { display: none !important; }
    main { padding: 0 !important; }
}

/* -------- 18. Pequeño reset para evitar herencias monoespaciadas -------- */
input, select, textarea, button {
    font-family: var(--el-font) !important;
}
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"] {
    font-variant-numeric: tabular-nums;
}

/* ===================================================================
   19. PALETA DE BOTONES EXTENDIDA · estandarización total
   ------------------------------------------------------------------
   Da el MISMO acabado (degradado vertical + sombra de color + leve
   elevación al pasar el cursor) a los botones naranja / púrpura /
   índigo / secundario, igual que ya lo tenían azul, verde y rojo.
   Así NINGÚN botón del CRM queda "plano" o fuera de juego.
   Se limita a elementos interactivos (button / a / [role=button])
   para NO afectar insignias (badges) que usen esos mismos colores.
   =================================================================== */

/* —— NARANJA (Importación masiva, plantillas, etc.) —— */
button.bg-orange-500, a.bg-orange-500, [role="button"].bg-orange-500 {
    background: linear-gradient(180deg, #fb923c 0%, #f97316 100%) !important;
    box-shadow: 0 1px 2px rgba(234,88,12,0.20), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
button.bg-orange-600, a.bg-orange-600, [role="button"].bg-orange-600 {
    background: linear-gradient(180deg, #f97316 0%, #ea580c 100%) !important;
    box-shadow: 0 1px 2px rgba(234,88,12,0.22), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
button.bg-orange-500:hover, a.bg-orange-500:hover, .hover\:bg-orange-600:hover {
    background: linear-gradient(180deg, #f97316 0%, #ea580c 100%) !important;
    box-shadow: 0 6px 16px -4px rgba(234,88,12,0.42), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transform: translateY(-1px);
}
button.bg-orange-600:hover, a.bg-orange-600:hover, .hover\:bg-orange-700:hover {
    background: linear-gradient(180deg, #ea580c 0%, #c2410c 100%) !important;
    box-shadow: 0 6px 16px -4px rgba(194,65,12,0.42), inset 0 1px 0 rgba(255,255,255,0.16) !important;
    transform: translateY(-1px);
}
button.bg-orange-500:active, a.bg-orange-500:active,
button.bg-orange-600:active, a.bg-orange-600:active { transform: translateY(0); }

/* —— PÚRPURA (módulos V2: licencias / asignación) —— */
button.bg-purple-500, a.bg-purple-500, [role="button"].bg-purple-500 {
    background: linear-gradient(180deg, #c084fc 0%, #a855f7 100%) !important;
    box-shadow: 0 1px 2px rgba(147,51,234,0.20), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
button.bg-purple-600, a.bg-purple-600, [role="button"].bg-purple-600 {
    background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%) !important;
    box-shadow: 0 1px 2px rgba(147,51,234,0.22), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
button.bg-purple-700, a.bg-purple-700, [role="button"].bg-purple-700 {
    background: linear-gradient(180deg, #9333ea 0%, #7e22ce 100%) !important;
    box-shadow: 0 1px 2px rgba(126,34,206,0.22), inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
button.bg-purple-600:hover, a.bg-purple-600:hover, .hover\:bg-purple-700:hover {
    background: linear-gradient(180deg, #9333ea 0%, #7e22ce 100%) !important;
    box-shadow: 0 6px 16px -4px rgba(147,51,234,0.42), inset 0 1px 0 rgba(255,255,255,0.16) !important;
    transform: translateY(-1px);
}
button.bg-purple-700:hover, a.bg-purple-700:hover, .hover\:bg-purple-800:hover {
    background: linear-gradient(180deg, #7e22ce 0%, #6b21a8 100%) !important;
    transform: translateY(-1px);
}
button.bg-purple-500:active, a.bg-purple-500:active,
button.bg-purple-600:active, a.bg-purple-600:active,
button.bg-purple-700:active, a.bg-purple-700:active { transform: translateY(0); }

/* —— ÍNDIGO (instaladores / utilidades) —— */
button.bg-indigo-600, a.bg-indigo-600, [role="button"].bg-indigo-600 {
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
    box-shadow: 0 1px 2px rgba(79,70,229,0.22), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
button.bg-indigo-700, a.bg-indigo-700, [role="button"].bg-indigo-700 {
    background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%) !important;
    box-shadow: 0 1px 2px rgba(67,56,202,0.22), inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
button.bg-indigo-600:hover, a.bg-indigo-600:hover,
button.bg-indigo-700:hover, a.bg-indigo-700:hover,
.hover\:bg-indigo-700:hover, .hover\:bg-indigo-800:hover {
    background: linear-gradient(180deg, #4338ca 0%, #3730a3 100%) !important;
    box-shadow: 0 6px 16px -4px rgba(67,56,202,0.42), inset 0 1px 0 rgba(255,255,255,0.16) !important;
    transform: translateY(-1px);
}

/* —— SECUNDARIO neutro (slate-200): botones tipo "Papelera / Cancelar" —— */
button.bg-slate-200, a.bg-slate-200, [role="button"].bg-slate-200 {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(15,23,42,0.05) !important;
}
button.bg-slate-200:hover, a.bg-slate-200:hover, .hover\:bg-slate-300:hover {
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 10px -3px rgba(15,23,42,0.12) !important;
    transform: translateY(-1px);
}
button.bg-slate-200:active, a.bg-slate-200:active { transform: translateY(0); }

/* ===================================================================
   20. MODALES NATIVOS <dialog> · acabado uniforme y elegante
   ------------------------------------------------------------------
   Quita el borde por defecto del navegador, redondea, da sombra
   profunda, difumina el fondo y anima la entrada. Compatible con los
   <dialog> que ya usa el CRM (p. ej. Importación Masiva en personas).
   =================================================================== */
dialog {
    border: none !important;
    color: var(--el-text);
    border-radius: var(--el-radius-lg) !important;
    box-shadow: var(--el-shadow-xl) !important;
    padding: 0;
}
dialog::backdrop {
    background: rgba(15,23,42,0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
dialog[open] { animation: elDialogIn 0.28s cubic-bezier(.16,1,.3,1); }
@keyframes elDialogIn {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* Inter garantizado también dentro del dialog (top-layer) */
dialog, dialog * { font-family: var(--el-font) !important; }