/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-f8pu9xmith] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-f8pu9xmith] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavDrawer.razor.rz.scp.css */
/* ═════════════════════════════════════════════════════════════════════════════
   NAV DRAWER - TEMA PROFESIONAL
   ═════════════════════════════════════════════════════════════════════════════ */

/* Overlay */
.drawer-overlay[b-ujb4ajodmv] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999;
    animation: fadeIn-b-ujb4ajodmv 0.2s ease;
}

@keyframes fadeIn-b-ujb4ajodmv {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Drawer Container */
.nav-drawer[b-ujb4ajodmv] {
    position: fixed;
    left: -320px;
    top: 0;
    width: 300px;
    height: 100vh;
    background: #ffffff;
    z-index: 1000;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-right: 1px solid #e2e8f0;
}

.nav-drawer.open[b-ujb4ajodmv] {
    left: 0;
}

/* Header del Drawer */
.drawer-header[b-ujb4ajodmv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    color: white;
    flex-shrink: 0;
    position: relative;
}

.drawer-header[b-ujb4ajodmv]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #60a5fa, #22c55e, #60a5fa);
}

.drawer-brand[b-ujb4ajodmv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-title[b-ujb4ajodmv] {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.drawer-subtitle[b-ujb4ajodmv] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.drawer-close[b-ujb4ajodmv] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    font-size: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.drawer-close:hover[b-ujb4ajodmv] {
    background: rgba(255,255,255,0.2);
    color: white;
    transform: rotate(90deg);
}

/* Secciones del Drawer */
.drawer-section[b-ujb4ajodmv] {
    padding: 0.5rem 0;
}

.drawer-section-label[b-ujb4ajodmv] {
    padding: 1rem 1.25rem 0.5rem;
    font-size: 0.7rem;
    color: #64748b;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.drawer-section-label i[b-ujb4ajodmv] {
    color: #3b82f6;
    font-size: 0.8rem;
}

/* Navegación */
.drawer-nav[b-ujb4ajodmv] {
    padding: 0.25rem 0.75rem;
}

.drawer-link[b-ujb4ajodmv] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    color: #475569 !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
    margin: 2px 0;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
}

.drawer-link[b-ujb4ajodmv]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #3b82f6;
    transform: scaleY(0);
    transition: transform 0.15s ease;
    border-radius: 0 4px 4px 0;
}

.drawer-link:hover[b-ujb4ajodmv] {
    background: #eff6ff;
    color: #1d4ed8 !important;
}

.drawer-link:hover[b-ujb4ajodmv]::before {
    transform: scaleY(0.6);
}

