@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-dhvbjzplvh] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-dhvbjzplvh] {
    flex: 1;
    transition: margin-left 0.3s ease;
}

.sidebar[b-dhvbjzplvh] {
    background-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    transition: width 0.3s ease;
}

/* Clase para sidebar colapsado */
.sidebar.collapsed[b-dhvbjzplvh] {
    width: 0;
    overflow: hidden;
}

/* ✅ Botón toggle del sidebar para desktop */
.sidebar-toggle-btn[b-dhvbjzplvh] {
    background: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border: none;
    color: white;
    padding: 0.5rem; /* INCREMENTADO: de 0.375rem a 0.5rem */
    cursor: pointer;
    border-radius: 4px;
    margin-right: 0.75rem; /* REDUCIDO: de 1rem a 0.75rem */
    transition: background-color 0.3s ease;
    width: 36px; /* INCREMENTADO: de 32px a 36px */
    height: 36px; /* INCREMENTADO: de 32px a 36px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle-btn:hover[b-dhvbjzplvh] {
    background-color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro para hover */
}

/* ✅ Icono hamburguesa para desktop */
.hamburger-icon[b-dhvbjzplvh] {
    width: 18px; /* INCREMENTADO: de 16px a 18px */
    height: 2px;
    background-color: white;
    position: relative;
    transition: all 0.3s ease;
}

.hamburger-icon[b-dhvbjzplvh]::before,
.hamburger-icon[b-dhvbjzplvh]::after {
    content: '';
    position: absolute;
    width: 18px; /* INCREMENTADO: de 16px a 18px */
    height: 2px;
    background-color: white;
    transition: all 0.3s ease;
}

.hamburger-icon[b-dhvbjzplvh]::before {
    top: -6px; /* INCREMENTADO: de -5px a -6px */
}

.hamburger-icon[b-dhvbjzplvh]::after {
    top: 6px; /* INCREMENTADO: de 5px a 6px */
}

.top-row[b-dhvbjzplvh] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-start;
    height: 3.5rem; /* INCREMENTADO: de 2.75rem a 3.5rem */
    display: flex;
    align-items: center;
}

.top-row[b-dhvbjzplvh]  a, .top-row[b-dhvbjzplvh]  .btn-link {
    white-space: nowrap;
    margin-left: 1rem;
    text-decoration: none;
}

.top-row[b-dhvbjzplvh]  a:hover, .top-row[b-dhvbjzplvh]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-dhvbjzplvh]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ✅ CRÍTICO: Sidebar fijo en desktop para que no se mueva con el scroll */
@media (min-width: 641px) {
    .page[b-dhvbjzplvh] {
        flex-direction: row;
    }

    .sidebar[b-dhvbjzplvh] {
        width: 260px; /* ✅ AJUSTADO: de 280px a 260px */
        height: 100vh;
        position: fixed !important; /* ✅ CRÍTICO: Cambiar de sticky a fixed para que no se mueva */
        top: 0;
        left: 0; /* ✅ AÑADIDO: Posición desde la izquierda */
        z-index: 1001; /* ✅ AÑADIDO: Z-index para que esté sobre el contenido */
        transform: none;
    }

    .sidebar.collapsed[b-dhvbjzplvh] {
        width: 0;
        transform: translateX(-100%); /* ✅ AÑADIDO: Mover completamente fuera de vista */
    }

    main[b-dhvbjzplvh] {
        margin-left: 260px; /* ✅ AÑADIDO: Margin para hacer espacio al sidebar fijo */
        transition: margin-left 0.3s ease; /* ✅ TRANSICIÓN suave */
    }
    
    /* ✅ CUANDO SIDEBAR ESTÁ COLAPSADO, MAIN NO TIENE MARGIN */
    .sidebar.collapsed ~ main[b-dhvbjzplvh] {
        margin-left: 0;
    }

    .top-row[b-dhvbjzplvh] {
        position: sticky;
        top: 0;
        z-index: 1000; /* ✅ MENOR que sidebar */
        height: 3.5rem; /* INCREMENTADO: de 2.75rem a 3.5rem */
    }

    .top-row.auth[b-dhvbjzplvh]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-dhvbjzplvh], article[b-dhvbjzplvh] {
        padding-left: 1.5rem !important;
        padding-right: 1rem !important;
    }
    
    .mobile-toggle-btn[b-dhvbjzplvh] {
        display: none; /* Ocultar boton movil en desktop */
    }
}

/* ✅ MÓVIL: Configuración específica para móvil */
@media (max-width: 640.98px) {
    .sidebar[b-dhvbjzplvh] {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px; /* ✅ AJUSTADO: de 280px a 260px */
        height: 100vh;
        z-index: 999;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.mobile-open[b-dhvbjzplvh] {
        transform: translateX(0) !important;
    }
    
    .sidebar.collapsed[b-dhvbjzplvh] {
        width: 260px !important; /* ✅ AJUSTADO: de 280px a 260px */
        overflow: visible !important;
        transform: translateX(-100%);
    }
    
    .sidebar.collapsed.mobile-open[b-dhvbjzplvh] {
        transform: translateX(0) !important;
    }
    
    /* ✅ Botón toggle para móvil */
    .mobile-toggle-btn[b-dhvbjzplvh] {
        display: flex !important;
        position: fixed !important;
        top: 8px !important; /* ✅ CENTRADO: (60px - 40px) / 2 = 10px aprox */
        left: 8px !important;
        height: 40px;
        width: 40px;
        z-index: 1070 !important;
        background: #0440b8 !important;
        border: none;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(4, 64, 184, 0.3) !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: white;
        padding: 0.5rem;
    }
    
    .mobile-toggle-btn:hover[b-dhvbjzplvh] {
        background: #032e7a !important;
        transform: scale(1.05);
    }
    
    .mobile-hamburger-icon[b-dhvbjzplvh] {
        width: 18px; /* INCREMENTADO: de 16px a 18px */
        height: 2px;
        background-color: white;
        position: relative;
        display: block;
        transition: all 0.3s ease;
    }

    .mobile-hamburger-icon[b-dhvbjzplvh]::before,
    .mobile-hamburger-icon[b-dhvbjzplvh]::after {
        content: '';
        position: absolute;
        width: 18px; /* INCREMENTADO: de 16px a 18px */
        height: 2px;
        background-color: white;
        transition: all 0.3s ease;
    }

    .mobile-hamburger-icon[b-dhvbjzplvh]::before {
        top: -6px; /* INCREMENTADO: de -5px a -6px */
    }

    .mobile-hamburger-icon[b-dhvbjzplvh]::after {
        top: 6px; /* INCREMENTADO: de 5px a 6px */
    }
    
    .top-row[b-dhvbjzplvh] {
        justify-content: flex-start;
        padding-left: 4rem !important;
        padding-right: 0.75rem !important;
        gap: 0.5rem;
        height: 56px !important; /* ✅ INCREMENTADO: de 3.5rem (56px) a 60px para más espacio */
        position: fixed !important; /* ✅ CORREGIDO: de static a fixed para que esté fija */
        top: 0 !important; /* ✅ FIJA en la parte superior */
        left: 0 !important; /* ✅ DESDE el borde izquierdo */
        width: 100% !important; /* ✅ ANCHO completo */
        z-index: 1000;
        margin: 0;
        border-bottom: 1px solid #dee2e6;
        background-color: #f8f9fa; /* ✅ FONDO más claro para mejor contraste */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* ✅ SOMBRA sutil */
    }

    /* ✅ NUEVO: Estilos específicos para elementos del top-bar en móvil */
    .top-row .user-btn-clean[b-dhvbjzplvh] {
        font-size: 12px !important; /* ✅ REDUCIDO: texto más pequeño */
        padding: 4px 8px !important; /* ✅ REDUCIDO: padding más compacto */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 120px !important; /* ✅ LIMITAR ancho máximo */
        background: transparent !important;
        border: none !important;
        color: #495057 !important;
        display: flex !important;
        align-items: center !important;
        height: 32px !important; /* ✅ ALTURA fija */
    }

    .top-row .user-btn-clean:hover[b-dhvbjzplvh] {
        background: rgba(0,0,0,0.05) !important;
        color: #0440b8 !important;
    }

    /* ✅ NUEVO: Mejorar dropdowns del usuario en móvil */
    .top-row .dropdown-menu[b-dhvbjzplvh] {
        font-size: 12px !important;
        min-width: 150px !important;
        padding: 4px 0 !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    .top-row .dropdown-menu .dropdown-header[b-dhvbjzplvh] {
        font-size: 11px !important;
        padding: 4px 12px !important;
        font-weight: 600 !important;
    }

    .top-row .dropdown-menu .dropdown-item[b-dhvbjzplvh] {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    .top-row .dropdown-divider[b-dhvbjzplvh] {
        margin: 4px 0 !important;
    }

    /* ✅ NUEVO: Ajustes para evitar el texto cortado */
    .top-row .flex-grow-1[b-dhvbjzplvh] {
        min-width: 0 !important; /* Permitir que se encoja */
        overflow: visible !important; /* CAMBIO: permitir dropdowns (antes: hidden) */
    }

    .top-row .ms-auto[b-dhvbjzplvh] {
        flex-shrink: 0 !important; /* No permitir que se encoja el dropdown usuario */
    }

    /* ✅ NUEVO: Mejor distribución del espacio en móvil */
    .top-row .d-flex.align-items-center[b-dhvbjzplvh] {
        gap: 8px !important;
        min-width: 0 !important;
    }

    /* ✅ MEJORAR: LocalidadSelector más compacto en móvil */
    .top-row .localidad-selector .form-select[b-dhvbjzplvh] {
        border: 1px solid #dee2e6 !important;
        border-radius: 4px !important;
        background-size: 12px !important;
        padding-right: 24px !important;
    }

    .top-row .localidad-selector .form-label[b-dhvbjzplvh] {
        font-size: 10px !important;
        margin-bottom: 2px !important;
        color: #6c757d !important;
        font-weight: 500 !important;
    }
    
    main[b-dhvbjzplvh] {
        width: 100%;
        margin-left: 0;
        min-height: 100vh;
        padding: 0;
    }
    
    /* ✅ CORREGIDO: Content con margin-top para compensar top-row fija */
    article.content[b-dhvbjzplvh] {
        margin-top: 3.5rem !important; /* ✅ COMPENSAR la altura del top-row fijo */
        padding: 0.75rem !important;
        min-height: calc(100vh - 3.5rem);
    }
    
    /* Overlay para móvil */
    .mobile-overlay[b-dhvbjzplvh] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 998;
        display: none;
        transition: opacity 0.3s ease;
    }
    
    .mobile-overlay.active[b-dhvbjzplvh] {
        display: block;
    }
}

.top-row .user-btn-clean i[b-dhvbjzplvh] {
    font-size: 11px !important; /* ✅ ICONO más pequeño */
    margin-right: 4px !important;
}

/* ✅ NUEVO: Mejorar el selector de localidad en móvil */
.top-row .localidad-selector .form-select[b-dhvbjzplvh] {
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    background-size: 12px !important;
    padding-right: 24px !important;
}

.top-row .localidad-selector .form-label[b-dhvbjzplvh] {
    font-size: 10px !important;
    margin-bottom: 2px !important;
    color: #6c757d !important;
    font-weight: 500 !important;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-qpl6q7u9bh] {
    display: none; /* Ocultar completamente el toggle original */
}

.navbar-toggler:checked[b-qpl6q7u9bh] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-qpl6q7u9bh] {
    height: 3.5rem;
    background-color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
}

.navbar-brand[b-qpl6q7u9bh] {
    font-size: 1rem;  /* REDUCIDO: de 1.1rem a 1rem */
}

.bi[b-qpl6q7u9bh] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-qpl6q7u9bh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-qpl6q7u9bh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-qpl6q7u9bh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-qpl6q7u9bh] {
    font-size: 0.85rem;  /* REDUCIDO: de 0.9rem a 0.85rem */
    padding-bottom: 0.05rem; /* REDUCIDO: de 0.1rem a 0.05rem */
}

    .nav-item:first-of-type[b-qpl6q7u9bh] {
        padding-top: 0.05rem; /* REDUCIDO: de 0.1rem a 0.05rem */
    }

    .nav-item:last-of-type[b-qpl6q7u9bh] {
        padding-bottom: 0.05rem; /* REDUCIDO: de 0.1rem a 0.05rem */
    }

    .nav-item[b-qpl6q7u9bh]  .nav-link {
        color: #343a40 !important; /* CORREGIDO: texto oscuro visible */
        background: none !important;
        border: none !important;
        height: auto !important;
        line-height: normal !important;
        padding: 0.2rem 0.5rem 0.2rem 0.75rem !important; /* ✅ REDUCIDO: menos padding vertical */
    }

.nav-item[b-qpl6q7u9bh]  a.active {
    background-color: transparent !important;
    color: var(--primary-dark) !important;
    padding: 0.2rem 0.5rem 0.2rem 0.75rem !important; /* ✅ REDUCIDO: menos padding vertical */
}

.nav-item[b-qpl6q7u9bh]  .nav-link:hover {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    padding: 0.2rem 0.5rem 0.2rem 0.75rem !important; /* ✅ REDUCIDO: menos padding vertical */
}

.nav-scrollable[b-qpl6q7u9bh] {
    display: block; /* Siempre mostrar el contenido del nav */
    flex: 1;
    overflow-y: auto;
    padding: 0 0.25rem; /* REDUCIDO: de 0.75rem a 0.25rem */
    margin-bottom: 1rem;
    height: calc(100vh - 12rem);
}

@media (max-width: 640.98px) {
    .nav-scrollable[b-qpl6q7u9bh] {
        display: block; /* En m�vil tambi�n siempre visible dentro del sidebar */
        height: calc(100vh - 10rem);
        padding: 0 0.5rem;
    }
}

@media (min-width: 641px) {
    .navbar-toggler[b-qpl6q7u9bh] {
        display: none; /* Ocultar el bot�n original en pantallas grandes */
    }

    .nav-scrollable[b-qpl6q7u9bh] {
        display: block; /* Siempre mostrar el contenido en pantallas grandes */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* ? Sidebar Header */
/* ✅ Sidebar Header - ALTURA COINCIDE CON TOP-ROW */
.sidebar-header[b-qpl6q7u9bh] {
    padding: 0.75rem 0.5rem;
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0; /* ✅ ELIMINADO: margin-bottom para quitar espacio extra */
    overflow: hidden;
    position: relative;
    height: 3.5rem; /* ✅ MANTENIDO: misma altura que top-row */
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-container[b-qpl6q7u9bh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: visible;
    padding: 0.25rem;
}

.brand-logo[b-qpl6q7u9bh] {
    width: 100%;
    height: 100%;
    background: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: none;
    border: none;
    padding: 0;
    position: relative;
    z-index: 10;
}

.brand-logo-img[b-qpl6q7u9bh] {
    width: auto;
    height: 95%;
    max-width: 95%;
    transition: var(--transition-fast);
    display: block;
    object-fit: contain;
    transform: scale(1.5); /* ✅ REDUCIDO: de scale(2) a scale(1.5) - 50% más grande */
    transform-origin: center;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
    border-radius: 0;
    padding: 0;
}

.brand-logo-img:hover[b-qpl6q7u9bh] {
    transform: scale(1.54); /* ✅ HOVER REDUCIDO: scale(1.5) + 3% hover = 1.54 */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

/* Fallback de texto */
.text-fallback[b-qpl6q7u9bh] {
    display: none;
    color: white !important;
    font-size: 1.25rem;  /* REDUCIDO: de 1.75rem a 1.25rem */
    font-weight: 700;
    text-align: center;
    font-family: var(--font-family);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.text-fallback i[b-qpl6q7u9bh] {
    font-size: 1.25rem;  /* REDUCIDO: de 1.5rem a 1.25rem */
    margin-right: 0.5rem;
    color: white;
}

.nav-item[b-qpl6q7u9bh] {
    margin: 0;
    padding: 0;
}

/* ✅ Sobrescribir padding de Bootstrap en nav-links del sidebar */
.nav-scrollable .nav-item .nav-link[b-qpl6q7u9bh],
.nav-item > .nav-link[b-qpl6q7u9bh],
a.nav-link[b-qpl6q7u9bh] {
    padding: 0.2rem 0.5rem 0.2rem 0.75rem !important; /* ✅ REDUCIDO: menos padding vertical */
}

.nav-link[b-qpl6q7u9bh] {
    display: block;
    padding: 0.2rem 0.5rem 0.2rem 0.75rem !important; /* ✅ REDUCIDO: menos padding vertical */
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    margin-bottom: 0.1rem; /* ✅ AUMENTADO: más separación entre elementos */
    border: none;
    background: none;
    width: 100%;
}

.nav-link[b-qpl6q7u9bh]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--primary-color);
    transform: scaleY(0);
    transition: var(--transition-fast);
    border-radius: 0 2px 2px 0;
}

.nav-link.active[b-qpl6q7u9bh]::before {
    transform: scaleY(1);
}

.nav-link-content[b-qpl6q7u9bh] {
    display: flex;
    align-items: center;
    gap: 0.1rem; /* REDUCIDO: de 0.75rem a 0.5rem */
    padding: 0.25rem 0.5rem 0.25rem 0.75rem; /* ✅ AUMENTADO: más espacio vertical */
    transition: var(--transition-fast);
    position: relative;
}

.nav-link-content-main[b-qpl6q7u9bh] {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* REDUCIDO: de 0.75rem a 0.5rem */
    padding: 0.25rem 0.5rem 0.25rem 0.75rem; /* ✅ AUMENTADO: más espacio vertical */
    transition: var(--transition-fast);
    position: relative;
}

.nav-link-Dahboard[b-qpl6q7u9bh]{
    text-decoration: none !important; 
    border-bottom: none !important;
}

/* ? Navigation Text - COLORES OPTIMIZADOS PARA NUEVO FONDO */
.nav-text[b-qpl6q7u9bh] {
    flex: 1;
    font-weight: 500;
    font-size: var(--font-size-sm); /* ✅ REDUCIDO: de base a sm */
    white-space: nowrap; /* ✅ AÑADIDO: evitar que el texto se divida en líneas */
    overflow: hidden; /* ✅ AÑADIDO: ocultar texto que se desborde */
    text-overflow: ellipsis; /* ✅ AÑADIDO: mostrar ... si el texto es muy largo */
    line-height: 1.2; /* ✅ AÑADIDO: reducir altura de línea para compactar */
}

/* ? Navigation Icons - COLORES OPTIMIZADOS */
.nav-icon[b-qpl6q7u9bh] {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: #495057 !important; /* MEJORADO: color intermedio para iconos */
    transition: var(--transition-fast);
    flex-shrink: 0;
}

/* ? Navigation Badges */
.nav-badge[b-qpl6q7u9bh] {
    font-size: 0.6rem; /* REDUCIDO: de 0.65rem a 0.6rem */
    padding: 0.125rem 0.3rem; /* REDUCIDO: de 0.15rem 0.4rem a 0.125rem 0.3rem */
    background: rgba(4, 64, 184, 0.15); /* ✅ ACTUALIZADO: nueva paleta azul */
    color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
    border-radius: 6px; /* REDUCIDO: de 8px a 6px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

.nav-link:hover .nav-badge[b-qpl6q7u9bh] {
    background: #0440b8; /* ✅ ACTUALIZADO: azul vibrante */
    color: white;
    transform: scale(1.01); /* REDUCIDO: de 1.02 a 1.01 */
}

/* ✅ Hover States */
.nav-link:hover .nav-link-content[b-qpl6q7u9bh] {
    background: rgba(4, 64, 184, 0.1); /* ✅ ACTUALIZADO: nueva paleta azul */
    transform: translateX(1px); /* REDUCIDO: de 2px a 1px */
    border-radius: var(--border-radius-sm);
}

.nav-link:hover .nav-icon[b-qpl6q7u9bh] {
    color: #0440b8 !important; /* ✅ ACTUALIZADO: azul vibrante */
    transform: scale(1.02); /* REDUCIDO: de 1.05 a 1.02 */
}

.nav-link:hover .nav-text[b-qpl6q7u9bh] {
    color: #032e7a !important; /* ✅ ACTUALIZADO: azul oscuro */
    font-weight: 600;
}

/* ✅ Active States */
.nav-link.active .nav-link-content[b-qpl6q7u9bh] {
    background: rgba(4, 64, 184, 0.15); /* ✅ ACTUALIZADO: nueva paleta azul */
    border-left: 3px solid #0440b8; /* ✅ ACTUALIZADO: azul vibrante */
    transform: translateX(0.5px); /* REDUCIDO: de 1px a 0.5px */
    border-radius: var(--border-radius-sm);
}

/* ✅ Active States - COLORES MEJORADOS */
.nav-link.active .nav-icon[b-qpl6q7u9bh] {
    color: #0440b8 !important; /* ✅ ACTUALIZADO: azul vibrante */
    font-weight: 600;
}

.nav-link.active .nav-text[b-qpl6q7u9bh] {
    color: #032e7a !important; /* ✅ ACTUALIZADO: azul oscuro */
    font-weight: 700;
}

/* ? Navigation Separator - TAMA�OS REDUCIDOS */
.nav-separator[b-qpl6q7u9bh] {
    margin: 0.75rem 0 0.5rem 0; /* REDUCIDO: de 1rem 0 0.75rem 0 a 0.75rem 0 0.5rem 0 */
    padding: 0 0.5rem; /* REDUCIDO: de 0.75rem a 0.5rem */
}

.separator-text[b-qpl6q7u9bh] {
    font-size: 0.65rem; /* REDUCIDO: de 0.7rem a 0.65rem */
    color: #495057 !important; /* MEJORADO: color m�s visible sobre fondo claro */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    position: relative;
    padding-left: 0.5rem; /* REDUCIDO: de 0.75rem a 0.5rem */
}

.separator-text[b-qpl6q7u9bh]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.3rem; /* REDUCIDO: de 0.4rem a 0.3rem */
    height: 2px;
    background: #0440b8; /* ✅ ACTUALIZADO: azul vibrante */
    transform: translateY(-50%);
    border-radius: 1px;
}

/* ✅ Sidebar Footer - DISEÑO CENTRADO CON LOGO GAURE */
.sidebar-footer[b-qpl6q7u9bh] {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
}

.footer-content[b-qpl6q7u9bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
}

/* ✅ NUEVO: Branding de Gaure centrado */
.gaure-branding[b-qpl6q7u9bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

/* ✅ NUEVO: Logo Gaure */
.gaure-logo[b-qpl6q7u9bh] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: var(--transition-fast);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.gaure-logo:hover[b-qpl6q7u9bh] {
    transform: scale(1.05);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

/* ✅ ACTUALIZADO: Enlace de Gaure */
.gaure-link[b-qpl6q7u9bh] {
    color: var(--primary-light);
    text-decoration: none;
    transition: var(--transition-fast);
    font-weight: 500;
    font-size: var(--font-size-xs);
    text-align: center;
    white-space: nowrap;
}

    .gaure-link:hover[b-qpl6q7u9bh] {
        color: var(--primary-light);
        text-decoration: underline;
        transform: translateY(-1px);
        text-decoration: none;
    }

.gaure-link:focus[b-qpl6q7u9bh] {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ✅ CRÍTICO: Estilos para módulos colapsables */
.nav-module-content[b-qpl6q7u9bh] {
    transition: var(--transition-normal);
    overflow: hidden;
}

.nav-module-content.collapsed[b-qpl6q7u9bh] {
    display: none; /* ✅ IMPORTANTE: Ocultar contenido colapsado */
}

/* ✅ Flecha de módulos colapsables */
.nav-arrow[b-qpl6q7u9bh] {
    font-size: 0.75rem;
    color: var(--secondary-color);
    transition: var(--transition-fast);
    transform: rotate(0deg); /* ✅ IMPORTANTE: Rotación inicial */
}

.nav-module-header.expanded .nav-arrow[b-qpl6q7u9bh] {
    transform: rotate(180deg); /* ✅ IMPORTANTE: Rotación cuando expandido */
}

/* ✅ Headers de módulos colapsables - ALTURA REDUCIDA A LA MITAD */
.nav-module-header[b-qpl6q7u9bh] {
    padding: 0.375rem 0.5rem; /* ✅ REDUCIDO: de 0.75rem 1rem a la mitad */
    border-radius: var(--border-radius);
    margin-bottom: 0.125rem; /* ✅ REDUCIDO: de 0.25rem a la mitad */
    margin-top: 0.35rem; /* ✅ AUMENTADO: más separación superior para distinguir módulos */
    cursor: pointer;
    transition: var(--transition-fast);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05); /* ✅ SUTIL: borde muy tenue */
    border-top: 1px solid rgba(255, 255, 255, 0.25); /* ✅ MEJORADO: borde superior aún más visible */
    text-decoration: none;
    color: var(--secondary-color);
    display: block;
    width: 100%;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.15), 
        0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.35); /* ✅ MEJORADO: sombra superior mucho más visible */
}

.nav-module-header:hover[b-qpl6q7u9bh],
.nav-module-header:focus[b-qpl6q7u9bh],
.nav-module-header.expanded[b-qpl6q7u9bh] {
    background: rgba(4, 64, 184, 0.15);
    border-color: rgba(4, 64, 184, 0.15); /* ✅ SUTIL: borde hover más tenue */
    border-top-color: rgba(255, 255, 255, 0.4); /* ✅ MEJORADO: borde superior muy visible en hover */
    color: var(--primary-color);
    text-decoration: none;
    transform: translateX(2px);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.2), 
        0 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.45); /* ✅ MEJORADO: sombra superior muy pronunciada en hover */
    margin-bottom: 0.25rem; /* ✅ NUEVO: más espacio inferior cuando está expandido */
}

.nav-module-header .nav-link-content[b-qpl6q7u9bh] {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ✅ IMPORTANTE: Espacio para la flecha */
    width: 100%;
    gap: 0.25rem; /* ✅ REDUCIDO: de 0.5rem a la mitad */
}

.nav-module-header .nav-icon[b-qpl6q7u9bh] {
    font-size: 0.875rem; /* ✅ REDUCIDO: iconos ligeramente más pequeños */
    width: 18px; /* ✅ REDUCIDO: de 20px a 18px */
    text-align: center;
    flex-shrink: 0;
    color: var(--primary-color);
}

.nav-module-header .nav-text[b-qpl6q7u9bh] {
    flex: 1;
    font-weight: 500;
    font-size: var(--font-size-sm); /* ✅ REDUCIDO: tamaño más pequeño */
    white-space: nowrap; /* ✅ AÑADIDO: una sola línea */
    overflow: hidden; /* ✅ AÑADIDO: controlar desbordamiento */
    text-overflow: ellipsis; /* ✅ AÑADIDO: mostrar ... si es necesario */
    line-height: 1.1; /* ✅ REDUCIDO: de 1.2 a 1.1 para más compactación */
}

/* ✅ Elementos de navegación (submenús) - ALTURA REDUCIDA A LA MITAD */
.nav-item[b-qpl6q7u9bh] {
    margin-bottom: 0.08rem; /* ✅ AUMENTADO: más espacio entre items */
}


.nav-link:hover[b-qpl6q7u9bh],
.nav-link:focus[b-qpl6q7u9bh],
.nav-link.active[b-qpl6q7u9bh] {
    background: rgba(4, 64, 184, 0.1);
    color: var(--primary-color);
    text-decoration: none;
    transform: translateX(1px); /* ✅ REDUCIDO: menos desplazamiento */
}

.nav-link .nav-link-content[b-qpl6q7u9bh] {
    display: flex;
    align-items: center;
    gap: 0.375rem; /* ✅ AUMENTADO: de 0.25rem a 0.375rem para mejor separación */
}

.nav-link .nav-icon[b-qpl6q7u9bh] {
    font-size: 0.75rem; /* ✅ REDUCIDO: iconos más pequeños en submenús */
    width: 14px; /* ✅ REDUCIDO: de 16px a 14px para más espacio al texto */
    text-align: center;
    flex-shrink: 0;
    color: var(--primary-color);
}

.nav-link .nav-text[b-qpl6q7u9bh] {
    font-size: var(--font-size-sm); /* ✅ REDUCIDO: tamaño consistente */
    white-space: nowrap; /* ✅ AÑADIDO: una sola línea */
    overflow: hidden; /* ✅ AÑADIDO: controlar desbordamiento */
    text-overflow: ellipsis; /* ✅ AÑADIDO: mostrar ... si es necesario */
    line-height: 1.1; /* ✅ REDUCIDO: línea más compacta */
    flex: 1; /* ✅ AÑADIDO: para que use todo el espacio disponible */
}

/* ✅ Dashboard button - ESTILO CORREGIDO PARA ALINEACIÓN Y SIN LÍNEAS */
.nav-module-header-home[b-qpl6q7u9bh] {
    padding: 0.375rem 0.5rem; /* ✅ REDUCIDO: mismo padding que otros headers */
    padding-left: 0.3rem;
    border-radius: var(--border-radius);
    margin-bottom: 0.125rem; /* ✅ REDUCIDO: mismo margen que otros headers */
    margin-top: 0.35rem; /* ✅ AUMENTADO: misma separación superior que otros módulos */
    cursor: pointer;
    transition: var(--transition-fast);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05); /* ✅ SUTIL: borde muy tenue */
    border-top: 1px solid rgba(255, 255, 255, 0.25); /* ✅ MEJORADO: borde superior aún más visible */
    text-decoration: none !important;
    color: var(--secondary-color);
    display: block;
    width: 100%;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.15), 
        0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.35); /* ✅ MEJORADO: sombra superior mucho más visible */
    border-bottom: none !important; /* ✅ CRÍTICO: Eliminar línea inferior */
}

.nav-module-header-home:link[b-qpl6q7u9bh],
.nav-module-header-home:visited[b-qpl6q7u9bh] {
    text-decoration: none !important;
    border-bottom: none !important;
    color: var(--secondary-color);
}

.nav-module-header-home:hover[b-qpl6q7u9bh],
.nav-module-header-home:focus[b-qpl6q7u9bh],
.nav-module-header-home.active[b-qpl6q7u9bh] {
    background: rgba(4, 64, 184, 0.15);
    border-color: rgba(4, 64, 184, 0.15); /* ✅ SUTIL: borde hover más tenue */
    border-top-color: rgba(255, 255, 255, 0.4); /* ✅ MEJORADO: borde superior muy visible en hover */
    color: var(--primary-color);
    text-decoration: none !important;
    border-bottom: none !important; /* ✅ CRÍTICO: Eliminar línea en hover/active */
    transform: translateX(2px);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.2), 
        0 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.45); /* ✅ MEJORADO: sombra superior muy pronunciada en hover */
}

.nav-module-header-home .nav-link-content[b-qpl6q7u9bh] {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* ✅ CAMBIADO: sin espacio para flecha */
    width: 100%;
    gap: 0.25rem; /* ✅ REDUCIDO: gap más pequeño */
    text-decoration: none !important;
    border-bottom: none !important; /* ✅ CRÍTICO: Eliminar línea en hover/active */
    margin-left: 0.50rem; /* ✅ AGREGADO: margen izquierdo para alineación */
}

.nav-module-header-home .nav-icon[b-qpl6q7u9bh] {
    font-size: 0.875rem; /* ✅ REDUCIDO: mismo tamaño que otros headers */
    width: 18px; /* ✅ REDUCIDO: mismo ancho que otros headers */
    text-align: center;
    flex-shrink: 0;
    color: var(--primary-color); /* ✅ MISMO COLOR: que otros iconos del menú */
    margin-right: 0.125rem; /* ✅ AGREGADO: espaciado con el texto */
}

.nav-module-header-home .nav-text[b-qpl6q7u9bh] {
    flex: 1;
    font-weight: 500;
    font-size: var(--font-size-sm); /* ✅ REDUCIDO: tamaño más pequeño */
    text-decoration: none !important;
    border-bottom: none !important; /* ✅ CRÍTICO: Eliminar línea inferior del texto */
    white-space: nowrap; /* ✅ AÑADIDO: una sola línea */
    overflow: hidden; /* ✅ AÑADIDO: controlar desbordamiento */
    text-overflow: ellipsis; /* ✅ AÑADIDO: mostrar ... si es necesario */
    line-height: 1.1; /* ✅ REDUCIDO: línea más compacta */
    color: var(--secondary-color); /* ✅ MISMO COLOR: que otros textos del menú */
}

.nav-module-header-home.active[b-qpl6q7u9bh] {
    background: rgba(4, 64, 184, 0.2) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    box-shadow: var(--shadow-lg) !important;
    text-decoration: none !important;
    border-bottom: none !important; /* ✅ CRÍTICO: Eliminar línea en estado active */
}

.nav-module-header-home.active .nav-icon[b-qpl6q7u9bh],
.nav-module-header-home.active .nav-text[b-qpl6q7u9bh] {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    border-bottom: none !important; /* ✅ CRÍTICO: Eliminar línea de icon y texto */
}

/* ✅ CRÍTICO: Eliminar cualquier decoración o línea */
.nav-module-header-home[b-qpl6q7u9bh]::after,
.nav-module-header-home[b-qpl6q7u9bh]::before {
    display: none !important;
}

.nav-module-header-home *[b-qpl6q7u9bh],
.nav-module-header-home *[b-qpl6q7u9bh]::before,
.nav-module-header-home *[b-qpl6q7u9bh]::after {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* ✅ Hover states específicos para Dashboard */
.nav-module-header-home:hover .nav-icon[b-qpl6q7u9bh] {
    color: var(--primary-color) !important; /* ✅ MISMO COLOR: que otros iconos en hover */
}

.nav-module-header-home:hover .nav-text[b-qpl6q7u9bh] {
    color: var(--primary-color) !important; /* ✅ MISMO COLOR: que otros textos en hover */
    text-decoration: none !important;
    border-bottom: none !important;
}
/* /Components/Pages/Cliente/CClientes.razor.rz.scp.css */
/* Consulta de clientes con diseño consistente usando Montserrat - SIN HEADER FIJO */

/* Variables para asegurar consistencia tipográfica */
:root[b-3kpifx68tn] {
    --montserrat-font: 'Montserrat', sans-serif;
}

.clientes-container[b-3kpifx68tn] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px; /* ✅ CAMBIADO: de 0px a 12px para consistency */
    background: #ffffff; /* ✅ CAMBIADO: de #f8f9fa a blanco */
    font-family: var(--montserrat-font) !important;
}

/* Contenido del formulario como card principal - CON MISMO ANCHO QUE HEADER */
.form-content[b-3kpifx68tn] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    
    /* ✅ AÑADIDO: Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px); /* ✅ MISMO ANCHO: que el page-header */
    margin-left: auto; /* ✅ MISMO CENTRADO: horizontal automático */
    margin-right: auto; /* ✅ MISMO CENTRADO: horizontal automático */
}

/* Secciones del formulario - DISEÑO CONSISTENTE */
.form-section[b-3kpifx68tn] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-3kpifx68tn] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de sección con línea decorativa */
.section-header[b-3kpifx68tn] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-3kpifx68tn] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea debajo de cada título de sección */
.section-title[b-3kpifx68tn]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%); /* ✅ ACTUALIZADO: nueva paleta azul */
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2); /* ✅ ACTUALIZADO: nueva paleta azul */
}

.section-title i[b-3kpifx68tn] {
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1); /* ✅ ACTUALIZADO: nueva paleta azul */
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenido de sección */
.section-content[b-3kpifx68tn] {
    padding: 0;
    background: none;
    border: none;
}

/* Grupos de formulario compactos */
.form-group[b-3kpifx68tn] {
    margin-bottom: 10px;
}

.form-label[b-3kpifx68tn] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    color: #495057;
    margin-bottom: 3px;
    font-size: 11px;
}

/* Controles de formulario pequeños */
.form-control-sm[b-3kpifx68tn],
.form-select-sm[b-3kpifx68tn] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 400;
    border: 1px solid #ced4da;
    border-radius: 3px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: auto;
    line-height: 1.3;
}

.form-control-sm:focus[b-3kpifx68tn],
.form-select-sm:focus[b-3kpifx68tn] {
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    box-shadow: 0 0 0 0.1rem rgba(4, 64, 184, 0.12); /* ✅ ACTUALIZADO: nueva paleta azul */
}

.form-control-sm[b-3kpifx68tn]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    color: #6c757d;
    font-size: 10px;
}

/* Botones compactos */
.btn[b-3kpifx68tn] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
    font-size: 11px;
}

.btn-sm[b-3kpifx68tn] {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 500;
}

/* BOTÓN BUSCAR MÁS GRANDE */
.btn-outline-primary.btn-sm.flex-fill[b-3kpifx68tn] {
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-height: 32px;
}

.btn-outline-primary.btn-sm.flex-fill i[b-3kpifx68tn] {
    font-size: 12px !important;
}

/* BOTÓN NUEVO CLIENTE (REEMPLAZA AL LIMPIAR) */
.btn-primary.btn-sm.flex-fill[b-3kpifx68tn] {
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-height: 32px;
    text-decoration: none;
}

.btn-primary.btn-sm.flex-fill i[b-3kpifx68tn] {
    font-size: 12px !important;
}

.btn-primary.btn-sm.flex-fill:hover[b-3kpifx68tn] {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-primary[b-3kpifx68tn] {
    background-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
}

.btn-primary:hover[b-3kpifx68tn] {
    background-color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
    transform: translateY(-1px);
}

.btn-outline-primary[b-3kpifx68tn] {
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    font-size: 10px;
    font-weight: 500;
}

.btn-outline-primary:hover[b-3kpifx68tn] {
    background-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
    transform: translateY(-1px);
}

/* Tabla de resultados estilizada */
.table-responsive[b-3kpifx68tn] {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.table[b-3kpifx68tn] {
    margin: 0;
    font-family: var(--montserrat-font) !important;
    font-size: 11px;
}

.table th[b-3kpifx68tn] {
    background-color: #f7fafc; /* ✅ ACTUALIZADO: fondo gris muy claro */
    border-bottom: 2px solid #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    font-weight: 600;
    padding: 8px 6px;
    vertical-align: middle;
    font-size: 10px;
}

.table td[b-3kpifx68tn] {
    padding: 6px;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}

.table-hover tbody tr:hover[b-3kpifx68tn] {
    background-color: rgba(4, 64, 184, 0.05); /* ✅ ACTUALIZADO: nueva paleta azul */
}

/* Información de cliente en tabla */
.cliente-main[b-3kpifx68tn] {
    line-height: 1.2;
}

.cliente-nombre[b-3kpifx68tn] {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.cliente-codigo[b-3kpifx68tn] {
    font-size: 9px;
    color: #6c757d;
}

.identificacion-numero[b-3kpifx68tn] {
    font-weight: 500;
    color: #495057;
}

.codigo-ref[b-3kpifx68tn] {
    font-size: 9px;
    color: #6c757d;
}

/* Información de contacto */
.contacto-info[b-3kpifx68tn],
.ubicacion-info[b-3kpifx68tn] {
    line-height: 1.3;
}

.contacto-item[b-3kpifx68tn],
.ubicacion-item[b-3kpifx68tn] {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    font-size: 10px;
}

.contacto-item:last-child[b-3kpifx68tn],
.ubicacion-item:last-child[b-3kpifx68tn] {
    margin-bottom: 0;
}

.contacto-item i[b-3kpifx68tn],
.ubicacion-item i[b-3kpifx68tn] {
    font-size: 9px;
    width: 12px;
    flex-shrink: 0;
}

/* Información de crédito */
.credito-info[b-3kpifx68tn] {
    text-align: right;
}

.limite-credito[b-3kpifx68tn] {
    font-size: 11px;
    color: #495057;
}

.condicion-credito[b-3kpifx68tn] {
    font-size: 9px;
    color: #6c757d;
}

/* Estados */
.badge[b-3kpifx68tn] {
    font-size: 9px;
    font-weight: 500;
    padding: 4px 6px;
}

/* BOTONES DE ACCIONES MÁS GRANDES EN TABLA */
.btn-group .btn[b-3kpifx68tn] {
    border-radius: 0;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 500;
    min-height: 34px;
    min-width: 38px;
}

.btn-group .btn i[b-3kpifx68tn] {
    font-size: 12px !important;
}

.btn-group .btn:first-child[b-3kpifx68tn] {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.btn-group .btn:last-child[b-3kpifx68tn] {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Mejorar hover states para botones de acción */
.btn-group .btn:hover[b-3kpifx68tn] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Paginación */
.pagination-sm .page-link[b-3kpifx68tn] {
    font-family: var(--montserrat-font) !important;
    font-size: 10px;
    padding: 4px 8px;
}

.pagination-sm .page-item.active .page-link[b-3kpifx68tn] {
    background-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
}

/* Espaciado de filas */
.row.g-1[b-3kpifx68tn] {
    --bs-gutter-x: 0.4rem;
    --bs-gutter-y: 0.2rem;
}

/* Alerts */
.alert[b-3kpifx68tn] {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 12px;
    padding: 8px 12px;
}

/* Estados vacíos */
.empty-icon[b-3kpifx68tn] {
    opacity: 0.5;
}

.empty-title[b-3kpifx68tn] {
    font-family: var(--montserrat-font) !important;
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

.empty-message[b-3kpifx68tn] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    margin-bottom: 15px;
}

/* Responsive design */
@media (max-width: 768px) {
    .clientes-container[b-3kpifx68tn] {
        padding: 8px;
    }

    .section-title[b-3kpifx68tn] {
        font-size: 13px;
    }

    .form-content[b-3kpifx68tn] {
        max-width: calc(100% - 16px); /* ✅ MÓVIL: mismo ajuste que el header */
        padding: 12px; /* ✅ MANTENIDO: padding reducido en móvil */
    }

    /* Líneas responsive */
    .section-title[b-3kpifx68tn]::after {
        height: 0.5px;
    }

    /* Tabla responsive mejorada */
    .table th[b-3kpifx68tn],
    .table td[b-3kpifx68tn] {
        padding: 4px;
    }

    .table th[b-3kpifx68tn] {
        font-size: 9px;
    }

    .table td[b-3kpifx68tn] {
        font-size: 10px;
    }

    /* Botones buscar y nuevo cliente responsive */
    .btn-outline-primary.btn-sm.flex-fill[b-3kpifx68tn],
    .btn-primary.btn-sm.flex-fill[b-3kpifx68tn] {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 36px;
    }

    /* Botones de acciones responsive */
    .btn-group .btn[b-3kpifx68tn] {
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-height: 38px;
    }
}

@media (max-width: 576px) {
    .btn-group[b-3kpifx68tn] {
        flex-direction: column;
    }

    .btn-group .btn[b-3kpifx68tn] {
        border-radius: 4px !important;
        margin-bottom: 2px;
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 42px;
    }

    /* Botones buscar y nuevo cliente en móviles muy pequeños */
    .btn-outline-primary.btn-sm.flex-fill[b-3kpifx68tn],
    .btn-primary.btn-sm.flex-fill[b-3kpifx68tn] {
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 40px;
    }
}

/* Asegurar que todos los elementos usen Montserrat */
.clientes-container input[b-3kpifx68tn],
.clientes-container select[b-3kpifx68tn],
.clientes-container button[b-3kpifx68tn],
.clientes-container label[b-3kpifx68tn],
.clientes-container .form-control[b-3kpifx68tn],
.clientes-container .form-select[b-3kpifx68tn],
.clientes-container .btn[b-3kpifx68tn],
.clientes-container .table[b-3kpifx68tn],
.clientes-container .alert[b-3kpifx68tn],
.clientes-container .badge[b-3kpifx68tn] {
    font-family: var(--montserrat-font) !important;
}
/* /Components/Pages/Cliente/CrearCliente.razor.rz.scp.css */
/* Formulario de cliente con diseño limpio usando Montserrat - ELEMENTOS MÁS PEQUEÑOS */

/* Variables para asegurar consistencia tipográfica */
:root[b-njw9nb4hmr] {
    --montserrat-font: 'Montserrat', sans-serif;
}

.clientes-container[b-njw9nb4hmr] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px; /* ✅ MANTENIDO: padding uniforme de 12px en todos los lados */
    background: #ffffff; /* ✅ CAMBIADO: de #f8f9fa a blanco */
    font-family: var(--montserrat-font) !important;
}

/* ✅ Header con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para móvil */
.page-header.fixed-header[b-njw9nb4hmr] {
    position: sticky; /* ✅ MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 5px; /* ✅ SUBIDO: margen superior reducido para estar más arriba */
    left: auto; /* ✅ MANTENIDO: auto para centrado automático */
    right: auto; /* ✅ MANTENIDO: auto para centrado automático */
    z-index: 999; /* ✅ CORREGIDO: menor que topbar (1000) pero suficiente para sticky */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ✅ MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ✅ MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ✅ MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ✅ AUMENTADO: más padding vertical (era 10px) */
    margin-bottom: 16px; /* ✅ MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ✅ AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ✅ MANTENIDO: flexbox directo */
    align-items: center; /* ✅ MANTENIDO: centrado vertical */
    
    /* ✅ MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ✅ MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ✅ MANTENIDO: centrado horizontal */
    margin-right: auto; /* ✅ MANTENIDO: centrado horizontal */
}

/* ✅ CORREGIDO: Responsive optimizado para evitar overflow en móvil */
@media (max-width: 768px) {
    .page-header.fixed-header[b-njw9nb4hmr] {
        max-width: calc(100% - 16px); /* ✅ MÓVIL: ajustar al padding del container móvil */
        padding: 14px 16px; /* ✅ AUMENTADO: más padding para elementos móviles */
        height: auto; /* ✅ CRÍTICO: altura automática para permitir wrap */
        min-height: 70px; /* ✅ AÑADIDO: altura mínima para garantizar espacio */
        top: 5px; /* ✅ MANTENIDO: menos margen superior en móvil */
        flex-direction: column; /* ✅ MANTENIDO: stack vertical */
        justify-content: center; /* ✅ MANTENIDO: centrar contenido */
        gap: 10px; /* ✅ AUMENTADO: más espacio entre elementos stacked */
    }
    
    /* ✅ CORREGIDO: Permitir wrap completo en móvil */
    .header-content[b-njw9nb4hmr] {
        flex-direction: column; /* ✅ MANTENIDO: stack vertical en móvil */
        flex-wrap: wrap; /* ✅ CRÍTICO: permitir wrap en móvil */
        gap: 10px; /* ✅ AUMENTADO: más gap en móvil */
        width: 100%; /* ✅ ASEGURADO: usar todo el ancho */
    }
    
    .title-section[b-njw9nb4hmr] {
        text-align: center; /* ✅ MANTENIDO: centrar título en móvil */
        width: 100%; /* ✅ MANTENIDO: usar todo el ancho */
        flex-wrap: wrap; /* ✅ AÑADIDO: permitir wrap del título */
        justify-content: center; /* ✅ AÑADIDO: centrar contenido */
    }
    
    .header-actions[b-njw9nb4hmr] {
        justify-content: center; /* ✅ MANTENIDO: centrar botones en móvil */
        width: 100%; /* ✅ MANTENIDO: usar todo el ancho */
        flex-wrap: wrap; /* ✅ CRÍTICO: permitir wrap de botones en móvil */
        gap: 8px; /* ✅ AÑADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header.fixed-header[b-njw9nb4hmr] {
        height: auto; /* ✅ CRÍTICO: altura automática */
        min-height: 65px; /* ✅ AJUSTADO: altura mínima para pantallas pequeñas */
        padding: 12px 12px; /* ✅ AJUSTADO: padding para pantallas pequeñas */
    }
    
    .header-actions .btn[b-njw9nb4hmr] {
        flex: 1 1 auto; /* ✅ AÑADIDO: botones flexibles en móvil pequeño */
        max-width: 48%; /* ✅ AÑADIDO: máximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header.fixed-header[b-njw9nb4hmr] {
        min-height: 80px; /* ✅ AUMENTADO: más altura para pantallas muy pequeñas */
        padding: 10px 8px; /* ✅ COMPACTO: padding mínimo */
    }
    
    .header-actions .btn[b-njw9nb4hmr] {
        flex: 1 1 100%; /* ✅ STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ✅ ANCHO COMPLETO: sin restricciones */
    }
}

/* ✅ MANTENIDO: Contenido del header en una sola línea SOLO para desktop */
.header-content[b-njw9nb4hmr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* ✅ SOLO para desktop: nunca hacer wrap */
    gap: 20px; /* ✅ MANTENIDO: espacio entre elementos */
    width: 100%; /* ✅ MANTENIDO: usar todo el ancho disponible */
}

.title-section[b-njw9nb4hmr] {
    flex: 1; /* ✅ MANTENIDO: usar espacio flexible */
    min-width: 0; /* ✅ CRÍTICO: permitir shrinking */
    position: relative;
    display: flex;
    align-items: center; /* ✅ MANTENIDO: alineación vertical */
}

/* ✅ ACTUALIZADO: Título más grande aprovechando la nueva altura */
.page-title[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-size: 18px; /* ✅ AUMENTADO: de 17px a 18px para aprovechar más altura */
    font-weight: 600;
    color: #ffffff;
    margin: 0; /* ✅ MANTENIDO: sin márgenes */
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    position: relative;
    white-space: nowrap; /* ✅ MANTENIDO: no hacer wrap del título en desktop */
}

/* ✅ RESPONSIVE: Permitir wrap del título en móvil */
@media (max-width: 768px) {
    .page-title[b-njw9nb4hmr] {
        white-space: normal; /* ✅ CRÍTICO: permitir wrap en móvil */
        text-align: center; /* ✅ CENTRADO: título centrado en móvil */
        flex-wrap: wrap; /* ✅ PERMITIR WRAP: título puede hacer wrap */
    }
}

/* ✅ MANTENIDO: sin línea decorativa */
.page-title[b-njw9nb4hmr]::after {
    display: none; /* ✅ ELIMINADO: sin línea decorativa */
}

.page-title i[b-njw9nb4hmr] {
    color: #ffffff;
    margin-right: 8px; /* ✅ MANTENIDO: separación */
    background: rgba(255,255,255,0.15);
    padding: 8px; /* ✅ AUMENTADO: de 7px a 8px para aprovechar más altura */
    border-radius: 4px; /* ✅ MANTENIDO: bordes más grandes */
    font-size: 16px; /* ✅ AUMENTADO: de 15px a 16px para más visibilidad */
}

/* ✅ ACTUALIZADO: Subtítulo más grande */
.page-subtitle[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* ✅ AUMENTADO: de 13px a 14px para más legibilidad */
    color: rgba(255,255,255,0.75);
    margin: 0 0 0 15px; /* ✅ MANTENIDO: margen izquierdo para separar del título */
    font-weight: 400;
    white-space: nowrap; /* ✅ MANTENIDO para desktop: no hacer wrap */
}

/* ✅ RESPONSIVE: Permitir wrap del subtítulo en móvil */
@media (max-width: 768px) {
    .page-subtitle[b-njw9nb4hmr] {
        white-space: normal; /* ✅ CRÍTICO: permitir wrap en móvil */
        margin: 0; /* ✅ SIN MARGEN: centrado en móvil */
        text-align: center; /* ✅ CENTRADO: subtítulo centrado en móvil */
    }
    
    .page-subtitle[b-njw9nb4hmr]::before {
        display: none; /* ✅ SIN SEPARADOR: quitar bullet en móvil */
    }
}

/* ✅ MANTENIDO: Separador visual entre título y subtítulo SOLO desktop */
.page-subtitle[b-njw9nb4hmr]::before {
    content: "•";
    margin-right: 8px;
    color: rgba(255,255,255,0.5);
}

.header-actions[b-njw9nb4hmr] {
    display: flex;
    gap: 12px; /* ✅ MANTENIDO: espacio entre botones */
    flex-wrap: nowrap; /* ✅ SOLO para desktop: botones en línea */
    flex-shrink: 0; /* ✅ MANTENIDO: los botones no se encogen */
}

/* ✅ ACTUALIZADO: Botones más grandes aprovechando la nueva altura */
.header-actions .btn[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600; /* ✅ MANTENIDO: más peso */
    font-size: 10.5px; /* ✅ REDUCIDO 30%: de 15px a 10.5px */
    padding: 8.4px 14px; /* ✅ REDUCIDO 30%: de 12px 20px a 8.4px 14px */
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap; /* ✅ MANTENIDO: texto en una línea */
    min-height: 29.4px; /* ✅ REDUCIDO 30%: de 42px a 29.4px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-actions .btn-secondary[b-njw9nb4hmr] {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
}

.header-actions .btn-secondary:hover[b-njw9nb4hmr] {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.header-actions .btn-primary[b-njw9nb4hmr] {
    background: rgba(255,255,255,0.9);
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: rgba(255,255,255,0.9);
}

.header-actions .btn-primary:hover[b-njw9nb4hmr] {
    background: #ffffff;
    color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* ✅ AJUSTADO: Form content con el mismo ancho que el header */
.form-content.with-fixed-header[b-njw9nb4hmr] {
    background: #fff;
    border-radius: 6px; /* Reducido de 8px */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* Más sutil */
    border: 1px solid #e9ecef;
    padding: 16px; /* Reducido de 20px */
    margin: 0;
    /* ✅ ELIMINADO: margin-top ya que el header no es fixed */
    font-family: var(--montserrat-font) !important;
    
    /* ✅ AÑADIDO: Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px); /* ✅ MISMO ANCHO: que el page-header */
    margin-left: auto; /* ✅ MISMO CENTRADO: horizontal automático */
    margin-right: auto; /* ✅ MISMO CENTRADO: horizontal automático */
}

/* ✅ RESPONSIVE: Ajustar form-content para móvil igual que el header */
@media (max-width: 768px) {
    .form-content.with-fixed-header[b-njw9nb4hmr] {
        max-width: calc(100% - 16px); /* ✅ MÓVIL: mismo ajuste que el header */
        padding: 12px; /* ✅ MANTENIDO: padding reducido en móvil */
        font-family: var(--montserrat-font) !important;
    }
}

/* Secciones del formulario - MÁS COMPACTAS */
.form-section[b-njw9nb4hmr] {
    margin-bottom: 20px; /* Reducido de 25px */
    padding-bottom: 16px; /* Reducido de 20px */
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-njw9nb4hmr] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de sección con Montserrat - MÁS PEQUEÑOS */
.section-header[b-njw9nb4hmr] {
    margin-bottom: 12px; /* Reducido de 15px */
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* Reducido de 16px */
    font-weight: 600;
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    margin: 0 0 6px 0; /* Añadido margin-bottom para la línea */
    padding: 0 0 4px 0; /* Añadido padding-bottom para la línea */
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea debajo de cada título de sección con color primario */
.section-title[b-njw9nb4hmr]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%); /* ✅ ACTUALIZADO: nueva paleta azul vibrante */
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2); /* ✅ ACTUALIZADO: nueva paleta azul */
}

.section-title i[b-njw9nb4hmr] {
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    margin-right: 6px; /* Reducido de 8px */
    font-size: 14px; /* Reducido de 16px */
    background: rgba(4, 64, 184, 0.1); /* ✅ ACTUALIZADO: nueva paleta azul */
    padding: 4px; /* Reducido de 6px */
    border-radius: 3px; /* Reducido de 4px */
    width: 24px; /* Reducido de 28px */
    height: 24px; /* Reducido de 28px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenido de sección */
.section-content[b-njw9nb4hmr] {
    padding: 0;
    background: none;
    border: none;
}

/* Grupos de formulario más compactos - MÁS PEQUEÑOS */
.form-group[b-njw9nb4hmr] {
    margin-bottom: 10px; /* Reducido de 12px */
}

.form-label[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    color: #495057;
    margin-bottom: 3px; /* Reducido de 4px */
    font-size: 11px; /* Reducido de 12px */
}

.form-label.required[b-njw9nb4hmr]::after {
    content: " *";
    color: #dc3545;
}

/* Controles de formulario más pequeños - MÁS COMPACTOS */
.form-control-sm[b-njw9nb4hmr],
.form-select-sm[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 400;
    border: 1px solid #ced4da;
    border-radius: 3px; /* Reducido de 4px */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: auto;
    line-height: 1.3; /* Más compacto */
}

.form-control-sm:focus[b-njw9nb4hmr],
.form-select-sm:focus[b-njw9nb4hmr] {
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    box-shadow: 0 0 0 0.1rem rgba(4, 64, 184, 0.12); /* ✅ ACTUALIZADO: nueva paleta azul */
}

.form-control-sm[b-njw9nb4hmr]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    color: #6c757d;
    font-size: 10px; /* Más pequeño */
}

/* Input groups más compactos - MÁS PEQUEÑOS */
.input-group-sm .btn-sm[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 10px; /* Reducido de 11px */
    font-weight: 500;
    border-color: #ced4da;
}

.input-group-sm .input-group-text[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 500;
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
}

/* Espaciado de filas más compacto - MÁS AJUSTADO */
.row.g-1[b-njw9nb4hmr] {
    --bs-gutter-x: 0.4rem; /* Reducido de 0.5rem */
    --bs-gutter-y: 0.2rem; /* Reducido de 0.25rem */
}

/* Alerts más compactos - MÁS PEQUEÑOS */
.alert.mt-1.p-1.small[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    padding: 0.2rem 0.3rem !important; /* Reducido */
    margin-top: 0.2rem !important; /* Reducido */
    font-size: 0.65rem; /* Reducido de 0.7rem */
    font-weight: 400;
}

/* Validation messages más pequeños - MÁS COMPACTOS */
.validation-message[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    color: #dc3545;
    font-size: 9px; /* Reducido de 10px */
    font-weight: 400;
    margin-top: 1px;
    display: block;
}

/* Botones más compactos - MÁS PEQUEÑOS */
.btn[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    border-radius: 3px; /* Reducido de 4px */
    transition: all 0.2s ease-in-out;
    font-size: 11px; /* Reducido de 12px */
}

.btn-sm[b-njw9nb4hmr] {
    padding: 3px 8px; /* Reducido de 4px 10px */
    font-size: 10px; /* Reducido de 11px */
    font-weight: 500;
}

.btn-primary[b-njw9nb4hmr] {
    background-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
}

.btn-primary:hover[b-njw9nb4hmr] {
    background-color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
    transform: translateY(-1px);
}

.btn-secondary[b-njw9nb4hmr] {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-primary[b-njw9nb4hmr] {
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
}

.btn-outline-primary:hover[b-njw9nb4hmr] {
    background-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-danger[b-njw9nb4hmr] {
    color: #dc3545;
    border-color: #dc3545;
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
}

.btn-outline-danger:hover[b-njw9nb4hmr] {
    transform: translateY(-1px);
}

/* TextArea más compacto - MÁS PEQUEÑO */
textarea.form-control-sm[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    min-height: 50px; /* Reducido de 60px */
    resize: vertical;
    font-weight: 400;
    font-size: 11px; /* Añadido para consistencia */
    line-height: 1.3; /* Más compacto */
}

textarea.form-control-sm[b-njw9nb4hmr]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 10px; /* Más pequeño */
}

/* Estilos para los modales de Bootstrap - MÁS COMPACTOS */
.modal-content[b-njw9nb4hmr] {
    border-radius: 6px; /* Reducido de 8px */
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* Más sutil */
    font-family: var(--montserrat-font) !important;
}

.modal-header[b-njw9nb4hmr] {
    border-bottom: 1px solid #dee2e6;
    padding: 0.8rem 1.2rem; /* Reducido de 1rem 1.5rem */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); /* ✅ ACTUALIZADO: usando variables CSS */
    color: #ffffff;
}

.modal-title[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 14px; /* Reducido de 16px */
    color: #ffffff;
}

.modal-title i[b-njw9nb4hmr] {
    color: #ffffff;
    margin-right: 6px; /* Reducido de 8px */
}

.modal-body[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    padding: 1rem; /* Reducido de 1.25rem */
}

.modal-footer[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    border-top: 1px solid #dee2e6;
    padding: 0.6rem 1rem; /* Reducido */
}

/* Close button para modales */
.btn-close[b-njw9nb4hmr] {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Separación del contenedor principal - MÁS COMPACTA */
.clientes-container > * + *[b-njw9nb4hmr] {
    margin-top: 12px; /* Reducido de 15px */
}

/* Alerts de error y éxito con Montserrat - MÁS PEQUEÑOS */
.alert[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 12px; /* Añadido para controlar tamaño */
    padding: 8px 12px; /* Más compacto */
}

.alert-danger[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
}

.alert-success[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
}

/* Select options con Montserrat - MÁS PEQUEÑOS */
.form-select-sm option[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 11px;
}

/* Spinner con Montserrat - MÁS PEQUEÑO */
.spinner-border-sm[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    width: 0.9rem; /* Reducido */
    height: 0.9rem; /* Reducido */
}

/* Loading state specific styles */
.text-center.py-5[b-njw9nb4hmr] {
    padding: 2rem 0 !important;
}

.spinner-border.text-primary[b-njw9nb4hmr] {
    color: #0440b8 !important; /* ✅ ACTUALIZADO: nuevo azul vibrante */
}

/* ✅ RESPONSIVE DESIGN - Corregido para evitar overflow en móvil */
@media (max-width: 768px) {
    .clientes-container[b-njw9nb4hmr] {
        padding: 8px;
        font-family: var(--montserrat-font) !important;
    }

    .page-title[b-njw9nb4hmr] {
        font-size: 16px; /* ✅ AUMENTADO: de 15px a 16px aprovechando más altura */
        font-family: var(--montserrat-font) !important;
    }
    
    .page-subtitle[b-njw9nb4hmr] {
        font-size: 12px; /* ✅ AUMENTADO: de 11px a 12px para mejor legibilidad */
        margin-left: 0; /* ✅ CORREGIDO: sin margen en móvil */
    }

    .header-actions .btn[b-njw9nb4hmr] {
        font-size: 9.1px; /* ✅ REDUCIDO 30%: de 13px a 9.1px aprovechando más altura */
        padding: 7px 11.2px; /* ✅ REDUCIDO 30%: de 10px 16px a 7px 11.2px */
        min-height: 28px; /* ✅ REDUCIDO 30%: de 40px a 28px */
    }

    .section-title[b-njw9nb4hmr] {
        font-size: 13px;
        font-family: var(--montserrat-font) !important;
    }

    .form-content.with-fixed-header[b-njw9nb4hmr] {
        padding: 12px;
        font-family: var(--montserrat-font) !important;
    }

    .col-lg-4[b-njw9nb4hmr], .col-lg-3[b-njw9nb4hmr], .col-lg-2[b-njw9nb4hmr] {
        margin-bottom: 6px;
    }

    .section-title[b-njw9nb4hmr]::after {
        height: 0.5px;
    }
}

@media (max-width: 576px) {
    .page-title[b-njw9nb4hmr] {
        font-size: 15px; /* ✅ AUMENTADO: de 14px a 15px */
        font-family: var(--montserrat-font) !important;
    }

    .page-subtitle[b-njw9nb4hmr] {
        font-size: 11px; /* ✅ AUMENTADO: de 10px a 11px */
    }

    .header-actions .btn[b-njw9nb4hmr] {
        font-size: 12px; /* ✅ AUMENTADO: de 11px a 12px */
        padding: 8px 12px; /* ✅ AUMENTADO: más padding */
        min-height: 36px; /* ✅ AUMENTADO: de 32px a 36px */
    }

    .form-control-sm[b-njw9nb4hmr],
    .form-select-sm[b-njw9nb4hmr] {
        font-size: 12px;
        font-family: var(--montserrat-font) !important;
    }
}

/* Estados disabled para campos - MÁS PEQUEÑOS */
.form-control-sm:disabled[b-njw9nb4hmr],
.form-select-sm:disabled[b-njw9nb4hmr] {
    background-color: #f8f9fa;
    opacity: 0.75;
    border-color: #e9ecef;
    font-family: var(--montserrat-font) !important;
}

/* Mejoras para input groups */
.input-group-sm .form-control-sm[b-njw9nb4hmr],
.input-group-sm .form-select-sm[b-njw9nb4hmr] {
    border-right: 1px solid #ced4da;
}

.input-group-sm .form-control-sm:focus[b-njw9nb4hmr],
.input-group-sm .form-select-sm:focus[b-njw9nb4hmr] {
    z-index: 3;
}

/* Espaciado entre filas de formulario - MÁS COMPACTO */
.form-section .row + .row[b-njw9nb4hmr] {
    margin-top: 6px; /* Reducido de 8px */
}

/* Efectos adicionales para mantener consistencia con el proyecto */
.btn-primary:not(:disabled):not(.disabled):active[b-njw9nb4hmr],
.btn-primary:not(:disabled):not(.disabled).active[b-njw9nb4hmr] {
    background-color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
}

.btn-outline-primary:not(:disabled):not(.disabled):active[b-njw9nb4hmr],
.btn-outline-primary:not(:disabled):not(.disabled).active[b-njw9nb4hmr] {
    background-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
}

/* Asegurar que todos los elementos de formulario usen Montserrat - MÁS PEQUEÑOS */
.clientes-container input[b-njw9nb4hmr],
.clientes-container select[b-njw9nb4hmr],
.clientes-container textarea[b-njw9nb4hmr],
.clientes-container button[b-njw9nb4hmr],
.clientes-container label[b-njw9nb4hmr],
.clientes-container .form-control[b-njw9nb4hmr],
.clientes-container .form-select[b-njw9nb4hmr],
.clientes-container .btn[b-njw9nb4hmr],
.clientes-container .input-group-text[b-njw9nb4hmr],
.clientes-container .alert[b-njw9nb4hmr],
.clientes-container .validation-message[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
}

/* Ajustes específicos para hacer columnas más compactas */
.col-lg-2[b-njw9nb4hmr], .col-lg-3[b-njw9nb4hmr], .col-lg-4[b-njw9nb4hmr], .col-lg-5[b-njw9nb4hmr] {
    padding-left: 0.3rem; /* Reducido */
    padding-right: 0.3rem; /* Reducido */
}

/* Iconos de botones más pequeños */
.btn i[b-njw9nb4hmr] {
    font-size: 0.85em; /* Iconos proporcionalmente más pequeños */
}

.header-actions .btn i[b-njw9nb4hmr] {
    font-size: 1em; /* ✅ MANTENIDO: iconos más visibles en header */
    margin-right: 6px; /* ✅ MANTENIDO: separación del texto */
}

/* ============================= */
/* FOOTER MÓVIL FIJO */
/* ============================= */

/* Footer móvil - Solo visible en dispositivos móviles */
.mobile-footer[b-njw9nb4hmr] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* ✅ Alto z-index para estar sobre todo */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ✅ Mismo gradiente que el header */
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -2px 8px rgba(4, 64, 184, 0.15); /* ✅ Sombra hacia arriba */
    backdrop-filter: blur(8px);
    padding: 12px;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del footer - flexbox para distribuir botones */
.mobile-footer-content[b-njw9nb4hmr] {
    display: flex;
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

/* Botones del footer móvil - ✅ REDUCIDOS 30% */
.mobile-footer-btn[b-njw9nb4hmr] {
    flex: 1; /* ✅ Ambos botones ocupan el mismo espacio */
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 11.2px; /* ✅ REDUCIDO 30%: de 16px a 11.2px */
    padding: 9.8px 14px; /* ✅ REDUCIDO 30%: de 14px 20px a 9.8px 14px */
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    min-height: 35px; /* ✅ REDUCIDO 30%: de 50px a 35px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px; /* ✅ Bordes redondeados */
}

/* Botón Cancelar (secundario) en footer móvil */
.mobile-footer .btn-secondary[b-njw9nb4hmr] {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    border-color: rgba(255,255,255,0.4);
}

.mobile-footer .btn-secondary:hover[b-njw9nb4hmr],
.mobile-footer .btn-secondary:active[b-njw9nb4hmr] {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Botón Guardar (primario) en footer móvil */
.mobile-footer .btn-primary[b-njw9nb4hmr] {
    background: rgba(255,255,255,0.95);
    color: #0440b8; /* ✅ Azul vibrante */
    border-color: rgba(255,255,255,0.95);
    font-weight: 700; /* ✅ Más peso para el botón principal */
}

.mobile-footer .btn-primary:hover[b-njw9nb4hmr],
.mobile-footer .btn-primary:active[b-njw9nb4hmr] {
    background: #ffffff;
    color: #032e7a; /* ✅ Azul oscuro */
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* Botón deshabilitado en footer móvil */
.mobile-footer .btn:disabled[b-njw9nb4hmr] {
    opacity: 0.6;
    transform: none;
}

/* Ocultar los botones del header en móvil para evitar duplicación */
@media (max-width: 767.98px) {
    .header-actions[b-njw9nb4hmr] {
        display: none; /* ✅ Ocultar botones del header en móvil */
    }
    
    /* ✅ AÑADIDO: También ocultar botones del header azul en móvil */
    .page-header-blue .header-actions[b-njw9nb4hmr] {
        display: none !important; /* ✅ Ocultar botones del header azul en móvil */
    }
}

/* Agregar padding inferior al contenido para compensar el footer fijo */
@media (max-width: 767.98px) {
    .clientes-container[b-njw9nb4hmr] {
        padding-bottom: 90px; /* ✅ Espacio para el footer fijo */
    }
}

/* Responsive para móviles muy pequeños */
@media (max-width: 480px) {
    .mobile-footer[b-njw9nb4hmr] {
        padding: 10px 8px; /* ✅ Padding más compacto */
    }
    
    .mobile-footer-btn[b-njw9nb4hmr] {
        font-size: 10.5px; /* ✅ REDUCIDO 30%: de 15px a 10.5px */
        padding: 8.4px 11.2px; /* ✅ REDUCIDO 30%: de 12px 16px a 8.4px 11.2px */
        min-height: 32.2px; /* ✅ REDUCIDO 30%: de 46px a 32.2px */
    }
    
    .mobile-footer-content[b-njw9nb4hmr] {
        gap: 8px; /* ✅ Gap reducido */
    }
}

/* ✅ DESKTOP ESPECÍFICO: Solo ajustar z-index sin cambiar posiciones */
@media (min-width: 769px) {
    .page-header.fixed-header[b-njw9nb4hmr] {
        z-index: 999 !important; /* ✅ DESKTOP: menor que topbar (1000) */
    }
}

/* ============================= */
/* AJUSTE FINAL PARA PEQUEÑAS PANTALLAS */
/* ============================= */

/* HEADER - REDUCCIÓN DE TAMAÑOS */
@media (max-width: 368px) {
    .page-header.fixed-header[b-njw9nb4hmr] {
        padding: 10px 12px; /* ✅ REDUCIDO: menos padding */
        height: auto; /* ✅ ALTURA AUTOMÁTICA: permite más contenido */
    }
    
    .header-content[b-njw9nb4hmr] {
        gap: 8px; /* ✅ REDUCIDO: menos espacio entre elementos */
    }
    
    .title-section[b-njw9nb4hmr] {
        font-size: 16px; /* ✅ REDUCIDO: tamaño de fuente del título */
    }
    
    .page-title[b-njw9nb4hmr] {
        font-size: 17px; /* ✅ REDUCIDO: tamaño de fuente del título principal */
    }
    
    .page-subtitle[b-njw9nb4hmr] {
        font-size: 11px; /* ✅ REDUCIDO: tamaño de fuente del subtítulo */
        margin-left: 8px; /* ✅ REDUCIDO: margen izquierdo */
    }
    
    .header-actions .btn[b-njw9nb4hmr] {
        font-size: 8.4px; /* ✅ REDUCIDO 30%: de 12px a 8.4px */
        padding: 5.6px 8.4px; /* ✅ REDUCIDO 30%: de 8px 12px a 5.6px 8.4px */
        min-height: 25.2px; /* ✅ REDUCIDO 30%: de 36px a 25.2px */
    }
    
    /* FOOTER - REDUCCIÓN DE TAMAÑOS */
    .mobile-footer[b-njw9nb4hmr] {
        padding: 8px 6px; /* ✅ REDUCIDO: menos padding */
    }
    
    .mobile-footer-btn[b-njw9nb4hmr] {
        font-size: 14px; /* ✅ REDUCIDO: tamaño de fuente del botón */
        padding: 10px 14px; /* ✅ REDUCIDO: menos padding */
        min-height: 40px; /* ✅ REDUCIDO: altura mínima */
    }
}

/* Fin de los estilos específicos para CrearCliente.razor.css */

/* ✅ NUEVA CLASE: Header con fondo azul - VERSIÓN MÁS DELGADA (30% menos altura) */
.page-header-blue[b-njw9nb4hmr] {
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 50%, #021e4d 100%); /* ✅ FONDO azul vibrante como el esquema de colores */
    color: white; /* ✅ TEXTO blanco para contraste */
    padding: 1.4rem 1.75rem 1.05rem; /* ✅ REDUCIDO 30%: de 2rem 2.5rem 1.5rem a 1.4rem 1.75rem 1.05rem */
    margin-bottom: 1.5rem; /* ✅ SEPARACIÓN del contenido siguiente */
    border-radius: 12px; /* ✅ BORDES redondeados */
    box-shadow: 0 4px 12px rgba(4, 64, 184, 0.25); /* ✅ SOMBRA sutil azul */
    position: relative; /* ✅ NO fixed - comportamiento normal */
    overflow: hidden; /* ✅ CONTENIDO limpio */
    
    /* ✅ AÑADIDO: Mismo ancho y centrado que form-content */
    max-width: calc(100% - 24px); /* ✅ MISMO ANCHO: que el form-content */
    margin-left: auto; /* ✅ MISMO CENTRADO: horizontal automático */
    margin-right: auto; /* ✅ MISMO CENTRADO: horizontal automático */
}

/* ✅ EFECTO de fondo con patrón sutil */
.page-header-blue[b-njw9nb4hmr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    z-index: 0; /* ✅ DETRÁS del contenido */
}

/* ✅ CONTENIDO del header azul */
.page-header-blue .header-content[b-njw9nb4hmr] {
    position: relative; /* ✅ ENCIMA del fondo */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.05rem; /* ✅ REDUCIDO 30%: de 1.5rem a 1.05rem */
}

/* ✅ SECCIÓN de título en header azul */
.page-header-blue .title-section[b-njw9nb4hmr] {
    flex: 1;
    min-width: 210px; /* ✅ REDUCIDO 30%: de 300px a 210px */
}

/* ✅ TÍTULO principal en header azul - MÁS COMPACTO */
.page-header-blue .page-title[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-size: 1.4rem; /* ✅ REDUCIDO 30%: de 2rem a 1.4rem */
    font-weight: 700; /* ✅ MÁS bold */
    margin: 0;
    color: white !important; /* ✅ BLANCO forzado */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* ✅ SOMBRA sutil */
    display: flex;
    align-items: center;
    line-height: 1.2; /* ✅ INTERLINEADO más compacto */
}

/* ✅ SUBTÍTULO en header azul - MÁS COMPACTO */
.page-header-blue .page-subtitle[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-size: 0.7rem; /* ✅ REDUCIDO 30%: de 1rem a 0.7rem */
    font-weight: 400;
    margin: 0.35rem 0 0 0; /* ✅ REDUCIDO 30%: de 0.5rem a 0.35rem */
    color: rgba(255, 255, 255, 0.9) !important; /* ✅ BLANCO translúcido */
    opacity: 0.9;
    line-height: 1.2; /* ✅ INTERLINEADO más compacto */
}

/* ✅ ICONOS en títulos del header azul - MÁS PEQUEÑOS */
.page-header-blue .page-title i[b-njw9nb4hmr] {
    color: rgba(255, 255, 255, 0.9) !important; /* ✅ ICONOS blancos */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 1.2rem; /* ✅ REDUCIDO 30%: icono proporcional al título */
}

/* ✅ ACCIONES del header azul */
.page-header-blue .header-actions[b-njw9nb4hmr] {
    display: flex;
    align-items: center;
    gap: 0.7rem; /* ✅ REDUCIDO 30%: de 1rem a 0.7rem */
    flex-shrink: 0;
}

/* ✅ BOTONES en header azul - YA ESTÁN REDUCIDOS 30% desde ANTES */
.page-header-blue .header-actions .btn[b-njw9nb4hmr] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 10.5px; /* ✅ MANTENIDO: tamaño reducido 30% */
    padding: 8.4px 14px; /* ✅ MANTENIDO: padding reducido 30% */
    border: 2px solid rgba(255,255,255,0.3) !important; /* ✅ BORDE blanco translúcido */
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    min-height: 29.4px; /* ✅ MANTENIDO: altura reducida 30% */
}

/* ✅ BOTÓN secundario en header azul */
.page-header-blue .header-actions .btn-secondary[b-njw9nb4hmr] {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.page-header-blue .header-actions .btn-secondary:hover[b-njw9nb4hmr] {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ✅ BOTÓN primario en header azul */
.page-header-blue .header-actions .btn-primary[b-njw9nb4hmr] {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0440b8 !important; /* ✅ AZUL sobre blanco */
    border-color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
}

.page-header-blue .header-actions .btn-primary:hover[b-njw9nb4hmr] {
    background: white !important;
    color: #032e7a !important; /* ✅ AZUL más oscuro */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ✅ RESPONSIVO para header azul - AJUSTADO PROPORCIONALMENTE */
@media (max-width: 768px) {
    .page-header-blue[b-njw9nb4hmr] {
        padding: 1.05rem 0.7rem; /* ✅ REDUCIDO 30%: de 1.5rem 1rem a 1.05rem 0.7rem */
        margin-bottom: 1rem;
        border-radius: 8px;
        /* ✅ AÑADIDO: Mismo ajuste móvil que form-content */
        max-width: calc(100% - 16px); /* ✅ MÓVIL: mismo ajuste que el form-content */
    }
    
    .page-header-blue .header-content[b-njw9nb4hmr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem; /* ✅ REDUCIDO 30%: de 1rem a 0.7rem */
    }
    
    .page-header-blue .title-section[b-njw9nb4hmr] {
        min-width: 100%;
    }
    
    .page-header-blue .page-title[b-njw9nb4hmr] {
        font-size: 1.05rem; /* ✅ REDUCIDO 30%: de 1.5rem a 1.05rem */
    }
    
    .page-header-blue .page-subtitle[b-njw9nb4hmr] {
        font-size: 0.63rem; /* ✅ REDUCIDO 30%: proporcional */
    }
    
    .page-header-blue .header-actions[b-njw9nb4hmr] {
        width: 100%;
        justify-content: flex-end;
    }
    
    .page-header-blue .header-actions .btn[b-njw9nb4hmr] {
        font-size: 9.1px !important; /* ✅ BOTONES móvil reducidos 30% */
        padding: 7px 11.2px !important;
        min-height: 28px !important;
    }
}

@media (max-width: 576px) {
    .page-header-blue .header-actions .btn[b-njw9nb4hmr] {
        font-size: 8.4px !important; /* ✅ BOTONES móvil pequeño reducidos 30% */
        padding: 5.6px 8.4px !important;
        min-height: 25.2px !important;
    }
}
/* /Components/Pages/Cliente/EditarCliente.razor.rz.scp.css */
/* Formulario de editar cliente con dise�o limpio usando Montserrat - ELEMENTOS M�S PEQUE�OS */

/* Variables para asegurar consistencia tipogr�fica */
:root[b-lajidf29jk] {
    --montserrat-font: 'Montserrat', Arial, Helvetica, sans-serif;
}

.clientes-container[b-lajidf29jk] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px; /* ? MANTENIDO: padding uniforme de 12px en todos los lados */
    background: #ffffff; /* ? CAMBIADO: de #f8f9fa a blanco */
    font-family: var(--montserrat-font) !important;
}

/* ? Header azul con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para m�vil */
.page-header-blue[b-lajidf29jk] {
    position: sticky; /* ? MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 10px; /* ? MANTENIDO: margen superior de 10px */
    left: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    right: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    z-index: 999; /* ? MANTENIDO: menor que dropdowns (1055) */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ? MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ? MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ? AUMENTADO: m�s padding vertical (era 10px) */
    margin-bottom: 16px; /* ? MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ? AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ? MANTENIDO: flexbox directo */
    align-items: center; /* ? MANTENIDO: centrado vertical */
    
    /* ? MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ? MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ? MANTENIDO: centrado horizontal */
    margin-right: auto; /* ? MANTENIDO: centrado horizontal */
}

/* ? CORREGIDO: Responsive optimizado para evitar overflow en m�vil */
@media (max-width: 768px) {
    .page-header-blue[b-lajidf29jk] {
        max-width: calc(100% - 16px); /* ? M�VIL: ajustar al padding del container m�vil */
        padding: 14px 16px; /* ? AUMENTADO: m�s padding para elementos m�viles */
        height: auto; /* ? CR�TICO: altura autom�tica para permitir wrap */
        min-height: 70px; /* ? A�ADIDO: altura m�nima para garantizar espacio */
        top: 5px; /* ? MANTENIDO: menos margen superior en m�vil */
        flex-direction: column; /* ? MANTENIDO: stack vertical */
        justify-content: center; /* ? MANTENIDO: centrar contenido */
        gap: 10px; /* ? AUMENTADO: m�s espacio entre elementos stacked */
    }
    
    /* ? CORREGIDO: Permitir wrap completo en m�vil */
    .header-content[b-lajidf29jk] {
        flex-direction: column; /* ? MANTENIDO: stack vertical en m�vil */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap en m�vil */
        gap: 10px; /* ? AUMENTADO: m�s gap en m�vil */
        width: 100%; /* ? ASEGURADO: usar todo el ancho */
    }
    
    .title-section[b-lajidf29jk] {
        text-align: center; /* ? MANTENIDO: centrar t�tulo en m�vil */
        width: 100%; /* ? MANTENIDO: usar todo el ancho */
        flex-wrap: wrap; /* ? A�ADIDO: permitir wrap del t�tulo */
        justify-content: center; /* ? A�ADIDO: centrar contenido */
    }
    
    .header-actions[b-lajidf29jk] {
        justify-content: center; /* ? MANTENIDO: centrar botones en m�vil */
        width: 100%; /* ? MANTENIDO: usar todo el ancho */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap de botones en m�vil */
        gap: 8px; /* ? A�ADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header-blue[b-lajidf29jk] {
        height: auto; /* ? CR�TICO: altura autom�tica */
        min-height: 65px; /* ? AJUSTADO: altura m�nima para pantallas peque�as */
        padding: 12px 12px; /* ? AJUSTADO: padding para pantallas peque�as */
    }
    
    .header-actions .btn[b-lajidf29jk] {
        flex: 1 1 auto; /* ? A�ADIDO: botones flexibles en m�vil peque�o */
        max-width: 48%; /* ? A�ADIDO: m�ximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header-blue[b-lajidf29jk] {
        min-height: 80px; /* ? AUMENTADO: m�s altura para pantallas muy peque�as */
        padding: 10px 8px; /* ? COMPACTO: padding m�nimo */
    }
    
    .header-actions .btn[b-lajidf29jk] {
        flex: 1 1 100%; /* ? STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ? ANCHO COMPLETO: sin restricciones */
    }
}

/* ? Header con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para m�vil */
.page-header.fixed-header[b-lajidf29jk] {
    position: sticky; /* ? MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 10px; /* ? MANTENIDO: margen superior de 10px */
    left: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    right: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    z-index: 999; /* ? MANTENIDO: menor que dropdowns (1055) */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ? MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ? MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ? AUMENTADO: m�s padding vertical (era 10px) */
    margin-bottom: 16px; /* ? MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ? AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ? MANTENIDO: flexbox directo */
    align-items: center; /* ? MANTENIDO: centrado vertical */
    
    /* ? MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ? MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ? MANTENIDO: centrado horizontal */
    margin-right: auto; /* ? MANTENIDO: centrado horizontal */
}

/* ? CORREGIDO: Responsive optimizado para evitar overflow en m�vil */
@media (max-width: 768px) {
    .page-header.fixed-header[b-lajidf29jk] {
        max-width: calc(100% - 16px); /* ? M�VIL: ajustar al padding del container m�vil */
        padding: 14px 16px; /* ? AUMENTADO: m�s padding para elementos m�viles */
        height: auto; /* ? CR�TICO: altura autom�tica para permitir wrap */
        min-height: 70px; /* ? A�ADIDO: altura m�nima para garantizar espacio */
        top: 5px; /* ? MANTENIDO: menos margen superior en m�vil */
        flex-direction: column; /* ? MANTENIDO: stack vertical */
        justify-content: center; /* ? MANTENIDO: centrar contenido */
        gap: 10px; /* ? AUMENTADO: m�s espacio entre elementos stacked */
    }
    
    /* ? CORREGIDO: Permitir wrap completo en m�vil */
    .header-content[b-lajidf29jk] {
        flex-direction: column; /* ? MANTENIDO: stack vertical en m�vil */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap en m�vil */
        gap: 10px; /* ? AUMENTADO: m�s gap en m�vil */
        width: 100%; /* ? ASEGURADO: usar todo el ancho */
    }
    
    .title-section[b-lajidf29jk] {
        text-align: center; /* ? MANTENIDO: centrar t�tulo en m�vil */
        width: 100%; /* ? MANTENIDO: usar todo el ancho */
        flex-wrap: wrap; /* ? A�ADIDO: permitir wrap del t�tulo */
        justify-content: center; /* ? A�ADIDO: centrar contenido */
    }
    
    .header-actions[b-lajidf29jk] {
        justify-content: center; /* ? MANTENIDO: centrar botones en m�vil */
        width: 100%; /* ? MANTENIDO: usar todo el ancho */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap de botones en m�vil */
        gap: 8px; /* ? A�ADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header.fixed-header[b-lajidf29jk] {
        height: auto; /* ? CR�TICO: altura autom�tica */
        min-height: 65px; /* ? AJUSTADO: altura m�nima para pantallas peque�as */
        padding: 12px 12px; /* ? AJUSTADO: padding para pantallas peque�as */
    }
    
    .header-actions .btn[b-lajidf29jk] {
        flex: 1 1 auto; /* ? A�ADIDO: botones flexibles en m�vil peque�o */
        max-width: 48%; /* ? A�ADIDO: m�ximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header.fixed-header[b-lajidf29jk] {
        min-height: 80px; /* ? AUMENTADO: m�s altura para pantallas muy peque�as */
        padding: 10px 8px; /* ? COMPACTO: padding m�nimo */
    }
    
    .header-actions .btn[b-lajidf29jk] {
        flex: 1 1 100%; /* ? STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ? ANCHO COMPLETO: sin restricciones */
    }
}

/* ? MANTENIDO: Contenido del header en una sola l�nea SOLO para desktop */
.header-content[b-lajidf29jk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* ? SOLO para desktop: nunca hacer wrap */
    gap: 20px; /* ? MANTENIDO: espacio entre elementos */
    width: 100%; /* ? MANTENIDO: usar todo el ancho disponible */
}

.title-section[b-lajidf29jk] {
    flex: 1; /* ? MANTENIDO: usar espacio flexible */
    min-width: 0; /* ? CR�TICO: permitir shrinking */
    position: relative;
    display: flex;
    align-items: center; /* ? MANTENIDO: alineaci�n vertical */
}

/* ? ACTUALIZADO: T�tulo m�s grande aprovechando la nueva altura */
.page-title[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    font-size: 18px; /* ? AUMENTADO: de 17px a 18px para aprovechar m�s altura */
    font-weight: 600;
    color: #ffffff;
    margin: 0; /* ? MANTENIDO: sin m�rgenes */
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    position: relative;
    white-space: nowrap; /* ? MANTENIDO: no hacer wrap del t�tulo en desktop */
}

/* ? RESPONSIVE: Permitir wrap del t�tulo en m�vil */
@media (max-width: 768px) {
    .page-title[b-lajidf29jk] {
        white-space: normal; /* ? CR�TICO: permitir wrap en m�vil */
        text-align: center; /* ? CENTRADO: t�tulo centrado en m�vil */
        flex-wrap: wrap; /* ? PERMITIR WRAP: t�tulo puede hacer wrap */
    }
}

/* ? MANTENIDO: sin l�nea decorativa */
.page-title[b-lajidf29jk]::after {
    display: none; /* ? ELIMINADO: sin l�nea decorativa */
}

.page-title i[b-lajidf29jk] {
    color: #ffffff;
    margin-right: 8px; /* ? MANTENIDO: separaci�n */
    background: rgba(255,255,255,0.15);
    padding: 8px; /* ? AUMENTADO: de 7px a 8px para aprovechar m�s altura */
    border-radius: 4px; /* ? MANTENIDO: bordes m�s grandes */
    font-size: 16px; /* ? AUMENTADO: de 15px a 16px para m�s visibilidad */
}

/* ? ACTUALIZADO: Subt�tulo m�s grande */
.page-subtitle[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* ? AUMENTADO: de 13px a 14px para m�s legibilidad */
    color: rgba(255,255,255,0.75);
    margin: 0 0 0 15px; /* ? MANTENIDO: margen izquierdo para separar del t�tulo */
    font-weight: 400;
    white-space: nowrap; /* ? MANTENIDO para desktop: no hacer wrap */
}

/* ? RESPONSIVE: Permitir wrap del subt�tulo en m�vil */
@media (max-width: 768px) {
    .page-subtitle[b-lajidf29jk] {
        white-space: normal; /* ? CR�TICO: permitir wrap en m�vil */
        margin: 0; /* ? SIN MARGEN: centrado en m�vil */
        text-align: center; /* ? CENTRADO: subt�tulo centrado en m�vil */
    }
    
    .page-subtitle[b-lajidf29jk]::before {
        display: none; /* ? SIN SEPARADOR: quitar bullet en m�vil */
    }
}

/* ? MANTENIDO: Separador visual entre t�tulo y subt�tulo SOLO desktop */
.page-subtitle[b-lajidf29jk]::before {
    content: "�";
    margin-right: 8px;
    color: rgba(255,255,255,0.5);
}

.header-actions[b-lajidf29jk] {
    display: flex;
    gap: 12px; /* ? MANTENIDO: espacio entre botones */
    flex-wrap: nowrap; /* ? SOLO para desktop: botones en l�nea */
    flex-shrink: 0; /* ? MANTENIDO: los botones no se encogen */
}

/* ? ACTUALIZADO: Botones del header un 30% m�s peque�os */
.header-actions .btn[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600; /* ? MANTENIDO: m�s peso */
    font-size: 10.5px; /* ? REDUCIDO 30%: de 15px a 10.5px */
    padding: 8.4px 14px; /* ? REDUCIDO 30%: de 12px 20px a 8.4px 14px */
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap; /* ? MANTENIDO: texto en una l�nea */
    min-height: 29.4px; /* ? REDUCIDO 30%: de 42px a 29.4px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-actions .btn-secondary[b-lajidf29jk] {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
}

.header-actions .btn-secondary:hover[b-lajidf29jk] {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.header-actions .btn-primary[b-lajidf29jk] {
    background: rgba(255,255,255,0.9);
    color: #0440b8; /* ? MANTENIDO: nuevo azul vibrante */
    border-color: rgba(255,255,255,0.9);
}

.header-actions .btn-primary:hover[b-lajidf29jk] {
    background: #ffffff;
    color: #032e7a; /* ? MANTENIDO: azul oscuro */
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* ? AJUSTADO: Form content con el mismo ancho que el header */
.form-content.with-fixed-header[b-lajidf29jk] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    /* ? ELIMINADO: margin-top ya que el header no es fixed */
    font-family: var(--montserrat-font) !important;
    
    /* ? A�ADIDO: Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px); /* ? MISMO ANCHO: que el page-header */
    margin-left: auto; /* ? MISMO CENTRADO: horizontal autom�tico */
    margin-right: auto; /* ? MISMO CENTRADO: horizontal autom�tico */
}

/* ? RESPONSIVE: Ajustar form-content para m�vil igual que el header */
@media (max-width: 768px) {
    .form-content.with-fixed-header[b-lajidf29jk] {
        max-width: calc(100% - 16px); /* ? M�VIL: mismo ajuste que el header */
        padding: 12px; /* ? MANTENIDO: padding reducido en m�vil */
        font-family: var(--montserrat-font) !important;
    }
}

/* Secciones del formulario - M�S COMPACTAS */
.form-section[b-lajidf29jk] {
    margin-bottom: 20px; /* Reducido de 25px */
    padding-bottom: 16px; /* Reducido de 20px */
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-lajidf29jk] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de secci�n con Montserrat - M�S PEQUE�OS */
.section-header[b-lajidf29jk] {
    margin-bottom: 12px; /* Reducido de 15px */
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* Reducido de 16px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin: 0 0 6px 0; /* A�adido margin-bottom para la l�nea */
    padding: 0 0 4px 0; /* A�adido padding-bottom para la l�nea */
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* L�nea debajo de cada t�tulo de secci�n con color primario */
.section-title[b-lajidf29jk]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%); /* ? ACTUALIZADO: nueva paleta azul vibrante */
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2); /* ? ACTUALIZADO: nueva paleta azul */
}

.section-title i[b-lajidf29jk] {
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin-right: 6px; /* Reducido de 8px */
    font-size: 14px; /* Reducido de 16px */
    background: rgba(4, 64, 184, 0.1); /* ? ACTUALIZADO: nueva paleta azul */
    padding: 4px; /* Reducido de 6px */
    border-radius: 3px; /* Reducido de 4px */
    width: 24px; /* Reducido de 28px */
    height: 24px; /* Reducido de 28px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenido de secci�n */
.section-content[b-lajidf29jk] {
    padding: 0;
    background: none;
    border: none;
}

/* Grupos de formulario m�s compactos - M�S PEQUE�OS */
.form-group[b-lajidf29jk] {
    margin-bottom: 10px; /* Reducido de 12px */
}

.form-label[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    color: #495057;
    margin-bottom: 3px; /* Reducido de 4px */
    font-size: 11px; /* Reducido de 12px */
}

.form-label.required[b-lajidf29jk]::after {
    content: " *";
    color: #dc3545;
}

/* Controles de formulario m�s peque�os - M�S COMPACTOS */
.form-control-sm[b-lajidf29jk],
.form-select-sm[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 400;
    border: 1px solid #ced4da;
    border-radius: 3px; /* Reducido de 4px */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: auto;
    line-height: 1.3; /* M�s compacto */
}

.form-control-sm:focus[b-lajidf29jk],
.form-select-sm:focus[b-lajidf29jk] {
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    box-shadow: 0 0 0 0.1rem rgba(4, 64, 184, 0.12); /* ? ACTUALIZADO: nueva paleta azul */
}

.form-control-sm[b-lajidf29jk]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    color: #6c757d;
    font-size: 10px; /* M�s peque�o */
}

/* Input groups m�s compactos - M�S PEQUE�OS */
.input-group-sm .btn-sm[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 10px; /* Reducido de 11px */
    font-weight: 500;
    border-color: #ced4da;
}

.input-group-sm .input-group-text[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 500;
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
}

/* Espaciado de filas m�s compacto - M�S AJUSTADO */
.row.g-1[b-lajidf29jk] {
    --bs-gutter-x: 0.4rem; /* Reducido de 0.5rem */
    --bs-gutter-y: 0.2rem; /* Reducido de 0.25rem */
}

/* Alerts m�s compactos - M�S PEQUE�OS */
.alert.mt-1.p-1.small[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    padding: 0.2rem 0.3rem !important; /* Reducido */
    margin-top: 0.2rem !important; /* Reducido */
    font-size: 0.65rem; /* Reducido de 0.7rem */
    font-weight: 400;
}

/* Validation messages m�s peque�os - M�S COMPACTOS */
.validation-message[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    color: #dc3545;
    font-size: 9px; /* Reducido de 10px */
    font-weight: 400;
    margin-top: 1px;
    display: block;
}

/* Botones m�s compactos - M�S PEQUE�OS */
.btn[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    border-radius: 3px; /* Reducido de 4px */
    transition: all 0.2s ease-in-out;
    font-size: 11px; /* Reducido de 12px */
}

.btn-sm[b-lajidf29jk] {
    padding: 3px 8px; /* Reducido de 4px 10px */
    font-size: 10px; /* Reducido de 11px */
    font-weight: 500;
}

.btn-primary[b-lajidf29jk] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
}

.btn-primary:hover[b-lajidf29jk] {
    background-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    transform: translateY(-1px);
}

.btn-secondary[b-lajidf29jk] {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-primary[b-lajidf29jk] {
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
}

.btn-outline-primary:hover[b-lajidf29jk] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-danger[b-lajidf29jk] {
    color: #dc3545;
    border-color: #dc3545;
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
}

.btn-outline-danger:hover[b-lajidf29jk] {
    transform: translateY(-1px);
}

/* TextArea m�s compacto - M�S PEQUE�O */
textarea.form-control-sm[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    min-height: 50px; /* Reducido de 60px */
    resize: vertical;
    font-weight: 400;
    font-size: 11px; /* A�adido para consistencia */
    line-height: 1.3; /* M�s compacto */
}

textarea.form-control-sm[b-lajidf29jk]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 10px; /* M�s peque�o */
}

/* Estilos para los modales de Bootstrap - M�S COMPACTOS */
.modal-content[b-lajidf29jk] {
    border-radius: 6px; /* Reducido de 8px */
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* M�s sutil */
    font-family: var(--montserrat-font) !important;
}

.modal-header[b-lajidf29jk] {
    border-bottom: 1px solid #dee2e6;
    padding: 0.8rem 1.2rem; /* Reducido de 1rem 1.5rem */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? ACTUALIZADO: nueva paleta azul vibrante */
    color: #ffffff;
}

.modal-title[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 14px; /* Reducido de 16px */
    color: #ffffff;
}

.modal-title i[b-lajidf29jk] {
    color: #ffffff;
    margin-right: 6px; /* Reducido de 8px */
}

.modal-body[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    padding: 1rem; /* Reducido de 1.25rem */
}

.modal-footer[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    border-top: 1px solid #dee2e6;
    padding: 0.6rem 1rem; /* Reducido */
}

/* Close button para modales */
.btn-close[b-lajidf29jk] {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Separaci�n del contenedor principal - M�S COMPACTA */
.clientes-container > * + *[b-lajidf29jk] {
    margin-top: 12px; /* Reducido de 15px */
}

/* Alerts de error y �xito con Montserrat - M�S PEQUE�OS */
.alert[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 12px; /* A�adido para controlar tama�o */
    padding: 8px 12px; /* M�s compacto */
}

.alert-danger[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
}

.alert-success[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
}

/* Select options con Montserrat - M�S PEQUE�OS */
.form-select-sm option[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 11px;
}

/* Spinner con Montserrat - M�S PEQUE�O */
.spinner-border-sm[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
    width: 0.9rem; /* Reducido */
    height: 0.9rem; /* Reducido */
}

/* Loading state specific styles */
.text-center.py-5[b-lajidf29jk] {
    padding: 2rem 0 !important;
}

.spinner-border.text-primary[b-lajidf29jk] {
    color: #0440b8 !important; /* ? ACTUALIZADO: nuevo azul vibrante */
}

/* ? RESPONSIVE DESIGN - Corregido para evitar overflow en m�vil */
@media (max-width: 768px) {
    .clientes-container[b-lajidf29jk] {
        padding: 8px;
        font-family: var(--montserrat-font) !important;
    }

    .page-title[b-lajidf29jk] {
        font-size: 16px; /* ? AUMENTADO: de 15px a 16px aprovechando m�s altura */
        font-family: var(--montserrat-font) !important;
    }
    
    .page-subtitle[b-lajidf29jk] {
        font-size: 12px; /* ? AUMENTADO: de 11px a 12px para mejor legibilidad */
        margin-left: 0; /* ? CORREGIDO: sin margen en m�vil */
    }

    .header-actions .btn[b-lajidf29jk] {
        font-size: 9.1px; /* ? REDUCIDO 30%: de 13px a 9.1px aprovechando m�s altura */
        padding: 7px 11.2px; /* ? REDUCIDO 30%: de 10px 16px a 7px 11.2px */
        min-height: 28px; /* ? REDUCIDO 30%: de 40px a 28px */
    }

    .section-title[b-lajidf29jk] {
        font-size: 13px;
        font-family: var(--montserrat-font) !important;
    }

    .form-content.with-fixed-header[b-lajidf29jk] {
        padding: 12px;
        font-family: var(--montserrat-font) !important;
    }

    .col-lg-4[b-lajidf29jk], .col-lg-3[b-lajidf29jk], .col-lg-2[b-lajidf29jk] {
        margin-bottom: 6px;
    }

    .section-title[b-lajidf29jk]::after {
        height: 0.5px;
    }
}

@media (max-width: 576px) {
    .page-title[b-lajidf29jk] {
        font-size: 15px; /* ? AUMENTADO: de 14px a 15px */
        font-family: var(--montserrat-font) !important;
    }

    .page-subtitle[b-lajidf29jk] {
        font-size: 11px; /* ? AUMENTADO: de 10px a 11px */
    }

    .header-actions .btn[b-lajidf29jk] {
        font-size: 12px; /* ? AUMENTADO: de 11px a 12px */
        padding: 8px 12px; /* ? AUMENTADO: m�s padding */
        min-height: 36px; /* ? AUMENTADO: de 32px a 36px */
    }

    .form-control-sm[b-lajidf29jk],
    .form-select-sm[b-lajidf29jk] {
        font-size: 12px;
        font-family: var(--montserrat-font) !important;
    }
}

/* Estados disabled para campos - M�S PEQUE�OS */
.form-control-sm:disabled[b-lajidf29jk],
.form-select-sm:disabled[b-lajidf29jk] {
    background-color: #f8f9fa;
    opacity: 0.75;
    border-color: #e9ecef;
    font-family: var(--montserrat-font) !important;
}

/* Mejoras para input groups */
.input-group-sm .form-control-sm[b-lajidf29jk],
.input-group-sm .form-select-sm[b-lajidf29jk] {
    border-right: 1px solid #ced4da;
}

.input-group-sm .form-control-sm:focus[b-lajidf29jk],
.input-group-sm .form-select-sm:focus[b-lajidf29jk] {
    z-index: 3;
}

/* Espaciado entre filas de formulario - M�S COMPACTO */
.form-section .row + .row[b-lajidf29jk] {
    margin-top: 6px; /* Reducido de 8px */
}

/* Efectos adicionales para mantener consistencia con el proyecto */
.btn-primary:not(:disabled):not(.disabled):active[b-lajidf29jk],
.btn-primary:not(:disabled):not(.disabled).active[b-lajidf29jk] {
    background-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
}

.btn-outline-primary:not(:disabled):not(.disabled):active[b-lajidf29jk],
.btn-outline-primary:not(:disabled):not(.disabled).active[b-lajidf29jk] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
}

/* Asegurar que todos los elementos de formulario usen Montserrat - M�S PEQUE�OS */
.clientes-container input[b-lajidf29jk],
.clientes-container select[b-lajidf29jk],
.clientes-container textarea[b-lajidf29jk],
.clientes-container button[b-lajidf29jk],
.clientes-container label[b-lajidf29jk],
.clientes-container .form-control[b-lajidf29jk],
.clientes-container .form-select[b-lajidf29jk],
.clientes-container .btn[b-lajidf29jk],
.clientes-container .input-group-text[b-lajidf29jk],
.clientes-container .alert[b-lajidf29jk],
.clientes-container .validation-message[b-lajidf29jk] {
    font-family: var(--montserrat-font) !important;
}

/* Ajustes espec�ficos para hacer columnas m�s compactas */
.col-lg-2[b-lajidf29jk], .col-lg-3[b-lajidf29jk], .col-lg-4[b-lajidf29jk], .col-lg-5[b-lajidf29jk] {
    padding-left: 0.3rem; /* Reducido */
    padding-right: 0.3rem; /* Reducido */
}

/* Iconos de botones m�s peque�os */
.btn i[b-lajidf29jk] {
    font-size: 0.85em; /* Iconos proporcionalmente m�s peque�os */
}

.header-actions .btn i[b-lajidf29jk] {
    font-size: 1em; /* ? MANTENIDO: iconos m�s visibles en header */
    margin-right: 6px; /* ? MANTENIDO: separaci�n del texto */
}

/* ============================= */
/* FOOTER M�VIL FIJO */
/* ============================= */

/* Footer m�vil - Solo visible en dispositivos m�viles */
.mobile-footer[b-lajidf29jk] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* ? Alto z-index para estar sobre todo */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? Mismo gradiente que el header */
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -2px 8px rgba(4, 64, 184, 0.15); /* ? Sombra hacia arriba */
    backdrop-filter: blur(8px);
    padding: 12px;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del footer - flexbox para distribuir botones */
.mobile-footer-content[b-lajidf29jk] {
    display: flex;
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

/* Botones del footer m�vil - ? REDUCIDOS 30% */
.mobile-footer-btn[b-lajidf29jk] {
    flex: 1; /* ? Ambos botones ocupan el mismo espacio */
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 11.2px; /* ? REDUCIDO 30%: de 16px a 11.2px */
    padding: 9.8px 14px; /* ? REDUCIDO 30%: de 14px 20px a 9.8px 14px */
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    min-height: 35px; /* ? REDUCIDO 30%: de 50px a 35px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px; /* ? Bordes redondeados */
}

/* Bot�n Cancelar (secundario) en footer m�vil */
.mobile-footer .btn-secondary[b-lajidf29jk] {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    border-color: rgba(255,255,255,0.4);
}

.mobile-footer .btn-secondary:hover[b-lajidf29jk],
.mobile-footer .btn-secondary:active[b-lajidf29jk] {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Bot�n Actualizar (primario) en footer m�vil */
.mobile-footer .btn-primary[b-lajidf29jk] {
    background: rgba(255,255,255,0.95);
    color: #0440b8; /* ? Azul vibrante */
    border-color: rgba(255,255,255,0.95);
    font-weight: 700; /* ? M�s peso para el bot�n principal */
}

.mobile-footer .btn-primary:hover[b-lajidf29jk],
.mobile-footer .btn-primary:active[b-lajidf29jk] {
    background: #ffffff;
    color: #032e7a; /* ? Azul oscuro */
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* Bot�n deshabilitado en footer m�vil */
.mobile-footer .btn:disabled[b-lajidf29jk] {
    opacity: 0.6;
    transform: none;
}

/* Ocultar los botones del header en m�vil para evitar duplicaci�n */
@media (max-width: 767.98px) {
    .header-actions[b-lajidf29jk] {
        display: none; /* ? Ocultar botones del header en m�vil */
    }
}

/* Agregar padding inferior al contenido para compensar el footer fijo */
@media (max-width: 767.98px) {
    .clientes-container[b-lajidf29jk] {
        padding-bottom: 90px; /* ? Espacio para el footer fijo */
    }
}

/* Responsive para m�viles muy peque�os */
@media (max-width: 480px) {
    .mobile-footer[b-lajidf29jk] {
        padding: 10px 8px; /* ? Padding m�s compacto */
    }
    
    .mobile-footer-btn[b-lajidf29jk] {
        font-size: 10.5px; /* ? REDUCIDO 30%: de 15px a 10.5px */
        padding: 8.4px 11.2px; /* ? REDUCIDO 30%: de 12px 16px a 8.4px 11.2px */
        min-height: 32.2px; /* ? REDUCIDO 30%: de 46px a 32.2px */
    }
    
    .mobile-footer-content[b-lajidf29jk] {
        gap: 8px; /* ? Gap reducido */
    }
    
    .header-actions .btn[b-lajidf29jk] {
        font-size: 8.4px; /* ? REDUCIDO 30%: de 12px a 8.4px */
        padding: 5.6px 8.4px; /* ? REDUCIDO 30%: de 8px 12px a 5.6px 8.4px */
        min-height: 25.2px; /* ? REDUCIDO 30%: de 36px a 25.2px */
    }
}
/* /Components/Pages/Cliente/VerCliente.razor.rz.scp.css */
/* Formulario de ver cliente con dise�o limpio usando Montserrat - ELEMENTOS M�S PEQUE�OS */

/* Variables para asegurar consistencia tipogr�fica */
:root[b-9bashjo1xl] {
    --montserrat-font: 'Montserrat', Arial, Helvetica, sans-serif;
}

.clientes-container[b-9bashjo1xl] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px; /* ? MANTENIDO: padding uniforme de 12px en todos los lados */
    background: #ffffff; /* ? CAMBIADO: de #f8f9fa a blanco */
    font-family: var(--montserrat-font) !important;
}

/* ? Header azul con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para m�vil */
.page-header-blue[b-9bashjo1xl] {
    position: sticky; /* ? MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 10px; /* ? MANTENIDO: margen superior de 10px */
    left: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    right: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    z-index: 999; /* ? MANTENIDO: menor que dropdowns (1055) */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ? MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ? MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ? AUMENTADO: m�s padding vertical (era 10px) */
    margin-bottom: 16px; /* ? MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ? AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ? MANTENIDO: flexbox directo */
    align-items: center; /* ? MANTENIDO: centrado vertical */
    
    /* ? MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ? MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ? MANTENIDO: centrado horizontal */
    margin-right: auto; /* ? MANTENIDO: centrado horizontal */
}

/* ? CORREGIDO: Responsive optimizado para evitar overflow en m�vil */
@media (max-width: 768px) {
    .page-header-blue[b-9bashjo1xl] {
        max-width: calc(100% - 16px); /* ? M�VIL: ajustar al padding del container m�vil */
        padding: 14px 16px; /* ? AUMENTADO: m�s padding para elementos m�viles */
        height: auto; /* ? CR�TICO: altura autom�tica para permitir wrap */
        min-height: 70px; /* ? A�ADIDO: altura m�nima para garantizar espacio */
        top: 5px; /* ? MANTENIDO: menos margen superior en m�vil */
        flex-direction: column; /* ? MANTENIDO: stack vertical */
        justify-content: center; /* ? MANTENIDO: centrar contenido */
        gap: 10px; /* ? AUMENTADO: m�s espacio entre elementos stacked */
    }
    
    /* ? CORREGIDO: Permitir wrap completo en m�vil */
    .header-content[b-9bashjo1xl] {
        flex-direction: column; /* ? MANTENIDO: stack vertical en m�vil */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap en m�vil */
        gap: 10px; /* ? AUMENTADO: m�s gap en m�vil */
        width: 100%; /* ? ASEGURADO: usar todo el ancho */
    }
    
    .title-section[b-9bashjo1xl] {
        text-align: center; /* ? MANTENIDO: centrar t�tulo en m�vil */
        width: 100%; /* ? MANTENIDO: usar todo el ancho */
        flex-wrap: wrap; /* ? A�ADIDO: permitir wrap del t�tulo */
        justify-content: center; /* ? A�ADIDO: centrar contenido */
    }
    
    .header-actions[b-9bashjo1xl] {
        justify-content: center; /* ? MANTENIDO: centrar botones en m�vil */
        width: 100%; /* ? MANTENIDO: usar todo el ancho */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap de botones en m�vil */
        gap: 8px; /* ? A�ADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header-blue[b-9bashjo1xl] {
        height: auto; /* ? CR�TICO: altura autom�tica */
        min-height: 65px; /* ? AJUSTADO: altura m�nima para pantallas peque�as */
        padding: 12px 12px; /* ? AJUSTADO: padding para pantallas peque�as */
    }
    
    .header-actions .btn[b-9bashjo1xl] {
        flex: 1 1 auto; /* ? A�ADIDO: botones flexibles en m�vil peque�o */
        max-width: 48%; /* ? A�ADIDO: m�ximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header-blue[b-9bashjo1xl] {
        min-height: 80px; /* ? AUMENTADO: m�s altura para pantallas muy peque�as */
        padding: 10px 8px; /* ? COMPACTO: padding m�nimo */
    }
    
    .header-actions .btn[b-9bashjo1xl] {
        flex: 1 1 100%; /* ? STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ? ANCHO COMPLETO: sin restricciones */
    }
}

/* ? Header con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para m�vil */
.page-header.fixed-header[b-9bashjo1xl] {
    position: sticky; /* ? MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 10px; /* ? MANTENIDO: margen superior de 10px */
    left: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    right: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    z-index: 999; /* ? MANTENIDO: menor que dropdowns (1055) */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ? MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ? MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ? AUMENTADO: m�s padding vertical (era 10px) */
    margin-bottom: 16px; /* ? MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ? AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ? MANTENIDO: flexbox directo */
    align-items: center; /* ? MANTENIDO: centrado vertical */
    
    /* ? MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ? MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ? MANTENIDO: centrado horizontal */
    margin-right: auto; /* ? MANTENIDO: centrado horizontal */
}

/* ? CORREGIDO: Responsive optimizado para evitar overflow en m�vil */
@media (max-width: 768px) {
    .page-header.fixed-header[b-9bashjo1xl] {
        max-width: calc(100% - 16px); /* ? M�VIL: ajustar al padding del container m�vil */
        padding: 14px 16px; /* ? AUMENTADO: m�s padding para elementos m�viles */
        height: auto; /* ? CR�TICO: altura autom�tica para permitir wrap */
        min-height: 70px; /* ? A�ADIDO: altura m�nima para garantizar espacio */
        top: 5px; /* ? MANTENIDO: menos margen superior en m�vil */
        flex-direction: column; /* ? MANTENIDO: stack vertical */
        justify-content: center; /* ? MANTENIDO: centrar contenido */
        gap: 10px; /* ? AUMENTADO: m�s espacio entre elementos stacked */
    }
    
    /* ? CORREGIDO: Permitir wrap completo en m�vil */
    .header-content[b-9bashjo1xl] {
        flex-direction: column; /* ? MANTENIDO: stack vertical en m�vil */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap en m�vil */
        gap: 10px; /* ? AUMENTADO: m�s gap en m�vil */
        width: 100%; /* ? ASEGURADO: usar todo el ancho */
    }
    
    .title-section[b-9bashjo1xl] {
        text-align: center; /* ? MANTENIDO: centrar t�tulo en m�vil */
        width: 100%; /* ? MANTENIDO: usar todo el ancho */
        flex-wrap: wrap; /* ? A�ADIDO: permitir wrap del t�tulo */
        justify-content: center; /* ? A�ADIDO: centrar contenido */
    }
    
    .header-actions[b-9bashjo1xl] {
        justify-content: center; /* ? MANTENIDO: centrar botones en m�vil */
        width: 100%; /* ? MANTENIDO: usar todo el ancho */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap de botones en m�vil */
        gap: 8px; /* ? A�ADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header.fixed-header[b-9bashjo1xl] {
        height: auto; /* ? CR�TICO: altura autom�tica */
        min-height: 65px; /* ? AJUSTADO: altura m�nima para pantallas peque�as */
        padding: 12px 12px; /* ? AJUSTADO: padding para pantallas peque�as */
    }
    
    .header-actions .btn[b-9bashjo1xl] {
        flex: 1 1 auto; /* ? A�ADIDO: botones flexibles en m�vil peque�o */
        max-width: 48%; /* ? A�ADIDO: m�ximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header.fixed-header[b-9bashjo1xl] {
        min-height: 80px; /* ? AUMENTADO: m�s altura para pantallas muy peque�as */
        padding: 10px 8px; /* ? COMPACTO: padding m�nimo */
    }
    
    .header-actions .btn[b-9bashjo1xl] {
        flex: 1 1 100%; /* ? STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ? ANCHO COMPLETO: sin restricciones */
    }
}

/* ? MANTENIDO: Contenido del header en una sola l�nea SOLO para desktop */
.header-content[b-9bashjo1xl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* ? SOLO para desktop: nunca hacer wrap */
    gap: 20px; /* ? MANTENIDO: espacio entre elementos */
    width: 100%; /* ? MANTENIDO: usar todo el ancho disponible */
}

.title-section[b-9bashjo1xl] {
    flex: 1; /* ? MANTENIDO: usar espacio flexible */
    min-width: 0; /* ? CR�TICO: permitir shrinking */
    position: relative;
    display: flex;
    align-items: center; /* ? MANTENIDO: alineaci�n vertical */
}

/* ? ACTUALIZADO: T�tulo m�s grande aprovechando la nueva altura */
.page-title[b-9bashjo1xl] {
    font-family: var(--montserrat-font) !important;
    font-size: 18px; /* ? AUMENTADO: de 17px a 18px para aprovechar m�s altura */
    font-weight: 600;
    color: #ffffff;
    margin: 0; /* ? MANTENIDO: sin m�rgenes */
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    position: relative;
    white-space: nowrap; /* ? MANTENIDO: no hacer wrap del t�tulo en desktop */
}

/* ? RESPONSIVE: Permitir wrap del t�tulo en m�vil */
@media (max-width: 768px) {
    .page-title[b-9bashjo1xl] {
        white-space: normal; /* ? CR�TICO: permitir wrap en m�vil */
        text-align: center; /* ? CENTRADO: t�tulo centrado en m�vil */
        flex-wrap: wrap; /* ? PERMITIR WRAP: t�tulo puede hacer wrap */
    }
}

/* ? MANTENIDO: sin l�nea decorativa */
.page-title[b-9bashjo1xl]::after {
    display: none; /* ? ELIMINADO: sin l�nea decorativa */
}

.page-title i[b-9bashjo1xl] {
    color: #ffffff;
    margin-right: 8px; /* ? MANTENIDO: separaci�n */
    background: rgba(255,255,255,0.15);
    padding: 8px; /* ? AUMENTADO: de 7px a 8px para aprovechar m�s altura */
    border-radius: 4px; /* ? MANTENIDO: bordes m�s grandes */
    font-size: 16px; /* ? AUMENTADO: de 15px a 16px para m�s visibilidad */
}

/* ? ACTUALIZADO: Subt�tulo m�s grande */
.page-subtitle[b-9bashjo1xl] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* ? AUMENTADO: de 13px a 14px para m�s legibilidad */
    color: rgba(255,255,255,0.75);
    margin: 0 0 0 15px; /* ? MANTENIDO: margen izquierdo para separar del t�tulo */
    font-weight: 400;
    white-space: nowrap; /* ? MANTENIDO para desktop: no hacer wrap */
}

/* ? RESPONSIVE: Permitir wrap del subt�tulo en m�vil */
@media (max-width: 768px) {
    .page-subtitle[b-9bashjo1xl] {
        white-space: normal; /* ? CR�TICO: permitir wrap en m�vil */
        margin: 0; /* ? SIN MARGEN: centrado en m�vil */
        text-align: center; /* ? CENTRADO: subt�tulo centrado en m�vil */
    }
    
    .page-subtitle[b-9bashjo1xl]::before {
        display: none; /* ? SIN SEPARADOR: quitar bullet en m�vil */
    }
}

/* ? MANTENIDO: Separador visual entre t�tulo y subt�tulo SOLO desktop */
.page-subtitle[b-9bashjo1xl]::before {
    content: "�";
    margin-right: 8px;
    color: rgba(255,255,255,0.5);
}

.header-actions[b-9bashjo1xl] {
    display: flex;
    gap: 12px; /* ? MANTENIDO: espacio entre botones */
    flex-wrap: nowrap; /* ? SOLO para desktop: botones en l�nea */
    flex-shrink: 0; /* ? MANTENIDO: los botones no se encogen */
}

/* ? ACTUALIZADO: Botones m�s grandes aprovechando la nueva altura */
.header-actions .btn[b-9bashjo1xl] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600; /* ? MANTENIDO: m�s peso */
    font-size: 15px; /* ? AUMENTADO: de 14px a 15px */
    padding: 12px 20px; /* ? AUMENTADO: de 10px 18px a 12px 20px */
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap; /* ? MANTENIDO: texto en una l�nea */
    min-height: 42px; /* ? AUMENTADO: de 38px a 42px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-actions .btn-secondary[b-9bashjo1xl] {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
}

.header-actions .btn-secondary:hover[b-9bashjo1xl] {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.header-actions .btn-primary[b-9bashjo1xl] {
    background: rgba(255,255,255,0.9);
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: rgba(255,255,255,0.9);
}

.header-actions .btn-primary:hover[b-9bashjo1xl] {
    background: #ffffff;
    color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* ? AJUSTADO: Form content con el mismo ancho que el header */
.form-content.with-fixed-header[b-9bashjo1xl] {
    background: #fff;
    border-radius: 6px; /* Reducido de 8px */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* M�s sutil */
    border: 1px solid #e9ecef;
    padding: 16px; /* Reducido de 20px */
    margin: 0;
    /* ? ELIMINADO: margin-top ya que el header no es fixed */
    font-family: var(--montserrat-font) !important;
    
    /* ? A�ADIDO: Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px); /* ? MISMO ANCHO: que el page-header */
    margin-left: auto; /* ? MISMO CENTRADO: horizontal autom�tico */
    margin-right: auto; /* ? MISMO CENTRADO: horizontal autom�tico */
}

/* ? RESPONSIVE: Ajustar form-content para m�vil igual que el header */
@media (max-width: 768px) {
    .form-content.with-fixed-header[b-9bashjo1xl] {
        max-width: calc(100% - 16px); /* ? M�VIL: mismo ajuste que el header */
        padding: 12px; /* ? MANTENIDO: padding reducido en m�vil */
        font-family: var(--montserrat-font) !important;
    }
}

/* Secciones del formulario - M�S COMPACTAS */
.form-section[b-9bashjo1xl] {
    margin-bottom: 20px; /* Reducido de 25px */
    padding-bottom: 16px; /* Reducido de 20px */
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-9bashjo1xl] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de secci�n con Montserrat - M�S PEQUE�OS */
.section-header[b-9bashjo1xl] {
    margin-bottom: 12px; /* Reducido de 15px */
    padding: 0;
    background: none;
    border: none;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    /* A�adido para la l�nea completa */
    padding-bottom: 4px; /* Espacio para la l�nea */
}

/* L�nea debajo de todo el header de secci�n - TODO EL ANCHO */
.section-header[b-9bashjo1xl]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante s�lido */
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2); /* ? ACTUALIZADO: nueva paleta azul */
}

.section-title[b-9bashjo1xl] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* Reducido de 16px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin: 0; /* Sin margin-bottom ya que la l�nea est� en el header */
    padding: 0; /* Sin padding-bottom ya que la l�nea est� en el header */
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

.section-title i[b-9bashjo1xl] {
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin-right: 6px; /* Reducido de 8px */
    font-size: 14px; /* Reducido de 16px */
    background: rgba(4, 64, 184, 0.1); /* ? ACTUALIZADO: nueva paleta azul */
    padding: 4px; /* Reducido de 6px */
    border-radius: 3px; /* Reducido de 4px */
    width: 24px; /* Reducido de 28px */
    height: 24px; /* Reducido de 28px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Acciones de secci�n para historial */
.section-actions[b-9bashjo1xl] {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Contenido de secci�n */
.section-content[b-9bashjo1xl] {
    padding: 0;
    background: none;
    border: none;
}

/* Grupos de formulario m�s compactos - M�S PEQUE�OS */
.form-group[b-9bashjo1xl] {
    margin-bottom: 10px; /* Reducido de 12px */
}

.form-label[b-9bashjo1xl] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    color: #495057;
    margin-bottom: 3px; /* Reducido de 4px */
    font-size: 11px; /* Reducido de 12px */
}

.form-label.text-muted[b-9bashjo1xl] {
    color: #6c757d !important;
}

/* Controles de formulario de solo lectura - M�S COMPACTOS */
.form-control-sm[readonly][b-9bashjo1xl] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 400;
    border: 1px solid #ced4da;
    border-radius: 3px; /* Reducido de 4px */
    background-color: #f8f9fa;
    height: auto;
    line-height: 1.3; /* M�s compacto */
    color: #495057;
}

/* Input groups m�s compactos - M�S PEQUE�OS */
.input-group-sm .input-group-text[b-9bashjo1xl] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 500;
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
}

/* Enlaces de contacto */
.contact-link[b-9bashjo1xl] {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    font-family: var(--montserrat-font) !important;
    font-size: 11px;
}

.contact-link:hover[b-9bashjo1xl] {
    color: #0052a3;
    text-decoration: underline;
}

.contact-link i[b-9bashjo1xl] {
    color: #6c757d;
    margin-right: 4px;
    font-size: 10px;
}

/* Badges */
.badge[b-9bashjo1xl] {
    font-family: var(--montserrat-font) !important;
    font-size: 9px; /* Reducido */
    padding: 2px 6px; /* Reducido */
    border-radius: 3px;
    font-weight: 500;
}

.badge.bg-success[b-9bashjo1xl] {
    background-color: #198754 !important;
}

.badge.bg-secondary[b-9bashjo1xl] {
    background-color: #6c757d !important;
}

.badge.bg-info[b-9bashjo1xl] {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}

.badge.bg-primary[b-9bashjo1xl] {
    background-color: #0440b8 !important; /* ? ACTUALIZADO: nuevo azul vibrante */
}

/* Campos con valores especiales */
.credit-limit[b-9bashjo1xl] {
    color: #198754;
    font-weight: 600;
}

/* Espaciado de filas m�s compacto - M�S AJUSTADO */
.row.g-1[b-9bashjo1xl] {
    --bs-gutter-x: 0.4rem; /* Reducido de 0.5rem */
    --bs-gutter-y: 0.2rem; /* Reducido de 0.25rem */
}

/* Espaciado entre filas de formulario - M�S COMPACTO */
.form-section .row + .row[b-9bashjo1xl] {
    margin-top: 6px;
}

/* ============================= */
/* NUEVA VISTA MEJORADA DE ACTIVIDADES */
/* ============================= */

.activity-panel-enhanced[b-9bashjo1xl] {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Panel de estad�sticas */
.activity-stats[b-9bashjo1xl] {
    display: flex;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    padding: 12px 16px;
    gap: 20px;
}

.stat-item[b-9bashjo1xl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.stat-icon[b-9bashjo1xl] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
}

.stat-icon.success[b-9bashjo1xl] {
    background: #28a745;
}

.stat-icon.error[b-9bashjo1xl] {
    background: #dc3545;
}

.stat-icon.info[b-9bashjo1xl] {
    background: #17a2b8;
}

.stat-info[b-9bashjo1xl] {
    display: flex;
    flex-direction: column;
}

.stat-number[b-9bashjo1xl] {
    font-size: 16px;
    font-weight: 700;
    color: #226a94;
    line-height: 1;
}

.stat-label[b-9bashjo1xl] {
    font-size: 10px;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Timeline mejorado */
.activity-timeline-enhanced[b-9bashjo1xl] {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    background: #fafafa;
}

.activity-timeline-enhanced[b-9bashjo1xl]::-webkit-scrollbar {
    width: 6px;
}

.activity-timeline-enhanced[b-9bashjo1xl]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.activity-timeline-enhanced[b-9bashjo1xl]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.activity-timeline-enhanced[b-9bashjo1xl]::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.activity-item[b-9bashjo1xl] {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    padding: 4px 0; /* Reducido padding */
    /* ELIMINADO: background, border-radius, border, box-shadow, transition */
    /* Totalmente plano - sin efectos visuales */
    position: relative;
}

.activity-item:hover[b-9bashjo1xl] {
    /* ELIMINADO: box-shadow, border-color - totalmente plano */
    /* Sin hover effects */
}

.activity-item.success[b-9bashjo1xl] {
    /* ELIMINADO: border-left - sin l�neas */
}

.activity-item.error[b-9bashjo1xl] {
    /* ELIMINADO: border-left - sin l�neas */
}

.activity-item.more-items[b-9bashjo1xl] {
    /* ELIMINADO: border-left, background - sin l�neas ni fondos */
    font-style: italic;
}

/* Activity Time con fecha y hora */
.activity-timeline.dashboard-style .activity-time[b-9bashjo1xl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px; /* Reducido de 45px */
    text-align: center;
    font-family: var(--montserrat-font) !important;
    margin-top: 2px; /* Reducido */
}

.activity-timeline.dashboard-style .activity-time .time-hour[b-9bashjo1xl] {
    font-size: 11px; /* Reducido de 12px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    line-height: 1;
    margin-bottom: 1px; /* Reducido */
}

.activity-timeline.dashboard-style .activity-time .time-date[b-9bashjo1xl] {
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
    color: #6c757d;
    line-height: 1;
}

/* Activity Items m�s simples sin fondo de card */
.activity-timeline.dashboard-style .activity-item[b-9bashjo1xl] {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* Reducido de 16px a 12px */
    margin-bottom: 6px; /* Reducido de 8px a 6px */
    padding: 4px 0; /* Reducido considerablemente - solo padding vertical m�nimo */
    transition: all 0.2s ease;
    position: relative;
    /* Sin background, border, border-radius, box-shadow */
}

.activity-timeline.dashboard-style .activity-item:hover[b-9bashjo1xl] {
    background-color: #f8f9fa;
    border-radius: 4px; /* M�s peque�o */
    padding: 4px 8px; /* Mucho m�s peque�o */
    margin: -4px -8px 2px -8px; /* Ajustado para el nuevo espaciado */
}

.activity-timeline.dashboard-style .activity-item:last-child[b-9bashjo1xl] {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Activity Time m�s compacto */
.activity-timeline.dashboard-style .activity-time[b-9bashjo1xl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px; /* Reducido de 45px */
    text-align: center;
    font-family: var(--montserrat-font) !important;
    margin-top: 2px; /* Reducido */
}

.activity-timeline.dashboard-style .activity-time .time-hour[b-9bashjo1xl] {
    font-size: 11px; /* Reducido de 12px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    line-height: 1;
    margin-bottom: 1px; /* Reducido */
}

.activity-timeline.dashboard-style .activity-time .time-date[b-9bashjo1xl] {
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
    color: #6c757d;
    line-height: 1;
}

/* Activity Icons m�s peque�os */
.activity-timeline.dashboard-style .activity-icon[b-9bashjo1xl] {
    width: 24px; /* Reducido de 32px */
    height: 24px; /* Reducido de 32px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px; /* Reducido de 14px */
    color: white;
    flex-shrink: 0;
    /* ELIMINADO: box-shadow - completamente plano */
}

/* Colores de iconos como en el dashboard - ACTUALIZADO PARA NUEVA PALETA AZUL VIBRANTE */
.activity-timeline.dashboard-style .activity-icon.ventas[b-9bashjo1xl] {
    background: #00a86b; /* ? ACTUALIZADO: Verde esmeralda para CREATE */
}

.activity-timeline.dashboard-style .activity-icon.clientes[b-9bashjo1xl] {
    background: #0440b8; /* ? ACTUALIZADO: Azul principal para UPDATE */
}

.activity-timeline.dashboard-style .activity-icon.compras[b-9bashjo1xl] {
    background: #e53e3e; /* ? ACTUALIZADO: Rojo vibrante para DELETE */
}

.activity-timeline.dashboard-style .activity-icon.cxc[b-9bashjo1xl] {
    background: #00bcd4; /* ? ACTUALIZADO: Cyan que armoniza para VIEW */
}

.activity-timeline.dashboard-style .activity-icon.inventario[b-9bashjo1xl] {
    background: #4a5568; /* ? ACTUALIZADO: Gris neutro para LOGIN */
}

.activity-timeline.dashboard-style .activity-icon.info[b-9bashjo1xl] {
    background: #ff8c00; /* ? ACTUALIZADO: Naranja vibrante para otros */
}

/* Activity Content m�s compacto */
.activity-timeline.dashboard-style .activity-content[b-9bashjo1xl] {
    flex: 1;
    min-width: 0;
}

.activity-timeline.dashboard-style .activity-content h4[b-9bashjo1xl] {
    font-size: 12px; /* Reducido de 14px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin: 0 0 2px 0; /* Reducido margen inferior */
    font-family: var(--montserrat-font) !important;
    line-height: 1.2; /* M�s compacto */
}

.activity-timeline.dashboard-style .activity-content p[b-9bashjo1xl] {
    font-size: 10px; /* Reducido de 12px */
    color: #6c757d;
    margin: 0;
    line-height: 1.3; /* M�s compacto */
    font-family: var(--montserrat-font) !important;
}

/* Show More Item */
.activity-timeline.dashboard-style .activity-item.show-more[b-9bashjo1xl] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.activity-timeline.dashboard-style .activity-item.show-more .activity-content h4[b-9bashjo1xl] {
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    font-weight: 500;
}

.activity-timeline.dashboard-style .activity-item.show-more .activity-content p[b-9bashjo1xl] {
    color: #495057;
}

/* Bot�n link estilo Dashboard */
.btn-link-dashboard[b-9bashjo1xl] {
    background: none;
    border: none;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    text-decoration: underline;
    cursor: pointer;
    font-size: 10px; /* M�s peque�o */
    font-weight: 500;
    padding: 0;
    font-family: var(--montserrat-font) !important;
}

.btn-link-dashboard:hover[b-9bashjo1xl] {
    color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    text-decoration: none;
}

/* Refresh button estilo Dashboard */
.refresh-btn[b-9bashjo1xl] {
    background: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    font-family: var(--montserrat-font) !important;
}

.refresh-btn:hover[b-9bashjo1xl] {
    background: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    color: white;
}

.refresh-btn i[b-9bashjo1xl] {
    font-size: 9px;
}

/* Empty State estilo Dashboard */
.empty-activity-state[b-9bashjo1xl] {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    /* Sin background, border ni box-shadow - m�s simple */
}

.empty-activity-state .empty-icon[b-9bashjo1xl] {
    font-size: 48px;
    color: #dee2e6;
    margin-bottom: 16px;
}

.empty-activity-state .empty-content h4[b-9bashjo1xl] {
    font-size: 16px;
    color: #495057;
    margin-bottom: 8px;
    font-weight: 600;
    font-family: var(--montserrat-font) !important;
}

.empty-activity-state .empty-content p[b-9bashjo1xl] {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
    font-family: var(--montserrat-font) !important;
}

/* ============================= */
/* DISE�O DASHBOARD PARA ACTIVIDADES DEL CLIENTE - SIN CARD */
/* ============================= */

/* Activity Timeline estilo Dashboard */
.activity-timeline.dashboard-style[b-9bashjo1xl] {
    /* Sin background, border, padding, ni box-shadow */
    max-height: 500px;
    overflow-y: auto;
}

.activity-timeline.dashboard-style[b-9bashjo1xl]::-webkit-scrollbar {
    width: 6px;
}

.activity-timeline.dashboard-style[b-9bashjo1xl]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.activity-timeline.dashboard-style[b-9bashjo1xl]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.activity-timeline.dashboard-style[b-9bashjo1xl]::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* ? RESPONSIVE DESIGN - Corregido para evitar overflow en m�vil */
@media (max-width: 768px) {
    .clientes-container[b-9bashjo1xl] {
        padding: 8px;
        font-family: var(--montserrat-font) !important;
    }

    .page-title[b-9bashjo1xl] {
        font-size: 16px; /* ? AUMENTADO: de 15px a 16px aprovechando m�s altura */
        font-family: var(--montserrat-font) !important;
    }
    
    .page-subtitle[b-9bashjo1xl] {
        font-size: 12px; /* ? AUMENTADO: de 11px a 12px para mejor legibilidad */
        margin-left: 0; /* ? CORREGIDO: sin margen en m�vil */
    }

    .header-actions .btn[b-9bashjo1xl] {
        font-size: 13px; /* ? AUMENTADO: de 12px a 13px aprovechando m�s altura */
        padding: 10px 16px; /* ? AUMENTADO: m�s padding en m�vil */
        min-height: 40px; /* ? AUMENTADO: de 36px a 40px */
    }

    .section-title[b-9bashjo1xl] {
        font-size: 13px;
        font-family: var(--montserrat-font) !important;
    }

    .form-content.with-fixed-header[b-9bashjo1xl] {
        padding: 12px;
        font-family: var(--montserrat-font) !important;
    }

    .col-lg-4[b-9bashjo1xl], .col-lg-3[b-9bashjo1xl], .col-lg-2[b-9bashjo1xl] {
        margin-bottom: 6px;
    }

    .section-title[b-9bashjo1xl]::after {
        height: 0.5px;
    }
}

@media (max-width: 576px) {
    .page-title[b-9bashjo1xl] {
        font-size: 15px; /* ? AUMENTADO: de 14px a 15px */
        font-family: var(--montserrat-font) !important;
    }

    .page-subtitle[b-9bashjo1xl] {
        font-size: 11px; /* ? AUMENTADO: de 10px a 11px */
    }

    .header-actions .btn[b-9bashjo1xl] {
        font-size: 12px; /* ? AUMENTADO: de 11px a 12px */
        padding: 8px 12px; /* ? AUMENTADO: m�s padding */
        min-height: 36px; /* ? AUMENTADO: de 32px a 36px */
    }

    .form-control-sm[b-9bashjo1xl],
    .form-select-sm[b-9bashjo1xl] {
        font-size: 12px;
        font-family: var(--montserrat-font) !important;
    }
}

/* Estados disabled para campos - M�S PEQUE�OS */
.form-control-sm:disabled[b-9bashjo1xl],
.form-select-sm:disabled[b-9bashjo1xl] {
    background-color: #f8f9fa;
    opacity: 0.75;
    border-color: #e9ecef;
    font-family: var(--montserrat-font) !important;
}

/* Mejoras para input groups */
.input-group-sm .form-control-sm[b-9bashjo1xl],
.input-group-sm .form-select-sm[b-9bashjo1xl] {
    border-right: 1px solid #ced4da;
}

.input-group-sm .form-control-sm:focus[b-9bashjo1xl],
.input-group-sm .form-select-sm:focus[b-9bashjo1xl] {
    z-index: 3;
}

/* Espaciado entre filas de formulario - M�S COMPACTO */
.form-section .row + .row[b-9bashjo1xl] {
    margin-top: 6px; /* Reducido de 8px */
}

/* Efectos adicionales para mantener consistencia con el proyecto */
.btn-primary:not(:disabled):not(.disabled):active[b-9bashjo1xl],
.btn-primary:not(:disabled):not(.disabled).active[b-9bashjo1xl] {
    background-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
}

.btn-outline-primary:not(:disabled):not(.disabled):active[b-9bashjo1xl],
.btn-outline-primary:not(:disabled):not(.disabled).active[b-9bashjo1xl] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
}

/* Asegurar que todos los elementos de formulario usen Montserrat - M�S PEQUE�OS */
.clientes-container input[b-9bashjo1xl],
.clientes-container select[b-9bashjo1xl],
.clientes-container textarea[b-9bashjo1xl],
.clientes-container button[b-9bashjo1xl],
.clientes-container label[b-9bashjo1xl],
.clientes-container .form-control[b-9bashjo1xl],
.clientes-container .form-select[b-9bashjo1xl],
.clientes-container .btn[b-9bashjo1xl],
.clientes-container .input-group-text[b-9bashjo1xl],
.clientes-container .alert[b-9bashjo1xl],
.clientes-container .validation-message[b-9bashjo1xl] {
    font-family: var(--montserrat-font) !important;
}

/* Ajustes espec�ficos para hacer columnas m�s compactas */
.col-lg-2[b-9bashjo1xl], .col-lg-3[b-9bashjo1xl], .col-lg-4[b-9bashjo1xl], .col-lg-5[b-9bashjo1xl] {
    padding-left: 0.3rem; /* Reducido */
    padding-right: 0.3rem; /* Reducido */
}

/* Iconos de botones m�s peque�os */
.btn i[b-9bashjo1xl] {
    font-size: 0.85em; /* Iconos proporcionalmente m�s peque�os */
}

.header-actions .btn i[b-9bashjo1xl] {
    font-size: 1em; /* ? MANTENIDO: iconos m�s visibles en header */
    margin-right: 6px; /* ? MANTENIDO: separaci�n del texto */
}
/* /Components/Pages/Cobros/CCobros.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-b7b0vv8ur5] {
    --montserrat-font: 'Montserrat', sans-serif;
}

.clientes-container[b-b7b0vv8ur5] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del formulario como card principal - CON MISMO ANCHO QUE HEADER */
.form-content[b-b7b0vv8ur5] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    
    /* Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    
    /* Ocupar toda la altura disponible de la pantalla */
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Secciones del formulario - DISEÑO CONSISTENTE */
.form-section[b-b7b0vv8ur5] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
}

.form-section:last-child[b-b7b0vv8ur5] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Headers de sección con línea decorativa - IGUAL QUE CLIENTES */
.section-header[b-b7b0vv8ur5] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea azul debajo de cada título de sección */
.section-title[b-b7b0vv8ur5]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-b7b0vv8ur5] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content[b-b7b0vv8ur5] {
    padding: 0;
    background: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Contenedor de tabla con scroll automático - ESTE ES EL QUE DEBE HACER SCROLL */
.table-container[b-b7b0vv8ur5] {
    flex: 1 1 0;
    overflow-y: auto !important;
    overflow-x: auto !important;
    min-height: 200px;
    max-height: 100%;
    margin-bottom: 0;
    position: relative;
}

/* table-responsive debe permitir que el scroll del contenedor padre funcione */
.table-responsive[b-b7b0vv8ur5] {
    overflow: visible;
    margin-bottom: 0;
    width: 100%;
    height: auto;
    display: block;
}

/* Reducir tamaño de texto en la tabla en 35% para filas más compactas */
.table-responsive table[b-b7b0vv8ur5] {
    font-size: 0.65rem;
    margin-bottom: 0;
}

/* Estilos específicos para eliminar padding de tabla - Sobrescribir estilos compilados */
.table-responsive table thead th[b-b7b0vv8ur5],
.table-responsive table.table thead th[b-b7b0vv8ur5],
table.table thead th[b-b7b0vv8ur5],
.table thead th[b-b7b0vv8ur5] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px !important;
    margin: 0 !important;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 10;
}

.table-responsive table tbody td[b-b7b0vv8ur5],
.table-responsive table.table tbody td[b-b7b0vv8ur5],
table.table tbody td[b-b7b0vv8ur5],
.table tbody td[b-b7b0vv8ur5] {
    padding: 2px !important;
    margin: 0 !important;
    vertical-align: middle;
}

/* Selectores aún más específicos para celdas de tabla */
.table-container .table-responsive table thead th[b-b7b0vv8ur5],
.section-content .table-responsive table thead th[b-b7b0vv8ur5] {
    padding: 2px !important;
}

.table-container .table-responsive table tbody td[b-b7b0vv8ur5],
.section-content .table-responsive table tbody td[b-b7b0vv8ur5] {
    padding: 2px !important;
}

.table-responsive table tbody td h6[b-b7b0vv8ur5] {
    font-size: 0.7rem;
    margin-bottom: 0.2rem !important;
    font-weight: 600;
}

.table-responsive table tbody td small[b-b7b0vv8ur5] {
    font-size: 0.6rem;
}

.table-responsive table tbody td .badge[b-b7b0vv8ur5] {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
}

.table-responsive table tbody td .btn-sm[b-b7b0vv8ur5] {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

.table-responsive table tbody td .btn-sm i[b-b7b0vv8ur5] {
    font-size: 0.65rem;
}

/* Botones de acciones más grandes */
.table-responsive table tbody td .btn-group .btn-sm[b-b7b0vv8ur5] {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    min-width: 32px;
    height: 32px;
}

.table-responsive table tbody td .btn-group .btn-sm i[b-b7b0vv8ur5] {
    font-size: 0.85rem;
}

.table-responsive table tbody td .fw-semibold[b-b7b0vv8ur5],
.table-responsive table tbody td .fw-bold[b-b7b0vv8ur5],
.table-responsive table tbody td span[b-b7b0vv8ur5] {
    font-size: 0.65rem;
}

/* Grupos de botones sin división */
.btn-group .btn[b-b7b0vv8ur5] {
    border-left: 1px solid rgba(0,0,0,.125);
}

.btn-group .btn:first-child[b-b7b0vv8ur5] {
    border-left: 1px solid transparent;
}

/* Formularios de búsqueda y filtros */
.form-group[b-b7b0vv8ur5] {
    margin-bottom: 0.5rem;
    font-family: var(--montserrat-font) !important;
}

.form-label[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #495057;
}

.form-control[b-b7b0vv8ur5],
.form-select[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    height: calc(1.5em + 0.75rem + 2px);
}

.form-control:focus[b-b7b0vv8ur5],
.form-select:focus[b-b7b0vv8ur5] {
    border-color: #0440b8;
    box-shadow: 0 0 0 0.2rem rgba(4, 64, 184, 0.15);
}

/* Botones */
.btn[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-sm[b-b7b0vv8ur5] {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
}

.btn-primary[b-b7b0vv8ur5] {
    background-color: #0440b8;
    border-color: #0440b8;
}

.btn-primary:hover[b-b7b0vv8ur5] {
    background-color: #033396;
    border-color: #033396;
}

.btn-outline-primary[b-b7b0vv8ur5] {
    color: #0440b8;
    border-color: #0440b8;
}

.btn-outline-primary:hover[b-b7b0vv8ur5] {
    background-color: #0440b8;
    border-color: #0440b8;
    color: white;
}

/* Cards de resumen */
.card[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card-body[b-b7b0vv8ur5] {
    padding: 0.75rem;
}

.card-title[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    font-size: 0.7rem;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 0.25rem !important;
}

.card-body h4[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0 !important;
}

/* Paginación */
.pagination[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
}

.page-link[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    font-size: 0.75rem;
    color: #0440b8;
    border-color: #dee2e6;
}

.page-link:hover[b-b7b0vv8ur5] {
    color: #033396;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-item.active .page-link[b-b7b0vv8ur5] {
    background-color: #0440b8;
    border-color: #0440b8;
}

.page-item.disabled .page-link[b-b7b0vv8ur5] {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
}

/* Spinners de carga */
.spinner-border[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
}

/* Estado de filas eliminadas */
.table-secondary[b-b7b0vv8ur5] {
    opacity: 0.6;
}

/* Badges */
.badge[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
}

/* Textos */
.text-muted[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
}

.fw-semibold[b-b7b0vv8ur5] {
    font-weight: 600 !important;
}

.fw-bold[b-b7b0vv8ur5] {
    font-weight: 700 !important;
}

/* Espaciado entre elementos */
.g-1[b-b7b0vv8ur5] {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
}

.g-2[b-b7b0vv8ur5] {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.gap-1[b-b7b0vv8ur5] {
    gap: 0.5rem !important;
}

/* Responsividad */
@media (max-width: 768px) {
    .form-content[b-b7b0vv8ur5] {
        padding: 12px;
        height: auto;
        min-height: calc(100vh - 100px);
    }
    
    .table-responsive table[b-b7b0vv8ur5] {
        font-size: 0.6rem;
    }
    
    .table-responsive table thead th[b-b7b0vv8ur5] {
        font-size: 0.65rem;
        padding: 0.4rem !important;
    }
    
    .table-responsive table tbody td[b-b7b0vv8ur5] {
        padding: 0.3rem 0.4rem !important;
    }
    
    .section-title[b-b7b0vv8ur5] {
        font-size: 13px;
    }
    
    .card-body h4[b-b7b0vv8ur5] {
        font-size: 1rem;
    }
}

/* Estados hover para filas de tabla */
.table-hover tbody tr:hover[b-b7b0vv8ur5] {
    background-color: rgba(4, 64, 184, 0.03);
}

/* Ajustes para iconos en botones */
.btn i[b-b7b0vv8ur5] {
    vertical-align: middle;
}

/* Empty state styling */
.text-center.py-4[b-b7b0vv8ur5] {
    padding: 2rem !important;
}

.text-center.py-4 i.fa-3x[b-b7b0vv8ur5] {
    font-size: 3rem;
    opacity: 0.3;
}

.text-center.py-4 h5[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    color: #6c757d;
    margin-top: 1rem;
}

.text-center.py-4 p[b-b7b0vv8ur5] {
    font-family: var(--montserrat-font) !important;
    font-size: 0.85rem;
}

/* /Components/Pages/Cobros/DetalleCobro.razor.rz.scp.css */
/* Estilos para el componente Detalle de Cobro - Montserrat */

:root[b-jmf0nbw5eq] {
    --montserrat-font: 'Montserrat', sans-serif;
}

/* Contenedor principal - 30% más pequeño */
.form-content[b-jmf0nbw5eq] {
    max-width: 100%;
    padding: 8px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
    font-size: 0.7rem; /* Reducido 30% del tamaño base */
}

/* Secciones del formulario - 30% más pequeñas */
.form-section[b-jmf0nbw5eq] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 11px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-header[b-jmf0nbw5eq] {
    background: linear-gradient(135deg, #f8fafc 0%, #e8f0ff 100%);
    padding: 8px 14px;
    border-bottom: 2px solid #0440b8;
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-jmf0nbw5eq] {
    font-size: 0.77rem; /* 30% más pequeño */
    font-weight: 700;
    color: #0440b8;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    display: flex;
    align-items: center;
}

.section-title i[b-jmf0nbw5eq] {
    font-size: 0.77rem;
    color: #0440b8;
    margin-right: 6px;
}

.section-content[b-jmf0nbw5eq] {
    padding: 14px;
}

/* Cards de información */
[b-jmf0nbw5eq] .card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    font-family: var(--montserrat-font) !important;
    opacity: 1 !important;
}

[b-jmf0nbw5eq] .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Estilos base para card-header - 30% más pequeño */
[b-jmf0nbw5eq] .card-header {
    font-weight: 700;
    font-size: 0.665rem; /* 30% más pequeño */
    padding: 8px 11px;
    font-family: var(--montserrat-font) !important;
}

[b-jmf0nbw5eq] .card-header h6 {
    margin: 0;
    font-family: var(--montserrat-font) !important;
    color: inherit;
    font-size: 0.665rem;
}

/* CRÍTICO: Sobrescribir estilos globales con máxima especificidad */
[b-jmf0nbw5eq] .card .card-header.bg-primary {
    background: #0440b8 !important;
    background-color: #0440b8 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}

[b-jmf0nbw5eq] .card .card-header.bg-primary h6,
[b-jmf0nbw5eq] .card .card-header.bg-primary i,
[b-jmf0nbw5eq] .card .card-header.bg-primary .fas,
[b-jmf0nbw5eq] .card .card-header.bg-primary .fa {
    color: #ffffff !important;
    opacity: 1 !important;
}

[b-jmf0nbw5eq] .card .card-header.bg-success {
    background: #059669 !important;
    background-color: #059669 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}

[b-jmf0nbw5eq] .card .card-header.bg-success h6,
[b-jmf0nbw5eq] .card .card-header.bg-success i,
[b-jmf0nbw5eq] .card .card-header.bg-success .fas,
[b-jmf0nbw5eq] .card .card-header.bg-success .fa {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Asegurar que text-white funcione correctamente */
[b-jmf0nbw5eq] .text-white,
[b-jmf0nbw5eq] .card-header.text-white {
    color: #ffffff !important;
    opacity: 1 !important;
}

.card-body[b-jmf0nbw5eq] {
    padding: 11px;
}

/* Tablas dentro de cards - 30% más pequeñas */
.card-body .table[b-jmf0nbw5eq] {
    margin-bottom: 0;
    font-family: var(--montserrat-font) !important;
}

.card-body .table td[b-jmf0nbw5eq],
.card-body .table th[b-jmf0nbw5eq] {
    padding: 6px 8px;
    font-size: 0.63rem; /* 30% más pequeño */
    vertical-align: middle;
}

.card-body .table .text-muted[b-jmf0nbw5eq] {
    color: #64748b !important;
    font-weight: 500;
}

.card-body .table .fw-semibold[b-jmf0nbw5eq] {
    font-weight: 600;
    color: #1e293b;
}

.card-body .table .fw-bold[b-jmf0nbw5eq] {
    font-weight: 700;
    color: #0f172a;
}

/* Badges - 30% más pequeños */
.badge[b-jmf0nbw5eq] {
    padding: 3px 6px;
    font-size: 0.525rem; /* 30% más pequeño */
    font-weight: 600;
    border-radius: 3px;
    font-family: var(--montserrat-font) !important;
}

/* Tabla de documentos aplicados */
.table-responsive[b-jmf0nbw5eq] {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.table-hover tbody tr[b-jmf0nbw5eq] {
    transition: all 0.2s ease;
}

.table-hover tbody tr:hover[b-jmf0nbw5eq] {
    background-color: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.table thead[b-jmf0nbw5eq] {
    background: linear-gradient(135deg, #f8fafc 0%, #e8f0ff 100%);
    font-family: var(--montserrat-font) !important;
}

.table thead th[b-jmf0nbw5eq] {
    font-weight: 700;
    font-size: 0.595rem; /* 30% más pequeño */
    color: #0440b8;
    border-bottom: 2px solid #0440b8;
    padding: 8px 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-family: var(--montserrat-font) !important;
}

.table tbody td[b-jmf0nbw5eq] {
    padding: 8px 11px;
    font-size: 0.63rem; /* 30% más pequeño */
    border-bottom: 1px solid #e2e8f0;
    font-family: var(--montserrat-font) !important;
}

.table tfoot[b-jmf0nbw5eq] {
    background: #f8fafc;
    border-top: 2px solid #0440b8;
    font-family: var(--montserrat-font) !important;
}

.table tfoot td[b-jmf0nbw5eq] {
    font-weight: 700;
    padding: 8px 11px;
    font-size: 0.665rem; /* 30% más pequeño */
    font-family: var(--montserrat-font) !important;
}

/* Loading spinner */
.spinner-border[b-jmf0nbw5eq] {
    width: 2rem;
    height: 2rem;
    border-width: 0.25em;
}

/* Botones - 30% más pequeños */
.btn[b-jmf0nbw5eq] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 0.63rem;
}

.btn-outline-secondary[b-jmf0nbw5eq] {
    border-color: #cbd5e1;
    color: #64748b;
}

.btn-outline-secondary:hover[b-jmf0nbw5eq] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-jmf0nbw5eq] {
    background: #0440b8;
    border-color: #0440b8;
    color: #ffffff;
}

.btn-primary:hover[b-jmf0nbw5eq] {
    background: #032e7a;
    border-color: #032e7a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(4, 64, 184, 0.3);
}

/* Estados de texto */
.text-success[b-jmf0nbw5eq] {
    color: #059669 !important;
}

.text-danger[b-jmf0nbw5eq] {
    color: #dc2626 !important;
}

.text-warning[b-jmf0nbw5eq] {
    color: #f59e0b !important;
}

.text-muted[b-jmf0nbw5eq] {
    color: #64748b !important;
}

/* Colores de badges */
.bg-primary[b-jmf0nbw5eq] {
    background-color: #0440b8 !important;
}

.bg-success[b-jmf0nbw5eq] {
    background-color: #059669 !important;
}

.bg-warning[b-jmf0nbw5eq] {
    background-color: #f59e0b !important;
    color: #000000 !important;
}

.bg-secondary[b-jmf0nbw5eq] {
    background-color: #64748b !important;
}

/* Tablas con colores específicos */
.table-light[b-jmf0nbw5eq] {
    background-color: #f8fafc !important;
}

.table-success[b-jmf0nbw5eq] {
    background-color: #d1fae5 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .form-content[b-jmf0nbw5eq] {
        padding: 8px;
    }

    .section-content[b-jmf0nbw5eq] {
        padding: 12px;
    }

    .section-header[b-jmf0nbw5eq] {
        padding: 10px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .section-title[b-jmf0nbw5eq] {
        font-size: 1rem;
    }

    .card-body[b-jmf0nbw5eq] {
        padding: 12px;
    }

    .table thead th[b-jmf0nbw5eq],
    .table tbody td[b-jmf0nbw5eq],
    .table tfoot td[b-jmf0nbw5eq] {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    .table-responsive[b-jmf0nbw5eq] {
        overflow-x: auto;
    }

    /* Stack cards verticalmente en móvil */
    .col-md-6[b-jmf0nbw5eq] {
        margin-bottom: 12px;
    }
}

@media (max-width: 576px) {
    .section-title[b-jmf0nbw5eq] {
        font-size: 0.95rem;
    }

    .section-title i[b-jmf0nbw5eq] {
        font-size: 1rem;
    }

    .btn-sm[b-jmf0nbw5eq] {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .card-header[b-jmf0nbw5eq] {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    /* Hacer tabla scrollable horizontalmente */
    .table-responsive[b-jmf0nbw5eq] {
        max-width: 100vw;
        overflow-x: scroll;
    }

    .table[b-jmf0nbw5eq] {
        min-width: 800px; /* Mantener ancho mínimo para evitar colapso */
    }
}

/* Animaciones suaves */
@keyframes fadeIn-b-jmf0nbw5eq {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-section[b-jmf0nbw5eq] {
    animation: fadeIn-b-jmf0nbw5eq 0.3s ease-out;
}

/* Mejoras visuales para íconos */
.fas[b-jmf0nbw5eq],
.fa[b-jmf0nbw5eq] {
    display: inline-block;
    vertical-align: middle;
}

/* HR dentro de cards */
.card-body hr[b-jmf0nbw5eq] {
    border-color: #e2e8f0;
    opacity: 1;
}

/* Small text */
small[b-jmf0nbw5eq] {
    font-size: 0.85em;
    font-family: var(--montserrat-font) !important;
}

/* Estados vacíos */
.text-center.py-4[b-jmf0nbw5eq] {
    padding: 32px 16px !important;
}

.text-center.py-4 .fa-3x[b-jmf0nbw5eq] {
    font-size: 3em;
    opacity: 0.3;
}

.text-center.py-4 p[b-jmf0nbw5eq] {
    font-family: var(--montserrat-font) !important;
    font-size: 0.95rem;
    color: #64748b;
}

/* Scrollbar personalizado */
.table-responsive[b-jmf0nbw5eq]::-webkit-scrollbar {
    height: 8px;
}

.table-responsive[b-jmf0nbw5eq]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.table-responsive[b-jmf0nbw5eq]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.table-responsive[b-jmf0nbw5eq]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* /Components/Pages/Cobros/ImprimirCobro.razor.rz.scp.css */
/* Estilos modernos y formales para el recibo de cobro */

:root[b-qg9p47vep3] {
    --montserrat-font: 'Montserrat', sans-serif;
    --color-primary: #1a365d;
    --color-secondary: #2c5282;
    --color-accent: #3182ce;
    --color-border: #cbd5e0;
    --color-text: #2d3748;
    --color-text-light: #718096;
}

/* Estilos para pantalla */
.recibo-container[b-qg9p47vep3] {
    max-width: 850px;
    margin: 15px auto;
    padding: 40px 35px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-size: 11px;
    color: var(--color-text);
}

/* Encabezado de la Empresa */
.recibo-empresa-header[b-qg9p47vep3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-primary);
}

.empresa-info[b-qg9p47vep3] {
    flex: 1;
}

.empresa-nombre[b-qg9p47vep3] {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 8px 0;
    line-height: 1.2;
    font-family: var(--montserrat-font) !important;
}

.empresa-detalles[b-qg9p47vep3] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
    color: var(--color-text-light);
}

.empresa-dato[b-qg9p47vep3] {
    line-height: 1.4;
}

.recibo-titulo-section[b-qg9p47vep3] {
    text-align: right;
}

.titulo-numero-row[b-qg9p47vep3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.recibo-titulo[b-qg9p47vep3] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    font-family: var(--montserrat-font) !important;
}

.recibo-numero[b-qg9p47vep3] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    background: #e6f2ff;
    padding: 4px 12px;
    border-radius: 4px;
    white-space: nowrap;
}

.recibo-id-cobro[b-qg9p47vep3] {
    font-size: 9px;
    color: var(--color-text-light);
    margin-top: 4px;
    font-weight: 500;
}

.recibo-divider[b-qg9p47vep3] {
    height: 1px;
    background: var(--color-border);
    margin: 20px 0;
}

/* Información del Cobro - Compacta */
.recibo-info-compact[b-qg9p47vep3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.info-row-compact[b-qg9p47vep3] {
    display: flex;
    padding: 3px 0;
}

.info-label[b-qg9p47vep3] {
    font-weight: 600;
    color: var(--color-text-light);
    width: 80px;
    font-size: 10px;
}

.info-value[b-qg9p47vep3] {
    color: var(--color-text);
    flex: 1;
    font-size: 10px;
}

.id-inline[b-qg9p47vep3] {
    color: var(--color-text-light);
    font-size: 9px;
    margin-left: 8px;
}

.recibo-comentarios[b-qg9p47vep3] {
    background: #f7fafc;
    padding: 10px 12px;
    border-left: 3px solid var(--color-accent);
    margin-bottom: 20px;
    font-size: 10px;
    color: var(--color-text);
}

/* Secciones */
.recibo-section[b-qg9p47vep3] {
    margin-bottom: 20px;
}

.section-titulo[b-qg9p47vep3] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 6px;
    margin-bottom: 12px;
    font-family: var(--montserrat-font) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tabla de Documentos */
.detalle-table[b-qg9p47vep3] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 9px;
}

.detalle-table thead th[b-qg9p47vep3] {
    background: #f7fafc;
    color: var(--color-primary);
    font-weight: 700;
    padding: 8px 6px;
    border: 1px solid var(--color-border);
    text-align: left;
    font-family: var(--montserrat-font) !important;
    font-size: 9px;
}

.detalle-table tbody td[b-qg9p47vep3] {
    padding: 6px;
    border: 1px solid var(--color-border);
    font-size: 9px;
}

.detalle-table tfoot td[b-qg9p47vep3] {
    padding: 8px 6px;
    border: 1px solid var(--color-border);
    background: #f7fafc;
    font-size: 9px;
}

.detalle-table .text-end[b-qg9p47vep3] {
    text-align: right;
}

.totales-row[b-qg9p47vep3] {
    font-weight: 700;
    background: #edf2f7 !important;
    color: var(--color-primary);
}

/* Grid para Formas de Pago y Resumen */
.recibo-bottom-grid[b-qg9p47vep3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

/* Formas de Pago */
.formas-pago-table[b-qg9p47vep3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.formas-pago-table td[b-qg9p47vep3] {
    padding: 6px 10px;
    border-bottom: 1px solid #f7fafc;
}

.formas-pago-table td:first-child[b-qg9p47vep3] {
    font-weight: 600;
    color: var(--color-text-light);
}

.formas-pago-table td:last-child[b-qg9p47vep3] {
    text-align: right;
    color: var(--color-text);
    font-weight: 600;
}

/* Total */
.recibo-total[b-qg9p47vep3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.total-line[b-qg9p47vep3] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    padding: 5px 10px;
}

.total-line span:first-child[b-qg9p47vep3] {
    font-weight: 600;
    color: var(--color-text-light);
}

.total-line span:last-child[b-qg9p47vep3] {
    text-align: right;
    font-weight: 600;
    color: var(--color-text);
}

.total-final[b-qg9p47vep3] {
    font-size: 13px;
    font-weight: 700;
    background: var(--color-primary);
    color: white !important;
    padding: 10px;
    border-radius: 4px;
    margin-top: 5px;
}

.total-final span[b-qg9p47vep3] {
    color: white !important;
}

/* Firma */
.firma-section[b-qg9p47vep3] {
    margin-top: 50px;
    padding-top: 30px;
    text-align: center;
}

.firma-linea[b-qg9p47vep3] {
    width: 300px;
    height: 1px;
    background: var(--color-text);
    margin: 0 auto 8px auto;
}

.firma-label[b-qg9p47vep3] {
    font-size: 10px;
    color: var(--color-text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Botones de acción */
.recibo-actions[b-qg9p47vep3] {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid var(--color-border);
    text-align: center;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.recibo-actions .btn[b-qg9p47vep3] {
    padding: 10px 30px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--montserrat-font) !important;
}

/* Estilos para impresión */
@media print {
    body[b-qg9p47vep3] {
        font-family: var(--montserrat-font) !important;
    }

    .recibo-container[b-qg9p47vep3] {
        max-width: 100%;
        margin: 0;
        padding: 25px 20px;
        border: none;
        box-shadow: none;
        font-size: 10px;
    }

    .no-print[b-qg9p47vep3] {
        display: none !important;
    }

    .empresa-nombre[b-qg9p47vep3] {
        font-size: 16px;
    }

    .recibo-titulo[b-qg9p47vep3] {
        font-size: 18px;
    }

    .recibo-numero[b-qg9p47vep3] {
        font-size: 12px;
    }

    .recibo-id-cobro[b-qg9p47vep3] {
        font-size: 8px;
    }

    .recibo-info-compact[b-qg9p47vep3] {
        gap: 3px;
        margin-bottom: 12px;
        padding: 8px 0;
    }

    .info-row-compact[b-qg9p47vep3] {
        padding: 2px 0;
    }

    .section-titulo[b-qg9p47vep3] {
        font-size: 11px;
    }

    .detalle-table[b-qg9p47vep3] {
        font-size: 8px;
    }

    .detalle-table thead th[b-qg9p47vep3] {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-size: 8px;
        padding: 6px 4px;
    }

    .detalle-table tbody td[b-qg9p47vep3] {
        font-size: 8px;
        padding: 4px;
    }

    .detalle-table tfoot td[b-qg9p47vep3] {
        font-size: 8px;
        padding: 6px 4px;
    }

    .totales-row[b-qg9p47vep3] {
        background: #e8e8e8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .total-final[b-qg9p47vep3] {
        font-size: 12px;
        background: #1a365d !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .empresa-detalles[b-qg9p47vep3] {
        font-size: 9px;
    }

    .info-label[b-qg9p47vep3],
    .info-value[b-qg9p47vep3] {
        font-size: 9px;
    }

    .formas-pago-table[b-qg9p47vep3] {
        font-size: 9px;
    }

    .recibo-comentarios[b-qg9p47vep3] {
        font-size: 9px;
    }

    .firma-section[b-qg9p47vep3] {
        margin-top: 40px;
    }

    .firma-label[b-qg9p47vep3] {
        font-size: 9px;
    }

    /* Forzar saltos de página apropiados */
    .recibo-section[b-qg9p47vep3] {
        page-break-inside: avoid;
    }

    .recibo-bottom-grid[b-qg9p47vep3] {
        page-break-inside: avoid;
    }

    table[b-qg9p47vep3] {
        page-break-inside: auto;
    }

    tr[b-qg9p47vep3] {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    thead[b-qg9p47vep3] {
        display: table-header-group;
    }

    tfoot[b-qg9p47vep3] {
        display: table-footer-group;
    }
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .recibo-container[b-qg9p47vep3] {
        padding: 20px 15px;
        font-size: 10px;
    }

    .recibo-empresa-header[b-qg9p47vep3] {
        flex-direction: column;
        gap: 15px;
    }

    .recibo-titulo-section[b-qg9p47vep3] {
        text-align: left;
    }

    .titulo-numero-row[b-qg9p47vep3] {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .empresa-nombre[b-qg9p47vep3] {
        font-size: 16px;
    }

    .recibo-titulo[b-qg9p47vep3] {
        font-size: 16px;
    }

    .recibo-numero[b-qg9p47vep3] {
        font-size: 11px;
    }

    .recibo-info-compact[b-qg9p47vep3] {
        gap: 3px;
    }

    .detalle-table[b-qg9p47vep3] {
        font-size: 8px;
    }

    .detalle-table thead th[b-qg9p47vep3],
    .detalle-table tbody td[b-qg9p47vep3],
    .detalle-table tfoot td[b-qg9p47vep3] {
        padding: 5px 3px;
    }

    .recibo-bottom-grid[b-qg9p47vep3] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .firma-linea[b-qg9p47vep3] {
        width: 200px;
    }
}

/* /Components/Pages/Cobros/RegistrarCobro.razor.rz.scp.css */
/* Estilos para el formulario de Registro de Cobro - Diseño unificado con CrearCliente */

:root[b-je37l9pgqd] {
    --montserrat-font: 'Montserrat', sans-serif;
}

/* Contenedor principal - ajustado para match con CrearCliente */
.cobros-container[b-je37l9pgqd] {
    max-width: 100%;
    margin: 0 auto;
    padding: 5.4px; /* 50% reducido de 10.8px */
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
    height: calc(100vh - 70px); /* Auto-ajustable a la altura de la pantalla */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header fijo en la parte superior - match con CrearCliente */
.page-header-blue[b-je37l9pgqd] {
    position: sticky;
    top: 2.25px; /* 50% reducido de 4.5px */
    left: auto;
    right: auto;
    z-index: 999;
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%);
    border-radius: 5.4px; /* 10% reducido de 6px */
    box-shadow: 0 1.8px 7.2px rgba(4, 64, 184, 0.15); /* 10% reducido */
    padding: 11.7px 18px; /* 10% reducido de 13px 20px */
    margin-bottom: 7.2px; /* 50% reducido de 14.4px */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(7.2px); /* 10% reducido de 8px */
    height: 61.2px; /* 10% reducido de 68px */
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 100%; /* Ancho completo del contenedor */
    margin-left: 0;
    margin-right: 0;
}

/* Responsive para header en móvil */
@media (max-width: 768px) {
    .page-header-blue[b-je37l9pgqd] {
        max-width: calc(100% - 14.4px); /* 10% reducido de 16px */
        padding: 12.6px 14.4px; /* 10% reducido de 14px 16px */
        height: auto;
        min-height: 63px; /* 10% reducido de 70px */
        top: 2.25px; /* 50% reducido de 4.5px */
        flex-direction: column;
        justify-content: center;
        gap: 9px; /* 10% reducido de 10px */
    }
    
    .header-content[b-je37l9pgqd] {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 9px;
        width: 100%;
    }
    
    .title-section[b-je37l9pgqd] {
        text-align: center;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .header-actions[b-je37l9pgqd] {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 7.2px; /* 10% reducido de 8px */
    }
}

@media (max-width: 640px) {
    .page-header-blue[b-je37l9pgqd] {
        height: auto;
        min-height: 58.5px; /* 10% reducido de 65px */
        padding: 10.8px 10.8px; /* 10% reducido de 12px */
    }
    
    .header-actions .btn[b-je37l9pgqd] {
        flex: 1 1 auto;
        max-width: 48%;
    }
}

@media (max-width: 480px) {
    .page-header-blue[b-je37l9pgqd] {
        min-height: 72px; /* 10% reducido de 80px */
        padding: 9px 7.2px; /* 10% reducido de 10px 8px */
    }
    
    .header-actions .btn[b-je37l9pgqd] {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Contenido del header */
.header-content[b-je37l9pgqd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 18px; /* 10% reducido de 20px */
    width: 100%;
    position: relative;
    z-index: 1;
}

.title-section[b-je37l9pgqd] {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3.6px; /* 10% reducido de 4px */
}

.page-title[b-je37l9pgqd] {
    font-family: var(--montserrat-font) !important;
    font-size: 16.2px; /* 10% reducido de 18px */
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    text-shadow: 0 0.9px 1.8px rgba(0,0,0,0.1); /* 10% reducido */
    position: relative;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .page-title[b-je37l9pgqd] {
        white-space: normal;
        text-align: center;
        flex-wrap: wrap;
    }
}

.page-title i[b-je37l9pgqd] {
    color: #ffffff;
    margin-right: 7.2px; /* 10% reducido de 8px */
    background: rgba(255,255,255,0.15);
    padding: 5.4px 6.3px; /* 10% reducido de 6px 7px */
    border-radius: 4.5px; /* 10% reducido de 5px */
    font-size: 13.5px; /* 10% reducido de 15px */
}

.page-subtitle[b-je37l9pgqd] {
    font-size: 12.15px; /* 10% reducido de 13.5px original */
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
}

.header-actions[b-je37l9pgqd] {
    display: flex;
    gap: 9px; /* 10% reducido de 10px */
}

.header-actions .btn[b-je37l9pgqd] {
    padding: 5.4px 10.8px; /* 10% reducido de 6px 12px */
    border-radius: 3.6px; /* 10% reducido de 4px */
    font-weight: 600;
    font-size: 12.15px; /* 10% reducido de 13.5px */
    transition: all 0.3s ease;
    font-family: var(--montserrat-font) !important;
}

.header-actions .btn-secondary[b-je37l9pgqd] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.header-actions .btn-secondary:hover[b-je37l9pgqd] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-0.9px); /* 10% reducido de -1px */
    box-shadow: 0 3.6px 7.2px rgba(0, 0, 0, 0.2); /* 10% reducido */
}

.header-actions .btn-primary[b-je37l9pgqd] {
    background: #ffffff;
    border: none;
    color: #0440b8;
    box-shadow: 0 1.8px 3.6px rgba(0, 0, 0, 0.15); /* 10% reducido */
}

.header-actions .btn-primary:hover[b-je37l9pgqd] {
    background: #f0f4ff;
    transform: translateY(-0.9px); /* 10% reducido de -1px */
    box-shadow: 0 3.6px 7.2px rgba(0, 0, 0, 0.25); /* 10% reducido */
}

/* Contenido con scroll - altura calculada y auto-ajustable */
.form-content.with-fixed-header[b-je37l9pgqd] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14.4px; /* 10% reducido de 16px - aplicado directamente */
    scroll-behavior: smooth;
    background: #fff;
    border-radius: 5.4px; /* 10% reducido de 6px */
    box-shadow: 0 1.8px 7.2px rgba(0,0,0,0.06); /* 10% reducido */
    border: 1px solid #e9ecef;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    display: flex;
    flex-direction: column;
}

/* Hacer que las secciones superiores ocupen el espacio disponible */
.form-content.with-fixed-header > .form-section:not(#formas-pago-section)[b-je37l9pgqd] {
    flex-shrink: 0;
}

/* Anclar la sección de formas de pago al fondo */
#formas-pago-section[b-je37l9pgqd] {
    margin-top: auto; /* Empuja esta sección al fondo */
    flex-shrink: 0;
}

/* Secciones del formulario - sin bordes individuales, solo separadores */
.form-section[b-je37l9pgqd] {
    background: none;
    border: none;
    border-radius: 0;
    margin-bottom: 18px; /* 10% reducido de 20px */
    padding-bottom: 14.4px; /* 10% reducido de 16px */
    box-shadow: none;
}

/* Solo la primera sección (Seleccionar Cliente) tiene borde inferior */
.form-section:first-child[b-je37l9pgqd] {
    border-bottom: 1px solid #dee2e6;
}

.form-section:last-child[b-je37l9pgqd] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-header[b-je37l9pgqd] {
    background: none;
    padding: 0;
    border-bottom: none;
    border-radius: 0;
    margin-bottom: 10.8px; /* 10% reducido de 12px */
}

.section-title[b-je37l9pgqd] {
    font-family: var(--montserrat-font) !important;
    font-size: 14.4px; /* 10% reducido de 16px */
    font-weight: 600;
    color: #0440b8;
    margin: 0;
    display: flex;
    align-items: center;
}

.section-title i[b-je37l9pgqd] {
    color: #0440b8;
    margin-right: 7.2px; /* 10% reducido de 8px */
    font-size: 14.4px; /* 10% reducido de 16px */
}

.section-content[b-je37l9pgqd] {
    padding: 0;
}

.section-content-small[b-je37l9pgqd] {
    padding: 0;
}

.header-content-step[b-je37l9pgqd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14.4px; /* 10% reducido de 16px */
}

.resumen-total-header[b-je37l9pgqd] {
    display: flex;
    align-items: center;
    padding: 5.4px 10.8px; /* 10% reducido de 6px 12px */
    background: rgba(4, 64, 184, 0.05);
    border-radius: 5.4px; /* 10% reducido de 6px */
    border: 1px solid rgba(4, 64, 184, 0.2);
    font-size: 12.15px; /* 10% reducido de 13.5px */
}

.resumen-total-header .text-muted[b-je37l9pgqd] {
    font-size: 11.48px; /* 10% reducido de 12.75px */
}

.resumen-total-header .fs-5[b-je37l9pgqd] {
    font-size: 14.4px !important; /* 10% reducido de 16px */
}

/* Tabla con scroll interno - altura máxima controlada */
.table-documentos-scroll[b-je37l9pgqd] {
    max-height: 243px; /* 10% reducido de 270px */
    overflow-y: auto;
    overflow-x: auto;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    margin-bottom: 0;
    padding: 1.8px; /* 10% reducido de 2px */
}

/* Total seleccionado fuera del scroll */
.total-seleccionado-container[b-je37l9pgqd] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1.8px; /* 10% reducido de 2px */
    background: linear-gradient(135deg, #f8fafc 0%, #e8f0ff 100%);
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    margin-top: 0;
    gap: 9px; /* 10% reducido de 10px */
}

.total-label[b-je37l9pgqd] {
    font-weight: 600;
    color: #2d3748;
    font-size: 12.15px; /* 10% reducido de 13.5px */
    font-family: var(--montserrat-font) !important;
}

.total-monto[b-je37l9pgqd] {
    font-weight: 700;
    color: #0440b8;
    font-size: 14.85px; /* 10% reducido de 16.5px */
    font-family: var(--montserrat-font) !important;
}

/* Estilos para tabla compacta */
.tabla-compacta[b-je37l9pgqd] {
    margin-bottom: 0;
    font-size: 11.48px; /* 10% reducido de 12.75px */
}

.tabla-compacta thead[b-je37l9pgqd] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc;
}

/* Sobrescribir estilos compilados de Blazor - padding mínimo */
.tabla-compacta th[b-je37l9pgqd],
.tabla-compacta thead th[b-je37l9pgqd],
table.tabla-compacta th[b-je37l9pgqd],
.table-documentos-scroll .tabla-compacta th[b-je37l9pgqd],
.table-documentos-scroll table th[b-je37l9pgqd] {
    font-weight: 600;
    color: #4a5568;
    padding: 3.6px 5.4px !important; /* 10% reducido de 4px 6px */
    margin: 0 !important;
    border-bottom: 1.8px solid #cbd5e0; /* 10% reducido de 2px */
    white-space: nowrap;
    font-family: var(--montserrat-font) !important;
    font-size: 11.48px; /* 10% reducido de 12.75px */
}

.tabla-compacta td[b-je37l9pgqd],
.tabla-compacta tbody td[b-je37l9pgqd],
table.tabla-compacta td[b-je37l9pgqd],
.table-documentos-scroll .tabla-compacta td[b-je37l9pgqd],
.table-documentos-scroll table td[b-je37l9pgqd] {
    padding: 3.6px 5.4px !important; /* 10% reducido de 4px 6px */
    margin: 0 !important;
    vertical-align: middle;
    font-family: var(--montserrat-font) !important;
    font-size: 11.48px; /* 10% reducido de 12.75px */
    font-weight: normal !important;
}

.tabla-compacta .fila-compacta[b-je37l9pgqd] {
    transition: background-color 0.2s ease;
    height: 43.2px; /* 10% reducido de 48px */
}

.tabla-compacta .fila-compacta td[b-je37l9pgqd] {
    height: 43.2px; /* 10% reducido de 48px */
    vertical-align: middle !important;
}

.tabla-compacta .fila-compacta:hover[b-je37l9pgqd] {
    background-color: #f7fafc;
}

.tabla-compacta .text-xs[b-je37l9pgqd] {
    font-size: 11.48px; /* 10% reducido de 12.75px */
    font-weight: normal !important;
}

.tabla-compacta .badge-xs[b-je37l9pgqd] {
    font-size: 10.13px; /* 10% reducido de 11.25px */
    padding: 0.225rem 0.45rem; /* 10% reducido */
    font-weight: normal !important;
}

/* Estilos para elementos de texto dentro de la tabla */
.tabla-compacta strong[b-je37l9pgqd] {
    font-size: 11.48px; /* 10% reducido de 12.75px */
    font-weight: 600 !important;
}

.tabla-compacta span[b-je37l9pgqd] {
    font-size: 11.48px; /* 10% reducido de 12.75px */
    font-weight: normal !important;
}

/* Inputs y botones dentro de la tabla */
.tabla-compacta .input-group-sm .form-control[b-je37l9pgqd] {
    font-size: 11.48px; /* 10% reducido de 12.75px */
    padding: 0.225rem 0.45rem; /* 10% reducido */
    height: auto;
    font-weight: normal !important;
}

.tabla-compacta .input-group-sm .input-group-text[b-je37l9pgqd] {
    font-size: 11.48px; /* 10% reducido de 12.75px */
    padding: 0.225rem 0.45rem; /* 10% reducido */
    font-weight: normal !important;
}

.tabla-compacta .input-group-sm .btn[b-je37l9pgqd] {
    font-size: 11.48px; /* 10% reducido de 12.75px */
    padding: 0.225rem 0.45rem; /* 10% reducido */
}

.tabla-compacta .btn-sm i[b-je37l9pgqd] {
    font-size: 11.48px; /* 10% reducido de 12.75px */
}

/* Botones de selección en la tabla */
.tabla-compacta td .btn-success[b-je37l9pgqd],
.tabla-compacta td .btn-primary[b-je37l9pgqd] {
    padding: 0.225rem 0.45rem !important; /* 10% reducido */
    border-radius: 3.6px; /* 10% reducido de 4px */
    transition: all 0.2s ease;
    border-width: 1px;
    min-width: 36px; /* 10% reducido de 40px */
    height: 28.8px; /* 10% reducido de 32px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Botón seleccionado - verde */
.tabla-compacta td .btn-success[b-je37l9pgqd] {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.tabla-compacta td .btn-success:hover[b-je37l9pgqd] {
    background-color: #218838;
    border-color: #1e7e34;
    transform: scale(1.05);
}

/* Botón no seleccionado - azul con círculo blanco */
.tabla-compacta td .btn-primary[b-je37l9pgqd] {
    background-color: #0440b8;
    border-color: #0440b8;
    color: white;
}

.tabla-compacta td .btn-primary:hover[b-je37l9pgqd] {
    background-color: #033a9e;
    border-color: #032f85;
    transform: scale(1.05);
}

.tabla-compacta td .btn-primary i[b-je37l9pgqd],
.tabla-compacta td .btn-success i[b-je37l9pgqd] {
    font-size: 1rem !important;
    line-height: 1;
}

.tabla-compacta thead .btn-link[b-je37l9pgqd] {
    color: #4a5568;
    text-decoration: none;
    padding: 0;
}

.tabla-compacta thead .btn-link:hover[b-je37l9pgqd] {
    color: #0440b8;
}

.tabla-compacta thead .btn-link i[b-je37l9pgqd] {
    transition: all 0.2s ease;
}

.tabla-compacta thead .btn-link:hover i[b-je37l9pgqd] {
    transform: scale(1.1);
}

/* Estilos para los campos del cliente y comentarios */
.cliente-comentarios-grid[b-je37l9pgqd] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16.2px; /* 10% adicional reducido de 18px = 20% total */
}

.form-label-cobro[b-je37l9pgqd] {
    display: block;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 6.48px; /* 10% adicional reducido de 7.2px = 20% total */
    font-size: 10.94px; /* 10% adicional reducido de 12.15px = 20% total */
    font-family: var(--montserrat-font) !important;
}

.form-label-cobro.required[b-je37l9pgqd]::after {
    content: " *";
    color: #e53e3e;
}

.cliente-selector-cobro[b-je37l9pgqd] {
    border: 1.62px solid #cbd5e0; /* 10% adicional reducido de 1.8px = 20% total */
    border-radius: 4.86px; /* 10% adicional reducido de 5.4px = 20% total */
    padding: 9.72px; /* 10% adicional reducido de 10.8px = 20% total */
    cursor: pointer;
    transition: all 0.3s ease;
    background: #ffffff;
    min-height: 48.6px; /* 10% adicional reducido de 54px = 20% total */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cliente-selector-cobro:hover[b-je37l9pgqd] {
    border-color: #0440b8;
    box-shadow: 0 0 0 2.43px rgba(4, 64, 184, 0.1); /* 10% adicional reducido de 2.7px = 20% total */
}

.cliente-info-cobro[b-je37l9pgqd] {
    flex: 1;
}

/* Contenedor inline para nombre y RNC en desktop */
.cliente-nombre-rnc-inline[b-je37l9pgqd] {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre nombre y RNC */
    flex-wrap: wrap; /* Permite wrap en móviles si es necesario */
}

.cliente-nombre-cobro[b-je37l9pgqd] {
    font-weight: 600;
    color: #2d3748;
    font-size: 12.96px; /* 10% adicional reducido de 14.4px = 20% total */
    font-family: var(--montserrat-font) !important;
    white-space: nowrap; /* Evitar que el nombre se parta */
}

.cliente-id-cobro[b-je37l9pgqd] {
    font-size: 10.33px; /* 10% adicional reducido de 11.48px = 20% total */
    color: #718096;
    font-family: var(--montserrat-font) !important;
    white-space: nowrap; /* Evitar que el RNC se parta */
}

.cliente-placeholder-cobro[b-je37l9pgqd] {
    display: flex;
    align-items: center;
    gap: 8.1px; /* 10% adicional reducido de 9px = 20% total */
    color: #a0aec0;
    font-size: 10.94px; /* 10% adicional reducido de 12.15px = 20% total */
    font-family: var(--montserrat-font) !important;
}

.btn-change-cobro[b-je37l9pgqd] {
    background: #0440b8;
    color: #ffffff;
    border: none;
    border-radius: 3.24px; /* 10% adicional reducido de 3.6px = 20% total */
    padding: 4.86px 9.72px; /* 10% adicional reducido de 5.4px 10.8px = 20% total */
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-change-cobro:hover[b-je37l9pgqd] {
    background: #032e7a;
    transform: scale(1.05);
}

.form-control-cobro[b-je37l9pgqd] {
    width: 100%;
    padding: 8.1px 9.72px; /* 10% adicional reducido de 9px 10.8px = 20% total */
    border: 1.62px solid #cbd5e0; /* 10% adicional reducido de 1.8px = 20% total */
    border-radius: 4.86px; /* 10% adicional reducido de 5.4px = 20% total */
    font-size: 10.94px; /* 10% adicional reducido de 12.15px = 20% total */
    transition: all 0.3s ease;
    font-family: var(--montserrat-font) !important;
}

.form-control-cobro:focus[b-je37l9pgqd] {
    outline: none;
    border-color: #0440b8;
    box-shadow: 0 0 0 2.43px rgba(4, 64, 184, 0.1); /* 10% adicional reducido de 2.7px = 20% total */
}

/* Modal de cliente */
.modal-overlay[b-je37l9pgqd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(3.6px); /* 10% reducido de 4px */
}

.modal-container[b-je37l9pgqd] {
    background: #ffffff;
    border-radius: 7.2px; /* 10% reducido de 8px */
    box-shadow: 0 9px 22.5px rgba(0, 0, 0, 0.2); /* 10% reducido de 10px 25px */
    max-width: 540px; /* 10% reducido de 600px */
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-header[b-je37l9pgqd] {
    padding: 18px; /* 10% reducido de 20px */
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-je37l9pgqd] {
    font-size: 17.1px; /* 10% reducido de 19px */
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    font-family: var(--montserrat-font) !important;
}

.btn-close[b-je37l9pgqd] {
    background: transparent;
    border: none;
    font-size: 20.25px; /* 10% reducido de 22.5px */
    color: #718096;
    cursor: pointer;
    padding: 0;
    width: 28.8px; /* 10% reducido de 32px */
    height: 28.8px; /* 10% reducido de 32px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3.6px; /* 10% reducido de 4px */
    transition: all 0.3s ease;
}

.btn-close:hover[b-je37l9pgqd] {
    background: #f7fafc;
    color: #2d3748;
}

.modal-body[b-je37l9pgqd] {
    padding: 18px; /* 10% reducido de 20px */
    overflow-y: auto;
    flex: 1;
}

.search-box[b-je37l9pgqd] {
    position: relative;
}

.search-box i[b-je37l9pgqd] {
    position: absolute;
    left: 10.8px; /* 10% reducido de 12px */
    top: 50%;
    transform: translateY(-50%);
    color: #718096;
}

.search-input[b-je37l9pgqd] {
    width: 100%;
    padding: 9px 10.8px 9px 36px; /* 10% reducido de 10px 12px 10px 40px */
    border: 1.8px solid #cbd5e0; /* 10% reducido de 2px */
    border-radius: 5.4px; /* 10% reducido de 6px */
    font-size: 12.15px; /* 10% reducido de 13.5px */
    transition: all 0.3s ease;
    font-family: var(--montserrat-font) !important;
}

.search-input:focus[b-je37l9pgqd] {
    outline: none;
    border-color: #0440b8;
    box-shadow: 0 0 0 2.7px rgba(4, 64, 184, 0.1); /* 10% reducido de 3px */
}

.clientes-list[b-je37l9pgqd] {
    margin-top: 14.4px; /* 10% reducido de 16px */
}

.cliente-item[b-je37l9pgqd] {
    padding: 10.8px; /* 10% reducido de 12px */
    border: 1px solid #e2e8f0;
    border-radius: 5.4px; /* 10% reducido de 6px */
    margin-bottom: 7.2px; /* 10% reducido de 8px */
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cliente-item:hover[b-je37l9pgqd] {
    border-color: #0440b8;
    background: #f7fafc;
    transform: translateX(3.6px); /* 10% reducido de 4px */
}

.cliente-item-info[b-je37l9pgqd] {
    flex: 1;
}

.cliente-item-nombre[b-je37l9pgqd] {
    font-weight: 600;
    color: #2d3748;
    font-size: 12.83px; /* 10% reducido de 14.25px */
    font-family: var(--montserrat-font) !important;
}

.cliente-item-rnc[b-je37l9pgqd] {
    font-size: 10.8px; /* 10% reducido de 12px */
    color: #718096;
    margin-top: 3.6px; /* 10% reducido de 4px */
    font-family: var(--montserrat-font) !important;
}

.empty-state[b-je37l9pgqd] {
    text-align: center;
    padding: 36px 18px; /* 10% reducido de 40px 20px */
    color: #a0aec0;
}

.empty-state i[b-je37l9pgqd] {
    font-size: 40.5px; /* 10% reducido de 45px */
    margin-bottom: 14.4px; /* 10% reducido de 16px */
}

.empty-state p[b-je37l9pgqd] {
    font-size: 12.83px; /* 10% reducido de 14.25px */
    font-family: var(--montserrat-font) !important;
}

/* Estilos específicos para la sección Formas de Pago - Reducción del 20% */
#formas-pago-section .form-group[b-je37l9pgqd] {
    margin-bottom: 12px; /* 20% reducido de 15px */
}

#formas-pago-section .form-label[b-je37l9pgqd] {
    font-size: 11.2px; /* 20% reducido de 14px */
    margin-bottom: 6.4px; /* 20% reducido de 8px */
    font-weight: 600;
    color: #2d3748;
}

#formas-pago-section .form-label i[b-je37l9pgqd] {
    font-size: 11.2px; /* 20% reducido de 14px */
}

#formas-pago-section .input-group[b-je37l9pgqd] {
    height: 32px; /* 20% reducido de 40px */
}

#formas-pago-section .input-group-text[b-je37l9pgqd] {
    font-size: 11.2px; /* 20% reducido de 14px */
    padding: 4.8px 9.6px; /* 20% reducido de 6px 12px */
    background-color: #e9ecef;
    border: 1.6px solid #cbd5e0; /* 20% reducido de 2px */
}

#formas-pago-section .form-control[b-je37l9pgqd] {
    font-size: 11.2px; /* 20% reducido de 14px */
    padding: 4.8px 9.6px; /* 20% reducido de 6px 12px */
    height: 32px; /* 20% reducido de 40px */
    border: 1.6px solid #cbd5e0; /* 20% reducido de 2px */
}

/* Estilos específicos para el row del resumen de montos - reducir altura */
#formas-pago-section .row.g-3[b-je37l9pgqd] {
    --bs-gutter-y: 6px; /* Espaciado vertical ajustado */
    --bs-gutter-x: 10px; /* Espaciado horizontal ajustado */
    line-height: 1.3; /* Altura de línea cómoda */
    margin-top: 4px !important; /* Reducir margen superior */
}

#formas-pago-section .row.g-3 .col-12[b-je37l9pgqd],
#formas-pago-section .row.g-3 .col-lg-3[b-je37l9pgqd],
#formas-pago-section .row.g-3 .col-md-6[b-je37l9pgqd] {
    padding-top: 3px; /* Padding vertical ajustado */
    padding-bottom: 3px; /* Padding vertical ajustado */
}

#formas-pago-section .row.g-3 .d-flex[b-je37l9pgqd] {
    min-height: 24px; /* Altura mínima ajustada */
    line-height: 1.3; /* Altura de línea cómoda */
    padding: 0; /* Sin padding */
    gap: 6px; /* Espacio entre elementos */
}

#formas-pago-section .card[b-je37l9pgqd] {
    padding: 8px 10px; /* Padding ajustado para textos más grandes */
    margin-top: 4px; /* Margen superior mínimo */
    margin-bottom: 0; /* Sin margen inferior */
}

#formas-pago-section .card-body[b-je37l9pgqd] {
    padding: 6px 8px; /* Padding ajustado */
}

#formas-pago-section .card .row[b-je37l9pgqd] {
    margin-top: 0 !important; /* Sin margen superior */
    margin-bottom: 0 !important; /* Sin margen inferior */
    row-gap: 4px !important; /* Espacio vertical mínimo entre filas */
}

#formas-pago-section .card .text-muted[b-je37l9pgqd] {
    font-size: 11.5px; /* Aumentado para mejor legibilidad */
    line-height: 1.3; /* Altura de línea cómoda */
    margin: 0; /* Sin márgenes */
}

#formas-pago-section .card strong[b-je37l9pgqd] {
    font-size: 15px; /* Aumentado para mejor proporción */
    line-height: 1.3; /* Altura de línea cómoda */
    margin: 0; /* Sin márgenes */
}

#formas-pago-section .card .fs-5[b-je37l9pgqd] {
    font-size: 15px !important; /* Aumentado para mejor proporción */
    line-height: 1.3 !important; /* Altura de línea cómoda */
}

#formas-pago-section .alert[b-je37l9pgqd] {
    font-size: 11px; /* Aumentado para mejor legibilidad */
    padding: 4px 8px; /* Padding más cómodo */
    margin: 0; /* Sin márgenes */
    line-height: 1.3; /* Altura de línea cómoda */
    min-height: 24px; /* Altura mínima un poco mayor */
    display: flex;
    align-items: center;
}

#formas-pago-section .alert i[b-je37l9pgqd] {
    font-size: 11px; /* Aumentado */
    margin-right: 4px;
}

#formas-pago-section .alert.py-2[b-je37l9pgqd] {
    padding-top: 4px !important; /* Padding cómodo */
    padding-bottom: 4px !important; /* Padding cómodo */
}

#formas-pago-section .alert.px-3[b-je37l9pgqd] {
    padding-left: 8px !important; /* Padding horizontal cómodo */
    padding-right: 8px !important; /* Padding horizontal cómodo */
}

#formas-pago-section .alert.mb-0[b-je37l9pgqd] {
    margin-bottom: 0 !important;
}

#formas-pago-section .alert small[b-je37l9pgqd] {
    font-size: 11px;
    line-height: 1.3;
}

#formas-pago-section .mt-3[b-je37l9pgqd] {
    margin-top: 4px !important; /* Reducir margen superior de mt-3 */
}

#formas-pago-section .mt-1[b-je37l9pgqd] {
    margin-top: 2px !important; /* Margen muy pequeño */
}

/* Ajustar columnas para que no agreguen altura extra */
#formas-pago-section .col-lg-3[b-je37l9pgqd],
#formas-pago-section .col-md-6[b-je37l9pgqd] {
    display: flex;
    align-items: center;
}

#formas-pago-section .bg-light[b-je37l9pgqd] {
    background-color: #f8f9fa !important;
}

/* Responsive */
@media (max-width: 768px) {
    .cobros-container[b-je37l9pgqd] {
        padding: 7.2px; /* 10% reducido de 8px */
    }

    .page-header-blue[b-je37l9pgqd] {
        padding: 10.8px 14.4px; /* 10% reducido de 12px 16px */
        margin: 0 0 10.8px 0; /* Sin márgenes laterales */
        max-width: 100%;
    }

    .page-header-blue .header-content[b-je37l9pgqd] {
        flex-direction: column;
        gap: 10.8px; /* 10% reducido de 12px */
    }

    .page-header-blue .header-actions[b-je37l9pgqd] {
        width: 100%;
        justify-content: stretch;
    }

    .page-header-blue .header-actions .btn[b-je37l9pgqd] {
        flex: 1;
    }

    .form-content.with-fixed-header[b-je37l9pgqd] {
        padding: 10.8px; /* 10% reducido de 12px */
        max-width: 100%;
    }

    .cliente-comentarios-grid[b-je37l9pgqd] {
        grid-template-columns: 1fr;
        gap: 14.4px; /* 10% reducido de 16px */
    }

    /* En móviles, permitir que nombre y RNC hagan wrap */
    .cliente-nombre-rnc-inline[b-je37l9pgqd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .cliente-nombre-cobro[b-je37l9pgqd],
    .cliente-id-cobro[b-je37l9pgqd] {
        white-space: normal; /* Permitir wrap en móviles */
    }

    .table-documentos-scroll[b-je37l9pgqd] {
        max-height: 202.5px; /* 10% reducido de 225px */
    }

    .header-content-step[b-je37l9pgqd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10.8px; /* 10% reducido de 12px */
    }

    .resumen-total-header[b-je37l9pgqd] {
        width: 100%;
        justify-content: space-between;
    }

    .total-seleccionado-container[b-je37l9pgqd] {
        flex-direction: column;
        align-items: flex-end;
        gap: 5.4px; /* 10% reducido de 6px */
        padding: 7.2px 14.4px; /* 10% reducido de 8px 16px */
    }
    
    .total-label[b-je37l9pgqd] {
        font-size: 11.48px; /* 10% reducido de 12.75px */
    }
    
    .total-monto[b-je37l9pgqd] {
        font-size: 14.4px; /* 10% reducido de 16px */
    }
}

@media (max-width: 480px) {
    .page-header-blue .page-title[b-je37l9pgqd] {
        font-size: 16.875px; /* 10% reducido de 18.75px */
    }

    .page-header-blue .header-actions[b-je37l9pgqd] {
        flex-direction: column;
    }

    .table-documentos-scroll[b-je37l9pgqd] {
        max-height: 162px; /* 10% reducido de 180px */
    }

    .header-content-step[b-je37l9pgqd] {
        gap: 9px; /* 10% reducido de 10px */
    }

    .header-content-step .btn[b-je37l9pgqd] {
        width: 100%;
    }

    .total-monto[b-je37l9pgqd] {
        font-size: 12.83px; /* 10% reducido de 14.25px */
    }
    
    .total-label[b-je37l9pgqd] {
        font-size: 10.8px; /* 10% reducido de 12px */
    }
}

/* /Components/Pages/Compra/CCompras.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-gcznfmsmb3] {
    --montserrat-font: 'Montserrat', sans-serif;
}

.compras-container[b-gcznfmsmb3] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del formulario como card principal - CON MISMO ANCHO QUE HEADER */
.form-content[b-gcznfmsmb3] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    
    /* Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    
    /* Ocupar toda la altura disponible de la pantalla */
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Secciones del formulario - DISEÑO CONSISTENTE */
.form-section[b-gcznfmsmb3] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
}

.form-section:last-child[b-gcznfmsmb3] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Headers de sección con línea decorativa - IGUAL QUE CLIENTES */
.section-header[b-gcznfmsmb3] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-gcznfmsmb3] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea azul debajo de cada título de sección */
.section-title[b-gcznfmsmb3]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-gcznfmsmb3] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Contenido de secciones - SIN PADDING EXTRA */
.section-content[b-gcznfmsmb3] {
    padding: 0;
    margin: 0;
    background: none;
    overflow: visible;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Ajustar la última sección para que tenga scroll */
.form-section:last-child .section-content[b-gcznfmsmb3] {
    overflow-y: auto;
    padding-right: 4px;
}

/* Tabla con scroll independiente */
.table-container[b-gcznfmsmb3] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 200px;
    margin: 0;
    padding: 0;
}

/* Estilos de tabla moderna y compacta */
.table[b-gcznfmsmb3] {
    margin: 0;
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
}

.table thead th[b-gcznfmsmb3] {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    z-index: 10;
    padding: 8px;
    font-size: 12px;
    white-space: nowrap;
}

.table tbody td[b-gcznfmsmb3] {
    padding: 8px;
    vertical-align: middle;
    font-size: 12px;
}

.table tbody tr:hover[b-gcznfmsmb3] {
    background-color: rgba(4, 64, 184, 0.04);
}

/* Grupos de botones compactos */
.btn-group .btn[b-gcznfmsmb3] {
    font-size: 11px;
    padding: 4px 8px;
}

/* Cards de KPI */
.card[b-gcznfmsmb3] {
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card-body[b-gcznfmsmb3] {
    padding: 12px;
}

.card-title[b-gcznfmsmb3] {
    font-family: var(--montserrat-font) !important;
    font-size: 11px;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 4px;
}

.card h4[b-gcznfmsmb3] {
    font-family: var(--montserrat-font) !important;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

/* Badges */
.badge[b-gcznfmsmb3] {
    font-family: var(--montserrat-font) !important;
    font-size: 10px;
    padding: 4px 8px;
    font-weight: 500;
}

/* Paginación */
.pagination[b-gcznfmsmb3] {
    margin: 0;
}

.page-link[b-gcznfmsmb3] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    padding: 4px 8px;
    border-color: #dee2e6;
    color: #0440b8;
}

.page-link:hover[b-gcznfmsmb3] {
    background-color: rgba(4, 64, 184, 0.08);
    border-color: #0440b8;
}

.page-item.active .page-link[b-gcznfmsmb3] {
    background-color: #0440b8;
    border-color: #0440b8;
}

/* Formularios */
.form-label[b-gcznfmsmb3] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    font-weight: 500;
    color: #495057;
    margin-bottom: 4px;
}

.form-control[b-gcznfmsmb3],
.form-select[b-gcznfmsmb3] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.form-control:focus[b-gcznfmsmb3],
.form-select:focus[b-gcznfmsmb3] {
    border-color: #0440b8;
    box-shadow: 0 0 0 0.15rem rgba(4, 64, 184, 0.15);
}

.form-control-sm[b-gcznfmsmb3],
.form-select-sm[b-gcznfmsmb3] {
    font-size: 12px;
    padding: 4px 8px;
}

/* Botones */
.btn[b-gcznfmsmb3] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
}

.btn-sm[b-gcznfmsmb3] {
    font-size: 11px;
    padding: 4px 8px;
}

.btn-primary[b-gcznfmsmb3] {
    background-color: #0440b8;
    border-color: #0440b8;
}

.btn-primary:hover[b-gcznfmsmb3] {
    background-color: #032e7a;
    border-color: #032e7a;
}

.btn-outline-primary[b-gcznfmsmb3] {
    color: #0440b8;
    border-color: #0440b8;
}

.btn-outline-primary:hover[b-gcznfmsmb3] {
    background-color: #0440b8;
    border-color: #0440b8;
    color: white;
}

/* Spinner de carga */
.spinner-border[b-gcznfmsmb3] {
    width: 2rem;
    height: 2rem;
    border-width: 0.2rem;
}

/* Empty state */
.empty-state[b-gcznfmsmb3] {
    text-align: center;
    padding: 40px 20px;
}

.empty-state i[b-gcznfmsmb3] {
    font-size: 48px;
    color: #dee2e6;
    margin-bottom: 16px;
}

.empty-state h5[b-gcznfmsmb3] {
    font-family: var(--montserrat-font) !important;
    font-size: 16px;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 8px;
}

.empty-state p[b-gcznfmsmb3] {
    font-family: var(--montserrat-font) !important;
    font-size: 13px;
    color: #adb5bd;
}

/* Responsive */
@media (max-width: 768px) {
    .form-content[b-gcznfmsmb3] {
        height: auto;
        min-height: calc(100vh - 100px);
    }
    
    .table-container[b-gcznfmsmb3] {
        overflow-x: auto;
    }
    
    .btn-group[b-gcznfmsmb3] {
        flex-direction: column;
    }
}

/* /Components/Pages/Compra/CrearCompra.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-i95ehr71tu] {
    --montserrat-font: 'Montserrat', sans-serif;
}

/* Contenido del formulario */
.form-content[b-i95ehr71tu] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 12px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
}

/* Secciones del formulario */
.form-section[b-i95ehr71tu] {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-i95ehr71tu] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de sección */
.section-header[b-i95ehr71tu] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-i95ehr71tu] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea azul debajo de cada título de sección */
.section-title[b-i95ehr71tu]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-i95ehr71tu] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Contenido de secciones */
.section-content[b-i95ehr71tu] {
    padding: 0;
    margin: 0;
    background: none;
}

/* Formularios */
.form-group[b-i95ehr71tu] {
    margin-bottom: 12px;
}

.form-label[b-i95ehr71tu] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    font-weight: 500;
    color: #495057;
    margin-bottom: 4px;
    display: block;
}

.form-control[b-i95ehr71tu],
.form-select[b-i95ehr71tu] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    width: 100%;
}

.form-control:focus[b-i95ehr71tu],
.form-select:focus[b-i95ehr71tu] {
    border-color: #0440b8;
    box-shadow: 0 0 0 0.15rem rgba(4, 64, 184, 0.15);
    outline: none;
}

/* Botones */
.btn[b-i95ehr71tu] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-sm[b-i95ehr71tu] {
    font-size: 11px;
    padding: 4px 8px;
}

.btn-primary[b-i95ehr71tu] {
    background-color: #0440b8;
    border-color: #0440b8;
    color: white;
}

.btn-primary:hover[b-i95ehr71tu] {
    background-color: #032e7a;
    border-color: #032e7a;
}

.btn-primary:disabled[b-i95ehr71tu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-i95ehr71tu] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-secondary:hover[b-i95ehr71tu] {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-danger[b-i95ehr71tu] {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-danger:hover[b-i95ehr71tu] {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Lista de productos sugeridos */
.list-group[b-i95ehr71tu] {
    border-radius: 4px;
    overflow: hidden;
}

.list-group-item[b-i95ehr71tu] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: all 0.2s;
}

.list-group-item:hover[b-i95ehr71tu] {
    background-color: rgba(4, 64, 184, 0.05);
    border-color: #0440b8;
}

.list-group-item strong[b-i95ehr71tu] {
    color: #0440b8;
    font-weight: 600;
}

/* Tabla de productos */
.table-responsive[b-i95ehr71tu] {
    overflow-x: auto;
    border-radius: 4px;
}

.table[b-i95ehr71tu] {
    margin: 0;
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
}

.table thead th[b-i95ehr71tu] {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    padding: 8px;
    font-size: 12px;
    white-space: nowrap;
    color: #495057;
}

.table tbody td[b-i95ehr71tu] {
    padding: 8px;
    vertical-align: middle;
    font-size: 12px;
}

.table tfoot th[b-i95ehr71tu] {
    background: #f8f9fa;
    border-top: 2px solid #dee2e6;
    font-weight: 600;
    padding: 8px;
    font-size: 12px;
}

.table tbody tr:hover[b-i95ehr71tu] {
    background-color: rgba(4, 64, 184, 0.04);
}

/* Inputs en tabla */
.table input.form-control[b-i95ehr71tu] {
    font-size: 11px;
    padding: 4px 6px;
    text-align: right;
}

/* Texto muted */
.text-muted[b-i95ehr71tu] {
    color: #6c757d !important;
    font-size: 11px;
}

/* Alertas */
.alert[b-i95ehr71tu] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    padding: 12px;
    border-radius: 4px;
}

.alert-info[b-i95ehr71tu] {
    background-color: rgba(13, 110, 253, 0.1);
    border-color: rgba(13, 110, 253, 0.2);
    color: #084298;
}

/* Badges */
.badge[b-i95ehr71tu] {
    font-family: var(--montserrat-font) !important;
    font-size: 10px;
    padding: 4px 8px;
    font-weight: 500;
}

/* Text colors */
.text-danger[b-i95ehr71tu] {
    color: #dc3545 !important;
}

.text-primary[b-i95ehr71tu] {
    color: #0440b8 !important;
}

.text-success[b-i95ehr71tu] {
    color: #28a745 !important;
}

.text-info[b-i95ehr71tu] {
    color: #17a2b8 !important;
}

.text-warning[b-i95ehr71tu] {
    color: #ffc107 !important;
}

/* Font weights */
.fw-semibold[b-i95ehr71tu] {
    font-weight: 600 !important;
}

.fw-bold[b-i95ehr71tu] {
    font-weight: 700 !important;
}

/* Tamaños de texto */
.fs-5[b-i95ehr71tu] {
    font-size: 1.25rem !important;
}

/* Spacing utilities */
.mb-0[b-i95ehr71tu] {
    margin-bottom: 0 !important;
}

.mb-1[b-i95ehr71tu] {
    margin-bottom: 0.25rem !important;
}

.mb-2[b-i95ehr71tu] {
    margin-bottom: 0.5rem !important;
}

.mb-3[b-i95ehr71tu] {
    margin-bottom: 1rem !important;
}

.mt-2[b-i95ehr71tu] {
    margin-top: 0.5rem !important;
}

.mt-3[b-i95ehr71tu] {
    margin-top: 1rem !important;
}

.me-1[b-i95ehr71tu] {
    margin-right: 0.25rem !important;
}

.me-2[b-i95ehr71tu] {
    margin-right: 0.5rem !important;
}

/* Flex utilities */
.d-flex[b-i95ehr71tu] {
    display: flex !important;
}

.justify-content-between[b-i95ehr71tu] {
    justify-content: space-between !important;
}

.align-items-center[b-i95ehr71tu] {
    align-items: center !important;
}

.gap-1[b-i95ehr71tu] {
    gap: 0.25rem !important;
}

.gap-2[b-i95ehr71tu] {
    gap: 0.5rem !important;
}

/* Width utilities */
.w-100[b-i95ehr71tu] {
    width: 100% !important;
}

/* Text alignment */
.text-center[b-i95ehr71tu] {
    text-align: center !important;
}

.text-end[b-i95ehr71tu] {
    text-align: right !important;
}

/* Spinner */
.spinner-border[b-i95ehr71tu] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-i95ehr71tu 0.75s linear infinite;
}

@keyframes spinner-border-b-i95ehr71tu {
    to {
        transform: rotate(360deg);
    }
}

.fa-spinner.fa-spin[b-i95ehr71tu] {
    animation: fa-spin-b-i95ehr71tu 1s infinite linear;
}

@keyframes fa-spin-b-i95ehr71tu {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .form-content[b-i95ehr71tu] {
        padding: 12px;
    }
    
    .section-title[b-i95ehr71tu] {
        font-size: 13px;
    }
    
    .table[b-i95ehr71tu] {
        font-size: 11px;
    }
    
    .table thead th[b-i95ehr71tu],
    .table tbody td[b-i95ehr71tu],
    .table tfoot th[b-i95ehr71tu] {
        padding: 6px;
    }
}

/* /Components/Pages/Cuadres/CCuadres.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-ogv26atick] {
    --montserrat-font: 'Montserrat', sans-serif;
}

/* Contenido del formulario como card principal */
.form-content[b-ogv26atick] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    
    /* Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    
    /* Ocupar toda la altura disponible de la pantalla */
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Secciones del formulario - DISEÑO CONSISTENTE */
.form-section[b-ogv26atick] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
}

.form-section:last-child[b-ogv26atick] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Headers de sección con línea decorativa */
.section-header[b-ogv26atick] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-ogv26atick] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea azul debajo de cada título de sección */
.section-title[b-ogv26atick]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-ogv26atick] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Contenido de la sección */
.section-content[b-ogv26atick] {
    padding: 0;
    font-family: var(--montserrat-font) !important;
}

.section-content-small[b-ogv26atick] {
    padding: 0;
    font-family: var(--montserrat-font) !important;
    max-height: 400px;
    overflow-y: auto;
}

/* Form groups y labels */
.form-group[b-ogv26atick] {
    margin-bottom: 0.75rem;
}

.form-label[b-ogv26atick] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    display: block;
}

/* Inputs y controles */
.form-control[b-ogv26atick],
.form-select[b-ogv26atick] {
    font-family: var(--montserrat-font) !important;
    font-size: 13px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 10px;
    transition: all 0.2s ease;
}

.form-control:focus[b-ogv26atick],
.form-select:focus[b-ogv26atick] {
    border-color: #0440b8;
    box-shadow: 0 0 0 0.2rem rgba(4, 64, 184, 0.15);
}

/* Botones */
.btn[b-ogv26atick] {
    font-family: var(--montserrat-font) !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    padding: 6px 12px;
    transition: all 0.2s ease;
}

.btn-primary[b-ogv26atick] {
    background-color: #0440b8;
    border-color: #0440b8;
}

.btn-primary:hover[b-ogv26atick] {
    background-color: #032e7a;
    border-color: #032e7a;
}

.btn-success[b-ogv26atick] {
    background-color: #059669;
    border-color: #059669;
}

.btn-success:hover[b-ogv26atick] {
    background-color: #047857;
    border-color: #047857;
}

/* Tablas */
.table[b-ogv26atick] {
    font-family: var(--montserrat-font) !important;
    font-size: 13px;
}

.table thead th[b-ogv26atick] {
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.table-hover tbody tr:hover[b-ogv26atick] {
    background-color: rgba(4, 64, 184, 0.05);
}

/* Cards */
.card[b-ogv26atick] {
    border-radius: 6px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-header[b-ogv26atick] {
    font-family: var(--montserrat-font) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid #dee2e6;
}

.card-body[b-ogv26atick] {
    padding: 12px;
}

/* Badges */
.badge[b-ogv26atick] {
    font-family: var(--montserrat-font) !important;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 3px;
}

/* Responsive */
@media (max-width: 768px) {
    .form-content[b-ogv26atick] {
        padding: 12px;
        height: auto;
        max-height: none;
    }

    .section-title[b-ogv26atick] {
        font-size: 13px;
    }

    .form-label[b-ogv26atick] {
        font-size: 11px;
    }

    .form-control[b-ogv26atick],
    .form-select[b-ogv26atick],
    .btn[b-ogv26atick] {
        font-size: 12px;
    }
}

/* /Components/Pages/Cuadres/DetalleCuadre.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-ysm6g64diz] {
    --montserrat-font: 'Montserrat', sans-serif;
}

/* Contenido del formulario */
.form-content[b-ysm6g64diz] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
}

/* Secciones del formulario */
.form-section[b-ysm6g64diz] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-ysm6g64diz] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de sección */
.section-header[b-ysm6g64diz] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-ysm6g64diz] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea azul debajo de cada título de sección */
.section-title[b-ysm6g64diz]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-ysm6g64diz] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Contenido de la sección */
.section-content[b-ysm6g64diz] {
    padding: 0;
    font-family: var(--montserrat-font) !important;
}

/* Form groups */
.form-group[b-ysm6g64diz] {
    margin-bottom: 0.75rem;
}

.form-label[b-ysm6g64diz] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    display: block;
}

/* Inputs y controles */
.form-control[b-ysm6g64diz],
.form-select[b-ysm6g64diz] {
    font-family: var(--montserrat-font) !important;
    font-size: 13px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 10px;
    transition: all 0.2s ease;
}

.form-control:focus[b-ysm6g64diz],
.form-select:focus[b-ysm6g64diz] {
    border-color: #0440b8;
    box-shadow: 0 0 0 0.2rem rgba(4, 64, 184, 0.15);
}

/* Botones */
.btn[b-ysm6g64diz] {
    font-family: var(--montserrat-font) !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    padding: 6px 12px;
    transition: all 0.2s ease;
}

.btn-primary[b-ysm6g64diz] {
    background-color: #0440b8;
    border-color: #0440b8;
}

.btn-primary:hover[b-ysm6g64diz] {
    background-color: #032e7a;
    border-color: #032e7a;
}

.btn-success[b-ysm6g64diz] {
    background-color: #059669;
    border-color: #059669;
}

.btn-success:hover[b-ysm6g64diz] {
    background-color: #047857;
    border-color: #047857;
}

.btn-danger[b-ysm6g64diz] {
    background-color: #e53e3e;
    border-color: #e53e3e;
    color: #fff;
}

.btn-danger:hover[b-ysm6g64diz] {
    background-color: #c53030;
    border-color: #c53030;
}

.btn-secondary[b-ysm6g64diz] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn-secondary:hover[b-ysm6g64diz] {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-outline-secondary[b-ysm6g64diz] {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}

.btn-outline-secondary:hover[b-ysm6g64diz] {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Tablas */
.table[b-ysm6g64diz] {
    font-family: var(--montserrat-font) !important;
    font-size: 13px;
}

.table thead th[b-ysm6g64diz] {
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.table-hover tbody tr:hover[b-ysm6g64diz] {
    background-color: rgba(4, 64, 184, 0.05);
}

.table-bordered[b-ysm6g64diz] {
    border: 1px solid #dee2e6;
}

.table-bordered th[b-ysm6g64diz],
.table-bordered td[b-ysm6g64diz] {
    border: 1px solid #dee2e6;
}

.table-borderless th[b-ysm6g64diz],
.table-borderless td[b-ysm6g64diz] {
    border: 0;
}

.table-light[b-ysm6g64diz] {
    background-color: #f8f9fa;
}

.table-dark[b-ysm6g64diz] {
    background-color: #343a40;
    color: #fff;
}

.table-success[b-ysm6g64diz] {
    background-color: #d1f0e4;
}

.table-warning[b-ysm6g64diz] {
    background-color: #fff3cd;
}

.table-danger[b-ysm6g64diz] {
    background-color: #f8d7da;
}

/* Cards */
.card[b-ysm6g64diz] {
    border-radius: 6px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
}

.card-header[b-ysm6g64diz] {
    font-family: var(--montserrat-font) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid #dee2e6;
}

.card-body[b-ysm6g64diz] {
    padding: 12px;
}

.card-title[b-ysm6g64diz] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Cards con colores */
.card.h-100[b-ysm6g64diz] {
    height: 100%;
}

/* Badges */
.badge[b-ysm6g64diz] {
    font-family: var(--montserrat-font) !important;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 3px;
}

.bg-success[b-ysm6g64diz] {
    background-color: #059669 !important;
}

.bg-primary[b-ysm6g64diz] {
    background-color: #0440b8 !important;
}

.bg-secondary[b-ysm6g64diz] {
    background-color: #6c757d !important;
}

/* Colores de texto */
.text-primary[b-ysm6g64diz] {
    color: #0440b8 !important;
}

.text-success[b-ysm6g64diz] {
    color: #059669 !important;
}

.text-warning[b-ysm6g64diz] {
    color: #ff8c00 !important;
}

.text-danger[b-ysm6g64diz] {
    color: #e53e3e !important;
}

.text-info[b-ysm6g64diz] {
    color: #00bcd4 !important;
}

.text-muted[b-ysm6g64diz] {
    color: #6c757d !important;
}

/* Colores de borde */
.border-primary[b-ysm6g64diz] {
    border-color: #0440b8 !important;
}

.border-success[b-ysm6g64diz] {
    border-color: #059669 !important;
}

.border-warning[b-ysm6g64diz] {
    border-color: #ff8c00 !important;
}

.border-danger[b-ysm6g64diz] {
    border-color: #e53e3e !important;
}

.border-info[b-ysm6g64diz] {
    border-color: #00bcd4 !important;
}

/* Fondos de card header */
.bg-light[b-ysm6g64diz] {
    background-color: #f8f9fa !important;
}

/* Utilidades de fuente */
.fw-bold[b-ysm6g64diz] {
    font-weight: 700 !important;
}

.fw-semibold[b-ysm6g64diz] {
    font-weight: 600 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .form-content[b-ysm6g64diz] {
        padding: 12px;
    }

    .section-title[b-ysm6g64diz] {
        font-size: 13px;
    }

    .form-label[b-ysm6g64diz] {
        font-size: 11px;
    }

    .form-control[b-ysm6g64diz],
    .form-select[b-ysm6g64diz],
    .btn[b-ysm6g64diz] {
        font-size: 12px;
    }

    .table[b-ysm6g64diz] {
        font-size: 12px;
    }
}

/* /Components/Pages/Cuadres/Preview.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-1t5lnkdhkm] {
    --montserrat-font: 'Montserrat', sans-serif;
}

/* Contenedor principal */
.cuadres-container[b-1t5lnkdhkm] {
    font-family: var(--montserrat-font) !important;
}

/* Header azul con gradiente */
.page-header-blue[b-1t5lnkdhkm] {
    background: linear-gradient(135deg, #0440b8 0%, #3366d1 100%);
    color: white;
    padding: 16px 4px;
    margin: 0 0 4px 0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.2);
}

.header-content[b-1t5lnkdhkm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.title-section[b-1t5lnkdhkm] {
    flex: 1;
}

.page-title[b-1t5lnkdhkm] {
    font-family: var(--montserrat-font) !important;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: white;
}

.header-actions[b-1t5lnkdhkm] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Contenido del formulario */
.form-content[b-1t5lnkdhkm] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    font-family: var(--montserrat-font) !important;
}

.form-content.with-fixed-header[b-1t5lnkdhkm] {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

/* Secciones del formulario */
.form-section[b-1t5lnkdhkm] {
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid #dee2e6;
}

.form-section:last-child[b-1t5lnkdhkm] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section.h-100[b-1t5lnkdhkm] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Headers de sección */
.section-header[b-1t5lnkdhkm] {
    margin-bottom: 12px;
    position: relative;
}

.section-title[b-1t5lnkdhkm] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    position: relative;
}

.section-title[b-1t5lnkdhkm]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-1t5lnkdhkm] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Contenido de sección */
.section-content[b-1t5lnkdhkm] {
    padding: 0;
    font-family: var(--montserrat-font) !important;
}

/* Form groups y labels */
.form-group[b-1t5lnkdhkm] {
    margin-bottom: 0.75rem;
}

.form-label[b-1t5lnkdhkm] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    display: block;
}

/* Inputs de formulario - altura consistente */
.form-control-sm[b-1t5lnkdhkm],
.form-select-sm[b-1t5lnkdhkm] {
    height: 32px;
    font-size: 13px;
    padding: 4px 8px;
    line-height: 1.5;
    font-family: var(--montserrat-font) !important;
}

/* Asegurar que datetime-local tenga la misma altura */
input[type="datetime-local"].form-control-sm[b-1t5lnkdhkm] {
    height: 32px;
    padding: 4px 8px;
}

/* Inputs con focus */
.form-control-sm:focus[b-1t5lnkdhkm],
.form-select-sm:focus[b-1t5lnkdhkm],
input[type="datetime-local"].form-control-sm:focus[b-1t5lnkdhkm] {
    border-color: #0440b8;
    box-shadow: 0 0 0 0.2rem rgba(4, 64, 184, 0.15);
    outline: none;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header-blue[b-1t5lnkdhkm] {
        padding: 12px 16px;
    }

    .header-content[b-1t5lnkdhkm] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-1t5lnkdhkm] {
        width: 100%;
        justify-content: flex-end;
    }

    .form-content[b-1t5lnkdhkm] {
        padding: 12px;
    }

    .page-title[b-1t5lnkdhkm] {
        font-size: 18px;
    }

    .section-title[b-1t5lnkdhkm] {
        font-size: 13px;
    }
}

/* Estilos para selector de usuario (similar al de cliente en Cobro) */
.usuario-selector-cuadre[b-1t5lnkdhkm] {
    border: 1.8px solid #cbd5e0;
    border-radius: 5.4px;
    padding: 8px 10px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
}

.usuario-selector-cuadre:hover[b-1t5lnkdhkm] {
    border-color: #0440b8;
    background: #f8f9fa;
}

.usuario-selector-cuadre.is-invalid-border[b-1t5lnkdhkm] {
    border-color: #dc3545;
}

.usuario-info-cuadre[b-1t5lnkdhkm] {
    flex: 1;
}

.usuario-nombre-cuadre[b-1t5lnkdhkm] {
    font-weight: 600;
    color: #2d3748;
    font-size: 12.96px;
    font-family: var(--montserrat-font) !important;
}

.usuario-placeholder-cuadre[b-1t5lnkdhkm] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a0aec0;
    font-size: 12px;
    font-family: var(--montserrat-font) !important;
}

.btn-change-cuadre[b-1t5lnkdhkm] {
    background: #0440b8;
    color: #ffffff;
    border: none;
    border-radius: 3.24px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.btn-change-cuadre:hover[b-1t5lnkdhkm] {
    background: #032e7a;
    transform: scale(1.05);
}

/* Modal de usuario */
.modal-overlay[b-1t5lnkdhkm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(3.6px);
}

.modal-container[b-1t5lnkdhkm] {
    background: #ffffff;
    border-radius: 7.2px;
    box-shadow: 0 9px 22.5px rgba(0, 0, 0, 0.2);
    max-width: 540px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-header[b-1t5lnkdhkm] {
    padding: 18px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-1t5lnkdhkm] {
    font-size: 17.1px;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    font-family: var(--montserrat-font) !important;
}

.btn-close[b-1t5lnkdhkm] {
    background: transparent;
    border: none;
    font-size: 20.25px;
    color: #718096;
    cursor: pointer;
    padding: 0;
    width: 28.8px;
    height: 28.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3.6px;
    transition: all 0.3s ease;
}

.btn-close:hover[b-1t5lnkdhkm] {
    background: #f7fafc;
    color: #2d3748;
}

.modal-body[b-1t5lnkdhkm] {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}

.search-box[b-1t5lnkdhkm] {
    position: relative;
}

.search-box i[b-1t5lnkdhkm] {
    position: absolute;
    left: 10.8px;
    top: 50%;
    transform: translateY(-50%);
    color: #718096;
}

.search-input[b-1t5lnkdhkm] {
    width: 100%;
    padding: 9px 10.8px 9px 36px;
    border: 1.8px solid #cbd5e0;
    border-radius: 5.4px;
    font-size: 12.15px;
    transition: all 0.3s ease;
    font-family: var(--montserrat-font) !important;
}

.search-input:focus[b-1t5lnkdhkm] {
    outline: none;
    border-color: #0440b8;
    box-shadow: 0 0 0 2.7px rgba(4, 64, 184, 0.1);
}

.usuarios-list[b-1t5lnkdhkm] {
    margin-top: 14.4px;
}

.usuario-item[b-1t5lnkdhkm] {
    padding: 10.8px;
    border: 1px solid #e2e8f0;
    border-radius: 5.4px;
    margin-bottom: 7.2px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.usuario-item:hover[b-1t5lnkdhkm] {
    border-color: #0440b8;
    background: #f7fafc;
    transform: translateX(3.6px);
}

.usuario-item-info[b-1t5lnkdhkm] {
    flex: 1;
}

.usuario-item-nombre[b-1t5lnkdhkm] {
    font-weight: 600;
    color: #2d3748;
    font-size: 12.83px;
    font-family: var(--montserrat-font) !important;
}

.usuario-item-username[b-1t5lnkdhkm] {
    font-size: 10.8px;
    color: #718096;
    margin-top: 3.6px;
    font-family: var(--montserrat-font) !important;
}

.empty-state[b-1t5lnkdhkm] {
    text-align: center;
    padding: 36px 18px;
    color: #a0aec0;
}

.empty-state i[b-1t5lnkdhkm] {
    font-size: 40.5px;
    margin-bottom: 14.4px;
}

.empty-state p[b-1t5lnkdhkm] {
    font-size: 12.83px;
    font-family: var(--montserrat-font) !important;
}
/* /Components/Pages/CuentasPorCobrar/CuentasPorCobrar.razor.rz.scp.css */
/* Consulta de Cuentas por Cobrar con diseño consistente usando Montserrat */

/* Variables para asegurar consistencia tipográfica */
:root[b-blqo2zqjw6] {
    --montserrat-font: 'Montserrat', sans-serif;
}

.clientes-container[b-blqo2zqjw6] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del formulario como card principal */
.form-content[b-blqo2zqjw6] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;

    /* Ocupar toda la altura disponible de la pantalla */
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Secciones del formulario */
.form-section[b-blqo2zqjw6] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
}

.form-section:last-child[b-blqo2zqjw6] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Headers de sección con línea decorativa */
.section-header[b-blqo2zqjw6] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-blqo2zqjw6] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea debajo de cada título de sección */
.section-title[b-blqo2zqjw6]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-blqo2zqjw6] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenido de sección */
.section-content[b-blqo2zqjw6] {
    padding: 0;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Grupos de formulario compactos */
.form-group[b-blqo2zqjw6] {
    margin-bottom: 10px;
}

.form-label[b-blqo2zqjw6] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    color: #495057;
    margin-bottom: 3px;
    font-size: 11px;
}

/* Controles de formulario pequeños */
.form-control-sm[b-blqo2zqjw6],
.form-select-sm[b-blqo2zqjw6] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 400;
    border: 1px solid #ced4da;
    border-radius: 3px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: auto;
    line-height: 1.3;
}

.form-control-sm:focus[b-blqo2zqjw6],
.form-select-sm:focus[b-blqo2zqjw6] {
    border-color: #0440b8;
    box-shadow: 0 0 0 0.1rem rgba(4, 64, 184, 0.12);
}

.form-control-sm[b-blqo2zqjw6]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    color: #6c757d;
    font-size: 10px;
}

/* Botones compactos */
.btn[b-blqo2zqjw6] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
    font-size: 11px;
}

.btn-sm[b-blqo2zqjw6] {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 500;
}

.btn-primary[b-blqo2zqjw6] {
    background-color: #0440b8;
    border-color: #0440b8;
}

.btn-primary:hover[b-blqo2zqjw6] {
    background-color: #032e7a;
    border-color: #032e7a;
    transform: translateY(-1px);
}

.btn-outline-primary[b-blqo2zqjw6] {
    color: #0440b8;
    border-color: #0440b8;
}

.btn-outline-primary:hover[b-blqo2zqjw6] {
    background-color: #0440b8;
    border-color: #0440b8;
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-secondary[b-blqo2zqjw6] {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover[b-blqo2zqjw6] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn-outline-info[b-blqo2zqjw6] {
    color: #17a2b8;
    border-color: #17a2b8;
}

.btn-outline-info:hover[b-blqo2zqjw6] {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

.btn-outline-success[b-blqo2zqjw6] {
    color: #28a745;
    border-color: #28a745;
}

.btn-outline-success:hover[b-blqo2zqjw6] {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
}

.table-container[b-blqo2zqjw6] {
    flex: 1 1 0;
    overflow-y: auto !important;
    overflow-x: auto !important;
    min-height: 200px;
    max-height: 100%;
    margin-bottom: 0;
    position: relative;
}

/* Tabla de resultados */
.table-responsive[b-blqo2zqjw6] {
    border-radius: 4px;
    overflow: visible;
    margin-bottom: 0;
    width: 100%;
    height: auto;
    display: block;
}

.table[b-blqo2zqjw6] {
    margin: 0;
    font-family: var(--montserrat-font) !important;
    font-size: 11px;
}

.table th[b-blqo2zqjw6] {
    background-color: #f7fafc;
    border-bottom: 2px solid #0440b8;
    color: #0440b8;
    font-weight: 600;
    padding: 8px 6px;
    vertical-align: middle;
    font-size: 10px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table td[b-blqo2zqjw6] {
    padding: 6px;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}

.table-hover tbody tr:hover[b-blqo2zqjw6] {
    background-color: rgba(4, 64, 184, 0.05);
}

/* Filas con estados de color */
.table-danger[b-blqo2zqjw6] {
    background-color: rgba(220, 53, 69, 0.08) !important;
}

.table-danger:hover[b-blqo2zqjw6] {
    background-color: rgba(220, 53, 69, 0.12) !important;
}

.table-warning[b-blqo2zqjw6] {
    background-color: rgba(255, 193, 7, 0.08) !important;
}

.table-warning:hover[b-blqo2zqjw6] {
    background-color: rgba(255, 193, 7, 0.12) !important;
}

/* Badges */
.badge[b-blqo2zqjw6] {
    font-family: var(--montserrat-font) !important;
    font-size: 9px;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 3px;
}

.bg-primary[b-blqo2zqjw6] {
    background-color: #0440b8 !important;
}

.bg-info[b-blqo2zqjw6] {
    background-color: #17a2b8 !important;
}

.bg-success[b-blqo2zqjw6] {
    background-color: #28a745 !important;
}

.bg-warning[b-blqo2zqjw6] {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* Información de cliente en tabla */
.cliente-info[b-blqo2zqjw6] {
    line-height: 1.3;
}

.cliente-nombre[b-blqo2zqjw6] {
    font-size: 11px;
    font-weight: 600;
    color: #495057;
}

/* Acciones */
.acciones-cell[b-blqo2zqjw6] {
    text-align: center;
    white-space: nowrap;
}

.btn-group[b-blqo2zqjw6] {
    gap: 2px;
}

/* KPIs Dashboard */
.dashboard-kpi[b-blqo2zqjw6] {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.2s ease-in-out;
    font-family: var(--montserrat-font) !important;
}

.dashboard-kpi:hover[b-blqo2zqjw6] {
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.kpi-icon[b-blqo2zqjw6] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    margin-right: 12px;
    flex-shrink: 0;
}

.kpi-icon i[b-blqo2zqjw6] {
    font-size: 18px;
    color: #fff;
}

.kpi-content[b-blqo2zqjw6] {
    flex: 1;
}

.kpi-label[b-blqo2zqjw6] {
    font-size: 10px;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kpi-value[b-blqo2zqjw6] {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
}

/* Empty State */
.empty-icon[b-blqo2zqjw6] {
    text-align: center;
    margin-bottom: 16px;
}

.empty-title[b-blqo2zqjw6] {
    font-family: var(--montserrat-font) !important;
    font-size: 18px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.empty-message[b-blqo2zqjw6] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    color: #6c757d;
}

/* Paginación */
.pagination[b-blqo2zqjw6] {
    font-family: var(--montserrat-font) !important;
    margin: 0;
}

.page-link[b-blqo2zqjw6] {
    font-family: var(--montserrat-font) !important;
    font-size: 11px;
    padding: 4px 8px;
    color: #0440b8;
    border-color: #dee2e6;
}

.page-link:hover[b-blqo2zqjw6] {
    background-color: rgba(4, 64, 184, 0.1);
    border-color: #0440b8;
    color: #032e7a;
}

.page-item.active .page-link[b-blqo2zqjw6] {
    background-color: #0440b8;
    border-color: #0440b8;
}

.page-item.disabled .page-link[b-blqo2zqjw6] {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
}

/* Alertas */
.alert[b-blqo2zqjw6] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    margin-top: 12px;
}

.alert i[b-blqo2zqjw6] {
    margin-right: 6px;
}

/* Spinner de carga */
.spinner-border[b-blqo2zqjw6] {
    width: 2rem;
    height: 2rem;
}

/* Font monospace para NCF */
.font-monospace[b-blqo2zqjw6] {
    font-family: 'Courier New', Courier, monospace !important;
}

/* Colores de texto */
.text-danger[b-blqo2zqjw6] {
    color: #dc3545 !important;
}

.text-success[b-blqo2zqjw6] {
    color: #28a745 !important;
}

.text-warning[b-blqo2zqjw6] {
    color: #ffc107 !important;
}

.text-muted[b-blqo2zqjw6] {
    color: #6c757d !important;
}

/* Responsividad */
@media (max-width: 768px) {
    .clientes-container[b-blqo2zqjw6] {
        padding: 8px;
    }
    
    .form-content[b-blqo2zqjw6] {
        padding: 12px;
    }
    
    .kpi-value[b-blqo2zqjw6] {
        font-size: 14px;
    }
    
    .table[b-blqo2zqjw6] {
        font-size: 10px;
    }
    
    .table th[b-blqo2zqjw6],
    .table td[b-blqo2zqjw6] {
        padding: 4px;
    }
}

/* Scrollbar personalizado para la tabla */
.table-container[b-blqo2zqjw6]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-container[b-blqo2zqjw6]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-container[b-blqo2zqjw6]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-container[b-blqo2zqjw6]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Asegurar que los totales y elementos fijos no hagan scroll */
.section-content .row[b-blqo2zqjw6] {
    flex-shrink: 0;
}

/* Contenedor de totales fijos fuera del scroll */
.totales-fijos[b-blqo2zqjw6] {
    flex-shrink: 0;
    margin-top: 0;
    border-top: 2px solid #0440b8;
    background-color: #f7fafc;
}

.totales-fijos table[b-blqo2zqjw6] {
    margin-bottom: 0;
}

.totales-fijos tfoot td[b-blqo2zqjw6] {
    border-top: none;
    border-bottom: none;
    padding: 8px 6px;
    font-weight: 600;
    font-size: 11px;
}

/* /Components/Pages/Factura/CFacturas.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-vvqcz935h1] {
    --montserrat-font: 'Montserrat', sans-serif;
}

.clientes-container[b-vvqcz935h1] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del formulario como card principal - CON MISMO ANCHO QUE HEADER */
.form-content[b-vvqcz935h1] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    
    /* Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    
    /* Ocupar toda la altura disponible de la pantalla */
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Secciones del formulario - DISEÑO CONSISTENTE */
.form-section[b-vvqcz935h1] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
}

.form-section:last-child[b-vvqcz935h1] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Headers de sección con línea decorativa - IGUAL QUE CLIENTES */
.section-header[b-vvqcz935h1] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-vvqcz935h1] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea azul debajo de cada título de sección */
.section-title[b-vvqcz935h1]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-vvqcz935h1] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content[b-vvqcz935h1] {
    padding: 0;
    background: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Contenedor de tabla con scroll automático - ESTE ES EL QUE DEBE HACER SCROLL */
.table-container[b-vvqcz935h1] {
    flex: 1 1 0;
    overflow-y: auto !important;
    overflow-x: auto !important;
    min-height: 200px;
    max-height: 100%;
    margin-bottom: 0;
    position: relative;
}

/* table-responsive debe permitir que el scroll del contenedor padre funcione */
.table-responsive[b-vvqcz935h1] {
    overflow: visible;
    margin-bottom: 0;
    width: 100%;
    height: auto;
    display: block;
}

/* Reducir tamaño de texto en la tabla en 35% para filas más compactas */
.table-responsive table[b-vvqcz935h1] {
    font-size: 0.65rem;
    margin-bottom: 0;
}

.table-responsive table thead th[b-vvqcz935h1] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.5rem !important;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 10;
}

.table-responsive table tbody td[b-vvqcz935h1] {
    padding: 0.4rem 0.5rem !important;
    vertical-align: middle;
}

.table-responsive table tbody td h6[b-vvqcz935h1] {
    font-size: 0.7rem;
    margin-bottom: 0.2rem !important;
    font-weight: 600;
}

.table-responsive table tbody td small[b-vvqcz935h1] {
    font-size: 0.6rem;
}

.table-responsive table tbody td .badge[b-vvqcz935h1] {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
}

.table-responsive table tbody td .btn-sm[b-vvqcz935h1] {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

.table-responsive table tbody td .btn-sm i[b-vvqcz935h1] {
    font-size: 0.65rem;
}

/* Botones de acciones más grandes */
.table-responsive table tbody td .btn-group .btn-sm[b-vvqcz935h1] {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    min-width: 32px;
    height: 32px;
}

.table-responsive table tbody td .btn-group .btn-sm i[b-vvqcz935h1] {
    font-size: 0.85rem;
}

.table-responsive table tbody td .fw-semibold[b-vvqcz935h1],
.table-responsive table tbody td .fw-bold[b-vvqcz935h1],
.table-responsive table tbody td span[b-vvqcz935h1] {
    font-size: 0.65rem;
}

/* Ajustar el contenedor principal para que se ajuste a la pantalla */
.clientes-container[b-vvqcz935h1] {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}


.table-container[b-vvqcz935h1]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-container[b-vvqcz935h1]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-container[b-vvqcz935h1]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-container[b-vvqcz935h1]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Ajustar tamaño de cards de resumen */
.card-title[b-vvqcz935h1] {
    font-size: 0.875rem;
}

.card-body h4[b-vvqcz935h1] {
    font-size: 1.25rem;
}

/* Ajustar tamaño de paginación */
.pagination-sm .page-link[b-vvqcz935h1] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Ajustar tamaño de íconos en botones de acciones */
.btn-group .btn-sm[b-vvqcz935h1] {
    padding: 0.25rem 0.5rem;
}

.btn-group .btn-sm i[b-vvqcz935h1] {
    font-size: 0.75rem;
}

/* Ajustar el div de cada celda para mejor distribución */
.table-responsive table tbody td div[b-vvqcz935h1] {
    line-height: 1.2;
}

/* Sticky header para la tabla */
.table-responsive table thead[b-vvqcz935h1] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
}

/* /Components/Pages/Factura/CrearFactura.razor.rz.scp.css */
/* ========================================
   FACTURACIÓN - DISEÑO FULLSCREEN OPTIMIZADO
   ======================================== */

.facturacion-fullscreen[b-sx0i6rdgov] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f8f9fa;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ========================================
   HEADER - COMPACTO
   ======================================== */

.facturacion-header[b-sx0i6rdgov] {
    background: white;
    border-bottom: 2px solid #e9ecef;
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    height: 60px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.header-left[b-sx0i6rdgov] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-back[b-sx0i6rdgov] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.btn-back:hover[b-sx0i6rdgov] {
    background: #e9ecef;
    transform: translateX(-2px);
}

.header-info[b-sx0i6rdgov] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.header-title[b-sx0i6rdgov] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #212529;
}

.header-subtitle[b-sx0i6rdgov] {
    font-size: 0.75rem;
    color: #6c757d;
}

.header-right[b-sx0i6rdgov] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-sx0i6rdgov] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-action i[b-sx0i6rdgov] {
    font-size: 0.9rem;
}

.btn-action.btn-secondary[b-sx0i6rdgov] {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.btn-action.btn-secondary:hover[b-sx0i6rdgov] {
    background: #e9ecef;
}

.btn-action.btn-primary[b-sx0i6rdgov] {
    background: var(--primary-color, #0440b8);
    color: white;
}

.btn-action.btn-primary:hover[b-sx0i6rdgov] {
    background: var(--primary-dark, #032e7a);
}

.btn-action:disabled[b-sx0i6rdgov] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   CONTENIDO PRINCIPAL - SOLO 2 COLUMNAS
   ======================================== */

.facturacion-content[b-sx0i6rdgov] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 0;
    overflow: hidden;
    height: calc(100vh - 60px);
}

/* Eliminar la clase three-columns ya que solo usamos 2 columnas */
.facturacion-content.three-columns[b-sx0i6rdgov] {
    grid-template-columns: 1fr 400px;
}

/* ========================================
   PANEL DE PRODUCTOS/CHECKOUT - IZQUIERDA
   ======================================== */

.productos-panel[b-sx0i6rdgov] {
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #e9ecef;
}

.search-section[b-sx0i6rdgov] {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.search-box[b-sx0i6rdgov] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i[b-sx0i6rdgov] {
    position: absolute;
    left: 0.75rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.search-input[b-sx0i6rdgov] {
    width: 100%;
    padding: 0.6rem 2.5rem 0.6rem 2.5rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.search-input:focus[b-sx0i6rdgov] {
    outline: none;
    border-color: var(--primary-color, #0440b8);
    box-shadow: 0 0 0 3px rgba(4, 64, 184, 0.1);
}

.btn-clear[b-sx0i6rdgov] {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.9rem;
}

/* ========================================
   GRID DE PRODUCTOS - COMPACTO
   ======================================== */

.productos-grid[b-sx0i6rdgov] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    align-content: start;
}

.producto-card[b-sx0i6rdgov] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.producto-card:hover[b-sx0i6rdgov] {
    border-color: var(--primary-color, #0440b8);
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15);
    transform: translateY(-2px);
}

.producto-card-header[b-sx0i6rdgov] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.producto-nombre[b-sx0i6rdgov] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
}

.producto-precio[b-sx0i6rdgov] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color, #0440b8);
    white-space: nowrap;
}

.producto-card-body[b-sx0i6rdgov] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.producto-codigo[b-sx0i6rdgov] {
    font-size: 0.7rem;
    color: #6c757d;
    background: #f8f9fa;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.producto-stock[b-sx0i6rdgov] {
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.producto-stock.disponible[b-sx0i6rdgov] {
    color: #00a86b;
}

.producto-stock.agotado[b-sx0i6rdgov] {
    color: #e53e3e;
}

.empty-state[b-sx0i6rdgov] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6c757d;
    text-align: center;
}

.empty-state i[b-sx0i6rdgov] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.empty-state p[b-sx0i6rdgov] {
    margin: 0;
    font-size: 0.9rem;
}

/* ========================================
   CHECKOUT PANEL - COMPACTO
   ======================================== */

.checkout-panel[b-sx0i6rdgov] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkout-section[b-sx0i6rdgov] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.75rem;
}

.checkout-title[b-sx0i6rdgov] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #212529;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkout-title i[b-sx0i6rdgov] {
    color: var(--primary-color, #0440b8);
    font-size: 0.85rem;
}

.checkout-title-compact[b-sx0i6rdgov] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #212529;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.checkout-title-compact i[b-sx0i6rdgov] {
    color: var(--primary-color, #0440b8);
    font-size: 0.75rem;
}

.checkout-content[b-sx0i6rdgov] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Condición de Pago */
.condicion-pago-options[b-sx0i6rdgov] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.btn-condicion[b-sx0i6rdgov] {
    padding: 0.6rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
}

.btn-condicion i[b-sx0i6rdgov] {
    font-size: 1rem;
}

.btn-condicion:hover[b-sx0i6rdgov] {
    border-color: var(--primary-color, #0440b8);
    background: rgba(4, 64, 184, 0.05);
}

.btn-condicion.active[b-sx0i6rdgov] {
    border-color: var(--primary-color, #0440b8);
    background: var(--primary-color, #0440b8);
    color: white;
}

/* Cliente y NCF en Grid */
.cliente-ncf-grid[b-sx0i6rdgov] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cliente-column[b-sx0i6rdgov],
.ncf-column[b-sx0i6rdgov] {
    display: flex;
    flex-direction: column;
}

.cliente-selector-compact[b-sx0i6rdgov] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cliente-selector-compact:hover[b-sx0i6rdgov] {
    border-color: var(--primary-color, #0440b8);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.cliente-info-checkout[b-sx0i6rdgov] {
    flex: 1;
}

.cliente-nombre-checkout[b-sx0i6rdgov] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.15rem;
}

.cliente-id-checkout[b-sx0i6rdgov] {
    font-size: 0.7rem;
    color: #6c757d;
}

.cliente-placeholder-checkout[b-sx0i6rdgov] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.8rem;
}

.btn-change-checkout[b-sx0i6rdgov] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.btn-change-checkout:hover[b-sx0i6rdgov] {
    background: #e9ecef;
}

.form-select-compact[b-sx0i6rdgov],
.form-control-compact[b-sx0i6rdgov] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.8rem;
    transition: all 0.2s;
    min-height: 50px; /* Misma altura que el selector de cliente */
}

.form-select-compact:focus[b-sx0i6rdgov],
.form-control-compact:focus[b-sx0i6rdgov] {
    outline: none;
    border-color: var(--primary-color, #0440b8);
    box-shadow: 0 0 0 2px rgba(4, 64, 184, 0.1);
}

.form-row-compact[b-sx0i6rdgov] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.form-group-compact[b-sx0i6rdgov] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.form-label-compact[b-sx0i6rdgov] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.text-muted-compact[b-sx0i6rdgov] {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.text-danger[b-sx0i6rdgov] {
    color: #e53e3e;
}

/* ========================================
   FORMAS DE PAGO PANEL - MEDIO (COMPACTO)
   ======================================== */

.formas-pago-panel[b-sx0i6rdgov] {
    display: none;
}

/* ========================================
   FORMAS DE PAGO INLINE EN CHECKOUT - NUEVO
   ======================================== */

.forma-pago-input-grid-inline[b-sx0i6rdgov] {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.8fr auto;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.forma-pago-input-grid-inline .forma-pago-select[b-sx0i6rdgov],
.forma-pago-input-grid-inline .forma-pago-referencia[b-sx0i6rdgov],
.forma-pago-input-grid-inline .forma-pago-valor[b-sx0i6rdgov] {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.75rem;
    transition: all 0.2s;
    text-align: left; /* Alinear texto a la izquierda */
}

.forma-pago-input-grid-inline .forma-pago-valor[b-sx0i6rdgov] {
    text-align: right; /* Alinear números a la derecha */
}

.forma-pago-input-grid-inline .btn-add-forma-pago-inline[b-sx0i6rdgov] {
    padding: 0.5rem 0.75rem;
    background: var(--primary-color, #0440b8);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forma-pago-input-grid-inline .btn-add-forma-pago-inline:hover[b-sx0i6rdgov] {
    background: var(--primary-dark, #032e7a);
}

/* Lista compacta de formas de pago */
.formas-pago-list-compact[b-sx0i6rdgov] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.forma-pago-item-compact[b-sx0i6rdgov] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.forma-pago-item-compact:hover[b-sx0i6rdgov] {
    border-color: #dee2e6;
    background: #f8f9fa;
}

.forma-pago-info[b-sx0i6rdgov] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.forma-pago-info i[b-sx0i6rdgov] {
    color: var(--primary-color, #0440b8);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.forma-tipo[b-sx0i6rdgov] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #212529;
    flex-shrink: 0;
}

.forma-ref[b-sx0i6rdgov] {
    font-size: 0.7rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forma-pago-actions[b-sx0i6rdgov] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.forma-valor[b-sx0i6rdgov] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color, #0440b8);
    white-space: nowrap;
}

.btn-remove-forma[b-sx0i6rdgov] {
    background: transparent;
    border: none;
    color: #e53e3e;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-forma:hover[b-sx0i6rdgov] {
    background: rgba(229, 62, 62, 0.1);
}

/* Resumen de pago inline */
.pago-resumen-inline[b-sx0i6rdgov] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pago-resumen-inline .pago-row[b-sx0i6rdgov] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #495057;
}

.pago-resumen-inline .pago-row strong[b-sx0i6rdgov] {
    font-size: 0.8rem;
    font-weight: 700;
}

.pago-resumen-inline .pago-row.cambio[b-sx0i6rdgov],
.pago-resumen-inline .pago-row.faltante[b-sx0i6rdgov] {
    padding-top: 0.3rem;
    border-top: 1px dashed #dee2e6;
}

/* ========================================
   PANEL DE FACTURA - DERECHA (MÁS COMPACTO)
   ======================================== */

.factura-panel[b-sx0i6rdgov] {
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.items-section[b-sx0i6rdgov] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-bottom: 2px solid #e9ecef;
}

.items-section-expanded[b-sx0i6rdgov] {
    flex: 1;
}

.section-title[b-sx0i6rdgov] {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
    font-weight: 700;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.section-title i[b-sx0i6rdgov] {
    color: var(--primary-color, #0440b8);
}

.items-list[b-sx0i6rdgov] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item-row[b-sx0i6rdgov] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: all 0.2s;
}

.item-row:hover[b-sx0i6rdgov] {
    border-color: #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Primera fila: solo nombre del producto y botón eliminar */
.item-nombre-row[b-sx0i6rdgov] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.item-nombre[b-sx0i6rdgov] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.2;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.btn-remove[b-sx0i6rdgov] {
    background: transparent;
    border: none;
    color: #e53e3e;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 0.8rem;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Segunda fila: código y controles */
.item-controls-row[b-sx0i6rdgov] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.item-codigo[b-sx0i6rdgov] {
    font-size: 0.7rem;
    color: #6c757d;
    flex-shrink: 0;
}

.item-controls[b-sx0i6rdgov] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.quantity-control[b-sx0i6rdgov] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-qty[b-sx0i6rdgov] {
    width: 26px;
    height: 26px;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 0.7rem;
}

.btn-qty:hover[b-sx0i6rdgov] {
    background: #f8f9fa;
    border-color: var(--primary-color, #0440b8);
    color: var(--primary-color, #0440b8);
}

.qty-input[b-sx0i6rdgov] {
    width: 50px;
    text-align: center;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.3rem 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.qty-input:focus[b-sx0i6rdgov] {
    outline: none;
    border-color: var(--primary-color, #0440b8);
}

.item-precio[b-sx0i6rdgov] {
    display: flex;
    align-items: center;
}

.price-input[b-sx0i6rdgov] {
    width: 80px;
    text-align: right;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-input:focus[b-sx0i6rdgov] {
    outline: none;
    border-color: var(--primary-color, #0440b8);
}

.item-cantidad-readonly[b-sx0i6rdgov] {
    font-size: 0.8rem;
    color: #495057;
    white-space: nowrap;
}

.item-total[b-sx0i6rdgov] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color, #0440b8);
    min-width: 70px;
    text-align: right;
}

.btn-remove[b-sx0i6rdgov] {
    background: transparent;
    border: none;
    color: #e53e3e;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 0.8rem;
}

.btn-remove:hover[b-sx0i6rdgov] {
    background: rgba(229, 62, 62, 0.1);
}

.items-empty[b-sx0i6rdgov] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    text-align: center;
    padding: 2rem;
}

.items-empty i[b-sx0i6rdgov] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.items-empty p[b-sx0i6rdgov] {
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.items-empty small[b-sx0i6rdgov] {
    font-size: 0.75rem;
}

/* ========================================
   TOTALES - COMPACTO
   ======================================== */

.totales-section[b-sx0i6rdgov] {
    flex-shrink: 0;
    padding: 1rem;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.totales-detalle[b-sx0i6rdgov] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.total-row[b-sx0i6rdgov] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #495057;
}

.total-row.discount[b-sx0i6rdgov] {
    color: #e53e3e;
}

.total-row.total-final[b-sx0i6rdgov] {
    padding-top: 0.5rem;
    border-top: 2px solid #dee2e6;
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
}

.total-value[b-sx0i6rdgov] {
    font-weight: 700;
}

.total-row.total-final .total-value[b-sx0i6rdgov] {
    font-size: 1.1rem;
    color: var(--primary-color, #0440b8);
}

.acciones-rapidas[b-sx0i6rdgov] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.btn-accion[b-sx0i6rdgov] {
    padding: 0.5rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
}

.btn-accion:hover[b-sx0i6rdgov] {
    border-color: var(--primary-color, #0440b8);
    color: var(--primary-color, #0440b8);
    background: rgba(4, 64, 184, 0.05);
}

/* ========================================
   MODAL DE CLIENTE - COMPACTO
   ======================================== */

.modal-overlay[b-sx0i6rdgov] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-container[b-sx0i6rdgov] {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.modal-header[b-sx0i6rdgov] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-sx0i6rdgov] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
}

.btn-close[b-sx0i6rdgov] {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.btn-close:hover[b-sx0i6rdgov] {
    color: #212529;
}

.modal-body[b-sx0i6rdgov] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.mb-3[b-sx0i6rdgov] {
    margin-bottom: 1rem;
}

.clientes-list[b-sx0i6rdgov] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cliente-item[b-sx0i6rdgov] {
    padding: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cliente-item:hover[b-sx0i6rdgov] {
    border-color: var(--primary-color, #0440b8);
    background: rgba(4, 64, 184, 0.05);
}

.cliente-item-info[b-sx0i6rdgov] {
    flex: 1;
}

.cliente-item-nombre[b-sx0i6rdgov] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.15rem;
}

.cliente-item-rnc[b-sx0i6rdgov] {
    font-size: 0.75rem;
    color: #6c757d;
}

.cliente-item i[b-sx0i6rdgov] {
    color: #6c757d;
    font-size: 0.85rem;
}

/* ========================================
   NC LIST - SIMILAR A CLIENTE-ITEM
   ======================================== */

.nc-list[b-sx0i6rdgov] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.nc-item[b-sx0i6rdgov] {
    padding: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nc-item:hover[b-sx0i6rdgov] {
    border-color: var(--primary-color, #0440b8);
    background: rgba(4, 64, 184, 0.05);
}

.nc-item-info[b-sx0i6rdgov] {
    flex: 1;
}

.nc-item-numero[b-sx0i6rdgov] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.15rem;
}

.nc-item-detalles[b-sx0i6rdgov] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.1rem;
}

.nc-item-factura[b-sx0i6rdgov] {
    font-size: 0.7rem;
}

.nc-item-monto[b-sx0i6rdgov] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color, #0440b8);
}

/* ========================================
   CLASES DE UTILIDAD - COLORES
   ======================================== */

.text-success[b-sx0i6rdgov] {
    color: #00a86b !important;
}

.text-warning[b-sx0i6rdgov] {
    color: #ff8c00 !important;
}

.text-danger[b-sx0i6rdgov] {
    color: #e53e3e !important;
}

.text-info[b-sx0i6rdgov] {
    color: #00bcd4 !important;
}

/* ========================================
   RESPONSIVE - MÓVIL
   ======================================== */

@media (max-width: 768px) {
    /* Fullscreen - MANTENER fixed para cubrir toda la pantalla */
    .facturacion-fullscreen[b-sx0i6rdgov] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        overflow: hidden;
        z-index: 1050;
        display: flex;
        flex-direction: column;
        background: white;
    }

    /* Header móvil - fijo en la parte superior */
    .facturacion-header[b-sx0i6rdgov] {
        position: relative;
        padding: 0.5rem 0.75rem;
        height: auto;
        min-height: 50px;
        flex-shrink: 0;
        background: white;
        z-index: 10;
    }

    .header-left[b-sx0i6rdgov] {
        gap: 0.5rem;
    }

    .btn-back[b-sx0i6rdgov] {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .header-title[b-sx0i6rdgov] {
        font-size: 0.95rem;
    }

    .header-subtitle[b-sx0i6rdgov] {
        font-size: 0.7rem;
    }

    .header-right[b-sx0i6rdgov] {
        gap: 0.35rem;
    }

    .btn-action[b-sx0i6rdgov] {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
        gap: 0.35rem;
    }

    .btn-action i[b-sx0i6rdgov] {
        font-size: 0.8rem;
    }

    /* Ocultar texto en botones móvil, solo mostrar iconos */
    .btn-action span[b-sx0i6rdgov] {
        display: none;
    }

    /* Contenido principal - ÁREA SCROLLEABLE entre header y totales fijos */
    .facturacion-content[b-sx0i6rdgov] {
        display: block;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: auto;
        background: white;
        padding-bottom: 0; /* El padding se agrega al último elemento */
    }

    /* Resetear display: contents que causaba problemas */
    .productos-panel[b-sx0i6rdgov],
    .factura-panel[b-sx0i6rdgov] {
        display: block;
    }

    /* Panel de productos móvil */
    .productos-panel[b-sx0i6rdgov] {
        min-height: auto;
        max-height: none;
        overflow: visible;
        background: white;
        border-right: none;
        border-bottom: none;
    }

    /* Search section móvil - sticky dentro del scroll */
    .search-section[b-sx0i6rdgov] {
        padding: 0.75rem;
        flex-shrink: 0;
        background: white;
        position: sticky;
        top: 0;
        z-index: 9;
        border-bottom: 1px solid #e9ecef;
    }

    .search-input[b-sx0i6rdgov] {
        padding: 0.5rem 2rem 0.5rem 2rem;
        font-size: 0.8rem;
    }

    /* Grid de productos - compacto */
    .productos-grid[b-sx0i6rdgov] {
        overflow: visible;
        padding: 0.5rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.5rem;
        min-height: auto;
        height: auto;
    }

    .producto-card[b-sx0i6rdgov] {
        padding: 0.5rem;
        gap: 0.35rem;
    }

    .producto-nombre[b-sx0i6rdgov] {
        font-size: 0.75rem;
    }

    .producto-precio[b-sx0i6rdgov] {
        font-size: 0.8rem;
    }

    .producto-codigo[b-sx0i6rdgov] {
        font-size: 0.65rem;
    }

    .producto-stock[b-sx0i6rdgov] {
        font-size: 0.65rem;
    }

    /* Checkout panel móvil - scrolleable */
    .checkout-panel[b-sx0i6rdgov] {
        overflow: visible;
        padding: 0.75rem;
        padding-bottom: 1rem; /* Reducir padding bottom */
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        background: white;
        border-top: 1px solid #e9ecef;
    }

    .checkout-section[b-sx0i6rdgov] {
        padding: 0.5rem;
        flex-shrink: 0;
        background: #f8f9fa;
        border-radius: 6px;
    }

    .checkout-title[b-sx0i6rdgov] {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    .checkout-title-compact[b-sx0i6rdgov] {
        font-size: 0.75rem;
        margin-bottom: 0.4rem;
    }

    /* Condición de pago en móvil */
    .btn-condicion[b-sx0i6rdgov] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.35rem;
    }

    .btn-condicion i[b-sx0i6rdgov] {
        font-size: 0.9rem;
    }

    /* Cliente y NCF - columna única en móvil */
    .cliente-ncf-grid[b-sx0i6rdgov] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .cliente-selector-compact[b-sx0i6rdgov] {
        padding: 0.5rem;
        min-height: 45px;
    }

    .cliente-nombre-checkout[b-sx0i6rdgov] {
        font-size: 0.8rem;
    }

    .cliente-id-checkout[b-sx0i6rdgov] {
        font-size: 0.65rem;
    }

    .cliente-placeholder-checkout[b-sx0i6rdgov] {
        font-size: 0.75rem;
    }

    .btn-change-checkout[b-sx0i6rdgov] {
        padding: 0.25rem 0.4rem;
        font-size: 0.7rem;
    }

    .form-select-compact[b-sx0i6rdgov],
    .form-control-compact[b-sx0i6rdgov] {
        padding: 0.45rem 0.6rem;
        font-size: 0.75rem;
        min-height: 45px;
    }

    .form-row-compact[b-sx0i6rdgov] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .form-label-compact[b-sx0i6rdgov] {
        font-size: 0.7rem;
    }

    .text-muted-compact[b-sx0i6rdgov] {
        font-size: 0.65rem;
    }

    /* Formas de pago inline - ajustar para móvil */
    .forma-pago-input-grid-inline[b-sx0i6rdgov] {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        margin-bottom: 0.5rem;
    }

    .forma-pago-input-grid-inline .forma-pago-select[b-sx0i6rdgov],
    .forma-pago-input-grid-inline .forma-pago-referencia[b-sx0i6rdgov],
    .forma-pago-input-grid-inline .forma-pago-valor[b-sx0i6rdgov] {
        padding: 0.45rem 0.5rem;
        font-size: 0.7rem;
    }

    .forma-pago-input-grid-inline .btn-add-forma-pago-inline[b-sx0i6rdgov] {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    /* Lista de formas de pago */
    .formas-pago-list-compact[b-sx0i6rdgov] {
        gap: 0.35rem;
        margin-bottom: 0.5rem;
    }

    .forma-pago-item-compact[b-sx0i6rdgov] {
        padding: 0.45rem 0.5rem;
        flex-wrap: wrap;
    }

    .forma-pago-info[b-sx0i6rdgov] {
        gap: 0.4rem;
    }

    .forma-tipo[b-sx0i6rdgov] {
        font-size: 0.75rem;
    }

    .forma-ref[b-sx0i6rdgov] {
        font-size: 0.65rem;
    }

    .forma-valor[b-sx0i6rdgov] {
        font-size: 0.8rem;
    }

    .btn-remove-forma[b-sx0i6rdgov] {
        font-size: 0.7rem;
        padding: 0.2rem 0.35rem;
    }

    /* Resumen de pago inline */
    .pago-resumen-inline[b-sx0i6rdgov] {
        padding: 0.45rem 0.5rem;
        gap: 0.25rem;
    }

    .pago-resumen-inline .pago-row[b-sx0i6rdgov] {
        font-size: 0.7rem;
    }

    .pago-resumen-inline .pago-row strong[b-sx0i6rdgov] {
        font-size: 0.75rem;
    }

    /* Panel de factura - visible con los items */
    .factura-panel[b-sx0i6rdgov] {
        display: flex !important;
        flex-direction: column;
        background: white;
        border-top: 2px solid #e9ecef;
        overflow: visible;
        margin-top: 0; /* Sin margen adicional */
    }

    /* Panel de items - ajustado */
    .items-section[b-sx0i6rdgov] {
        display: flex;
        flex-direction: column;
        overflow: visible;
        background: white;
        border-bottom: none;
        margin-top: 0; /* Sin margen adicional */
    }

    .section-title[b-sx0i6rdgov] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        flex-shrink: 0;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        margin: 0; /* Sin margen */
    }

    .items-list[b-sx0i6rdgov] {
        overflow: visible;
        padding: 0.75rem;
        padding-bottom: 200px; /* Espacio adicional para los totales fijos */
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        height: auto;
        min-height: 150px; /* Reducir altura mínima */
        background: white;
    }

    .item-row[b-sx0i6rdgov] {
        padding: 0.5rem;
        gap: 0.35rem;
        flex-shrink: 0;
    }

    .item-nombre[b-sx0i6rdgov] {
        font-size: 0.75rem;
    }

    .item-codigo[b-sx0i6rdgov] {
        font-size: 0.65rem;
    }

    .item-controls[b-sx0i6rdgov] {
        gap: 0.35rem;
        flex-wrap: wrap;
    }

    .quantity-control[b-sx0i6rdgov] {
        gap: 0.2rem;
    }

    .btn-qty[b-sx0i6rdgov] {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }

    .qty-input[b-sx0i6rdgov] {
        width: 40px;
        padding: 0.2rem 0.15rem;
        font-size: 0.7rem;
    }

    .price-input[b-sx0i6rdgov] {
        width: 65px;
        padding: 0.2rem 0.35rem;
        font-size: 0.7rem;
    }

    .item-total[b-sx0i6rdgov] {
        font-size: 0.75rem;
        min-width: 55px;
    }

    .btn-remove[b-sx0i6rdgov] {
        padding: 0.15rem 0.3rem;
        font-size: 0.7rem;
    }

    /* Totales - FIJOS EN EL FONDO */
    .totales-section[b-sx0i6rdgov] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.75rem;
        gap: 0.5rem;
        flex-shrink: 0;
        background: white;
        border-top: 2px solid #e9ecef;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
        z-index: 100;
    }

    .totales-detalle[b-sx0i6rdgov] {
        gap: 0.3rem;
    }

    .total-row[b-sx0i6rdgov] {
        font-size: 0.75rem;
    }

    .total-row.total-final[b-sx0i6rdgov] {
        padding-top: 0.4rem;
        font-size: 0.85rem;
    }

    .total-row.total-final .total-value[b-sx0i6rdgov] {
        font-size: 1rem;
    }

    .acciones-rapidas[b-sx0i6rdgov] {
        gap: 0.4rem;
        margin-top: 0.25rem;
    }

    .btn-accion[b-sx0i6rdgov] {
        padding: 0.4rem;
        font-size: 0.7rem;
        gap: 0.3rem;
    }

    /* Modal en móvil */
    .modal-overlay[b-sx0i6rdgov] {
        padding: 0.5rem;
        position: fixed;
        z-index: 2000;
    }

    .modal-container[b-sx0i6rdgov] {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 8px;
    }

    .modal-header[b-sx0i6rdgov] {
        padding: 0.75rem 1rem;
    }

    .modal-header h2[b-sx0i6rdgov] {
        font-size: 1rem;
    }

    .modal-body[b-sx0i6rdgov] {
        padding: 0.75rem 1rem;
        overflow-y: auto;
    }

    .cliente-item[b-sx0i6rdgov] {
        padding: 0.6rem;
    }

    .cliente-item-nombre[b-sx0i6rdgov] {
        font-size: 0.85rem;
    }

    .cliente-item-rnc[b-sx0i6rdgov] {
        font-size: 0.7rem;
    }

    /* Empty states móvil */
    .empty-state[b-sx0i6rdgov] {
        padding: 1.5rem;
    }

    .empty-state i[b-sx0i6rdgov] {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .empty-state p[b-sx0i6rdgov] {
        font-size: 0.85rem;
    }

    .items-empty[b-sx0i6rdgov] {
        padding: 1.5rem;
        padding-bottom: 200px; /* Espacio para los totales fijos */
    }

    .items-empty i[b-sx0i6rdgov] {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .items-empty p[b-sx0i6rdgov] {
        font-size: 0.85rem;
    }

    .items-empty small[b-sx0i6rdgov] {
        font-size: 0.7rem;
    }
}

/* Tablets y pantallas medianas */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Ajustar ancho del panel derecho */
    .facturacion-content[b-sx0i6rdgov] {
        grid-template-columns: 1fr 350px;
    }

    /* Reducir ligeramente el grid de productos */
    .productos-grid[b-sx0i6rdgov] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.6rem;
    }

    /* Ajustar checkout panel */
    .checkout-panel[b-sx0i6rdgov] {
        padding: 0.85rem;
    }

    /* Ajustar formas de pago para tablets */
    .forma-pago-input-grid-inline[b-sx0i6rdgov] {
        grid-template-columns: 1fr 0.8fr 0.7fr auto;
        gap: 0.35rem;
    }
}
/* /Components/Pages/Index.razor.rz.scp.css */
.erp-dashboard-container[b-zshezdye11] {
    padding: 0;
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Header del Dashboard ERP */
.erp-header[b-zshezdye11] {
    background: linear-gradient(135deg, 
        rgba(34, 106, 148, 0.1) 0%, 
        rgba(34, 106, 148, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(34, 106, 148, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}

.header-main[b-zshezdye11] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.erp-title[b-zshezdye11] {
    font-size: 1.5rem;  /* REDUCIDO: de 2.25rem a 1.5rem */
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    display: flex;
    align-items: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.erp-subtitle[b-zshezdye11] {
    font-size: 1.1rem;
    color: var(--secondary-color);
    margin: 0.5rem 0 0 0;
    font-weight: 500;
}

.header-metrics[b-zshezdye11] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.metric-item[b-zshezdye11] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.metric-icon[b-zshezdye11] {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.metric-icon.status-online[b-zshezdye11] {
    background: linear-gradient(135deg, #198754 0%, #157347 100%);
}

.metric-info[b-zshezdye11] {
    display: flex;
    flex-direction: column;
}

.metric-label[b-zshezdye11] {
    font-size: 0.8rem;
    color: var(--secondary-color);
    font-weight: 500;
}

.metric-value[b-zshezdye11] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-color);
}

.metric-value.status-ok[b-zshezdye11] {
    color: #198754;
}

/* GRID PRINCIPAL DE KPIs - 6 COLUMNAS PARA M�XIMO APROVECHAMIENTO */
.kpis-main-grid[b-zshezdye11] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Tarjetas de KPI */
.kpi-card[b-zshezdye11] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.kpi-card[b-zshezdye11]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-color) 50%, transparent 100%);
}

.kpi-card.ventas[b-zshezdye11]::before {
    background: linear-gradient(90deg, #198754 0%, #20c997 100%);
}

.kpi-card.compras[b-zshezdye11]::before {
    background: linear-gradient(90deg, #fd7e14 0%, #ff922b 100%);
}

.kpi-card.inventario[b-zshezdye11]::before {
    background: linear-gradient(90deg, #6610f2 0%, #7950f2 100%);
}

.kpi-card.cxc[b-zshezdye11]::before {
    background: linear-gradient(90deg, #dc3545 0%, #e55563 100%);
}

.kpi-card.cxp[b-zshezdye11]::before {
    background: linear-gradient(90deg, #ffc107 0%, #ffcd39 100%);
}

.kpi-card.flujo[b-zshezdye11]::before {
    background: linear-gradient(90deg, #0dcaf0 0%, #31d2f2 100%);
}

.kpi-card:hover[b-zshezdye11] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.kpi-header[b-zshezdye11] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.kpi-icon[b-zshezdye11] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
}

.kpi-card.ventas .kpi-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
}

.kpi-card.compras .kpi-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #fd7e14 0%, #ff922b 100%);
}

.kpi-card.inventario .kpi-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #6610f2 0%, #7950f2 100%);
}

.kpi-card.cxc .kpi-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #dc3545 0%, #e55563 100%);
}

.kpi-card.cxp .kpi-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #ffc107 0%, #ffcd39 100%);
}

.kpi-card.flujo .kpi-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #0dcaf0 0%, #31d2f2 100%);
}

.kpi-trend[b-zshezdye11] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.kpi-trend.up[b-zshezdye11] {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.kpi-trend.down[b-zshezdye11] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.kpi-trend.neutral[b-zshezdye11] {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.kpi-trend.warning[b-zshezdye11] {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.kpi-title[b-zshezdye11] {
    font-size: 0.85rem;  /* REDUCIDO: de 0.9rem a 0.85rem */
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value[b-zshezdye11] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 0.25rem;
}

.kpi-subtitle[b-zshezdye11] {
    font-size: 0.8rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.kpi-progress[b-zshezdye11] {
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.kpi-progress .progress-bar[b-zshezdye11] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 3px;
    transition: width 1.5s ease;
    animation: progressGlow 3s ease-in-out infinite;
}

/* GRID DE CONTENIDO SECUNDARIO */
.erp-content-grid[b-zshezdye11] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Paneles Generales */
.alert-panel[b-zshezdye11], .quick-actions-panel[b-zshezdye11], .activity-panel[b-zshezdye11] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.activity-panel.full-width[b-zshezdye11] {
    grid-column: 1 / -1;
}

.panel-header[b-zshezdye11] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: rgba(34, 106, 148, 0.05);
    border-bottom: 1px solid rgba(34, 106, 148, 0.1);
}

.panel-title[b-zshezdye11] {
    margin: 0;
    font-size: 1rem;  /* REDUCIDO: de 1.1rem a 1rem */
    font-weight: 600;
    color: var(--primary-color);
    display: flex;
    align-items: center;
}

.alert-count[b-zshezdye11] {
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.panel-content[b-zshezdye11] {
    padding: 1.25rem;
}

/* ALERTAS */
.alert-list[b-zshezdye11] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert-item[b-zshezdye11] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius);
    border-left: 4px solid;
    transition: var(--transition-fast);
}

.alert-item.critical[b-zshezdye11] {
    background: rgba(220, 53, 69, 0.05);
    border-left-color: #dc3545;
}

.alert-item.warning[b-zshezdye11] {
    background: rgba(255, 193, 7, 0.05);
    border-left-color: #ffc107;
}

.alert-item.info[b-zshezdye11] {
    background: rgba(13, 202, 240, 0.05);
    border-left-color: #0dcaf0;
}

.alert-item.success[b-zshezdye11] {
    background: rgba(25, 135, 84, 0.05);
    border-left-color: #198754;
}

.alert-item:hover[b-zshezdye11] {
    transform: translateX(2px);
    box-shadow: var(--shadow-sm);
}

.alert-icon[b-zshezdye11] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.alert-item.critical .alert-icon[b-zshezdye11] {
    background: #dc3545;
}

.alert-item.warning .alert-icon[b-zshezdye11] {
    background: #ffc107;
    color: #000;
}

.alert-item.info .alert-icon[b-zshezdye11] {
    background: #0dcaf0;
}

.alert-item.success .alert-icon[b-zshezdye11] {
    background: #198754;
}

.alert-content h4[b-zshezdye11] {
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-color);
}

.alert-content p[b-zshezdye11] {
    margin: 0 0 0.25rem 0;
    font-size: 0.85rem;
    color: var(--secondary-color);
}

.alert-time[b-zshezdye11] {
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 500;
}

/* ACCIONES R�PIDAS */
.quick-actions-grid[b-zshezdye11] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.quick-action[b-zshezdye11] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(34, 106, 148, 0.03);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
    border: 2px solid transparent;
}

.quick-action:hover[b-zshezdye11] {
    background: rgba(34, 106, 148, 0.08);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
}

.quick-action .action-icon[b-zshezdye11] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.quick-action.ventas .action-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
}

.quick-action.clientes .action-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #0dcaf0 0%, #31d2f2 100%);
}

.quick-action.inventario .action-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #6610f2 0%, #7950f2 100%);
}

.quick-action.compras .action-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #fd7e14 0%, #ff922b 100%);
}

.quick-action.cxc .action-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #dc3545 0%, #e55563 100%);
}

.quick-action.cxp .action-icon[b-zshezdye11] {
    background: linear-gradient(135deg, #ffc107 0%, #ffcd39 100%);
}

.quick-action.reportes .action-icon[b-zshezdye11] {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.action-text[b-zshezdye11] {
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    color: var(--dark-color);
}

/* ACTIVIDAD RECIENTE */
.panel-controls[b-zshezdye11] {
    display: flex;
    gap: 0.5rem;
}

.refresh-btn[b-zshezdye11] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.refresh-btn:hover[b-zshezdye11] {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.activity-timeline[b-zshezdye11] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.activity-item[b-zshezdye11] {
    display: grid;
    grid-template-columns: 60px 50px 1fr;
    gap: 1rem;
    align-items: start;
    position: relative;
}

.activity-item:not(:last-child)[b-zshezdye11]::after {
    content: '';
    position: absolute;
    left: 84px;
    top: 50px;
    width: 2px;
    height: calc(100% + 1.25rem);
    background: linear-gradient(180deg, var(--primary-color) 0%, transparent 100%);
}

.activity-time[b-zshezdye11] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary-color);
    padding: 0.25rem 0.5rem;
    background: rgba(34, 106, 148, 0.1);
    border-radius: var(--border-radius);
    text-align: center;
}

.activity-icon[b-zshezdye11] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.activity-icon.ventas[b-zshezdye11] {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
}

.activity-icon.cxc[b-zshezdye11] {
    background: linear-gradient(135deg, #dc3545 0%, #e55563 100%);
}

.activity-icon.inventario[b-zshezdye11] {
    background: linear-gradient(135deg, #6610f2 0%, #7950f2 100%);
}

.activity-icon.compras[b-zshezdye11] {
    background: linear-gradient(135deg, #fd7e14 0%, #ff922b 100%);
}

.activity-icon.clientes[b-zshezdye11] {
    background: linear-gradient(135deg, #0dcaf0 0%, #31d2f2 100%);
}

.activity-content h4[b-zshezdye11] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-color);
}

.activity-content p[b-zshezdye11] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--secondary-color);
}

/* RESPONSIVE DESIGN */
@media (max-width: 1200px) {
    .kpis-main-grid[b-zshezdye11] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .quick-actions-grid[b-zshezdye11] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Subscription Usage Styles */
.subscription-usage[b-zshezdye11] {
    padding: 0.5rem;
}

.usage-item[b-zshezdye11] {
    margin-bottom: 1.5rem;
}

.usage-item:last-child[b-zshezdye11] {
    margin-bottom: 0;
}

.usage-header[b-zshezdye11] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.usage-label[b-zshezdye11] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-color);
}

.usage-count[b-zshezdye11] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
}

.usage-bar[b-zshezdye11] {
    height: 10px;
    background: rgba(34, 106, 148, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.usage-progress[b-zshezdye11] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.usage-progress.warning[b-zshezdye11] {
    background: linear-gradient(90deg, #ffc107 0%, #ff922b 100%);
}

@media (max-width: 768px) {
    .erp-header[b-zshezdye11] {
        padding: 1rem;
    }
    
    .header-main[b-zshezdye11] {
        flex-direction: column;
        text-align: center;
    }
    
    .erp-title[b-zshezdye11] {
        font-size: 1.75rem;
    }
    
    .header-metrics[b-zshezdye11] {
        justify-content: center;
    }
    
    .kpis-main-grid[b-zshezdye11] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .erp-content-grid[b-zshezdye11] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .quick-actions-grid[b-zshezdye11] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .activity-item[b-zshezdye11] {
        grid-template-columns: 50px 40px 1fr;
        gap: 0.75rem;
    }
    
    .activity-item[b-zshezdye11]::after {
        left: 70px;
    }
}

@media (max-width: 480px) {
    .kpis-main-grid[b-zshezdye11] {
        grid-template-columns: 1fr;
    }
    
    .quick-actions-grid[b-zshezdye11] {
        grid-template-columns: 1fr;
    }
}

/* /Components/Pages/Login/Login.razor.rz.scp.css */
/* Login Full Screen Container - ACTUALIZADO AL NUEVO ESQUEMA DE COLORES */
.login-container[b-ob5nop6889] {
    position: fixed; /* CAMBIADO: de flex a fixed para ocupar toda la pantalla */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw; /* AÑADIDO: Ancho completo de la ventana */
    height: 100vh; /* AÑADIDO: Altura completa de la ventana */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* MANTENER: prevenir scroll */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 50%, #021e4d 100%); /* ✅ ACTUALIZADO: nuevo esquema azul vibrante */
    margin: 0; /* AÑADIDO: Sin margen */
    padding: 0; /* AÑADIDO: Sin padding */
    box-sizing: border-box; /* AÑADIDO: Box sizing consistente */
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.login-background[b-ob5nop6889] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

.login-particles[b-ob5nop6889] {
    position: absolute;
    width: 100%;
    height: 100%;
}

.particle[b-ob5nop6889] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: float-b-ob5nop6889 var(--duration, 3s) ease-in-out infinite var(--delay, 0s);
}

.particle-0[b-ob5nop6889], .particle-2[b-ob5nop6889], .particle-4[b-ob5nop6889], .particle-6[b-ob5nop6889], .particle-8[b-ob5nop6889], .particle-10[b-ob5nop6889], .particle-12[b-ob5nop6889], .particle-14[b-ob5nop6889], .particle-16[b-ob5nop6889], .particle-18[b-ob5nop6889] {
    left: 10%;
    top: 20%;
}

.particle-1[b-ob5nop6889], .particle-3[b-ob5nop6889], .particle-5[b-ob5nop6889], .particle-7[b-ob5nop6889], .particle-9[b-ob5nop6889], .particle-11[b-ob5nop6889], .particle-13[b-ob5nop6889], .particle-15[b-ob5nop6889], .particle-17[b-ob5nop6889], .particle-19[b-ob5nop6889] {
    right: 15%;
    bottom: 25%;
}

@keyframes float-b-ob5nop6889 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

.login-card[b-ob5nop6889] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 3rem;
    width: 100%;
    max-width: 420px;
    margin: 2rem;
    box-shadow: 
        0 20px 40px rgba(4, 64, 184, 0.15), /* ✅ ACTUALIZADO: sombra azul vibrante */
        0 0 0 1px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
    font-family: 'Montserrat', sans-serif !important; /* ✅ CAMBIADO: de Poppins a Montserrat */
}

.login-header[b-ob5nop6889] {
    text-align: center;
    margin-bottom: 2.5rem;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.login-logo[b-ob5nop6889] {
    width: 240px; /* INCREMENTADO: más ancho para formato rectangular */
    height: 120px; /* REDUCIDO: menos alto para formato rectangular (proporción 2:1) */
    background: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.25rem auto; /* CENTRALIZADO: margin auto para centrar horizontal y bottom reducido */
    box-shadow: none;
    border: none;
}

.login-logo-img[b-ob5nop6889] {
    width: 240px; /* AJUSTADO: ancho para imagen rectangular */
    height: auto; /* AUTOMÁTICO: mantiene proporciones de la imagen rectangular */
    transition: var(--transition-fast);
    display: block;
    max-width: 100%;
    object-fit: contain; /* CONTIENE: respeta las proporciones rectangulares */
}

/* ✅ AÑADIDO: Filtro para asegurar que el logo se vea negro */
.login-logo-black[b-ob5nop6889] {
    filter: brightness(0) saturate(100%); /* Convierte cualquier color a negro puro */
    opacity: 0.8; /* Ligera transparencia para suavizar */
}

/* ✅ HOVER: Efecto sutil al pasar el mouse */
.login-logo:hover .login-logo-black[b-ob5nop6889] {
    opacity: 1; /* Completamente visible al hacer hover */
    transform: scale(1.02); /* Ligero zoom */
    transition: all 0.3s ease;
}

.login-title[b-ob5nop6889] {
    margin-bottom: 0.5rem; /* REDUCIDO: para acercar al subtítulo */
    text-align: center;
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    font-weight: 600;
    font-size: 1.25rem;  /* REDUCIDO: de 1.75rem a 1.25rem */
    font-family: 'Montserrat', sans-serif !important; /* ✅ CAMBIADO: de Poppins a Montserrat */
}

.login-subtitle[b-ob5nop6889] {
    margin-bottom: 1.5rem; /* REDUCIDO: para acercar al formulario */
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.login-form[b-ob5nop6889] {
    margin-bottom: 1.5rem;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.form-group[b-ob5nop6889] {
    margin-bottom: 1.5rem;
}

.form-label[b-ob5nop6889] {
    font-family: 'Montserrat', sans-serif !important; /* ✅ CAMBIADO: de Poppins a Montserrat */
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.form-label i[b-ob5nop6889] {
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    width: 16px;
}

.input-wrapper[b-ob5nop6889] {
    position: relative;
}

.modern-input[b-ob5nop6889] {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif !important; /* ✅ CAMBIADO: de Poppins a Montserrat */
    font-weight: 500;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.modern-input:focus[b-ob5nop6889] {
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    box-shadow: 0 0 0 0.2rem rgba(4, 64, 184, 0.25); /* ✅ ACTUALIZADO: sombra azul vibrante */
    outline: none;
    background: white;
    transform: translateY(-2px);
}

.modern-input[b-ob5nop6889]::placeholder {
    color: #adb5bd;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.input-border[b-ob5nop6889] {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ✅ ACTUALIZADO: nuevo gradiente azul vibrante */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.modern-input:focus + .input-border[b-ob5nop6889] {
    width: 100%;
}

.validation-message[b-ob5nop6889] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.validation-message[b-ob5nop6889]::before {
    content: '⚠';
    margin-right: 0.5rem;
}

.modern-alert[b-ob5nop6889] {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
    border: none;
    border-left: 4px solid #dc3545;
    border-radius: 8px;
    padding: 1rem;
    color: #dc3545;
    font-weight: 500;
    margin-bottom: 1.5rem;
    animation: shake-b-ob5nop6889 0.5s ease-in-out;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

@keyframes shake-b-ob5nop6889 {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Botón de login con estados manejados por Blazor - ACTUALIZADO */
.login-btn[b-ob5nop6889] {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif !important; /* ✅ CAMBIADO: de Poppins a Montserrat */
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ✅ ACTUALIZADO: nuevo gradiente azul vibrante */
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-btn[b-ob5nop6889]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.login-btn:not(:disabled):not(.loading):hover[b-ob5nop6889]::before {
    left: 100%;
}

.login-btn:not(:disabled):not(.loading):hover[b-ob5nop6889] {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(4, 64, 184, 0.4); /* ✅ ACTUALIZADO: sombra azul vibrante */
}

.login-btn:not(:disabled):not(.loading):active[b-ob5nop6889] {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(4, 64, 184, 0.3); /* ✅ ACTUALIZADO: sombra azul vibrante */
}

/* Estado de carga manejado por Blazor */
.login-btn:disabled[b-ob5nop6889],
.login-btn.loading[b-ob5nop6889] {
    opacity: 1 !important;
    cursor: not-allowed !important;
    transform: none !important;
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    animation: loadingPulse-b-ob5nop6889 2s ease-in-out infinite;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

@keyframes loadingPulse-b-ob5nop6889 {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(108, 117, 125, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 12px 30px rgba(108, 117, 125, 0.5);
        transform: scale(1.02);
    }
}

/* Contenido del botón */
.btn-content[b-ob5nop6889] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.btn-loading[b-ob5nop6889] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.btn-loading i[b-ob5nop6889] {
    font-size: 1.1rem;
    animation: spin-b-ob5nop6889 1s linear infinite;
    color: white;
}

.btn-loading span[b-ob5nop6889] {
    font-weight: 600;
    letter-spacing: 0.5px;
    color: white;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

@keyframes spin-b-ob5nop6889 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Inputs deshabilitados manejados por Blazor */
.modern-input:disabled[b-ob5nop6889] {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #e9ecef !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.modern-input:disabled[b-ob5nop6889]::placeholder {
    color: #adb5bd !important;
    opacity: 0.7 !important;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.login-footer[b-ob5nop6889] {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(4, 64, 184, 0.1); /* ✅ ACTUALIZADO: borde azul vibrante */
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.footer-text[b-ob5nop6889] {
    color: #0440b8; /* ✅ ACTUALIZADO: texto azul vibrante */
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.footer-text i[b-ob5nop6889] {
    color: #032e7a; /* ✅ ACTUALIZADO: icono azul oscuro */
    margin-right: 0.5rem;
}

/* Mobile responsiveness */
@media (max-width: 767px) {
    .login-container[b-ob5nop6889] {
        /* MANTENER: position fixed para pantalla completa en móvil también */
        padding: 1rem; /* AÑADIDO: Padding mínimo para separar del borde */
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }
    
    .login-card[b-ob5nop6889] {
        padding: 2rem 1.5rem;
        margin: 0; /* CORREGIDO: Sin margen en móvil para maximizar espacio */
        border-radius: 16px;
        max-width: 100%; /* AÑADIDO: Usar todo el ancho disponible */
        width: 100%; /* AÑADIDO: Ancho completo en móvil */
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }

    .login-logo[b-ob5nop6889] {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

    .login-logo i[b-ob5nop6889] {
        font-size: 1.5rem;
    }

    .login-title[b-ob5nop6889] {
        font-size: 1.75rem;
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }

    .modern-input[b-ob5nop6889] {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }

    .login-btn[b-ob5nop6889] {
        padding: 0.875rem;
        font-size: 1rem;
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 480px) {
    .login-container[b-ob5nop6889] {
        padding: 0.5rem; /* REDUCIDO: Padding mínimo */
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }
    
    .login-card[b-ob5nop6889] {
        padding: 1.5rem 1rem; /* REDUCIDO: Padding más compacto */
        border-radius: 12px; /* REDUCIDO: Border radius más pequeño */
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }

    .login-logo[b-ob5nop6889] {
        width: 50px;
        height: 25px;
        margin-bottom:0rem;
    }

    .login-logo i[b-ob5nop6889] {
        font-size: 1.25rem;
    }

    .login-title[b-ob5nop6889] {
        font-size: 1.5rem;
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }

    .login-subtitle[b-ob5nop6889] {
        font-size: 0.9rem;
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }

    .form-group[b-ob5nop6889] {
        margin-bottom: 1.25rem; /* REDUCIDO: Menos espacio entre campos */
    }

    .modern-input[b-ob5nop6889] {
        padding: 0.75rem 0.875rem;
        font-size: 0.85rem;
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }

    .login-btn[b-ob5nop6889] {
        padding: 0.75rem;
        font-size: 0.95rem;
        font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
    }
}

@keyframes logoAnimation-b-ob5nop6889 {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(4, 64, 184, 0.3); /* ✅ ACTUALIZADO: sombra azul vibrante */
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(4, 64, 184, 0.4); /* ✅ ACTUALIZADO: sombra azul vibrante */
    }
}

/* Override de estilos globales que podrían interferir */
html[b-ob5nop6889], body[b-ob5nop6889] {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

/* Asegurar que no haya márgenes o padding que interfieran */
.login-container *[b-ob5nop6889] {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat en todos los elementos */
}

.modern-input:disabled[b-ob5nop6889] {
    background-color: #f8f9fa;
    color: #6c757d;
    border-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.8;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

.modern-input:disabled[b-ob5nop6889]::placeholder {
    color: #adb5bd;
    opacity: 0.7;
    font-family: 'Montserrat', sans-serif !important; /* ✅ AGREGADO: Forzar Montserrat */
}

/* ✅ AÑADIDOS: Efectos adicionales para mejor integración */
.fade-in-up[b-ob5nop6889] {
    animation: fadeInUp-b-ob5nop6889 0.6s ease-out forwards;
}

@keyframes fadeInUp-b-ob5nop6889 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ✅ REGLA GLOBAL FINAL: Asegurar Montserrat en TODOS los elementos del login */
.login-container[b-ob5nop6889],
.login-container *[b-ob5nop6889],
.login-card[b-ob5nop6889],
.login-card *[b-ob5nop6889],
.login-form[b-ob5nop6889],
.login-form *[b-ob5nop6889],
input[b-ob5nop6889],
button[b-ob5nop6889],
label[b-ob5nop6889],
span[b-ob5nop6889],
div[b-ob5nop6889],
p[b-ob5nop6889],
h1[b-ob5nop6889],
h2[b-ob5nop6889],
h3[b-ob5nop6889],
h4[b-ob5nop6889],
h5[b-ob5nop6889],
h6[b-ob5nop6889] {
    font-family: 'Montserrat', sans-serif !important;
}
/* /Components/Pages/NCClientes/CNotasCredito.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-79m3dkth20] {
    --montserrat-font: 'Montserrat', sans-serif;
}

.clientes-container[b-79m3dkth20] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del formulario como card principal - CON MISMO ANCHO QUE HEADER */
.form-content[b-79m3dkth20] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    
    /* Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    
    /* Ocupar toda la altura disponible de la pantalla */
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Secciones del formulario - DISEÑO CONSISTENTE */
.form-section[b-79m3dkth20] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
}

.form-section:last-child[b-79m3dkth20] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Headers de sección con línea decorativa - IGUAL QUE CLIENTES */
.section-header[b-79m3dkth20] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-79m3dkth20] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea azul debajo de cada título de sección */
.section-title[b-79m3dkth20]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-79m3dkth20] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content[b-79m3dkth20] {
    padding: 0;
    background: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Contenedor de tabla con scroll automático - ESTE ES EL QUE DEBE HACER SCROLL */
.table-container[b-79m3dkth20] {
    flex: 1 1 0;
    overflow-y: auto !important;
    overflow-x: auto !important;
    min-height: 200px;
    max-height: 100%;
    margin-bottom: 0;
    position: relative;
}

/* table-responsive debe permitir que el scroll del contenedor padre funcione */
.table-responsive[b-79m3dkth20] {
    overflow: visible;
    margin-bottom: 0;
    width: 100%;
    height: auto;
    display: block;
}

/* Reducir tamaño de texto en la tabla en 35% para filas más compactas */
.table-responsive table[b-79m3dkth20] {
    font-size: 0.65rem;
    margin-bottom: 0;
}

.table-responsive table thead th[b-79m3dkth20] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.5rem !important;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 10;
}

.table-responsive table tbody td[b-79m3dkth20] {
    padding: 0.4rem 0.5rem !important;
    vertical-align: middle;
}

.table-responsive table tbody td h6[b-79m3dkth20] {
    font-size: 0.7rem;
    margin-bottom: 0.2rem !important;
    font-weight: 600;
}

.table-responsive table tbody td small[b-79m3dkth20] {
    font-size: 0.6rem;
}

.table-responsive table tbody td .badge[b-79m3dkth20] {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
}

.table-responsive table tbody td .btn-sm[b-79m3dkth20] {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

.table-responsive table tbody td .btn-sm i[b-79m3dkth20] {
    font-size: 0.65rem;
}

/* Botones de acciones más grandes */
.table-responsive table tbody td .btn-group .btn-sm[b-79m3dkth20] {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    min-width: 32px;
    height: 32px;
}

.table-responsive table tbody td .btn-group .btn-sm i[b-79m3dkth20] {
    font-size: 0.85rem;
}

.table-responsive table tbody td .fw-semibold[b-79m3dkth20],
.table-responsive table tbody td .fw-bold[b-79m3dkth20],
.table-responsive table tbody td span[b-79m3dkth20] {
    font-size: 0.65rem;
}

/* Ajustar el contenedor principal para que se ajuste a la pantalla */
.clientes-container[b-79m3dkth20] {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.table-container[b-79m3dkth20]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-container[b-79m3dkth20]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-container[b-79m3dkth20]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-container[b-79m3dkth20]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Ajustar tamaño de cards de resumen */
.card-title[b-79m3dkth20] {
    font-size: 0.875rem;
}

.card-body h4[b-79m3dkth20] {
    font-size: 1.25rem;
}

/* Ajustar tamaño de paginación */
.pagination-sm .page-link[b-79m3dkth20] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Ajustar tamaño de íconos en botones de acciones */
.btn-group .btn-sm[b-79m3dkth20] {
    padding: 0.25rem 0.5rem;
}

.btn-group .btn-sm i[b-79m3dkth20] {
    font-size: 0.75rem;
}

/* Ajustar el div de cada celda para mejor distribución */
.table-responsive table tbody td div[b-79m3dkth20] {
    line-height: 1.2;
}

/* Sticky header para la tabla */
.table-responsive table thead[b-79m3dkth20] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
}

/* Badges específicos para NC */
.badge.bg-danger[b-79m3dkth20] {
    background-color: #e53e3e !important;
}

.badge.bg-success[b-79m3dkth20] {
    background-color: #00a86b !important;
}

.badge.bg-warning[b-79m3dkth20] {
    background-color: #ff8c00 !important;
    color: white !important;
}

.badge.bg-secondary[b-79m3dkth20] {
    background-color: #6c757d !important;
}

/* Cards de resumen con colores específicos */
.card.border-danger[b-79m3dkth20] {
    border-color: #e53e3e !important;
}

.card.border-success[b-79m3dkth20] {
    border-color: #00a86b !important;
}

.card.border-warning[b-79m3dkth20] {
    border-color: #ff8c00 !important;
}

.card.border-info[b-79m3dkth20] {
    border-color: #00bcd4 !important;
}

/* Texto con colores específicos */
.text-danger[b-79m3dkth20] {
    color: #e53e3e !important;
}

.text-success[b-79m3dkth20] {
    color: #00a86b !important;
}

.text-warning[b-79m3dkth20] {
    color: #ff8c00 !important;
}

.text-info[b-79m3dkth20] {
    color: #00bcd4 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .form-content[b-79m3dkth20] {
        height: auto;
        max-height: none;
    }
    
    .table-container[b-79m3dkth20] {
        max-height: 60vh;
    }
    
    .btn-group[b-79m3dkth20] {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .btn-group .btn[b-79m3dkth20] {
        width: 100%;
    }
}

/* /Components/Pages/NCClientes/CrearNotaCredito.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-zcvbk9eveg] {
    --montserrat-font: 'Montserrat', sans-serif;
}

/* Contenedor principal de productos */
.productos-container[b-zcvbk9eveg] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del formulario como card principal */
.form-content[b-zcvbk9eveg] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
}

/* Contenido con header fijo - ajuste de padding para compensar altura del header */
.form-content.with-fixed-header[b-zcvbk9eveg] {
    margin-top: 0;
}

/* Secciones del formulario */
.form-section[b-zcvbk9eveg] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-zcvbk9eveg] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de sección con línea decorativa */
.section-header[b-zcvbk9eveg] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-zcvbk9eveg] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea azul debajo de cada título de sección */
.section-title[b-zcvbk9eveg]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-zcvbk9eveg] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content[b-zcvbk9eveg] {
    padding: 0;
    background: none;
}

/* Tablas responsivas */
.table-responsive[b-zcvbk9eveg] {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.table-responsive table[b-zcvbk9eveg] {
    font-size: 0.85rem;
}

.table thead th[b-zcvbk9eveg] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem;
    white-space: nowrap;
}

.table tbody td[b-zcvbk9eveg] {
    padding: 0.5rem;
    vertical-align: middle;
}

/* Alertas de información */
.alert-success[b-zcvbk9eveg] {
    background-color: rgba(0, 168, 107, 0.1);
    border-color: #00a86b;
    color: #006d45;
}

.alert-info[b-zcvbk9eveg] {
    background-color: rgba(0, 188, 212, 0.1);
    border-color: #00bcd4;
    color: #0097a7;
}

/* Botones pequeños en tablas */
.btn-sm[b-zcvbk9eveg] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* Input groups */
.input-group-sm .form-control[b-zcvbk9eveg] {
    font-size: 0.8rem;
}

/* Tabla de totales */
.table-secondary[b-zcvbk9eveg] {
    background-color: #f8f9fa !important;
}

.table-primary[b-zcvbk9eveg] {
    background-color: rgba(4, 64, 184, 0.1) !important;
}

.table-primary h5[b-zcvbk9eveg] {
    color: #0440b8 !important;
    margin: 0;
}

/* Labels requeridos */
.form-label.required[b-zcvbk9eveg]::after {
    content: " *";
    color: #e53e3e;
}

/* Scrollbar personalizada */
.table-responsive[b-zcvbk9eveg]::-webkit-scrollbar {
    height: 8px;
}

.table-responsive[b-zcvbk9eveg]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-responsive[b-zcvbk9eveg]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-responsive[b-zcvbk9eveg]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header-blue[b-zcvbk9eveg] {
        padding: 1.05rem 0.7rem;
        margin-bottom: 1rem;
        border-radius: 8px;
        max-width: calc(100% - 16px);
    }
    
    .page-header-blue .header-content[b-zcvbk9eveg] {
        gap: 0.7rem;
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-header-blue .title-section[b-zcvbk9eveg] {
        min-width: 100%;
    }
    
    .page-header-blue .page-title[b-zcvbk9eveg] {
        font-size: 1.1rem;
    }
    
    .page-header-blue .page-subtitle[b-zcvbk9eveg] {
        font-size: 0.65rem;
    }
    
    .page-header-blue .header-actions[b-zcvbk9eveg] {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .page-header-blue .header-actions .btn[b-zcvbk9eveg] {
        width: 100%;
        justify-content: center;
    }
    
    .productos-container[b-zcvbk9eveg] {
        padding: 8px;
    }
    
    .form-content[b-zcvbk9eveg] {
        padding: 12px;
    }
    
    .table-responsive table[b-zcvbk9eveg] {
        font-size: 0.75rem;
    }
    
    .section-title[b-zcvbk9eveg] {
        font-size: 13px;
    }
}
/* Variables para consistencia tipográfica */
:root[b-zcvbk9eveg] {
    --montserrat-font: 'Montserrat', sans-serif;
}

/* ========================================
   HEADER AZUL UNIFICADO
   ======================================== */

.page-header-blue[b-zcvbk9eveg] {
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 50%, #021e4d 100%);
    color: white;
    padding: 1.4rem 1.75rem 1.05rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(4, 64, 184, 0.25);
    position: relative;
    overflow: hidden;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
}

.page-header-blue[b-zcvbk9eveg]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    z-index: 0;
}

.page-header-blue .header-content[b-zcvbk9eveg] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.05rem;
}

.page-header-blue .title-section[b-zcvbk9eveg] {
    flex: 1;
    min-width: 210px;
}

.page-header-blue .page-title[b-zcvbk9eveg] {
    font-family: var(--montserrat-font) !important;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.page-header-blue .page-subtitle[b-zcvbk9eveg] {
    font-family: var(--montserrat-font) !important;
    font-size: 0.7rem;
    font-weight: 400;
    margin: 0.35rem 0 0 0;
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 0.9;
    line-height: 1.2;
}

.page-header-blue .page-title i[b-zcvbk9eveg] {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
}

.page-header-blue .header-actions[b-zcvbk9eveg] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
}

.page-header-blue .header-actions .btn[b-zcvbk9eveg] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 10.5px;
    padding: 8.4px 14px;
    border: 2px solid rgba(255,255,255,0.3) !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    min-height: 29.4px;
}

.page-header-blue .header-actions .btn-secondary[b-zcvbk9eveg] {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.page-header-blue .header-actions .btn-secondary:hover[b-zcvbk9eveg] {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.page-header-blue .header-actions .btn-primary[b-zcvbk9eveg] {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0440b8 !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
}

.page-header-blue .header-actions .btn-primary:hover[b-zcvbk9eveg] {
    background: white !important;
    color: #032e7a !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.page-header-blue .header-actions .btn-primary:disabled[b-zcvbk9eveg] {
    background: rgba(255, 255, 255, 0.5) !important;
    color: rgba(4, 64, 184, 0.5) !important;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   CONTENEDOR PRINCIPAL
   ======================================== */

/* Contenedor principal de productos */
.productos-container[b-zcvbk9eveg] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del formulario como card principal */
.form-content[b-zcvbk9eveg] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
}

/* Contenido con header fijo - ajuste de padding para compensar altura del header */
.form-content.with-fixed-header[b-zcvbk9eveg] {
    margin-top: 0;
}

/* Secciones del formulario */
.form-section[b-zcvbk9eveg] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-zcvbk9eveg] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de sección con línea decorativa */
.section-header[b-zcvbk9eveg] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-zcvbk9eveg] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea azul debajo de cada título de sección */
.section-title[b-zcvbk9eveg]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-zcvbk9eveg] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content[b-zcvbk9eveg] {
    padding: 0;
    background: none;
}

/* Tablas responsivas */
.table-responsive[b-zcvbk9eveg] {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.table-responsive table[b-zcvbk9eveg] {
    font-size: 0.85rem;
}

.table thead th[b-zcvbk9eveg] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem;
    white-space: nowrap;
}

.table tbody td[b-zcvbk9eveg] {
    padding: 0.5rem;
    vertical-align: middle;
}

/* Alertas de información */
.alert-success[b-zcvbk9eveg] {
    background-color: rgba(0, 168, 107, 0.1);
    border-color: #00a86b;
    color: #006d45;
}

.alert-info[b-zcvbk9eveg] {
    background-color: rgba(0, 188, 212, 0.1);
    border-color: #00bcd4;
    color: #0097a7;
}

/* Botones pequeños en tablas */
.btn-sm[b-zcvbk9eveg] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* Input groups */
.input-group-sm .form-control[b-zcvbk9eveg] {
    font-size: 0.8rem;
}

/* Tabla de totales */
.table-secondary[b-zcvbk9eveg] {
    background-color: #f8f9fa !important;
}

.table-primary[b-zcvbk9eveg] {
    background-color: rgba(4, 64, 184, 0.1) !important;
}

.table-primary h5[b-zcvbk9eveg] {
    color: #0440b8 !important;
    margin: 0;
}

/* Labels requeridos */
.form-label.required[b-zcvbk9eveg]::after {
    content: " *";
    color: #e53e3e;
}

/* Scrollbar personalizada */
.table-responsive[b-zcvbk9eveg]::-webkit-scrollbar {
    height: 8px;
}

.table-responsive[b-zcvbk9eveg]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-responsive[b-zcvbk9eveg]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-responsive[b-zcvbk9eveg]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive */
@media (max-width: 768px) {
    .productos-container[b-zcvbk9eveg] {
        padding: 8px;
    }
    
    .form-content[b-zcvbk9eveg] {
        padding: 12px;
    }
    
    .table-responsive table[b-zcvbk9eveg] {
        font-size: 0.75rem;
    }
    
    .section-title[b-zcvbk9eveg] {
        font-size: 13px;
    }
}

/* /Components/Pages/NCClientes/DetalleNotaCredito.razor.rz.scp.css */
/* ========================================
   DETALLE NOTA DE CRÉDITO - ESTILOS
   ======================================== */

/* Cards de información */
.card-header.bg-primary[b-xbqphf53on] {
    background-color: var(--primary-color, #0440b8) !important;
}

.card-header.bg-danger[b-xbqphf53on] {
    background-color: #e53e3e !important;
}

.card-header.bg-info[b-xbqphf53on] {
    background-color: #00bcd4 !important;
}

.card-header h5[b-xbqphf53on] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.card-body p[b-xbqphf53on] {
    margin-bottom: 0.5rem;
}

.card-body p:last-child[b-xbqphf53on] {
    margin-bottom: 0;
}

/* Badges */
.badge.bg-success[b-xbqphf53on] {
    background-color: #00a86b !important;
}

.badge.bg-warning[b-xbqphf53on] {
    background-color: #ff8c00 !important;
    color: white !important;
}

.badge.bg-secondary[b-xbqphf53on] {
    background-color: #6c757d !important;
}

/* Tabla de productos */
.table-hover tbody tr:hover[b-xbqphf53on] {
    background-color: rgba(4, 64, 184, 0.05);
}

.table thead[b-xbqphf53on] {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 10;
}

/* Tabla de totales */
.table-primary[b-xbqphf53on] {
    background-color: rgba(4, 64, 184, 0.1) !important;
}

.table-primary td[b-xbqphf53on] {
    font-weight: 600;
}

/* Alertas */
.alert-info[b-xbqphf53on] {
    background-color: rgba(0, 188, 212, 0.1);
    border-color: #00bcd4;
    color: #0097a7;
}

.alert-info h6[b-xbqphf53on] {
    color: #00838f;
    margin-bottom: 0.5rem;
}

/* Botones */
.btn-outline-secondary[b-xbqphf53on] {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover[b-xbqphf53on] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-danger[b-xbqphf53on] {
    background-color: #e53e3e;
    border-color: #e53e3e;
}

.btn-danger:hover[b-xbqphf53on] {
    background-color: #c53030;
    border-color: #c53030;
}

/* Spinner de carga */
.spinner-border.text-primary[b-xbqphf53on] {
    color: var(--primary-color, #0440b8) !important;
}

/* Estado vacío */
.fa-exclamation-triangle[b-xbqphf53on] {
    color: #ff8c00;
}

.btn-primary[b-xbqphf53on] {
    background-color: var(--primary-color, #0440b8);
    border-color: var(--primary-color, #0440b8);
}

.btn-primary:hover[b-xbqphf53on] {
    background-color: var(--primary-dark, #032e7a);
    border-color: var(--primary-dark, #032e7a);
}

/* Responsive */
@media (max-width: 768px) {
    .card-body p[b-xbqphf53on] {
        font-size: 0.85rem;
    }
    
    .table[b-xbqphf53on] {
        font-size: 0.85rem;
    }
    
    .btn-sm[b-xbqphf53on] {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* /Components/Pages/NCClientes/RegistrarAplicacionNC.razor.rz.scp.css */
/* Estilos para Aplicación de NC - Copia completa de RegistrarCobro.razor.css */

:root[b-8cz15s15go] {
    --montserrat-font: 'Montserrat', sans-serif;
}

/* Contenedor principal */
.cobros-container[b-8cz15s15go] {
    max-width: 100%;
    margin: 0 auto;
    padding: 5.4px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
    height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header fijo */
.page-header-blue[b-8cz15s15go] {
    position: sticky;
    top: 2.25px;
    left: auto;
    right: auto;
    z-index: 999;
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%);
    border-radius: 5.4px;
    box-shadow: 0 1.8px 7.2px rgba(4, 64, 184, 0.15);
    padding: 11.7px 18px;
    margin-bottom: 7.2px;
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(7.2px);
    height: 61.2px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.header-content[b-8cz15s15go] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 18px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.title-section[b-8cz15s15go] {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3.6px;
}

.page-title[b-8cz15s15go] {
    font-family: var(--montserrat-font) !important;
    font-size: 16.2px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    text-shadow: 0 0.9px 1.8px rgba(0,0,0,0.1);
    position: relative;
    white-space: nowrap;
}

.page-title i[b-8cz15s15go] {
    color: #ffffff;
    margin-right: 7.2px;
    background: rgba(255,255,255,0.15);
    padding: 5.4px 6.3px;
    border-radius: 4.5px;
    font-size: 13.5px;
}

.page-subtitle[b-8cz15s15go] {
    font-size: 12.15px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
}

.header-actions[b-8cz15s15go] {
    display: flex;
    gap: 9px;
}

.header-actions .btn[b-8cz15s15go] {
    padding: 5.4px 10.8px;
    border-radius: 3.6px;
    font-weight: 600;
    font-size: 12.15px;
    transition: all 0.3s ease;
    font-family: var(--montserrat-font) !important;
}

.header-actions .btn-secondary[b-8cz15s15go] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.header-actions .btn-secondary:hover[b-8cz15s15go] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-0.9px);
    box-shadow: 0 3.6px 7.2px rgba(0, 0, 0, 0.2);
}

.header-actions .btn-primary[b-8cz15s15go] {
    background: #ffffff;
    border: none;
    color: #0440b8;
    box-shadow: 0 1.8px 3.6px rgba(0, 0, 0, 0.15);
}

.header-actions .btn-primary:hover[b-8cz15s15go] {
    background: #f0f4ff;
    transform: translateY(-0.9px);
    box-shadow: 0 3.6px 7.2px rgba(0, 0, 0, 0.25);
}

/* Contenido con scroll */
.form-content.with-fixed-header[b-8cz15s15go] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14.4px;
    scroll-behavior: smooth;
    background: #fff;
    border-radius: 5.4px;
    box-shadow: 0 1.8px 7.2px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    display: flex;
    flex-direction: column;
}

/* Secciones del formulario */
.form-section[b-8cz15s15go] {
    background: none;
    border: none;
    border-radius: 0;
    margin-bottom: 18px;
    padding-bottom: 14.4px;
    box-shadow: none;
}

.form-section:first-child[b-8cz15s15go] {
    border-bottom: 1px solid #dee2e6;
}

.form-section:last-child[b-8cz15s15go] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-header[b-8cz15s15go] {
    background: none;
    padding: 0;
    border-bottom: none;
    border-radius: 0;
    margin-bottom: 10.8px;
}

.section-title[b-8cz15s15go] {
    font-family: var(--montserrat-font) !important;
    font-size: 14.4px;
    font-weight: 600;
    color: #0440b8;
    margin: 0;
    display: flex;
    align-items: center;
}

.section-title i[b-8cz15s15go] {
    color: #0440b8;
    margin-right: 7.2px;
    font-size: 14.4px;
}

.section-content[b-8cz15s15go] {
    padding: 0;
}

.section-content-small[b-8cz15s15go] {
    padding: 0;
}

/* Tabla con scroll */
.table-documentos-scroll[b-8cz15s15go] {
    max-height: 243px;
    overflow-y: auto;
    overflow-x: auto;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    margin-bottom: 0;
    padding: 1.8px;
}

/* Total seleccionado */
.total-seleccionado-container[b-8cz15s15go] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #e8f0ff 100%);
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    margin-top: 0;
    gap: 9px;
}

.total-seleccionado-container .row[b-8cz15s15go] {
    width: 100%;
}

.total-seleccionado-container .alert[b-8cz15s15go] {
    font-size: 11.48px;
    margin-top: 8px;
}

.total-label[b-8cz15s15go] {
    font-weight: 600;
    color: #2d3748;
    font-size: 12.15px;
    font-family: var(--montserrat-font) !important;
}

.total-monto[b-8cz15s15go] {
    font-weight: 700;
    color: #0440b8;
    font-size: 14.85px;
    font-family: var(--montserrat-font) !important;
}

/* Tabla compacta */
.tabla-compacta[b-8cz15s15go] {
    margin-bottom: 0;
    font-size: 11.48px;
}

.tabla-compacta thead[b-8cz15s15go] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc;
}

.tabla-compacta th[b-8cz15s15go],
.tabla-compacta thead th[b-8cz15s15go],
table.tabla-compacta th[b-8cz15s15go],
.table-documentos-scroll .tabla-compacta th[b-8cz15s15go],
.table-documentos-scroll table th[b-8cz15s15go] {
    font-weight: 600;
    color: #4a5568;
    padding: 3.6px 5.4px !important;
    margin: 0 !important;
    border-bottom: 1.8px solid #cbd5e0;
    white-space: nowrap;
    font-family: var(--montserrat-font) !important;
    font-size: 11.48px;
}

.tabla-compacta td[b-8cz15s15go],
.tabla-compacta tbody td[b-8cz15s15go],
table.tabla-compacta td[b-8cz15s15go],
.table-documentos-scroll .tabla-compacta td[b-8cz15s15go],
.table-documentos-scroll table td[b-8cz15s15go] {
    padding: 3.6px 5.4px !important;
    margin: 0 !important;
    vertical-align: middle;
    font-family: var(--montserrat-font) !important;
    font-size: 11.48px;
    font-weight: normal !important;
}

.tabla-compacta .fila-compacta[b-8cz15s15go] {
    transition: background-color 0.2s ease;
    height: 43.2px;
}

.tabla-compacta .fila-compacta td[b-8cz15s15go] {
    height: 43.2px;
    vertical-align: middle !important;
}

.tabla-compacta .fila-compacta:hover[b-8cz15s15go] {
    background-color: #f7fafc;
}

.tabla-compacta .text-xs[b-8cz15s15go] {
    font-size: 11.48px;
    font-weight: normal !important;
}

.tabla-compacta .badge-xs[b-8cz15s15go] {
    font-size: 10.13px;
    padding: 0.225rem 0.45rem;
    font-weight: normal !important;
}

.tabla-compacta strong[b-8cz15s15go] {
    font-size: 11.48px;
    font-weight: 600 !important;
}

.tabla-compacta span[b-8cz15s15go] {
    font-size: 11.48px;
    font-weight: normal !important;
}

.tabla-compacta .input-group-sm .form-control[b-8cz15s15go] {
    font-size: 11.48px;
    padding: 0.225rem 0.45rem;
    height: auto;
    font-weight: normal !important;
}

.tabla-compacta .input-group-sm .input-group-text[b-8cz15s15go] {
    font-size: 11.48px;
    padding: 0.225rem 0.45rem;
    font-weight: normal !important;
}

.tabla-compacta .input-group-sm .btn[b-8cz15s15go] {
    font-size: 11.48px;
    padding: 0.225rem 0.45rem;
}

.tabla-compacta .btn-sm i[b-8cz15s15go] {
    font-size: 11.48px;
}

.tabla-compacta td .btn-success[b-8cz15s15go],
.tabla-compacta td .btn-primary[b-8cz15s15go] {
    padding: 0.225rem 0.45rem !important;
    border-radius: 3.6px;
    transition: all 0.2s ease;
    border-width: 1px;
    min-width: 36px;
    height: 28.8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tabla-compacta td .btn-success[b-8cz15s15go] {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.tabla-compacta td .btn-success:hover[b-8cz15s15go] {
    background-color: #218838;
    border-color: #1e7e34;
    transform: scale(1.05);
}

.tabla-compacta td .btn-primary[b-8cz15s15go] {
    background-color: #0440b8;
    border-color: #0440b8;
    color: white;
}

.tabla-compacta td .btn-primary:hover[b-8cz15s15go] {
    background-color: #033a9e;
    border-color: #032f85;
    transform: scale(1.05);
}

.tabla-compacta td .btn-primary i[b-8cz15s15go],
.tabla-compacta td .btn-success i[b-8cz15s15go] {
    font-size: 1rem !important;
    line-height: 1;
}

.tabla-compacta thead .btn-link[b-8cz15s15go] {
    color: #4a5568;
    text-decoration: none;
    padding: 0;
}

.tabla-compacta thead .btn-link:hover[b-8cz15s15go] {
    color: #0440b8;
}

.tabla-compacta thead .btn-link i[b-8cz15s15go] {
    transition: all 0.2s ease;
}

.tabla-compacta thead .btn-link:hover i[b-8cz15s15go] {
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header-blue[b-8cz15s15go] {
        max-width: calc(100% - 14.4px);
        padding: 12.6px 14.4px;
        height: auto;
        min-height: 63px;
        top: 2.25px;
        flex-direction: column;
        justify-content: center;
        gap: 9px;
    }
    
    .header-content[b-8cz15s15go] {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 9px;
        width: 100%;
    }
    
    .title-section[b-8cz15s15go] {
        text-align: center;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .header-actions[b-8cz15s15go] {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 7.2px;
    }

    .table-documentos-scroll[b-8cz15s15go] {
        max-height: 202.5px;
    }

    .total-seleccionado-container[b-8cz15s15go] {
        flex-direction: column;
        align-items: flex-end;
        gap: 5.4px;
        padding: 7.2px 14.4px;
    }
}

/* /Components/Pages/NDClientes/CNotasDebito.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-ze9h22nk2u] {
    --montserrat-font: 'Montserrat', sans-serif;
}

.clientes-container[b-ze9h22nk2u] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del formulario como card principal - CON MISMO ANCHO QUE HEADER */
.form-content[b-ze9h22nk2u] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    
    /* Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    
    /* Ocupar toda la altura disponible de la pantalla */
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Secciones del formulario - DISEÑO CONSISTENTE */
.form-section[b-ze9h22nk2u] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
}

.form-section:last-child[b-ze9h22nk2u] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Headers de sección con línea decorativa - IGUAL QUE CLIENTES */
.section-header[b-ze9h22nk2u] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-ze9h22nk2u] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea azul debajo de cada título de sección */
.section-title[b-ze9h22nk2u]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-ze9h22nk2u] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content[b-ze9h22nk2u] {
    padding: 0;
    background: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Contenedor de tabla con scroll automático - ESTE ES EL QUE DEBE HACER SCROLL */
.table-container[b-ze9h22nk2u] {
    flex: 1 1 0;
    overflow-y: auto !important;
    overflow-x: auto !important;
    min-height: 200px;
    max-height: 100%;
    margin-bottom: 0;
    position: relative;
}

/* table-responsive debe permitir que el scroll del contenedor padre funcione */
.table-responsive[b-ze9h22nk2u] {
    overflow: visible;
    margin-bottom: 0;
    width: 100%;
    height: auto;
    display: block;
}

/* Reducir tamaño de texto en la tabla en 35% para filas más compactas */
.table-responsive table[b-ze9h22nk2u] {
    font-size: 0.65rem;
    margin-bottom: 0;
}

.table-responsive table thead th[b-ze9h22nk2u] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.5rem !important;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 10;
}

.table-responsive table tbody td[b-ze9h22nk2u] {
    padding: 0.4rem 0.5rem !important;
    vertical-align: middle;
}

.table-responsive table tbody td h6[b-ze9h22nk2u] {
    font-size: 0.7rem;
    margin-bottom: 0.2rem !important;
    font-weight: 600;
}

.table-responsive table tbody td small[b-ze9h22nk2u] {
    font-size: 0.6rem;
}

.table-responsive table tbody td .badge[b-ze9h22nk2u] {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
}

.table-responsive table tbody td .btn-sm[b-ze9h22nk2u] {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

.table-responsive table tbody td .btn-sm i[b-ze9h22nk2u] {
    font-size: 0.65rem;
}

/* Botones de acciones más grandes */
.table-responsive table tbody td .btn-group .btn-sm[b-ze9h22nk2u] {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    min-width: 32px;
    height: 32px;
}

.table-responsive table tbody td .btn-group .btn-sm i[b-ze9h22nk2u] {
    font-size: 0.85rem;
}

.table-responsive table tbody td .fw-semibold[b-ze9h22nk2u],
.table-responsive table tbody td .fw-bold[b-ze9h22nk2u],
.table-responsive table tbody td span[b-ze9h22nk2u] {
    font-size: 0.65rem;
}

/* Ajustar el contenedor principal para que se ajuste a la pantalla */
.clientes-container[b-ze9h22nk2u] {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.table-container[b-ze9h22nk2u]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-container[b-ze9h22nk2u]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-container[b-ze9h22nk2u]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-container[b-ze9h22nk2u]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Ajustar tamaño de cards de resumen */
.card-title[b-ze9h22nk2u] {
    font-size: 0.875rem;
}

.card-body h4[b-ze9h22nk2u] {
    font-size: 1.25rem;
}

/* Ajustar tamaño de paginación */
.pagination-sm .page-link[b-ze9h22nk2u] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Ajustar tamaño de íconos en botones de acciones */
.btn-group .btn-sm[b-ze9h22nk2u] {
    padding: 0.25rem 0.5rem;
}

.btn-group .btn-sm i[b-ze9h22nk2u] {
    font-size: 0.75rem;
}

/* Ajustar el div de cada celda para mejor distribución */
.table-responsive table tbody td div[b-ze9h22nk2u] {
    line-height: 1.2;
}

/* Sticky header para la tabla */
.table-responsive table thead[b-ze9h22nk2u] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
}

/* Badges específicos para ND */
.badge.bg-primary[b-ze9h22nk2u] {
    background-color: #0440b8 !important;
}

.badge.bg-success[b-ze9h22nk2u] {
    background-color: #00a86b !important;
}

.badge.bg-warning[b-ze9h22nk2u] {
    background-color: #ff8c00 !important;
    color: white !important;
}

.badge.bg-secondary[b-ze9h22nk2u] {
    background-color: #6c757d !important;
}

.badge.bg-info[b-ze9h22nk2u] {
    background-color: #00bcd4 !important;
}

/* Cards de resumen con colores específicos */
.card.border-primary[b-ze9h22nk2u] {
    border-color: #0440b8 !important;
}

.card.border-success[b-ze9h22nk2u] {
    border-color: #00a86b !important;
}

.card.border-warning[b-ze9h22nk2u] {
    border-color: #ff8c00 !important;
}

.card.border-info[b-ze9h22nk2u] {
    border-color: #00bcd4 !important;
}

/* Texto con colores específicos */
.text-primary[b-ze9h22nk2u] {
    color: #0440b8 !important;
}

.text-success[b-ze9h22nk2u] {
    color: #00a86b !important;
}

.text-warning[b-ze9h22nk2u] {
    color: #ff8c00 !important;
}

.text-info[b-ze9h22nk2u] {
    color: #00bcd4 !important;
}

.text-danger[b-ze9h22nk2u] {
    color: #e53e3e !important;
}

/* Filas eliminadas */
.table-secondary[b-ze9h22nk2u] {
    background-color: #f8f9fa !important;
    opacity: 0.7;
}

/* Modal styles */
.modal.show[b-ze9h22nk2u] {
    display: block !important;
}

.modal-backdrop[b-ze9h22nk2u] {
    background-color: rgba(0,0,0,0.5);
}

/* Alert styles */
.alert-info[b-ze9h22nk2u] {
    background-color: #e3f2fd;
    border-color: #00bcd4;
    color: #1976d2;
}

/* Form controls más compactos */
.form-control-sm[b-ze9h22nk2u], .form-select-sm[b-ze9h22nk2u] {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

.form-label[b-ze9h22nk2u] {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

/* Botones más compactos */
.btn-sm[b-ze9h22nk2u] {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .form-content[b-ze9h22nk2u] {
        height: calc(100vh - 80px);
        padding: 12px;
    }
    
    .table-responsive table[b-ze9h22nk2u] {
        font-size: 0.6rem;
    }
    
    .table-responsive table thead th[b-ze9h22nk2u] {
        font-size: 0.65rem;
        padding: 0.4rem !important;
    }
    
    .table-responsive table tbody td[b-ze9h22nk2u] {
        padding: 0.3rem 0.4rem !important;
    }
}.alert-warning[b-ze9h22nk2u] {
    background-color: #fff3cd;
    color: #856404;
}

/* /Components/Pages/NDClientes/CrearNotaDebito.razor.rz.scp.css */
/* Variables para consistencia tipográfica */
:root[b-ee26r6ey6y] {
    --montserrat-font: 'Montserrat', sans-serif;
}

/* ========================================
   HEADER AZUL UNIFICADO
   ======================================== */

.page-header-blue[b-ee26r6ey6y] {
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 50%, #021e4d 100%);
    color: white;
    padding: 1.4rem 1.75rem 1.05rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(4, 64, 184, 0.25);
    position: relative;
    overflow: hidden;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
}

.page-header-blue[b-ee26r6ey6y]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    z-index: 0;
}

.page-header-blue .header-content[b-ee26r6ey6y] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.05rem;
}

.page-header-blue .title-section[b-ee26r6ey6y] {
    flex: 1;
    min-width: 210px;
}

.page-header-blue .page-title[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.page-header-blue .page-subtitle[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    font-size: 0.7rem;
    font-weight: 400;
    margin: 0.35rem 0 0 0;
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 0.9;
    line-height: 1.2;
}

.page-header-blue .page-title i[b-ee26r6ey6y] {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
}

.page-header-blue .header-actions[b-ee26r6ey6y] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
}

.page-header-blue .header-actions .btn[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 10.5px;
    padding: 8.4px 14px;
    border: 2px solid rgba(255,255,255,0.3) !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    min-height: 29.4px;
}

.page-header-blue .header-actions .btn-secondary[b-ee26r6ey6y] {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.page-header-blue .header-actions .btn-secondary:hover[b-ee26r6ey6y] {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.page-header-blue .header-actions .btn-primary[b-ee26r6ey6y] {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0440b8 !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
}

.page-header-blue .header-actions .btn-primary:hover[b-ee26r6ey6y] {
    background: white !important;
    color: #032e7a !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.page-header-blue .header-actions .btn-primary:disabled[b-ee26r6ey6y] {
    background: rgba(255, 255, 255, 0.5) !important;
    color: rgba(4, 64, 184, 0.5) !important;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   CONTENEDOR PRINCIPAL
   ======================================== */

.productos-container[b-ee26r6ey6y] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
}

.form-content[b-ee26r6ey6y] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
}

.form-content.with-fixed-header[b-ee26r6ey6y] {
    margin-top: 0;
}

/* ========================================
   SECCIONES DEL FORMULARIO
   ======================================== */

.form-section[b-ee26r6ey6y] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-ee26r6ey6y] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-header[b-ee26r6ey6y] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8;
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

.section-title[b-ee26r6ey6y]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

.section-title i[b-ee26r6ey6y] {
    color: #0440b8;
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content[b-ee26r6ey6y] {
    padding: 0;
    background: none;
}

/* ========================================
   FORMULARIOS
   ======================================== */

.form-group[b-ee26r6ey6y] {
    margin-bottom: 0.75rem;
}

.form-label[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

.form-label.required[b-ee26r6ey6y]::after {
    content: " *";
    color: #e53e3e;
}

.form-control[b-ee26r6ey6y],
.form-select[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.form-control:focus[b-ee26r6ey6y],
.form-select:focus[b-ee26r6ey6y] {
    border-color: #0440b8;
    box-shadow: 0 0 0 0.2rem rgba(4, 64, 184, 0.15);
}

/* ========================================
   TABLAS
   ======================================== */

.table-responsive[b-ee26r6ey6y] {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.table[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
}

.table thead th[b-ee26r6ey6y] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem;
    white-space: nowrap;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.table tbody td[b-ee26r6ey6y] {
    padding: 0.5rem;
    vertical-align: middle;
    font-size: 0.85rem;
}

.table-sm th[b-ee26r6ey6y],
.table-sm td[b-ee26r6ey6y] {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
}

.table-secondary[b-ee26r6ey6y] {
    background-color: #f8f9fa !important;
}

.table-primary[b-ee26r6ey6y] {
    background-color: rgba(4, 64, 184, 0.1) !important;
}

.table-primary h5[b-ee26r6ey6y] {
    color: #0440b8 !important;
    margin: 0;
}

.table-light[b-ee26r6ey6y] {
    background-color: #f8f9fa !important;
}

.table-hover tbody tr:hover[b-ee26r6ey6y] {
    background-color: rgba(4, 64, 184, 0.05);
}

.table-bordered[b-ee26r6ey6y] {
    border: 1px solid #dee2e6;
}

/* ========================================
   ALERTAS
   ======================================== */

.alert[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

.alert-success[b-ee26r6ey6y] {
    background-color: rgba(0, 168, 107, 0.1);
    border-color: #00a86b;
    color: #006d45;
}

.alert-info[b-ee26r6ey6y] {
    background-color: rgba(0, 188, 212, 0.1);
    border-color: #00bcd4;
    color: #0097a7;
}

.alert-warning[b-ee26r6ey6y] {
    background-color: rgba(255, 140, 0, 0.1);
    border-color: #ff8c00;
    color: #c56d00;
}

.alert-danger[b-ee26r6ey6y] {
    background-color: rgba(229, 62, 62, 0.1);
    border-color: #e53e3e;
    color: #c53030;
}

/* ========================================
   BOTONES
   ======================================== */

.btn[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-sm[b-ee26r6ey6y] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.btn-primary[b-ee26r6ey6y] {
    background-color: #0440b8;
    border-color: #0440b8;
}

.btn-primary:hover[b-ee26r6ey6y] {
    background-color: #032e7a;
    border-color: #032e7a;
}

.btn-secondary[b-ee26r6ey6y] {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-success[b-ee26r6ey6y] {
    background-color: #00a86b;
    border-color: #00a86b;
}

.btn-danger[b-ee26r6ey6y] {
    background-color: #e53e3e;
    border-color: #e53e3e;
}

.btn-outline-secondary[b-ee26r6ey6y] {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover[b-ee26r6ey6y] {
    background-color: #6c757d;
    color: white;
}

.btn-outline-primary[b-ee26r6ey6y] {
    color: #0440b8;
    border-color: #0440b8;
}

.btn-outline-primary:hover[b-ee26r6ey6y] {
    background-color: #0440b8;
    color: white;
}

.btn-outline-danger[b-ee26r6ey6y] {
    color: #e53e3e;
    border-color: #e53e3e;
}

.btn-outline-danger:hover[b-ee26r6ey6y] {
    background-color: #e53e3e;
    color: white;
}

/* ========================================
   MODALES
   ======================================== */

.modal-header[b-ee26r6ey6y] {
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%);
    color: white;
    border-bottom: none;
}

.modal-title[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
}

.modal-body[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
}

.modal-footer[b-ee26r6ey6y] {
    border-top: 1px solid #dee2e6;
}

.btn-close-white[b-ee26r6ey6y] {
    filter: brightness(0) invert(1);
}

/* ========================================
   INPUT GROUPS
   ======================================== */

.input-group-text[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
}

.input-group-sm .form-control[b-ee26r6ey6y],
.input-group-sm .input-group-text[b-ee26r6ey6y] {
    font-size: 0.8rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .page-header-blue[b-ee26r6ey6y] {
        padding: 1.05rem 0.7rem;
        margin-bottom: 1rem;
        border-radius: 8px;
        max-width: calc(100% - 16px);
    }
    
    .page-header-blue .header-content[b-ee26r6ey6y] {
        gap: 0.7rem;
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-header-blue .title-section[b-ee26r6ey6y] {
        min-width: 100%;
    }
    
    .page-header-blue .page-title[b-ee26r6ey6y] {
        font-size: 1.1rem;
    }
    
    .page-header-blue .page-subtitle[b-ee26r6ey6y] {
        font-size: 0.65rem;
    }
    
    .page-header-blue .header-actions[b-ee26r6ey6y] {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .page-header-blue .header-actions .btn[b-ee26r6ey6y] {
        width: 100%;
        justify-content: center;
    }
    
    .productos-container[b-ee26r6ey6y] {
        padding: 8px;
    }
    
    .form-content[b-ee26r6ey6y] {
        padding: 12px;
        max-width: calc(100% - 16px);
    }
    
    .table-responsive table[b-ee26r6ey6y] {
        font-size: 0.75rem;
    }
    
    .section-title[b-ee26r6ey6y] {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .page-header-blue .page-title[b-ee26r6ey6y] {
        font-size: 1rem;
    }
    
    .table thead th[b-ee26r6ey6y],
    .table tbody td[b-ee26r6ey6y] {
        font-size: 0.75rem;
        padding: 0.4rem;
    }
}

/* ========================================
   SCROLLBAR PERSONALIZADA
   ======================================== */

.table-responsive[b-ee26r6ey6y]::-webkit-scrollbar {
    height: 8px;
}

.table-responsive[b-ee26r6ey6y]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-responsive[b-ee26r6ey6y]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-responsive[b-ee26r6ey6y]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ========================================
   VALIDACIÓN
   ======================================== */

.validation-message[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
    color: #e53e3e;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.invalid-feedback[b-ee26r6ey6y] {
    font-family: var(--montserrat-font) !important;
}

/* ========================================
   SPINNER
   ======================================== */

.spinner-border-sm[b-ee26r6ey6y] {
    width: 0.9rem;
    height: 0.9rem;
}

/* ========================================
   OTROS
   ======================================== */

.text-primary[b-ee26r6ey6y] {
    color: #0440b8 !important;
}

.text-muted[b-ee26r6ey6y] {
    color: #6c757d !important;
}

.text-success[b-ee26r6ey6y] {
    color: #00a86b !important;
}

.text-warning[b-ee26r6ey6y] {
    color: #ff8c00 !important;
}

.text-danger[b-ee26r6ey6y] {
    color: #e53e3e !important;
}

small[b-ee26r6ey6y] {
    font-size: 0.85rem;
}

strong[b-ee26r6ey6y] {
    font-weight: 600;
}

/* /Components/Pages/Producto/CProductos.razor.rz.scp.css */
/* Estilos para la consulta de productos - CProductos.razor */

/* Contenedor principal */
.clientes-container[b-xszma5pmib] {
    padding: 1rem;
    max-width: 100%;
    margin: 0 auto;
}

.form-content[b-xszma5pmib] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.form-section[b-xszma5pmib] {
    position: relative;
}

/* Separador entre secciones */
.section-separator[b-xszma5pmib] {
    height: 1px;
    background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, transparent 100%);
    margin: 1rem 0;
}

/* Header de sección con línea */
.section-header-line[b-xszma5pmib] {
    padding: 1rem 1.5rem 0.5rem 1.5rem;
    background: none;
    border: none;
    position: relative;
}

/* Título de sección con estilos de clientes */
.section-title-line[b-xszma5pmib] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px !important; /* Mismo tamaño que crear productos */
    font-weight: 600;
    color: #0440b8; /* Mismo azul vibrante de clientes */
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea debajo de cada título de sección */
.section-title-line[b-xszma5pmib]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%);
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2);
}

/* Iconos en títulos */
.section-title-line i[b-xszma5pmib] {
    color: #0440b8; /* Mismo azul vibrante de clientes */
    margin-right: 6px;
    font-size: 14px !important; /* Mismo tamaño que crear productos */
    background: rgba(4, 64, 184, 0.1);
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenido de sección */
.section-content[b-xszma5pmib] {
    padding: 1rem 1.5rem;
}

/* Estilos de formulario */
.form-group[b-xszma5pmib] {
    margin-bottom: 0.75rem;
}

.form-label[b-xszma5pmib] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 0.25rem;
}

/* Estilos de tabla */
.table-responsive[b-xszma5pmib] {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.table[b-xszma5pmib] {
    margin-bottom: 0;
    font-family: var(--montserrat-font) !important;
}

.table thead th[b-xszma5pmib] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 12px;
    color: #0440b8 !important; /* Mismo azul vibrante de los títulos de secciones */
    padding: 0.75rem 0.5rem;
}

.table tbody td[b-xszma5pmib] {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

/* Información de producto */
.producto-main h6[b-xszma5pmib] {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.125rem;
}

.producto-codigo[b-xszma5pmib],
.codigo-ref[b-xszma5pmib] {
    font-size: 11px;
    color: #6c757d;
}

/* Información de identificación */
.identificacion-numero[b-xszma5pmib] {
    font-weight: 500;
    color: #495057;
}

/* Información de tipo */
.tipo-item[b-xszma5pmib] {
    display: flex;
    align-items: center;
    margin-bottom: 0.125rem;
    font-size: 12px;
}

.tipo-item:last-child[b-xszma5pmib] {
    margin-bottom: 0;
}

/* Información de costo */
.costo-ultimo[b-xszma5pmib] {
    font-weight: 600;
    color: #28a745;
}

.costo-promedio[b-xszma5pmib] {
    font-size: 11px;
    color: #6c757d;
}

/* Información de precios */
.precio-lista[b-xszma5pmib] {
    font-weight: 600;
    color: #28a745;
}

.precio-minimo[b-xszma5pmib] {
    font-size: 11px;
    color: #6c757d;
}

/* Estados y badges */
.badge[b-xszma5pmib] {
    font-size: 10px;
    padding: 0.25rem 0.5rem;
}

/* Botones de acción */
.btn-group .btn[b-xszma5pmib] {
    border-radius: 0.25rem;
    margin-right: 0.125rem;
}

.btn-group .btn:last-child[b-xszma5pmib] {
    margin-right: 0;
}

/* Paginación */
.pagination-sm .page-link[b-xszma5pmib] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .clientes-container[b-xszma5pmib] {
        padding: 0.5rem;
    }
    
    .section-header-line[b-xszma5pmib] {
        padding: 0.75rem 1rem 0.375rem 1rem;
    }
    
    .section-content[b-xszma5pmib] {
        padding: 0.75rem 1rem;
    }
    
    .section-title-line[b-xszma5pmib] {
        font-size: 13px;
    }
    
    .section-title-line i[b-xszma5pmib] {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
    
    .form-label[b-xszma5pmib] {
        font-size: 11px;
    }
    
    .table thead th[b-xszma5pmib],
    .table tbody td[b-xszma5pmib] {
        padding: 0.5rem 0.375rem;
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .section-title-line[b-xszma5pmib] {
        font-size: 12px;
    }
    
    .section-title-line i[b-xszma5pmib] {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
}
/* /Components/Pages/Producto/CrearProducto.razor.rz.scp.css */
/* Estilos unificados para Crear/Editar/Detalle Producto con diseño compacto (basado en CrearCliente) */
:root[b-vvmo2rg3vg] { --montserrat-font: 'Montserrat', sans-serif; }

.productos-container[b-vvmo2rg3vg] {
    max-width: 100%;
    margin: 0 auto;
    padding-top: 0;
    padding-right : 12px;
    padding-left: 12px;
    padding-bottom: 12px;
    background: #ffffff;
    font-family: var(--montserrat-font) !important;
}

/* Header azul reutilizando patrón de clientes */
.page-header-blue[b-vvmo2rg3vg] {
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 50%, #021e4d 100%);
    color: #fff;
    padding: 0.6rem 0.6rem 0.6rem; /* compacto */
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(4, 64, 184, 0.25);
    position: relative;
    overflow: hidden;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    font-family: var(--montserrat-font) !important;
}
.page-header-blue[b-vvmo2rg3vg]::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(255,255,255,0.06) 0%, transparent 55%);
    z-index: 0;
}
.page-header-blue .header-content[b-vvmo2rg3vg] { position: relative; z-index:1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.page-header-blue .title-section[b-vvmo2rg3vg] { flex:1; min-width:200px; }
.page-header-blue .page-title[b-vvmo2rg3vg] { font-family:var(--montserrat-font)!important; font-size:1.3rem; font-weight:700; margin:0; color:#fff; display:flex; align-items:center; line-height:1.15; }
.page-header-blue .page-title i[b-vvmo2rg3vg] { color:#fff; font-size:1.15rem; margin-right:0.75rem; background:rgba(255,255,255,0.18); padding:8px; border-radius:6px; }
.page-header-blue .page-subtitle[b-vvmo2rg3vg] { font-family:var(--montserrat-font)!important; font-size:0.7rem; margin:0.3rem 0 0 0; color:rgba(255,255,255,0.85); font-weight:400; }
.page-header-blue .header-actions[b-vvmo2rg3vg] { display:flex; align-items:center; gap:0.65rem; }
.page-header-blue .header-actions .btn[b-vvmo2rg3vg] { font-family:var(--montserrat-font)!important; font-weight:600; font-size:10.5px; padding:8px 14px; border:2px solid rgba(255,255,255,0.35)!important; backdrop-filter:blur(10px); min-height:30px; transition:.25s ease; }
.page-header-blue .header-actions .btn-secondary[b-vvmo2rg3vg] { background:rgba(255,255,255,0.15)!important; color:#fff!important; }
.page-header-blue .header-actions .btn-secondary:hover[b-vvmo2rg3vg] { background:rgba(255,255,255,0.25)!important; transform:translateY(-2px); }
.page-header-blue .header-actions .btn-primary[b-vvmo2rg3vg] { background:rgba(255,255,255,0.9)!important; color:#0440b8!important; border-color:rgba(255,255,255,0.9)!important; }
.page-header-blue .header-actions .btn-primary:hover[b-vvmo2rg3vg] { background:#fff!important; color:#032e7a!important; transform:translateY(-2px); }

/* Form content */
.form-content.with-fixed-header[b-vvmo2rg3vg] { background:#fff; border:1px solid #e9ecef; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.06); padding:16px; margin:0; max-width:calc(100% - 24px); margin-left:auto; margin-right:auto; font-family:var(--montserrat-font)!important; }

/* Secciones compactas */
.form-section[b-vvmo2rg3vg] { margin-bottom:9px; padding-bottom:14px;  background:none; border-radius:0; box-shadow:none; }
.form-section:last-child[b-vvmo2rg3vg] { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.section-header[b-vvmo2rg3vg] { margin-bottom:10px; padding:0; background:none; border:none; position:relative; }
.section-title[b-vvmo2rg3vg] { font-family:var(--montserrat-font)!important; font-size:14px; font-weight:600; color:#0440b8; margin:0 0 6px 0; padding:0 0 4px 0; display:flex; align-items:center; position:relative; }
.section-title[b-vvmo2rg3vg]::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:#0440b8; }
.section-title i[b-vvmo2rg3vg] { color:#0440b8; margin-right:6px; font-size:14px; background:rgba(4,64,184,0.1); padding:4px; border-radius:4px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.section-content[b-vvmo2rg3vg] { padding:0; }

/* Formularios compactos */
.form-group[b-vvmo2rg3vg] { margin-bottom:2px; }
.form-label[b-vvmo2rg3vg] { font-family:var(--montserrat-font)!important; font-weight:500; color:#495057; margin-bottom:3px; font-size:11px; }
.form-label.required[b-vvmo2rg3vg]::after { content:" *"; color:#dc3545; }
.form-control-sm[b-vvmo2rg3vg], .form-select-sm[b-vvmo2rg3vg] { font-family:var(--montserrat-font)!important; padding:3px 6px; font-size:11px; font-weight:400; border:1px solid #ced4da; border-radius:3px; height:auto; line-height:1.3; }
.form-control-sm:focus[b-vvmo2rg3vg], .form-select-sm:focus[b-vvmo2rg3vg] { border-color:#0440b8; box-shadow:0 0 0 0.1rem rgba(4,64,184,0.15); }
.form-control-sm[b-vvmo2rg3vg]::placeholder { font-size:10px; color:#6c757d; }
textarea.form-control-sm[b-vvmo2rg3vg] { min-height:48px; resize:vertical; }

/* Tabla de precios */
.table-sm th[b-vvmo2rg3vg], .table-sm td[b-vvmo2rg3vg] { padding:0.35rem 0.5rem; font-size:11px; }
.table-sm thead th[b-vvmo2rg3vg] { font-weight:600; font-family:var(--montserrat-font)!important; }
.table-sm input.form-control-sm[b-vvmo2rg3vg] { text-align:right; }

.validation-message[b-vvmo2rg3vg] { font-family:var(--montserrat-font)!important; color:#dc3545; font-size:9px; font-weight:400; margin-top:1px; display:block; }
.invalid-feedback.small[b-vvmo2rg3vg] { font-size:9px; }

.badge[b-vvmo2rg3vg] { font-family:var(--montserrat-font)!important; font-weight:600; font-size:9px; }

/* Botones base / overrides */
.btn[b-vvmo2rg3vg] { font-family:var(--montserrat-font)!important; font-weight:500; border-radius:3px; transition:all .2s ease-in-out; font-size:11px; }
.btn-sm[b-vvmo2rg3vg] { padding:3px 8px; font-size:10px; font-weight:500; }
.btn-primary[b-vvmo2rg3vg] { background:#0440b8; border-color:#0440b8; }
.btn-primary:hover[b-vvmo2rg3vg] { background:#032e7a; border-color:#032e7a; }
.btn-secondary[b-vvmo2rg3vg] { background:#6c757d; border-color:#6c757d; }
.btn-outline-light[b-vvmo2rg3vg] { border-color:rgba(255,255,255,0.5); color:#fff; }
.btn-outline-light:hover[b-vvmo2rg3vg] { background:rgba(255,255,255,0.1); border-color:#fff; color:#fff; }

/* Footer móvil reutilizado */
.mobile-footer[b-vvmo2rg3vg] { position:fixed; bottom:0; left:0; right:0; z-index:1000; background:linear-gradient(135deg,#0440b8 0%, #032e7a 100%); border-top:1px solid rgba(255,255,255,0.1); box-shadow:0 -2px 8px rgba(4,64,184,0.2); backdrop-filter:blur(8px); padding:12px; font-family:var(--montserrat-font)!important; }
.mobile-footer-content[b-vvmo2rg3vg] { display:flex; gap:12px; align-items:center; justify-content:space-between; }
.mobile-footer-btn[b-vvmo2rg3vg] { flex:1; font-family:var(--montserrat-font)!important; font-weight:600; font-size:11px; padding:10px 14px; border:2px solid rgba(255,255,255,0.35); backdrop-filter:blur(10px); min-height:34px; border-radius:6px; }
.mobile-footer .btn-secondary[b-vvmo2rg3vg] { background:rgba(255,255,255,0.18); color:#fff; border-color:rgba(255,255,255,0.4); }
.mobile-footer .btn-secondary:hover[b-vvmo2rg3vg] { background:rgba(255,255,255,0.28); }
.mobile-footer .btn-primary[b-vvmo2rg3vg] { background:rgba(255,255,255,0.95); color:#0440b8; border-color:rgba(255,255,255,0.95); font-weight:700; }
.mobile-footer .btn-primary:hover[b-vvmo2rg3vg] { background:#fff; color:#032e7a; }
.mobile-footer .btn:disabled[b-vvmo2rg3vg] { opacity:.6; }

/* Mobile responsive - Ocultar solo BOTONES en header-actions, mantener checkbox visible */
@media (max-width: 767.98px) {
  /* Mostrar header-actions pero ocultar solo los botones */
  .page-header-blue .header-actions .btn[b-vvmo2rg3vg] { display:none !important; }
  /* Mantener checkbox visible y centrado en móvil */
  .page-header-blue .header-actions .form-check[b-vvmo2rg3vg] { 
    display:flex !important; 
    justify-content:center; 
    width:100%; 
    margin:0; 
  }
  /* Mostrar mobile footer */
  .mobile-footer[b-vvmo2rg3vg] { display:block !important; }
  .productos-container[b-vvmo2rg3vg] { padding-bottom:90px; }
  .form-content.with-fixed-header[b-vvmo2rg3vg] { max-width:calc(100% - 16px); padding:12px; }
  .page-header-blue[b-vvmo2rg3vg] { max-width:calc(100% - 16px); padding:1rem 0.75rem 0.75rem; margin-bottom:1rem; }
  .page-header-blue .page-title[b-vvmo2rg3vg] { font-size:1.05rem; }
  .page-header-blue .page-subtitle[b-vvmo2rg3vg] { font-size:0.63rem; }
}

/* Estilos para las tarjetas de precios móviles */
.mobile-pricing-cards[b-vvmo2rg3vg] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Aumentado de 1rem a 1.5rem para mayor separación entre empresas/localidades */
}

.mobile-price-card[b-vvmo2rg3vg] {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  overflow: hidden;
  font-family: var(--montserrat-font) !important;
}

.mobile-price-header[b-vvmo2rg3vg] {
  background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%);
  color: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-price-title[b-vvmo2rg3vg] {
  font-family: var(--montserrat-font) !important;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 1.2;
}

.mobile-price-title i[b-vvmo2rg3vg] {
  font-size: 12px;
  opacity: 0.9;
}

.mobile-price-title .badge[b-vvmo2rg3vg] {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(255,255,255,0.2) !important;
  border: 1px solid rgba(255,255,255,0.3);
}

.mobile-price-content[b-vvmo2rg3vg] {
  padding: 16px;
}

.mobile-price-label[b-vvmo2rg3vg] {
  font-family: var(--montserrat-font) !important;
  font-size: 10px;
  font-weight: 600;
  color: #495057;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
}

.mobile-price-label.required[b-vvmo2rg3vg]::after {
  content: " *";
  color: #dc3545;
}

.mobile-price-value[b-vvmo2rg3vg] {
  font-family: var(--montserrat-font) !important;
  font-size: 13px;
  font-weight: 600;
  color: #0440b8;
  padding: 6px 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  text-align: right;
}

.mobile-price-section[b-vvmo2rg3vg] {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f1f3f4;
}

.mobile-price-section:first-child[b-vvmo2rg3vg] {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.mobile-price-section-title[b-vvmo2rg3vg] {
  font-family: var(--montserrat-font) !important;
  font-size: 11px;
  font-weight: 700;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e9ecef;
}

/* Ajustes de inputs en tarjetas móviles */
.mobile-price-card .form-control-sm[b-vvmo2rg3vg] {
  font-size: 12px;
  padding: 6px 8px;
  height: auto;
  min-height: 32px;
}

.mobile-price-card .form-control-sm:focus[b-vvmo2rg3vg] {
  border-color: #0440b8;
  box-shadow: 0 0 0 0.1rem rgba(4,64,184,0.15);
}

/* Ajustes de filas y gutters compactos */
.row.g-1[b-vvmo2rg3vg] { --bs-gutter-x:0.5rem; --bs-gutter-y:0.25rem; }
.form-section .row + .row[b-vvmo2rg3vg] { margin-top:6px; }

/* Estados disabled */
.form-control-sm:disabled[b-vvmo2rg3vg], .form-select-sm:disabled[b-vvmo2rg3vg] { background:#f8f9fa; opacity:.85; border-color:#e9ecef; }

/* Montserrat en todos los elementos del scope */
.productos-container input[b-vvmo2rg3vg],
.productos-container select[b-vvmo2rg3vg],
.productos-container textarea[b-vvmo2rg3vg],
.productos-container button[b-vvmo2rg3vg],
.productos-container label[b-vvmo2rg3vg],
.productos-container .form-control[b-vvmo2rg3vg],
.productos-container .form-select[b-vvmo2rg3vg],
.productos-container .btn[b-vvmo2rg3vg],
.productos-container .badge[b-vvmo2rg3vg],
.productos-container .alert[b-vvmo2rg3vg],
.productos-container .validation-message[b-vvmo2rg3vg] { font-family:var(--montserrat-font)!important; }

/* Spinner */
.spinner-border-sm[b-vvmo2rg3vg] { width:0.9rem; height:0.9rem; }

/* Alert compacta */
.alert.small[b-vvmo2rg3vg] { font-size:11px; padding:6px 10px; }
/* /Components/Pages/Suplidor/CrearSuplidor.razor.rz.scp.css */
/* Formulario de editar cliente con dise�o limpio usando Montserrat - ELEMENTOS M�S PEQUE�OS */

/* Variables para asegurar consistencia tipogr�fica */
:root[b-3ioda2vmz3] {
    --montserrat-font: 'Montserrat', Arial, Helvetica, sans-serif;
}

.clientes-container[b-3ioda2vmz3] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px; /* ? MANTENIDO: padding uniforme de 12px en todos los lados */
    background: #ffffff; /* ? CAMBIADO: de #f8f9fa a blanco */
    font-family: var(--montserrat-font) !important;
}

/* ? Header azul con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para m�vil */
.page-header-blue[b-3ioda2vmz3] {
    position: sticky; /* ? MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 10px; /* ? MANTENIDO: margen superior de 10px */
    left: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    right: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    z-index: 999; /* ? MANTENIDO: menor que dropdowns (1055) */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ? MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ? MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ? AUMENTADO: m�s padding vertical (era 10px) */
    margin-bottom: 16px; /* ? MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ? AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ? MANTENIDO: flexbox directo */
    align-items: center; /* ? MANTENIDO: centrado vertical */
    
    /* ? MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ? MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ? MANTENIDO: centrado horizontal */
    margin-right: auto; /* ? MANTENIDO: centrado horizontal */
}

/* ? CORREGIDO: Responsive optimizado para evitar overflow en m�vil */
@media (max-width: 768px) {
    .page-header-blue[b-3ioda2vmz3] {
        max-width: calc(100% - 16px); /* ? M�VIL: ajustar al padding del container m�vil */
        padding: 14px 16px; /* ? AUMENTADO: m�s padding para elementos m�viles */
        height: auto; /* ? CR�TICO: altura autom�tica para permitir wrap */
        min-height: 70px; /* ? A�ADIDO: altura m�nima para garantizar espacio */
        top: 5px; /* ? MANTENIDO: menos margen superior en m�vil */
        flex-direction: column; /* ? MANTENIDO: stack vertical */
        justify-content: center; /* ? MANTENIDO: centrar contenido */
        gap: 10px; /* ? AUMENTADO: m�s espacio entre elementos stacked */
    }
    
    /* ? CORREGIDO: Permitir wrap completo en m�vil */
    .header-content[b-3ioda2vmz3] {
        flex-direction: column; /* ? MANTENIDO: stack vertical en m�vil */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap en m�vil */
        gap: 10px; /* ? AUMENTADO: m�s gap en m�vil */
        width: 100%; /* ? ASEGURADO: usar   el ancho */
    }
    
    .title-section[b-3ioda2vmz3] {
        text-align: center; /* ? MANTENIDO: centrar t�tulo en m�vil */
        width: 100%; /* ? MANTENIDO: usar   el ancho */
        flex-wrap: wrap; /* ? A�ADIDO: permitir wrap del t�tulo */
        justify-content: center; /* ? A�ADIDO: centrar contenido */
    }
    
    .header-actions[b-3ioda2vmz3] {
        justify-content: center; /* ? MANTENIDO: centrar botones en m�vil */
        width: 100%; /* ? MANTENIDO: usar   el ancho */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap de botones en m�vil */
        gap: 8px; /* ? A�ADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header-blue[b-3ioda2vmz3] {
        height: auto; /* ? CR�TICO: altura autom�tica */
        min-height: 65px; /* ? AJUSTADO: altura m�nima para pantallas peque�as */
        padding: 12px 12px; /* ? AJUSTADO: padding para pantallas peque�as */
    }
    
    .header-actions .btn[b-3ioda2vmz3] {
        flex: 1 1 auto; /* ? A�ADIDO: botones flexibles en m�vil peque�o */
        max-width: 48%; /* ? A�ADIDO: m�ximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header-blue[b-3ioda2vmz3] {
        min-height: 80px; /* ? AUMENTADO: m�s altura para pantallas muy peque�as */
        padding: 10px 8px; /* ? COMPACTO: padding m�nimo */
    }
    
    .header-actions .btn[b-3ioda2vmz3] {
        flex: 1 1 100%; /* ? STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ? ANCHO COMPLETO: sin restricciones */
    }
}

/* ? Header con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para m�vil */
.page-header.fixed-header[b-3ioda2vmz3] {
    position: sticky; /* ? MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 10px; /* ? MANTENIDO: margen superior de 10px */
    left: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    right: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    z-index: 999; /* ? MANTENIDO: menor que dropdowns (1055) */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ? MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ? MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ? AUMENTADO: m�s padding vertical (era 10px) */
    margin-bottom: 16px; /* ? MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ? AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ? MANTENIDO: flexbox directo */
    align-items: center; /* ? MANTENIDO: centrado vertical */
    
    /* ? MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ? MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ? MANTENIDO: centrado horizontal */
    margin-right: auto; /* ? MANTENIDO: centrado horizontal */
}

/* ? CORREGIDO: Responsive optimizado para evitar overflow en m�vil */
@media (max-width: 768px) {
    .page-header.fixed-header[b-3ioda2vmz3] {
        max-width: calc(100% - 16px); /* ? M�VIL: ajustar al padding del container m�vil */
        padding: 14px 16px; /* ? AUMENTADO: m�s padding para elementos m�viles */
        height: auto; /* ? CR�TICO: altura autom�tica para permitir wrap */
        min-height: 70px; /* ? A�ADIDO: altura m�nima para garantizar espacio */
        top: 5px; /* ? MANTENIDO: menos margen superior en m�vil */
        flex-direction: column; /* ? MANTENIDO: stack vertical */
        justify-content: center; /* ? MANTENIDO: centrar contenido */
        gap: 10px; /* ? AUMENTADO: m�s espacio entre elementos stacked */
    }
    
    /* ? CORREGIDO: Permitir wrap completo en m�vil */
    .header-content[b-3ioda2vmz3] {
        flex-direction: column; /* ? MANTENIDO: stack vertical en m�vil */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap en m�vil */
        gap: 10px; /* ? AUMENTADO: m�s gap en m�vil */
        width: 100%; /* ? ASEGURADO: usar   el ancho */
    }
    
    .title-section[b-3ioda2vmz3] {
        text-align: center; /* ? MANTENIDO: centrar t�tulo en m�vil */
        width: 100%; /* ? MANTENIDO: usar   el ancho */
        flex-wrap: wrap; /* ? A�ADIDO: permitir wrap del t�tulo */
        justify-content: center; /* ? A�ADIDO: centrar contenido */
    }
    
    .header-actions[b-3ioda2vmz3] {
        justify-content: center; /* ? MANTENIDO: centrar botones en m�vil */
        width: 100%; /* ? MANTENIDO: usar   el ancho */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap de botones en m�vil */
        gap: 8px; /* ? A�ADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header.fixed-header[b-3ioda2vmz3] {
        height: auto; /* ? CR�TICO: altura autom�tica */
        min-height: 65px; /* ? AJUSTADO: altura m�nima para pantallas peque�as */
        padding: 12px 12px; /* ? AJUSTADO: padding para pantallas peque�as */
    }
    
    .header-actions .btn[b-3ioda2vmz3] {
        flex: 1 1 auto; /* ? A�ADIDO: botones flexibles en m�vil peque�o */
        max-width: 48%; /* ? A�ADIDO: m�ximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header.fixed-header[b-3ioda2vmz3] {
        min-height: 80px; /* ? AUMENTADO: m�s altura para pantallas muy peque�as */
        padding: 10px 8px; /* ? COMPACTO: padding m�nimo */
    }
    
    .header-actions .btn[b-3ioda2vmz3] {
        flex: 1 1 100%; /* ? STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ? ANCHO COMPLETO: sin restricciones */
    }
}

/* ? MANTENIDO: Contenido del header en una sola l�nea SOLO para desktop */
.header-content[b-3ioda2vmz3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* ? SOLO para desktop: nunca hacer wrap */
    gap: 20px; /* ? MANTENIDO: espacio entre elementos */
    width: 100%; /* ? MANTENIDO: usar   el ancho disponible */
}

.title-section[b-3ioda2vmz3] {
    flex: 1; /* ? MANTENIDO: usar espacio flexible */
    min-width: 0; /* ? CR�TICO: permitir shrinking */
    position: relative;
    display: flex;
    align-items: center; /* ? MANTENIDO: alineaci�n vertical */
}

/* ? ACTUALIZADO: T�tulo m�s grande aprovechando la nueva altura */
.page-title[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    font-size: 18px; /* ? AUMENTADO: de 17px a 18px para aprovechar m�s altura */
    font-weight: 600;
    color: #ffffff;
    margin: 0; /* ? MANTENIDO: sin m�rgenes */
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    position: relative;
    white-space: nowrap; /* ? MANTENIDO: no hacer wrap del t�tulo en desktop */
}

/* ? RESPONSIVE: Permitir wrap del t�tulo en m�vil */
@media (max-width: 768px) {
    .page-title[b-3ioda2vmz3] {
        white-space: normal; /* ? CR�TICO: permitir wrap en m�vil */
        text-align: center; /* ? CENTRADO: t�tulo centrado en m�vil */
        flex-wrap: wrap; /* ? PERMITIR WRAP: t�tulo puede hacer wrap */
    }
}

/* ? MANTENIDO: sin l�nea decorativa */
.page-title[b-3ioda2vmz3]::after {
    display: none; /* ? ELIMINADO: sin l�nea decorativa */
}

.page-title i[b-3ioda2vmz3] {
    color: #ffffff;
    margin-right: 8px; /* ? MANTENIDO: separaci�n */
    background: rgba(255,255,255,0.15);
    padding: 8px; /* ? AUMENTADO: de 7px a 8px para aprovechar m�s altura */
    border-radius: 4px; /* ? MANTENIDO: bordes m�s grandes */
    font-size: 16px; /* ? AUMENTADO: de 15px a 16px para m�s visibilidad */
}

/* ? ACTUALIZADO: Subt�tulo m�s grande */
.page-subtitle[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* ? AUMENTADO: de 13px a 14px para m�s legibilidad */
    color: rgba(255,255,255,0.75);
    margin: 0 0 0 15px; /* ? MANTENIDO: margen izquierdo para separar del t�tulo */
    font-weight: 400;
    white-space: nowrap; /* ? MANTENIDO para desktop: no hacer wrap */
}

/* ? RESPONSIVE: Permitir wrap del subt�tulo en m�vil */
@media (max-width: 768px) {
    .page-subtitle[b-3ioda2vmz3] {
        white-space: normal; /* ? CR�TICO: permitir wrap en m�vil */
        margin: 0; /* ? SIN MARGEN: centrado en m�vil */
        text-align: center; /* ? CENTRADO: subt�tulo centrado en m�vil */
    }
    
    .page-subtitle[b-3ioda2vmz3]::before {
        display: none; /* ? SIN SEPARADOR: quitar bullet en m�vil */
    }
}

/* ? MANTENIDO: Separador visual entre t�tulo y subt�tulo SOLO desktop */
.page-subtitle[b-3ioda2vmz3]::before {
    content: "�";
    margin-right: 8px;
    color: rgba(255,255,255,0.5);
}

.header-actions[b-3ioda2vmz3] {
    display: flex;
    gap: 12px; /* ? MANTENIDO: espacio entre botones */
    flex-wrap: nowrap; /* ? SOLO para desktop: botones en l�nea */
    flex-shrink: 0; /* ? MANTENIDO: los botones no se encogen */
}

/* ? ACTUALIZADO: Botones del header un 30% m�s peque�os */
.header-actions .btn[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600; /* ? MANTENIDO: m�s peso */
    font-size: 10.5px; /* ? REDUCIDO 30%: de 15px a 10.5px */
    padding: 8.4px 14px; /* ? REDUCIDO 30%: de 12px 20px a 8.4px 14px */
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap; /* ? MANTENIDO: texto en una l�nea */
    min-height: 29.4px; /* ? REDUCIDO 30%: de 42px a 29.4px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-actions .btn-secondary[b-3ioda2vmz3] {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
}

.header-actions .btn-secondary:hover[b-3ioda2vmz3] {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.header-actions .btn-primary[b-3ioda2vmz3] {
    background: rgba(255,255,255,0.9);
    color: #0440b8; /* ? MANTENIDO: nuevo azul vibrante */
    border-color: rgba(255,255,255,0.9);
}

.header-actions .btn-primary:hover[b-3ioda2vmz3] {
    background: #ffffff;
    color: #032e7a; /* ? MANTENIDO: azul oscuro */
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* ? AJUSTADO: Form content con el mismo ancho que el header */
.form-content.with-fixed-header[b-3ioda2vmz3] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    /* ? ELIMINADO: margin-top ya que el header no es fixed */
    font-family: var(--montserrat-font) !important;
    
    /* ? A�ADIDO: Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px); /* ? MISMO ANCHO: que el page-header */
    margin-left: auto; /* ? MISMO CENTRADO: horizontal autom�tico */
    margin-right: auto; /* ? MISMO CENTRADO: horizontal autom�tico */
}

/* ? RESPONSIVE: Ajustar form-content para m�vil igual que el header */
@media (max-width: 768px) {
    .form-content.with-fixed-header[b-3ioda2vmz3] {
        max-width: calc(100% - 16px); /* ? M�VIL: mismo ajuste que el header */
        padding: 12px; /* ? MANTENIDO: padding reducido en m�vil */
        font-family: var(--montserrat-font) !important;
    }
}

/* Secciones del formulario - M�S COMPACTAS */
.form-section[b-3ioda2vmz3] {
    margin-bottom: 20px; /* Reducido de 25px */
    padding-bottom: 16px; /* Reducido de 20px */
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-3ioda2vmz3] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de secci�n con Montserrat - M�S PEQUE�OS */
.section-header[b-3ioda2vmz3] {
    margin-bottom: 12px; /* Reducido de 15px */
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* Reducido de 16px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin: 0 0 6px 0; /* A�adido margin-bottom para la l�nea */
    padding: 0 0 4px 0; /* A�adido padding-bottom para la l�nea */
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* L�nea debajo de cada t�tulo de secci�n con color primario */
.section-title[b-3ioda2vmz3]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%); /* ? ACTUALIZADO: nueva paleta azul vibrante */
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2); /* ? ACTUALIZADO: nueva paleta azul */
}

.section-title i[b-3ioda2vmz3] {
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin-right: 6px; /* Reducido de 8px */
    font-size: 14px; /* Reducido de 16px */
    background: rgba(4, 64, 184, 0.1); /* ? ACTUALIZADO: nueva paleta azul */
    padding: 4px; /* Reducido de 6px */
    border-radius: 3px; /* Reducido de 4px */
    width: 24px; /* Reducido de 28px */
    height: 24px; /* Reducido de 28px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenido de secci�n */
.section-content[b-3ioda2vmz3] {
    padding: 0;
    background: none;
    border: none;
}

/* Grupos de formulario m�s compactos - M�S PEQUE�OS */
.form-group[b-3ioda2vmz3] {
    margin-bottom: 10px; /* Reducido de 12px */
}

.form-label[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    color: #495057;
    margin-bottom: 3px; /* Reducido de 4px */
    font-size: 11px; /* Reducido de 12px */
}

.form-label.required[b-3ioda2vmz3]::after {
    content: " *";
    color: #dc3545;
}

/* Controles de formulario m�s peque�os - M�S COMPACTOS */
.form-control-sm[b-3ioda2vmz3],
.form-select-sm[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 400;
    border: 1px solid #ced4da;
    border-radius: 3px; /* Reducido de 4px */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: auto;
    line-height: 1.3; /* M�s compacto */
}

.form-control-sm:focus[b-3ioda2vmz3],
.form-select-sm:focus[b-3ioda2vmz3] {
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    box-shadow: 0 0 0 0.1rem rgba(4, 64, 184, 0.12); /* ? ACTUALIZADO: nueva paleta azul */
}

.form-control-sm[b-3ioda2vmz3]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    color: #6c757d;
    font-size: 10px; /* M�s peque�o */
}

/* Input groups m�s compactos - M�S PEQUE�OS */
.input-group-sm .btn-sm[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 10px; /* Reducido de 11px */
    font-weight: 500;
    border-color: #ced4da;
}

.input-group-sm .input-group-text[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 500;
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
}

/* Espaciado de filas m�s compacto - M�S AJUSTADO */
.row.g-1[b-3ioda2vmz3] {
    --bs-gutter-x: 0.4rem; /* Reducido de 0.5rem */
    --bs-gutter-y: 0.2rem; /* Reducido de 0.25rem */
}

/* Alerts m�s compactos - M�S PEQUE�OS */
.alert.mt-1.p-1.small[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    padding: 0.2rem 0.3rem !important; /* Reducido */
    margin-top: 0.2rem !important; /* Reducido */
    font-size: 0.65rem; /* Reducido de 0.7rem */
    font-weight: 400;
}

/* Validation messages m�s peque�os - M�S COMPACTOS */
.validation-message[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    color: #dc3545;
    font-size: 9px; /* Reducido de 10px */
    font-weight: 400;
    margin-top: 1px;
    display: block;
}

/* Botones m�s compactos - M�S PEQUE�OS */
.btn[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    border-radius: 3px; /* Reducido de 4px */
    transition: all 0.2s ease-in-out;
    font-size: 11px; /* Reducido de 12px */
}

.btn-sm[b-3ioda2vmz3] {
    padding: 3px 8px; /* Reducido de 4px 10px */
    font-size: 10px; /* Reducido de 11px */
    font-weight: 500;
}

.btn-primary[b-3ioda2vmz3] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
}

.btn-primary:hover[b-3ioda2vmz3] {
    background-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    transform: translateY(-1px);
}

.btn-secondary[b-3ioda2vmz3] {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-primary[b-3ioda2vmz3] {
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
}

.btn-outline-primary:hover[b-3ioda2vmz3] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-danger[b-3ioda2vmz3] {
    color: #dc3545;
    border-color: #dc3545;
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
}

.btn-outline-danger:hover[b-3ioda2vmz3] {
    transform: translateY(-1px);
}

/* TextArea m�s compacto - M�S PEQUE�O */
textarea.form-control-sm[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    min-height: 50px; /* Reducido de 60px */
    resize: vertical;
    font-weight: 400;
    font-size: 11px; /* A�adido para consistencia */
    line-height: 1.3; /* M�s compacto */
}

textarea.form-control-sm[b-3ioda2vmz3]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 10px; /* M�s peque�o */
}

/* Estilos para los modales de Bootstrap - M�S COMPACTOS */
.modal-content[b-3ioda2vmz3] {
    border-radius: 6px; /* Reducido de 8px */
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* M�s sutil */
    font-family: var(--montserrat-font) !important;
}

.modal-header[b-3ioda2vmz3] {
    border-bottom: 1px solid #dee2e6;
    padding: 0.8rem 1.2rem; /* Reducido de 1rem 1.5rem */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? ACTUALIZADO: nueva paleta azul vibrante */
    color: #ffffff;
}

.modal-title[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 14px; /* Reducido de 16px */
    color: #ffffff;
}

.modal-title i[b-3ioda2vmz3] {
    color: #ffffff;
    margin-right: 6px; /* Reducido de 8px */
}

.modal-body[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    padding: 1rem; /* Reducido de 1.25rem */
}

.modal-footer[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    border-top: 1px solid #dee2e6;
    padding: 0.6rem 1rem; /* Reducido */
}

/* Close button para modales */
.btn-close[b-3ioda2vmz3] {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Separaci�n del contenedor principal - M�S COMPACTA */
.clientes-container > * + *[b-3ioda2vmz3] {
    margin-top: 12px; /* Reducido de 15px */
}

/* Alerts de error y �xito con Montserrat - M�S PEQUE�OS */
.alert[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 12px; /* A�adido para controlar tama�o */
    padding: 8px 12px; /* M�s compacto */
}

.alert-danger[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
}

.alert-success[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
}

/* Select options con Montserrat - M�S PEQUE�OS */
.form-select-sm option[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 11px;
}

/* Spinner con Montserrat - M�S PEQUE�O */
.spinner-border-sm[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
    width: 0.9rem; /* Reducido */
    height: 0.9rem; /* Reducido */
}

/* Loading state specific styles */
.text-center.py-5[b-3ioda2vmz3] {
    padding: 2rem 0 !important;
}

.spinner-border.text-primary[b-3ioda2vmz3] {
    color: #0440b8 !important; /* ? ACTUALIZADO: nuevo azul vibrante */
}

/* ? RESPONSIVE DESIGN - Corregido para evitar overflow en m�vil */
@media (max-width: 768px) {
    .clientes-container[b-3ioda2vmz3] {
        padding: 8px;
        font-family: var(--montserrat-font) !important;
    }

    .page-title[b-3ioda2vmz3] {
        font-size: 16px; /* ? AUMENTADO: de 15px a 16px aprovechando m�s altura */
        font-family: var(--montserrat-font) !important;
    }
    
    .page-subtitle[b-3ioda2vmz3] {
        font-size: 12px; /* ? AUMENTADO: de 11px a 12px para mejor legibilidad */
        margin-left: 0; /* ? CORREGIDO: sin margen en m�vil */
    }

    .header-actions .btn[b-3ioda2vmz3] {
        font-size: 9.1px; /* ? REDUCIDO 30%: de 13px a 9.1px aprovechando m�s altura */
        padding: 7px 11.2px; /* ? REDUCIDO 30%: de 10px 16px a 7px 11.2px */
        min-height: 28px; /* ? REDUCIDO 30%: de 40px a 28px */
    }

    .section-title[b-3ioda2vmz3] {
        font-size: 13px;
        font-family: var(--montserrat-font) !important;
    }

    .form-content.with-fixed-header[b-3ioda2vmz3] {
        padding: 12px;
        font-family: var(--montserrat-font) !important;
    }

    .col-lg-4[b-3ioda2vmz3], .col-lg-3[b-3ioda2vmz3], .col-lg-2[b-3ioda2vmz3] {
        margin-bottom: 6px;
    }

    .section-title[b-3ioda2vmz3]::after {
        height: 0.5px;
    }
}

@media (max-width: 576px) {
    .page-title[b-3ioda2vmz3] {
        font-size: 15px; /* ? AUMENTADO: de 14px a 15px */
        font-family: var(--montserrat-font) !important;
    }

    .page-subtitle[b-3ioda2vmz3] {
        font-size: 11px; /* ? AUMENTADO: de 10px a 11px */
    }

    .header-actions .btn[b-3ioda2vmz3] {
        font-size: 12px; /* ? AUMENTADO: de 11px a 12px */
        padding: 8px 12px; /* ? AUMENTADO: m�s padding */
        min-height: 36px; /* ? AUMENTADO: de 32px a 36px */
    }

    .form-control-sm[b-3ioda2vmz3],
    .form-select-sm[b-3ioda2vmz3] {
        font-size: 12px;
        font-family: var(--montserrat-font) !important;
    }
}

/* Estados disabled para campos - M�S PEQUE�OS */
.form-control-sm:disabled[b-3ioda2vmz3],
.form-select-sm:disabled[b-3ioda2vmz3] {
    background-color: #f8f9fa;
    opacity: 0.75;
    border-color: #e9ecef;
    font-family: var(--montserrat-font) !important;
}

/* Mejoras para input groups */
.input-group-sm .form-control-sm[b-3ioda2vmz3],
.input-group-sm .form-select-sm[b-3ioda2vmz3] {
    border-right: 1px solid #ced4da;
}

.input-group-sm .form-control-sm:focus[b-3ioda2vmz3],
.input-group-sm .form-select-sm:focus[b-3ioda2vmz3] {
    z-index: 3;
}

/* Espaciado entre filas de formulario - M�S COMPACTO */
.form-section .row + .row[b-3ioda2vmz3] {
    margin-top: 6px; /* Reducido de 8px */
}

/* Efectos adicionales para mantener consistencia con el proyecto */
.btn-primary:not(:disabled):not(.disabled):active[b-3ioda2vmz3],
.btn-primary:not(:disabled):not(.disabled).active[b-3ioda2vmz3] {
    background-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
}

.btn-outline-primary:not(:disabled):not(.disabled):active[b-3ioda2vmz3],
.btn-outline-primary:not(:disabled):not(.disabled).active[b-3ioda2vmz3] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
}

/* Asegurar que todos los elementos de formulario usen Montserrat - M�S PEQUE�OS */
.clientes-container input[b-3ioda2vmz3],
.clientes-container select[b-3ioda2vmz3],
.clientes-container textarea[b-3ioda2vmz3],
.clientes-container button[b-3ioda2vmz3],
.clientes-container label[b-3ioda2vmz3],
.clientes-container .form-control[b-3ioda2vmz3],
.clientes-container .form-select[b-3ioda2vmz3],
.clientes-container .btn[b-3ioda2vmz3],
.clientes-container .input-group-text[b-3ioda2vmz3],
.clientes-container .alert[b-3ioda2vmz3],
.clientes-container .validation-message[b-3ioda2vmz3] {
    font-family: var(--montserrat-font) !important;
}

/* Ajustes espec�ficos para hacer columnas m�s compactas */
.col-lg-2[b-3ioda2vmz3], .col-lg-3[b-3ioda2vmz3], .col-lg-4[b-3ioda2vmz3], .col-lg-5[b-3ioda2vmz3] {
    padding-left: 0.3rem; /* Reducido */
    padding-right: 0.3rem; /* Reducido */
}

/* Iconos de botones m�s peque�os */
.btn i[b-3ioda2vmz3] {
    font-size: 0.85em; /* Iconos proporcionalmente m�s peque�os */
}

.header-actions .btn i[b-3ioda2vmz3] {
    font-size: 1em; /* ? MANTENIDO: iconos m�s visibles en header */
    margin-right: 6px; /* ? MANTENIDO: separaci�n del texto */
}

/* ============================= */
/* FOOTER M�VIL FIJO */
/* ============================= */

/* Footer m�vil - Solo visible en dispositivos m�viles */
.mobile-footer[b-3ioda2vmz3] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* ? Alto z-index para estar sobre   */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? Mismo gradiente que el header */
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -2px 8px rgba(4, 64, 184, 0.15); /* ? Sombra hacia arriba */
    backdrop-filter: blur(8px);
    padding: 12px;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del footer - flexbox para distribuir botones */
.mobile-footer-content[b-3ioda2vmz3] {
    display: flex;
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

/* Botones del footer m�vil - ? REDUCIDOS 30% */
.mobile-footer-btn[b-3ioda2vmz3] {
    flex: 1; /* ? Ambos botones ocupan el mismo espacio */
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 11.2px; /* ? REDUCIDO 30%: de 16px a 11.2px */
    padding: 9.8px 14px; /* ? REDUCIDO 30%: de 14px 20px a 9.8px 14px */
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    min-height: 35px; /* ? REDUCIDO 30%: de 50px a 35px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px; /* ? Bordes redondeados */
}

/* Bot�n Cancelar (secundario) en footer m�vil */
.mobile-footer .btn-secondary[b-3ioda2vmz3] {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    border-color: rgba(255,255,255,0.4);
}

.mobile-footer .btn-secondary:hover[b-3ioda2vmz3],
.mobile-footer .btn-secondary:active[b-3ioda2vmz3] {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Bot�n Actualizar (primario) en footer m�vil */
.mobile-footer .btn-primary[b-3ioda2vmz3] {
    background: rgba(255,255,255,0.95);
    color: #0440b8; /* ? Azul vibrante */
    border-color: rgba(255,255,255,0.95);
    font-weight: 700; /* ? M�s peso para el bot�n principal */
}

.mobile-footer .btn-primary:hover[b-3ioda2vmz3],
.mobile-footer .btn-primary:active[b-3ioda2vmz3] {
    background: #ffffff;
    color: #032e7a; /* ? Azul oscuro */
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* Bot�n deshabilitado en footer m�vil */
.mobile-footer .btn:disabled[b-3ioda2vmz3] {
    opacity: 0.6;
    transform: none;
}

/* Ocultar los botones del header en m�vil para evitar duplicaci�n */
@media (max-width: 767.98px) {
    .header-actions[b-3ioda2vmz3] {
        display: none; /* ? Ocultar botones del header en m�vil */
    }
}

/* Agregar padding inferior al contenido para compensar el footer fijo */
@media (max-width: 767.98px) {
    .clientes-container[b-3ioda2vmz3] {
        padding-bottom: 90px; /* ? Espacio para el footer fijo */
    }
}

/* Responsive para m�viles muy peque�os */
@media (max-width: 480px) {
    .mobile-footer[b-3ioda2vmz3] {
        padding: 10px 8px; /* ? Padding m�s compacto */
    }
    
    .mobile-footer-btn[b-3ioda2vmz3] {
        font-size: 10.5px; /* ? REDUCIDO 30%: de 15px a 10.5px */
        padding: 8.4px 11.2px; /* ? REDUCIDO 30%: de 12px 16px a 8.4px 11.2px */
        min-height: 32.2px; /* ? REDUCIDO 30%: de 46px a 32.2px */
    }
    
    .mobile-footer-content[b-3ioda2vmz3] {
        gap: 8px; /* ? Gap reducido */
    }
    
    .header-actions .btn[b-3ioda2vmz3] {
        font-size: 8.4px; /* ? REDUCIDO 30%: de 12px a 8.4px */
        padding: 5.6px 8.4px; /* ? REDUCIDO 30%: de 8px 12px a 5.6px 8.4px */
        min-height: 25.2px; /* ? REDUCIDO 30%: de 36px a 25.2px */
    }
}
/* /Components/Pages/Suplidor/CSuplidores.razor.rz.scp.css */
/* Consulta de clientes con diseño consistente usando Montserrat - SIN HEADER FIJO */

/* Variables para asegurar consistencia tipográfica */
:root[b-fhojpk26uf] {
    --montserrat-font: 'Montserrat', sans-serif;
}

.clientes-container[b-fhojpk26uf] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px; /* ✅ CAMBIADO: de 0px a 12px para consistency */
    background: #ffffff; /* ✅ CAMBIADO: de #f8f9fa a blanco */
    font-family: var(--montserrat-font) !important;
}

/* Contenido del formulario como card principal - CON MISMO ANCHO QUE HEADER */
.form-content[b-fhojpk26uf] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    font-family: var(--montserrat-font) !important;
    
    /* ✅ AÑADIDO: Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px); /* ✅ MISMO ANCHO: que el page-header */
    margin-left: auto; /* ✅ MISMO CENTRADO: horizontal automático */
    margin-right: auto; /* ✅ MISMO CENTRADO: horizontal automático */
}

/* Secciones del formulario - DISEÑO CONSISTENTE */
.form-section[b-fhojpk26uf] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-fhojpk26uf] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de sección con línea decorativa */
.section-header[b-fhojpk26uf] {
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-fhojpk26uf] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px;
    font-weight: 600;
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* Línea debajo de cada título de sección */
.section-title[b-fhojpk26uf]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%); /* ✅ ACTUALIZADO: nueva paleta azul */
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2); /* ✅ ACTUALIZADO: nueva paleta azul */
}

.section-title i[b-fhojpk26uf] {
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    margin-right: 6px;
    font-size: 14px;
    background: rgba(4, 64, 184, 0.1); /* ✅ ACTUALIZADO: nueva paleta azul */
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenido de sección */
.section-content[b-fhojpk26uf] {
    padding: 0;
    background: none;
    border: none;
}

/* Grupos de formulario compactos */
.form-group[b-fhojpk26uf] {
    margin-bottom: 10px;
}

.form-label[b-fhojpk26uf] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    color: #495057;
    margin-bottom: 3px;
    font-size: 11px;
}

/* Controles de formulario pequeños */
.form-control-sm[b-fhojpk26uf],
.form-select-sm[b-fhojpk26uf] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 400;
    border: 1px solid #ced4da;
    border-radius: 3px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: auto;
    line-height: 1.3;
}

.form-control-sm:focus[b-fhojpk26uf],
.form-select-sm:focus[b-fhojpk26uf] {
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    box-shadow: 0 0 0 0.1rem rgba(4, 64, 184, 0.12); /* ✅ ACTUALIZADO: nueva paleta azul */
}

.form-control-sm[b-fhojpk26uf]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    color: #6c757d;
    font-size: 10px;
}

/* Botones compactos */
.btn[b-fhojpk26uf] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
    font-size: 11px;
}

.btn-sm[b-fhojpk26uf] {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 500;
}

/* BOTÓN BUSCAR MÁS GRANDE */
.btn-outline-primary.btn-sm.flex-fill[b-fhojpk26uf] {
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-height: 32px;
}

.btn-outline-primary.btn-sm.flex-fill i[b-fhojpk26uf] {
    font-size: 12px !important;
}

/* BOTÓN NUEVO CLIENTE (REEMPLAZA AL LIMPIAR) */
.btn-primary.btn-sm.flex-fill[b-fhojpk26uf] {
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-height: 32px;
    text-decoration: none;
}

.btn-primary.btn-sm.flex-fill i[b-fhojpk26uf] {
    font-size: 12px !important;
}

.btn-primary.btn-sm.flex-fill:hover[b-fhojpk26uf] {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-primary[b-fhojpk26uf] {
    background-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
}

.btn-primary:hover[b-fhojpk26uf] {
    background-color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ✅ ACTUALIZADO: azul oscuro */
    transform: translateY(-1px);
}

.btn-outline-primary[b-fhojpk26uf] {
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    font-size: 10px;
    font-weight: 500;
}

.btn-outline-primary:hover[b-fhojpk26uf] {
    background-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
    transform: translateY(-1px);
}

/* Tabla de resultados estilizada */
.table-responsive[b-fhojpk26uf] {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.table[b-fhojpk26uf] {
    margin: 0;
    font-family: var(--montserrat-font) !important;
    font-size: 11px;
}

.table th[b-fhojpk26uf] {
    background-color: #f7fafc; /* ✅ ACTUALIZADO: fondo gris muy claro */
    border-bottom: 2px solid #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    font-weight: 600;
    padding: 8px 6px;
    vertical-align: middle;
    font-size: 10px;
}

.table td[b-fhojpk26uf] {
    padding: 6px;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}

.table-hover tbody tr:hover[b-fhojpk26uf] {
    background-color: rgba(4, 64, 184, 0.05); /* ✅ ACTUALIZADO: nueva paleta azul */
}

/* Información de cliente en tabla */
.cliente-main[b-fhojpk26uf] {
    line-height: 1.2;
}

.cliente-nombre[b-fhojpk26uf] {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.cliente-codigo[b-fhojpk26uf] {
    font-size: 9px;
    color: #6c757d;
}

.identificacion-numero[b-fhojpk26uf] {
    font-weight: 500;
    color: #495057;
}

.codigo-ref[b-fhojpk26uf] {
    font-size: 9px;
    color: #6c757d;
}

/* Información de contacto */
.contacto-info[b-fhojpk26uf],
.ubicacion-info[b-fhojpk26uf] {
    line-height: 1.3;
}

.contacto-item[b-fhojpk26uf],
.ubicacion-item[b-fhojpk26uf] {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    font-size: 10px;
}

.contacto-item:last-child[b-fhojpk26uf],
.ubicacion-item:last-child[b-fhojpk26uf] {
    margin-bottom: 0;
}

.contacto-item i[b-fhojpk26uf],
.ubicacion-item i[b-fhojpk26uf] {
    font-size: 9px;
    width: 12px;
    flex-shrink: 0;
}

/* Información de crédito */
.credito-info[b-fhojpk26uf] {
    text-align: right;
}

.limite-credito[b-fhojpk26uf] {
    font-size: 11px;
    color: #495057;
}

.condicion-credito[b-fhojpk26uf] {
    font-size: 9px;
    color: #6c757d;
}

/* Estados */
.badge[b-fhojpk26uf] {
    font-size: 9px;
    font-weight: 500;
    padding: 4px 6px;
}

/* BOTONES DE ACCIONES MÁS GRANDES EN TABLA */
.btn-group .btn[b-fhojpk26uf] {
    border-radius: 0;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 500;
    min-height: 34px;
    min-width: 38px;
}

.btn-group .btn i[b-fhojpk26uf] {
    font-size: 12px !important;
}

.btn-group .btn:first-child[b-fhojpk26uf] {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.btn-group .btn:last-child[b-fhojpk26uf] {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Mejorar hover states para botones de acción */
.btn-group .btn:hover[b-fhojpk26uf] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Paginación */
.pagination-sm .page-link[b-fhojpk26uf] {
    font-family: var(--montserrat-font) !important;
    font-size: 10px;
    padding: 4px 8px;
}

.pagination-sm .page-item.active .page-link[b-fhojpk26uf] {
    background-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ✅ ACTUALIZADO: nuevo azul vibrante */
}

/* Espaciado de filas */
.row.g-1[b-fhojpk26uf] {
    --bs-gutter-x: 0.4rem;
    --bs-gutter-y: 0.2rem;
}

/* Alerts */
.alert[b-fhojpk26uf] {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 12px;
    padding: 8px 12px;
}

/* Estados vacíos */
.empty-icon[b-fhojpk26uf] {
    opacity: 0.5;
}

.empty-title[b-fhojpk26uf] {
    font-family: var(--montserrat-font) !important;
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

.empty-message[b-fhojpk26uf] {
    font-family: var(--montserrat-font) !important;
    font-size: 12px;
    margin-bottom: 15px;
}

/* Responsive design */
@media (max-width: 768px) {
    .clientes-container[b-fhojpk26uf] {
        padding: 8px;
    }

    .section-title[b-fhojpk26uf] {
        font-size: 13px;
    }

    .form-content[b-fhojpk26uf] {
        max-width: calc(100% - 16px); /* ✅ MÓVIL: mismo ajuste que el header */
        padding: 12px; /* ✅ MANTENIDO: padding reducido en móvil */
    }

    /* Líneas responsive */
    .section-title[b-fhojpk26uf]::after {
        height: 0.5px;
    }

    /* Tabla responsive mejorada */
    .table th[b-fhojpk26uf],
    .table td[b-fhojpk26uf] {
        padding: 4px;
    }

    .table th[b-fhojpk26uf] {
        font-size: 9px;
    }

    .table td[b-fhojpk26uf] {
        font-size: 10px;
    }

    /* Botones buscar y nuevo cliente responsive */
    .btn-outline-primary.btn-sm.flex-fill[b-fhojpk26uf],
    .btn-primary.btn-sm.flex-fill[b-fhojpk26uf] {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 36px;
    }

    /* Botones de acciones responsive */
    .btn-group .btn[b-fhojpk26uf] {
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-height: 38px;
    }
}

@media (max-width: 576px) {
    .btn-group[b-fhojpk26uf] {
        flex-direction: column;
    }

    .btn-group .btn[b-fhojpk26uf] {
        border-radius: 4px !important;
        margin-bottom: 2px;
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 42px;
    }

    /* Botones buscar y nuevo cliente en móviles muy pequeños */
    .btn-outline-primary.btn-sm.flex-fill[b-fhojpk26uf],
    .btn-primary.btn-sm.flex-fill[b-fhojpk26uf] {
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 40px;
    }
}

/* Asegurar que todos los elementos usen Montserrat */
.clientes-container input[b-fhojpk26uf],
.clientes-container select[b-fhojpk26uf],
.clientes-container button[b-fhojpk26uf],
.clientes-container label[b-fhojpk26uf],
.clientes-container .form-control[b-fhojpk26uf],
.clientes-container .form-select[b-fhojpk26uf],
.clientes-container .btn[b-fhojpk26uf],
.clientes-container .table[b-fhojpk26uf],
.clientes-container .alert[b-fhojpk26uf],
.clientes-container .badge[b-fhojpk26uf] {
    font-family: var(--montserrat-font) !important;
}
/* /Components/Pages/Suplidor/EditarSuplidor.razor.rz.scp.css */
/* Formulario de editar cliente con dise�o limpio usando Montserrat - ELEMENTOS M�S PEQUE�OS */

/* Variables para asegurar consistencia tipogr�fica */
:root[b-bhei20uoaz] {
    --montserrat-font: 'Montserrat', Arial, Helvetica, sans-serif;
}

.clientes-container[b-bhei20uoaz] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px; /* ? MANTENIDO: padding uniforme de 12px en todos los lados */
    background: #ffffff; /* ? CAMBIADO: de #f8f9fa a blanco */
    font-family: var(--montserrat-font) !important;
}

/* ? Header azul con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para m�vil */
.page-header-blue[b-bhei20uoaz] {
    position: sticky; /* ? MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 10px; /* ? MANTENIDO: margen superior de 10px */
    left: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    right: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    z-index: 999; /* ? MANTENIDO: menor que dropdowns (1055) */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ? MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ? MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ? AUMENTADO: m�s padding vertical (era 10px) */
    margin-bottom: 16px; /* ? MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ? AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ? MANTENIDO: flexbox directo */
    align-items: center; /* ? MANTENIDO: centrado vertical */
    
    /* ? MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ? MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ? MANTENIDO: centrado horizontal */
    margin-right: auto; /* ? MANTENIDO: centrado horizontal */
}

/* ? CORREGIDO: Responsive optimizado para evitar overflow en m�vil */
@media (max-width: 768px) {
    .page-header-blue[b-bhei20uoaz] {
        max-width: calc(100% - 16px); /* ? M�VIL: ajustar al padding del container m�vil */
        padding: 14px 16px; /* ? AUMENTADO: m�s padding para elementos m�viles */
        height: auto; /* ? CR�TICO: altura autom�tica para permitir wrap */
        min-height: 70px; /* ? A�ADIDO: altura m�nima para garantizar espacio */
        top: 5px; /* ? MANTENIDO: menos margen superior en m�vil */
        flex-direction: column; /* ? MANTENIDO: stack vertical */
        justify-content: center; /* ? MANTENIDO: centrar contenido */
        gap: 10px; /* ? AUMENTADO: m�s espacio entre elementos stacked */
    }
    
    /* ? CORREGIDO: Permitir wrap completo en m�vil */
    .header-content[b-bhei20uoaz] {
        flex-direction: column; /* ? MANTENIDO: stack vertical en m�vil */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap en m�vil */
        gap: 10px; /* ? AUMENTADO: m�s gap en m�vil */
        width: 100%; /* ? ASEGURADO: usar   el ancho */
    }
    
    .title-section[b-bhei20uoaz] {
        text-align: center; /* ? MANTENIDO: centrar t�tulo en m�vil */
        width: 100%; /* ? MANTENIDO: usar   el ancho */
        flex-wrap: wrap; /* ? A�ADIDO: permitir wrap del t�tulo */
        justify-content: center; /* ? A�ADIDO: centrar contenido */
    }
    
    .header-actions[b-bhei20uoaz] {
        justify-content: center; /* ? MANTENIDO: centrar botones en m�vil */
        width: 100%; /* ? MANTENIDO: usar   el ancho */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap de botones en m�vil */
        gap: 8px; /* ? A�ADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header-blue[b-bhei20uoaz] {
        height: auto; /* ? CR�TICO: altura autom�tica */
        min-height: 65px; /* ? AJUSTADO: altura m�nima para pantallas peque�as */
        padding: 12px 12px; /* ? AJUSTADO: padding para pantallas peque�as */
    }
    
    .header-actions .btn[b-bhei20uoaz] {
        flex: 1 1 auto; /* ? A�ADIDO: botones flexibles en m�vil peque�o */
        max-width: 48%; /* ? A�ADIDO: m�ximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header-blue[b-bhei20uoaz] {
        min-height: 80px; /* ? AUMENTADO: m�s altura para pantallas muy peque�as */
        padding: 10px 8px; /* ? COMPACTO: padding m�nimo */
    }
    
    .header-actions .btn[b-bhei20uoaz] {
        flex: 1 1 100%; /* ? STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ? ANCHO COMPLETO: sin restricciones */
    }
}

/* ? Header con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para m�vil */
.page-header.fixed-header[b-bhei20uoaz] {
    position: sticky; /* ? MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 10px; /* ? MANTENIDO: margen superior de 10px */
    left: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    right: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    z-index: 999; /* ? MANTENIDO: menor que dropdowns (1055) */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ? MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ? MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ? AUMENTADO: m�s padding vertical (era 10px) */
    margin-bottom: 16px; /* ? MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ? AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ? MANTENIDO: flexbox directo */
    align-items: center; /* ? MANTENIDO: centrado vertical */
    
    /* ? MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ? MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ? MANTENIDO: centrado horizontal */
    margin-right: auto; /* ? MANTENIDO: centrado horizontal */
}

/* ? CORREGIDO: Responsive optimizado para evitar overflow en m�vil */
@media (max-width: 768px) {
    .page-header.fixed-header[b-bhei20uoaz] {
        max-width: calc(100% - 16px); /* ? M�VIL: ajustar al padding del container m�vil */
        padding: 14px 16px; /* ? AUMENTADO: m�s padding para elementos m�viles */
        height: auto; /* ? CR�TICO: altura autom�tica para permitir wrap */
        min-height: 70px; /* ? A�ADIDO: altura m�nima para garantizar espacio */
        top: 5px; /* ? MANTENIDO: menos margen superior en m�vil */
        flex-direction: column; /* ? MANTENIDO: stack vertical */
        justify-content: center; /* ? MANTENIDO: centrar contenido */
        gap: 10px; /* ? AUMENTADO: m�s espacio entre elementos stacked */
    }
    
    /* ? CORREGIDO: Permitir wrap completo en m�vil */
    .header-content[b-bhei20uoaz] {
        flex-direction: column; /* ? MANTENIDO: stack vertical en m�vil */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap en m�vil */
        gap: 10px; /* ? AUMENTADO: m�s gap en m�vil */
        width: 100%; /* ? ASEGURADO: usar   el ancho */
    }
    
    .title-section[b-bhei20uoaz] {
        text-align: center; /* ? MANTENIDO: centrar t�tulo en m�vil */
        width: 100%; /* ? MANTENIDO: usar   el ancho */
        flex-wrap: wrap; /* ? A�ADIDO: permitir wrap del t�tulo */
        justify-content: center; /* ? A�ADIDO: centrar contenido */
    }
    
    .header-actions[b-bhei20uoaz] {
        justify-content: center; /* ? MANTENIDO: centrar botones en m�vil */
        width: 100%; /* ? MANTENIDO: usar   el ancho */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap de botones en m�vil */
        gap: 8px; /* ? A�ADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header.fixed-header[b-bhei20uoaz] {
        height: auto; /* ? CR�TICO: altura autom�tica */
        min-height: 65px; /* ? AJUSTADO: altura m�nima para pantallas peque�as */
        padding: 12px 12px; /* ? AJUSTADO: padding para pantallas peque�as */
    }
    
    .header-actions .btn[b-bhei20uoaz] {
        flex: 1 1 auto; /* ? A�ADIDO: botones flexibles en m�vil peque�o */
        max-width: 48%; /* ? A�ADIDO: m�ximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header.fixed-header[b-bhei20uoaz] {
        min-height: 80px; /* ? AUMENTADO: m�s altura para pantallas muy peque�as */
        padding: 10px 8px; /* ? COMPACTO: padding m�nimo */
    }
    
    .header-actions .btn[b-bhei20uoaz] {
        flex: 1 1 100%; /* ? STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ? ANCHO COMPLETO: sin restricciones */
    }
}

/* ? MANTENIDO: Contenido del header en una sola l�nea SOLO para desktop */
.header-content[b-bhei20uoaz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* ? SOLO para desktop: nunca hacer wrap */
    gap: 20px; /* ? MANTENIDO: espacio entre elementos */
    width: 100%; /* ? MANTENIDO: usar   el ancho disponible */
}

.title-section[b-bhei20uoaz] {
    flex: 1; /* ? MANTENIDO: usar espacio flexible */
    min-width: 0; /* ? CR�TICO: permitir shrinking */
    position: relative;
    display: flex;
    align-items: center; /* ? MANTENIDO: alineaci�n vertical */
}

/* ? ACTUALIZADO: T�tulo m�s grande aprovechando la nueva altura */
.page-title[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    font-size: 18px; /* ? AUMENTADO: de 17px a 18px para aprovechar m�s altura */
    font-weight: 600;
    color: #ffffff;
    margin: 0; /* ? MANTENIDO: sin m�rgenes */
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    position: relative;
    white-space: nowrap; /* ? MANTENIDO: no hacer wrap del t�tulo en desktop */
}

/* ? RESPONSIVE: Permitir wrap del t�tulo en m�vil */
@media (max-width: 768px) {
    .page-title[b-bhei20uoaz] {
        white-space: normal; /* ? CR�TICO: permitir wrap en m�vil */
        text-align: center; /* ? CENTRADO: t�tulo centrado en m�vil */
        flex-wrap: wrap; /* ? PERMITIR WRAP: t�tulo puede hacer wrap */
    }
}

/* ? MANTENIDO: sin l�nea decorativa */
.page-title[b-bhei20uoaz]::after {
    display: none; /* ? ELIMINADO: sin l�nea decorativa */
}

.page-title i[b-bhei20uoaz] {
    color: #ffffff;
    margin-right: 8px; /* ? MANTENIDO: separaci�n */
    background: rgba(255,255,255,0.15);
    padding: 8px; /* ? AUMENTADO: de 7px a 8px para aprovechar m�s altura */
    border-radius: 4px; /* ? MANTENIDO: bordes m�s grandes */
    font-size: 16px; /* ? AUMENTADO: de 15px a 16px para m�s visibilidad */
}

/* ? ACTUALIZADO: Subt�tulo m�s grande */
.page-subtitle[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* ? AUMENTADO: de 13px a 14px para m�s legibilidad */
    color: rgba(255,255,255,0.75);
    margin: 0 0 0 15px; /* ? MANTENIDO: margen izquierdo para separar del t�tulo */
    font-weight: 400;
    white-space: nowrap; /* ? MANTENIDO para desktop: no hacer wrap */
}

/* ? RESPONSIVE: Permitir wrap del subt�tulo en m�vil */
@media (max-width: 768px) {
    .page-subtitle[b-bhei20uoaz] {
        white-space: normal; /* ? CR�TICO: permitir wrap en m�vil */
        margin: 0; /* ? SIN MARGEN: centrado en m�vil */
        text-align: center; /* ? CENTRADO: subt�tulo centrado en m�vil */
    }
    
    .page-subtitle[b-bhei20uoaz]::before {
        display: none; /* ? SIN SEPARADOR: quitar bullet en m�vil */
    }
}

/* ? MANTENIDO: Separador visual entre t�tulo y subt�tulo SOLO desktop */
.page-subtitle[b-bhei20uoaz]::before {
    content: "�";
    margin-right: 8px;
    color: rgba(255,255,255,0.5);
}

.header-actions[b-bhei20uoaz] {
    display: flex;
    gap: 12px; /* ? MANTENIDO: espacio entre botones */
    flex-wrap: nowrap; /* ? SOLO para desktop: botones en l�nea */
    flex-shrink: 0; /* ? MANTENIDO: los botones no se encogen */
}

/* ? ACTUALIZADO: Botones del header un 30% m�s peque�os */
.header-actions .btn[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600; /* ? MANTENIDO: m�s peso */
    font-size: 10.5px; /* ? REDUCIDO 30%: de 15px a 10.5px */
    padding: 8.4px 14px; /* ? REDUCIDO 30%: de 12px 20px a 8.4px 14px */
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap; /* ? MANTENIDO: texto en una l�nea */
    min-height: 29.4px; /* ? REDUCIDO 30%: de 42px a 29.4px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-actions .btn-secondary[b-bhei20uoaz] {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
}

.header-actions .btn-secondary:hover[b-bhei20uoaz] {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.header-actions .btn-primary[b-bhei20uoaz] {
    background: rgba(255,255,255,0.9);
    color: #0440b8; /* ? MANTENIDO: nuevo azul vibrante */
    border-color: rgba(255,255,255,0.9);
}

.header-actions .btn-primary:hover[b-bhei20uoaz] {
    background: #ffffff;
    color: #032e7a; /* ? MANTENIDO: azul oscuro */
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* ? AJUSTADO: Form content con el mismo ancho que el header */
.form-content.with-fixed-header[b-bhei20uoaz] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin: 0;
    /* ? ELIMINADO: margin-top ya que el header no es fixed */
    font-family: var(--montserrat-font) !important;
    
    /* ? A�ADIDO: Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px); /* ? MISMO ANCHO: que el page-header */
    margin-left: auto; /* ? MISMO CENTRADO: horizontal autom�tico */
    margin-right: auto; /* ? MISMO CENTRADO: horizontal autom�tico */
}

/* ? RESPONSIVE: Ajustar form-content para m�vil igual que el header */
@media (max-width: 768px) {
    .form-content.with-fixed-header[b-bhei20uoaz] {
        max-width: calc(100% - 16px); /* ? M�VIL: mismo ajuste que el header */
        padding: 12px; /* ? MANTENIDO: padding reducido en m�vil */
        font-family: var(--montserrat-font) !important;
    }
}

/* Secciones del formulario - M�S COMPACTAS */
.form-section[b-bhei20uoaz] {
    margin-bottom: 20px; /* Reducido de 25px */
    padding-bottom: 16px; /* Reducido de 20px */
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-bhei20uoaz] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de secci�n con Montserrat - M�S PEQUE�OS */
.section-header[b-bhei20uoaz] {
    margin-bottom: 12px; /* Reducido de 15px */
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.section-title[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* Reducido de 16px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin: 0 0 6px 0; /* A�adido margin-bottom para la l�nea */
    padding: 0 0 4px 0; /* A�adido padding-bottom para la l�nea */
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

/* L�nea debajo de cada t�tulo de secci�n con color primario */
.section-title[b-bhei20uoaz]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #0440b8 0%, #3366d1 40%, rgba(4, 64, 184, 0.2) 70%, transparent 100%); /* ? ACTUALIZADO: nueva paleta azul vibrante */
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2); /* ? ACTUALIZADO: nueva paleta azul */
}

.section-title i[b-bhei20uoaz] {
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin-right: 6px; /* Reducido de 8px */
    font-size: 14px; /* Reducido de 16px */
    background: rgba(4, 64, 184, 0.1); /* ? ACTUALIZADO: nueva paleta azul */
    padding: 4px; /* Reducido de 6px */
    border-radius: 3px; /* Reducido de 4px */
    width: 24px; /* Reducido de 28px */
    height: 24px; /* Reducido de 28px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenido de secci�n */
.section-content[b-bhei20uoaz] {
    padding: 0;
    background: none;
    border: none;
}

/* Grupos de formulario m�s compactos - M�S PEQUE�OS */
.form-group[b-bhei20uoaz] {
    margin-bottom: 10px; /* Reducido de 12px */
}

.form-label[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    color: #495057;
    margin-bottom: 3px; /* Reducido de 4px */
    font-size: 11px; /* Reducido de 12px */
}

.form-label.required[b-bhei20uoaz]::after {
    content: " *";
    color: #dc3545;
}

/* Controles de formulario m�s peque�os - M�S COMPACTOS */
.form-control-sm[b-bhei20uoaz],
.form-select-sm[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 400;
    border: 1px solid #ced4da;
    border-radius: 3px; /* Reducido de 4px */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: auto;
    line-height: 1.3; /* M�s compacto */
}

.form-control-sm:focus[b-bhei20uoaz],
.form-select-sm:focus[b-bhei20uoaz] {
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    box-shadow: 0 0 0 0.1rem rgba(4, 64, 184, 0.12); /* ? ACTUALIZADO: nueva paleta azul */
}

.form-control-sm[b-bhei20uoaz]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    color: #6c757d;
    font-size: 10px; /* M�s peque�o */
}

/* Input groups m�s compactos - M�S PEQUE�OS */
.input-group-sm .btn-sm[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 10px; /* Reducido de 11px */
    font-weight: 500;
    border-color: #ced4da;
}

.input-group-sm .input-group-text[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 500;
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
}

/* Espaciado de filas m�s compacto - M�S AJUSTADO */
.row.g-1[b-bhei20uoaz] {
    --bs-gutter-x: 0.4rem; /* Reducido de 0.5rem */
    --bs-gutter-y: 0.2rem; /* Reducido de 0.25rem */
}

/* Alerts m�s compactos - M�S PEQUE�OS */
.alert.mt-1.p-1.small[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    padding: 0.2rem 0.3rem !important; /* Reducido */
    margin-top: 0.2rem !important; /* Reducido */
    font-size: 0.65rem; /* Reducido de 0.7rem */
    font-weight: 400;
}

/* Validation messages m�s peque�os - M�S COMPACTOS */
.validation-message[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    color: #dc3545;
    font-size: 9px; /* Reducido de 10px */
    font-weight: 400;
    margin-top: 1px;
    display: block;
}

/* Botones m�s compactos - M�S PEQUE�OS */
.btn[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    border-radius: 3px; /* Reducido de 4px */
    transition: all 0.2s ease-in-out;
    font-size: 11px; /* Reducido de 12px */
}

.btn-sm[b-bhei20uoaz] {
    padding: 3px 8px; /* Reducido de 4px 10px */
    font-size: 10px; /* Reducido de 11px */
    font-weight: 500;
}

.btn-primary[b-bhei20uoaz] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
}

.btn-primary:hover[b-bhei20uoaz] {
    background-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    transform: translateY(-1px);
}

.btn-secondary[b-bhei20uoaz] {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-primary[b-bhei20uoaz] {
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
}

.btn-outline-primary:hover[b-bhei20uoaz] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-danger[b-bhei20uoaz] {
    color: #dc3545;
    border-color: #dc3545;
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
}

.btn-outline-danger:hover[b-bhei20uoaz] {
    transform: translateY(-1px);
}

/* TextArea m�s compacto - M�S PEQUE�O */
textarea.form-control-sm[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    min-height: 50px; /* Reducido de 60px */
    resize: vertical;
    font-weight: 400;
    font-size: 11px; /* A�adido para consistencia */
    line-height: 1.3; /* M�s compacto */
}

textarea.form-control-sm[b-bhei20uoaz]::placeholder {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 10px; /* M�s peque�o */
}

/* Estilos para los modales de Bootstrap - M�S COMPACTOS */
.modal-content[b-bhei20uoaz] {
    border-radius: 6px; /* Reducido de 8px */
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* M�s sutil */
    font-family: var(--montserrat-font) !important;
}

.modal-header[b-bhei20uoaz] {
    border-bottom: 1px solid #dee2e6;
    padding: 0.8rem 1.2rem; /* Reducido de 1rem 1.5rem */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? ACTUALIZADO: nueva paleta azul vibrante */
    color: #ffffff;
}

.modal-title[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 14px; /* Reducido de 16px */
    color: #ffffff;
}

.modal-title i[b-bhei20uoaz] {
    color: #ffffff;
    margin-right: 6px; /* Reducido de 8px */
}

.modal-body[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    padding: 1rem; /* Reducido de 1.25rem */
}

.modal-footer[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    border-top: 1px solid #dee2e6;
    padding: 0.6rem 1rem; /* Reducido */
}

/* Close button para modales */
.btn-close[b-bhei20uoaz] {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Separaci�n del contenedor principal - M�S COMPACTA */
.clientes-container > * + *[b-bhei20uoaz] {
    margin-top: 12px; /* Reducido de 15px */
}

/* Alerts de error y �xito con Montserrat - M�S PEQUE�OS */
.alert[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 12px; /* A�adido para controlar tama�o */
    padding: 8px 12px; /* M�s compacto */
}

.alert-danger[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
}

.alert-success[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
}

/* Select options con Montserrat - M�S PEQUE�OS */
.form-select-sm option[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    font-weight: 400;
    font-size: 11px;
}

/* Spinner con Montserrat - M�S PEQUE�O */
.spinner-border-sm[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
    width: 0.9rem; /* Reducido */
    height: 0.9rem; /* Reducido */
}

/* Loading state specific styles */
.text-center.py-5[b-bhei20uoaz] {
    padding: 2rem 0 !important;
}

.spinner-border.text-primary[b-bhei20uoaz] {
    color: #0440b8 !important; /* ? ACTUALIZADO: nuevo azul vibrante */
}

/* ? RESPONSIVE DESIGN - Corregido para evitar overflow en m�vil */
@media (max-width: 768px) {
    .clientes-container[b-bhei20uoaz] {
        padding: 8px;
        font-family: var(--montserrat-font) !important;
    }

    .page-title[b-bhei20uoaz] {
        font-size: 16px; /* ? AUMENTADO: de 15px a 16px aprovechando m�s altura */
        font-family: var(--montserrat-font) !important;
    }
    
    .page-subtitle[b-bhei20uoaz] {
        font-size: 12px; /* ? AUMENTADO: de 11px a 12px para mejor legibilidad */
        margin-left: 0; /* ? CORREGIDO: sin margen en m�vil */
    }

    .header-actions .btn[b-bhei20uoaz] {
        font-size: 9.1px; /* ? REDUCIDO 30%: de 13px a 9.1px aprovechando m�s altura */
        padding: 7px 11.2px; /* ? REDUCIDO 30%: de 10px 16px a 7px 11.2px */
        min-height: 28px; /* ? REDUCIDO 30%: de 40px a 28px */
    }

    .section-title[b-bhei20uoaz] {
        font-size: 13px;
        font-family: var(--montserrat-font) !important;
    }

    .form-content.with-fixed-header[b-bhei20uoaz] {
        padding: 12px;
        font-family: var(--montserrat-font) !important;
    }

    .col-lg-4[b-bhei20uoaz], .col-lg-3[b-bhei20uoaz], .col-lg-2[b-bhei20uoaz] {
        margin-bottom: 6px;
    }

    .section-title[b-bhei20uoaz]::after {
        height: 0.5px;
    }
}

@media (max-width: 576px) {
    .page-title[b-bhei20uoaz] {
        font-size: 15px; /* ? AUMENTADO: de 14px a 15px */
        font-family: var(--montserrat-font) !important;
    }

    .page-subtitle[b-bhei20uoaz] {
        font-size: 11px; /* ? AUMENTADO: de 10px a 11px */
    }

    .header-actions .btn[b-bhei20uoaz] {
        font-size: 12px; /* ? AUMENTADO: de 11px a 12px */
        padding: 8px 12px; /* ? AUMENTADO: m�s padding */
        min-height: 36px; /* ? AUMENTADO: de 32px a 36px */
    }

    .form-control-sm[b-bhei20uoaz],
    .form-select-sm[b-bhei20uoaz] {
        font-size: 12px;
        font-family: var(--montserrat-font) !important;
    }
}

/* Estados disabled para campos - M�S PEQUE�OS */
.form-control-sm:disabled[b-bhei20uoaz],
.form-select-sm:disabled[b-bhei20uoaz] {
    background-color: #f8f9fa;
    opacity: 0.75;
    border-color: #e9ecef;
    font-family: var(--montserrat-font) !important;
}

/* Mejoras para input groups */
.input-group-sm .form-control-sm[b-bhei20uoaz],
.input-group-sm .form-select-sm[b-bhei20uoaz] {
    border-right: 1px solid #ced4da;
}

.input-group-sm .form-control-sm:focus[b-bhei20uoaz],
.input-group-sm .form-select-sm:focus[b-bhei20uoaz] {
    z-index: 3;
}

/* Espaciado entre filas de formulario - M�S COMPACTO */
.form-section .row + .row[b-bhei20uoaz] {
    margin-top: 6px; /* Reducido de 8px */
}

/* Efectos adicionales para mantener consistencia con el proyecto */
.btn-primary:not(:disabled):not(.disabled):active[b-bhei20uoaz],
.btn-primary:not(:disabled):not(.disabled).active[b-bhei20uoaz] {
    background-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
}

.btn-outline-primary:not(:disabled):not(.disabled):active[b-bhei20uoaz],
.btn-outline-primary:not(:disabled):not(.disabled).active[b-bhei20uoaz] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
}

/* Asegurar que todos los elementos de formulario usen Montserrat - M�S PEQUE�OS */
.clientes-container input[b-bhei20uoaz],
.clientes-container select[b-bhei20uoaz],
.clientes-container textarea[b-bhei20uoaz],
.clientes-container button[b-bhei20uoaz],
.clientes-container label[b-bhei20uoaz],
.clientes-container .form-control[b-bhei20uoaz],
.clientes-container .form-select[b-bhei20uoaz],
.clientes-container .btn[b-bhei20uoaz],
.clientes-container .input-group-text[b-bhei20uoaz],
.clientes-container .alert[b-bhei20uoaz],
.clientes-container .validation-message[b-bhei20uoaz] {
    font-family: var(--montserrat-font) !important;
}

/* Ajustes espec�ficos para hacer columnas m�s compactas */
.col-lg-2[b-bhei20uoaz], .col-lg-3[b-bhei20uoaz], .col-lg-4[b-bhei20uoaz], .col-lg-5[b-bhei20uoaz] {
    padding-left: 0.3rem; /* Reducido */
    padding-right: 0.3rem; /* Reducido */
}

/* Iconos de botones m�s peque�os */
.btn i[b-bhei20uoaz] {
    font-size: 0.85em; /* Iconos proporcionalmente m�s peque�os */
}

.header-actions .btn i[b-bhei20uoaz] {
    font-size: 1em; /* ? MANTENIDO: iconos m�s visibles en header */
    margin-right: 6px; /* ? MANTENIDO: separaci�n del texto */
}

/* ============================= */
/* FOOTER M�VIL FIJO */
/* ============================= */

/* Footer m�vil - Solo visible en dispositivos m�viles */
.mobile-footer[b-bhei20uoaz] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* ? Alto z-index para estar sobre t odo */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? Mismo gradiente que el header */
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -2px 8px rgba(4, 64, 184, 0.15); /* ? Sombra hacia arriba */
    backdrop-filter: blur(8px);
    padding: 12px;
    font-family: var(--montserrat-font) !important;
}

/* Contenido del footer - flexbox para distribuir botones */
.mobile-footer-content[b-bhei20uoaz] {
    display: flex;
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

/* Botones del footer m�vil - ? REDUCIDOS 30% */
.mobile-footer-btn[b-bhei20uoaz] {
    flex: 1; /* ? Ambos botones ocupan el mismo espacio */
    font-family: var(--montserrat-font) !important;
    font-weight: 600;
    font-size: 11.2px; /* ? REDUCIDO 30%: de 16px a 11.2px */
    padding: 9.8px 14px; /* ? REDUCIDO 30%: de 14px 20px a 9.8px 14px */
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    min-height: 35px; /* ? REDUCIDO 30%: de 50px a 35px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px; /* ? Bordes redondeados */
}

/* Bot�n Cancelar (secundario) en footer m�vil */
.mobile-footer .btn-secondary[b-bhei20uoaz] {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    border-color: rgba(255,255,255,0.4);
}

.mobile-footer .btn-secondary:hover[b-bhei20uoaz],
.mobile-footer .btn-secondary:active[b-bhei20uoaz] {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Bot�n Actualizar (primario) en footer m�vil */
.mobile-footer .btn-primary[b-bhei20uoaz] {
    background: rgba(255,255,255,0.95);
    color: #0440b8; /* ? Azul vibrante */
    border-color: rgba(255,255,255,0.95);
    font-weight: 700; /* ? M�s peso para el bot�n principal */
}

.mobile-footer .btn-primary:hover[b-bhei20uoaz],
.mobile-footer .btn-primary:active[b-bhei20uoaz] {
    background: #ffffff;
    color: #032e7a; /* ? Azul oscuro */
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* Bot�n deshabilitado en footer m�vil */
.mobile-footer .btn:disabled[b-bhei20uoaz] {
    opacity: 0.6;
    transform: none;
}

/* Ocultar los botones del header en m�vil para evitar duplicaci�n */
@media (max-width: 767.98px) {
    .header-actions[b-bhei20uoaz] {
        display: none; /* ? Ocultar botones del header en m�vil */
    }
}

/* Agregar padding inferior al contenido para compensar el footer fijo */
@media (max-width: 767.98px) {
    .clientes-container[b-bhei20uoaz] {
        padding-bottom: 90px; /* ? Espacio para el footer fijo */
    }
}

/* Responsive para m�viles muy peque�os */
@media (max-width: 480px) {
    .mobile-footer[b-bhei20uoaz] {
        padding: 10px 8px; /* ? Padding m�s compacto */
    }
    
    .mobile-footer-btn[b-bhei20uoaz] {
        font-size: 10.5px; /* ? REDUCIDO 30%: de 15px a 10.5px */
        padding: 8.4px 11.2px; /* ? REDUCIDO 30%: de 12px 16px a 8.4px 11.2px */
        min-height: 32.2px; /* ? REDUCIDO 30%: de 46px a 32.2px */
    }
    
    .mobile-footer-content[b-bhei20uoaz] {
        gap: 8px; /* ? Gap reducido */
    }
    
    .header-actions .btn[b-bhei20uoaz] {
        font-size: 8.4px; /* ? REDUCIDO 30%: de 12px a 8.4px */
        padding: 5.6px 8.4px; /* ? REDUCIDO 30%: de 8px 12px a 5.6px 8.4px */
        min-height: 25.2px; /* ? REDUCIDO 30%: de 36px a 25.2px */
    }
}
/* /Components/Pages/Suplidor/VerSuplidor.razor.rz.scp.css */
/* Formulario de ver cliente con dise�o limpio usando Montserrat - ELEMENTOS M�S PEQUE�OS */

/* Variables para asegurar consistencia tipogr�fica */
:root[b-k7pujc2uj0] {
    --montserrat-font: 'Montserrat', Arial, Helvetica, sans-serif;
}

.clientes-container[b-k7pujc2uj0] {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px; /* ? MANTENIDO: padding uniforme de 12px en todos los lados */
    background: #ffffff; /* ? CAMBIADO: de #f8f9fa a blanco */
    font-family: var(--montserrat-font) !important;
}

/* ? Header azul con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para m�vil */
.page-header-blue[b-k7pujc2uj0] {
    position: sticky; /* ? MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 10px; /* ? MANTENIDO: margen superior de 10px */
    left: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    right: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    z-index: 999; /* ? MANTENIDO: menor que dropdowns (1055) */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ? MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ? MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ? AUMENTADO: m�s padding vertical (era 10px) */
    margin-bottom: 16px; /* ? MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ? AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ? MANTENIDO: flexbox directo */
    align-items: center; /* ? MANTENIDO: centrado vertical */
    
    /* ? MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ? MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ? MANTENIDO: centrado horizontal */
    margin-right: auto; /* ? MANTENIDO: centrado horizontal */
}

/* ? CORREGIDO: Responsive optimizado para evitar overflow en m�vil */
@media (max-width: 768px) {
    .page-header-blue[b-k7pujc2uj0] {
        max-width: calc(100% - 16px); /* ? M�VIL: ajustar al padding del container m�vil */
        padding: 14px 16px; /* ? AUMENTADO: m�s padding para elementos m�viles */
        height: auto; /* ? CR�TICO: altura autom�tica para permitir wrap */
        min-height: 70px; /* ? A�ADIDO: altura m�nima para garantizar espacio */
        top: 5px; /* ? MANTENIDO: menos margen superior en m�vil */
        flex-direction: column; /* ? MANTENIDO: stack vertical */
        justify-content: center; /* ? MANTENIDO: centrar contenido */
        gap: 10px; /* ? AUMENTADO: m�s espacio entre elementos stacked */
    }
    
    /* ? CORREGIDO: Permitir wrap completo en m�vil */
    .header-content[b-k7pujc2uj0] {
        flex-direction: column; /* ? MANTENIDO: stack vertical en m�vil */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap en m�vil */
        gap: 10px; /* ? AUMENTADO: m�s gap en m�vil */
        width: 100%; /* ? ASEGURADO: usar t odo el ancho */
    }
    
    .title-section[b-k7pujc2uj0] {
        text-align: center; /* ? MANTENIDO: centrar t�tulo en m�vil */
        width: 100%; /* ? MANTENIDO: usar t odo el ancho */
        flex-wrap: wrap; /* ? A�ADIDO: permitir wrap del t�tulo */
        justify-content: center; /* ? A�ADIDO: centrar contenido */
    }
    
    .header-actions[b-k7pujc2uj0] {
        justify-content: center; /* ? MANTENIDO: centrar botones en m�vil */
        width: 100%; /* ? MANTENIDO: usar t odo el ancho */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap de botones en m�vil */
        gap: 8px; /* ? A�ADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header-blue[b-k7pujc2uj0] {
        height: auto; /* ? CR�TICO: altura autom�tica */
        min-height: 65px; /* ? AJUSTADO: altura m�nima para pantallas peque�as */
        padding: 12px 12px; /* ? AJUSTADO: padding para pantallas peque�as */
    }
    
    .header-actions .btn[b-k7pujc2uj0] {
        flex: 1 1 auto; /* ? A�ADIDO: botones flexibles en m�vil peque�o */
        max-width: 48%; /* ? A�ADIDO: m�ximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header-blue[b-k7pujc2uj0] {
        min-height: 80px; /* ? AUMENTADO: m�s altura para pantallas muy peque�as */
        padding: 10px 8px; /* ? COMPACTO: padding m�nimo */
    }
    
    .header-actions .btn[b-k7pujc2uj0] {
        flex: 1 1 100%; /* ? STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ? ANCHO COMPLETO: sin restricciones */
    }
}

/* ? Header con altura aumentada 60% total (30% + 30% adicional) y overflow corregido para m�vil */
.page-header.fixed-header[b-k7pujc2uj0] {
    position: sticky; /* ? MANTENIDO: sticky para que siga el scroll del contenedor */
    top: 10px; /* ? MANTENIDO: margen superior de 10px */
    left: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    right: auto; /* ? MANTENIDO: auto para centrado autom�tico */
    z-index: 999; /* ? MANTENIDO: menor que dropdowns (1055) */
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%); /* ? MANTENIDO: nueva paleta azul */
    border-radius: 6px; /* ? MANTENIDO: bordes redondeados */
    box-shadow: 0 2px 8px rgba(4, 64, 184, 0.15); /* ? MANTENIDO: sombra sutil */
    padding: 13px 20px; /* ? AUMENTADO: m�s padding vertical (era 10px) */
    margin-bottom: 16px; /* ? MANTENIDO: margen inferior para separar del contenido */
    border: none;
    font-family: var(--montserrat-font) !important;
    backdrop-filter: blur(8px);
    height: 68px; /* ? AUMENTADO 70%: de 40px original a 68px (30% + 40% adicional) */
    display: flex; /* ? MANTENIDO: flexbox directo */
    align-items: center; /* ? MANTENIDO: centrado vertical */
    
    /* ? MANTENIDO: Mismo ancho que el contenido del formulario */
    max-width: calc(100% - 24px); /* ? MANTENIDO: mismo ancho que form-content */
    margin-left: auto; /* ? MANTENIDO: centrado horizontal */
    margin-right: auto; /* ? MANTENIDO: centrado horizontal */
}

/* ? CORREGIDO: Responsive optimizado para evitar overflow en m�vil */
@media (max-width: 768px) {
    .page-header.fixed-header[b-k7pujc2uj0] {
        max-width: calc(100% - 16px); /* ? M�VIL: ajustar al padding del container m�vil */
        padding: 14px 16px; /* ? AUMENTADO: m�s padding para elementos m�viles */
        height: auto; /* ? CR�TICO: altura autom�tica para permitir wrap */
        min-height: 70px; /* ? A�ADIDO: altura m�nima para garantizar espacio */
        top: 5px; /* ? MANTENIDO: menos margen superior en m�vil */
        flex-direction: column; /* ? MANTENIDO: stack vertical */
        justify-content: center; /* ? MANTENIDO: centrar contenido */
        gap: 10px; /* ? AUMENTADO: m�s espacio entre elementos stacked */
    }
    
    /* ? CORREGIDO: Permitir wrap completo en m�vil */
    .header-content[b-k7pujc2uj0] {
        flex-direction: column; /* ? MANTENIDO: stack vertical en m�vil */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap en m�vil */
        gap: 10px; /* ? AUMENTADO: m�s gap en m�vil */
        width: 100%; /* ? ASEGURADO: usar t odo el ancho */
    }
    
    .title-section[b-k7pujc2uj0] {
        text-align: center; /* ? MANTENIDO: centrar t�tulo en m�vil */
        width: 100%; /* ? MANTENIDO: usar t odo el ancho */
        flex-wrap: wrap; /* ? A�ADIDO: permitir wrap del t�tulo */
        justify-content: center; /* ? A�ADIDO: centrar contenido */
    }
    
    .header-actions[b-k7pujc2uj0] {
        justify-content: center; /* ? MANTENIDO: centrar botones en m�vil */
        width: 100%; /* ? MANTENIDO: usar t odo el ancho */
        flex-wrap: wrap; /* ? CR�TICO: permitir wrap de botones en m�vil */
        gap: 8px; /* ? A�ADIDO: espacio entre botones wrapped */
    }
}

@media (max-width: 640px) {
    .page-header.fixed-header[b-k7pujc2uj0] {
        height: auto; /* ? CR�TICO: altura autom�tica */
        min-height: 65px; /* ? AJUSTADO: altura m�nima para pantallas peque�as */
        padding: 12px 12px; /* ? AJUSTADO: padding para pantallas peque�as */
    }
    
    .header-actions .btn[b-k7pujc2uj0] {
        flex: 1 1 auto; /* ? A�ADIDO: botones flexibles en m�vil peque�o */
        max-width: 48%; /* ? A�ADIDO: m�ximo 48% de ancho para 2 por fila */
    }
}

@media (max-width: 480px) {
    .page-header.fixed-header[b-k7pujc2uj0] {
        min-height: 80px; /* ? AUMENTADO: m�s altura para pantallas muy peque�as */
        padding: 10px 8px; /* ? COMPACTO: padding m�nimo */
    }
    
    .header-actions .btn[b-k7pujc2uj0] {
        flex: 1 1 100%; /* ? STACK COMPLETO: botones ocupan ancho completo */
        max-width: 100%; /* ? ANCHO COMPLETO: sin restricciones */
    }
}

/* ? MANTENIDO: Contenido del header en una sola l�nea SOLO para desktop */
.header-content[b-k7pujc2uj0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* ? SOLO para desktop: nunca hacer wrap */
    gap: 20px; /* ? MANTENIDO: espacio entre elementos */
    width: 100%; /* ? MANTENIDO: usar t odo el ancho disponible */
}

.title-section[b-k7pujc2uj0] {
    flex: 1; /* ? MANTENIDO: usar espacio flexible */
    min-width: 0; /* ? CR�TICO: permitir shrinking */
    position: relative;
    display: flex;
    align-items: center; /* ? MANTENIDO: alineaci�n vertical */
}

/* ? ACTUALIZADO: T�tulo m�s grande aprovechando la nueva altura */
.page-title[b-k7pujc2uj0] {
    font-family: var(--montserrat-font) !important;
    font-size: 18px; /* ? AUMENTADO: de 17px a 18px para aprovechar m�s altura */
    font-weight: 600;
    color: #ffffff;
    margin: 0; /* ? MANTENIDO: sin m�rgenes */
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    position: relative;
    white-space: nowrap; /* ? MANTENIDO: no hacer wrap del t�tulo en desktop */
}

/* ? RESPONSIVE: Permitir wrap del t�tulo en m�vil */
@media (max-width: 768px) {
    .page-title[b-k7pujc2uj0] {
        white-space: normal; /* ? CR�TICO: permitir wrap en m�vil */
        text-align: center; /* ? CENTRADO: t�tulo centrado en m�vil */
        flex-wrap: wrap; /* ? PERMITIR WRAP: t�tulo puede hacer wrap */
    }
}

/* ? MANTENIDO: sin l�nea decorativa */
.page-title[b-k7pujc2uj0]::after {
    display: none; /* ? ELIMINADO: sin l�nea decorativa */
}

.page-title i[b-k7pujc2uj0] {
    color: #ffffff;
    margin-right: 8px; /* ? MANTENIDO: separaci�n */
    background: rgba(255,255,255,0.15);
    padding: 8px; /* ? AUMENTADO: de 7px a 8px para aprovechar m�s altura */
    border-radius: 4px; /* ? MANTENIDO: bordes m�s grandes */
    font-size: 16px; /* ? AUMENTADO: de 15px a 16px para m�s visibilidad */
}

/* ? ACTUALIZADO: Subt�tulo m�s grande */
.page-subtitle[b-k7pujc2uj0] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* ? AUMENTADO: de 13px a 14px para m�s legibilidad */
    color: rgba(255,255,255,0.75);
    margin: 0 0 0 15px; /* ? MANTENIDO: margen izquierdo para separar del t�tulo */
    font-weight: 400;
    white-space: nowrap; /* ? MANTENIDO para desktop: no hacer wrap */
}

/* ? RESPONSIVE: Permitir wrap del subt�tulo en m�vil */
@media (max-width: 768px) {
    .page-subtitle[b-k7pujc2uj0] {
        white-space: normal; /* ? CR�TICO: permitir wrap en m�vil */
        margin: 0; /* ? SIN MARGEN: centrado en m�vil */
        text-align: center; /* ? CENTRADO: subt�tulo centrado en m�vil */
    }
    
    .page-subtitle[b-k7pujc2uj0]::before {
        display: none; /* ? SIN SEPARADOR: quitar bullet en m�vil */
    }
}

/* ? MANTENIDO: Separador visual entre t�tulo y subt�tulo SOLO desktop */
.page-subtitle[b-k7pujc2uj0]::before {
    content: "�";
    margin-right: 8px;
    color: rgba(255,255,255,0.5);
}

.header-actions[b-k7pujc2uj0] {
    display: flex;
    gap: 12px; /* ? MANTENIDO: espacio entre botones */
    flex-wrap: nowrap; /* ? SOLO para desktop: botones en l�nea */
    flex-shrink: 0; /* ? MANTENIDO: los botones no se encogen */
}

/* ? ACTUALIZADO: Botones m�s grandes aprovechando la nueva altura */
.header-actions .btn[b-k7pujc2uj0] {
    font-family: var(--montserrat-font) !important;
    font-weight: 600; /* ? MANTENIDO: m�s peso */
    font-size: 15px; /* ? AUMENTADO: de 14px a 15px */
    padding: 12px 20px; /* ? AUMENTADO: de 10px 18px a 12px 20px */
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap; /* ? MANTENIDO: texto en una l�nea */
    min-height: 42px; /* ? AUMENTADO: de 38px a 42px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-actions .btn-secondary[b-k7pujc2uj0] {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
}

.header-actions .btn-secondary:hover[b-k7pujc2uj0] {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.header-actions .btn-primary[b-k7pujc2uj0] {
    background: rgba(255,255,255,0.9);
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: rgba(255,255,255,0.9);
}

.header-actions .btn-primary:hover[b-k7pujc2uj0] {
    background: #ffffff;
    color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* ? AJUSTADO: Form content con el mismo ancho que el header */
.form-content.with-fixed-header[b-k7pujc2uj0] {
    background: #fff;
    border-radius: 6px; /* Reducido de 8px */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* M�s sutil */
    border: 1px solid #e9ecef;
    padding: 16px; /* Reducido de 20px */
    margin: 0;
    /* ? ELIMINADO: margin-top ya que el header no es fixed */
    font-family: var(--montserrat-font) !important;
    
    /* ? A�ADIDO: Mismo ancho y centrado que el page-header */
    max-width: calc(100% - 24px); /* ? MISMO ANCHO: que el page-header */
    margin-left: auto; /* ? MISMO CENTRADO: horizontal autom�tico */
    margin-right: auto; /* ? MISMO CENTRADO: horizontal autom�tico */
}

/* ? RESPONSIVE: Ajustar form-content para m�vil igual que el header */
@media (max-width: 768px) {
    .form-content.with-fixed-header[b-k7pujc2uj0] {
        max-width: calc(100% - 16px); /* ? M�VIL: mismo ajuste que el header */
        padding: 12px; /* ? MANTENIDO: padding reducido en m�vil */
        font-family: var(--montserrat-font) !important;
    }
}

/* Secciones del formulario - M�S COMPACTAS */
.form-section[b-k7pujc2uj0] {
    margin-bottom: 20px; /* Reducido de 25px */
    padding-bottom: 16px; /* Reducido de 20px */
    border-bottom: 1px solid #dee2e6;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-section:last-child[b-k7pujc2uj0] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headers de secci�n con Montserrat - M�S PEQUE�OS */
.section-header[b-k7pujc2uj0] {
    margin-bottom: 12px; /* Reducido de 15px */
    padding: 0;
    background: none;
    border: none;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    /* A�adido para la l�nea completa */
    padding-bottom: 4px; /* Espacio para la l�nea */
}

/* L�nea debajo de t odo el header de secci�n - T ODO EL ANCHO */
.section-header[b-k7pujc2uj0]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante s�lido */
    border-radius: 0.5px;
    box-shadow: 0 0.5px 2px rgba(4, 64, 184, 0.2); /* ? ACTUALIZADO: nueva paleta azul */
}

.section-title[b-k7pujc2uj0] {
    font-family: var(--montserrat-font) !important;
    font-size: 14px; /* Reducido de 16px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin: 0; /* Sin margin-bottom ya que la l�nea est� en el header */
    padding: 0; /* Sin padding-bottom ya que la l�nea est� en el header */
    display: flex;
    align-items: center;
    border: none;
    background: none;
    position: relative;
}

.section-title i[b-k7pujc2uj0] {
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin-right: 6px; /* Reducido de 8px */
    font-size: 14px; /* Reducido de 16px */
    background: rgba(4, 64, 184, 0.1); /* ? ACTUALIZADO: nueva paleta azul */
    padding: 4px; /* Reducido de 6px */
    border-radius: 3px; /* Reducido de 4px */
    width: 24px; /* Reducido de 28px */
    height: 24px; /* Reducido de 28px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Acciones de secci�n para historial */
.section-actions[b-k7pujc2uj0] {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Contenido de secci�n */
.section-content[b-k7pujc2uj0] {
    padding: 0;
    background: none;
    border: none;
}

/* Grupos de formulario m�s compactos - M�S PEQUE�OS */
.form-group[b-k7pujc2uj0] {
    margin-bottom: 10px; /* Reducido de 12px */
}

.form-label[b-k7pujc2uj0] {
    font-family: var(--montserrat-font) !important;
    font-weight: 500;
    color: #495057;
    margin-bottom: 3px; /* Reducido de 4px */
    font-size: 11px; /* Reducido de 12px */
}

.form-label.text-muted[b-k7pujc2uj0] {
    color: #6c757d !important;
}

/* Controles de formulario de solo lectura - M�S COMPACTOS */
.form-control-sm[readonly][b-k7pujc2uj0] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 400;
    border: 1px solid #ced4da;
    border-radius: 3px; /* Reducido de 4px */
    background-color: #f8f9fa;
    height: auto;
    line-height: 1.3; /* M�s compacto */
    color: #495057;
}

/* Input groups m�s compactos - M�S PEQUE�OS */
.input-group-sm .input-group-text[b-k7pujc2uj0] {
    font-family: var(--montserrat-font) !important;
    padding: 3px 6px; /* Reducido de 4px 8px */
    font-size: 11px; /* Reducido de 12px */
    font-weight: 500;
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
}

/* Enlaces de contacto */
.contact-link[b-k7pujc2uj0] {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    font-family: var(--montserrat-font) !important;
    font-size: 11px;
}

.contact-link:hover[b-k7pujc2uj0] {
    color: #0052a3;
    text-decoration: underline;
}

.contact-link i[b-k7pujc2uj0] {
    color: #6c757d;
    margin-right: 4px;
    font-size: 10px;
}

/* Badges */
.badge[b-k7pujc2uj0] {
    font-family: var(--montserrat-font) !important;
    font-size: 9px; /* Reducido */
    padding: 2px 6px; /* Reducido */
    border-radius: 3px;
    font-weight: 500;
}

.badge.bg-success[b-k7pujc2uj0] {
    background-color: #198754 !important;
}

.badge.bg-secondary[b-k7pujc2uj0] {
    background-color: #6c757d !important;
}

.badge.bg-info[b-k7pujc2uj0] {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}

.badge.bg-primary[b-k7pujc2uj0] {
    background-color: #0440b8 !important; /* ? ACTUALIZADO: nuevo azul vibrante */
}

/* Campos con valores especiales */
.credit-limit[b-k7pujc2uj0] {
    color: #198754;
    font-weight: 600;
}

/* Espaciado de filas m�s compacto - M�S AJUSTADO */
.row.g-1[b-k7pujc2uj0] {
    --bs-gutter-x: 0.4rem; /* Reducido de 0.5rem */
    --bs-gutter-y: 0.2rem; /* Reducido de 0.25rem */
}

/* Espaciado entre filas de formulario - M�S COMPACTO */
.form-section .row + .row[b-k7pujc2uj0] {
    margin-top: 6px;
}

/* ============================= */
/* NUEVA VISTA MEJORADA DE ACTIVIDADES */
/* ============================= */

.activity-panel-enhanced[b-k7pujc2uj0] {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Panel de estad�sticas */
.activity-stats[b-k7pujc2uj0] {
    display: flex;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    padding: 12px 16px;
    gap: 20px;
}

.stat-item[b-k7pujc2uj0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.stat-icon[b-k7pujc2uj0] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
}

.stat-icon.success[b-k7pujc2uj0] {
    background: #28a745;
}

.stat-icon.error[b-k7pujc2uj0] {
    background: #dc3545;
}

.stat-icon.info[b-k7pujc2uj0] {
    background: #17a2b8;
}

.stat-info[b-k7pujc2uj0] {
    display: flex;
    flex-direction: column;
}

.stat-number[b-k7pujc2uj0] {
    font-size: 16px;
    font-weight: 700;
    color: #226a94;
    line-height: 1;
}

.stat-label[b-k7pujc2uj0] {
    font-size: 10px;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Timeline mejorado */
.activity-timeline-enhanced[b-k7pujc2uj0] {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    background: #fafafa;
}

.activity-timeline-enhanced[b-k7pujc2uj0]::-webkit-scrollbar {
    width: 6px;
}

.activity-timeline-enhanced[b-k7pujc2uj0]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.activity-timeline-enhanced[b-k7pujc2uj0]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.activity-timeline-enhanced[b-k7pujc2uj0]::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.activity-item[b-k7pujc2uj0] {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    padding: 4px 0; /* Reducido padding */
    /* ELIMINADO: background, border-radius, border, box-shadow, transition */
    /* Totalmente plano - sin efectos visuales */
    position: relative;
}

.activity-item:hover[b-k7pujc2uj0] {
    /* ELIMINADO: box-shadow, border-color - totalmente plano */
    /* Sin hover effects */
}

.activity-item.success[b-k7pujc2uj0] {
    /* ELIMINADO: border-left - sin l�neas */
}

.activity-item.error[b-k7pujc2uj0] {
    /* ELIMINADO: border-left - sin l�neas */
}

.activity-item.more-items[b-k7pujc2uj0] {
    /* ELIMINADO: border-left, background - sin l�neas ni fondos */
    font-style: italic;
}

/* Activity Time con fecha y hora */
.activity-timeline.dashboard-style .activity-time[b-k7pujc2uj0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px; /* Reducido de 45px */
    text-align: center;
    font-family: var(--montserrat-font) !important;
    margin-top: 2px; /* Reducido */
}

.activity-timeline.dashboard-style .activity-time .time-hour[b-k7pujc2uj0] {
    font-size: 11px; /* Reducido de 12px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    line-height: 1;
    margin-bottom: 1px; /* Reducido */
}

.activity-timeline.dashboard-style .activity-time .time-date[b-k7pujc2uj0] {
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
    color: #6c757d;
    line-height: 1;
}

/* Activity Items m�s simples sin fondo de card */
.activity-timeline.dashboard-style .activity-item[b-k7pujc2uj0] {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* Reducido de 16px a 12px */
    margin-bottom: 6px; /* Reducido de 8px a 6px */
    padding: 4px 0; /* Reducido considerablemente - solo padding vertical m�nimo */
    transition: all 0.2s ease;
    position: relative;
    /* Sin background, border, border-radius, box-shadow */
}

.activity-timeline.dashboard-style .activity-item:hover[b-k7pujc2uj0] {
    background-color: #f8f9fa;
    border-radius: 4px; /* M�s peque�o */
    padding: 4px 8px; /* Mucho m�s peque�o */
    margin: -4px -8px 2px -8px; /* Ajustado para el nuevo espaciado */
}

.activity-timeline.dashboard-style .activity-item:last-child[b-k7pujc2uj0] {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Activity Time m�s compacto */
.activity-timeline.dashboard-style .activity-time[b-k7pujc2uj0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px; /* Reducido de 45px */
    text-align: center;
    font-family: var(--montserrat-font) !important;
    margin-top: 2px; /* Reducido */
}

.activity-timeline.dashboard-style .activity-time .time-hour[b-k7pujc2uj0] {
    font-size: 11px; /* Reducido de 12px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    line-height: 1;
    margin-bottom: 1px; /* Reducido */
}

.activity-timeline.dashboard-style .activity-time .time-date[b-k7pujc2uj0] {
    font-size: 9px; /* Reducido de 10px */
    font-weight: 500;
    color: #6c757d;
    line-height: 1;
}

/* Activity Icons m�s peque�os */
.activity-timeline.dashboard-style .activity-icon[b-k7pujc2uj0] {
    width: 24px; /* Reducido de 32px */
    height: 24px; /* Reducido de 32px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px; /* Reducido de 14px */
    color: white;
    flex-shrink: 0;
    /* ELIMINADO: box-shadow - completamente plano */
}

/* Colores de iconos como en el dashboard - ACTUALIZADO PARA NUEVA PALETA AZUL VIBRANTE */
.activity-timeline.dashboard-style .activity-icon.ventas[b-k7pujc2uj0] {
    background: #00a86b; /* ? ACTUALIZADO: Verde esmeralda para CREATE */
}

.activity-timeline.dashboard-style .activity-icon.clientes[b-k7pujc2uj0] {
    background: #0440b8; /* ? ACTUALIZADO: Azul principal para UPDATE */
}

.activity-timeline.dashboard-style .activity-icon.compras[b-k7pujc2uj0] {
    background: #e53e3e; /* ? ACTUALIZADO: Rojo vibrante para DELETE */
}

.activity-timeline.dashboard-style .activity-icon.cxc[b-k7pujc2uj0] {
    background: #00bcd4; /* ? ACTUALIZADO: Cyan que armoniza para VIEW */
}

.activity-timeline.dashboard-style .activity-icon.inventario[b-k7pujc2uj0] {
    background: #4a5568; /* ? ACTUALIZADO: Gris neutro para LOGIN */
}

.activity-timeline.dashboard-style .activity-icon.info[b-k7pujc2uj0] {
    background: #ff8c00; /* ? ACTUALIZADO: Naranja vibrante para otros */
}

/* Activity Content m�s compacto */
.activity-timeline.dashboard-style .activity-content[b-k7pujc2uj0] {
    flex: 1;
    min-width: 0;
}

.activity-timeline.dashboard-style .activity-content h4[b-k7pujc2uj0] {
    font-size: 12px; /* Reducido de 14px */
    font-weight: 600;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    margin: 0 0 2px 0; /* Reducido margen inferior */
    font-family: var(--montserrat-font) !important;
    line-height: 1.2; /* M�s compacto */
}

.activity-timeline.dashboard-style .activity-content p[b-k7pujc2uj0] {
    font-size: 10px; /* Reducido de 12px */
    color: #6c757d;
    margin: 0;
    line-height: 1.3; /* M�s compacto */
    font-family: var(--montserrat-font) !important;
}

/* Show More Item */
.activity-timeline.dashboard-style .activity-item.show-more[b-k7pujc2uj0] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.activity-timeline.dashboard-style .activity-item.show-more .activity-content h4[b-k7pujc2uj0] {
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    font-weight: 500;
}

.activity-timeline.dashboard-style .activity-item.show-more .activity-content p[b-k7pujc2uj0] {
    color: #495057;
}

/* Bot�n link estilo Dashboard */
.btn-link-dashboard[b-k7pujc2uj0] {
    background: none;
    border: none;
    color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    text-decoration: underline;
    cursor: pointer;
    font-size: 10px; /* M�s peque�o */
    font-weight: 500;
    padding: 0;
    font-family: var(--montserrat-font) !important;
}

.btn-link-dashboard:hover[b-k7pujc2uj0] {
    color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    text-decoration: none;
}

/* Refresh button estilo Dashboard */
.refresh-btn[b-k7pujc2uj0] {
    background: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    font-family: var(--montserrat-font) !important;
}

.refresh-btn:hover[b-k7pujc2uj0] {
    background: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    color: white;
}

.refresh-btn i[b-k7pujc2uj0] {
    font-size: 9px;
}

/* Empty State estilo Dashboard */
.empty-activity-state[b-k7pujc2uj0] {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    /* Sin background, border ni box-shadow - m�s simple */
}

.empty-activity-state .empty-icon[b-k7pujc2uj0] {
    font-size: 48px;
    color: #dee2e6;
    margin-bottom: 16px;
}

.empty-activity-state .empty-content h4[b-k7pujc2uj0] {
    font-size: 16px;
    color: #495057;
    margin-bottom: 8px;
    font-weight: 600;
    font-family: var(--montserrat-font) !important;
}

.empty-activity-state .empty-content p[b-k7pujc2uj0] {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
    font-family: var(--montserrat-font) !important;
}

/* ============================= */
/* DISE�O DASHBOARD PARA ACTIVIDADES DEL CLIENTE - SIN CARD */
/* ============================= */

/* Activity Timeline estilo Dashboard */
.activity-timeline.dashboard-style[b-k7pujc2uj0] {
    /* Sin background, border, padding, ni box-shadow */
    max-height: 500px;
    overflow-y: auto;
}

.activity-timeline.dashboard-style[b-k7pujc2uj0]::-webkit-scrollbar {
    width: 6px;
}

.activity-timeline.dashboard-style[b-k7pujc2uj0]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.activity-timeline.dashboard-style[b-k7pujc2uj0]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.activity-timeline.dashboard-style[b-k7pujc2uj0]::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* ? RESPONSIVE DESIGN - Corregido para evitar overflow en m�vil */
@media (max-width: 768px) {
    .clientes-container[b-k7pujc2uj0] {
        padding: 8px;
        font-family: var(--montserrat-font) !important;
    }

    .page-title[b-k7pujc2uj0] {
        font-size: 16px; /* ? AUMENTADO: de 15px a 16px aprovechando m�s altura */
        font-family: var(--montserrat-font) !important;
    }
    
    .page-subtitle[b-k7pujc2uj0] {
        font-size: 12px; /* ? AUMENTADO: de 11px a 12px para mejor legibilidad */
        margin-left: 0; /* ? CORREGIDO: sin margen en m�vil */
    }

    .header-actions .btn[b-k7pujc2uj0] {
        font-size: 13px; /* ? AUMENTADO: de 12px a 13px aprovechando m�s altura */
        padding: 10px 16px; /* ? AUMENTADO: m�s padding en m�vil */
        min-height: 40px; /* ? AUMENTADO: de 36px a 40px */
    }

    .section-title[b-k7pujc2uj0] {
        font-size: 13px;
        font-family: var(--montserrat-font) !important;
    }

    .form-content.with-fixed-header[b-k7pujc2uj0] {
        padding: 12px;
        font-family: var(--montserrat-font) !important;
    }

    .col-lg-4[b-k7pujc2uj0], .col-lg-3[b-k7pujc2uj0], .col-lg-2[b-k7pujc2uj0] {
        margin-bottom: 6px;
    }

    .section-title[b-k7pujc2uj0]::after {
        height: 0.5px;
    }
}

@media (max-width: 576px) {
    .page-title[b-k7pujc2uj0] {
        font-size: 15px; /* ? AUMENTADO: de 14px a 15px */
        font-family: var(--montserrat-font) !important;
    }

    .page-subtitle[b-k7pujc2uj0] {
        font-size: 11px; /* ? AUMENTADO: de 10px a 11px */
    }

    .header-actions .btn[b-k7pujc2uj0] {
        font-size: 12px; /* ? AUMENTADO: de 11px a 12px */
        padding: 8px 12px; /* ? AUMENTADO: m�s padding */
        min-height: 36px; /* ? AUMENTADO: de 32px a 36px */
    }

    .form-control-sm[b-k7pujc2uj0],
    .form-select-sm[b-k7pujc2uj0] {
        font-size: 12px;
        font-family: var(--montserrat-font) !important;
    }
}

/* Estados disabled para campos - M�S PEQUE�OS */
.form-control-sm:disabled[b-k7pujc2uj0],
.form-select-sm:disabled[b-k7pujc2uj0] {
    background-color: #f8f9fa;
    opacity: 0.75;
    border-color: #e9ecef;
    font-family: var(--montserrat-font) !important;
}

/* Mejoras para input groups */
.input-group-sm .form-control-sm[b-k7pujc2uj0],
.input-group-sm .form-select-sm[b-k7pujc2uj0] {
    border-right: 1px solid #ced4da;
}

.input-group-sm .form-control-sm:focus[b-k7pujc2uj0],
.input-group-sm .form-select-sm:focus[b-k7pujc2uj0] {
    z-index: 3;
}

/* Espaciado entre filas de formulario - M�S COMPACTO */
.form-section .row + .row[b-k7pujc2uj0] {
    margin-top: 6px; /* Reducido de 8px */
}

/* Efectos adicionales para mantener consistencia con el proyecto */
.btn-primary:not(:disabled):not(.disabled):active[b-k7pujc2uj0],
.btn-primary:not(:disabled):not(.disabled).active[b-k7pujc2uj0] {
    background-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
    border-color: #032e7a; /* ? ACTUALIZADO: azul oscuro */
}

.btn-outline-primary:not(:disabled):not(.disabled):active[b-k7pujc2uj0],
.btn-outline-primary:not(:disabled):not(.disabled).active[b-k7pujc2uj0] {
    background-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    border-color: #0440b8; /* ? ACTUALIZADO: nuevo azul vibrante */
    color: #fff;
}

/* Asegurar que todos los elementos de formulario usen Montserrat - M�S PEQUE�OS */
.clientes-container input[b-k7pujc2uj0],
.clientes-container select[b-k7pujc2uj0],
.clientes-container textarea[b-k7pujc2uj0],
.clientes-container button[b-k7pujc2uj0],
.clientes-container label[b-k7pujc2uj0],
.clientes-container .form-control[b-k7pujc2uj0],
.clientes-container .form-select[b-k7pujc2uj0],
.clientes-container .btn[b-k7pujc2uj0],
.clientes-container .input-group-text[b-k7pujc2uj0],
.clientes-container .alert[b-k7pujc2uj0],
.clientes-container .validation-message[b-k7pujc2uj0] {
    font-family: var(--montserrat-font) !important;
}

/* Ajustes espec�ficos para hacer columnas m�s compactas */
.col-lg-2[b-k7pujc2uj0], .col-lg-3[b-k7pujc2uj0], .col-lg-4[b-k7pujc2uj0], .col-lg-5[b-k7pujc2uj0] {
    padding-left: 0.3rem; /* Reducido */
    padding-right: 0.3rem; /* Reducido */
}

/* Iconos de botones m�s peque�os */
.btn i[b-k7pujc2uj0] {
    font-size: 0.85em; /* Iconos proporcionalmente m�s peque�os */
}

.header-actions .btn i[b-k7pujc2uj0] {
    font-size: 1em; /* ? MANTENIDO: iconos m�s visibles en header */
    margin-right: 6px; /* ? MANTENIDO: separaci�n del texto */
}
/* /Components/Shared/CiudadModal.razor.rz.scp.css */
/* Modal header con gradiente del color primario del proyecto */
#ciudadModal .modal-header[b-qrk6ig99wg] {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border-bottom: none;
}

#ciudadModal .modal-header .btn-close[b-qrk6ig99wg] {
    filter: invert(1);
}

#ciudadModal .modal-title i[b-qrk6ig99wg] {
    color: var(--white);
}

/* Search box styling */
#ciudadModal .search-box[b-qrk6ig99wg] {
    position: relative;
    margin-bottom: 1rem;
}

#ciudadModal .search-icon[b-qrk6ig99wg] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 10;
}

#ciudadModal .search-input[b-qrk6ig99wg] {
    padding-left: 35px;
    padding-right: 40px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

#ciudadModal .search-input:focus[b-qrk6ig99wg] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(4, 64, 184, 0.25);
}

#ciudadModal .btn-clear[b-qrk6ig99wg] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
}

#ciudadModal .ciudad-item:hover[b-qrk6ig99wg] {
    background-color: var(--primary-lighter);
    border-color: var(--primary-color);
}

/* List group styling */
#ciudadModal .list-group-item[b-qrk6ig99wg] {
    border: 1px solid #dee2e6;
    margin-bottom: 1px;
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#ciudadModal .list-group-item:hover[b-qrk6ig99wg] {
    background-color: var(--primary-lighter);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(4, 64, 184, 0.1);
}

#ciudadModal .list-group-item:active[b-qrk6ig99wg] {
    background-color: var(--primary-color);
    color: var(--white);
}

#ciudadModal .list-group-item .fw-medium[b-qrk6ig99wg] {
    color: #2c3e50;
}

#ciudadModal .list-group-item:hover .fw-medium[b-qrk6ig99wg] {
    color: var(--primary-color);
    font-weight: 600 !important;
}

#ciudadModal .list-group-item:active .fw-medium[b-qrk6ig99wg] {
    color: var(--white);
}

/* Badge styling */
#ciudadModal .badge[b-qrk6ig99wg] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Modal body padding adjustment */
#ciudadModal .modal-body[b-qrk6ig99wg] {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #ciudadModal .modal-dialog[b-qrk6ig99wg] {
        margin: 0.5rem;
    }
    
    #ciudadModal .modal-body[b-qrk6ig99wg] {
        padding: 1rem;
        max-height: 60vh;
    }
}
/* /Components/Shared/Error.razor.rz.scp.css */
/* Error Page Styles */
.error-container[b-4d1pjyb9t0] {
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.error-card[b-4d1pjyb9t0] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 3rem 2rem;
    text-align: center;
    max-width: 600px;
    width: 100%;
    margin-bottom: 3rem;
    transition: all 0.3s ease;
}

.error-card:hover[b-4d1pjyb9t0] {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.error-icon[b-4d1pjyb9t0] {
    font-size: 4rem;
    color: #ff8c00;
    margin-bottom: 1.5rem;
    animation: pulse-b-4d1pjyb9t0 2s infinite;
}

@keyframes pulse-b-4d1pjyb9t0 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.error-title[b-4d1pjyb9t0] {
    color: #0440b8;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-family: 'Montserrat', sans-serif;
}

.error-subtitle[b-4d1pjyb9t0] {
    color: #6c757d;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    font-family: 'Montserrat', sans-serif;
}

.error-message[b-4d1pjyb9t0] {
    color: #495057;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.error-message p[b-4d1pjyb9t0] {
    margin-bottom: 0.75rem;
}

.error-suggestions[b-4d1pjyb9t0] {
    background: rgba(4, 64, 184, 0.05);
    border-left: 4px solid #0440b8;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.error-suggestions h4[b-4d1pjyb9t0] {
    color: #0440b8;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.error-suggestions ul[b-4d1pjyb9t0] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-suggestions li[b-4d1pjyb9t0] {
    color: #495057;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.error-suggestions li:hover[b-4d1pjyb9t0] {
    color: #0440b8;
}

.error-suggestions li i[b-4d1pjyb9t0] {
    color: #0440b8;
    width: 20px;
}

.error-actions[b-4d1pjyb9t0] {
    margin-bottom: 2rem;
}

.error-actions .btn[b-4d1pjyb9t0] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.error-actions .btn-primary[b-4d1pjyb9t0] {
    background: linear-gradient(135deg, #0440b8 0%, #032e7a 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(4, 64, 184, 0.3);
}

.error-actions .btn-primary:hover[b-4d1pjyb9t0] {
    background: linear-gradient(135deg, #032e7a 0%, #0440b8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(4, 64, 184, 0.4);
}

.error-actions .btn-outline-secondary[b-4d1pjyb9t0] {
    border: 2px solid #6c757d;
    color: #6c757d;
}

.error-actions .btn-outline-secondary:hover[b-4d1pjyb9t0] {
    background: #6c757d;
    color: white;
    transform: translateY(-2px);
}

.error-help[b-4d1pjyb9t0] {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
}

.error-help p[b-4d1pjyb9t0] {
    margin: 0;
    font-size: 0.9rem;
}

.error-debug[b-4d1pjyb9t0] {
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.error-debug .alert[b-4d1pjyb9t0] {
    margin: 0;
}

/* Cards de información adicional */
.error-details[b-4d1pjyb9t0] {
    max-width: 900px;
    width: 100%;
}

.info-card[b-4d1pjyb9t0] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(4, 64, 184, 0.1);
    border-radius: 0.75rem;
    padding: 2rem 1.5rem;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.info-card:hover[b-4d1pjyb9t0] {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #0440b8;
}

.info-icon[b-4d1pjyb9t0] {
    font-size: 2.5rem;
    color: #0440b8;
    margin-bottom: 1rem;
}

.info-card h5[b-4d1pjyb9t0] {
    color: #0440b8;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    font-family: 'Montserrat', sans-serif;
}

.info-card p[b-4d1pjyb9t0] {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .error-container[b-4d1pjyb9t0] {
        padding: 1rem;
    }
    
    .error-card[b-4d1pjyb9t0] {
        padding: 2rem 1.5rem;
        margin-bottom: 2rem;
    }
    
    .error-title[b-4d1pjyb9t0] {
        font-size: 2rem;
    }
    
    .error-subtitle[b-4d1pjyb9t0] {
        font-size: 1.25rem;
    }
    
    .error-icon[b-4d1pjyb9t0] {
        font-size: 3rem;
    }
    
    .error-actions .btn[b-4d1pjyb9t0] {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .error-actions .btn:last-child[b-4d1pjyb9t0] {
        margin-bottom: 0;
    }
    
    .info-card[b-4d1pjyb9t0] {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .error-card[b-4d1pjyb9t0] {
        padding: 1.5rem 1rem;
    }
    
    .error-title[b-4d1pjyb9t0] {
        font-size: 1.75rem;
    }
    
    .error-subtitle[b-4d1pjyb9t0] {
        font-size: 1.1rem;
    }
    
    .error-message[b-4d1pjyb9t0] {
        font-size: 1rem;
    }
    
    .error-suggestions[b-4d1pjyb9t0] {
        padding: 1rem;
    }
}
/* /Components/Shared/LocalidadSelector.razor.rz.scp.css */
/* Localidad Selector Styles */
.localidad-selector[b-s4o0cj6okl] {
    position: relative;
    display: inline-block;
}

.localidad-dropdown[b-s4o0cj6okl] {
    position: relative;
}

.localidad-btn-clean[b-s4o0cj6okl] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    font-family: 'Montserrat', sans-serif;
}

.localidad-btn-clean:hover[b-s4o0cj6okl] {
    background-color: rgba(0, 0, 0, 0.05);
}

.localidad-btn-clean:disabled[b-s4o0cj6okl] {
    cursor: not-allowed;
    opacity: 0.6;
}

.localidad-nombre[b-s4o0cj6okl] {
    margin: 0 0.25rem;
    font-weight: 500;
}

.dropdown-arrow[b-s4o0cj6okl] {
    transition: transform 0.2s ease;
}

.dropdown-arrow.rotated[b-s4o0cj6okl] {
    transform: rotate(180deg);
}

/* Estilos básicos del dropdown que respetan el comportamiento de Bootstrap */
.localidad-menu[b-s4o0cj6okl] {
    /* Dejar que Bootstrap/Popper controlen position/top/left/transform/display */
    min-width: 280px;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

/* Cuando Bootstrap aplica la clase .show, mostramos el dropdown (visual only) */
.localidad-menu.show[b-s4o0cj6okl] {
    /* display handled by Bootstrap, no override needed */
}

.localidad-item[b-s4o0cj6okl] {
    width: 100%;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.localidad-item:hover[b-s4o0cj6okl] {
    background-color: #f8f9fa;
}

.localidad-item:disabled[b-s4o0cj6okl] {
    background-color: transparent;
    cursor: not-allowed;
    opacity: 0.65;
}

.localidad-item.active[b-s4o0cj6okl] {
    background-color: #e3f2fd;
    color: #1976d2;
}

.item-content[b-s4o0cj6okl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.item-icon[b-s4o0cj6okl] {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.item-info[b-s4o0cj6okl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.item-name[b-s4o0cj6okl] {
    font-weight: 500;
    margin-bottom: 0;
}

.item-badge[b-s4o0cj6okl] {
    font-size: 0.75rem;
    color: #28a745;
    font-weight: 600;
}

.item-arrow[b-s4o0cj6okl] {
    flex-shrink: 0;
    color: #6c757d;
    font-size: 0.875rem;
}

/* Loading states */
.localidad-loading[b-s4o0cj6okl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: #6c757d;
    font-size: 0.875rem;
}

.localidad-error[b-s4o0cj6okl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: #dc3545;
    font-size: 0.875rem;
}

.loading-dots[b-s4o0cj6okl] {
    display: flex;
    gap: 0.25rem;
}

.loading-dots .dot[b-s4o0cj6okl] {
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
    animation: loading-pulse-b-s4o0cj6okl 1.5s ease-in-out infinite;
}

.loading-dots .dot:nth-child(1)[b-s4o0cj6okl] { animation-delay: 0s; }
.loading-dots .dot:nth-child(2)[b-s4o0cj6okl] { animation-delay: 0.2s; }
.loading-dots .dot:nth-child(3)[b-s4o0cj6okl] { animation-delay: 0.4s; }

@keyframes loading-pulse-b-s4o0cj6okl {
    0%, 80%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.loading-spinner-small[b-s4o0cj6okl] {
    width: 16px;
    height: 16px;
    position: relative;
}

.spinner-ring-small[b-s4o0cj6okl] {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #6c757d;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin-b-s4o0cj6okl 1s linear infinite;
}

@keyframes spin-b-s4o0cj6okl {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.large-icon[b-s4o0cj6okl] {
    font-size: 1.5rem;
}

/* CRÍTICO: Forzar comportamiento de dropdown en MÓVIL */
@media (max-width: 768px) {
    .localidad-selector[b-s4o0cj6okl] {
        position: relative;
    }
    
    .localidad-dropdown[b-s4o0cj6okl] {
        position: relative;
    }
    
    /* Ajustes de tamaño y posicionamiento para móvil */
    .localidad-menu[b-s4o0cj6okl] {
        min-width: 240px;
        max-width: calc(100vw - 2rem);
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .localidad-btn-clean[b-s4o0cj6okl] {
        min-height: 44px;
        padding: 0.75rem 1rem;
        touch-action: manipulation;
    }
    
    .localidad-item[b-s4o0cj6okl] {
        min-height: 44px;
        padding: 0.75rem 1rem;
        touch-action: manipulation;
        font-size: 1rem;
    }
    
    .dropdown-header[b-s4o0cj6okl] {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .item-content[b-s4o0cj6okl] {
        gap: 0.5rem;
    }
}

/* Mejoras para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .localidad-btn-clean:hover[b-s4o0cj6okl] {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .localidad-btn-clean:active[b-s4o0cj6okl] {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .localidad-item:hover[b-s4o0cj6okl] {
        background-color: #f8f9fa;
    }

    .localidad-item:active[b-s4o0cj6okl] {
        background-color: #e9ecef;
    }
}
/* /Components/Shared/SectorModal.razor.rz.scp.css */
/* Modal simple y funcional */
.modal-header[b-57wl36ls3i] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.modal-title[b-57wl36ls3i] {
    font-weight: 500;
    margin: 0;
}

.btn-close[b-57wl36ls3i] {
    background: none;
    border: none;
    color: var(--white);
    opacity: 0.8;
    font-size: 1.2rem;
}

.btn-close:hover[b-57wl36ls3i] {
    opacity: 1;
}

/* Búsqueda simple */
.search-box[b-57wl36ls3i] {
    position: relative;
    margin-bottom: 1rem;
}

.search-icon[b-57wl36ls3i] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 2;
}

.search-input[b-57wl36ls3i] {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    height: 45px;
}

.search-input:focus[b-57wl36ls3i] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(4, 64, 184, 0.25);
}

.btn-clear[b-57wl36ls3i] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    padding: 4px 8px;
    border-radius: 4px;
}

.btn-clear:hover[b-57wl36ls3i] {
    background-color: #f8f9fa;
    color: #495057;
}

/* Lista simple de sectores */
.sector-list[b-57wl36ls3i] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
}

.sector-item[b-57wl36ls3i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f3f4;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sector-item:last-child[b-57wl36ls3i] {
    border-bottom: none;
}

.sector-item:hover[b-57wl36ls3i] {
    background-color: var(--primary-lighter);
}

.sector-info[b-57wl36ls3i] {
    flex: 1;
}

.sector-name[b-57wl36ls3i] {
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #212529;
    font-size: 0.95rem;
}

.sector-details[b-57wl36ls3i] {
    color: #6c757d;
    font-size: 0.85rem;
}

.results-info[b-57wl36ls3i] {
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin: -1px;
    margin-bottom: 0;
}

/* Scrollbar personalizado */
.sector-list[b-57wl36ls3i]::-webkit-scrollbar {
    width: 6px;
}

.sector-list[b-57wl36ls3i]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sector-list[b-57wl36ls3i]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.sector-list[b-57wl36ls3i]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}