body {
    background-color: #030712;
    color: #F8FAFC;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input, textarea, select {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

.glass-panel {
    background: rgba(11, 17, 38, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel:hover {
    border-color: rgba(99, 102, 241, 0.4);
}

.glass-card-premium {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%), rgba(10, 16, 36, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 35px -5px rgba(99, 102, 241, 0.12);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card-premium:hover {
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.8), 0 0 45px -5px rgba(99, 102, 241, 0.25);
    transform: translateY(-3px);
}

.grid-pattern {
    background-image: radial-gradient(rgba(99, 102, 241, 0.12) 1px, transparent 1px);
    background-size: 32px 32px;
}

.glow-indigo {
    box-shadow: 0 0 25px -5px rgba(99, 102, 241, 0.35);
}

.glow-purple {
    box-shadow: 0 0 25px -5px rgba(168, 85, 247, 0.35);
}

.glow-cyan {
    box-shadow: 0 0 25px -5px rgba(6, 182, 212, 0.35);
}

.gradient-text-ai {
    background: linear-gradient(135deg, #60A5FA 0%, #818CF8 50%, #C084FC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text-gold {
    background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 50%, #D97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text-emerald {
    background: linear-gradient(135deg, #A7F3D0 0%, #10B981 50%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text-vivid {
    background: linear-gradient(135deg, #FFFFFF 0%, #C7D2FE 40%, #818CF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.animate-float {
    animation: floatSlow 5s ease-in-out infinite;
}

@keyframes textShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.shimmer-text {
    background: linear-gradient(90deg, #38BDF8 0%, #818CF8 25%, #C084FC 50%, #34D399 75%, #38BDF8 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 6s linear infinite;
}

.glass-card-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(15, 23, 42, 0.7) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(6, 182, 212, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card-cyan:hover {
    border-color: rgba(6, 182, 212, 0.6);
    box-shadow: 0 20px 40px -10px rgba(6, 182, 212, 0.2);
    transform: translateY(-2px);
}

.glass-card-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(15, 23, 42, 0.7) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 85, 247, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card-purple:hover {
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 20px 40px -10px rgba(168, 85, 247, 0.2);
    transform: translateY(-2px);
}

.glass-card-emerald {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(15, 23, 42, 0.7) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(16, 185, 129, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card-emerald:hover {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.2);
    transform: translateY(-2px);
}

@keyframes wavePulse {
    0%, 100% { height: 6px; opacity: 0.4; }
    50% { height: 32px; opacity: 1; }
}

.audio-wave-bar {
    width: 3.5px;
    background: linear-gradient(to top, #6366F1, #06B6D4);
    border-radius: 9999px;
    animation: wavePulse 1.2s ease-in-out infinite;
}

.audio-wave-bar:nth-child(2) { animation-delay: 0.15s; }
.audio-wave-bar:nth-child(3) { animation-delay: 0.3s; }
.audio-wave-bar:nth-child(4) { animation-delay: 0.45s; }
.audio-wave-bar:nth-child(5) { animation-delay: 0.2s; }
.audio-wave-bar:nth-child(6) { animation-delay: 0.5s; }
.audio-wave-bar:nth-child(7) { animation-delay: 0.1s; }
.audio-wave-bar:nth-child(8) { animation-delay: 0.35s; }
.audio-wave-bar:nth-child(9) { animation-delay: 0.25s; }
.audio-wave-bar:nth-child(10) { animation-delay: 0.4s; }

.gradient-border {
    position: relative;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes laserSweep {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.laser-bar-container {
    position: relative;
    overflow: hidden;
    height: 3px;
    background: rgba(6, 182, 212, 0.15);
    border-radius: 4px;
}

.laser-bar-sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, #06B6D4, #A855F7, transparent);
    box-shadow: 0 0 12px #06B6D4, 0 0 20px #A855F7;
    animation: laserSweep 1.5s ease-in-out infinite;
}

/* =========================================================================
   SCROLLBAR DISCRETO PARA NAVEGACIÓN Y CONTENEDORES HORIZONTALES
   ========================================================================= */
.scrollbar-discrete {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

.scrollbar-discrete::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.scrollbar-discrete::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-discrete::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 4px;
}

.scrollbar-discrete::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.6);
}

/* =========================================================================
   OPTIMIZACIÓN TIPOGRÁFICA Y CONTRASTE EN TABLAS DEL DASHBOARD
   ========================================================================= */
.dashboard-table,
.glass-panel table,
.glass-card table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.dashboard-table thead th,
.glass-panel table thead th,
.glass-card table thead th {
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.5 !important;
    color: #9CA3AF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.dashboard-table tbody td,
.glass-panel table tbody td,
.glass-card table tbody td {
    font-weight: 500 !important;
    line-height: 1.65 !important;
    color: #E5E7EB;
    vertical-align: middle;
}

.dashboard-table tbody tr,
.glass-panel table tbody tr,
.glass-card table tbody tr {
    transition: background-color 0.15s ease-in-out;
}

.dashboard-table tbody tr:hover,
.glass-panel table tbody tr:hover,
.glass-card table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.dashboard-table td strong,
.dashboard-table td b,
.glass-panel table td strong,
.glass-card table td strong {
    font-weight: 700 !important;
    color: #FFFFFF !important;
}

.dashboard-table code,
.glass-panel table code,
.glass-card table code {
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* =========================================================================
   SHADOW GLOWS (ADMIN RBAC CONSOLES v5.2.0)
   ========================================================================= */
.shadow-glow-indigo {
    box-shadow: 0 0 20px -5px rgba(99, 102, 241, 0.35);
}
.shadow-glow-cyan {
    box-shadow: 0 0 20px -5px rgba(6, 182, 212, 0.35);
}
.shadow-glow-purple {
    box-shadow: 0 0 20px -5px rgba(168, 85, 247, 0.35);
}
.shadow-glow-emerald {
    box-shadow: 0 0 20px -5px rgba(16, 185, 129, 0.35);
}

/* =========================================================================
   ADMIN CONSOLE TAB SYSTEM (RBAC v5.2.0)
   ========================================================================= */
.tab-btn {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.tab-btn:hover {
    opacity: 0.9;
}

/* =========================================================================
   ANIMATIONS (v5.2.0 APEX)
   ========================================================================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out both;
}

/* =========================================================================
   RANGE INPUT STYLING (ROI SIMULATOR)
   ========================================================================= */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 999px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #10B981;
    cursor: pointer;
    border: 2px solid #030712;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #10B981;
    cursor: pointer;
    border: 2px solid #030712;
}

/* =========================================================================
   PROTECCIÓN CONTRA DESBORDAMIENTO DE BOTONES Y TIPOGRAFÍA ULTRA NÍTIDA (v5.2.0)
   ========================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: #0B0F17 !important;
    color: #E5E7EB;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

button, .btn, [role="button"], a.btn, input[type="button"], input[type="submit"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    max-width: 100%;
    word-break: normal;
}

.btn-truncate, .button-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.flex-btn-group, .btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

table button, table a.btn, .table-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* Linear / Vercel Design System Utility Tokens */
.bg-linear-base { background-color: #0B0F17 !important; }
.bg-linear-card { background-color: #111827 !important; }
.border-linear { border-color: #1F2937 !important; }
.border-linear-hover:hover { border-color: #38BDF8 !important; }

/* Evitar solapamientos o desbordes en filas de botones */
.nav-action-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .nav-action-bar {
        flex-wrap: wrap;
    }
}

/* =========================================================================
   LIGHT MODE PALETTE & SMOOTH TRANSITION (v5.2.0)
   ========================================================================= */
body, header, nav, .linear-tab, .glass-panel, .glass-card-premium {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

html.light,
html.light body,
html.light [class*="bg-[#030712]"] {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

html.light canvas#neural-canvas {
    opacity: 0.18 !important;
    filter: invert(0.9) hue-rotate(180deg);
}

html.light header,
html.light nav,
html.light .bg-\[\#0B0F17\],
html.light .bg-\[\#0A0F1E\],
html.light .bg-\[\#050811\],
html.light .bg-\[\#030712\] {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}

html.light .bg-\[\#111827\],
html.light .bg-gray-900,
html.light .bg-gray-950,
html.light .bg-slate-950 {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
}

html.light .border-\[\#1F2937\],
html.light .border-gray-800,
html.light .border-slate-800 {
    border-color: #E2E8F0 !important;
}

html.light .text-white,
html.light h1,
html.light h2,
html.light h3,
html.light h4 {
    color: #0F172A !important;
}

html.light .text-gray-200,
html.light .text-gray-300 {
    color: #334155 !important;
}

html.light .text-gray-400,
html.light .text-gray-500 {
    color: #64748B !important;
}

html.light .glass-panel {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light .glass-card-premium {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08) !important;
}

html.light .linear-tab.active {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #0284C7 !important;
    box-shadow: 0 0 16px rgba(2, 132, 199, 0.15) !important;
}

html.light .grid-pattern {
    background-image: radial-gradient(rgba(14, 165, 233, 0.15) 1px, transparent 1px) !important;
}

html.light .faq-card {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

html.light .faq-card:hover {
    border-color: #38BDF8 !important;
}

html.light table tbody tr:hover {
    background-color: #F8FAFC !important;
}

html.light table thead tr {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

html.light table tbody tr {
    border-color: #E2E8F0 !important;
}

html.light input[type="range"] {
    background-color: #E2E8F0 !important;
}