/* 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. */


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

        /* Additional specific overrides for any dropdown with .show class */
        .dropdown-menu.dropdown-menu-end {
            z-index: 10000 !important;
        }

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

        /* Override any Bootstrap or other conflicting z-index */
        .navbar .dropdown-menu[data-bs-popper] {
            z-index: 10000 !important;
        }

        .navbar-enterprise.landing .navbar-brand {
            color: var(--primary-dark) !important;
            font-size: 1.3rem;
        }

        .navbar-enterprise.landing .nav-link {
            color: var(--gray-700) !important;
            font-weight: 500;
        }

        .navbar-enterprise.landing .nav-link:hover {
            color: white !important;
            background: var(--primary-main) !important;
        }

        /* Hide enterprise navigation items for landing */
        .navbar-enterprise.landing .navbar-nav .nav-item:not(.landing-nav) {
            display: none;
        }

        /* Adjust body for fixed navbar on landing - Compacto */
        body.landing-page {
            padding-top: 60px;
            background: white;
        }

        /* Hero Section - Optimizado */
        .hero {
            background: var(--gradient-primary);
            color: white;
            padding: 60px 0;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.05)" points="0,1000 1000,0 1000,1000"/></svg>');
            background-size: cover;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .hero h1 {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.2;
            color: white;
        }

        .hero p {
            font-size: 1rem;
            margin-bottom: 1.5rem;
            opacity: 0.95;
            color: white;
        }

        .hero h2,
        .hero h3,
        .hero h4,
        .hero h5,
        .hero h6,
        .hero span,
        .hero div,
        .hero i {
            color: white;
        }

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

        .hero-badge {
            display: inline-block;
            background: rgba(255, 255, 255, 0.15);
            padding: 6px 16px;
            border-radius: 50px;
            color: white;
            margin-bottom: 1.5rem;
            font-weight: 600;
        }

        /* Features Section - Más Compacto */
        .features {
            padding: 60px 0;
            background: var(--gray-50);
        }

        .feature-card {
            background: white;
            padding: 2rem 1.5rem;
            border-radius: 16px;
            text-align: center;
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
            height: 100%;
            border: 1px solid var(--gray-200);
        }

        .feature-card:hover {
            box-shadow: var(--shadow-xl);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            color: white;
            font-size: 1.5rem;
        }

        .feature-card h3 {
            color: var(--primary-main);
            margin-bottom: 0.75rem;
            font-weight: 600;
        }

        /* Services Section - Compacto */
        .services {
            padding: 60px 0;
        }

        .service-item {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            padding: 1.5rem;
            background: white;
            border-radius: 15px;
            box-shadow: var(--shadow-md);
            border-left: 5px solid var(--primary-main);
            transition: all 0.3s ease;
        }

        .service-item:hover {
            box-shadow: var(--shadow-xl);
        }

        .service-icon {
            width: 60px;
            height: 60px;
            background: var(--primary-main);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 1.5rem;
            flex-shrink: 0;
        }

        /* Stats Section - Compacto */
        .stats {
            background: var(--gradient-primary);
            color: white;
            padding: 60px 0;
        }

        .stat-item {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .stats .stat-number {
            font-size: 2rem;
            font-weight: 700;
            display: block;
            color: var(--secondary-light);
        }

        .stats .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        /* CTA Section - Compacto */
        .cta {
            background: var(--gradient-primary);
            color: white;
            padding: 60px 0;
            text-align: center;
        }

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

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

        /* Landing page navigation adjustments */
        .landing-nav-items {
            display: flex !important;
        }

        .btn-landing-primary {
            background: var(--gradient-primary);
            border: none;
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow-md);
            position: relative;
            overflow: hidden;
        }

        .btn-landing-primary::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-landing-primary:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: var(--shadow-xl);
            color: white;
        }

        .btn-landing-primary:hover::before {
            width: 300px;
            height: 300px;
        }

        /* Landing Modal adjustments */
        .landing-page .modal-content {
            border-radius: 20px;
            border: none;
            box-shadow: var(--shadow-xl);
        }

        .landing-page .modal-header {
            border-bottom: 1px solid var(--gray-200);
            padding: 2rem 2rem 1rem;
        }

        .landing-page .modal-body {
            padding: 2rem;
        }

        /* Landing Responsive adjustments - Más compacto */
        @media (max-width: 768px) {
            .hero {
                padding: 40px 0;
            }

            .hero h1 {
                font-size: 1.8rem;
            }

            .hero p {
                font-size: 0.95rem;
            }

            .features {
                padding: 40px 0;
            }

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

            .services {
                padding: 40px 0;
            }

            .service-item {
                flex-direction: column;
                text-align: center;
                padding: 1rem;
            }

            .stats,
            .cta {
                padding: 40px 0;
            }

            .service-icon {
                margin-right: 0;
                margin-bottom: 1rem;
            }
        }

        /* Override Bootstrap text-primary for enterprise theme */
        .text-primary {
            color: var(--primary-main) !important;
        }

        /* Enhanced text colors with gradients */
        .text-gradient-primary {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }

        /* ================================================
           CREAR_DOC SPECIFIC STYLES
           ================================================ */

        /* Step Wizard */
        .step-wizard {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: var(--shadow-md);
        }

        .step-indicator {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            position: relative;
        }

        .step {
            background: white;
            border: 3px solid var(--gray-200);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2rem;
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .step.active {
            background: var(--primary-main);
            border-color: var(--primary-main);
            color: white;
            transform: scale(1.1);
        }

        .step.completed {
            background: var(--primary-main);
            border-color: var(--primary-main);
            color: white;
        }

        .step-label {
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            font-weight: 600;
            color: var(--gray-600);
            white-space: nowrap;
            font-size: 0.9rem;
        }

        .step.active .step-label {
            color: var(--primary-main);
        }

        .step.completed .step-label {
            color: var(--primary-main);
        }

        /* Upload Area */
        .upload-area {
            border: 3px dashed var(--gray-300);
            border-radius: 16px;
            padding: 3rem 2rem;
            text-align: center;
            background: var(--gray-50);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .upload-area:hover {
            border-color: var(--primary-main);
            background: rgba(2, 132, 199, 0.05);
        }

        .upload-area.dragover {
            border-color: var(--success);
            background: rgba(5, 150, 105, 0.1);
            transform: scale(1.02);
        }

        .upload-icon {
            font-size: 4rem;
            color: var(--gray-400);
            margin-bottom: 1rem;
        }

        .upload-area:hover .upload-icon {
            color: var(--primary-main);
        }

        /* PDF Viewer */
        .pdf-viewer {
            background: white;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: var(--shadow-md);
            max-height: 700px;
            overflow-y: auto;
        }

        .pdf-page-container {
            position: relative;
            margin-bottom: 2rem;
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .pdf-page img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Signature Elements */
        .signature-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .signature-box {
            position: absolute;
            border: 2px dashed var(--success);
            background: rgba(5, 150, 105, 0.1);
            pointer-events: all;
            cursor: pointer;
            min-width: 120px;
            min-height: 50px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--success);
            transition: all 0.3s ease;
        }

        .signature-box:hover {
            border-color: var(--primary-main);
            background: rgba(2, 132, 199, 0.15);
            color: var(--primary-main);
            transform: scale(1.05);
        }

        .signature-box.selected {
            border-color: var(--primary-main);
            background: rgba(2, 132, 199, 0.15);
            color: var(--primary-main);
        }

        .signature-box .delete-btn {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--danger);
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            font-size: 0.7rem;
            cursor: pointer;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .signature-box:hover .delete-btn {
            opacity: 1;
        }

        /* Signer Cards */
        .signer-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: var(--shadow-sm);
            border: 2px solid var(--gray-200);
            transition: all 0.3s ease;
        }

        .signer-card:hover {
            border-color: var(--primary-main);
            box-shadow: var(--shadow-md);
        }

        .signer-card.active {
            border-color: var(--success);
            background: rgba(5, 150, 105, 0.05);
        }

        /* Template Components */
        .template-selector {
            background: white;
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: var(--shadow-md);
        }

        .template-card {
            background: var(--gray-50);
            border: 2px solid var(--gray-200);
            border-radius: 12px;
            padding: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .template-card:hover {
            border-color: var(--primary-main);
            background: rgba(2, 132, 199, 0.05);
        }

        .template-card.selected {
            border-color: var(--success);
            background: rgba(5, 150, 105, 0.1);
        }

        .template-icon {
            font-size: 3rem;
            color: var(--gray-400);
            margin-bottom: 1rem;
        }

        .template-card.selected .template-icon {
            color: var(--success);
        }

        /* Form and Progress */
        .form-wizard {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: var(--shadow-md);
        }

        .progress-bar-enterprise {
            height: 8px;
            border-radius: 4px;
            background: var(--gradient-primary);
            transition: width 0.5s ease;
        }

        /* Floating Controls */
        .floating-controls {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: white;
            border-radius: 16px;
            padding: 1rem;
            box-shadow: var(--shadow-xl);
            z-index: 1000;
        }

        .zoom-controls {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .zoom-btn {
            background: var(--gray-100);
            border: none;
            border-radius: 8px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .zoom-btn:hover {
            background: var(--primary-main);
            color: white;
        }

        /* Additional Document Creation Utilities */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .loading-content {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .alert-container {
            margin-bottom: 1rem;
        }

        .signer-row {
            background: var(--gray-50);
            transition: all 0.3s ease;
        }

        .signer-row:hover {
            background: var(--gray-100);
        }

        /* Enhanced Step Indicators */
        .step.completed::after {
            content: '\2713';
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(2, 132, 199, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(2, 132, 199, 0);
            }
        }

        .step.active {
            animation: pulse 2s infinite;
        }

        /* Wizard Steps */
        .wizard-step {
            display: none;
        }

        .wizard-step.active {
            display: block;
        }

        /* Enhanced Upload Area */
        .upload-area.drag-over {
            border-color: var(--primary-main);
            background-color: rgba(2, 132, 199, 0.1);
            transform: scale(1.02);
        }

        /* Enhanced PDF Viewer */
        .pdf-page-container {
            border: 1px solid var(--gray-300);
            background: white;
        }

        .pdf-page {
            display: block;
            width: 100%;
            height: auto;
            cursor: crosshair;
        }

        /* Enhanced Signature Boxes */
        .signature-box {
            resize: both;
            overflow: hidden;
        }

        .signature-box.selected {
            border-color: var(--primary-main);
            background: rgba(2, 132, 199, 0.15);
            color: var(--primary-main);
            border-style: solid;
        }

        .signature-box .delete-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .signature-box .delete-btn:hover {
            background: #c82333;
            transform: scale(1.1);
        }

        /* Field Type Specific Styles */
        .signature-box[data-type="calligraphy"] {
            border-color: var(--primary-main);
            background: rgba(2, 132, 199, 0.1);
            color: var(--primary-main);
        }

        .signature-box[data-type="name"] {
            border-color: var(--primary-main);
            background: rgba(2, 132, 199, 0.1);
            color: var(--primary-main);
        }

        .signature-box[data-type="initial"] {
            border-color: var(--success);
            background: rgba(5, 150, 105, 0.1);
            color: var(--success);
        }

        .signature-box[data-type="date"] {
            border-color: var(--warning);
            background: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }

        .signature-box[data-type="text"] {
            border-color: var(--gray-500);
            background: rgba(108, 117, 125, 0.1);
            color: var(--gray-500);
        }

        /* Enhanced Floating Controls */
        .floating-controls {
            border: 1px solid var(--gray-300);
        }

        .zoom-btn {
            background: var(--gray-50);
            border: 1px solid var(--gray-300);
            color: var(--gray-600);
        }

        .zoom-btn:hover {
            background: var(--primary-main);
            border-color: var(--primary-main);
            color: white;
            transform: translateY(-2px);
        }

        /* Enhanced Animations */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        .step-content {
            animation: slideIn 0.3s ease-out;
        }

        .signature-box {
            animation: slideIn 0.2s ease-out;
        }

        /* PDF Loading State */
        .pdf-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 400px;
            background: var(--gray-50);
            border: 2px dashed var(--gray-300);
            border-radius: 8px;
        }

        .pdf-loading .spinner-border {
            width: 3rem;
            height: 3rem;
            margin-bottom: 1rem;
        }

        /* Review Section */
        .review-section {
            background: var(--gray-50);
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            border: 1px solid var(--gray-300);
        }

        .review-section h6 {
            color: var(--gray-700);
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .review-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--gray-200);
        }

        .review-item:last-child {
            border-bottom: none;
        }

        .review-item strong {
            color: var(--gray-700);
        }

        .review-item span {
            color: var(--gray-600);
            text-align: right;
            max-width: 60%;
            word-wrap: break-word;
        }

        /* ================================================
           ALREADY_SIGNED SPECIFIC STYLES
           ================================================ */

        /* Success Hero */
        .signed-hero {
            background: var(--gradient-success);
            color: white;
            border-radius: 20px;
            padding: 4rem 2rem;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
        }

        .signed-hero::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
            background-size: 60px 60px;
            animation: shimmer 15s infinite linear;
            opacity: 0.6;
        }

        @keyframes shimmer {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        .check-animation {
            font-size: 5rem;
            color: white;
            margin-bottom: 2rem;
            animation: checkPulse 2s ease-in-out infinite;
        }

        @keyframes checkPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }
        }

        /* Document Summary */
        .document-summary {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: var(--shadow-lg);
            margin-bottom: 2rem;
            border-left: 5px solid var(--success);
        }

        /* ES: Acá vivía el timeline vertical con ícono en globo y tarjeta gris
           por evento (.signature-timeline, .timeline-icon, .timeline-content y
           las variantes .signed). Ese diseño ya no existe: el historial del
           detalle del documento es una tabla de tres columnas. Ninguna plantilla
           ni JS del repo emitía esas clases, así que se fueron. Las copias que
           quedan en los <style> de base_forms.html y base_enterprise_public.html
           son de OTRO árbol de plantillas y no se tocan desde acá.
           De todo el bloque sobrevive .timeline-item, que sí se usa. */

        /* ES: Divisor entre los datos y las acciones dentro de la tarjeta de
           información. Solo en ≥lg: cuando las columnas se apilan, una línea
           vertical no separa nada, confunde. Bootstrap 5 no trae variantes
           responsive de border-*, por eso la regla vive acá. */
        @media (min-width: 992px) {
            .doc-actions-col {
                border-left: 1px solid var(--gray-200);
            }
        }

        /* ES: Filas compactas. El margin-bottom de 2rem sumaba ~32px muertos entre
           eventos: con el divisor de 1px y el padding vertical alcanza, y un
           expediente de 20+ entradas deja de ser puro scroll (pitch ~40px por
           fila en vez de ~88px). El padding vertical lo fija la utilidad py-2
           del markup, que gana por !important.

           El acento gris de la izquierda es de TODAS las filas, incluida la
           última: acá había además un `.timeline-item:last-child` con
           `border-left-color: transparent`, heredado del timeline vertical. Ahí
           el borde era la línea que unía los globos y tenía que cortarse al
           final; sin globos, sólo dejaba la última fila sin acento, como un
           renglón suelto. El divisor inferior, en cambio, sí lo pone el markup
           con {% if not loop.last %}: ese es el separador ENTRE filas. */
        .timeline-item {
            position: relative;
            padding-left: 1.875rem;
            margin-bottom: 0;
            border-left: 3px solid var(--gray-200);
        }

        .signature-badge {
            display: inline-flex;
            align-items: center;
            background: var(--success);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-top: 0.75rem;
        }

        /* Certificate Info */
        .certificate-info {
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
            border: 2px solid var(--primary-light);
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .cert-item {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            padding: 0.75rem;
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow-sm);
        }

        .cert-item:last-child {
            margin-bottom: 0;
        }

        .cert-icon {
            color: var(--primary-main);
            font-size: 1.2rem;
            margin-right: 1rem;
            width: 20px;
            text-align: center;
        }

        /* Download Section */
        .download-section {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: var(--shadow-lg);
            text-align: center;
            margin-bottom: 2rem;
        }

        .download-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 2rem;
        }

        .download-card {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border: 2px solid var(--gray-200);
            border-radius: 12px;
            padding: 1.5rem;
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .download-card:hover {
            border-color: var(--primary-main);
            box-shadow: var(--shadow-lg);
            color: inherit;
            text-decoration: none;
        }

        .download-icon {
            font-size: 2.5rem;
            color: var(--primary-main);
            margin-bottom: 1rem;
        }

        /* Action Cards */
        .action-card {
            background: white;
            border: 2px solid var(--gray-200);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
            margin-bottom: 2rem;
        }

        .action-card:hover {
            border-color: var(--primary-main);
            box-shadow: var(--shadow-md);
        }

        /* Notifications */
        .notification-success {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            border: 2px solid var(--success);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            text-align: center;
        }

        /* Completion Stats */
        .completion-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }

        .stat-item {
            text-align: center;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            backdrop-filter: blur(10px);
        }

        .completion-stats .stat-number {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--success);
            display: block;
        }

        .completion-stats .stat-label {
            font-size: 0.85rem;
            color: var(--gray-600);
            margin-top: 0.25rem;
        }

        /* Responsive Adjustments for Document Creation and Signing */
        @media (max-width: 768px) {
            .step-indicator {
                flex-direction: column;
                gap: 1rem;
            }

            .floating-controls {
                bottom: 1rem;
                right: 1rem;
                left: 1rem;
            }

            .pdf-viewer {
                max-height: 400px;
            }

            .signed-hero {
                padding: 2rem 1rem;
            }

            .check-animation {
                font-size: 3rem;
            }

            /* ES: `.signature-timeline` salió del grupo: su regla base ya no
               existe y este override quedaba huérfano. Las otras tres siguen
               acá porque son de la pantalla de documento firmado, no del
               detalle: no las audité y no se tocan desde este cambio. */
            .document-summary,
            .certificate-info,
            .download-section {
                padding: 1.5rem;
            }

            .timeline-item {
                padding-left: 1.75rem;
            }

            .download-options {
                grid-template-columns: 1fr;
            }
        }

        /* Alert Styles - Uniform design with El Salvador colors */
        .alert-primary {
            background-color: #16406E !important;
            border-color: #16406E !important;
            color: #ffffff !important;
        }

        .alert-primary .alert-heading {
            color: #ffffff !important;
        }

        .alert-primary hr {
            border-top-color: rgba(255, 255, 255, 0.3) !important;
        }

        .alert-primary .btn-close {
            filter: brightness(0) invert(1);
        }

        .alert-primary .btn {
            background-color: #ffffff !important;
            color: #16406E !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            transition: all 0.3s ease !important;
        }

        .alert-primary .btn:hover {
            background-color: #f8f9fa !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .alert-secondary {
            background-color: #6c757d !important;
            border-color: #6c757d !important;
            color: #ffffff !important;
        }

        .alert-secondary .alert-heading {
            color: #ffffff !important;
        }

        .alert-secondary hr {
            border-top-color: rgba(255, 255, 255, 0.3) !important;
        }

        .alert-secondary .btn-close {
            filter: brightness(0) invert(1);
        }

        .alert-secondary .btn {
            background-color: #ffffff !important;
            color: #6c757d !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            transition: all 0.3s ease !important;
        }

        .alert-secondary .btn:hover {
            background-color: #f8f9fa !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .alert-success {
            background-color: #198754 !important;
            border-color: #198754 !important;
            color: #ffffff !important;
        }

        .alert-success .alert-heading {
            color: #ffffff !important;
        }

        .alert-success hr {
            border-top-color: rgba(255, 255, 255, 0.3) !important;
        }

        .alert-success .btn-close {
            filter: brightness(0) invert(1);
        }

        .alert-success .btn {
            background-color: #ffffff !important;
            color: #198754 !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            transition: all 0.3s ease !important;
        }

        .alert-success .btn:hover {
            background-color: #f8f9fa !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .alert-danger {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
            color: #ffffff !important;
        }

        .alert-danger .alert-heading {
            color: #ffffff !important;
        }

        .alert-danger hr {
            border-top-color: rgba(255, 255, 255, 0.3) !important;
        }

        .alert-danger .btn-close {
            filter: brightness(0) invert(1);
        }

        .alert-danger .btn {
            background-color: #ffffff !important;
            color: #dc3545 !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            transition: all 0.3s ease !important;
        }

        .alert-danger .btn:hover {
            background-color: #f8f9fa !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .alert-warning {
            background-color: #eef6ff !important;
            border-color: #c9def7 !important;
            color: var(--primary-dark) !important;
        }

        .alert-warning .alert-heading {
            color: var(--primary-dark) !important;
        }

        .alert-warning hr {
            border-top-color: rgba(22, 64, 110, 0.18) !important;
        }

        .alert-warning .btn-close {
            filter: none;
        }

        .alert-warning .btn {
            background-color: #ffffff !important;
            color: var(--primary-dark) !important;
            border: 1px solid rgba(22, 64, 110, 0.14) !important;
            transition: all 0.3s ease !important;
        }

        .alert-warning .btn:hover {
            background-color: #f7fafe !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(22, 64, 110, 0.12);
        }

        .alert-info {
            background-color: #0057B7 !important;
            border-color: #0057B7 !important;
            color: #ffffff !important;
        }

        .alert-info .alert-heading {
            color: #ffffff !important;
        }

        .alert-info hr {
            border-top-color: rgba(255, 255, 255, 0.3) !important;
        }

        .alert-info .btn-close {
            filter: brightness(0) invert(1);
        }

        .alert-info .btn {
            background-color: #ffffff !important;
            color: #0057B7 !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            transition: all 0.3s ease !important;
        }

        .alert-info .btn:hover {
            background-color: #f8f9fa !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        /* Bootstrap Color Overrides - Paleta El Salvador */
        :root {
            --bs-primary: #16406E;
            --bs-primary-rgb: 22, 64, 110;
            --bs-info: #0057B7;
            --bs-info-rgb: 0, 87, 183;
        }

        .btn-primary {
            background-color: #16406E;
            border-color: #16406E;
        }

        .btn-primary:hover,
        .btn-primary:focus {
            background-color: #13365E;
            border-color: #13365E;
        }

        /* Checkbox/Radio globales: usar azul de marca en lugar del azul por defecto de Bootstrap */
        .form-check-input:checked {
            background-color: #16406E;
            border-color: #16406E;
        }

        .form-check-input:indeterminate {
            background-color: #16406E;
            border-color: #16406E;
        }

        .form-check-input:focus {
            border-color: #16406E;
            box-shadow: 0 0 0 0.2rem rgba(22, 64, 110, 0.25);
        }

        .btn-info {
            background-color: #0057B7;
            border-color: #0057B7;
            color: #ffffff;
        }

        .btn-info:hover,
        .btn-info:focus {
            background-color: #004494;
            border-color: #004494;
            color: #ffffff;
        }

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

        .bg-info {
            background-color: #0057B7 !important;
        }

        .text-primary {
            color: #16406E !important;
        }

        .text-info {
            color: #0057B7 !important;
        }

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

        .badge.bg-info {
            background-color: #0057B7 !important;
        }

        .border-primary {
            border-color: #16406E !important;
        }

        .border-info {
            border-color: #0057B7 !important;
        }

        /* Subscription Banner Styles */
        .subscription-banner {
            border-radius: 16px;
            border: none;
            box-shadow: var(--shadow-md);
            margin-bottom: 25px;
            background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
        }

        .subscription-banner.alert-warning {
            border-left: 5px solid var(--warning);
            background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 255, 255, 0.95) 100%);
        }

        .subscription-banner.alert-info {
            border-left: 5px solid var(--info);
            background: linear-gradient(135deg, rgba(13, 202, 240, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
        }

        .subscription-banner .progress {
            background-color: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
        }

        .subscription-banner .btn {
            font-weight: 600;
            border-radius: 10px;
            padding: 8px 16px;
            box-shadow: var(--shadow-sm);
            transition: all 0.3s ease;
        }

        .subscription-banner .btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        /* ================================================
           COMPACT MODE (aplicable por página con body.compact)
           - Reduce márgenes/paddings y tamaños de letra
           - Mejora densidad sin romper composición
           ================================================ */
        body.compact {
            line-height: 1.45;
            font-size: 14px;
        }

        body.compact .navbar-enterprise {
            padding: 0.5rem 0;
            box-shadow: var(--shadow-sm);
            border-bottom-width: 0.5px;
        }

        body.compact .container.mt-4 {
            margin-top: 0.75rem !important;
        }

        body.compact .container .mb-4 {
            margin-bottom: 0.75rem !important;
        }

        body.compact .container .mb-3 {
            margin-bottom: 0.5rem !important;
        }

        body.compact h1,
        body.compact .h1 {
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }

        body.compact h2,
        body.compact .h2 {
            font-size: 1.35rem;
        }

        body.compact h3,
        body.compact .h3 {
            font-size: 1.2rem;
        }

        body.compact h4,
        body.compact .h4 {
            font-size: 1.05rem;
        }

        body.compact h5,
        body.compact .h5 {
            font-size: 0.95rem;
        }

        body.compact h6,
        body.compact .h6 {
            font-size: 0.9rem;
        }

        body.compact small,
        body.compact .small {
            font-size: 0.8em;
        }

        body.compact .btn-enterprise {
            padding: 0.5rem 1rem;
            border-radius: 8px;
        }

        body.compact .card-enterprise {
            border-radius: 14px;
            box-shadow: var(--shadow-sm);
        }

        body.compact .card-header-enterprise {
            padding: 1rem 1rem 1rem 1.2rem;
        }

        body.compact .card-body {
            padding: 1rem !important;
        }

        body.compact .sidebar-enterprise {
            padding: 1rem;
        }

        body.compact .sidebar-menu a {
            padding: 0.6rem 0.75rem;
        }

        body.compact .stat-card {
            padding: 0.46rem 0.42rem;
            min-height: 98px;
            border-radius: 10px;
        }

        body.compact .stat-card .stat-icon {
            font-size: 0.92rem;
            margin-bottom: 0.2rem;
        }

        body.compact .stat-card .stat-number {
            font-size: 1.12rem;
            line-height: 1.15;
            margin-bottom: 0.12rem;
        }

        body.compact .stat-card .stat-label {
            font-size: 0.77rem;
        }

        body.compact .analytics-widget {
            padding: 1rem;
        }

        body.compact .quick-actions-grid {
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 0.55rem;
            margin-bottom: 0.65rem;
        }

        body.compact .quick-action-card {
            border-radius: 10px;
            padding: 0.62rem 0.52rem;
            box-shadow: none;
            border: 1px solid #dee2e6;
        }

        body.compact .quick-action-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
            border-color: #16406E;
        }

        body.compact .quick-action-icon {
            font-size: 1.2rem;
            margin-bottom: 0.38rem;
        }

        body.compact .quick-action-card h6 {
            font-size: 0.86rem;
            margin-bottom: 0.2rem;
        }

        body.compact .quick-action-card p {
            font-size: 0.78rem;
            line-height: 1.3;
        }

        body.compact .alert {
            padding: 0.5rem 0.75rem;
        }

        body.compact .subscription-banner {
            margin-bottom: 12px;
        }

        body.compact .subscription-banner .btn {
            padding: 6px 12px;
        }

        /* Tablas y formularios más densos */
        body.compact .table-enterprise th {
            padding: 0.6rem 0.75rem;
            font-size: 0.8rem;
        }

        body.compact .table-enterprise td {
            padding: 0.6rem 0.75rem;
        }

        body.compact .form-enterprise .form-control {
            padding: 0.55rem 0.75rem;
        }

        body.compact .form-enterprise .form-label {
            margin-bottom: 0.35rem;
        }

        /* Crear Doc/Signing componentes comunes */
        body.compact .step-wizard {
            padding: 1rem;
            margin-bottom: 1rem;
        }

        body.compact .upload-area {
            padding: 1.25rem;
        }

        body.compact .pdf-viewer {
            padding: 1rem;
            max-height: 60vh;
        }

        body.compact .pdf-page-container {
            margin-bottom: 1rem;
        }

        body.compact {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        body.compact>.container {
            flex: 1 0 auto;
        }

        body.compact:not(.layout-fullscreen)>footer.fh-app-footer {
            margin-top: auto !important;
        }

        body.compact.layout-fullscreen>footer.fh-app-footer {
            margin-top: 0 !important;
        }

        /* ES: El footer mide lo mismo que el navbar, así la página queda
           enmarcada entre dos barras iguales en vez de una gruesa arriba y una
           delgadita abajo. El navbar no expone su altura —la deriva de su
           contenido más su padding—, así que acá va el valor medido y este
           comentario es el vínculo: si el navbar cambia, este número lo sigue.

           Es un MÍNIMO, no una altura fija: en pantallas angostas las dos
           columnas se apilan y el texto envuelve, y ahí el footer crece con su
           contenido en vez de recortarlo. El centrado vertical es lo que hace
           que el contenido no se pegue arriba cuando sobra espacio. */
        :root {
            --app-bar-height: 74.5px;
        }

        .fh-app-footer {
            margin-top: 1rem !important;
            padding: 0.4rem 0 !important;
            background: var(--gray-100);
            flex-shrink: 0;
            line-height: 1.2;
            min-height: var(--app-bar-height);
            display: flex;
            align-items: center;
        }

        .fh-app-footer .container {
            padding-top: 0;
            padding-bottom: 0;
            /* ES: el .container pasa a ser flex item; sin esto encogería a su
               contenido y perdería el centrado horizontal de Bootstrap. */
            width: 100%;
        }

        .fh-app-footer .row {
            margin: 0;
            align-items: center;
            row-gap: 0.25rem;
        }

        .fh-app-footer h6 {
            font-size: 0.9rem;
            margin: 0 0 0.125rem;
            line-height: 1.1;
        }

        .fh-app-footer p[data-i18n="footer_description"] {
            margin: 0;
            font-size: 0.7rem !important;
            line-height: 1.2;
        }

        .fh-app-footer small {
            display: inline-block;
            font-size: 0.7rem;
            line-height: 1.2;
        }

        /* ================================================
           THEME SYSTEM (Phase 1 + 2)
           - legacy (default)
           - compact (opt-in)
           ================================================ */
        body.theme-compact {
            --ui-btn-pad-y: 0.62rem;
            --ui-btn-pad-x: 1.1rem;
            --ui-btn-radius: 10px;
            --ui-btn-font-size: 0.84rem;
            --ui-input-pad-y: 0.56rem;
            --ui-input-pad-x: 0.78rem;
            --ui-input-radius: 10px;
            --ui-input-font-size: 0.86rem;
            --ui-card-radius: 14px;
            --ui-card-shadow: 0 6px 18px rgba(14, 42, 72, 0.09);
            --ui-card-border: rgba(22, 64, 110, 0.12);
            --ui-badge-font-size: 0.72rem;
            --ui-badge-pad-y: 0.24rem;
            --ui-badge-pad-x: 0.62rem;
        }

        body.theme-compact .btn-enterprise {
            border-radius: var(--ui-btn-radius);
            padding: var(--ui-btn-pad-y) var(--ui-btn-pad-x);
            font-size: var(--ui-btn-font-size);
            font-weight: 500;
            letter-spacing: 0.2px;
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.16);
            transition: all 0.2s ease;
        }

        body.theme-compact .btn-enterprise:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(22, 64, 110, 0.2);
        }

        body.theme-compact .btn-primary-enterprise,
        body.theme-compact .btn-accent-enterprise,
        body.theme-compact .btn-success-enterprise {
            border-radius: var(--ui-btn-radius);
            padding: 0.42rem 0.95rem;
            font-size: 0.82rem;
            font-weight: 500;
            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: none;
        }

        body.theme-compact .btn-primary-enterprise i,
        body.theme-compact .btn-primary-enterprise span,
        body.theme-compact .btn-accent-enterprise i,
        body.theme-compact .btn-accent-enterprise span,
        body.theme-compact .btn-success-enterprise i,
        body.theme-compact .btn-success-enterprise span {
            color: inherit !important;
        }

        body.theme-compact .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);
        }

        body.theme-compact .btn-accent-enterprise:hover,
        body.theme-compact .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);
        }

        body.theme-compact .btn-page-hero-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        body.theme-compact .btn-outline-primary,
        body.theme-compact .btn-outline-success,
        body.theme-compact .btn-outline-info,
        body.theme-compact .btn-outline-danger,
        body.theme-compact .btn-outline-warning,
        body.theme-compact .btn-light {
            border-radius: var(--ui-btn-radius);
            padding: 0.42rem 0.95rem;
            font-size: 0.82rem;
            font-weight: 500;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        body.theme-compact .btn-outline-primary:hover,
        body.theme-compact .btn-outline-success:hover,
        body.theme-compact .btn-outline-info:hover,
        body.theme-compact .btn-outline-danger:hover,
        body.theme-compact .btn-outline-warning:hover,
        body.theme-compact .btn-light:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        /* ES: Bootstrap heredado en modo compacto: mismo color, tamaño compacto y salto.
           EN: Legacy Bootstrap in compact mode: keep color, compact size, and hover lift. */
        body.theme-compact .btn-primary,
        body.theme-compact .btn-info,
        body.theme-compact .btn-secondary,
        body.theme-compact .btn-dark {
            border-radius: var(--ui-btn-radius);
            padding: 0.42rem 0.95rem;
            font-size: 0.82rem;
            font-weight: 500;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        body.theme-compact .btn-primary:hover,
        body.theme-compact .btn-info:hover,
        body.theme-compact .btn-secondary:hover,
        body.theme-compact .btn-dark:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        body.theme-compact .container.mt-4 .card .btn.btn-primary,
        body.theme-compact .container.mt-4 .card .btn.btn-info,
        body.theme-compact .container.mt-4 .card .btn.btn-secondary,
        body.theme-compact .container.mt-4 .card .btn.btn-dark,
        body.theme-compact .container.mt-4 .table .btn.btn-primary,
        body.theme-compact .container.mt-4 .table .btn.btn-info,
        body.theme-compact .container.mt-4 .table .btn.btn-secondary,
        body.theme-compact .container.mt-4 .table .btn.btn-dark {
            border-radius: var(--ui-btn-radius);
            padding: 0.42rem 0.95rem;
            font-size: 0.82rem;
            font-weight: 500;
        }

        body.theme-compact .container.mt-4 .card .btn.btn-primary:hover,
        body.theme-compact .container.mt-4 .card .btn.btn-info:hover,
        body.theme-compact .container.mt-4 .card .btn.btn-secondary:hover,
        body.theme-compact .container.mt-4 .card .btn.btn-dark:hover,
        body.theme-compact .container.mt-4 .table .btn.btn-primary:hover,
        body.theme-compact .container.mt-4 .table .btn.btn-info:hover,
        body.theme-compact .container.mt-4 .table .btn.btn-secondary:hover,
        body.theme-compact .container.mt-4 .table .btn.btn-dark:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        /* ES: Matriz color/texto en tablas compactas: mantener color y patrón de interacción.
           EN: Color/text matrix in compact tables: keep colors and interaction pattern. */
        body.theme-compact .container.mt-4 .table .btn.btn-primary-enterprise,
        body.theme-compact .container.mt-4 .table .btn.btn-accent-enterprise,
        body.theme-compact .container.mt-4 .table .btn.btn-success-enterprise,
        body.theme-compact .container.mt-4 .table .btn.btn-outline-primary,
        body.theme-compact .container.mt-4 .table .btn.btn-doc-solid-primary {
            border-radius: var(--ui-btn-radius);
            padding: 0.42rem 0.95rem;
            font-size: 0.82rem;
            font-weight: 500;
        }

        body.theme-compact .container.mt-4 .table .btn.btn-primary-enterprise:hover,
        body.theme-compact .container.mt-4 .table .btn.btn-accent-enterprise:hover,
        body.theme-compact .container.mt-4 .table .btn.btn-success-enterprise:hover,
        body.theme-compact .container.mt-4 .table .btn.btn-outline-primary:hover,
        body.theme-compact .container.mt-4 .table .btn.btn-doc-solid-primary:hover {
            transform: translateY(-2px);
        }

        /* ES: Boton de landing en compacto: mantener color y aplicar salto con cambio de tono.
           EN: Compact landing button: keep colors and apply lift + tone-change hover. */
        body.theme-compact .btn-landing-primary {
            border-radius: var(--ui-btn-radius);
            padding: 0.42rem 0.95rem;
            font-size: 0.82rem;
            font-weight: 500;
            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;
        }

        body.theme-compact .btn-landing-primary::before {
            display: none;
        }

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

        body.theme-compact .form-enterprise .form-control,
        body.theme-compact .form-control,
        body.theme-compact .form-select {
            padding: var(--ui-input-pad-y) var(--ui-input-pad-x);
            font-size: var(--ui-input-font-size);
            box-shadow: none;
            border-radius: var(--ui-input-radius);
        }

        body.theme-compact .form-enterprise .form-control:focus,
        body.theme-compact .form-control:focus,
        body.theme-compact .form-select:focus {
            transform: none;
            box-shadow: 0 0 0 2px rgba(22, 64, 110, 0.14);
        }

        body.theme-compact .form-enterprise .form-label,
        body.theme-compact .form-label {
            font-size: 0.86rem;
            margin-bottom: 0.42rem;
            color: var(--gray-600);
        }

        body.theme-compact .card-enterprise {
            border-radius: var(--ui-card-radius);
            border: 1px solid var(--ui-card-border);
            box-shadow: var(--ui-card-shadow);
            background: rgba(255, 255, 255, 0.94);
        }

        body.theme-compact .card-header-enterprise {
            padding: 1.2rem 1.2rem 1.05rem 1.2rem;
            border-radius: var(--ui-card-radius) var(--ui-card-radius) 0 0 !important;
        }

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

        body.theme-compact .card-body,
        body.theme-compact .card-footer {
            padding: 1rem 1.2rem;
        }

        body.theme-compact .badge-enterprise {
            border-radius: 999px;
            font-size: var(--ui-badge-font-size);
            padding: var(--ui-badge-pad-y) var(--ui-badge-pad-x);
            gap: 0.28rem;
            letter-spacing: 0.02em;
        }

        body.theme-compact .table-enterprise th,
        body.theme-compact .table-enterprise td {
            padding: 0.55rem 0.72rem;
        }

        body.theme-compact .table-enterprise th {
            font-size: 0.78rem;
            letter-spacing: 0.02em;
        }

        body.theme-compact .table-enterprise td {
            font-size: 0.84rem;
        }

        /* Reusable compact page hero (for Mis Documentos, Detalle, Estado) */
        body.theme-compact .welcome-banner.page-hero-compact {
            background: var(--gray-50);
            border: 1px solid rgba(22, 64, 110, 0.28);
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(22, 64, 110, 0.08);
        }

        body.theme-compact .welcome-banner.page-hero-compact::before {
            display: none;
        }

        body.theme-compact .welcome-banner.page-hero-compact h1,
        body.theme-compact .welcome-banner.page-hero-compact h2,
        body.theme-compact .welcome-banner.page-hero-compact h3,
        body.theme-compact .welcome-banner.page-hero-compact h4,
        body.theme-compact .welcome-banner.page-hero-compact h5,
        body.theme-compact .welcome-banner.page-hero-compact h6,
        body.theme-compact .welcome-banner.page-hero-compact .page-hero-title-icon {
            color: var(--primary-main) !important;
        }

        body.theme-compact .welcome-banner.page-hero-compact p,
        body.theme-compact .welcome-banner.page-hero-compact span,
        body.theme-compact .welcome-banner.page-hero-compact div {
            color: var(--gray-600);
        }

        body.theme-compact .btn-page-hero-primary {
            background: var(--primary-main) !important;
            border-color: var(--primary-main) !important;
            color: white !important;
            transition: all 0.3s ease;
        }

        body.theme-compact .btn-page-hero-primary i,
        body.theme-compact .btn-page-hero-primary span {
            color: white !important;
        }

        body.theme-compact .btn-page-hero-primary:hover {
            background: var(--primary-dark) !important;
            border-color: var(--primary-dark) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        /* ES: Acciones de filtro en compacto: conservar color, compactar y aplicar salto.
           EN: Compact filter actions: keep colors, compact sizing, and hover lift. */
        body.theme-compact .filter-actions-enterprise .btn-filter-action {
            min-width: 96px;
            min-height: 34px;
            height: auto;
            padding: 0.42rem 0.95rem;
            font-size: 0.82rem;
            font-weight: 500;
            border-radius: var(--ui-btn-radius);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            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;
        }

        body.theme-compact .filter-actions-enterprise .btn-filter-primary {
            background: var(--primary-main) !important;
            border-color: var(--primary-main) !important;
            color: white !important;
        }

        body.theme-compact .filter-actions-enterprise .btn-filter-primary i,
        body.theme-compact .filter-actions-enterprise .btn-filter-primary span {
            color: white !important;
        }

        body.theme-compact .filter-actions-enterprise .btn-filter-primary:hover {
            background: var(--primary-dark) !important;
            border-color: var(--primary-dark) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        body.theme-compact .filter-actions-enterprise .btn-filter-action.btn-outline-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        /* ES: Acciones de documentos en compacto: colores intactos + tamaño compacto + hover lift.
           EN: Compact document actions: unchanged colors + compact sizing + hover lift. */
        body.theme-compact .btn-doc-solid-primary,
        body.theme-compact .btn-doc-solid-success,
        body.theme-compact .btn-doc-outline-primary,
        body.theme-compact .btn-doc-outline-neutral,
        body.theme-compact .btn-doc-outline-success,
        body.theme-compact .btn-doc-outline-danger {
            border-radius: var(--ui-btn-radius);
            padding: 0.42rem 0.95rem;
            font-size: 0.82rem;
            font-weight: 500;
            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;
        }

        body.theme-compact .btn-doc-solid-primary {
            background: var(--primary-main) !important;
            border-color: var(--primary-main) !important;
            color: #ffffff !important;
        }

        body.theme-compact .btn-doc-solid-primary:hover {
            background: var(--primary-dark) !important;
            border-color: var(--primary-dark) !important;
            color: #ffffff !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3);
        }

        body.theme-compact .btn-doc-solid-success {
            background: #198754 !important;
            border-color: #198754 !important;
            color: #ffffff !important;
        }

        body.theme-compact .btn-doc-solid-success:hover {
            background: #157347 !important;
            border-color: #157347 !important;
            color: #ffffff !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(25, 135, 84, 0.28);
        }

        body.theme-compact .btn-doc-outline-primary {
            border: 1px solid #16406E !important;
            color: #16406E !important;
            background-color: transparent !important;
        }

        body.theme-compact .btn-doc-outline-primary:hover {
            border-color: #13365E !important;
            color: #13365E !important;
            background-color: rgba(22, 64, 110, 0.08) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.24);
        }

        body.theme-compact .btn-doc-outline-neutral {
            border: 1px solid #495057 !important;
            color: #495057 !important;
            background-color: transparent !important;
        }

        body.theme-compact .btn-doc-outline-neutral:hover {
            border-color: #3f464d !important;
            color: #3f464d !important;
            background-color: rgba(73, 80, 87, 0.08) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(73, 80, 87, 0.22);
        }

        body.theme-compact .btn-doc-outline-success {
            border: 1px solid #198754 !important;
            color: #198754 !important;
            background-color: transparent !important;
        }

        body.theme-compact .btn-doc-outline-success:hover {
            border-color: #157347 !important;
            color: #157347 !important;
            background-color: rgba(25, 135, 84, 0.08) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(25, 135, 84, 0.24);
        }

        body.theme-compact .btn-doc-outline-danger {
            border: 1px solid #dc3545 !important;
            color: #dc3545 !important;
            background-color: transparent !important;
        }

        body.theme-compact .btn-doc-outline-danger:hover {
            border-color: #bb2d3b !important;
            color: #bb2d3b !important;
            background-color: rgba(220, 53, 69, 0.08) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.24);
        }

        body.theme-compact .btn-doc-icon-sm {
            padding: 0.24rem 0.48rem;
            font-size: 0.78rem;
            line-height: 1;
        }

        body.theme-compact .btn-doc-modal-copy {
            border-radius: 0 var(--ui-btn-radius) var(--ui-btn-radius) 0;
        }

        body.theme-compact .btn-doc-modal-copy.is-copied {
            background: #198754 !important;
            border-color: #198754 !important;
            color: #ffffff !important;
        }

        body.theme-compact .btn-doc-modal-copy.is-copied:hover {
            background: #157347 !important;
            border-color: #157347 !important;
            color: #ffffff !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(25, 135, 84, 0.28);
        }

        /* Reusable compact table + badges for document tracking views */
        body.theme-compact .documents-table-compact thead th {
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.01em;
        }

        body.theme-compact .documents-table-compact tbody td {
            font-size: 0.84rem;
            font-weight: 400;
            color: var(--gray-700);
        }

        body.theme-compact .documents-table-compact .fw-bold,
        body.theme-compact .documents-table-compact .fw-semibold,
        body.theme-compact .documents-table-compact strong {
            font-weight: 500 !important;
        }

        body.theme-compact .documents-table-compact small,
        body.theme-compact .documents-table-compact .text-muted {
            font-size: 0.74rem;
        }

        body.theme-compact .badge-enterprise.documents-status-badge,
        body.theme-compact .badge-enterprise.documents-mode-badge {
            font-size: 0.68rem;
            font-weight: 500;
            letter-spacing: 0.1px;
            padding: 0.24rem 0.6rem;
            border-radius: var(--radius-md);
            line-height: 1.15;
        }

        body.theme-compact .badge-enterprise.documents-status-badge {
            text-transform: none;
            letter-spacing: 0.1px;
        }

        body.theme-compact .badge-enterprise.badge-neutral {
            background: #495057;
            color: #ffffff;
        }

        body.theme-compact .badge-enterprise.badge-soft-neutral {
            background: #dee2e6;
            color: #212529;
        }

        /* ============================================================
              COMPACT CONTENT SYSTEM
              ES: Reglas compactas de contenido para mantener densidad visual uniforme.
              EN: Compact content rules to keep uniform visual density.
              ============================================================ */
        body.theme-compact .admin-section {
            margin-top: 0.6rem;
            padding: 0 0.7rem;
        }

        body.theme-compact .admin-page-subtitle {
            color: #6c757d;
            font-size: 0.9rem;
            line-height: 1.4;
        }

        body.theme-compact .admin-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background: #fff;
            margin-bottom: 0.65rem;
        }

        body.theme-compact .admin-card .card-header {
            background: #fff;
            border-bottom: 1px solid #e9ecef;
            padding: 0.5rem 0.7rem;
        }

        body.theme-compact .admin-card .card-header h5,
        body.theme-compact .admin-card .card-header h6 {
            font-size: 0.92rem;
            margin-bottom: 0;
        }

        body.theme-compact .admin-card .card-body {
            padding: 0.6rem 0.7rem;
        }

        body.theme-compact .admin-table th,
        body.theme-compact .admin-table td {
            font-size: 0.78rem;
            padding: 0.32rem 0.4rem;
            vertical-align: middle;
        }

        body.theme-compact .admin-table thead th {
            background: #f8fafc;
            border-bottom: 1px solid #d7dbe0;
            color: #1f2937;
        }

        body.theme-compact .admin-table .btn {
            font-size: 0.72rem;
            padding: 0.14rem 0.35rem;
        }

        body.theme-compact .admin-empty {
            text-align: center;
            padding: 1.25rem 0.8rem;
        }

        body.theme-compact .admin-empty i {
            color: #16406E;
        }

        body.theme-compact .container.mt-4 .card {
            border-radius: 9px;
        }

        body.theme-compact .container.mt-4 .card-header {
            padding: 0.56rem 0.76rem;
        }

        body.theme-compact .container.mt-4 .card-body {
            padding: 0.72rem 0.8rem;
        }

        body.theme-compact .container.mt-4 .card-footer {
            padding: 0.56rem 0.76rem;
        }

        body.theme-compact .container.mt-4 .form-label {
            font-size: 0.8rem;
            margin-bottom: 0.22rem;
        }

        body.theme-compact .container.mt-4 .form-control,
        body.theme-compact .container.mt-4 .form-select,
        body.theme-compact .container.mt-4 textarea.form-control,
        body.theme-compact .container.mt-4 input.form-control {
            font-size: 0.86rem;
            min-height: 34px;
            padding: 0.35rem 0.54rem;
            border-radius: 7px;
        }

        body.theme-compact .container.mt-4 .table th,
        body.theme-compact .container.mt-4 .table td {
            font-size: 0.83rem;
            padding: 0.38rem 0.46rem;
            vertical-align: middle;
        }

        body.theme-compact .container.mt-4 .table thead th {
            font-size: 0.79rem;
        }

        body.theme-compact .container.mt-4 .card .btn,
        body.theme-compact .container.mt-4 .table .btn {
            font-size: 0.8rem;
            line-height: 1.22;
            padding: 0.4rem 0.7rem;
            border-radius: 7px;
        }

        body.theme-compact .container.mt-4 .card .btn.btn-sm,
        body.theme-compact .container.mt-4 .table .btn.btn-sm {
            font-size: 0.74rem;
            padding: 0.28rem 0.48rem;
        }

        /* Keep page hero/header untouched */
        body.theme-compact .container.mt-4 .welcome-banner,
        body.theme-compact .container.mt-4 .welcome-banner * {
            font-size: inherit;
        }

        /* ============================================================
           Admin panel — compact page hero overrides
           ES: Reducir tamaño del banner de encabezado en admin.
           EN: Reduce admin page hero size.
           ============================================================ */
        body.theme-compact .welcome-banner.page-hero-compact {
            padding: 1.6rem 1.5rem !important;
        }

        body.theme-compact .welcome-banner.page-hero-compact h1,
        body.theme-compact .welcome-banner.page-hero-compact h2 {
            font-size: 1.6rem !important;
            margin-bottom: 0.3rem !important;
        }

        body.theme-compact .welcome-banner.page-hero-compact p {
            font-size: 0.9rem !important;
            margin-bottom: 0 !important;
        }

        body.theme-compact .welcome-banner.page-hero-compact .btn-enterprise,
        body.theme-compact .welcome-banner.page-hero-compact .btn-primary-enterprise {
            padding: 0.42rem 0.95rem !important;
            font-size: 0.82rem !important;
            font-weight: 500 !important;
            box-shadow: none !important;
        }

        body.theme-compact .welcome-banner.page-hero-compact .btn-enterprise:hover,
        body.theme-compact .welcome-banner.page-hero-compact .btn-primary-enterprise:hover,
        body.theme-compact .welcome-banner.page-hero-compact .btn-accent-enterprise:hover,
        body.theme-compact .welcome-banner.page-hero-compact .btn-success-enterprise:hover,
        body.theme-compact .welcome-banner.page-hero-compact .btn-page-hero-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 64, 110, 0.3) !important;
        }