/* /Components/AlertMessage.razor.rz.scp.css */
/* ========================================
   AlertMessage - Estilos de Alertas
   ======================================== */

.alert[b-lcg6nrt20g] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: none;
    animation: slideIn-b-lcg6nrt20g 0.2s ease-out;
}

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

.alert strong[b-lcg6nrt20g] {
    font-weight: var(--font-weight-semibold);
}

.alert ul[b-lcg6nrt20g] {
    padding-left: var(--spacing-lg);
    margin-bottom: 0;
}

.alert ul li[b-lcg6nrt20g] {
    margin-top: var(--spacing-xs);
}

/* Alert Types with better contrast */
.alert-success[b-lcg6nrt20g] {
    background-color: var(--success-light);
    color: var(--success);
}

.alert-danger[b-lcg6nrt20g] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.alert-warning[b-lcg6nrt20g] {
    background-color: var(--warning-light);
    color: #856404;
}

.alert-info[b-lcg6nrt20g] {
    background-color: var(--info-light);
    color: #0c5460;
}

/* Dark mode adjustments */
:global([data-theme="dark"]) .alert-warning[b-lcg6nrt20g] {
    color: #ffca2c;
}

:global([data-theme="dark"]) .alert-info[b-lcg6nrt20g] {
    color: #31d2f2;
}

/* Close button */
.btn-close[b-lcg6nrt20g] {
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.btn-close:hover[b-lcg6nrt20g] {
    opacity: 1;
}
/* /Components/ConfirmDialog.razor.rz.scp.css */
/* ========================================
   ConfirmDialog - Estilos del Modal de Confirmacion
   ======================================== */

.modal-overlay[b-oyt9iw7ogt] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    animation: fadeIn-b-oyt9iw7ogt 0.15s ease-out;
}

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

.modal-dialog[b-oyt9iw7ogt] {
    animation: scaleIn-b-oyt9iw7ogt 0.2s ease-out;
}

@keyframes scaleIn-b-oyt9iw7ogt {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-content[b-oyt9iw7ogt] {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.modal-header[b-oyt9iw7ogt] {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.modal-title[b-oyt9iw7ogt] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.modal-body[b-oyt9iw7ogt] {
    padding: var(--spacing-lg);
    color: var(--text-secondary);
}

.modal-body p[b-oyt9iw7ogt] {
    margin: 0;
    line-height: 1.6;
}

.modal-footer[b-oyt9iw7ogt] {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* Button styling */
.modal-footer .btn[b-oyt9iw7ogt] {
    min-width: 100px;
}

.btn-secondary[b-oyt9iw7ogt] {
    background-color: var(--gray-200);
    border-color: var(--gray-200);
    color: var(--text-primary);
}

.btn-secondary:hover[b-oyt9iw7ogt] {
    background-color: var(--gray-300);
    border-color: var(--gray-300);
}

/* Dark mode */
:global([data-theme="dark"]) .btn-secondary[b-oyt9iw7ogt] {
    background-color: var(--gray-100);
    border-color: var(--gray-100);
}

:global([data-theme="dark"]) .btn-secondary:hover[b-oyt9iw7ogt] {
    background-color: var(--gray-200);
    border-color: var(--gray-200);
}
/* /Components/LoadingSpinner.razor.rz.scp.css */
/* ========================================
   LoadingSpinner - Estilos del Spinner
   ======================================== */

.loading-container[b-jzh1jp8hqf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-md);
}

.spinner-border[b-jzh1jp8hqf] {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
    color: var(--primary);
}

.loading-message[b-jzh1jp8hqf] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Overlay variant */
.loading-overlay[b-jzh1jp8hqf] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    gap: var(--spacing-md);
}

.loading-overlay .spinner-border[b-jzh1jp8hqf] {
    width: 3rem;
    height: 3rem;
    color: white;
}

.loading-overlay .loading-message[b-jzh1jp8hqf] {
    color: white;
}
/* /Components/Pagination.razor.rz.scp.css */
/* ========================================
   Pagination - Estilos de Paginacion
   ======================================== */

nav[b-4xvmiilgh2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.pagination[b-4xvmiilgh2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-item[b-4xvmiilgh2] {
    margin: 0;
}

.page-link[b-4xvmiilgh2] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.page-link:hover:not(:disabled)[b-4xvmiilgh2] {
    background-color: var(--gray-100);
    border-color: var(--primary);
    color: var(--primary);
}

.page-link:disabled[b-4xvmiilgh2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-item.active .page-link[b-4xvmiilgh2] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}

.page-item.disabled .page-link[b-4xvmiilgh2] {
    opacity: 0.5;
    pointer-events: none;
}

/* Info text */
.pagination-info[b-4xvmiilgh2] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 575.98px) {
    .page-link[b-4xvmiilgh2] {
        min-width: 2rem;
        height: 2rem;
        padding: 0 var(--spacing-xs);
        font-size: var(--font-size-xs);
    }
}
/* /Components/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-ejyxq8guge] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
}

.theme-toggle:hover[b-ejyxq8guge] {
    background-color: var(--gray-200);
    color: var(--text-primary);
    transform: scale(1.05);
}

.theme-toggle:active[b-ejyxq8guge] {
    transform: scale(0.95);
}

.theme-toggle i[b-ejyxq8guge] {
    font-size: 1.25rem;
}

/* Dark mode adjustments */
:global([data-theme="dark"]) .theme-toggle:hover[b-ejyxq8guge] {
    background-color: var(--gray-100);
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ========================================
   MainLayout - Estilos del Layout Principal
   ======================================== */

/* === Skip Link (Accessibility) === */
.skip-link[b-1n1yi98pn4] {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) 0;
    transition: top var(--transition-fast);
}

.skip-link:focus[b-1n1yi98pn4] {
    top: 0;
}

.page[b-1n1yi98pn4] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-1n1yi98pn4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-body);
}

/* === Sidebar === */
.sidebar[b-1n1yi98pn4] {
    background: var(--sidebar-bg);
    display: none;
}

/* === Mobile Sidebar Overlay === */
.sidebar-backdrop[b-1n1yi98pn4] {
    display: none;
}

@media (max-width: 767.98px) {
    .sidebar.sidebar-open[b-1n1yi98pn4] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        z-index: var(--z-fixed, 1030);
        overflow-y: auto;
        box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,.3));
    }

    .sidebar-backdrop[b-1n1yi98pn4] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--z-fixed, 1030) - 1);
    }
}

/* === Top Row === */
.top-row[b-1n1yi98pn4] {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-md);
    gap: var(--spacing-md);
}