.drawer-link.active[b-ujb4ajodmv] {
    background: linear-gradient(90deg, #dbeafe, #eff6ff);
    color: #1d4ed8 !important;
    font-weight: 600;
}

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

.drawer-link-icon[b-ujb4ajodmv] {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.drawer-link-icon i[b-ujb4ajodmv] {
    font-size: 1.1rem;
    color: #3b82f6;
    transition: all 0.15s ease;
}

.drawer-link:hover .drawer-link-icon[b-ujb4ajodmv],
.drawer-link.active .drawer-link-icon[b-ujb4ajodmv] {
    background: #dbeafe;
    transform: scale(1.05);
}

.drawer-link:hover .drawer-link-icon i[b-ujb4ajodmv],
.drawer-link.active .drawer-link-icon i[b-ujb4ajodmv] {
    color: #1d4ed8;
}

.drawer-link-content[b-ujb4ajodmv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.drawer-link-title[b-ujb4ajodmv] {
    font-size: 0.9rem;
    font-weight: 600;
}

.drawer-link-desc[b-ujb4ajodmv] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 400;
}

.drawer-link:hover .drawer-link-desc[b-ujb4ajodmv],
.drawer-link.active .drawer-link-desc[b-ujb4ajodmv] {
    color: #64748b;
}

/* Footer del Drawer */
.drawer-footer[b-ujb4ajodmv] {
    margin-top: auto;
    padding: 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.drawer-user-card[b-ujb4ajodmv] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem;
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 0.875rem;
}

.user-avatar[b-ujb4ajodmv] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.user-info[b-ujb4ajodmv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-name[b-ujb4ajodmv] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role[b-ujb4ajodmv] {
    font-size: 0.75rem;
    color: #64748b;
}

.logout-link[b-ujb4ajodmv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: #dc2626 !important;
    background: #fef2f2;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.logout-link:hover[b-ujb4ajodmv] {
    background: #fee2e2;
    color: #b91c1c !important;
    transform: translateX(4px);
}

.logout-link i[b-ujb4ajodmv] {
    font-size: 0.9rem;
}

/* Botón Hamburguesa */
.hamburger-btn[b-ujb4ajodmv] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.hamburger-btn:hover[b-ujb4ajodmv] {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

.hamburger-btn span[b-ujb4ajodmv] {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all 0.15s ease;
}

.hamburger-fixed[b-ujb4ajodmv] {
    position: fixed;
    top: 10px;
    left: 16px;
    z-index: 200;
}

/* Scrollbar personalizado para el drawer */
.nav-drawer[b-ujb4ajodmv]::-webkit-scrollbar {
    width: 6px;
}

.nav-drawer[b-ujb4ajodmv]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-drawer[b-ujb4ajodmv]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.nav-drawer[b-ujb4ajodmv]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-e6pu8j1k5g],
.components-reconnect-repeated-attempt-visible[b-e6pu8j1k5g],
.components-reconnect-failed-visible[b-e6pu8j1k5g],
.components-pause-visible[b-e6pu8j1k5g],
.components-resume-failed-visible[b-e6pu8j1k5g],
.components-rejoining-animation[b-e6pu8j1k5g] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-e6pu8j1k5g],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-e6pu8j1k5g],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-e6pu8j1k5g],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-e6pu8j1k5g],
#components-reconnect-modal.components-reconnect-retrying[b-e6pu8j1k5g],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-e6pu8j1k5g],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-e6pu8j1k5g],
#components-reconnect-modal.components-reconnect-failed[b-e6pu8j1k5g],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-e6pu8j1k5g] {
    display: block;
}


