/* ES: Estilos del shell enterprise. Extraidos LITERALMENTE del bloque <style>
       inline de templates/base_enterprise.html: mismo contenido y mismo orden,
       sin reescribir ni minificar. Iban dentro del HTML de cada pagina
       autenticada (~115 KB) y el navegador no podia cachearlos.
       El bloque se parte en DOS archivos porque en medio va el CSS del menu de
       usuario, que es dinamico (macro compartida con base_forms.html). Partirlo
       ahi conserva el orden de cascada exacto que habia. */

        :root {
            /* Nueva Paleta de Colores - Azul/Celeste Empresarial */
            --primary-dark: #16406E;
            --primary-main: #16406E;
            --primary-light: #16406E;
            --secondary-dark: #164e63;
            --secondary-main: #16406E;
            --secondary-light: #67e8f9;
            --accent: #3b82f6;
            --success: #059669;
            --warning: #495057;
            /* Gris oscuro para enlaces expirados */
            --danger: #dc2626;
            --info: #16406E;

            /* Neutral Colors - Más Suaves */
            --gray-50: #fefefe;
            --gray-100: #f7f8fc;
            --gray-200: #e1e7ef;
            --gray-300: #cbd2dc;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;

            /* Gradientes Azul/Celeste Empresarial */
            --gradient-primary: linear-gradient(135deg, #16406E 0%, #16406E 50%, #16406E 100%);
            --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #16406E 100%);
            --gradient-success: linear-gradient(135deg, #059669 0%, #10b981 100%);
            --gradient-warm: linear-gradient(135deg, #67e8f9 0%, #16406E 50%, #16406E 100%);
            --gradient-cool: linear-gradient(135deg, #16406E 0%, #16406E 50%, #16406E 100%);

            /* Shadows Azul/Celeste Empresarial */
            --shadow-sm: 0 2px 8px 0 rgb(22 64 110 / 0.08);
            --shadow-md: 0 8px 25px -5px rgb(22 64 110 / 0.12), 0 4px 12px -4px rgb(22 64 110 / 0.08);
            --shadow-lg: 0 20px 40px -12px rgb(22 64 110 / 0.18), 0 8px 16px -8px rgb(22 64 110 / 0.12);
            --shadow-xl: 0 32px 64px -12px rgb(22 64 110 / 0.25), 0 16px 32px -16px rgb(22 64 110 / 0.15);
            --shadow-2xl: 0 40px 80px -20px rgb(22 64 110 / 0.35), 0 24px 48px -24px rgb(22 64 110 / 0.25);

            /* Border Radius Más Orgánico */
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 28px;
            --radius-xl: 40px;

            /* ========================================
               SISTEMA DE TIPOGRAFÍA
               ======================================== */

            /* Font Families - System Font Stack moderno */
            --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Courier New', monospace;

            /* Font Sizes - Sistema de escala armónica */
            --font-size-xs: 0.75rem;
            /* 12px - Badges, labels pequeños */
            --font-size-sm: 0.875rem;
            /* 14px - Form text, ayuda */
            --font-size-base: 0.9375rem;
            /* 15px - Texto principal */
            --font-size-md: 1rem;
            /* 16px - Texto destacado */
            --font-size-lg: 1.0625rem;
            /* 17px - Subtítulos */
            --font-size-xl: 1.125rem;
            /* 18px - Headers pequeños */
            --font-size-2xl: 1.25rem;
            /* 20px - Headers medianos */
            --font-size-3xl: 1.5rem;
            /* 24px - Headers grandes */
            --font-size-4xl: 1.875rem;
            /* 30px - Títulos principales */
            --font-size-5xl: 2.25rem;
            /* 36px - Hero titles */

            /* Font Weights */
            --font-weight-light: 300;
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
            --font-weight-extrabold: 800;

            /* Line Heights */
            --line-height-none: 1;
            --line-height-tight: 1.25;
            --line-height-snug: 1.375;
            --line-height-normal: 1.5;
            --line-height-relaxed: 1.625;
            --line-height-loose: 2;

            /* Letter Spacing */
            --letter-spacing-tight: -0.025em;
            --letter-spacing-normal: 0;
            --letter-spacing-wide: 0.025em;
            --letter-spacing-wider: 0.05em;
        }

        /* ========================================
           ESTILOS BASE DE TIPOGRAFÍA
           ======================================== */

        * {
            font-family: var(--font-primary);
            font-weight: var(--font-weight-normal);
        }

        body {
            background: linear-gradient(135deg, #fefefe 0%, #f7f8fc 50%, #e1e7ef 100%);
            color: var(--gray-800);
            line-height: var(--line-height-relaxed);
            font-size: var(--font-size-base);
            position: relative;
            overflow-x: hidden;
        }

        /* Fondo con patrones orgánicos */
        body::before {
            content: '';
            position: fixed;
            top: -20%;
            left: -20%;
            width: 140%;
            height: 140%;
            background:
                radial-gradient(circle at 15% 25%, rgba(22, 64, 110, 0.08) 0%, transparent 60%),
                radial-gradient(circle at 85% 75%, rgba(59, 130, 246, 0.06) 0%, transparent 60%),
                radial-gradient(circle at 45% 10%, rgba(22, 64, 110, 0.04) 0%, transparent 50%);
            z-index: -2;
            animation: float-bg 25s ease-in-out infinite;
        }

        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%2316406E" fill-opacity="0.02"><circle cx="30" cy="30" r="2"/></g></svg>');
            z-index: -1;
            pointer-events: none;
        }

        /* ========================================
           HEADERS - SISTEMA UNIFICADO
           ======================================== */

        h1,
        .h1 {
            font-size: var(--font-size-3xl);
            /* 24px */
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-tight);
            letter-spacing: var(--letter-spacing-tight);
            color: var(--gray-900);
            margin-bottom: 0.875rem;
        }

        h2,
        .h2 {
            font-size: var(--font-size-2xl);
            /* 20px */
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-tight);
            letter-spacing: var(--letter-spacing-tight);
            color: var(--gray-900);
            margin-bottom: 0.75rem;
        }

        h3,
        .h3 {
            font-size: var(--font-size-xl);
            /* 18px */
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-snug);
            color: var(--gray-800);
            margin-bottom: 0.625rem;
        }

        h4,
        .h4 {
            font-size: var(--font-size-lg);
            /* 17px */
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-snug);
            color: var(--gray-800);
            margin-bottom: 0.625rem;
        }

        h5,
        .h5 {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-normal);
            color: var(--gray-700);
            margin-bottom: 0.625rem;
        }

        h6,
        .h6 {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-normal);
            color: var(--gray-700);
            margin-bottom: 0.5rem;
        }

        /* ========================================
           TEXTO Y PÁRRAFOS
           ======================================== */

        p {
            margin-bottom: 1rem;
            line-height: var(--line-height-relaxed);
        }

        .lead {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-relaxed);
            color: var(--gray-700);
        }

        .text-sm {
            font-size: var(--font-size-sm);
        }

        .text-xs {
            font-size: var(--font-size-xs);
        }

        .text-lg {
            font-size: var(--font-size-lg);
        }

        .text-xl {
            font-size: var(--font-size-xl);
        }

        small,
        .small {
            font-size: var(--font-size-sm);
        }

        /* ========================================
           UTILIDADES DE PESO Y ESTILO
           ======================================== */

        .font-light {
            font-weight: var(--font-weight-light);
        }

        .font-normal {
            font-weight: var(--font-weight-normal);
        }

        .font-medium {
            font-weight: var(--font-weight-medium);
        }

        .font-semibold {
            font-weight: var(--font-weight-semibold);
        }

        .font-bold {
            font-weight: var(--font-weight-bold);
        }

        .font-extrabold {
            font-weight: var(--font-weight-extrabold);
        }

        /* ========================================
           TARJETAS CLICKEABLES
           ======================================== */

        /* Hover estándar para tarjetas clickeables - mismo estilo que btn-light */
        .clickable-card {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .clickable-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.2);
        }

        /* ========================================
           FONDOS AZULES - TEXTO BLANCO GLOBAL
           ======================================== */

        .bg-primary {
            background-color: #16406E !important;
            color: white !important;
        }

        .bg-primary h1,
        .bg-primary h2,
        .bg-primary h3,
        .bg-primary h4,
        .bg-primary h5,
        .bg-primary h6,
        .bg-primary p,
        .bg-primary span,
        .bg-primary div,
        .bg-primary i,
        .bg-primary a {
            color: white;
        }

        .card-header.bg-primary,
        .badge.bg-primary {
            color: white !important;
        }

        /* ES: Outline y neutros con color original; solo salto suave en hover.
           EN: Keep original outline/neutral colors; only apply subtle hover lift. */
        .btn-outline-primary,
        .btn-outline-success,
        .btn-outline-info,
        .btn-outline-danger,
        .btn-outline-warning {
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        /* Azul El Salvador para btn-outline-primary en estado normal */
        .btn-outline-primary {
            border-color: #16406E !important;
            color: #16406E !important;
        }

        /* ES: Hover uniforme solo con salto, sin escala ni expansion.
           EN: Uniform hover uses lift only, no scale or expansion. */
        .btn-outline-primary:hover,
        .btn-outline-success:hover,
        .btn-outline-info:hover,
        .btn-outline-danger:hover,
        .btn-outline-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        .btn-outline-primary:hover {
            background: #16406E;
            border-color: #16406E;
            color: white !important;
        }

        /* ES: Variante neutra light con mismo patron de hover suave.
           EN: Neutral light variant follows the same subtle hover pattern. */
        .btn-light {
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        .btn-light:hover {
            background: white !important;
            border-color: white;
            color: #212529 !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }


        @keyframes float-bg {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            33% {
                transform: translateY(-30px) rotate(2deg);
            }

            66% {
                transform: translateY(15px) rotate(-1deg);
            }
        }

        /* Nueva Navegación Moderna */
        .navbar-enterprise {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 32px rgba(22, 64, 110, 0.12);
            border-bottom: 1px solid rgba(22, 64, 110, 0.1);
            padding: 1rem 0;
            border-radius: 0 0 var(--radius-lg) var(--radius-lg);
            position: sticky;
            top: 0;
            z-index: 1030 !important;
        }

        .navbar-brand {
            font-family: 'Poppins', sans-serif;
            font-weight: 900;
            font-size: 1.4rem;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-transform: uppercase;
            letter-spacing: -0.5px;
        }

        /* Language Selector Styles */
        .language-selector-enterprise {
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            margin-left: 15px;
            margin-right: 10px;
            transition: all 0.3s ease;
            border: 2px solid rgba(2, 132, 199, 0.3);
        }

        .language-selector-enterprise:hover {
            background: rgba(255, 255, 255, 1);
            border-color: rgba(2, 132, 199, 0.5);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
        }

        .language-flag-enterprise {
            width: 32px;
            height: 24px;
            border-radius: 4px;
            object-fit: cover;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }

        .language-text-enterprise {
            font-size: 14px;
            font-weight: 600;
            color: #1f2937;
        }

        /* Language selector mobile - compact version */
        .language-selector-mobile {
            display: none;
            /* Hidden by default */
            align-items: center;
            padding: 6px 10px;
            background: white;
            border-radius: 8px;
            border: 1px solid rgba(2, 132, 199, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* Show mobile selector only on small screens */
        @media (max-width: 991.98px) {
            .language-selector-mobile {
                display: inline-flex !important;
            }

            .language-flag-enterprise {
                width: 28px;
                height: 20px;
            }
        }

        .language-selector-mobile:hover {
            background: #f0f9ff;
            border-color: rgba(2, 132, 199, 0.5);
            transform: translateY(-1px);
        }

        /* Language selector desktop - full version */
        .language-selector-desktop {
            display: none;
            /* Hidden by default */
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: white;
            border-radius: 8px;
            border: 1px solid rgba(2, 132, 199, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .language-selector-desktop:hover {
            background: #f0f9ff;
            border-color: rgba(2, 132, 199, 0.5);
            transform: translateY(-1px);
        }

        /* Desktop: show desktop selector and position at the end */
        @media (min-width: 992px) {
            .language-selector-desktop {
                display: inline-flex !important;
            }

            .navbar-enterprise .container {
                display: flex;
                align-items: center;
            }

            .language-selector-desktop {
                margin-left: auto;
            }
        }

        /* Language selector dropdown - real menu (replaces old click-to-toggle) */
        .language-selector-enterprise .dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: inherit;
            text-decoration: none;
            cursor: pointer;
        }

        .language-selector-enterprise .dropdown-toggle::after {
            display: none !important;
        }

        .language-dropdown-item-enterprise {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 44px;
        }

        .language-flag-enterprise-item {
            width: 24px;
            height: 18px;
            border-radius: 3px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .nav-link {
            color: var(--gray-700) !important;
            font-weight: 500;
            font-family: 'Nunito', sans-serif;
            padding: 0.75rem 1.25rem !important;
            border-radius: var(--radius-sm);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--gradient-warm);
            transition: left 0.5s ease;
            z-index: -1;
            border-radius: var(--radius-sm);
        }

        .nav-link:hover {
            color: white !important;
            transform: translateY(-2px) scale(1.02);
            box-shadow: var(--shadow-md);
        }

        .nav-link:hover::before {
            left: 0;
        }

        .nav-link.active {
            color: white !important;
            background: var(--gradient-primary);
            box-shadow: var(--shadow-lg);
            transform: translateY(-1px);
        }

        /* Navbar autenticado: icono arriba, texto abajo */
        .auth-main-nav .auth-nav-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.2rem;
            min-width: 96px;
            padding: 0.6rem 1rem !important;
            line-height: 1.1;
            text-align: center;
        }

        .auth-main-nav .auth-nav-link .nav-link-icon {
            font-size: 0.95rem;
            color: #16406E;
            transition: color 0.3s ease;
        }

        .auth-main-nav .auth-nav-link .nav-link-text {
            font-size: 0.84rem;
            font-weight: 500;
            text-transform: capitalize;
            letter-spacing: 0.01em;
            color: #1f2937;
            -webkit-font-smoothing: antialiased;
            text-rendering: geometricPrecision;
            white-space: nowrap;
        }

        .auth-main-nav .auth-nav-link .nav-link-text-row {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        /* ES: variante de dos lineas — el ancho min-content parte el texto
           en una palabra por linea (Certificar / Documento). */
        .auth-main-nav .auth-nav-link .nav-link-text-stacked {
            white-space: normal;
            width: min-content;
        }

        .auth-main-nav .auth-nav-link .nav-link-caret {
            font-size: 0.65rem;
            color: #16406E;
            transition: color 0.3s ease;
        }

        .auth-main-nav .auth-nav-dropdown-toggle::after {
            display: none !important;
        }

        .auth-main-nav .auth-nav-link:hover .nav-link-icon,
        .auth-main-nav .auth-nav-link:hover .nav-link-caret,
        .auth-main-nav .auth-nav-link.active .nav-link-icon,
        .auth-main-nav .auth-nav-link.active .nav-link-caret {
            color: #ffffff;
        }

        /* Hover simple para navbar nuevo: solo elevacion, sin cambio de color/sombra */
        .auth-main-nav .auth-nav-link:hover {
            transform: translateY(-2px);
            box-shadow: none;
            color: inherit !important;
        }

        .auth-main-nav .auth-nav-link:hover::before {
            left: -100%;
        }

        .auth-main-nav .auth-nav-link:hover .nav-link-icon,
        .auth-main-nav .auth-nav-link:hover .nav-link-caret,
        .auth-main-nav .auth-nav-link:hover .nav-link-text {
            color: inherit;
        }

        @media (max-width: 991.98px) {
            .auth-main-nav .auth-nav-link {
                min-width: auto;
                align-items: flex-start;
                text-align: left;
                padding: 0.6rem 0.9rem !important;
            }
        }

        /* Nuevas Tarjetas Modernas */
        .card-enterprise {
            border: none;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.92);
            position: relative;
            overflow: hidden;
        }

        .card-enterprise::before {
            content: none;
        }

        /* Hover removido - card-enterprise no es clickeable */

        .card-header-enterprise {
            background: transparent;
            color: var(--gray-800);
            border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
            border-bottom: 1px solid rgba(2, 132, 199, 0.1);
            padding: 2.5rem 2rem 2.5rem 2.5rem;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            position: relative;
        }

        .card-header-enterprise::after {
            content: none;
        }

        /* Botones Modernos y Orgánicos */
        .btn-enterprise {
            border-radius: var(--radius-lg);
            font-weight: 600;
            font-family: 'Nunito', sans-serif;
            padding: 1rem 2rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow-md);
            position: relative;
            overflow: hidden;
            text-transform: none;
            letter-spacing: 0.3px;
        }

        .btn-enterprise::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .btn-enterprise:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.2);
        }

        .btn-enterprise:hover::before {
            width: 0;
            height: 0;
        }

        /* Familia enterprise principal: conservar color por variante */
        /* ES: Estandarizar hover por cambio de tono sin efecto de expansion.
           EN: Standardize hover as tone change without expansion effect. */
        .btn-primary-enterprise,
        .btn-accent-enterprise,
        .btn-success-enterprise {
            font-weight: 600;
            transition: background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
            box-shadow: var(--shadow-md);
            position: relative;
            overflow: hidden;
        }

        .btn-primary-enterprise {
            background: #16406E;
            border: 2px solid #16406E;
            color: #ffffff !important;
        }

        .btn-accent-enterprise {
            background: var(--gradient-cool);
            border: none;
            color: white;
        }

        .btn-success-enterprise {
            background: var(--gradient-success);
            border: none;
            color: white;
        }

        .btn-primary-enterprise:hover {
            background: #13365E !important;
            border-color: #13365E;
            color: #ffffff !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        .btn-accent-enterprise:hover,
        .btn-success-enterprise:hover {
            filter: brightness(0.92);
            color: #ffffff !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        .btn-primary-enterprise i,
        .btn-primary-enterprise span {
            color: #ffffff !important;
        }

        .btn-accent-enterprise i,
        .btn-accent-enterprise span,
        .btn-success-enterprise i,
        .btn-success-enterprise span {
            color: #ffffff !important;
        }

        /* Tarjetas de Estadísticas Modernas */
        .stat-card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: var(--radius-xl);
            padding: 1.5rem 1.5rem;
            box-shadow: var(--shadow-lg);
            border: 2px solid transparent;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        }

        /* Hover removido - stat-card no es clickeable */

        .stat-card.primary::before,
        .stat-card.success::before,
        .stat-card.warning::before,
        .stat-card.info::before,
        .stat-card.danger::before {
            background: var(--gradient-primary);
        }

        .stat-icon {
            font-size: 2.5rem;
            opacity: 0.9;
            margin-bottom: 1.5rem;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: 0.5rem;
            font-family: 'Poppins', sans-serif;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-label {
            color: var(--gray-600);
            font-weight: 500;
            font-size: 0.95rem;
            text-transform: none;
            letter-spacing: 0.2px;
            font-family: 'Nunito', sans-serif;
        }

        /* Formularios Modernos */
        .form-enterprise .form-control {
            border: 2px solid var(--gray-200);
            border-radius: var(--radius-md);
            padding: 1rem 1.25rem;
            font-family: 'Nunito', sans-serif;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(255, 255, 255, 0.95);
        }

        .form-enterprise .form-control:focus {
            border-color: var(--primary-main);
            box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1);
            background: white;
            transform: translateY(-2px);
        }

        .form-enterprise .form-label {
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-base);
            color: var(--gray-700);
            margin-bottom: 0.75rem;
            font-family: var(--font-primary);
            line-height: var(--line-height-normal);
        }

        /* Estilos globales para labels (no solo enterprise) */
        .form-label {
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-base);
            color: var(--gray-700);
            margin-bottom: 0.75rem;
            line-height: var(--line-height-normal);
        }

        /* Form text (ayuda) */
        .form-text {
            font-size: var(--font-size-sm);
            color: var(--gray-600);
            line-height: var(--line-height-normal);
        }

        /* Badges Únicos */
        .badge-enterprise {
            border-radius: var(--radius-lg);
            padding: 0.35rem 0.85rem;
            font-weight: 600;
            font-family: 'Nunito', sans-serif;
            text-transform: none;
            letter-spacing: 0.3px;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        .badge-primary {
            background: var(--gradient-primary);
        }

        .badge-success {
            background: var(--gradient-success);
        }

        .badge-warning {
            background: #495057;
            color: white;
        }

        /* Gris oscuro para enlaces expirados */
        .badge-info {
            background: var(--gradient-cool);
        }

        /* Animaciones Únicas */
        .fade-in {
            animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .pulse-glow {
            animation: pulseGlow 3s ease-in-out infinite;
        }

        @keyframes pulseGlow {

            0%,
            100% {
                box-shadow: var(--shadow-lg);
                transform: scale(1);
            }

            50% {
                box-shadow: var(--shadow-2xl);
                transform: scale(1.02);
            }
        }

        /* Sidebar Moderna */
        .sidebar-enterprise {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: var(--shadow-xl);
            border-radius: var(--radius-xl);
            padding: 2rem;
            margin-bottom: 2rem;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(2, 132, 199, 0.1);
        }

        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar-menu li {
            margin-bottom: 0.75rem;
        }

        .sidebar-menu a {
            display: flex;
            align-items: center;
            padding: 1rem 1.25rem;
            color: var(--gray-700);
            text-decoration: none;
            border-radius: var(--radius-md);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 500;
            font-family: 'Nunito', sans-serif;
            position: relative;
            overflow: hidden;
        }

        .sidebar-menu a::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--gradient-warm);
            transition: left 0.5s ease;
            z-index: -1;
        }

        .sidebar-menu a:hover {
            color: white;
            transform: translateX(8px) scale(1.02);
            box-shadow: var(--shadow-md);
        }

        .sidebar-menu a:hover::before {
            left: 0;
        }

        .sidebar-menu a.active {
            background: var(--gradient-primary);
            color: white;
            box-shadow: var(--shadow-lg);
        }

        .sidebar-menu i {
            margin-right: 1rem;
            width: 24px;
            text-align: center;
            font-size: 1.1rem;
        }

        /* Enterprise Tables */
        .table-enterprise {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-md);
        }

        .table-enterprise th {
            background: var(--gray-50);
            color: var(--gray-700);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.4rem;
            letter-spacing: 0.5px;
            padding: 1rem 1.5rem;
            border: none;
        }

        .table-enterprise td {
            padding: 1rem 1.5rem;
            border-color: var(--gray-200);
            vertical-align: middle;
        }

        /* Status Badges */
        .badge-enterprise {
            font-weight: 600;
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.85rem;
            text-transform: none;
            letter-spacing: 0.3px;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        .badge-success {
            background: var(--success);
            color: white;
        }

        .badge-warning {
            background: var(--warning);
            color: white;
        }

        .badge-danger {
            background: var(--danger);
            color: white;
        }

        .badge-info {
            background: var(--info);
            color: white;
        }

        .badge-primary {
            background: var(--primary-main);
            color: white;
        }

        /* Forms */
        .form-enterprise .form-control {
            border-radius: 12px;
            border: 2px solid var(--gray-200);
            padding: 0.75rem 1rem;
            transition: all 0.3s ease;
        }

        .form-enterprise .form-control:focus {
            border-color: var(--primary-main);
            box-shadow: 0 0 0 0.2rem rgba(2, 132, 199, 0.25);
        }

        .form-enterprise .form-label {
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 0.5rem;
        }

        /* Loading Spinner */
        .spinner-enterprise {
            width: 2rem;
            height: 2rem;
            border: 3px solid var(--gray-200);
            border-top: 3px solid var(--primary-main);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            .stat-card {
                padding: 1.5rem;
                margin-bottom: 1rem;
            }

            .card-enterprise {
                margin-bottom: 1rem;
            }

            .sidebar-enterprise {
                margin-bottom: 1rem;
            }
        }

        /* Custom Animations */
        .fade-in {
            animation: fadeIn 0.6s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .slide-in {
            animation: slideIn 0.8s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* ================================================
           DASHBOARD SPECIFIC STYLES
           ================================================ */

        /* Welcome Banner - Ensure it stays below all dropdowns */
        .welcome-banner {
            background: var(--gradient-primary);
            color: white;
            border-radius: 20px;
            padding: 2rem 1.5rem;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
            z-index: 1 !important;
        }

        .welcome-banner h1,
        .welcome-banner h2,
        .welcome-banner h3,
        .welcome-banner h4,
        .welcome-banner h5,
        .welcome-banner h6,
        .welcome-banner p,
        .welcome-banner span,
        .welcome-banner div {
            color: white;
        }

        /* Excepciones: botones dentro del banner mantienen sus colores */
        .welcome-banner .btn i,
        .welcome-banner .btn span {
            color: inherit;
        }

        /* Estilos para botones blancos en headers azules */
        .welcome-banner .btn-light {
            background-color: #ffffff;
            color: #16406E !important;
            border-color: #ffffff;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .welcome-banner .btn-light:hover {
            background-color: #f8f9fa;
            color: #13365E !important;
            border-color: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
        }

        .welcome-banner .btn-light i,
        .welcome-banner .btn-light span {
            color: inherit !important;
        }

        /* Navbar Dropdown Fix - Ensure dropdowns appear above all content including welcome banner */
        .navbar .dropdown-menu {
            z-index: 10000 !important;
        }

        .navbar .dropdown-menu.show {
            z-index: 10000 !important;
        }

        /* Ensure all fade-in elements (including welcome banner) stay below dropdowns */
        .fade-in {
            z-index: 10 !important;
        }

        .welcome-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.1;
        }

        /* Quick Actions */
        .quick-actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .quick-action-card {
            background: white;
            border-radius: 16px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .quick-action-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.2);
            border-color: var(--primary-main);
        }

        .quick-action-icon {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            display: block;
        }

        /* Analytics Widgets */
        .analytics-widget {
            background: white;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: var(--shadow-md);
            margin-bottom: 1.5rem;
        }

        .metric-card {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            border-left: 4px solid;
        }

        /* Hover removido - metric-card no es clickeable */

        /* Recent Activity */
        .recent-activity-item {
            background: white;
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 0.75rem;
            border-left: 3px solid var(--primary-main);
            box-shadow: var(--shadow-sm);
            transition: all 0.3s ease;
        }

        .recent-activity-item:hover {
            box-shadow: var(--shadow-md);
        }

        /* Subscription Status */
        .subscription-status {
            background: var(--gradient-success);
            color: white;
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .subscription-status h1,
        .subscription-status h2,
        .subscription-status h3,
        .subscription-status h4,
        .subscription-status h5,
        .subscription-status h6,
        .subscription-status p,
        .subscription-status span,
        .subscription-status div,
        .subscription-status i {
            color: white;
        }

        .subscription-status.trial {
            background: var(--gradient-primary);
        }

        .subscription-status.expired {
            background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
        }

        /* Override Font Awesome sizes to make icons smaller */
        .fa-2x {
            font-size: 1.3em !important;
        }

        .fa-3x {
            font-size: 1.8em !important;
        }

        /* ================================================
           FRONTPAGE/LANDING SPECIFIC STYLES
           ================================================ */

        /* Landing Page Navbar Overrides */
        .navbar-enterprise.landing {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        /* Ensure all navbar dropdowns appear above all content including banners */
        .navbar-enterprise .dropdown-menu {
            z-index: 10000 !important;
        }

        .navbar-enterprise .dropdown-menu.show {
            z-index: 10000 !important;
        }

        /* Additional Bootstrap dropdown overrides - Maximum priority */
        .dropdown-menu {
            z-index: 10000 !important;
        }

        .dropdown-menu.show {
            z-index: 10000 !important;
        }

        /* User dropdown specific override */
        #userDropdown+.dropdown-menu {
            z-index: 10000 !important;
            min-width: 220px;
            padding: 0.35rem 0;
            border-radius: 10px;
        }

        #userDropdown+.dropdown-menu .dropdown-header {
            padding: 0.5rem 0.8rem 0.4rem;
            font-size: 0.82rem;
        }

        #userDropdown+.dropdown-menu .dropdown-header .fa-user-circle {
            font-size: 1.5em !important;
        }

        #userDropdown+.dropdown-menu .dropdown-item {
            padding: 0.42rem 0.8rem;
            font-size: 0.86rem;
            line-height: 1.25;
        }

        #userDropdown+.dropdown-menu .dropdown-item i {
            width: 1rem;
            text-align: center;
        }

        #userDropdown+.dropdown-menu .dropdown-divider {
            margin: 0.25rem 0;
        }