.top-row-start[b-1n1yi98pn4] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.top-row-end[b-1n1yi98pn4] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* === Sidebar Toggle (Mobile) === */
.sidebar-toggle[b-1n1yi98pn4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.sidebar-toggle:hover[b-1n1yi98pn4] {
    background-color: var(--gray-100);
}

.sidebar-toggle i[b-1n1yi98pn4] {
    font-size: 1.5rem;
}

/* === User Info === */
.user-info[b-1n1yi98pn4] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.user-avatar[b-1n1yi98pn4] {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background-color: var(--primary);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.user-name[b-1n1yi98pn4] {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Auth Buttons === */
.btn-logout[b-1n1yi98pn4],
.btn-login[b-1n1yi98pn4] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

.btn-logout:hover[b-1n1yi98pn4],
.btn-login:hover[b-1n1yi98pn4] {
    background-color: var(--gray-100);
    color: var(--primary);
    text-decoration: none;
}

.btn-logout i[b-1n1yi98pn4],
.btn-login i[b-1n1yi98pn4] {
    font-size: 1.125rem;
}

/* === Content === */
.content[b-1n1yi98pn4] {
    flex: 1;
    padding: var(--spacing-lg);
    max-width: 100%;
    overflow-x: auto;
}

/* ========================================
   Responsive Breakpoints
   ======================================== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .top-row[b-1n1yi98pn4] {
        padding: 0 var(--spacing-lg);
    }

    .content[b-1n1yi98pn4] {
        padding: var(--spacing-lg) var(--spacing-xl);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .page[b-1n1yi98pn4] {
        flex-direction: row;
    }

    .sidebar[b-1n1yi98pn4] {
        display: block;
        width: 260px;
        min-width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    main[b-1n1yi98pn4] {
        flex: 1;
        min-width: 0;
    }

    .top-row[b-1n1yi98pn4] {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
    }

    .content[b-1n1yi98pn4] {
        padding: var(--spacing-xl) var(--spacing-2xl);
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .sidebar[b-1n1yi98pn4] {
        width: 280px;
        min-width: 280px;
    }
}

/* ========================================
   Dark Mode Adjustments
   ======================================== */

[b-1n1yi98pn4] [data-theme="dark"] .sidebar-toggle:hover {
    background-color: var(--gray-100);
}

[b-1n1yi98pn4] [data-theme="dark"] .btn-logout:hover,
[b-1n1yi98pn4] [data-theme="dark"] .btn-login:hover {
    background-color: var(--gray-100);
}
/* /Layout/MeseroLayout.razor.rz.scp.css */
/* MeseroLayout scoped styles */
/* Most styles are in mesero.css for consistency */

[b-usvsmvau2b] .mesero-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bs-body-bg);
}
/* /Layout/MeseroLoginLayout.razor.rz.scp.css */
/* ============================================
   Mesero Login Layout - Production Grade
   ============================================ */

.mesero-login-layout[b-869fahegd1] {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 50%, #01579b 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Animated Background Shapes */
.login-bg-shapes[b-869fahegd1] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.shape[b-869fahegd1] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    animation: float-b-869fahegd1 20s infinite ease-in-out;
}

.shape-1[b-869fahegd1] {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.shape-2[b-869fahegd1] {
    width: 300px;
    height: 300px;
    bottom: -50px;
    left: -100px;
    animation-delay: -5s;
    animation-duration: 25s;
}

.shape-3[b-869fahegd1] {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 10%;
    animation-delay: -10s;
    animation-duration: 18s;
}

.shape-4[b-869fahegd1] {
    width: 150px;
    height: 150px;
    bottom: 20%;
    right: 15%;
    animation-delay: -7s;
    animation-duration: 22s;
}

@keyframes float-b-869fahegd1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(20px, -30px) scale(1.05);
    }
    50% {
        transform: translate(-10px, 20px) scale(0.95);
    }
    75% {
        transform: translate(15px, 10px) scale(1.02);
    }
}

/* Main Content */
.login-content[b-869fahegd1] {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    animation: slideUp-b-869fahegd1 0.6s ease-out;
}

@keyframes slideUp-b-869fahegd1 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Login Page Container */
[b-869fahegd1] .mesero-login-page {
    width: 100%;
}