#components-reconnect-modal[b-e6pu8j1k5g] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-e6pu8j1k5g 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-e6pu8j1k5g 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-e6pu8j1k5g 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-e6pu8j1k5g]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-e6pu8j1k5g 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-e6pu8j1k5g {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-e6pu8j1k5g {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-e6pu8j1k5g {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-e6pu8j1k5g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-e6pu8j1k5g] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-e6pu8j1k5g] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-e6pu8j1k5g] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-e6pu8j1k5g] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-e6pu8j1k5g] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-e6pu8j1k5g] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-e6pu8j1k5g 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-e6pu8j1k5g] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-e6pu8j1k5g {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Configuracion/Parametros.razor.rz.scp.css */
[b-vfg7po7wkj] .finput {
    border: 1px solid #555;
    padding: 6px 10px;
    font-size: 0.85rem;
    border-radius: 4px;
    background: var(--bg-input, #2a2a3e);
    color: var(--text-color, #e0e0e0);
    height: 36px;
    box-sizing: border-box;
}

[b-vfg7po7wkj] .finput:focus {
    outline: 2px solid #0d6efd;
    border-color: #0d6efd;
}

[b-vfg7po7wkj] .fbtn {
    padding: 6px 14px;
    font-size: 0.82rem;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #666;
    background: #3a3a5c;
    color: #e0e0e0;
    white-space: nowrap;
    height: 36px;
    line-height: 1;
}

[b-vfg7po7wkj] .fbtn:hover:not(:disabled) { background: #4a4a6c; }
[b-vfg7po7wkj] .fbtn:disabled { opacity: 0.5; cursor: default; }

[b-vfg7po7wkj] .fbtn-ok  { background: #198754; color: #fff; border-color: #146c43; }
[b-vfg7po7wkj] .fbtn-ok:hover:not(:disabled)   { background: #146c43; }

[b-vfg7po7wkj] .fbtn-info { background: #0d6efd; color: #fff; border-color: #0a58ca; }
[b-vfg7po7wkj] .fbtn-info:hover:not(:disabled) { background: #0a58ca; }

/* Autocomplete dropdown */
.ac-dropdown[b-vfg7po7wkj] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1e1e30;
    border: 1px solid #0d6efd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ac-item[b-vfg7po7wkj] {
    padding: 7px 12px;
    font-size: 0.83rem;
    cursor: pointer;
    color: var(--text-color, #e0e0e0);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.1s;
}

.ac-item:last-child[b-vfg7po7wkj] {
    border-bottom: none;
}

.ac-item:hover[b-vfg7po7wkj] {
    background: rgba(13, 110, 253, 0.25);
    color: #fff;
}

.ac-item strong[b-vfg7po7wkj] {
    color: #7cb9ff;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ═════════════════════════════════════════════════════════════════════════════
   LOGIN PAGE - TEMA PROFESIONAL
   ═════════════════════════════════════════════════════════════════════════════ */

.login-page[b-avwzci1qo3] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-background[b-avwzci1qo3] {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 30%, #3b82f6 70%, #0ea5e9 100%);
    z-index: -2;
}

.login-background[b-avwzci1qo3]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(34, 197, 94, 0.1) 0%, transparent 40%);
}

.login-pattern[b-avwzci1qo3] {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: patternMove-b-avwzci1qo3 20s linear infinite;
}

@keyframes patternMove-b-avwzci1qo3 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* Contenedor del login */
.login-container[b-avwzci1qo3] {
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Tarjeta de login */
.login-card[b-avwzci1qo3] {
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.login-card[b-avwzci1qo3]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #22c55e, #3b82f6);
}

/* Marca y Logo */
.login-brand[b-avwzci1qo3] {
    margin-bottom: 1.25rem;
}

.login-brand-row[b-avwzci1qo3] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.login-logo[b-avwzci1qo3] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.login-logo i[b-avwzci1qo3] {
    font-size: 1.4rem;
    color: white;
}

.login-brand-text[b-avwzci1qo3] {
    display: flex;
    align-items: center;
}

.login-title[b-avwzci1qo3] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: 0.3px;
    line-height: 1;
}

/* Alertas */
.login-alert[b-avwzci1qo3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    animation: slideDown-b-avwzci1qo3 0.3s ease;
}

@keyframes slideDown-b-avwzci1qo3 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-alert-error[b-avwzci1qo3] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.login-alert-error i[b-avwzci1qo3] {
    font-size: 1.1rem;
}

/* Formulario */
.login-form[b-avwzci1qo3] {
    margin-top: 0.5rem;
}

.form-group[b-avwzci1qo3] {
    margin-bottom: 1.25rem;
}

.form-label[b-avwzci1qo3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-label i[b-avwzci1qo3] {
    color: #3b82f6;
    font-size: 0.9rem;
}

.input-wrapper[b-avwzci1qo3] {
    position: relative;
}

.form-control[b-avwzci1qo3] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    font-size: 1rem;
    background: #f9fafb;
    color: #111827;
    transition: all 0.15s ease;
}

.form-control:focus[b-avwzci1qo3] {
    outline: none;
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-control[b-avwzci1qo3]::placeholder {
    color: #9ca3af;
}

.password-toggle[b-avwzci1qo3] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
    transition: color 0.15s ease;
}

.password-toggle:hover[b-avwzci1qo3] {
    color: #6b7280;
}

/* Botón de login */
.login-button[b-avwzci1qo3] {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2), 0 2px 4px -2px rgba(59, 130, 246, 0.2);
}

.login-button:hover[b-avwzci1qo3] {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -4px rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.login-button:active[b-avwzci1qo3] {
    transform: translateY(0);
}

.login-button i[b-avwzci1qo3] {
    font-size: 1.1rem;
}

/* Footer */
.login-footer[b-avwzci1qo3] {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f3f4f6;
}

.login-footer p[b-avwzci1qo3] {
    margin: 0;
    color: #9ca3af;
    font-size: 0.8rem;
}

.login-version[b-avwzci1qo3] {
    margin-top: 0.25rem !important;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 640px) {
    .login-container[b-avwzci1qo3] {
        padding: 1rem;
    }

    .login-card[b-avwzci1qo3] {
        padding: 1.5rem;
        border-radius: 1.25rem;
    }
}
/* /Components/Pages/Pesaje/PesajeActivo.razor.rz.scp.css */
/* ══════════════════════════════════════════════════
   PesajeActivo — Layout inspirado en el form VB
   ══════════════════════════════════════════════════

   VB original: TableLayoutPanel (2 cols 50/50)
     Izquierda: TableLayoutPanel2 (3 filas)
       Fila 0 (~33%): Panel3 — campos del formulario
       Fila 1 (~57%): PanelBruto | PanelTara  (foto grande)
       Fila 2 (60px):  Panel2   — nota + botón Guardar
     Derecha: DataGridView — historial
   ═══════════════════════════════════════════════ */

/* ── ROOT: dos columnas iguales ── */
.pesaje-root[b-u4u09kw3nb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    height: calc(100vh - 46px);   /* descuenta la topbar */
    padding: 6px;
    background: #e8eaed;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── PANELES ── */
.panel-izq[b-u4u09kw3nb],
.panel-der[b-u4u09kw3nb] {
    background: #fff;
    border: 1px solid #aaa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Títulos de panel (como caption de GroupBox VB) */
.panel-titulo[b-u4u09kw3nb] {
    background: #1a1a2e;
    color: #fff;
    font-weight: bold;
    font-size: 0.82rem;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.balanza-badge[b-u4u09kw3nb] {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: normal;
}

.bal-ok[b-u4u09kw3nb]  { background: #198754; color: #fff; }
.bal-off[b-u4u09kw3nb] { background: #6c757d; color: #fff; }

/* ── ALERTA ── */
.alerta[b-u4u09kw3nb] {
    padding: 5px 10px;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid transparent;
}

.alerta-ok[b-u4u09kw3nb]    { background: #d1e7dd; color: #0f5132; border-color: #a3cfbb; }
.alerta-error[b-u4u09kw3nb] { background: #f8d7da; color: #842029; border-color: #f5c2c7; }

.alerta-close[b-u4u09kw3nb] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    opacity: 0.65;
    line-height: 1;
    color: inherit;
}

.alerta-close:hover[b-u4u09kw3nb] { opacity: 1; }

/* ── CUERPO DEL PANEL IZQUIERDO ──
   Tres zonas verticales como en VB:
     1. campos del formulario  (flex-shrink:0)
     2. sección captura        (flex:1  → ocupa todo el espacio sobrante)
     3. pie (notas + guardar)  (flex-shrink:0)
   ─────────────────────────────────── */
.panel-body[b-u4u09kw3nb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 6px;
    gap: 4px;
    min-height: 0;
}

/* ── FILAS DE FORMULARIO (Panel3 en VB) ── */
.fila-form[b-u4u09kw3nb] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* Etiquetas azules como en VB (ForeColor = Blue, Bold, 13.8pt) */
.flabel[b-u4u09kw3nb] {
    min-width: 88px;
    font-weight: bold;
    font-size: 0.83rem;
    color: #0000cc;
    text-align: right;
    flex-shrink: 0;
}

.fila-input-group[b-u4u09kw3nb] {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Sangría para checkbox Extranjero (alineado bajo la columna de inputs) */
.fila-indent[b-u4u09kw3nb] { padding-left: 93px; }

.fila-check[b-u4u09kw3nb] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: bold;
    color: #0000cc;
    white-space: nowrap;
}

/* Inputs del formulario */
.finput[b-u4u09kw3nb] {
    border: 1px solid #999;
    padding: 2px 6px;
    font-size: 0.83rem;
    border-radius: 2px;
    background: #fff;
    height: 24px;
    box-sizing: border-box;
}

.finput:focus[b-u4u09kw3nb] {
    outline: 2px solid #0d6efd;
    border-color: #0d6efd;
}

.finput[readonly][b-u4u09kw3nb],
.finput:disabled[b-u4u09kw3nb] {
    background: #e9ecef;
    color: #6c757d;
    cursor: default;
}

.finput-patente[b-u4u09kw3nb] {
    width: 100px;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.finput-wide[b-u4u09kw3nb] {
    flex: 1;
    min-width: 0;
}

.finput-obs[b-u4u09kw3nb] {
    flex: 1;
    resize: none;
    height: 48px;
    padding: 3px 6px;
    font-size: 0.82rem;
    border: 1px solid #999;
    border-radius: 2px;
    min-width: 0;
}

/* Botones pequeños de la barra de acciones */
.fbtn[b-u4u09kw3nb] {
    padding: 2px 10px;
    font-size: 0.78rem;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid #999;
    background: #e0e0e0;
    white-space: nowrap;
    height: 24px;
    line-height: 1;
}

.fbtn:hover:not(:disabled)[b-u4u09kw3nb] { background: #d0d0d0; }
.fbtn:disabled[b-u4u09kw3nb] { opacity: 0.5; cursor: default; }

.fbtn-info[b-u4u09kw3nb] { background: #0d6efd; color: #fff; border-color: #0a58ca; }
.fbtn-info:hover:not(:disabled)[b-u4u09kw3nb] { background: #0a58ca; }

.fbtn-sec[b-u4u09kw3nb] { background: #6c757d; color: #fff; border-color: #545b62; }
.fbtn-sec:hover:not(:disabled)[b-u4u09kw3nb] { background: #545b62; }

.fbtn-ok[b-u4u09kw3nb] { background: #198754; color: #fff; border-color: #146c43; }
.fbtn-ok:hover:not(:disabled)[b-u4u09kw3nb] { background: #146c43; }

/* ── SECCIÓN DE CAPTURA (PanelBruto + PanelTara en VB) ──
   Ocupa todo el espacio vertical sobrante del panel-body
   ─────────────────────────────────────────────────────── */
.seccion-captura[b-u4u09kw3nb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #bbb;
    overflow: hidden;
    min-height: 0;
}

/* Dos columnas: Entrada (izq) | Salida (der) */
.captura-cols[b-u4u09kw3nb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Cada columna = PanelBruto / PanelTara de VB */
.captura-col[b-u4u09kw3nb] {
    display: flex;
    flex-direction: column;
    padding: 5px;
    gap: 3px;
    overflow: hidden;
    min-height: 0;
}

.captura-col:first-child[b-u4u09kw3nb] {
    border-right: 1px solid #ccc;
}

/* Cabecera de columna — no existe en VB pero añade claridad */
.captura-col-header[b-u4u09kw3nb] {
    font-weight: bold;
    font-size: 0.78rem;
    text-align: center;
    padding: 3px 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

.entrada-header[b-u4u09kw3nb] { background: #cce5ff; color: #003d80; }
.salida-header[b-u4u09kw3nb]  { background: #d4edda; color: #0b4a20; }

/* Botones CAPTURAR ENTRADA / CAPTURAR SALIDA
   En VB: Button1/Button2, Font Bold 14.25pt, ancho completo, 40px alto */
.btn-captura[b-u4u09kw3nb] {
    width: 100%;
    padding: 7px 4px;
    font-weight: bold;
    font-size: 0.88rem;
    border: 1px solid #aaa;
    cursor: pointer;
    border-radius: 2px;
    flex-shrink: 0;
    line-height: 1.2;
}

.btn-captura:disabled[b-u4u09kw3nb] { opacity: 0.45; cursor: default; }

.btn-entrada[b-u4u09kw3nb] { background: #cce5ff; color: #003d80; border-color: #99ccff; }
.btn-entrada:hover:not(:disabled)[b-u4u09kw3nb] { background: #b3d7ff; }

.btn-salida[b-u4u09kw3nb] { background: #d4edda; color: #0b4a20; border-color: #a8d5b3; }
.btn-salida:hover:not(:disabled)[b-u4u09kw3nb] { background: #b8e2c2; }

/* Texto de peso y fecha (Bold, 13.8pt en VB) */
.peso-display[b-u4u09kw3nb] {
    font-size: 0.95rem;
    font-weight: bold;
    color: #0000cc;
    text-align: center;
    flex-shrink: 0;
    padding: 1px 0;
}

.kg-label[b-u4u09kw3nb] { font-size: 0.72rem; color: #555; margin-left: 2px; }

.fecha-display[b-u4u09kw3nb] {
    font-size: 0.8rem;
    font-weight: bold;
    color: #0000cc;
    text-align: center;
    flex-shrink: 0;
}

/* Foto — en VB la imagen ocupa el resto del PanelBruto/PanelTara (~220px) */
.foto-container[b-u4u09kw3nb] {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
}

.foto-img[b-u4u09kw3nb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #aaa;
    display: block;
}

.foto-placeholder[b-u4u09kw3nb] {
    width: 100%;
    min-height: 80px;
    border: 2px dashed #bbb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #aaa;
    cursor: pointer;
    background: #fafafa;
    font-size: 0.75rem;
}

.foto-placeholder:hover[b-u4u09kw3nb] { background: #f0f0f0; border-color: #888; color: #666; }

/* Fila Total (en VB Total_t dentro de PanelTara) */
.total-row[b-u4u09kw3nb] {
    background: #fff3cd;
    border-top: 1px solid #ffc107;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    flex-shrink: 0;
    color: #664d03;
}

.total-valor[b-u4u09kw3nb] {
    font-size: 1.1rem;
    color: #0000cc;
    margin-left: 6px;
}

/* ── PIE DE PÁGINA (Panel2 en VB: TextBox1 | Button3) ──
   Horizontal: notas a la izq, botón guardar a la der
   ────────────────────────────────────────────────────── */
.pie-pagina[b-u4u09kw3nb] {
    display: flex;
    gap: 6px;
    align-items: stretch;
    flex-shrink: 0;
    min-height: 52px;
}

.pie-notas[b-u4u09kw3nb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.qr-row[b-u4u09kw3nb] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.qr-img[b-u4u09kw3nb] { width: 72px; height: 72px; border: 1px solid #aaa; }

/* Botón GUARDAR PESAJE — en VB: Button3, 216x52, ancho fijo a la derecha */
.btn-guardar[b-u4u09kw3nb] {
    width: 155px;
    min-width: 130px;
    padding: 6px 8px;
    background: #0d6efd;
    color: #fff;
    font-size: 0.88rem;
    font-weight: bold;
    border: 1px solid #0a58ca;
    border-radius: 2px;
    cursor: pointer;
    flex-shrink: 0;
    align-self: stretch;
    letter-spacing: 0.5px;
}

.btn-guardar:hover:not(:disabled)[b-u4u09kw3nb] { background: #0a58ca; }
.btn-guardar:disabled[b-u4u09kw3nb] { opacity: 0.5; cursor: default; }

/* ══════════════════════════════════════════════════
   PANEL DERECHO — Historial (DataGridView en VB)
   ══════════════════════════════════════════════════ */

.historial-count[b-u4u09kw3nb] {
    font-size: 0.75rem;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: normal;
}

.historial-tabla-wrap[b-u4u09kw3nb] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.historial-tabla[b-u4u09kw3nb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.historial-tabla th[b-u4u09kw3nb] {
    background: #1a1a2e;
    color: #fff;
    padding: 5px 7px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: bold;
    border-right: 1px solid rgba(255,255,255,0.15);
}

.historial-tabla td[b-u4u09kw3nb] {
    padding: 4px 7px;
    border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
}

.historial-tabla tbody tr[b-u4u09kw3nb] { cursor: pointer; }
.historial-tabla tbody tr:hover[b-u4u09kw3nb] { background: #e9ecef; }

/* Fila pendiente (solo tiene Pesaje1, sin Pesaje2) — amarillo como VB */
.fila-pendiente[b-u4u09kw3nb] { background: #fff9e6 !important; color: #000; }
.fila-pendiente:hover[b-u4u09kw3nb] { background: #fff0c0 !important; color: #000; }

/* Fila finalizada (ya completó proceso de salida) — verde claro */
.fila-finalizada[b-u4u09kw3nb] { background: #e6ffe6 !important; color: #000; }
.fila-finalizada:hover[b-u4u09kw3nb] { background: #ccffcc !important; color: #000; }

/* Fila seleccionada — azul como selección VB */
.fila-sel[b-u4u09kw3nb] { background: #cce5ff !important; }
.fila-sel:hover[b-u4u09kw3nb] { background: #b3d7ff !important; }

.historial-footer[b-u4u09kw3nb] {
    display: flex;
    gap: 5px;
    padding: 5px 6px;
    border-top: 1px solid #ddd;
    background: #f4f4f4;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════
   RESPONSIVIDAD: Teléfonos Móviles
   (En tablets > 767px se mantendrá el formato doble columna)
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .pesaje-root[b-u4u09kw3nb] {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
    }

    /* Liberación total de alturas fijas y recortes para todos los contenedores internos */
    .panel-izq[b-u4u09kw3nb], .panel-der[b-u4u09kw3nb], 
    .panel-body[b-u4u09kw3nb], .seccion-captura[b-u4u09kw3nb], 
    .captura-cols[b-u4u09kw3nb], .captura-col[b-u4u09kw3nb] {
        overflow: visible;
        height: auto !important;
        min-height: min-content;
        flex: none;
    }

    .captura-cols[b-u4u09kw3nb] {
        display: flex;
        flex-direction: column;
    }

    .captura-col:first-child[b-u4u09kw3nb] {
        border-right: none;
        border-bottom: 2px solid #ccc;
        padding-bottom: 10px;
        margin-bottom: 5px;
    }

    /* Aseguramos que la foto no exija estar estirada a una caja forzada */
    .foto-container[b-u4u09kw3nb] {
        flex: none;
        height: auto;
    }

    /* El historial debe crecer según sus elementos, y mostrar un scroll propio si es muy largo, o simplemente desplegar la página entera */
    .historial-tabla-wrap[b-u4u09kw3nb] {
        height: auto;
        min-height: 250px;
        overflow: visible;
        flex: none;
    }

    .pie-pagina[b-u4u09kw3nb] {
        flex-wrap: wrap;
        height: auto;
    }

    .btn-guardar[b-u4u09kw3nb] {
        width: 100%;
        min-height: 48px;
    }

    /* ── ALINEAMIENTO METICULOSO DE BOTONES E INPUTS ── */
    .fila-form[b-u4u09kw3nb] {
        flex-wrap: wrap; /* Permite saltos de línea dentro de fila-form */
    }

    .fila-input-group[b-u4u09kw3nb] {
        display: contents; /* Desagrega el grupo; sus hijos flotan directamente en fila-form */
    }

    /* 1. LPR vuelve a la línea de arriba sin saltos forzados anormales */
    .fbtn-info[b-u4u09kw3nb] {
        margin-right: 0 !important;
    }

    /* 2. El input de Patente estira lo máximo posible en su línea 1, empujando todo lo que venga después de LPR a la línea 2 */
    .finput-patente[b-u4u09kw3nb] {
        flex: 1;
        min-width: 60px;
    }

    /* También el Nombre del Chofer empujará Kg Guia hacia la fila 2 */
    .finput-wide[b-u4u09kw3nb] {
        flex: 1;
        min-width: 60px;
    }

    /* 3. El botón Buscar (es el 2do botón del grupo) es forzado a alinearse bajo los inputs */
    /* La etiqueta (label) mide 88px y el gap 5px = 93px exactos de identación */
    .fila-form button.fbtn-sec:nth-of-type(2)[b-u4u09kw3nb] {
        margin-left: 93px !important;
        margin-top: 4px;
        flex: 0 1 auto;
    }

    /* 4. Nuevo botón al lado de Buscar */
    .fila-form button.fbtn-sec:nth-of-type(3)[b-u4u09kw3nb] {
        margin-top: 4px;
        flex: 0 1 auto;
    }

    /* El checkbox de recepción se acomoda a la derecha o al lado del botón nuevo */
    .fila-form .fila-check[b-u4u09kw3nb] {
        margin-top: 4px;
    }

    /* 5. 'Kg. Guía' debe estar en la segunda línea del bloque Chofer, también identado 93px */
    .fila-form:nth-of-type(4) .fila-check[b-u4u09kw3nb] {
        margin-left: 93px !important;
    }
}
/* /Components/Pages/Pesaje/PesajePendientes.razor.rz.scp.css */
/* Estilos migrados a wwwroot/css/modules.css */