[b-869fahegd1] .login-container {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Header */
[b-869fahegd1] .login-header {
    text-align: center;
    margin-bottom: 2rem;
}

[b-869fahegd1] .login-logo {
    width: 88px;
    height: 88px;
    background: linear-gradient(135deg, #0f6b4b 0%, #09573f 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow:
        0 10px 30px -5px rgba(15, 107, 75, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

[b-869fahegd1] .login-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    border-radius: inherit;
}

[b-869fahegd1] .login-logo i {
    font-size: 2.75rem;
    color: white;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

[b-869fahegd1] .login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    position: relative;
    z-index: 1;
}

[b-869fahegd1] .login-header h1 {
    font-size: 1.875rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 0.375rem 0;
    letter-spacing: -0.5px;
}

[b-869fahegd1] .login-header p {
    color: #64748b;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Form */
[b-869fahegd1] .login-form .form-group {
    margin-bottom: 1.5rem;
}

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

[b-869fahegd1] .login-form label i {
    color: #1565c0;
    font-size: 1rem;
}

[b-869fahegd1] .login-form .form-control {
    width: 100%;
    padding: 1rem 1.125rem;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

[b-869fahegd1] .login-form .form-control::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

[b-869fahegd1] .login-form .form-control:hover {
    border-color: #d1d5db;
    background: #fff;
}

[b-869fahegd1] .login-form .form-control:focus {
    outline: none;
    border-color: #1565c0;
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(21, 101, 192, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Password Input */
[b-869fahegd1] .password-input {
    position: relative;
}

[b-869fahegd1] .password-input .form-control {
    padding-right: 3.5rem;
}

[b-869fahegd1] .btn-toggle-password {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 8px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-869fahegd1] .btn-toggle-password:hover {
    color: #1565c0;
    background: rgba(21, 101, 192, 0.1);
}

[b-869fahegd1] .btn-toggle-password i {
    font-size: 1.125rem;
}

/* Error Message */
[b-869fahegd1] .login-error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #b91c1c;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    border: 1px solid #fecaca;
    animation: shake-b-869fahegd1 0.4s ease;
}

[b-869fahegd1] .login-error i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

@keyframes shake-b-869fahegd1 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Submit Button */
[b-869fahegd1] .btn-login {
    width: 100%;
    padding: 1.125rem 1.5rem;
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    transition: all 0.2s ease;
    box-shadow:
        0 4px 14px -3px rgba(21, 101, 192, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}

[b-869fahegd1] .btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

[b-869fahegd1] .btn-login:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px -5px rgba(21, 101, 192, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[b-869fahegd1] .btn-login:hover:not(:disabled)::before {
    opacity: 1;
}

[b-869fahegd1] .btn-login:active:not(:disabled) {
    transform: translateY(0);
}

[b-869fahegd1] .btn-login:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

[b-869fahegd1] .btn-login i {
    font-size: 1.125rem;
}

[b-869fahegd1] .btn-login .spinner-border-sm {
    width: 1.125rem;
    height: 1.125rem;
    border-width: 2px;
}

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

[b-869fahegd1] .login-footer p {
    color: #94a3b8;
    font-size: 0.8125rem;
    margin: 0;
    font-weight: 500;
}

/* Validation Message */
[b-869fahegd1] .validation-message {
    color: #dc2626;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Branding Footer */
.login-branding[b-869fahegd1] {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.login-branding strong[b-869fahegd1] {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 480px) {
    .login-content[b-869fahegd1] {
        padding: 1rem;
    }

    [b-869fahegd1] .login-container {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }

    [b-869fahegd1] .login-logo {
        width: 76px;
        height: 76px;
        border-radius: 20px;
    }

    [b-869fahegd1] .login-logo i {
        font-size: 2.25rem;
    }

    [b-869fahegd1] .login-header h1 {
        font-size: 1.625rem;
    }

    .shape-1[b-869fahegd1] {
        width: 250px;
        height: 250px;
    }

    .shape-2[b-869fahegd1] {
        width: 180px;
        height: 180px;
    }

    .shape-3[b-869fahegd1], .shape-4[b-869fahegd1] {
        display: none;
    }
}

/* Dark mode support */
[b-869fahegd1] [data-theme="dark"] .login-container {
    background: rgba(30, 41, 59, 0.98);
}

[b-869fahegd1] [data-theme="dark"] .login-header h1 {
    color: #f1f5f9;
}

[b-869fahegd1] [data-theme="dark"] .login-header p {
    color: #94a3b8;
}

[b-869fahegd1] [data-theme="dark"] .login-form label {
    color: #e2e8f0;
}

[b-869fahegd1] [data-theme="dark"] .login-form .form-control {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

[b-869fahegd1] [data-theme="dark"] .login-form .form-control::placeholder {
    color: #64748b;
}

[b-869fahegd1] [data-theme="dark"] .login-form .form-control:hover {
    border-color: #475569;
    background: #1e293b;
}

[b-869fahegd1] [data-theme="dark"] .login-form .form-control:focus {
    background: #1e293b;
    border-color: #3b82f6;
}

[b-869fahegd1] [data-theme="dark"] .btn-toggle-password {
    color: #64748b;
}

[b-869fahegd1] [data-theme="dark"] .btn-toggle-password:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
}

[b-869fahegd1] [data-theme="dark"] .login-footer {
    border-top-color: #334155;
}

[b-869fahegd1] [data-theme="dark"] .login-footer p {
    color: #64748b;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .shape[b-869fahegd1] {
        animation: none;
    }

    .login-content[b-869fahegd1] {
        animation: none;
    }

    [b-869fahegd1] .login-error {
        animation: none;
    }

    [b-869fahegd1] .btn-login,
    [b-869fahegd1] .form-control,
    [b-869fahegd1] .btn-toggle-password {
        transition: none;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ========================================
   NavMenu - Estilos del Menu de Navegacion
   ======================================== */

/* === Header del Sidebar === */
.nav-header[b-wxxo4a63i3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-brand[b-wxxo4a63i3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--sidebar-text);
    transition: opacity var(--transition-fast);
}

.nav-brand:hover[b-wxxo4a63i3] {
    opacity: 0.9;
    text-decoration: none;
    color: var(--sidebar-text);
}

.brand-icon[b-wxxo4a63i3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: var(--primary);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

.brand-logo[b-wxxo4a63i3] {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    object-fit: contain;
}

.brand-text[b-wxxo4a63i3] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.025em;
}

/* === Toggle Button (Mobile) === */
.nav-toggler[b-wxxo4a63i3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.nav-toggler:hover[b-wxxo4a63i3] {
    background-color: rgba(255, 255, 255, 0.15);
}

.nav-toggler i[b-wxxo4a63i3] {
    font-size: 1.5rem;
}

/* === Nav Scrollable Area === */
.nav-scrollable[b-wxxo4a63i3] {
    padding: var(--spacing-sm) 0;
}

.nav-menu[b-wxxo4a63i3] {
    display: flex;
    flex-direction: column;
}

/* === Nav Sections === */
.nav-section[b-wxxo4a63i3] {
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xs);
}

.nav-section-title[b-wxxo4a63i3] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sidebar-text-muted);
}

/* === Nav Items === */
.nav-item[b-wxxo4a63i3] {
    padding: 0 var(--spacing-sm);
}

.nav-item[b-wxxo4a63i3]  .nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
    border-left: 3px solid transparent;
    margin-left: -3px;
}

.nav-item[b-wxxo4a63i3]  .nav-link i {
    font-size: 1.125rem;
    width: 1.25rem;
    text-align: center;
    opacity: 0.85;
}

.nav-item[b-wxxo4a63i3]  .nav-link:hover {
    background-color: var(--sidebar-hover-bg);
    color: #ffffff;
}

.nav-item[b-wxxo4a63i3]  .nav-link:hover i {
    opacity: 1;
}

.nav-item[b-wxxo4a63i3]  .nav-link.active {
    background-color: var(--sidebar-active-bg);
    color: #ffffff;
    border-left-color: var(--sidebar-active-border);
}

.nav-item[b-wxxo4a63i3]  .nav-link.active i {
    opacity: 1;
    color: var(--primary-light);
}

/* ========================================
   Responsive
   ======================================== */

@media (min-width: 768px) {
    .nav-toggler[b-wxxo4a63i3] {
        display: none;
    }

    .nav-scrollable[b-wxxo4a63i3] {
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Custom scrollbar for nav */
    .nav-scrollable[b-wxxo4a63i3]::-webkit-scrollbar {
        width: 4px;
    }

    .nav-scrollable[b-wxxo4a63i3]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scrollable[b-wxxo4a63i3]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-full);
    }

    .nav-scrollable[b-wxxo4a63i3]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

@media (max-width: 767.98px) {
    .nav-scrollable[b-wxxo4a63i3] {
        max-height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Auth/Login.razor.rz.scp.css */
/* ========================================
   Login Page - Estilos
   ======================================== */

.login-container[b-l7obnpmmzo] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: var(--spacing-lg);
}

.login-card[b-l7obnpmmzo] {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-2xl);
    width: 100%;
    max-width: 420px;
    animation: slideUp-b-l7obnpmmzo 0.3s ease-out;
}

@keyframes slideUp-b-l7obnpmmzo {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.login-header[b-l7obnpmmzo] {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.login-logo-img[b-l7obnpmmzo] {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    margin-bottom: var(--spacing-md);
    box-shadow: 0 8px 24px -6px rgba(15, 107, 75, 0.45);
}

.login-header h2[b-l7obnpmmzo] {
    color: var(--text-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.025em;
}

.login-header p[b-l7obnpmmzo] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Form */
.login-form[b-l7obnpmmzo] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-group[b-l7obnpmmzo] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group label[b-l7obnpmmzo] {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.form-group[b-l7obnpmmzo]  .form-control {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    background-color: var(--input-bg);
    color: var(--text-primary);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.form-group[b-l7obnpmmzo]  .form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.form-group[b-l7obnpmmzo]  .form-control::placeholder {
    color: var(--text-muted);
}

/* Submit Button */
.btn-login[b-l7obnpmmzo] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);   
    border: none;
    color: var(--text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast);
    margin-top: var(--spacing-sm);
}

.btn-login:hover:not(:disabled)[b-l7obnpmmzo] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.4);
}

.btn-login:active:not(:disabled)[b-l7obnpmmzo] {
    transform: translateY(0);
}

.btn-login:disabled[b-l7obnpmmzo] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Alert */
.alert[b-l7obnpmmzo] {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
}

.alert-danger[b-l7obnpmmzo] {
    background-color: var(--danger-light);
    border: 1px solid var(--danger);
    color: var(--danger);
}

/* Validation */
[b-l7obnpmmzo] .text-danger {
    color: var(--danger);
    font-size: var(--font-size-xs);
}

/* Spinner */
.spinner-border-sm[b-l7obnpmmzo] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* Responsive */
@media (max-width: 575.98px) {
    .login-card[b-l7obnpmmzo] {
        padding: var(--spacing-xl);
    }

    .login-header h2[b-l7obnpmmzo] {
        font-size: var(--font-size-2xl);
    }
}
/* /Pages/Catalogos/Productos/Index.razor.rz.scp.css */
/* ========================================
   Productos Index - Estilos
   ======================================== */

/* Header */
h1[b-s1oepbzbgt] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

h1 i[b-s1oepbzbgt] {
    color: var(--primary);
}

/* Thumbnails */
.product-thumbnail[b-s1oepbzbgt] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.product-thumbnail-placeholder[b-s1oepbzbgt] {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-100);
    border-radius: var(--radius-md);
    color: var(--text-muted);
}

/* Empty state */
.empty-state[b-s1oepbzbgt] {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-muted);
}

.empty-state i[b-s1oepbzbgt] {
    font-size: 4rem;
    opacity: 0.5;
}

.empty-state p[b-s1oepbzbgt] {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-lg);
}

/* Category badge with custom color */
.category-badge[b-s1oepbzbgt] {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    color: white;
}

/* Price display */
.price-main[b-s1oepbzbgt] {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.price-cost[b-s1oepbzbgt] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
/* /Pages/Operacion/Monitor/Index.razor.rz.scp.css */
/* ============================================
   MONITOR DE COCINA - PRODUCTION GRADE STYLES
   ============================================ */

/* Variables CSS - Tema Claro por defecto */
.monitor-container[b-qvpz4w129b] {
    --monitor-bg: #f0f2f5;
    --monitor-surface: #ffffff;
    --monitor-surface-alt: #f8f9fa;
    --monitor-surface-hover: #e9ecef;
    --monitor-border: #dee2e6;
    --monitor-text: #1a1a1a;
    --monitor-text-muted: #6c757d;
    --monitor-primary: #2563eb;
    --monitor-success: #16a34a;
    --monitor-warning: #d97706;
    --monitor-danger: #dc2626;
    --monitor-info: #0891b2;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Variables CSS - Tema Oscuro */
[data-theme="dark"] .monitor-container[b-qvpz4w129b] {
    --monitor-bg: #1a1d21;
    --monitor-surface: #252a31;
    --monitor-surface-alt: #2d333b;
    --monitor-surface-hover: #373e47;
    --monitor-border: #3a4149;
    --monitor-text: #e8eaed;
    --monitor-text-muted: #9aa0a6;
    --monitor-primary: #4285f4;
    --monitor-success: #34a853;
    --monitor-warning: #fbbc04;
    --monitor-danger: #ea4335;
    --monitor-info: #4fc3f7;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* ==================== LAYOUT PRINCIPAL ==================== */

.monitor-container[b-qvpz4w129b] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--monitor-bg);
    background-image:
        radial-gradient(ellipse at top, rgba(66, 133, 244, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(52, 168, 83, 0.03) 0%, transparent 50%);
    padding: 1rem;
    color: var(--monitor-text);
}

.monitor-container.fullscreen-mode[b-qvpz4w129b] {
    padding: 0.5rem;
}

/* ==================== HEADER ==================== */

.monitor-header[b-qvpz4w129b] {
    background: var(--monitor-surface);
    border: 1px solid var(--monitor-border);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.monitor-header h4[b-qvpz4w129b] {
    margin: 0;
    font-weight: 600;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-left[b-qvpz4w129b] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-right[b-qvpz4w129b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.area-badge[b-qvpz4w129b] {
    background: var(--monitor-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.area-selector[b-qvpz4w129b] {
    background: var(--monitor-bg);
    border: 1px solid var(--monitor-border);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: var(--monitor-text);
    font-size: 0.9rem;
    min-width: 200px;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.area-selector:focus[b-qvpz4w129b] {
    outline: none;
    border-color: var(--monitor-primary);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}

.connection-badge[b-qvpz4w129b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.connection-badge.connected[b-qvpz4w129b] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.connection-badge.disconnected[b-qvpz4w129b] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    animation: pulse-danger-b-qvpz4w129b 2s infinite;
}

[data-theme="dark"] .connection-badge.connected[b-qvpz4w129b] {
    background: rgba(22, 163, 74, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

[data-theme="dark"] .connection-badge.disconnected[b-qvpz4w129b] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.connection-dot[b-qvpz4w129b] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.connected .connection-dot[b-qvpz4w129b] {
    animation: pulse-dot-b-qvpz4w129b 2s infinite;
}

.header-btn[b-qvpz4w129b] {
    background: var(--monitor-surface);
    border: 1px solid var(--monitor-border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: var(--monitor-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

.header-btn:hover[b-qvpz4w129b] {
    background: var(--monitor-bg);
    border-color: var(--monitor-primary);
    color: var(--monitor-primary);
}

.header-btn.active[b-qvpz4w129b] {
    background: var(--monitor-primary);
    border-color: var(--monitor-primary);
    color: white;
}

.header-btn i[b-qvpz4w129b] {
    font-size: 1.1rem;
}

.clock-display[b-qvpz4w129b] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--monitor-text);
    background: var(--monitor-bg);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--monitor-border);
}

/* ==================== ESTADISTICAS ==================== */

.stats-grid[b-qvpz4w129b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.stat-card[b-qvpz4w129b] {
    background: var(--monitor-surface);
    border: 1px solid var(--monitor-border);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.stat-card[b-qvpz4w129b]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--stat-color, var(--monitor-border));
}

.stat-card:active[b-qvpz4w129b] {
    transform: scale(0.98);
}

.stat-card.warning[b-qvpz4w129b] { --stat-color: var(--monitor-warning); }
.stat-card.primary[b-qvpz4w129b] { --stat-color: var(--monitor-primary); }
.stat-card.success[b-qvpz4w129b] { --stat-color: var(--monitor-success); }
.stat-card.danger[b-qvpz4w129b] { --stat-color: var(--monitor-danger); }
.stat-card.info[b-qvpz4w129b] { --stat-color: var(--monitor-info); }

.stat-value[b-qvpz4w129b] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--stat-color, var(--monitor-text));
}

.stat-label[b-qvpz4w129b] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--monitor-text-muted);
    margin-top: 0.25rem;
}

/* ==================== AREA SCROLLABLE DE COMANDAS ==================== */

.comandas-scroll-area[b-qvpz4w129b] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--monitor-border) transparent;
    padding-bottom: 1rem;
}

.comandas-scroll-area[b-qvpz4w129b]::-webkit-scrollbar {
    width: 8px;
}

.comandas-scroll-area[b-qvpz4w129b]::-webkit-scrollbar-track {
    background: transparent;
}

.comandas-scroll-area[b-qvpz4w129b]::-webkit-scrollbar-thumb {
    background: var(--monitor-border);
    border-radius: 4px;
}

/* ==================== GRID DE COMANDAS ==================== */

.comandas-grid[b-qvpz4w129b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
    padding-bottom: 2rem;
}

@media (min-width: 1600px) {
    .comandas-grid[b-qvpz4w129b] {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }
}

@media (max-width: 768px) {
    .comandas-grid[b-qvpz4w129b] {
        grid-template-columns: 1fr;
    }
}

/* ==================== COMANDA CARD ==================== */

[b-qvpz4w129b] .comanda-card {
    background: var(--monitor-surface);
    border: 1px solid var(--monitor-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
}

[b-qvpz4w129b] .comanda-card:active {
    transform: scale(0.99);
}

/* Estados de la card */
[b-qvpz4w129b] .comanda-card.comanda-pendiente {
    border-left: 4px solid var(--monitor-warning);
}

[b-qvpz4w129b] .comanda-card.comanda-preparando {
    border-left: 4px solid var(--monitor-primary);
}

[b-qvpz4w129b] .comanda-card.comanda-lista {
    border-left: 4px solid var(--monitor-success);
    background: linear-gradient(135deg, rgba(52, 168, 83, 0.08) 0%, var(--monitor-surface) 100%);
}

[b-qvpz4w129b] .comanda-card.comanda-retrasada {
    border-left: 6px solid var(--monitor-danger);
    animation: shake-b-qvpz4w129b 0.5s ease-in-out 3;
}

[b-qvpz4w129b] .comanda-card.comanda-urgente {
    border-color: var(--monitor-danger);
    box-shadow: 0 0 20px rgba(234, 67, 53, 0.3);
}

[b-qvpz4w129b] .comanda-card.comanda-aclaracion {
    border-left: 4px solid var(--monitor-info);
}

/* Header de comanda */
[b-qvpz4w129b] .comanda-header {
    background: var(--monitor-surface-alt);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--monitor-border);
}

[b-qvpz4w129b] .comanda-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

[b-qvpz4w129b] .comanda-numero {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--monitor-text);
    font-family: 'SF Mono', 'Consolas', monospace;
}

[b-qvpz4w129b] .comanda-mesa {
    background: var(--monitor-primary);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

[b-qvpz4w129b] .comanda-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

[b-qvpz4w129b] .comanda-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

[b-qvpz4w129b] .comanda-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--monitor-text-muted);
}

[b-qvpz4w129b] .comanda-info-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Tiempo */
[b-qvpz4w129b] .comanda-tiempo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Consolas', monospace;
}

[b-qvpz4w129b] .comanda-tiempo.tiempo-normal {
    background: rgba(66, 133, 244, 0.1);
    color: var(--monitor-primary);
}

[b-qvpz4w129b] .comanda-tiempo.tiempo-alerta {
    background: rgba(251, 188, 4, 0.15);
    color: var(--monitor-warning);
}

[b-qvpz4w129b] .comanda-tiempo.tiempo-retrasado {
    background: rgba(234, 67, 53, 0.15);
    color: var(--monitor-danger);
    animation: pulse-bg-b-qvpz4w129b 1s infinite;
}

[b-qvpz4w129b] .tiempo-retraso {
    background: var(--monitor-danger);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Items */
[b-qvpz4w129b] .comanda-items {
    flex: 1;
    padding: 0.75rem;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--monitor-border) transparent;
}

[b-qvpz4w129b] .comanda-items::-webkit-scrollbar {
    width: 6px;
}

[b-qvpz4w129b] .comanda-items::-webkit-scrollbar-track {
    background: transparent;
}

[b-qvpz4w129b] .comanda-items::-webkit-scrollbar-thumb {
    background: var(--monitor-border);
    border-radius: 3px;
}

[b-qvpz4w129b] .comanda-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    min-height: 52px;
    margin-bottom: 0.5rem;
    background: var(--monitor-surface-alt);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 100ms ease;
    border: 1px solid transparent;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

[b-qvpz4w129b] .comanda-item:active {
    background: var(--monitor-surface-hover);
    transform: scale(0.98);
}

[b-qvpz4w129b] .comanda-item:last-child {
    margin-bottom: 0;
}

[b-qvpz4w129b] .comanda-item.item-listo {
    background: rgba(52, 168, 83, 0.15);
    border-left: 3px solid var(--monitor-success);
}

[b-qvpz4w129b] .comanda-item.item-preparando {
    background: rgba(66, 133, 244, 0.15);
    border-left: 3px solid var(--monitor-primary);
}

[b-qvpz4w129b] .comanda-item.item-aclaracion {
    background: rgba(251, 188, 4, 0.15);
    border-left: 3px solid var(--monitor-warning);
}

[b-qvpz4w129b] .comanda-item.item-cancelado {
    opacity: 0.5;
    text-decoration: line-through;
}

[b-qvpz4w129b] .item-cantidad {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--monitor-primary);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
}

[b-qvpz4w129b] .item-info {
    flex: 1;
    min-width: 0;
}

[b-qvpz4w129b] .item-nombre {
    font-weight: 600;
    font-size: 1rem;
    color: var(--monitor-text);
    margin-bottom: 0.25rem;
}

[b-qvpz4w129b] .item-detalle {
    font-size: 0.8rem;
    color: var(--monitor-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[b-qvpz4w129b] .item-modificador {
    color: var(--monitor-danger);
    font-weight: 500;
}

[b-qvpz4w129b] .item-guarnicion {
    color: var(--monitor-success);
}

[b-qvpz4w129b] .item-notas {
    color: var(--monitor-warning);
    font-style: italic;
    display: block;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(251, 188, 4, 0.1);
    border-radius: 4px;
    font-size: 0.8rem;
}

[b-qvpz4w129b] .item-estado-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Notas de comanda */
[b-qvpz4w129b] .comanda-notas {
    padding: 0.75rem 1rem;
    background: rgba(251, 188, 4, 0.1);
    border-top: 1px solid rgba(251, 188, 4, 0.2);
}

[b-qvpz4w129b] .nota-cocina {
    color: var(--monitor-warning);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

[b-qvpz4w129b] .nota-general {
    color: var(--monitor-text-muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Acciones */
[b-qvpz4w129b] .comanda-actions {
    padding: 0.75rem 1rem;
    background: var(--monitor-surface-alt);
    border-top: 1px solid var(--monitor-border);
    display: flex;
    gap: 0.5rem;
}

[b-qvpz4w129b] .btn-action {
    flex: 1;
    padding: 1rem 1.25rem;
    min-height: 56px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

[b-qvpz4w129b] .btn-action:active {
    transform: scale(0.95);
    filter: brightness(0.85);
}

[b-qvpz4w129b] .btn-action.btn-iniciar {
    background: linear-gradient(135deg, var(--monitor-primary), #1a73e8);
    color: white;
}

[b-qvpz4w129b] .btn-action.btn-listo {
    background: linear-gradient(135deg, var(--monitor-success), #2e7d32);
    color: white;
}

[b-qvpz4w129b] .btn-action.btn-entregado {
    background: linear-gradient(135deg, #424242, #212121);
    color: white;
}

[b-qvpz4w129b] .btn-action.btn-secondary {
    background: var(--monitor-bg);
    color: var(--monitor-text);
    border: 1px solid var(--monitor-border);
}

/* ==================== EMPTY STATE ==================== */

.empty-state[b-qvpz4w129b] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--monitor-text-muted);
}

.empty-state-icon[b-qvpz4w129b] {
    font-size: 5rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state h4[b-qvpz4w129b] {
    color: var(--monitor-text);
    margin-bottom: 0.5rem;
}

/* ==================== LOADING STATE ==================== */

.loading-state[b-qvpz4w129b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--monitor-text-muted);
}

.loading-spinner[b-qvpz4w129b] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--monitor-border);
    border-top-color: var(--monitor-primary);
    border-radius: 50%;
    animation: spin-b-qvpz4w129b 1s linear infinite;
}

/* ==================== ANIMACIONES ==================== */

@keyframes spin-b-qvpz4w129b {
    to { transform: rotate(360deg); }
}

.spin[b-qvpz4w129b] {
    animation: spin-b-qvpz4w129b 1s linear infinite;
}

.tiempo-estimado[b-qvpz4w129b] {
    opacity: 0.6;
    font-size: 0.85em;
}

@keyframes pulse-dot-b-qvpz4w129b {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse-danger-b-qvpz4w129b {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(234, 67, 53, 0); }
}

@keyframes pulse-bg-b-qvpz4w129b {
    0%, 100% { background-color: rgba(234, 67, 53, 0.15); }
    50% { background-color: rgba(234, 67, 53, 0.25); }
}

@keyframes shake-b-qvpz4w129b {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes highlight-b-qvpz4w129b {
    0% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(66, 133, 244, 0); }
    100% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0); }
}

[b-qvpz4w129b] .highlight-animation {
    animation: highlight-b-qvpz4w129b 1s ease-out;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .monitor-container[b-qvpz4w129b] {
        padding: 0.5rem;
    }

    .monitor-header[b-qvpz4w129b] {
        padding: 0.75rem 1rem;
        border-radius: 8px;
    }

    .monitor-header h4[b-qvpz4w129b] {
        font-size: 1rem;
    }

    .stats-grid[b-qvpz4w129b] {
        grid-template-columns: repeat(3, 1fr);
    }

    .stat-value[b-qvpz4w129b] {
        font-size: 1.5rem;
    }

    .stat-label[b-qvpz4w129b] {
        font-size: 0.65rem;
    }

    [b-qvpz4w129b] .comanda-numero {
        font-size: 1.25rem;
    }

    [b-qvpz4w129b] .btn-action {
        padding: 0.85rem 1rem;
        font-size: 1rem;
        min-height: 52px;
    }
}

/* ==================== MODO KIOSKO ==================== */

.monitor-container.kiosk-mode[b-qvpz4w129b] {
    min-height: 100vh;
    border-radius: 0;
}

.btn-kiosk[b-qvpz4w129b] {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-color: #6366f1 !important;
    color: white !important;
}

.btn-kiosk:hover[b-qvpz4w129b] {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1px);
}

.btn-exit-kiosk[b-qvpz4w129b] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #ef4444 !important;
    color: white !important;
}

.btn-exit-kiosk:hover[b-qvpz4w129b] {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

/* ==================== HOVER SOLO PARA DESKTOP ==================== */

@media (hover: hover) and (pointer: fine) {
    [b-qvpz4w129b] .comanda-card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-2px);
    }

    [b-qvpz4w129b] .comanda-item:hover {
        background: var(--monitor-surface-hover);
        border-color: var(--monitor-border);
    }

    [b-qvpz4w129b] .btn-action.btn-iniciar:hover {
        box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
    }

    [b-qvpz4w129b] .btn-action.btn-listo:hover {
        box-shadow: 0 4px 12px rgba(52, 168, 83, 0.4);
    }

    [b-qvpz4w129b] .btn-action.btn-entregado:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .stat-card:hover[b-qvpz4w129b] {
        transform: translateY(-2px);
        box-shadow: var(--card-shadow);
    }
}

/* ==================== OPTIMIZACIONES PARA TOUCH ==================== */

@media (hover: none) and (pointer: coarse) {
    [b-qvpz4w129b] .comanda-card.comanda-retrasada {
        animation: none;
        border-left-width: 6px;
    }

    [b-qvpz4w129b] .comanda-card {
        transition: none;
    }

    [b-qvpz4w129b] .btn-action {
        min-height: 60px;
        font-size: 1.15rem;
    }
}
/* /Pages/Operacion/Monitor/Kiosk.razor.rz.scp.css */
/* ============================================
   MONITOR DE COCINA - PRODUCTION GRADE STYLES
   ============================================ */

/* Variables CSS - Tema Claro por defecto */
.monitor-container[b-r0269nbewn] {
    --monitor-bg: #f0f2f5;
    --monitor-surface: #ffffff;
    --monitor-surface-alt: #f8f9fa;
    --monitor-surface-hover: #e9ecef;
    --monitor-border: #dee2e6;
    --monitor-text: #1a1a1a;
    --monitor-text-muted: #6c757d;
    --monitor-primary: #2563eb;
    --monitor-success: #16a34a;
    --monitor-warning: #d97706;
    --monitor-danger: #dc2626;
    --monitor-info: #0891b2;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Variables CSS - Tema Oscuro */
[data-theme="dark"] .monitor-container[b-r0269nbewn] {
    --monitor-bg: #1a1d21;
    --monitor-surface: #252a31;
    --monitor-surface-alt: #2d333b;
    --monitor-surface-hover: #373e47;
    --monitor-border: #3a4149;
    --monitor-text: #e8eaed;
    --monitor-text-muted: #9aa0a6;
    --monitor-primary: #4285f4;
    --monitor-success: #34a853;
    --monitor-warning: #fbbc04;
    --monitor-danger: #ea4335;
    --monitor-info: #4fc3f7;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* ==================== LAYOUT PRINCIPAL ==================== */

.monitor-container[b-r0269nbewn] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--monitor-bg);
    background-image:
        radial-gradient(ellipse at top, rgba(66, 133, 244, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(52, 168, 83, 0.03) 0%, transparent 50%);
    padding: 1rem;
    color: var(--monitor-text);
}

.monitor-container.fullscreen-mode[b-r0269nbewn] {
    padding: 0.5rem;
}

/* ==================== HEADER ==================== */

.monitor-header[b-r0269nbewn] {
    background: var(--monitor-surface);
    border: 1px solid var(--monitor-border);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.monitor-header h4[b-r0269nbewn] {
    margin: 0;
    font-weight: 600;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-left[b-r0269nbewn] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-right[b-r0269nbewn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.area-badge[b-r0269nbewn] {
    background: var(--monitor-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.area-selector[b-r0269nbewn] {
    background: var(--monitor-bg);
    border: 1px solid var(--monitor-border);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: var(--monitor-text);
    font-size: 0.9rem;
    min-width: 200px;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.area-selector:focus[b-r0269nbewn] {
    outline: none;
    border-color: var(--monitor-primary);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}

.connection-badge[b-r0269nbewn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.connection-badge.connected[b-r0269nbewn] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.connection-badge.disconnected[b-r0269nbewn] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    animation: pulse-danger-b-r0269nbewn 2s infinite;
}

[data-theme="dark"] .connection-badge.connected[b-r0269nbewn] {
    background: rgba(22, 163, 74, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

[data-theme="dark"] .connection-badge.disconnected[b-r0269nbewn] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.connection-dot[b-r0269nbewn] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.connected .connection-dot[b-r0269nbewn] {
    animation: pulse-dot-b-r0269nbewn 2s infinite;
}

.header-btn[b-r0269nbewn] {
    background: var(--monitor-surface);
    border: 1px solid var(--monitor-border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: var(--monitor-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

.header-btn:hover[b-r0269nbewn] {
    background: var(--monitor-bg);
    border-color: var(--monitor-primary);
    color: var(--monitor-primary);
}

.header-btn.active[b-r0269nbewn] {
    background: var(--monitor-primary);
    border-color: var(--monitor-primary);
    color: white;
}

.header-btn i[b-r0269nbewn] {
    font-size: 1.1rem;
}

.clock-display[b-r0269nbewn] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--monitor-text);
    background: var(--monitor-bg);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--monitor-border);
}

/* ==================== ESTADISTICAS ==================== */

.stats-grid[b-r0269nbewn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.stat-card[b-r0269nbewn] {
    background: var(--monitor-surface);
    border: 1px solid var(--monitor-border);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.stat-card[b-r0269nbewn]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--stat-color, var(--monitor-border));
}

.stat-card:active[b-r0269nbewn] {
    transform: scale(0.98);
}

.stat-card.warning[b-r0269nbewn] { --stat-color: var(--monitor-warning); }
.stat-card.primary[b-r0269nbewn] { --stat-color: var(--monitor-primary); }
.stat-card.success[b-r0269nbewn] { --stat-color: var(--monitor-success); }
.stat-card.danger[b-r0269nbewn] { --stat-color: var(--monitor-danger); }
.stat-card.info[b-r0269nbewn] { --stat-color: var(--monitor-info); }

.stat-value[b-r0269nbewn] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--stat-color, var(--monitor-text));
}

.stat-label[b-r0269nbewn] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--monitor-text-muted);
    margin-top: 0.25rem;
}

/* ==================== AREA SCROLLABLE DE COMANDAS ==================== */

.comandas-scroll-area[b-r0269nbewn] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--monitor-border) transparent;
    padding-bottom: 1rem;
}

.comandas-scroll-area[b-r0269nbewn]::-webkit-scrollbar {
    width: 8px;
}

.comandas-scroll-area[b-r0269nbewn]::-webkit-scrollbar-track {
    background: transparent;
}

.comandas-scroll-area[b-r0269nbewn]::-webkit-scrollbar-thumb {
    background: var(--monitor-border);
    border-radius: 4px;
}

/* ==================== GRID DE COMANDAS ==================== */

.comandas-grid[b-r0269nbewn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
    padding-bottom: 2rem;
}

@media (min-width: 1600px) {
    .comandas-grid[b-r0269nbewn] {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }
}

@media (max-width: 768px) {
    .comandas-grid[b-r0269nbewn] {
        grid-template-columns: 1fr;
    }
}

/* ==================== COMANDA CARD ==================== */

[b-r0269nbewn] .comanda-card {
    background: var(--monitor-surface);
    border: 1px solid var(--monitor-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
}

[b-r0269nbewn] .comanda-card:active {
    transform: scale(0.99);
}

/* Estados de la card */
[b-r0269nbewn] .comanda-card.comanda-pendiente {
    border-left: 4px solid var(--monitor-warning);
}

[b-r0269nbewn] .comanda-card.comanda-preparando {
    border-left: 4px solid var(--monitor-primary);
}

[b-r0269nbewn] .comanda-card.comanda-lista {
    border-left: 4px solid var(--monitor-success);
    background: linear-gradient(135deg, rgba(52, 168, 83, 0.08) 0%, var(--monitor-surface) 100%);
}

[b-r0269nbewn] .comanda-card.comanda-retrasada {
    border-left: 6px solid var(--monitor-danger);
    animation: shake-b-r0269nbewn 0.5s ease-in-out 3;
}

[b-r0269nbewn] .comanda-card.comanda-urgente {
    border-color: var(--monitor-danger);
    box-shadow: 0 0 20px rgba(234, 67, 53, 0.3);
}

[b-r0269nbewn] .comanda-card.comanda-aclaracion {
    border-left: 4px solid var(--monitor-info);
}

/* Header de comanda */
[b-r0269nbewn] .comanda-header {
    background: var(--monitor-surface-alt);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--monitor-border);
}

[b-r0269nbewn] .comanda-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

[b-r0269nbewn] .comanda-numero {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--monitor-text);
    font-family: 'SF Mono', 'Consolas', monospace;
}

[b-r0269nbewn] .comanda-mesa {
    background: var(--monitor-primary);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

[b-r0269nbewn] .comanda-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

[b-r0269nbewn] .comanda-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

[b-r0269nbewn] .comanda-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--monitor-text-muted);
}

[b-r0269nbewn] .comanda-info-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Tiempo */
[b-r0269nbewn] .comanda-tiempo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Consolas', monospace;
}

[b-r0269nbewn] .comanda-tiempo.tiempo-normal {
    background: rgba(66, 133, 244, 0.1);
    color: var(--monitor-primary);
}

[b-r0269nbewn] .comanda-tiempo.tiempo-alerta {
    background: rgba(251, 188, 4, 0.15);
    color: var(--monitor-warning);
}

[b-r0269nbewn] .comanda-tiempo.tiempo-retrasado {
    background: rgba(234, 67, 53, 0.15);
    color: var(--monitor-danger);
    animation: pulse-bg-b-r0269nbewn 1s infinite;
}

[b-r0269nbewn] .tiempo-retraso {
    background: var(--monitor-danger);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Items */
[b-r0269nbewn] .comanda-items {
    flex: 1;
    padding: 0.75rem;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--monitor-border) transparent;
}

[b-r0269nbewn] .comanda-items::-webkit-scrollbar {
    width: 6px;
}

[b-r0269nbewn] .comanda-items::-webkit-scrollbar-track {
    background: transparent;
}

[b-r0269nbewn] .comanda-items::-webkit-scrollbar-thumb {
    background: var(--monitor-border);
    border-radius: 3px;
}

[b-r0269nbewn] .comanda-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    min-height: 52px;
    margin-bottom: 0.5rem;
    background: var(--monitor-surface-alt);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 100ms ease;
    border: 1px solid transparent;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

[b-r0269nbewn] .comanda-item:active {
    background: var(--monitor-surface-hover);
    transform: scale(0.98);
}

[b-r0269nbewn] .comanda-item:last-child {
    margin-bottom: 0;
}

[b-r0269nbewn] .comanda-item.item-listo {
    background: rgba(52, 168, 83, 0.15);
    border-left: 3px solid var(--monitor-success);
}

[b-r0269nbewn] .comanda-item.item-preparando {
    background: rgba(66, 133, 244, 0.15);
    border-left: 3px solid var(--monitor-primary);
}

[b-r0269nbewn] .comanda-item.item-aclaracion {
    background: rgba(251, 188, 4, 0.15);
    border-left: 3px solid var(--monitor-warning);
}

[b-r0269nbewn] .comanda-item.item-cancelado {
    opacity: 0.5;
    text-decoration: line-through;
}

[b-r0269nbewn] .item-cantidad {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--monitor-primary);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
}

[b-r0269nbewn] .item-info {
    flex: 1;
    min-width: 0;
}

[b-r0269nbewn] .item-nombre {
    font-weight: 600;
    font-size: 1rem;
    color: var(--monitor-text);
    margin-bottom: 0.25rem;
}

[b-r0269nbewn] .item-detalle {
    font-size: 0.8rem;
    color: var(--monitor-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[b-r0269nbewn] .item-modificador {
    color: var(--monitor-danger);
    font-weight: 500;
}

[b-r0269nbewn] .item-guarnicion {
    color: var(--monitor-success);
}

[b-r0269nbewn] .item-notas {
    color: var(--monitor-warning);
    font-style: italic;
    display: block;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(251, 188, 4, 0.1);
    border-radius: 4px;
    font-size: 0.8rem;
}

[b-r0269nbewn] .item-estado-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Notas de comanda */
[b-r0269nbewn] .comanda-notas {
    padding: 0.75rem 1rem;
    background: rgba(251, 188, 4, 0.1);
    border-top: 1px solid rgba(251, 188, 4, 0.2);
}

[b-r0269nbewn] .nota-cocina {
    color: var(--monitor-warning);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

[b-r0269nbewn] .nota-general {
    color: var(--monitor-text-muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Acciones */
[b-r0269nbewn] .comanda-actions {
    padding: 0.75rem 1rem;
    background: var(--monitor-surface-alt);
    border-top: 1px solid var(--monitor-border);
    display: flex;
    gap: 0.5rem;
}

[b-r0269nbewn] .btn-action {
    flex: 1;
    padding: 1rem 1.25rem;
    min-height: 56px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

[b-r0269nbewn] .btn-action:active {
    transform: scale(0.95);
    filter: brightness(0.85);
}

[b-r0269nbewn] .btn-action.btn-iniciar {
    background: linear-gradient(135deg, var(--monitor-primary), #1a73e8);
    color: white;
}

[b-r0269nbewn] .btn-action.btn-listo {
    background: linear-gradient(135deg, var(--monitor-success), #2e7d32);
    color: white;
}

[b-r0269nbewn] .btn-action.btn-entregado {
    background: linear-gradient(135deg, #424242, #212121);
    color: white;
}

[b-r0269nbewn] .btn-action.btn-secondary {
    background: var(--monitor-bg);
    color: var(--monitor-text);
    border: 1px solid var(--monitor-border);
}

/* ==================== EMPTY STATE ==================== */

.empty-state[b-r0269nbewn] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--monitor-text-muted);
}

.empty-state-icon[b-r0269nbewn] {
    font-size: 5rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state h4[b-r0269nbewn] {
    color: var(--monitor-text);
    margin-bottom: 0.5rem;
}

/* ==================== LOADING STATE ==================== */

.loading-state[b-r0269nbewn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--monitor-text-muted);
}

.loading-spinner[b-r0269nbewn] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--monitor-border);
    border-top-color: var(--monitor-primary);
    border-radius: 50%;
    animation: spin-b-r0269nbewn 1s linear infinite;
}

/* ==================== ANIMACIONES ==================== */

@keyframes spin-b-r0269nbewn {
    to { transform: rotate(360deg); }
}

.spin[b-r0269nbewn] {
    animation: spin-b-r0269nbewn 1s linear infinite;
}

.tiempo-estimado[b-r0269nbewn] {
    opacity: 0.6;
    font-size: 0.85em;
}

@keyframes pulse-dot-b-r0269nbewn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse-danger-b-r0269nbewn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(234, 67, 53, 0); }
}

@keyframes pulse-bg-b-r0269nbewn {
    0%, 100% { background-color: rgba(234, 67, 53, 0.15); }
    50% { background-color: rgba(234, 67, 53, 0.25); }
}

@keyframes shake-b-r0269nbewn {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes highlight-b-r0269nbewn {
    0% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(66, 133, 244, 0); }
    100% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0); }
}

[b-r0269nbewn] .highlight-animation {
    animation: highlight-b-r0269nbewn 1s ease-out;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .monitor-container[b-r0269nbewn] {
        padding: 0.5rem;
    }

    .monitor-header[b-r0269nbewn] {
        padding: 0.75rem 1rem;
        border-radius: 8px;
    }

    .monitor-header h4[b-r0269nbewn] {
        font-size: 1rem;
    }

    .stats-grid[b-r0269nbewn] {
        grid-template-columns: repeat(3, 1fr);
    }

    .stat-value[b-r0269nbewn] {
        font-size: 1.5rem;
    }

    .stat-label[b-r0269nbewn] {
        font-size: 0.65rem;
    }

    [b-r0269nbewn] .comanda-numero {
        font-size: 1.25rem;
    }

    [b-r0269nbewn] .btn-action {
        padding: 0.85rem 1rem;
        font-size: 1rem;
        min-height: 52px;
    }
}

/* ==================== MODO KIOSKO ==================== */

.monitor-container.kiosk-mode[b-r0269nbewn] {
    min-height: 100vh;
    border-radius: 0;
}

.btn-kiosk[b-r0269nbewn] {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-color: #6366f1 !important;
    color: white !important;
}

.btn-kiosk:hover[b-r0269nbewn] {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1px);
}

.btn-exit-kiosk[b-r0269nbewn] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #ef4444 !important;
    color: white !important;
}

.btn-exit-kiosk:hover[b-r0269nbewn] {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

/* ==================== HOVER SOLO PARA DESKTOP ==================== */

@media (hover: hover) and (pointer: fine) {
    [b-r0269nbewn] .comanda-card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-2px);
    }

    [b-r0269nbewn] .comanda-item:hover {
        background: var(--monitor-surface-hover);
        border-color: var(--monitor-border);
    }

    [b-r0269nbewn] .btn-action.btn-iniciar:hover {
        box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
    }

    [b-r0269nbewn] .btn-action.btn-listo:hover {
        box-shadow: 0 4px 12px rgba(52, 168, 83, 0.4);
    }

    [b-r0269nbewn] .btn-action.btn-entregado:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .stat-card:hover[b-r0269nbewn] {
        transform: translateY(-2px);
        box-shadow: var(--card-shadow);
    }
}

/* ==================== OPTIMIZACIONES PARA TOUCH ==================== */

@media (hover: none) and (pointer: coarse) {
    [b-r0269nbewn] .comanda-card.comanda-retrasada {
        animation: none;
        border-left-width: 6px;
    }

    [b-r0269nbewn] .comanda-card {
        transition: none;
    }

    [b-r0269nbewn] .btn-action {
        min-height: 60px;
        font-size: 1.15rem;
    }
}
/* /Pages/Operacion/Ordenes/Index.razor.rz.scp.css */
/* ========================================
   Ordenes Index - Estilos
   ======================================== */

/* Header */
h1[b-mhbi7jlpo6] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

/* Summary Cards */
.summary-card[b-mhbi7jlpo6] {
    border-radius: var(--radius-lg);
    transition: transform var(--transition-fast);
}

.summary-card:hover[b-mhbi7jlpo6] {
    transform: translateY(-2px);
}

.summary-card .card-body[b-mhbi7jlpo6] {
    padding: var(--spacing-md);
}

.summary-card h4[b-mhbi7jlpo6] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
}

.summary-card small[b-mhbi7jlpo6] {
    font-size: var(--font-size-xs);
    opacity: 0.9;
}

/* Order folio link */
.order-folio[b-mhbi7jlpo6] {
    font-weight: var(--font-weight-semibold);
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.order-folio:hover[b-mhbi7jlpo6] {
    color: var(--primary-hover);
}

/* QR badge */
.qr-badge[b-mhbi7jlpo6] {
    font-size: 0.7rem;
    padding: 0.2em 0.4em;
}

/* Empty state */
.empty-state[b-mhbi7jlpo6] {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-muted);
}

.empty-state i[b-mhbi7jlpo6] {
    font-size: 4rem;
    opacity: 0.5;
}

.empty-state p[b-mhbi7jlpo6] {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-lg);
}

/* Table improvements */
.table-hover tbody tr[b-mhbi7jlpo6] {
    transition: background-color var(--transition-fast);
}

/* Time display */
.time-display[b-mhbi7jlpo6] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}