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

/* _content/Vantastic.Mono.Web.Blazor/Pages/AdminPlugin/ChatDrawer.razor.rz.scp.css */
/* --- Root container --- */
.chat-root[b-n3ue6wobxn] {
    position: fixed;
    inset: auto 1rem 1rem auto;
    z-index: 9999;
}

/* --- Floating button --- */
.chat-toggle-btn[b-n3ue6wobxn] {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    outline: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    transition: transform .15s ease, box-shadow .2s ease;
    
}

    .chat-toggle-btn:hover[b-n3ue6wobxn] {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0,0,0,.22);
    }

    .chat-toggle-btn i[b-n3ue6wobxn] {
        font-size: 1.25rem;
    }

.chat-badge[b-n3ue6wobxn] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .35rem;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px rgba(239,68,68,.35);
}

/* --- Panel --- */
.chat-panel[b-n3ue6wobxn] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: min(380px, 92vw);
    max-height: 70vh;
    
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0,0,0,.20);
    /*transform: translateY(calc(100% + 1rem));*/
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .chat-panel.open[b-n3ue6wobxn] {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        
    }

/* --- Header --- */
.chat-header[b-n3ue6wobxn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem .85rem;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}

.chat-header-left[b-n3ue6wobxn] {
    display: flex;
    gap: .6rem;
    align-items: center;
}

    .chat-header-left i[b-n3ue6wobxn] {
        color: #2563eb;
    }

.chat-title .title[b-n3ue6wobxn] {
    font-weight: 700;
    font-size: .95rem;
    color: #0f172a;
}

.chat-title .subtitle[b-n3ue6wobxn] {
    font-size: .8rem;
    color: #6b7280;
}

.icon-btn[b-n3ue6wobxn] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #374151;
}

    .icon-btn:hover[b-n3ue6wobxn] {
        background: #f3f4f6;
    }

/* --- Body --- */
.chat-body[b-n3ue6wobxn] {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 280px;
}

.chat-users[b-n3ue6wobxn] {
    overflow: auto;
    padding: .5rem;
    background: #fff;
}

.empty-state[b-n3ue6wobxn] {
    text-align: center;
    color: #9ca3af;
    padding: 2rem 1rem;
}

    .empty-state i[b-n3ue6wobxn] {
        font-size: 1.8rem;
        margin-bottom: .5rem;
    }

/* --- User item --- */
.chat-user-item[b-n3ue6wobxn] {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: .65rem;
    padding: .55rem .6rem;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid transparent;
}

    .chat-user-item:hover[b-n3ue6wobxn] {
        background: #f8fafc;
        border-color: #eef2f7;
    }

    .chat-user-item.active[b-n3ue6wobxn] {
        background: #eff6ff;
        border-color: #c7d2fe;
    }

.avatar i[b-n3ue6wobxn] {
    font-size: 1.65rem;
    color: #475569;
}

.user-lines .line-top[b-n3ue6wobxn] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.user-name[b-n3ue6wobxn] {
    font-weight: 700;
    color: #0f172a;
}

.pill[b-n3ue6wobxn] {
    font-size: .7rem;
    padding: .15rem .45rem;
    border-radius: 9999px;
}

.pill-online[b-n3ue6wobxn] {
    background: #dcfce7;
    color: #166534;
}

.company-id[b-n3ue6wobxn] {
    font-weight: 600;
    color: #1f2937;
}

.company-desc[b-n3ue6wobxn] {
    color: #6b7280;
}

.sep[b-n3ue6wobxn] {
    color: #9ca3af;
    margin: 0 .35rem;
}

.line-bottom .muted[b-n3ue6wobxn] {
    font-size: .78rem;
    color: #94a3b8;
}

/* --- Composer --- */
.chat-compose[b-n3ue6wobxn] {
    border-top: 1px solid #eef2f7;
    background: #f9fafb;
    padding: .6rem;
    display: grid;
    gap: .5rem;
}

.compose-to[b-n3ue6wobxn] {
    min-height: 34px;
    display: flex;
    align-items: center;
}

.to-chip[b-n3ue6wobxn] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #eef2ff;
    color: #3730a3;
    padding: .25rem .5rem;
    border-radius: 9999px;
    font-weight: 600;
}

.chip-x[b-n3ue6wobxn] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #4f46e5;
}

.to-all[b-n3ue6wobxn] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #2563eb;
    font-weight: 700;
}

.compose-row[b-n3ue6wobxn], .compose-global[b-n3ue6wobxn] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
}

.compose-input[b-n3ue6wobxn] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: .6rem .75rem;
    outline: none;
    background: #fff;
}

    .compose-input:focus[b-n3ue6wobxn] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }

.send-btn[b-n3ue6wobxn] {
    border: none;
    border-radius: 12px;
    padding: 0 .9rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
}

    .send-btn:hover[b-n3ue6wobxn] {
        filter: brightness(1.05);
    }

    .send-btn.ghost[b-n3ue6wobxn] {
        background: #0ea5e9;
    }

/* --- Toasts --- */
.toast-stack[b-n3ue6wobxn] {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + 76px);
    display: grid;
    gap: .5rem;
    z-index: 10000;
    width: min(360px, 92vw);
}

.toast[b-n3ue6wobxn] {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: .6rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    border-radius: 12px;
    padding: .6rem .6rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    animation: toastIn-b-n3ue6wobxn .18s ease-out;
}

    .toast .toast-title[b-n3ue6wobxn] {
        font-weight: 800;
        color: #0f172a;
        font-size: .9rem;
    }

    .toast .toast-msg[b-n3ue6wobxn] {
        color: #4b5563;
        font-size: .85rem;
    }

    .toast .toast-x[b-n3ue6wobxn] {
        background: transparent;
        border: none;
        cursor: pointer;
        color: #6b7280;
    }

    .toast.info[b-n3ue6wobxn] {
        border-left-color: #3b82f6;
    }

    .toast.success[b-n3ue6wobxn] {
        border-left-color: #10b981;
    }

    .toast.warning[b-n3ue6wobxn] {
        border-left-color: #f59e0b;
    }

    .toast.error[b-n3ue6wobxn] {
        border-left-color: #ef4444;
    }

@keyframes toastIn-b-n3ue6wobxn {
    from {
        transform: translateY(8px);
        opacity: 0;
    }

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

/* --- Responsive --- */
@media (max-width: 480px) {
    .chat-panel[b-n3ue6wobxn] {
        width: calc(100vw - 1.25rem);
        right: .625rem;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/AdminPlugin/ChatWidget.razor.rz.scp.css */
/* Contenedor principal del chat, anclado a la esquina inferior izquierda */
.chat-container[b-jgqmxrl10g] {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Cambiado de 'right' a 'left' */
    width: 320px;
    height: 0;
    overflow: hidden;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

    .chat-container.open[b-jgqmxrl10g] {
        height: 450px;
    }

/* Botón flotante para abrir/cerrar el chat */
.chat-toggle-button[b-jgqmxrl10g] {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Cambiado de 'right' a 'left' */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #007bff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1001;
}

    .chat-toggle-button:hover[b-jgqmxrl10g] {
        transform: scale(1.1);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    }

    .chat-toggle-button.shake[b-jgqmxrl10g] {
        animation: shake-b-jgqmxrl10g 0.82s cubic-bezier(.36,.07,.19,.97) both;
    }

@keyframes shake-b-jgqmxrl10g {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* Badge de usuarios conectados */
.chat-badge[b-jgqmxrl10g] {
    position: absolute;
    top: 5px;
    right: 5px; /* Mantenemos 'right' para que el badge esté en la esquina superior derecha del botón */
    background-color: #ff4136;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    border: 2px solid #fff;
}

    .chat-badge.hidden[b-jgqmxrl10g] {
        display: none;
    }
/* Contenedor principal del chat, anclado a la esquina inferior derecha */
/*.chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    height: 0;
    overflow: hidden;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

    .chat-container.open {
        height: 450px;*/
        /* Altura que desees para el chat abierto */
    /*}*/

/* Botón flotante para abrir/cerrar el chat */
/*.chat-toggle-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #007bff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1001;
}

    .chat-toggle-button:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    }

    .chat-toggle-button.shake {
        animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    }

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}*/

/* Badge de usuarios conectados */
/*.chat-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #ff4136;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    border: 2px solid #fff;
}

    .chat-badge.hidden {
        display: none;
    }*/

/* Contenido del chat */
.chat-content[b-jgqmxrl10g] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-header[b-jgqmxrl10g] {
    background-color: #f1f1f1;
    padding: 10px 15px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

    .chat-header h3[b-jgqmxrl10g] {
        margin: 0;
        font-size: 18px;
        color: #333;
    }

.close-button[b-jgqmxrl10g] {
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

/* Estilos de la lista de usuarios */
.users-list-scrollable[b-jgqmxrl10g] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

.user-card-item[b-jgqmxrl10g] {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: background-color 0.2s ease;
}

    .user-card-item:hover[b-jgqmxrl10g] {
        background-color: #e9e9e9;
    }

.user-info[b-jgqmxrl10g] {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.icon-user[b-jgqmxrl10g] {
    color: #007bff;
    font-size: 24px;
    margin-right: 12px;
}

.icon-user-all[b-jgqmxrl10g] {
    color: #28a745;
    font-size: 24px;
    margin-right: 12px;
}

.user-details[b-jgqmxrl10g] {
    display: flex;
    flex-direction: column;
}

.user-name[b-jgqmxrl10g] {
    font-weight: bold;
    color: #333;
}

.user-company-info[b-jgqmxrl10g] {
    font-size: 12px;
    color: #666;
}

/* Vista de chat y mensajes */
.chat-messages-view[b-jgqmxrl10g] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.chat-recipient-header[b-jgqmxrl10g] {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ddd;
}

.back-button[b-jgqmxrl10g] {
    font-size: 24px;
    margin-right: 10px;
    cursor: pointer;
    color: #555;
}

.chat-recipient-header h4[b-jgqmxrl10g] {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.messages-container[b-jgqmxrl10g] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.message[b-jgqmxrl10g] {
    max-width: 80%;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 8px 12px;
}

.message-sent[b-jgqmxrl10g] {
    background-color: #007bff;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 0;
}

.message-received[b-jgqmxrl10g] {
    background-color: #e9e9e9;
    color: #333;
    align-self: flex-start;
    border-bottom-left-radius: 0;
}

.message-sender[b-jgqmxrl10g] {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    font-weight: bold;
}

/* Área de entrada de mensajes */
.message-input-area[b-jgqmxrl10g] {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
}

    .message-input-area input[b-jgqmxrl10g] {
        flex-grow: 1;
        border: 1px solid #ddd;
        border-radius: 20px;
        padding: 8px 15px;
        outline: none;
        font-size: 14px;
    }

.btn-send[b-jgqmxrl10g] {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-send:hover[b-jgqmxrl10g] {
        background-color: #0056b3;
    }

/* Estilos para la notificación toast */
.toast-notification[b-jgqmxrl10g] {
    position: fixed;
    bottom: 90px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1002;
    transform: translateY(150%);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

    .toast-notification.show[b-jgqmxrl10g] {
        transform: translateY(0);
        opacity: 1;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/AdminPlugin/ConfirmarPago.razor.rz.scp.css */
/* _content/Vantastic.Mono.Web.Blazor/Pages/AdminPlugin/DialogSolicitudesPendientes.razor.rz.scp.css */
/* Estilo del encabezado del diálogo */
.dialog-header-custom[b-cxq7pu38md] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dialog-header-icon[b-cxq7pu38md] {
    font-size: 24px;
}

.dialog-header-text[b-cxq7pu38md] {
    font-size: 20px;
    font-weight: 600;
}

.dialog-badge[b-cxq7pu38md] {
    background-color: #dc3545;
    color: white;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 8px;
    margin-left: auto;
}

/* Contenedor de la lista de solicitudes */
.requests-list-container[b-cxq7pu38md] {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
}

/* Estilo de cada tarjeta de solicitud */
.request-card[b-cxq7pu38md] {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .request-card:hover[b-cxq7pu38md] {
        background-color: #e9ecef;
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.request-card-header[b-cxq7pu38md] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.request-card-title[b-cxq7pu38md] {
    font-weight: bold;
    font-size: 16px;
    color: #343a40;
}

.request-card-status[b-cxq7pu38md] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
}

    .request-card-status.pendiente[b-cxq7pu38md] {
        background-color: #ffc107;
        color: #fff;
    }

.request-card-details[b-cxq7pu38md] {
    font-size: 14px;
    color: #6c757d;
}

    .request-card-details p[b-cxq7pu38md] {
        margin: 5px 0;
    }

/* Mensaje para cuando no hay solicitudes */
.no-requests-container[b-cxq7pu38md] {
    text-align: center;
    padding: 30px;
    color: #adb5bd;
}

.no-requests-icon[b-cxq7pu38md] {
    font-size: 50px;
    margin-bottom: 10px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/AdminPlugin/Index-main.razor.rz.scp.css */
/* Module Cards */
.module-cards[b-651uns942y] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.module-card[b-651uns942y] {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #e6f0ff);
    border-radius: 20px;
    padding: 15px 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

    .module-card:hover[b-651uns942y] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    }

/* Icon Wrapper */
.module-icon-wrapper[b-651uns942y] {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007bff, #00c6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: #fff;
    font-size: 1.8rem;
    transition: transform 0.3s ease;
}

.module-card:hover .module-icon-wrapper[b-651uns942y] {
    transform: scale(1.1);
}

/* Text */
.module-text h6[b-651uns942y] {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: #34495e;
}

.module-text p[b-651uns942y] {
    margin: 3px 0 0 0;
    font-size: 0.85rem;
    color: #7f8c8d;
}
/* Tarjeta flotante */
.totals-card[b-651uns942y] {
    background: #f8f9fa;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    animation: fadeInUp-b-651uns942y 0.6s ease-in-out;
    transition: transform 0.3s;
}

    .totals-card:hover[b-651uns942y] {
        transform: translateY(-5px);
    }

/* Animación de fade in */
@keyframes fadeInUp-b-651uns942y {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Pulso para la oferta */
.pulse[b-651uns942y] {
    animation: pulseOffer-b-651uns942y 1s infinite alternate;
}

@keyframes pulseOffer-b-651uns942y {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

/* Opcional: destacar los valores */
.value[b-651uns942y] {
    display: inline-block;
    min-width: 80px;
    text-align: right;
}
/* ===== HERO ===== */
.hero-section[b-651uns942y] {
    min-height: 68vh;
    width: 100%;
    background-image: var(--hero-bg, url('/img/herobanner2.png'));
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-overlay[b-651uns942y] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
}

.hero-content[b-651uns942y] {
    position: relative;
    padding: clamp(1rem, 2vw, 2rem);
}

.hero-badges .badge[b-651uns942y] {
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.25);
}

.hero-cta .btn-lg[b-651uns942y] {
    border-radius: 1rem;
}
.landing-page-container[b-651uns942y] {
    width: 100%;
    margin-top:-20px;
    
}
/* ===== STATS ===== */
.stat-card[b-651uns942y] {
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    color: #fff; /* texto blanco */
}

    /* Colores distintos según posición */
    .stat-card:nth-of-type(1)[b-651uns942y] {
        background: linear-gradient(135deg, #0d6efd, #3d8bfd); /* azul */
    }

    .stat-card:nth-of-type(2)[b-651uns942y] {
        background: linear-gradient(135deg, #198754, #42b883); /* verde */
    }

    .stat-card:nth-of-type(3)[b-651uns942y] {
        background: linear-gradient(135deg, #ffc107, #ffcd39); /* amarillo */
        color: #212529; /* texto oscuro para contraste */
    }

    .stat-card:nth-of-type(4)[b-651uns942y] {
        background: linear-gradient(135deg, #dc3545, #f06578); /* rojo */
    }

/* ===== GRID / CARD ===== */
.plugin-card[b-651uns942y] {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 1rem;
    background: #f8f9fa; /* gris claro */
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .plugin-card:hover[b-651uns942y] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,.1);
        border-color: var(--bs-primary);
        background: #ffffff; /* al hacer hover queda más blanco */
    }

.plugin-card-header[b-651uns942y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.module-icon-wrapper[b-651uns942y] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bs-primary), transparent 88%);
    border: 1px solid color-mix(in srgb, var(--bs-primary), transparent 75%);
}

    .module-icon-wrapper i[b-651uns942y] {
        font-size: 1.2rem;
        color: var(--bs-primary);
    }

.plugin-card-body p[b-651uns942y] {
    margin-bottom: .25rem;
}

.expiry-line[b-651uns942y] {
    font-variant-numeric: tabular-nums;
}

/* Badge de estado */
.status-badge[b-651uns942y] {
    font-size: .75rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.badge-active[b-651uns942y] {
    background: color-mix(in srgb, var(--bs-success), white 86%);
    color: var(--bs-success);
    border-color: color-mix(in srgb, var(--bs-success), transparent 70%);
}

.badge-warning[b-651uns942y] {
    background: color-mix(in srgb, var(--bs-warning), white 86%);
    color: #8a6d00;
    border-color: color-mix(in srgb, var(--bs-warning), transparent 70%);
}

.badge-expired[b-651uns942y] {
    background: color-mix(in srgb, var(--bs-danger), white 86%);
    color: var(--bs-danger);
    border-color: color-mix(in srgb, var(--bs-danger), transparent 70%);
}

.badge-not[b-651uns942y] {
    background: color-mix(in srgb, var(--bs-secondary), white 86%);
    color: var(--bs-secondary);
    border-color: color-mix(in srgb, var(--bs-secondary), transparent 70%);
}

/* Footer de la card */
.plugin-card-footer .btn[b-651uns942y] {
    border-radius: .8rem;
}

/* ===== SIDEBAR ===== */
/*.sidebar-container {
    position: sticky;
    top: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 1rem;
    background: #eef6ff;*/ /* azul muy suave */
/*}*/
.sidebar-container[b-651uns942y] {
    max-height: 100vh; /* Altura máxima igual a la pantalla */
    overflow-y: auto; /* Scroll vertical automático */
    padding: 1rem;
    border: 1px solid #ccc; /* Opcional */
    background: #f9f9f9; /* Opcional */
}
.sidebar-section + .sidebar-section[b-651uns942y] {
    margin-top: 1.25rem;
}

.empty-state[b-651uns942y] {
    text-align: center;
    padding: 1rem .5rem;
    color: var(--bs-secondary-color);
}

    .empty-state i[b-651uns942y] {
        font-size: 2rem;
        display: block;
        margin-bottom: .25rem;
    }

.list-group-item[b-651uns942y] {
    border: 0;
    border-bottom: 1px dashed var(--bs-border-color);
}

    .list-group-item:last-child[b-651uns942y] {
        border-bottom: 0;
    }

/* ===== FOOTER ===== */
.footer[b-651uns942y] {
    background: linear-gradient(135deg, #0d47a1, #1976d2);
    color: #fff;
    padding: 30px 20px;
    margin-top: 40px;
}

.footer-container[b-651uns942y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
    gap: 15px;
    text-align: center;
}

.footer-left[b-651uns942y],
.footer-center[b-651uns942y],
.footer-right[b-651uns942y] {
    flex: 1;
    min-width: 250px;
}

.footer a[b-651uns942y] {
    color: #ffeb3b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

    .footer a:hover[b-651uns942y] {
        color: #fff176;
    }

.footer p[b-651uns942y] {
    margin: 5px 0;
    font-size: 14px;
}

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 575.98px) {
    .hero-section[b-651uns942y] {
        min-height: 56vh;
    }

    .module-icon-wrapper[b-651uns942y] {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/AdminPlugin/Index-superadmin.razor.rz.scp.css */
body[b-6hqv8nx1q0] {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.dashboard-layout[b-6hqv8nx1q0] {
    display: flex;
    height: calc(100vh - 70px);
    padding: 1rem;
    gap: 1rem;
    margin-left: -50px;
    width:100%;
}

.sidebar[b-6hqv8nx1q0] {
    width: 300px;
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

    .sidebar h3[b-6hqv8nx1q0] {
        margin-top: 0;
        color: #007bff;
        font-size: 1.25rem;
        border-bottom: 2px solid #dee2e6;
        padding-bottom: 0.5rem;
    }

.requests-list[b-6hqv8nx1q0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.request-item[b-6hqv8nx1q0] {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #17a2b8;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .request-item:hover[b-6hqv8nx1q0] {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .request-item p[b-6hqv8nx1q0] {
        margin: 0;
        font-size: 1rem;
        color: #333;
    }

    .request-item span[b-6hqv8nx1q0] {
        display: block;
        font-size: 0.85rem;
        color: #666;
    }

.status[b-6hqv8nx1q0] {
    font-weight: bold;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    text-transform: uppercase;
}

.pending[b-6hqv8nx1q0] {
    color: #9c6c00;
    background-color: #fff3cd;
}

.new[b-6hqv8nx1q0] {
    color: #004d40;
    background-color: #b2dfdb;
}

.main-content[b-6hqv8nx1q0] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.top-panel[b-6hqv8nx1q0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cards-container[b-6hqv8nx1q0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.card[b-6hqv8nx1q0] {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s;
}

    .card:hover[b-6hqv8nx1q0] {
        transform: translateY(-5px);
    }

.card-icon[b-6hqv8nx1q0] {
    font-size: 2rem;
    color: #007bff;
}

.card-content[b-6hqv8nx1q0] {
    display: flex;
    flex-direction: column;
}

.card-title[b-6hqv8nx1q0] {
    font-size: 1rem;
    color: #6c757d;
}

.card-value[b-6hqv8nx1q0] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
}

.chart-container[b-6hqv8nx1q0] {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 300px;
}

.grid-container[b-6hqv8nx1q0] {
    flex-grow: 1;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Estilos para los diálogos y formularios */
.dialog-header-title[b-6hqv8nx1q0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.form-container[b-6hqv8nx1q0] {
    padding: 1rem;
}

.form-row[b-6hqv8nx1q0] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .form-row .e-float-input[b-6hqv8nx1q0] {
        flex: 1;
    }

.upload-section[b-6hqv8nx1q0] {
    margin-bottom: 1rem;
}

.upload-area[b-6hqv8nx1q0] {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
}

.drop-area-content[b-6hqv8nx1q0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

    .drop-area-content span[b-6hqv8nx1q0] {
        color: #666;
        font-size: 0.9rem;
    }

.form-buttons[b-6hqv8nx1q0] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Contenedor que agrupa el botón y el badge */
.floating-button-wrapper[b-6hqv8nx1q0] {
    position: relative; /* Es clave para que el badge se posicione de forma relativa a este contenedor */
    width: 60px; /* Igual al ancho del botón */
    height: 60px; /* Igual a la altura del botón */
    display: flex; /* Para centrar el botón dentro del contenedor */
    align-items: center;
    justify-content: center;
}

/* Badge para 'Solicitudes de Activación' */
.activations-badge[b-6hqv8nx1q0] {
    position: absolute; /* Posiciona el badge de forma absoluta dentro del wrapper */
    top: -5px; /* Ajusta la posición vertical, lo mueve hacia arriba */
    right: -5px; /* Ajusta la posición horizontal, lo mueve hacia la derecha */
    background-color: #dc3545;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    border: 2px solid #fff;
    z-index: 1002;
}

/* Badge para 'Nuevas Solicitudes' */
.requests-badge[b-6hqv8nx1q0] {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ffc107;
    color: #333;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    border: none;
    z-index: 1002;
}

/* Badge del chat (también necesita el nuevo wrapper) */
.chat-badge[b-6hqv8nx1q0] {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff4136;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    border: 2px solid #fff;
    z-index: 1002;
}

/* Asegúrate de que los botones no tengan un z-index individual, ya que su wrapper lo maneja */
/*.floating-button, .chat-toggle-button {*/
    /* ...mantener tus estilos existentes... */
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    z-index: 1001;*/ /* Asegúrate de que el botón esté por debajo del badge */
/*}*/

/* El contenedor principal de los botones se mantiene igual */
/*.floating-buttons-container-row {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    z-index: 1000;
}*/


 
.floating-buttons-container-row[b-6hqv8nx1q0] {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: row;  
    gap: 15px;  
    z-index: 1000;
}

 
.floating-button[b-6hqv8nx1q0], .chat-toggle-button[b-6hqv8nx1q0] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    border:none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

    .floating-button:hover[b-6hqv8nx1q0], .chat-toggle-button:hover[b-6hqv8nx1q0] {
        transform: scale(1.1);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    }

.button-icon[b-6hqv8nx1q0] {
    font-size: 24px;
}

/* Colores para cada botón */
.primary-button[b-6hqv8nx1q0] {
    background-color: #007bff; /* Azul */
}

.secondary-button[b-6hqv8nx1q0] {
    background-color: #28a745; /* Verde */
}

.chat-toggle-button[b-6hqv8nx1q0] {
    background-color: #6f42c1; /* Morado, o el color que prefieras */
    cursor: pointer;
}

/* Asegúrate de que el contenedor del chat se ajuste para no superponerse con los botones */
.chat-container[b-6hqv8nx1q0] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: min(380px, 92vw);
    max-height: 70vh;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0,0,0,.20);
    /*transform: translateY(calc(100% + 1rem));*/
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*.chat-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #ff4136;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    border: 2px solid #fff;
}*/
/*.requests-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #ff4136;*/ /* Color de alerta, como rojo */
    /*color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    border: 2px solid #fff;
    z-index: 1002;*/ /* Asegúrate de que esté por encima del botón */
/*}
.chat-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .35rem;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px rgba(239,68,68,.35);
}*/
/* Badge for 'Solicitudes de Activación' button */
/*.activations-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #dc3545;*/ /* Red color for urgent attention */
    /*color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    border: 2px solid #fff;
    z-index: 1002;
}*/

/* Badge for 'Nuevas Solicitudes' button */
/*.requests-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #ffc107;*/ /* Yellow color for a warning */
    /*color: #333;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    border: 2px solid #fff;
    z-index: 1002;
}*/

/* Contenedor de las tarjetas */
.cards-container[b-6hqv8nx1q0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
    gap: 20px; /* Espacio entre las tarjetas */
    margin: 20px 0;
}

/* Estilo base para cada tarjeta */
.card-metric[b-6hqv8nx1q0] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave */
    padding: 15px 20px; /* Padding ajustado para ser más pequeño */
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 180px; /* Ancho mínimo para que no se hagan demasiado pequeñas */
}

    .card-metric:hover[b-6hqv8nx1q0] {
        transform: translateY(-5px); /* Pequeño efecto al pasar el mouse */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

/* Contenido de la tarjeta (texto) */
.card-content-metric[b-6hqv8nx1q0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1; /* Permite que el contenido tome el espacio disponible */
}

.card-title-metric[b-6hqv8nx1q0] {
    font-size: 14px; /* Tamaño de fuente más pequeño para el título */
    color: #6c757d; /* Color gris suave */
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value-metric[b-6hqv8nx1q0] {
    font-size: 28px; /* Tamaño de fuente más grande para el valor */
    font-weight: bold;
    color: #343a40; /* Color oscuro para el valor */
}

/* Iconos de la tarjeta */
.card-icon-metric[b-6hqv8nx1q0] {
    font-size: 38px; /* Tamaño del icono */
    margin-right: 15px; /* Espacio entre icono y texto */
    padding: 10px;
    border-radius: 50%; /* Iconos circulares */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* Color del icono */
}

/* Colores específicos para cada tipo de tarjeta */

/* Tarjeta de Empresas Totales */
.card-total[b-6hqv8nx1q0] {
    border-left: 5px solid #007bff; /* Borde de color */
}

    .card-total .card-icon-metric[b-6hqv8nx1q0] {
        background-color: #007bff; /* Fondo del icono azul */
    }

    .card-total .card-value-metric[b-6hqv8nx1q0] {
        color: #007bff; /* Valor azul */
    }

/* Tarjeta de Empresas Confirmadas */
.card-confirmed[b-6hqv8nx1q0] {
    border-left: 5px solid #28a745; /* Borde de color */
}

    .card-confirmed .card-icon-metric[b-6hqv8nx1q0] {
        background-color: #28a745; /* Fondo del icono verde */
    }

    .card-confirmed .card-value-metric[b-6hqv8nx1q0] {
        color: #28a745; /* Valor verde */
    }

/* Tarjeta de Empresas Pendientes */
.card-pending[b-6hqv8nx1q0] {
    border-left: 5px solid #ffc107; /* Borde de color */
}

    .card-pending .card-icon-metric[b-6hqv8nx1q0] {
        background-color: #ffc107; /* Fondo del icono amarillo */
    }

    .card-pending .card-value-metric[b-6hqv8nx1q0] {
        color: #ffc107; /* Valor amarillo */
    }

/* Adaptación para pantallas pequeñas */
@media (max-width: 768px) {
    .cards-container[b-6hqv8nx1q0] {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }
}


.sidebar-section[b-6hqv8nx1q0] {
    background-color: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    padding: 15px;
    height: calc(100vh - 190px);
    display: flex;
    flex-direction: column;
}

.requests-list[b-6hqv8nx1q0] {
    flex-grow: 1; /* Allows the list to take up the remaining space */
    overflow-y: auto; /* Adds a vertical scrollbar when content overflows */
    padding-right: 5px; /* Adds space for the scrollbar to prevent content from touching the edge */
}

    /* Optional: Add a custom scrollbar for better aesthetics */
    .requests-list[b-6hqv8nx1q0]::-webkit-scrollbar {
        width: 8px;
    }

    .requests-list[b-6hqv8nx1q0]::-webkit-scrollbar-track {
        background: #e9ecef;
        border-radius: 10px;
    }

    .requests-list[b-6hqv8nx1q0]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

        .requests-list[b-6hqv8nx1q0]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

/* Existing styles for the request cards */
.request-item[b-6hqv8nx1q0] {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

    .request-item p[b-6hqv8nx1q0] {
        margin: 0 0 5px 0;
        font-size: 16px;
        color: #343a40;
    }

    .request-item span[b-6hqv8nx1q0] {
        display: block;
        font-size: 14px;
        color: #6c757d;
    }

.status.new[b-6hqv8nx1q0] {
    display: inline-block;
    background-color: #28a745;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    margin-top: 8px;
    text-transform: uppercase;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Clientes/ClienteListPage.razor.rz.scp.css */
.grid-container[b-wr30zrkxk4] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 14rem);
}

.form-row[b-wr30zrkxk4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-wr30zrkxk4] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-wr30zrkxk4] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-wr30zrkxk4] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-wr30zrkxk4] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-wr30zrkxk4],
    .custom-button[b-wr30zrkxk4] {
        width: 100%;
    }
}

.page-header[b-wr30zrkxk4] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-wr30zrkxk4] {
        width: 100%;
    }

    .page-header .page-header-title[b-wr30zrkxk4] {
        display: block;
    }

    .page-header h4[b-wr30zrkxk4], .page-header .h4[b-wr30zrkxk4] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-wr30zrkxk4] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.pager-container[b-wr30zrkxk4] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Clientes/CuentaCobrarPage.razor.rz.scp.css */
.grid-container1[b-oe2jkcodlz] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: calc(100vw - 6rem);
   
}
.grid-container[b-oe2jkcodlz] {
    
    /*overflow-y: auto;
    margin-top: 5px;
    
    width: calc(100vw - 6rem);
    height: calc(100vh - 20rem);*/
}

.form-row[b-oe2jkcodlz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-oe2jkcodlz] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-oe2jkcodlz] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-oe2jkcodlz] {
    flex-shrink: 0;
    width:30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-oe2jkcodlz] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-oe2jkcodlz],
    .custom-button[b-oe2jkcodlz] {
        width: 100%;
    }
}

.page-header[b-oe2jkcodlz] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-oe2jkcodlz] {
        width: 100%;
    }

    .page-header .page-header-title[b-oe2jkcodlz] {
        display: block;
    }

    .page-header h4[b-oe2jkcodlz], .page-header .h4[b-oe2jkcodlz] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-oe2jkcodlz] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.pager-container[b-oe2jkcodlz] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/CodBarPrint/LabelPreview.razor.rz.scp.css */
.label-preview-card[b-7k383ckwqb] {
    border: 1px dashed #ccc;
    padding: 5px;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    box-sizing: border-box; /* Importante para incluir padding/border en el width/height */
    overflow: hidden; /* Evita que el contenido se salga si es demasiado grande */
}

    .label-preview-card img.barcode-image[b-7k383ckwqb] {
        max-width: 90%;
        height: auto;
        margin-bottom: 3px;
    }

    .label-preview-card p[b-7k383ckwqb] {
        margin: 0;
        line-height: 1.2;
        text-align: center;
    }

    .label-preview-card .label-price[b-7k383ckwqb] {
        font-weight: bold;
        font-size: 11px;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/CodBarPrint/ModuloImpresionCodBarMain.razor.rz.scp.css */
/* Ensure the entire app takes full height and manages overflow */
html[b-y6c7kcbi1k], body[b-y6c7kcbi1k], #app[b-y6c7kcbi1k], .container-fluid[b-y6c7kcbi1k] {
    height: 100%;
    margin: 0;
    padding: 0 !important; /* Remove default container padding */
}

/* General flex and min-height for card bodies within flex columns */
.card-body.d-flex.flex-column[b-y6c7kcbi1k] {
    flex: 1;
    min-height: 0; /* Crucial for nested flex containers with overflow */
}

    /* Styles for the top card's inner sections */
    .card-body.d-flex.flex-column.flex-md-row.flex-grow-1.p-0 > div[b-y6c7kcbi1k] {
        /* Add some padding back to the inner sections */
        padding: 1rem;
    }

/* Horizontal divider for larger screens */
.col-md-6.border-end[b-y6c7kcbi1k] {
    border-right: 1px solid var(--bs-border-color) !important;
}

@media (max-width: 767.98px) {
    /* On small screens, remove horizontal border and add vertical one */
    .col-md-6.border-end[b-y6c7kcbi1k] {
        border-right: none !important;
        border-bottom: 1px solid var(--bs-border-color) !important;
        margin-bottom: 1rem; /* Space between sections */
        padding-bottom: 1rem;
    }

    .card-body.d-flex.flex-column.flex-md-row[b-y6c7kcbi1k] {
        flex-direction: column !important; /* Stack columns vertically on small screens */
    }

    .top-section .flex-wrap[b-y6c7kcbi1k] {
        justify-content: flex-start !important; /* Align items to start */
    }
}

/* Scrollable areas for grids and label preview */
.grid-container[b-y6c7kcbi1k], .label-preview-scroll[b-y6c7kcbi1k] {
    flex-grow: 1;
    overflow-y: auto; /* Enable vertical scroll */
    /* Consider adding scrollbar-width and scrollbar-color for custom scrollbars if needed */
}

/* Ensure Syncfusion Grid fills its parent's height */
.sf-grid-container[b-y6c7kcbi1k] {
    height: 100%;
}

/* Adjust Syncfusion components to fit their containers */
.e-dropdownlist[b-y6c7kcbi1k], .e-textbox[b-y6c7kcbi1k], .e-ddt[b-y6c7kcbi1k] {
    width: 100% !important;
}

/* Specific styling for the preview area */
.preview-section[b-y6c7kcbi1k] {
    background-color: var(--bs-gray-100); /* Slightly different background for visual separation */
    border-radius: 0.25rem;
}

.label-preview-scroll p[b-y6c7kcbi1k] {
    /* Center "no items" text vertically */
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-row[b-y6c7kcbi1k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-y6c7kcbi1k] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-y6c7kcbi1k] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-y6c7kcbi1k] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-y6c7kcbi1k] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-y6c7kcbi1k],
    .custom-button[b-y6c7kcbi1k] {
        width: 100%;
    }
}

.page-header[b-y6c7kcbi1k] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-y6c7kcbi1k] {
        width: 100%;
    }

    .page-header .page-header-title[b-y6c7kcbi1k] {
        display: block;
    }

    .page-header h4[b-y6c7kcbi1k], .page-header .h4[b-y6c7kcbi1k] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-y6c7kcbi1k] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.pager-container[b-y6c7kcbi1k] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* Contenedor para controlar la altura del Grid */
/*.grid-container {
    height: 400px;*/ /* Altura fija para el grid. Ajusta este valor según tus necesidades. */
    /*overflow-y: auto;*/ /* Agrega scroll si el contenido del grid excede la altura */
    /*border: 1px solid #dee2e6;*/ /* Borde similar al grid para el contenedor */
    /*border-radius: 5px;*/ /* Bordes redondeados */
/*}*/

/* Asegurar que el Grid tome el 100% de la altura de su contenedor padre */
#myGrid.e-grid[b-y6c7kcbi1k] {
    height: 100% !important; /* Es importante usar !important si hay estilos predeterminados */
    border: none; /* Quitamos el borde del grid si el contenedor ya lo tiene */
    box-shadow: none; /* Quitamos la sombra si el contenedor ya la tiene */
}

/* Alineación de búsqueda y botón */
.search-input-group[b-y6c7kcbi1k] {
    display: flex;
    align-items: flex-end; /* Alinea los elementos a la base para que el texto del input coincida con el botón */
}

    /* Pequeños ajustes para el SfTextBox y el botón si es necesario */
    .search-input-group .e-input-group[b-y6c7kcbi1k] {
        flex-grow: 1; /* Permite que el input crezca y ocupe el espacio disponible */
        margin-bottom: 0 !important; /* Elimina el margen inferior predeterminado para alinearlo */
    }

/* Estilos para los indicadores de stock */
.statustemp[b-y6c7kcbi1k] {
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
}

.e-noenviadocolor[b-y6c7kcbi1k] {
    background-color: #ffe0e0; /* Rojo claro */
    color: #cc0000; /* Rojo oscuro */
    border: 1px solid #cc0000;
}

.e-enviadocolor[b-y6c7kcbi1k] {
    background-color: #e0ffe0; /* Verde claro */
    color: #008000; /* Verde oscuro */
    border: 1px solid #008000;
}

/* General Layout & Styling */
body[b-y6c7kcbi1k] {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    margin: 0;
    padding: 0;
}

.container-fluid[b-y6c7kcbi1k] {
    padding: 20px;
}

h1[b-y6c7kcbi1k], h2[b-y6c7kcbi1k], h3[b-y6c7kcbi1k], h4[b-y6c7kcbi1k], h5[b-y6c7kcbi1k], h6[b-y6c7kcbi1k] {
    color: #0056b3; /* Un azul corporativo */
    margin-bottom: 15px;
}

hr[b-y6c7kcbi1k] {
    border-top: 1px solid #e0e0e0;
    margin: 20px 0;
}

/* Card Styling for Sections */
.card[b-y6c7kcbi1k] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 20px;
}

.card-title[b-y6c7kcbi1k] {
    font-size: 1.5em;
    color: #0056b3;
    margin-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
}

/* Form Group & Input Styling (Syncfusion specific overrides) */
.form-group[b-y6c7kcbi1k] {
    margin-bottom: 15px;
}

label[b-y6c7kcbi1k] {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

/* Syncfusion specific overrides for inputs */
.e-input-group[b-y6c7kcbi1k],
.e-float-input.e-control-wrapper[b-y6c7kcbi1k] {
    margin-bottom: 15px; /* Add some space below each Syncfusion input */
}

    .e-input-group .e-input[b-y6c7kcbi1k],
    .e-float-input.e-control-wrapper .e-input[b-y6c7kcbi1k] {
        border-radius: 4px;
        border: 1px solid #ced4da;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
        padding: 8px 12px;
        font-size: 1em;
        height: auto; /* Ensure height adjusts to padding */
    }

    .e-input-group.e-focus .e-input[b-y6c7kcbi1k],
    .e-float-input.e-control-wrapper.e-input-focus .e-input[b-y6c7kcbi1k] {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

/* Syncfusion Checkbox and Radio Button */
.e-checkbox-wrapper[b-y6c7kcbi1k],
.e-radio-wrapper[b-y6c7kcbi1k] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .e-checkbox-wrapper .e-label[b-y6c7kcbi1k],
    .e-radio-wrapper .e-label[b-y6c7kcbi1k] {
        margin-left: 8px; /* Space between checkbox/radio and label */
        font-weight: normal;
    }

/* Syncfusion Dropdown List */
.e-dropdownlist[b-y6c7kcbi1k] {
    border-radius: 4px;
    border: 1px solid #ced4da;
    font-size: 1em;
    padding: 5px 12px;
}

    .e-dropdownlist.e-input-focus[b-y6c7kcbi1k] {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

/* Button Styling */
.btn[b-y6c7kcbi1k] {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: #007bff;
    border: 1px solid #007bff;
    padding: 8px 15px;
    font-size: 1em;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-right: 10px; /* Space between buttons */
    margin-bottom: 10px; /* For stacking on smaller screens */
}

    .btn:hover[b-y6c7kcbi1k] {
        color: #fff;
        background-color: #0056b3;
        border-color: #004b9e;
    }

.btn-primary[b-y6c7kcbi1k] {
    background-color: #007bff;
    border-color: #007bff;
}

    .btn-primary:hover[b-y6c7kcbi1k] {
        background-color: #0056b3;
        border-color: #004b9e;
    }

.btn-success[b-y6c7kcbi1k] {
    background-color: #28a745;
    border-color: #28a745;
}

    .btn-success:hover[b-y6c7kcbi1k] {
        background-color: #218838;
        border-color: #1e7e34;
    }

.btn-danger[b-y6c7kcbi1k] {
    background-color: #dc3545;
    border-color: #dc3545;
}

    .btn-danger:hover[b-y6c7kcbi1k] {
        background-color: #c82333;
        border-color: #bd2130;
    }

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

    .btn-secondary:hover[b-y6c7kcbi1k] {
        background-color: #5a6268;
        border-color: #545b62;
    }

/* Flexbox utilities */
.d-flex[b-y6c7kcbi1k] {
    display: flex;
}

.flex-column[b-y6c7kcbi1k] {
    flex-direction: column;
}

.flex-grow-1[b-y6c7kcbi1k] {
    flex-grow: 1;
}

.justify-content-between[b-y6c7kcbi1k] {
    justify-content: space-between;
}

.align-items-center[b-y6c7kcbi1k] {
    align-items: center;
}

.gap-3[b-y6c7kcbi1k] {
    gap: 1rem; /* Equivalent to 16px, adjust as needed */
}

/* Syncfusion Grid Styling */
.e-grid[b-y6c7kcbi1k] {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    overflow: hidden; /* Ensures rounded corners are applied */
}

    .e-grid .e-headercell[b-y6c7kcbi1k] {
        background-color: #e9ecef;
        font-weight: bold;
        color: #495057;
        padding: 12px 15px;
        border-bottom: 2px solid #dee2e6;
    }

    .e-grid .e-row[b-y6c7kcbi1k] {
        background-color: #fff;
    }

        .e-grid .e-row:nth-child(even)[b-y6c7kcbi1k] {
            background-color: #f8f9fa; /* Zebra striping */
        }

    .e-grid .e-rowcell[b-y6c7kcbi1k] {
        padding: 10px 15px;
        border-bottom: 1px solid #e9ecef;
    }

    .e-grid .e-gridpager[b-y6c7kcbi1k] {
        background-color: #e9ecef;
        border-top: 1px solid #dee2e6;
        padding: 10px 15px;
    }

/* Label Preview Styling */
.label-preview-wrapper[b-y6c7kcbi1k] {
    display: flex;
    flex-wrap: wrap; /* Permite que las etiquetas salten de línea */
    gap: 10px; /* Espacio entre las etiquetas */
    padding: 10px;
    justify-content: center; /* Centra las etiquetas horizontalmente */
    border: 1px dashed #ccc;
    background-color: #fcfcfc;
    min-height: 200px; /* Altura mínima para la zona de previsualización */
    align-items: flex-start; /* Alinea las etiquetas arriba */
    overflow-y: auto; /* Permite scroll si hay muchas etiquetas */
    max-height: 600px; /* Limita la altura de la zona de previsualización */
}

.label-preview-card[b-y6c7kcbi1k] {
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espacia el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    padding: 5px;
    box-sizing: border-box; /* Incluye padding en el width/height */
    text-align: center; /* Asegura que el texto dentro esté centrado */
    overflow: hidden; /* Esconde cualquier contenido que desborde */
}

    .label-preview-card img.barcode-image[b-y6c7kcbi1k] {
        max-width: 95%; /* Ajusta el tamaño de la imagen dentro de la previsualización */
        height: auto;
        display: block; /* Elimina espacio extra debajo de la imagen */
        margin: 0 auto; /* Centra la imagen */
        object-fit: contain; /* Asegura que la imagen quepa sin cortarse */
    }

/* Specific text styles within the label */
.label-price[b-y6c7kcbi1k] {
    font-weight: bold;
    color: #333;
    margin: 2px 0;
    line-height: 1.2; /* Ajusta el interlineado */
}

.label-description[b-y6c7kcbi1k] {
    color: #555;
    margin: 1px 0;
    line-height: 1.2;
}

.label-talla[b-y6c7kcbi1k] {
    font-weight: bold;
    color: #000;
    margin: 2px 0;
    line-height: 1.2;
}

/* Utility classes for text alignment (used in dynamic styling) */
.text-left[b-y6c7kcbi1k] {
    text-align: left !important;
}

.text-center[b-y6c7kcbi1k] {
    text-align: center !important;
}

.text-right[b-y6c7kcbi1k] {
    text-align: right !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .d-flex[b-y6c7kcbi1k] {
        flex-direction: column; /* Apila columnas en pantallas pequeñas */
    }

    .btn[b-y6c7kcbi1k] {
        width: 100%; /* Botones de ancho completo */
        margin-right: 0;
        margin-bottom: 10px;
    }

    .card[b-y6c7kcbi1k] {
        padding: 15px;
    }

    .label-preview-wrapper[b-y6c7kcbi1k] {
        justify-content: flex-start; /* Puede ser útil para evitar que se vean demasiado pequeños */
    }
}



/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/GuiaRemPrint/VantasticQRGuiaRemPage.razor.rz.scp.css */
.grid-container[b-dzdahlmalh] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 8rem);
}

.form-row[b-dzdahlmalh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-dzdahlmalh] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-dzdahlmalh] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-dzdahlmalh] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-dzdahlmalh] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-dzdahlmalh],
    .custom-button[b-dzdahlmalh] {
        width: 100%;
    }
}

.page-header[b-dzdahlmalh] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-dzdahlmalh] {
        width: 100%;
    }

    .page-header .page-header-title[b-dzdahlmalh] {
        display: block;
    }

    .page-header h4[b-dzdahlmalh], .page-header .h4[b-dzdahlmalh] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-dzdahlmalh] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.detail-template[b-dzdahlmalh] {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .detail-template h5[b-dzdahlmalh] {
        color: #0d6efd;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .detail-template .table[b-dzdahlmalh] {
        width: 100%;
        border-collapse: collapse;
    }

        .detail-template .table th[b-dzdahlmalh],
        .detail-template .table td[b-dzdahlmalh] {
            border: 1px solid #dee2e6;
            padding: 8px;
            font-size: 0.95rem;
        }

        .detail-template .table thead[b-dzdahlmalh] {
            background-color: #f8f9fa;
        }

/* Estilos generales del contenedor */
.container-fluid[b-dzdahlmalh] {
    padding: 15px;
}

/* Estilos para la tarjeta de vista previa */
.preview-card[b-dzdahlmalh] {
    border-radius: 8px;
    overflow-y: auto;  /*Permite scroll si hay muchas etiquetas */
    max-height: 600px; /* Altura máxima para la vista previa */
    display: flex;
    flex-direction: column;
}

.preview-content[b-dzdahlmalh] {
    background-color: #f8f9fa;
    flex-grow: 1; /* Permite que el contenido ocupe el espacio disponible */
    overflow-y: auto; /* Scroll interno para las etiquetas si exceden el max-height */
}

/* Contenedor de todas las etiquetas en la vista previa */
.labels-container[b-dzdahlmalh] {
    display: flex;
    flex-wrap: wrap; /* Permite que las etiquetas se envuelvan */
    gap: 15px; /* Espacio entre las etiquetas */
    justify-content: center; /* Centra las etiquetas */
    padding: 10px;
}

/* Estilos para cada etiqueta individual en la vista previa */
.single-label-preview[b-dzdahlmalh] {
    width: 200px; /* Ancho fijo para cada etiqueta en la vista previa */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    flex-shrink: 0; /* Evita que las etiquetas se encojan */
}

.company-logo-preview[b-dzdahlmalh] {
    max-width: 80px; /* Tamaño del logo en la vista previa */
    height: auto;
    display: block;
    margin: 0 auto;
}

.label-section-preview[b-dzdahlmalh] {
    line-height: 1.3;
    font-size: 0.75rem; /* Tamaño de fuente más pequeño para la vista previa */
}

.label-hr-preview[b-dzdahlmalh] {
    border-top: 1px dashed #ced4da;
    margin: 0.5rem 0;
}

.qr-code-container-preview[b-dzdahlmalh] {
    padding: 5px 0;
}

.qr-preview-canvas[b-dzdahlmalh] {
    width: 80px !important; /* Tamaño visible del QR en la vista previa */
    height: 80px !important;
    border: 1px solid #ddd;
    box-shadow: 0 0 3px rgba(0,0,0,0.05);
    display: block; /* Para centrar */
    margin: 0 auto;
}

/* Estilos para el footer del card (botón) */
.card-footer[b-dzdahlmalh] {
    border-top: 1px solid #dee2e6;
    background-color: #f1f3f5;
    padding: 10px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDAnularDocumentoPage.razor.rz.scp.css */
.grid-container[b-onc2qagmdn] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: calc(100vw - 6rem);
    height: calc(100vh - 8rem);
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDAsistenteComercialPage.razor.rz.scp.css */

/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDBuscarClientePage.razor.rz.scp.css */
/*.grid-container {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
}
.rowcabe {
    margin: 10px;
}

.h2_1 {
    font-weight: 600;
    text-align: center;
    color: green;
}
@media (max-width: 480px) {   

    .h2_1 {
        font-size: 0.8em;
        word-wrap: break-word;
    }
}
.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}*/
/* El TextBox ocupa el espacio disponible en la fila */
/*.custom-textbox {
    flex-grow: 1;
}*/

/* El botón ocupa su tamaño natural pero se ajusta */
/*.custom-button {
    flex-shrink: 0;
}*/

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
/*@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox,
    .custom-button {
        width: 100%;
    }
}

.horizontal-product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cart-product-box .horizontal-product-details .trash-button {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i {
        font-size: 18px;
        color: red;
        cursor: pointer
    }
.cart-product-box .horizontal-product-details .product-title {
    font-size: 0.8em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info {
    display: flex;
    padding: 0;
    margin-top: 1px;
    margin-bottom: 5px;
    font-size: 0.8em;
    position: relative;
    color: green;
}

    .cart-product-box .horizontal-product-details .product-info li {
        position: relative;
        font-weight: 400;
        line-height: 1;
        color: var(--colorTextLight);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        gap: 5px
    }

.card {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f,0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0
}

    .card:before {
        position: absolute;
        content: "";
        height: 80%;
        width: 1px;
        inset-inline-start: 0;
        background: var(--colorBorderBefore);
        inset-block-start: 10%;
        box-shadow: 8px 0 0 17px var(--colorBorderBeforeShadow)
    }

    .card .card-header, .card .card-body, .card .card-footer {
        background-color: transparent
    }

        .card .card-header .title {
            font-size: 16px;
            line-height: 28px;
            padding-right: 10px;
            margin-bottom: 0;
            color: var(--colorTextPrimary)
        }

    .card .card-header {
        border-bottom: 1px solid #dee2e630;
        line-height: 30px;
        align-self: center;
        width: 100%;
        display: flex;
        align-items: center
    }

    .card .card-footer {
        background-color: transparent;
        border: none
    }

@media (max-width: 767.98px) {
    .card .card-header {
        height: auto;
        flex-wrap: wrap
    }

    .card .card-header, .card .card-body, .card .card-footer {
        background-color: transparent;
        padding: 10px
    }
}

.producto-linea2 {
    display: flex;
    align-items: center;
    justify-content: start;
}

@media (max-width: 574px) {
    .producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}
.botones-producto-linea2 {
    display: flex;
    align-items: center;
    justify-content: end;
}

@media (max-width: 574px) {
    .botones-producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}*/


.card-body p[b-opj7vwpecw] {
    margin-bottom: 0.25rem;
}

.loading-overlay[b-opj7vwpecw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.loading-spinner[b-opj7vwpecw] {
    border: 4px solid #ccc;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-opj7vwpecw 1s linear infinite;
}

@keyframes spin-b-opj7vwpecw {
    to {
        transform: rotate(360deg);
    }
}
.client-card[b-opj7vwpecw] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    border-radius: 10px;
    background-color: #ffffff;
    margin-bottom: 1rem;
}

    .client-card:hover[b-opj7vwpecw] {
        transform: translateY(-2px);
        box-shadow: 0 0 12px rgba(0, 123, 255, 0.25);
        background-color: #f8f9fa;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDBuscarProveedorPage.razor.rz.scp.css */
.grid-container[b-esv3krkji4] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
}
.rowcabe[b-esv3krkji4] {
    margin: 10px;
}

.h2_1[b-esv3krkji4] {
    font-weight: 600;
    text-align: center;
    color: green;
}
@media (max-width: 480px) {   

    .h2_1[b-esv3krkji4] {
        font-size: 0.8em;
        word-wrap: break-word;
    }
}
.form-row[b-esv3krkji4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-esv3krkji4] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-esv3krkji4] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-esv3krkji4] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-esv3krkji4],
    .custom-button[b-esv3krkji4] {
        width: 100%;
    }
}

.horizontal-product-list[b-esv3krkji4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li[b-esv3krkji4] {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box[b-esv3krkji4] {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box[b-esv3krkji4] {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img[b-esv3krkji4] {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img[b-esv3krkji4] {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details[b-esv3krkji4] {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details[b-esv3krkji4] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cart-product-box .horizontal-product-details .trash-button[b-esv3krkji4] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-esv3krkji4] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }
.cart-product-box .horizontal-product-details .product-title[b-esv3krkji4] {
    font-size: 0.8em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info[b-esv3krkji4] {
    display: flex;
    padding: 0;
    margin-top: 1px;
    margin-bottom: 5px;
    font-size: 0.8em;
    position: relative;
    color: green;
}

    .cart-product-box .horizontal-product-details .product-info li[b-esv3krkji4] {
        position: relative;
        font-weight: 400;
        line-height: 1;
        color: var(--colorTextLight);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        gap: 5px
    }

.card[b-esv3krkji4] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f,0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0
}

    .card[b-esv3krkji4]:before {
        position: absolute;
        content: "";
        height: 80%;
        width: 1px;
        inset-inline-start: 0;
        background: var(--colorBorderBefore);
        inset-block-start: 10%;
        box-shadow: 8px 0 0 17px var(--colorBorderBeforeShadow)
    }

    .card .card-header[b-esv3krkji4], .card .card-body[b-esv3krkji4], .card .card-footer[b-esv3krkji4] {
        background-color: transparent
    }

        .card .card-header .title[b-esv3krkji4] {
            font-size: 16px;
            line-height: 28px;
            padding-right: 10px;
            margin-bottom: 0;
            color: var(--colorTextPrimary)
        }

    .card .card-header[b-esv3krkji4] {
        border-bottom: 1px solid #dee2e630;
        line-height: 30px;
        align-self: center;
        width: 100%;
        display: flex;
        align-items: center
    }

    .card .card-footer[b-esv3krkji4] {
        background-color: transparent;
        border: none
    }

@media (max-width: 767.98px) {
    .card .card-header[b-esv3krkji4] {
        height: auto;
        flex-wrap: wrap
    }

    .card .card-header[b-esv3krkji4], .card .card-body[b-esv3krkji4], .card .card-footer[b-esv3krkji4] {
        background-color: transparent;
        padding: 10px
    }
}

.producto-linea2[b-esv3krkji4] {
    display: flex;
    align-items: center;
    justify-content: start;
}

@media (max-width: 574px) {
    .producto-linea2[b-esv3krkji4] {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}
.botones-producto-linea2[b-esv3krkji4] {
    display: flex;
    align-items: center;
    justify-content: end;
}

@media (max-width: 574px) {
    .botones-producto-linea2[b-esv3krkji4] {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDBusquedaAvanzadoDocumentosPage.razor.rz.scp.css */


/* Media queries for smaller screens */
@media (max-width: 768px) {
    .poptionsdialog.e-dialog[b-5y1bz68sho] {
        width: 95vw !important; /* Even wider on small screens */
        max-width: 95vw !important;
        margin: 10px auto !important; /* Center with a small margin */
        left: 50% !important; /* Center horizontally */
        transform: translateX(-50%) !important; /* Adjust for centering */
        top: 20px !important; /* Push down from the top */
    }

    .poptionsdialog .e-dlg-content[b-5y1bz68sho] {
        padding: 15px; /* Reduce padding for smaller screens */
    }

    .poptionsdialog h2[b-5y1bz68sho] {
        font-size: 1.3rem; /* Further reduce header font size */
    }
    /* Ensure dropdowns and date pickers are full width */
    .e-dropdownlist[b-5y1bz68sho], .e-daterangepicker[b-5y1bz68sho] {
        width: 100% !important;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDDescargarPage.razor.rz.scp.css */
.page-header[b-5ncndkz7x4] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-5ncndkz7x4] {
        width: 100%;
    }

    .page-header .page-header-title[b-5ncndkz7x4] {
        display: block;
    }

    .page-header h4[b-5ncndkz7x4], .page-header .h4[b-5ncndkz7x4] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-5ncndkz7x4] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDIngresarLotesPage.razor.rz.scp.css */
.button-wrapper[b-a6ktrr33cp] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}
.flex-container1[b-a6ktrr33cp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}
.textbox-wrapper[b-a6ktrr33cp] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDIngresarSeriesPage.razor.rz.scp.css */
.button-wrapper[b-qo0uk7oyx3] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}
.flex-container[b-qo0uk7oyx3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}
.textbox-wrapper[b-qo0uk7oyx3] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDInputForCustomPage.razor.rz.scp.css */
.button-wrapper[b-gd7ysalhbg] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

.flex-container1[b-gd7ysalhbg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

.textbox-wrapper[b-gd7ysalhbg] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}
.rowcabe[b-gd7ysalhbg] {
    margin: 10px;
}

.h3_1[b-gd7ysalhbg] {
    font-weight: 600;
    text-align: center;
    color: green;
}

.h2_1[b-gd7ysalhbg] {
    font-weight: 600;
    text-align: center;
    color: blue;
}
@media (max-width: 480px) {
    .h3_1[b-gd7ysalhbg]{
        font-size:0.8em;
    }
    .h2_1[b-gd7ysalhbg] {
        font-size: 0.8em;
        word-wrap:break-word;
    }
}

/*.containerprice {
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: fadeIn 1.5s ease-in-out;
}

.title {
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #ffd700, #ff6347);
    -webkit-background-clip: text;
    color: transparent;
}

.subtitle {
    font-size: 1.5rem;
    font-weight: 300;
}*/

/* Animaciones */
/*@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}*/

/* Media Queries */
/*@media (max-width: 768px) {
    .title {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 1rem;
    }
}*/

.containerprice[b-gd7ysalhbg] {
    /* text-align: center;
    padding: 20px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: fadeIn 1.5s ease-in-out;*/
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;*/ /* Toma la altura del diálogo */
    /*text-align: center;
    padding: 20px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    animation: fadeIn 1.5s ease-in-out;*/
}
.e-numeric.e-valid-input.e-input-group.e-control-container.e-control-wrapper.e-float-input[b-gd7ysalhbg] {
    font-size: 45px;
    color:red;
}
.title[b-gd7ysalhbg] {
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #ffd700, #ff6347);
    -webkit-background-clip: text;
    color: transparent;
}

.subtitle[b-gd7ysalhbg] {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 20px;
}

.rowcenter[b-gd7ysalhbg] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; /* Toma la altura del diálogo */
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    animation: fadeIn-b-gd7ysalhbg 1.5s ease-in-out;
}

.input-group[b-gd7ysalhbg] {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-wrapper[b-gd7ysalhbg] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.textbox-wrapper[b-gd7ysalhbg]{
    width: 100%;
    max-width: 300px;
    padding: 10px;
    border-radius: 10px;
    border: none;
    font-size: 1.2rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

    .textbox-wrapper:focus[b-gd7ysalhbg] {
        outline: none;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    }

.result[b-gd7ysalhbg] {
    font-size: 1.8rem;
    font-weight: bold;
    color: green;
    margin-top: 10px;
}

/* Animaciones */
@keyframes fadeIn-b-gd7ysalhbg {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

/* Media Queries */
@media (max-width: 768px) {
    .title[b-gd7ysalhbg] {
        font-size: 2rem;
    }

    .subtitle[b-gd7ysalhbg] {
        font-size: 1.2rem;
    }

    .textbox-wrapper[b-gd7ysalhbg] {
        font-size: 1rem;
    }

    .result[b-gd7ysalhbg] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .title[b-gd7ysalhbg] {
        font-size: 1.5rem;
    }

    .subtitle[b-gd7ysalhbg] {
        font-size: 1rem;
    }

    .textbox-wrapper[b-gd7ysalhbg] {
        font-size: 0.9rem;
    }

    .result[b-gd7ysalhbg] {
        font-size: 1.2rem;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDMantDireccionClientePage.razor.rz.scp.css */
.button-wrapper[b-7utww0xlts] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}
.flex-container[b-7utww0xlts] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}
.textbox-wrapper[b-7utww0xlts] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDSeleccionarFormatoImpresionPage.razor.rz.scp.css */
/*::deep .poptionsdialog .e-dialog {
    width: 50% !important;
    height: 90% !important;
    background-color: red !important;
}

@media screen and (max-width: 576px) {
    .poptionsdialog .e-dialog {
        width: 90% !important;
    }
}


@media screen and (min-width: 577px) and (max-width: 768px) {
    .poptionsdialog .e-dialog {
        width: 90% !important;
    }
}


@media screen and (min-width: 769px) and (max-width: 992px) {
    .poptionsdialog .e-dialog {
        width: 80% !important;
    }
}


@media screen and (min-width: 993px) and (max-width:1358px) {
    .poptionsdialog .e-dialog {
        width: 80% !important;
    }
}

@media screen and (min-width: 1359px) and (max-width:1440px) {
    .poptionsdialog .e-dialog {
        width: 80% !important;
    }
}

@media screen and (min-width: 1441px) {
    .poptionsdialog .e-dialog {
        width: 80% !important;
    }
}*/
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDSeleccionarLotesPage.razor.rz.scp.css */
.flex-container1[b-kxu28ts4y7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-kxu28ts4y7] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-kxu28ts4y7] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container1[b-kxu28ts4y7] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-kxu28ts4y7], .textbox-wrapper[b-kxu28ts4y7] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDSeleccionarSeriesPage.razor.rz.scp.css */
.flex-container[b-jv3hlwcz9y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-jv3hlwcz9y] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-jv3hlwcz9y] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-jv3hlwcz9y] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-jv3hlwcz9y], .textbox-wrapper[b-jv3hlwcz9y] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/MDSeleccionarUbigeoPage.razor.rz.scp.css */
body[b-a0n177ngg1] {
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/Public/ConsultaCPEEnLinea.razor.rz.scp.css */
body[b-h2fumxjlf3] {
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/Public/CpeLinkPage.razor.rz.scp.css */
/* ===============================
   ESTILOS GENERALES DE LA PÁGINA
   =============================== */
.cpelink-page[b-2i833lcp0q] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

/* ===============================
   HEADER / BRANDING
   =============================== */
.brand-header[b-2i833lcp0q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, #0078d7, #0056a3);
    padding: 12px 20px;
    color: #fff;
    border-radius: 0 0 8px 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.brand-left[b-2i833lcp0q] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo[b-2i833lcp0q] {
    height: 60px;
    width: auto;
}

.brand-text h1[b-2i833lcp0q] {
    font-size: 1.4rem;
    margin: 0;
    font-weight: bold;
}

.brand-text small[b-2i833lcp0q] {
    font-size: 0.9rem;
    opacity: 0.9;
}

.brand-right[b-2i833lcp0q] {
    font-size: 0.9rem;
}

.token-label[b-2i833lcp0q] {
    font-weight: bold;
    margin-right: 6px;
}

.token-value[b-2i833lcp0q] {
    background: #fff;
    color: #0056a3;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

/* ===============================
   LAYOUT PRINCIPAL
   =============================== */
.main-row[b-2i833lcp0q] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Columna izquierda */
.left-col[b-2i833lcp0q] {
    flex: 1 1 280px;
}

/* Columna central */
.center-col[b-2i833lcp0q] {
    flex: 2 1 600px;
}

/* Columna derecha */
.right-col[b-2i833lcp0q] {
    flex: 1 1 280px;
}

/* ===============================
   TARJETAS DE EQUIPOS (LEFT)
   =============================== */
.promo-card[b-2i833lcp0q] {
    
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}

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

.promo-img[b-2i833lcp0q] {
    background-color:white;
    width: 100%;
    height: 160px;
    object-fit: contain;
    
}

.promo-info h6[b-2i833lcp0q] {
    margin-bottom: 4px;
}

/* ===============================
   HELP CARD
   =============================== */
.help-card[b-2i833lcp0q] {
    border-left: 4px solid #0078d7;
}

/* ===============================
   COMPROBANTE (CENTRO)
   =============================== */
.main-card[b-2i833lcp0q] {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}

    .main-card .card-header[b-2i833lcp0q] {
        font-weight: bold;
        text-align: center;
    }

.table th[b-2i833lcp0q], .table td[b-2i833lcp0q] {
    vertical-align: middle;
}

/* ===============================
   ADVERTISING (RIGHT)
   =============================== */
.ad-card[b-2i833lcp0q] {
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.video-card iframe[b-2i833lcp0q] {
    width: 100%;
    height: 300px;
    border-radius: 10px;
}

/* ===============================
   BRANDING (BOTTOM CENTER)
   =============================== */
.branding-card[b-2i833lcp0q] {
    border: 1px dashed #ccc;
    background: #fdfdfd;
}

/* ===============================
   FOOTER
   =============================== */
.page-footer[b-2i833lcp0q] {
    border-top: 1px solid #ddd;
    padding: 12px 20px;
    margin-top: 20px;
    font-size: 0.9rem;
    color: #666;
}

/* ===============================
   LOADING
   =============================== */
.loading[b-2i833lcp0q] {
    text-align: center;
    margin: 40px 0;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 992px) {
    .brand-header[b-2i833lcp0q] {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .main-row[b-2i833lcp0q] {
        flex-direction: column;
    }

    .left-col[b-2i833lcp0q], .center-col[b-2i833lcp0q], .right-col[b-2i833lcp0q] {
        flex: 1 1 100%;
    }

    .promo-img[b-2i833lcp0q] {
        height: 140px;
        
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/Public/DescubreXTO3Page.razor.rz.scp.css */
/* --- ESTILOS GENERALES --- */
body[b-5rdg1seghl] {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    background-color: #f5f7fa; /* Un gris muy claro para el fondo */
    color: #333;
    margin: 0;
    line-height: 1.6;
}

/* --- CONTENEDOR PRINCIPAL --- */
.page-container[b-5rdg1seghl] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* --- SECCIÓN DE CABECERA SIMPLE --- */
.header-section[b-5rdg1seghl] {
    text-align: center;
    margin-bottom: 50px;
}

    .header-section h1[b-5rdg1seghl] {
        font-size: 2.8rem;
        color: #2c3e50;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .header-section p[b-5rdg1seghl] {
        font-size: 1.1rem;
        color: #555;
        max-width: 700px;
        margin: 0 auto;
    }

/* --- GRID DE MÓDULOS --- */
.modules-grid[b-5rdg1seghl] {
    display: grid;
    /* Columnas auto-ajustables. Mínimo 350px, máximo 1fr (fracción del espacio) */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

/* --- TARJETA DE MÓDULO (CARD) --- */
.module-card[b-5rdg1seghl] {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .module-card:hover[b-5rdg1seghl] {
        transform: translateY(-8px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

/* --- CABECERA DE LA TARJETA --- */
.card-header[b-5rdg1seghl] {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 15px;
}

.card-icon[b-5rdg1seghl] {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.card-title[b-5rdg1seghl] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0056b3; /* Azul oscuro para el título */
    margin: 0;
}

/* --- VIDEO --- */
.card-video-wrapper[b-5rdg1seghl] {
    padding: 0 20px 10px 20px; /* Espaciado para el video */
}

    .card-video-wrapper iframe[b-5rdg1seghl] {
        border-radius: 8px;
        border: 1px solid #eee;
    }

.youtube-link[b-5rdg1seghl] {
    display: block;
    text-align: center;
    margin-top: 8px;
    color: #c00;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .youtube-link:hover[b-5rdg1seghl] {
        color: #f00;
        text-decoration: underline;
    }

    .youtube-link i[b-5rdg1seghl] {
        margin-right: 5px;
    }

/* --- CUERPO DE LA TARJETA (SOLUCIÓN) --- */
.card-body[b-5rdg1seghl] {
    padding: 10px 20px 20px 20px;
    flex-grow: 1; /* Empuja el footer hacia abajo */
}

    .card-body h4[b-5rdg1seghl] {
        font-size: 1rem;
        color: #333;
        font-weight: 600;
        margin: 0 0 5px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.8;
    }

    .card-body p[b-5rdg1seghl] {
        font-size: 1rem;
        color: #444;
        margin: 0;
    }

/* --- FOOTER DE LA TARJETA (PRECIO Y BOTÓN) --- */
.card-footer[b-5rdg1seghl] {
    background-color: #f8f9fa;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e9ecef;
}

.card-price[b-5rdg1seghl] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2c3e50;
}

    .card-price span[b-5rdg1seghl] {
        font-size: 0.9rem;
        font-weight: 400;
        color: #6c757d;
    }

.cta-button[b-5rdg1seghl] {
    background-color: #25d366; /* Verde WhatsApp */
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    .cta-button:hover[b-5rdg1seghl] {
        background-color: #1da851;
        transform: scale(1.05);
        color: #fff;
    }

/* --- DISEÑO RESPONSIVO --- */
@media (max-width: 992px) {
    .modules-grid[b-5rdg1seghl] {
        /* Pasa a 2 columnas en tablets */
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

    .header-section h1[b-5rdg1seghl] {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .header-section h1[b-5rdg1seghl] {
        font-size: 2rem;
    }

    .header-section p[b-5rdg1seghl] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    /* Pasa a 1 columna en móviles */
    .modules-grid[b-5rdg1seghl] {
        grid-template-columns: 1fr;
    }

    .page-container[b-5rdg1seghl] {
        padding: 20px 15px;
    }
}
/* --- CABECERA DE LA TARJETA --- */
.card-header[b-5rdg1seghl] {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 15px;
}

/* NUEVO: CONTENEDOR CIRCULAR PARA EL ICONO */
.card-icon-wrapper[b-5rdg1seghl] {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Lo hace un círculo perfecto */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Evita que el círculo se encoja */
}

/* NUEVO: ESTILO PARA EL ICONO DENTRO DEL CÍRCULO */
.card-icon[b-5rdg1seghl] {
    font-size: 1.5rem; /* Tamaño del icono */
}

.card-title[b-5rdg1seghl] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0056b3; /* Azul oscuro para el título */
    margin: 0;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/Public/VantasticQRPage.razor.rz.scp.css */
body[b-m0ynw4suve] {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
}

:root[b-m0ynw4suve] {
    --primary-accent: #ff6f61;
    --text-dark: #212529;
    --text-muted-light: #6c757d;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
}

.text-accent[b-m0ynw4suve] {
    color: var(--primary-accent);
}

.topbar[b-m0ynw4suve] {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 0.75rem 2rem;
}

.company-name[b-m0ynw4suve] {
    color: var(--text-dark);
    font-weight: 700;
    font-size: 1.5rem;
}

.topbar-center[b-m0ynw4suve] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.category-trigger[b-m0ynw4suve] {
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
    font-weight: 500;
}

    .category-trigger:hover[b-m0ynw4suve] {
        background-color: #f1f3f5;
    }

.search-box .form-control[b-m0ynw4suve] {
    min-width: 300px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .search-box .form-control:focus[b-m0ynw4suve] {
        border-color: var(--primary-accent);
        box-shadow: 0 0 0 2px rgba(255, 111, 97, 0.25);
    }

/* FIX: Asegurar fondo sólido para el panel de categorías */
.category-panel-desktop[b-m0ynw4suve] {
    position: absolute;
    margin-top:25px;
    top: 100%;
    left: 0;
    width: 800px;
    background-color: #ffffff; /* Fondo blanco sólido explícito */
    border: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1050;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

    .category-panel-desktop.show[b-m0ynw4suve] {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    .category-panel-desktop .category-item[b-m0ynw4suve] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        cursor: pointer;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }

        .category-panel-desktop .category-item:hover[b-m0ynw4suve], .category-panel-desktop .category-item.active[b-m0ynw4suve] {
            background-color: #e9ecef;
            font-weight: 400;
        }

        .category-panel-desktop .category-item i[b-m0ynw4suve] {
            color: var(--primary-accent);
            width: 20px;
        }

.mobile-category-overlay[b-m0ynw4suve] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1060;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

    .mobile-category-overlay.show[b-m0ynw4suve] {
        opacity: 1;
        visibility: visible;
    }

.mobile-category-panel[b-m0ynw4suve] {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-category-overlay.show .mobile-category-panel[b-m0ynw4suve] {
    transform: translateX(0);
}

.mobile-category-panel .panel-header[b-m0ynw4suve] {
    padding: 1rem;
    font-size: 1rem;
    font-weight: 400;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-category-panel .panel-content[b-m0ynw4suve] {
    flex-grow: 1;
    overflow-y: auto;
}

.mobile-category-panel .mobile-category-item[b-m0ynw4suve] {
    padding: 1rem;
    border-bottom: 1px solid #f1f3f5;
    cursor: pointer;
}

    .mobile-category-panel .mobile-category-item:hover[b-m0ynw4suve] {
        background-color: #f8f9fa;
    }

/* FIX: Añadir cursor: pointer para la tarjeta de producto */
.product-card[b-m0ynw4suve] {
    background-color: var(--card-bg);
    border: 1px solid groove;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer; /* <--- AQUÍ LA CORRECCIÓN */
}

    .product-card:hover[b-m0ynw4suve] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-color: var(--primary-accent);
    }

.product-image-container[b-m0ynw4suve] {
    aspect-ratio: 1 / 1;
    background-color: #f1f3f5;
}

.product-img[b-m0ynw4suve] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card .card-body[b-m0ynw4suve] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-title[b-m0ynw4suve] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 45px;
}

/*.product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-accent);
    margin-top: auto;
    padding-top: 0.5rem;
}

    .product-price .original-price {
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--text-muted-light);
    }*/
.product-price[b-m0ynw4suve] {
    font-size: 1rem;
    font-weight: bold;
    color: #007bff; /* Primary color for price */
}

.original-price[b-m0ynw4suve] {
    font-size: 0.9rem;
    color: #6c757d; /* Muted color for original price */
}
/*.discount-badge {
    font-weight: 600;
    font-size: 0.75rem;
    background-color: var(--primary-accent) !important;
}*/
.discount-badge[b-m0ynw4suve] {
    background-color: #dc3545; /* Bootstrap danger color */
    color: white;
    padding: 0.3em 0.6em;
    border-radius: 5px;
    font-size: 0.75rem;
    z-index: 1; /* Ensure badge is above image */
}
.rating[b-m0ynw4suve] {
    font-size: 0.8rem;
}

/* --- ESTILOS PARA EL POPUP DE PRODUCTO --- */
.popup-overlay[b-m0ynw4suve] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1070;
    opacity: 0;
    animation: fadeIn-b-m0ynw4suve 0.3s forwards;
}

/* FIX: Asegurar fondo sólido para el popup de producto */
.popup-dialog[b-m0ynw4suve] {
    background-color: #ffffff; /* Fondo blanco sólido explícito */
    border-radius: 15px;
    padding: 1.5rem;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: scale(0.95);
    animation: scaleIn-b-m0ynw4suve 0.3s forwards;
}

.popup-close-btn[b-m0ynw4suve] {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.popup-dialog img[b-m0ynw4suve] {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 10px;
    background-color: #f8f9fa;
}

.popup-dialog .product-desc[b-m0ynw4suve] {
    font-size: 0.95rem;
    color: var(--text-muted-light);
    line-height: 1.6;
}

@keyframes fadeIn-b-m0ynw4suve {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn-b-m0ynw4suve {
    from {
        transform: scale(0.95);
    }

    to {
        transform: scale(1);
    }
}
.product-popup-image[b-m0ynw4suve] {
    width: 100%; /* Ensures it fills the column width */
    height: 100%; /* Or a fixed height you prefer */
    object-fit:cover; /* OR cover */
    display: block; /* Removes any extra space below the image */
}

/* Optional: Add a max-height if you want it responsive but not too tall */
 @media (max-width: 767px) {
    .product-popup-image[b-m0ynw4suve] {
        height: 250px; // Shorter on mobile
    }
}

.category-list-container[b-m0ynw4suve] {
    max-height: 500px; /* Adjust this value as needed. E.g., 400px, 60vh, etc. */
    overflow-y: auto; /* This creates the vertical scrollbar if content overflows */
    overflow-x: hidden; /* Prevents horizontal scrollbar */
    padding-right: 15px; /* Add some padding to prevent content from touching the scrollbar */    
}

    /* Optional: Style the scrollbar for better aesthetics (Webkit browsers like Chrome/Safari) */
    .category-list-container[b-m0ynw4suve]::-webkit-scrollbar {
        width: 8px; /* Width of the scrollbar */
    }

    .category-list-container[b-m0ynw4suve]::-webkit-scrollbar-track {
        background: #f1f1f1; /* Color of the scrollbar track */
        border-radius: 10px;
    }

    .category-list-container[b-m0ynw4suve]::-webkit-scrollbar-thumb {
        background: #888; /* Color of the scrollbar thumb */
        border-radius: 10px;
    }

        .category-list-container[b-m0ynw4suve]::-webkit-scrollbar-thumb:hover {
            background: #555; /* Color when hovering over the scrollbar thumb */
        }

.my-wide-section-container[b-m0ynw4suve] {
    max-width: 1400px !important; /* Temporarily add !important */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Optional: Make it fluid on smaller screens so it doesn't get cut off */
@media (max-width: 1400px) { /* Use the same value as max-width above */
    .my-wide-section-container[b-m0ynw4suve] {
        max-width: 100%; /* Allows it to go full width on screens smaller than 1400px */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/SplashPage.razor.rz.scp.css */
.splash[b-2ehicwmc3z] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--colorBackgroundGD);
    background-color: var(--colorBackground);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.loading-overlay[b-2ehicwmc3z] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-2ehicwmc3z] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-2ehicwmc3z 1s linear infinite;
}

@keyframes spin-b-2ehicwmc3z {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/UcEntidadMain.razor.rz.scp.css */
/* Contenedor general */
.search-container[b-88uizng05p] {
    width: 100%;
    gap: 8px;
}

/* Textbox ocupa todo el ancho disponible */
.textbox-container[b-88uizng05p] {
    flex-grow: 1;
    min-width: 200px;
}

/* Forzar que el textbox tenga 100% de ancho interno */
.custom-textbox .e-input[b-88uizng05p] {
    width: 100%;
    font-size: 14px;
}

/* Botones alineados a la derecha en escritorio */
.button-group[b-88uizng05p] {
    display: flex;
    gap: 6px;
}

    /* Estilo de botones */
    .button-group .e-btn[b-88uizng05p] {
        border-radius: 0;
        color: white;
        font-size: 16px;
        padding: 6px 10px;
        min-width: 40px;
    }

/* Colores elegantes */
.btn-assign[b-88uizng05p] {
    background-color: #0d6efd;
}

    .btn-assign:hover[b-88uizng05p] {
        background-color: #0a58ca;
    }

.btn-new[b-88uizng05p] {
    background-color: #198754;
}

    .btn-new:hover[b-88uizng05p] {
        background-color: #146c43;
    }

.btn-edit[b-88uizng05p] {
    background-color: #6c757d;
}

    .btn-edit:hover[b-88uizng05p] {
        background-color: #565e64;
    }

/* Responsive: botones abajo y textbox full-width */
@media (max-width: 768px) {
    .search-container[b-88uizng05p] {
        flex-direction: column;
        align-items: stretch;
    }

    .textbox-container[b-88uizng05p] {
        width: 100%;
    }

    .button-group[b-88uizng05p] {
        justify-content: flex-start;
        margin-top: 10px;
    }

        .button-group .e-btn[b-88uizng05p] {
            width: 100%; /* Opcional: botones de ancho completo en móviles */
        }
}

/* Target a través del ID del Grid */
/* Fondo de filas alternas */
[b-88uizng05p] .e-grid .e-altrow {
    background-color: #f9fafb;
}

/* Fondo de filas normales */
[b-88uizng05p] .e-grid .e-row {
    background-color: #ffffff;
}

    /* Hover sobre cualquier fila */
    [b-88uizng05p] .e-grid .e-row:hover {
        background-color: #eef2f6;
        cursor: pointer;
    }

/* Fila seleccionada */
[b-88uizng05p] .e-grid .e-selectionbackground {
    background-color: #e3f2fd;
}

/* Encabezados */
[b-88uizng05p] .e-grid .e-headercell {
    background-color: #0d47a1;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid #0d47a1;
}

/* Texto de las celdas */
[b-88uizng05p] .e-grid .e-rowcell {
    font-size: 13px;
    color: #333333;
    padding: 8px 10px;
    border-color: #e0e0e0;
}

/* Bordes del grid */
[b-88uizng05p] .e-grid {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

    /* Header completo (fondo del header) */
    [b-88uizng05p] .e-grid .e-headercontent {
        background-color: #0d47a1;
    }

    /* Paginador */
    [b-88uizng05p] .e-grid .e-pager {
        background-color: #f4f6f8;
        border-top: 1px solid #ddd;
    }

        /* Botones del paginador activos */
        [b-88uizng05p] .e-grid .e-pager .e-numericitem.e-active {
            background-color: #0d47a1;
            color: #fff;
        }

    /* Eliminamos bordes excesivos */
    [b-88uizng05p] .e-grid .e-gridheader,
    [b-88uizng05p] .e-grid .e-gridcontent {
        border: none;
    }

    /* Ajuste de altura */
    [b-88uizng05p] .e-grid .e-rowcell,
    [b-88uizng05p] .e-grid .e-headercell {
        min-height: 40px;
        vertical-align: middle;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/UcEntidadProveedorMain.razor.rz.scp.css */
/* Contenedor general */
.search-container[b-givhszjj5e] {
    width: 100%;
    gap: 8px;
}

/* Textbox ocupa todo el ancho disponible */
.textbox-container[b-givhszjj5e] {
    flex-grow: 1;
    min-width: 200px;
}

/* Forzar que el textbox tenga 100% de ancho interno */
.custom-textbox .e-input[b-givhszjj5e] {
    width: 100%;
    font-size: 14px;
}

/* Botones alineados a la derecha en escritorio */
.button-group[b-givhszjj5e] {
    display: flex;
    gap: 6px;
}

    /* Estilo de botones */
    .button-group .e-btn[b-givhszjj5e] {
        border-radius: 0;
        color: white;
        font-size: 16px;
        padding: 6px 10px;
        min-width: 40px;
    }

/* Colores elegantes */
.btn-assign[b-givhszjj5e] {
    background-color: #0d6efd;
}

    .btn-assign:hover[b-givhszjj5e] {
        background-color: #0a58ca;
    }

.btn-new[b-givhszjj5e] {
    background-color: #198754;
}

    .btn-new:hover[b-givhszjj5e] {
        background-color: #146c43;
    }

.btn-edit[b-givhszjj5e] {
    background-color: #6c757d;
}

    .btn-edit:hover[b-givhszjj5e] {
        background-color: #565e64;
    }

/* Responsive: botones abajo y textbox full-width */
@media (max-width: 768px) {
    .search-container[b-givhszjj5e] {
        flex-direction: column;
        align-items: stretch;
    }

    .textbox-container[b-givhszjj5e] {
        width: 100%;
    }

    .button-group[b-givhszjj5e] {
        justify-content: flex-start;
        margin-top: 10px;
    }

        .button-group .e-btn[b-givhszjj5e] {
            width: 100%; /* Opcional: botones de ancho completo en móviles */
        }
}

/* Target a través del ID del Grid */


/* Fondo de filas alternas */
[b-givhszjj5e] .e-grid .e-altrow {
    background-color: #f9fafb;
}

/* Fondo de filas normales */
[b-givhszjj5e] .e-grid .e-row {
    background-color: #ffffff;
}

    /* Hover sobre cualquier fila */
    [b-givhszjj5e] .e-grid .e-row:hover {
        background-color: #eef2f6;
        cursor: pointer;
    }

/* Fila seleccionada */
[b-givhszjj5e] .e-grid .e-selectionbackground {
    background-color: #e3f2fd;
}

/* Encabezados */
[b-givhszjj5e] .e-grid .e-headercell {
    background-color: #0d47a1;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid #0d47a1;
}

/* Texto de las celdas */
[b-givhszjj5e] .e-grid .e-rowcell {
    font-size: 13px;
    color: #333333;
    padding: 8px 10px;
    border-color: #e0e0e0;
}

/* Bordes del grid */
[b-givhszjj5e] .e-grid {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

    /* Header completo (fondo del header) */
    [b-givhszjj5e] .e-grid .e-headercontent {
        background-color: #0d47a1;
    }

    /* Paginador */
    [b-givhszjj5e] .e-grid .e-pager {
        background-color: #f4f6f8;
        border-top: 1px solid #ddd;
    }

        /* Botones del paginador activos */
        [b-givhszjj5e] .e-grid .e-pager .e-numericitem.e-active {
            background-color: #0d47a1;
            color: #fff;
        }

    /* Eliminamos bordes excesivos */
    [b-givhszjj5e] .e-grid .e-gridheader,
    [b-givhszjj5e] .e-grid .e-gridcontent {
        border: none;
    }

    /* Ajuste de altura */
    [b-givhszjj5e] .e-grid .e-rowcell,
    [b-givhszjj5e] .e-grid .e-headercell {
        min-height: 40px;
        vertical-align: middle;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/UcItemDetalle.razor.rz.scp.css */
.grid-container[b-8gjf2jan8d] {
    overflow-y: hidden;
    margin-top: 0px;
}

.custom-container[b-8gjf2jan8d] {
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;*/ /* Altura completa de la ventana */
    margin: 0px;
    padding: 10px;
}

.page-header[b-8gjf2jan8d] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 15px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-8gjf2jan8d] {
        width: 100%;
    }

    .page-header .page-header-title[b-8gjf2jan8d] {
        display: block;
    }

    .page-header h4[b-8gjf2jan8d], .page-header .h4[b-8gjf2jan8d] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-8gjf2jan8d] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.card[b-8gjf2jan8d] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f, 0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}

.heading-style[b-8gjf2jan8d] {
    background-color: #0000000f;
    border-inline-start: 2px solid #b6ff00;
    border-radius: 3px;
    padding: 6px;
    padding-inline-start: 8px;
    margin-bottom: 14px;
}

    .heading-style h3[b-8gjf2jan8d] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 0;
    }

.total-order[b-8gjf2jan8d] {
    max-width: 430px;
    width: 100%;
    margin: 10px 0 30px auto;
}

    .total-order ul[b-8gjf2jan8d] {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: baseline;
    }

p[b-8gjf2jan8d], ul:not(.list-unstyled)[b-8gjf2jan8d], ol[b-8gjf2jan8d] {
    line-height: 22px;
}

.total-order ul li:first-child[b-8gjf2jan8d] {
    border-top: 1px solid #00000014;
}

.total-order ul li[b-8gjf2jan8d] {
    border: 1px solid #00000014;
    border-top: 0;
    display: flex;
}

    .total-order ul li h4[b-8gjf2jan8d] {
        width: 50%;
        color: var(--colorTextLight);
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border-right: 1px solid #00000014;
        background: var(--colorSurface);
        margin-bottom: 0;
    }

h4[b-8gjf2jan8d] {
    font-size: 17px;
}

h1[b-8gjf2jan8d], h2[b-8gjf2jan8d], h3[b-8gjf2jan8d], h4[b-8gjf2jan8d], h5[b-8gjf2jan8d], h6[b-8gjf2jan8d] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.total-order ul li h5[b-8gjf2jan8d] {
    color: var(--colorTextPrimary);
    font-size: 14px;
    padding: 10px;
    font-weight: 700;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

h1[b-8gjf2jan8d], h2[b-8gjf2jan8d], h3[b-8gjf2jan8d], h4[b-8gjf2jan8d], h5[b-8gjf2jan8d], h6[b-8gjf2jan8d] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.flex-container[b-8gjf2jan8d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-8gjf2jan8d] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper1[b-8gjf2jan8d] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-8gjf2jan8d] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-8gjf2jan8d], .textbox-wrapper[b-8gjf2jan8d] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}

.loading-overlay[b-8gjf2jan8d] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-8gjf2jan8d] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-8gjf2jan8d 1s linear infinite;
}

@keyframes spin-b-8gjf2jan8d {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/VantasticQRAgendaPage.razor.rz.scp.css */
/* -- app.css o un bloque <style> en el componente -- */

/* Contenedor principal del dashboard - usa Flexbox para la disposición horizontal */
.dashboard-container[b-agbcl5wx7i] {
    display: flex;
    gap: 20px; /* Espacio entre el calendario y los sidebars */
    padding: 20px;
    min-height: calc(100vh - 60px); /* Ajusta la altura para ocupar casi toda la ventana */
    box-sizing: border-box;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
}

/* Columna izquierda: El calendario principal */
.main-content-left[b-agbcl5wx7i] {
    /* flex-grow: 1 (crecer), flex-shrink: 1 (encoger), flex-basis: 0 (tamaño base inicial) */
    /* Esto permite que el calendario tome el espacio restante después de que el sidebar tenga su ancho fijo */
    flex: 1 1 0%;
    min-width: 450px; /* Ancho mínimo para el calendario antes de que la disposición cambie */
    display: flex;
    flex-direction: column;
}

/* Columna derecha: El sidebar con estadísticas y próximas citas */
.right-sidebar[b-agbcl5wx7i] {
    /* flex-grow: 0 (no crecer), flex-shrink: 0 (no encoger), flex-basis: 350px (ancho fijo) */
    /* ESTO ES CLAVE: Asegura que el sidebar SIEMPRE intente tener 350px y no se encoja */
    flex: 0 0 350px; /* <--- MODIFICADO: Ancho fijo para el sidebar derecho */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Estilos para las Secciones del Sidebar --- */

.summary-sidebar-section[b-agbcl5wx7i] {
    position:relative; /* Fijo al scroll */
    top: 20px; /* Distancia desde la parte superior */
    background-color: #f8f9fa; /* Color de fondo claro para el sidebar */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.summary-cards-grid[b-agbcl5wx7i] {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas para las tarjetas */
    gap: 10px; /* Espacio entre tarjetas */
    margin-top: 10px;
}

.summary-card[b-agbcl5wx7i] {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    font-size: 0.9em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

    .summary-card h4[b-agbcl5wx7i] {
        margin-bottom: 5px;
        font-size: 0.9em;
        color: #555;
    }

    .summary-card p[b-agbcl5wx7i] {
        font-size: 1.5em;
        font-weight: bold;
        margin: 0;
        color: #333;
    }

/* Colores específicos para las tarjetas */
.card-today .summary-card[b-agbcl5wx7i] {
    background-color: #e0f2f7;
}
/* Azul suave */
.card-pending .summary-card[b-agbcl5wx7i] {
    background-color: #fffacd;
}
/* Amarillo pastel */
.card-completed .summary-card[b-agbcl5wx7i] {
    background-color: #e6ffe6;
}
/* Verde claro suave */
.card-cancelled .summary-card[b-agbcl5wx7i] {
    background-color: #ffe6e6;
}
/* Rojo claro suave */


/* Sección de Próximas Citas */
.upcoming-appointments-section[b-agbcl5wx7i] {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Ajusta la altura máxima para que no se desborde al hacer scroll */
    max-height: calc(100vh - 300px); /* Aproximadamente la altura del sidebar - sección de resumen */
    overflow-y: auto; /* Permite scroll si hay muchas citas */
}

.upcoming-appointment-item[b-agbcl5wx7i] {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
}

    .upcoming-appointment-item:last-child[b-agbcl5wx7i] {
        border-bottom: none;
    }

.appointment-header[b-agbcl5wx7i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.appointment-time[b-agbcl5wx7i], .appointment-client[b-agbcl5wx7i] {
    color: #666;
    margin-bottom: 3px;
}

.time-remaining[b-agbcl5wx7i] {
    font-size: 0.8em;
    color: #007bff;
    font-weight: bold;
}

    .time-remaining.blinking[b-agbcl5wx7i] {
        animation: blinker-b-agbcl5wx7i 1s linear infinite; /* Animación de parpadeo */
    }

@keyframes blinker-b-agbcl5wx7i {
    50% {
        opacity: 0;
    }
}


.time-remaining.blinking-red[b-agbcl5wx7i] { /* Nueva clase para el parpadeo rojo */
    animation: blinking-red-animation-b-agbcl5wx7i 1s linear infinite;
    color: #FF6347; /* Tomate/Rojo claro vibrante */
}

@keyframes blinking-red-animation-b-agbcl5wx7i {
    50% {
        opacity: 0.3;
    }
    /* El color se desvanece a 30% de opacidad */
}

.passed-appointment-actions[b-agbcl5wx7i] {
    margin-top: 5px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap; /* Permite que los botones se envuelvan si no hay espacio */
}

/* Estilos de botones de acción */
.action-button[b-agbcl5wx7i] {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.8em;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap; /* Evita que el texto del botón se rompa */
}

    .action-button:hover[b-agbcl5wx7i] {
        background-color: #e9ecef;
    }

    .action-button.complete[b-agbcl5wx7i] {
        color: #28a745;
        border-color: #28a745;
    }

        .action-button.complete:hover[b-agbcl5wx7i] {
            background-color: #28a745;
            color: white;
        }

    .action-button.cancel[b-agbcl5wx7i] {
        color: #dc3545;
        border-color: #dc3545;
    }

        .action-button.cancel:hover[b-agbcl5wx7i] {
            background-color: #dc3545;
            color: white;
        }

    .action-button.delete[b-agbcl5wx7i] {
        color: #6c757d;
        border-color: #6c757d;
    }

        .action-button.delete:hover[b-agbcl5wx7i] {
            background-color: #6c757d;
            color: white;
        }

/* Estilos para el título principal del dashboard */
.dashboard-title[b-agbcl5wx7i] {
    margin-bottom: 20px;
    text-align: center;
    color: #2c3e50;
    font-size: 2em;
    font-weight: 300;
}

    .dashboard-title span[b-agbcl5wx7i] {
        margin-right: 10px;
    }

/* --- Media Queries para Responsividad --- */

/* Para pantallas más pequeñas (tablets y móviles) */
@media (max-width: 992px) { /* Por ejemplo, para pantallas de menos de 992px de ancho */
    .dashboard-container[b-agbcl5wx7i] {
        flex-direction: column; /* Apila el calendario y el sidebar verticalmente */
        padding: 10px; /* Reduce el padding general */
        gap: 15px;
        min-height: auto; /* Permite que la altura se ajuste al contenido */
    }

    .main-content-left[b-agbcl5wx7i], .right-sidebar[b-agbcl5wx7i] {
        flex: 1 1 100%; /* Ambos ocupan todo el ancho disponible */
        width: auto; /* Deshace el ancho fijo para el sidebar */
        min-width: unset; /* Quita el min-width del calendario */
    }

    .summary-sidebar-section[b-agbcl5wx7i] {
        position: static; /* Desactiva sticky en móviles para evitar problemas de scroll */
        top: auto;
    }

    .upcoming-appointments-section[b-agbcl5wx7i] {
        max-height: 400px; /* Ajusta la altura máxima para que no sea excesivamente larga */
    }

    .dashboard-title[b-agbcl5wx7i] {
        font-size: 1.5em; /* Reduce el tamaño del título */
    }
}

/* Para pantallas muy pequeñas (móviles) */
@media (max-width: 576px) {
    .summary-cards-grid[b-agbcl5wx7i] {
        grid-template-columns: 1fr; /* Una columna para las tarjetas en pantallas muy pequeñas */
    }
}
/* Estilos generales */
/*.appointments-dashboard {
    padding: 20px;
    background-color: #f0f2f5;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

    .appointments-dashboard h3 {
        color: #333;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .appointments-dashboard .oi {
        font-size: 1.5em;
        color: #007bff;
    }*/

/* Tarjetas de Resumen */
/*.summary-cards {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;*/ /* Permite que las tarjetas se envuelvan en pantallas pequeñas */
/*}

    .summary-cards .card {
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 25px;
        text-align: center;
        flex: 1;
        min-width: 200px;
        max-width: 250px;
        box-shadow: 0 6px 12px rgba(0,0,0,0.1);
        transition: transform 0.2s ease-in-out;
    }

        .summary-cards .card:hover {
            transform: translateY(-5px);
        }

        .summary-cards .card h4 {
            margin-top: 0;
            color: #555;
            font-size: 1.1em;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .summary-cards .card p {
            font-size: 3em;
            font-weight: bold;
            margin: 10px 0 0;
        }

.card-today p {
    color: #28a745;*/ /* Verde */
/*}

.card-pending p {
    color: #ffc107;*/ /* Amarillo */
/*}

.card-completed p {
    color: #17a2b8;*/ /* Azul claro */
/*}

.card-cancelled p {
    color: #dc3545;*/ /* Rojo */
/*}*/

/* Indicadores de carga y error */
/*.loading-indicator {
    text-align: center;
    padding: 30px;
    font-size: 1.2em;
    color: #6c757d;
}

.error-message {
    text-align: center;
    padding: 30px;
    font-size: 1.2em;
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    margin-bottom: 20px;
}*/

/* Estilos del formulario de edición personalizado */
/*.form-group {
    margin-bottom: 15px;
}

    .form-group label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
        color: #34495e;
    }*/

/* Syncfusion specific overrides for form inputs */
/*.e-input-group .e-input, .e-input-group.e-control-wrapper .e-input {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
}

.e-date-wrapper .e-input-group.e-control-wrapper {
    width: 100%;
}

.e-ddl.e-input-group {
    width: 100%;
}

.validation-message {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 5px;
    display: block;
}*/
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/VantasticQREditPage.razor.rz.scp.css */
body[b-lh7442fc0h] {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
}

html[b-lh7442fc0h], body[b-lh7442fc0h] {
    height: 100%;
    margin: 0;
    padding: 0;
     box-sizing:inherit;
}
/* --- Global Resets for Layout (crucial for fixed positioning) --- */
/*html, body {
    height: 100%;*/ /* Make sure they always fill the viewport */
    /*margin: 0;*/ /* Remove default browser margins */
    /*padding: 0;*/ /* Remove default browser paddings */
    /*box-sizing: border-box;*/ /* Good practice for consistent box model */
/*}

*, *::before, *::after {
    box-sizing: inherit;*/ /* Inherit box-sizing */
/*}*/

/* --- Class to disable scrolling --- */
.no-scroll[b-lh7442fc0h] {
    overflow: hidden !important;
}
:root[b-lh7442fc0h] {
    --primary-accent: #ff6f61;
    --text-dark: #212529;
    --text-muted-light: #6c757d;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
}
/* Colores de acento (ajusta según tu marca) */
:root[b-lh7442fc0h] {
    --vantastic-accent-start: #6a11cb; /* Morado más oscuro */
    --vantastic-accent-end: #2575fc; /* Azul más brillante */
    --text-color-dark: #333;
    --text-color-light: #f8f8f8;
}

/* Estilos para el contenedor del título */
.vantastic-title[b-lh7442fc0h] {
    font-family: 'Montserrat', sans-serif; /* Fuente moderna, asegúrate de importarla */
    font-size: 2.8rem; /* Tamaño de fuente más grande */
    font-weight: 800; /* Negrita extra */
    letter-spacing: 0.05em; /* Espaciado entre letras */
    text-align: center;
    color: var(--text-color-dark); /* Color base del texto */
    position: relative; /* Para posicionar pseudo-elementos o iconos */
    padding-bottom: 0.5rem; /* Espacio para un posible subrayado animado */
    margin-top: 2rem; /* Espacio superior */
    margin-bottom: 2rem !important; /* Asegurar margen inferior */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Sombra de texto sutil */
}

    /* Estilo para la parte del texto con gradiente */
    /*.vantastic-title .text-gradient {*/
        /* Aplicar gradiente al texto */
        /*background: linear-gradient(45deg, var(--vantastic-accent-start), var(--vantastic-accent-end));
        -webkit-background-clip: text;*/ /* Recorta el fondo al texto */
        /*background-clip: text;
        -webkit-text-fill-color: transparent;*/ /* Hace que el texto sea transparente para que se vea el fondo */
        /*filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));*/ /* Sombra para el texto con gradiente */
    /*}*/

    /* Contenedor de iconos para posicionamiento */
    .vantastic-title .icon-wrapper[b-lh7442fc0h] {
        position: relative; /* Para que los iconos se posicionen dentro */
        display: inline-block; /* Para que ocupe solo el espacio necesario */
        margin-right: 15px; /* Espacio entre los iconos y el texto */
        width: 2.5rem; /* Ancho fijo para los iconos */
        height: 2.5rem; /* Altura fija para los iconos */
    }

    /* Estilos base del icono principal */
    .vantastic-title .qr-icon[b-lh7442fc0h] {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        color: var(--vantastic-accent-end); /* Color del icono principal */
        font-size: 2.5rem; /* Tamaño del icono */
        opacity: 0.9;
        filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.2));
    }

    /* Estilos del icono secundario (aparece sobre el QR) */
    .vantastic-title .magic-icon[b-lh7442fc0h] {
        position: absolute;
        left: 10px; /* Desplazado un poco */
        top: 50%;
        transform: translateY(-50%) scale(0); /* Inicialmente oculto y pequeño */
        color: var(--vantastic-accent-start); /* Color del icono secundario */
        font-size: 1.5rem; /* Tamaño más pequeño */
        opacity: 0;
        animation: magicPulse-b-lh7442fc0h 3s infinite ease-out; /* Animación */
        animation-delay: 1s; /* Retraso para que el QR se vea primero */
    }

/* Animación para el icono de magia */
@keyframes magicPulse-b-lh7442fc0h {
    0% {
        transform: translateY(-50%) scale(0);
        opacity: 0;
    }

    30% {
        transform: translateY(-50%) scale(1.2);
        opacity: 1;
    }

    50% {
        transform: translateY(-50%) scale(1);
        opacity: 0.8;
    }

    70% {
        transform: translateY(-50%) scale(1.1);
        opacity: 0.9;
    }

    100% {
        transform: translateY(-50%) scale(0);
        opacity: 0;
    }
}

/* Opcional: Una línea inferior animada para el título */
.vantastic-title[b-lh7442fc0h]::after {
    content: '';
    display: block;
    width: 0; /* Empieza sin ancho */
    height: 4px;
    background: linear-gradient(90deg, var(--vantastic-accent-start), var(--vantastic-accent-end));
    margin: 0.5rem auto 0; /* Centra la línea */
    border-radius: 2px;
    animation: expandLine-b-lh7442fc0h 3s forwards; /* Animación de expansión */
    animation-delay: 0.5s;
}

@keyframes expandLine-b-lh7442fc0h {
    to {
        width: 60%; /* Se expande al 60% del ancho del título */
    }
}

/* Media Queries para responsividad (ajusta si es necesario) */
@media (max-width: 768px) {
    .vantastic-title[b-lh7442fc0h] {
        font-size: 2rem;
    }

        .vantastic-title .qr-icon[b-lh7442fc0h] {
            font-size: 2rem;
        }

        .vantastic-title .magic-icon[b-lh7442fc0h] {
            font-size: 1.2rem;
        }

        .vantastic-title .icon-wrapper[b-lh7442fc0h] {
            margin-right: 10px;
            width: 2rem;
            height: 2rem;
        }
}
.text-accent[b-lh7442fc0h] {
    color: var(--primary-accent);
}

.topbar[b-lh7442fc0h] {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 0.75rem 2rem;
}

.company-name[b-lh7442fc0h] {
    color: var(--text-dark);
    font-weight: 700;
    font-size: 1.5rem;
}

.topbar-center[b-lh7442fc0h] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.category-trigger[b-lh7442fc0h] {
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
    font-weight: 500;
}

    .category-trigger:hover[b-lh7442fc0h] {
        background-color: #f1f3f5;
    }

.search-box .form-control[b-lh7442fc0h] {
    min-width: 300px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .search-box .form-control:focus[b-lh7442fc0h] {
        border-color: var(--primary-accent);
        box-shadow: 0 0 0 2px rgba(255, 111, 97, 0.25);
    }

/* FIX: Asegurar fondo sólido para el panel de categorías */
.category-panel-desktop[b-lh7442fc0h] {
    position: absolute;
    margin-top:25px;
    top: 100%;
    left: 0;
    width: 800px;
    background-color: #ffffff; /* Fondo blanco sólido explícito */
    border: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1050;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

    .category-panel-desktop.show[b-lh7442fc0h] {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    .category-panel-desktop .category-item[b-lh7442fc0h] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        cursor: pointer;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }

        .category-panel-desktop .category-item:hover[b-lh7442fc0h], .category-panel-desktop .category-item.active[b-lh7442fc0h] {
            background-color: #e9ecef;
            font-weight: 400;
        }

        .category-panel-desktop .category-item i[b-lh7442fc0h] {
            color: var(--primary-accent);
            width: 20px;
        }

.mobile-category-overlay[b-lh7442fc0h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1060;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

    .mobile-category-overlay.show[b-lh7442fc0h] {
        opacity: 1;
        visibility: visible;
    }

.mobile-category-panel[b-lh7442fc0h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-category-overlay.show .mobile-category-panel[b-lh7442fc0h] {
    transform: translateX(0);
}

.mobile-category-panel .panel-header[b-lh7442fc0h] {
    padding: 1rem;
    font-size: 1rem;
    font-weight: 400;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-category-panel .panel-content[b-lh7442fc0h] {
    flex-grow: 1;
    overflow-y: auto;
}

.mobile-category-panel .mobile-category-item[b-lh7442fc0h] {
    padding: 1rem;
    border-bottom: 1px solid #f1f3f5;
    cursor: pointer;
}

    .mobile-category-panel .mobile-category-item:hover[b-lh7442fc0h] {
        background-color: #f8f9fa;
    }
    /**/

/* Product Card Enhancements */
.product-card[b-lh7442fc0h] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    position: relative; /* Needed for absolute positioning of discount badge and tooltip */
}

    .product-card:hover[b-lh7442fc0h] {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.product-image-container[b-lh7442fc0h] {
    background-color: #f8f8f8; /* Light background for images */
    height: 180px; /* Fixed height for image area, adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ensure image doesn't overflow */
}

    .product-image-container img[b-lh7442fc0h] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Ensures image fits without cropping */
    }
    /**/
/* FIX: Añadir cursor: pointer para la tarjeta de producto */
/*.product-card {
    background-color: var(--card-bg);
    border: 1px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;*/ /* <--- AQUÍ LA CORRECCIÓN */
/*}

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-color: var(--primary-accent);
    }

.product-image-container {
    aspect-ratio: 1 / 1;
    background-color: #f1f3f5;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}*/

.product-card .card-body[b-lh7442fc0h] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/**/
.product-title[b-lh7442fc0h] {
    font-size: 1rem; /* Adjust title size */
    font-weight: 600;
    margin-bottom: 0.5rem;
    height: 2.5rem; /* Fixed height to prevent layout shifts */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
}

.product-price[b-lh7442fc0h] {
    font-size: 1rem;
    font-weight: bold;
    color: #007bff; /* Primary color for price */
}

.original-price[b-lh7442fc0h] {
    font-size: 0.9rem;
    color: #6c757d; /* Muted color for original price */
}

.product-meta[b-lh7442fc0h] {
    border-top: 1px dashed #e9ecef; /* Subtle separator */
    border-bottom: 1px dashed #e9ecef; /* Subtle separator */
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

    .product-meta > div[b-lh7442fc0h] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

/* Tooltip button style (adjust as needed) */
.product-card-tooltip[b-lh7442fc0h] {
    position: absolute;
    bottom: 0.5rem; /* Adjust position */
    right: 0.5rem; /* Adjust position */
    font-size: 1.1rem;
    cursor: help;
    z-index: 2; /* Ensure it's above other elements */
    color: #6c757d; /* Muted color */
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

    .product-card-tooltip:hover[b-lh7442fc0h] {
        color: #007bff; /* Highlight on hover */
    }
/**/
/*.product-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 45px;
}

.product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-accent);
    margin-top: auto;
    padding-top: 0.5rem;
}

    .product-price .original-price {
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--text-muted-light);
    }*/
.discount-badge[b-lh7442fc0h] {
    background-color: #dc3545; /* Bootstrap danger color */
    color: white;
    padding: 0.3em 0.6em;
    border-radius: 5px;
    font-size: 0.75rem;
    z-index: 1; /* Ensure badge is above image */
}
/*.discount-badge {
    font-weight: 600;
    font-size: 0.75rem;
    background-color: var(--primary-accent) !important;
}*/

.rating[b-lh7442fc0h] {
    font-size: 0.8rem;
}

/* --- ESTILOS PARA EL POPUP DE PRODUCTO --- */
.popup-overlay[b-lh7442fc0h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1070;
    opacity: 0;    
    animation: fadeIn-b-lh7442fc0h 0.3s forwards;
    
}


.popup-dialog[b-lh7442fc0h] {
    position: fixed;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 1.5rem;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: scale(0.95);
    animation: scaleIn-b-lh7442fc0h 0.3s forwards;
}




.popup-close-btn[b-lh7442fc0h] {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.popup-dialog img[b-lh7442fc0h] {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 10px;
    background-color: #f8f9fa;
}

.popup-dialog .product-desc[b-lh7442fc0h] {
    font-size: 0.95rem;
    color: var(--text-muted-light);
    line-height: 1.6;
}

@keyframes fadeIn-b-lh7442fc0h {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn-b-lh7442fc0h {
    from {
        transform: scale(0.95);
    }

    to {
        transform: scale(1);
    }
}
.product-popup-image[b-lh7442fc0h] {
    width: 100%; /* Ensures it fills the column width */
    height: 100%; /* Or a fixed height you prefer */
    object-fit:cover; /* OR cover */
    display: block; /* Removes any extra space below the image */
    max-height:400px;
}

/* Optional: Add a max-height if you want it responsive but not too tall */
 @media (max-width: 767px) {
    .product-popup-image[b-lh7442fc0h] {
        height: 250px; // Shorter on mobile
    }
}

.category-list-container[b-lh7442fc0h] {
    max-height: 500px; /* Adjust this value as needed. E.g., 400px, 60vh, etc. */
    overflow-y: auto; /* This creates the vertical scrollbar if content overflows */
    overflow-x: hidden; /* Prevents horizontal scrollbar */
    padding-right: 15px; /* Add some padding to prevent content from touching the scrollbar */    
}

    /* Optional: Style the scrollbar for better aesthetics (Webkit browsers like Chrome/Safari) */
    .category-list-container[b-lh7442fc0h]::-webkit-scrollbar {
        width: 8px; /* Width of the scrollbar */
    }

    .category-list-container[b-lh7442fc0h]::-webkit-scrollbar-track {
        background: #f1f1f1; /* Color of the scrollbar track */
        border-radius: 10px;
    }

    .category-list-container[b-lh7442fc0h]::-webkit-scrollbar-thumb {
        background: #888; /* Color of the scrollbar thumb */
        border-radius: 10px;
    }

        .category-list-container[b-lh7442fc0h]::-webkit-scrollbar-thumb:hover {
            background: #555; /* Color when hovering over the scrollbar thumb */
        }

.my-wide-section-container[b-lh7442fc0h] {
    max-width: 1400px !important; /* Temporarily add !important */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Optional: Make it fluid on smaller screens so it doesn't get cut off */
@media (max-width: 1400px) { /* Use the same value as max-width above */
    .my-wide-section-container[b-lh7442fc0h] {
        max-width: 100%; /* Allows it to go full width on screens smaller than 1400px */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
.product-dialog-image[b-lh7442fc0h] {
    width: 100%;
    max-width: 350px; /* Fixed max width */
    height: 350px; /* Fixed height */
    object-fit: contain; /* Ensure image fits */
    display: block;
    margin: 0 auto; /* Center within its column */
    border: 1px solid #dee2e6; /* Light border */
    border-radius: 8px; /* Rounded corners */
    background-color: #f8f9fa; /* Placeholder background */
}
.upload-image-btn[b-lh7442fc0h] {
    /* Syncfusion's e-btn, e-primary already provide good styling */
    width: 100%; /* Make button fill its column on smaller screens */
    max-width: 350px; /* Limit button width on larger screens */
    margin-top: 1rem; /* Space from image */
}

/* --- Product Info Column --- */
.product-info-col[b-lh7442fc0h] {
    padding-left: 1.5rem; /* Add some padding if needed */
    padding-right: 1.5rem;
}

.product-dialog-title[b-lh7442fc0h] {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #343a40;
}

.product-dialog-desc[b-lh7442fc0h] {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.current-price-display[b-lh7442fc0h] {
    color: #007bff; /* Accent color for current price */
    font-size: 2.2rem;
}

.original-price-display[b-lh7442fc0h] {
    color: #6c757d;
    font-size: 1.2rem;
}

.add-to-cart-btn[b-lh7442fc0h] {
    width: 100%;
    font-size: 1.2rem;
    padding: 0.75rem 1.25rem;
}

/* --- Syncfusion Input Overrides --- */
/* Ensure labels are properly aligned for form-group */
.form-group label[b-lh7442fc0h] {
    display: block; /* Make label take full width */
    margin-bottom: 0.5rem; /* Space below label */
    font-weight: 500;
    color: #495057;
}
/* --- Responsive Adjustments (Media Queries) --- */
@media (max-width: 767.98px) {
    /* Adjust main dialog size for smaller screens */
    .e-dialog.product-edit-dialog[b-lh7442fc0h] {
        width: 95% !important; /* Make it take more width on small screens */
        max-width: 95% !important; /* Override max-width */
    }

    /* Product image and info columns stack on mobile */
    .product-details-row[b-lh7442fc0h] {
        flex-direction: column; /* Stack image and info vertically */
        align-items: center; /* Center items when stacked */
    }

    .product-image-col[b-lh7442fc0h] {
        margin-bottom: 1.5rem; /* Space below image section */
    }

    .product-info-col[b-lh7442fc0h] {
        padding-left: 0; /* Remove horizontal padding when stacked */
        padding-right: 0;
    }

    .product-dialog-image[b-lh7442fc0h] {
        max-width: 180px; /* Slightly smaller image on mobile */
        height: 180px;
    }

    .upload-image-btn[b-lh7442fc0h] {
        max-width: 180px; /* Match image width */
    }

    .e-dialog.product-edit-dialog .e-dlg-header-content[b-lh7442fc0h],
    .e-dialog.product-edit-dialog .e-dlg-content[b-lh7442fc0h],
    .e-dialog.product-edit-dialog .e-footer-content[b-lh7442fc0h] {
        padding: 1rem; /* Reduce padding on small screens */
    }

    .e-dialog.product-edit-dialog .dialog-header-title[b-lh7442fc0h] {
        font-size: 1.25rem; /* Smaller header font on mobile */
    }

    .e-dialog.product-edit-dialog .e-dlg-closeicon[b-lh7442fc0h] {
        font-size: 1.25rem;
        right: 10px;
        top: 10px;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Common/VantasticRepositoryPage.razor.rz.scp.css */
/* 📂 Contenedor principal */
.declaraciones-container[b-otubhvq0ub] {
    font-family: "Segoe UI", sans-serif;
    color: #333;
}

/* 🟦 TreeView */
.custom-treeview[b-otubhvq0ub] {
    border: none !important;    
    min-width: 300px;
    font-size: 0.9rem;
}

    .custom-treeview .e-list-item[b-otubhvq0ub] {
        padding: 4px 8px !important;
        border-radius: 6px;
    }

        .custom-treeview .e-list-item:hover[b-otubhvq0ub] {
            background-color: #f0f4ff;
            cursor: pointer;
        }

    .custom-treeview .e-active[b-otubhvq0ub] {
        background-color: #0078d7 !important;
        color: white !important;
    }

/* 🟨 Archivos */
.file-link[b-otubhvq0ub] {
    text-decoration: none;
    color: #0078d7;
}

    .file-link:hover[b-otubhvq0ub] {
        text-decoration: underline;
    }

/* 📑 Visor XML con estilo */
.xml-viewer[b-otubhvq0ub] {
    background-color: #1e1e1e;
    color: #dcdcdc;
    border-radius: 8px;
    padding: 12px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85rem;
    max-height: 700px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.4;
    border: 1px solid #444;
}

    /* 🎨 Opcional: coloreado simple */
    .xml-viewer .tag[b-otubhvq0ub] {
        color: #569cd6;
    }

    .xml-viewer .attr[b-otubhvq0ub] {
        color: #9cdcfe;
    }

    .xml-viewer .value[b-otubhvq0ub] {
        color: #d69d85;
    }

    .xml-viewer .comment[b-otubhvq0ub] {
        color: #6a9955;
    }

/* 🎨 Tarjetas */
.treeview-card[b-otubhvq0ub], .info-card[b-otubhvq0ub], .viewer-card[b-otubhvq0ub] {
    background-color: #fff;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Compras/AsistenteRegistroCompraPage.razor.rz.scp.css */
body[b-h8i1wnja6z] {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f4f4f4;
    padding: 20px;
}

.container[b-h8i1wnja6z] {
    max-width: 1100px;
    margin: auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px #ccc;
    border-radius: 10px;
}

h2[b-h8i1wnja6z] {
    color: #444;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}

table[b-h8i1wnja6z] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

th[b-h8i1wnja6z], td[b-h8i1wnja6z] {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

th[b-h8i1wnja6z] {
    background: #007bff;
    color: white;
}

.highlight[b-h8i1wnja6z] {
    background: #f1f1f1;
}

.grid[b-h8i1wnja6z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

media(max - width: 768px)[b-h8i1wnja6z] {
    .grid

{
    grid-template-columns: 1fr;
}

}

/* _content/Vantastic.Mono.Web.Blazor/Pages/Compras/FacturaMercaderiaListPage.razor.rz.scp.css */
.grid-container[b-h5azf9shmb] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 8rem);
}
.form-row[b-h5azf9shmb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-h5azf9shmb] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-h5azf9shmb] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-h5azf9shmb] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-h5azf9shmb] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-h5azf9shmb],
    .custom-button[b-h5azf9shmb] {
        width: 100%;
    }
}

/* _content/Vantastic.Mono.Web.Blazor/Pages/Compras/FacturaMercaderiaPage.razor.rz.scp.css */
.grid-container[b-5rqwe48w4x] {
    overflow-y: hidden;
    margin-top: 0px;
}

.custom-container[b-5rqwe48w4x] {
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;*/ /* Altura completa de la ventana */
    margin: 0px;
    padding: 10px;
}

.page-header[b-5rqwe48w4x] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-5rqwe48w4x] {
        width: 100%;
    }

    .page-header .page-header-title[b-5rqwe48w4x] {
        display: block;
    }

    .page-header h4[b-5rqwe48w4x], .page-header .h4[b-5rqwe48w4x] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-5rqwe48w4x] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.card[b-5rqwe48w4x] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f, 0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}

.heading-style[b-5rqwe48w4x] {
    background-color: #0000000f;
    border-inline-start: 2px solid #b6ff00;
    border-radius: 3px;
    padding: 6px;
    padding-inline-start: 8px;
    margin-bottom: 14px;
}

    .heading-style h3[b-5rqwe48w4x] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 0;
    }

.total-order[b-5rqwe48w4x] {
    max-width: 430px;
    width: 100%;
    margin: 10px 0 30px auto;
}

    .total-order ul[b-5rqwe48w4x] {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: baseline;
    }

p[b-5rqwe48w4x], ul:not(.list-unstyled)[b-5rqwe48w4x], ol[b-5rqwe48w4x] {
    line-height: 22px;
}

.total-order ul li:first-child[b-5rqwe48w4x] {
    border-top: 1px solid #00000014;
}

.total-order ul li[b-5rqwe48w4x] {
    border: 1px solid #00000014;
    border-top: 0;
    display: flex;
}

    .total-order ul li h4[b-5rqwe48w4x] {
        width: 50%;
        color: var(--colorTextLight);
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border-right: 1px solid #00000014;
        background: var(--colorSurface);
        margin-bottom: 0;
    }

h4[b-5rqwe48w4x] {
    font-size: 17px;
}

h1[b-5rqwe48w4x], h2[b-5rqwe48w4x], h3[b-5rqwe48w4x], h4[b-5rqwe48w4x], h5[b-5rqwe48w4x], h6[b-5rqwe48w4x] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.total-order ul li h5[b-5rqwe48w4x] {
    color: var(--colorTextPrimary);
    font-size: 14px;
    padding: 10px;
    font-weight: 700;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

h1[b-5rqwe48w4x], h2[b-5rqwe48w4x], h3[b-5rqwe48w4x], h4[b-5rqwe48w4x], h5[b-5rqwe48w4x], h6[b-5rqwe48w4x] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.flex-container[b-5rqwe48w4x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-5rqwe48w4x] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-5rqwe48w4x] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-5rqwe48w4x] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-5rqwe48w4x], .textbox-wrapper[b-5rqwe48w4x] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}

.loading-overlay[b-5rqwe48w4x] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-5rqwe48w4x] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-5rqwe48w4x 1s linear infinite;
}

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

fieldset[b-5rqwe48w4x] {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
}

legend[b-5rqwe48w4x] {
    font-size: 1rem;
    font-weight: 600;
    padding: 0 8px;
}

/* Mobile-first approach: hide text labels by default */
.responsive-button-group .btn-label[b-5rqwe48w4x] {
    display: none;
}

/* Show only icons in small screens for the main toolbar buttons */
.responsive-button-group .e-btn .fas[b-5rqwe48w4x] {
    margin-right: 0 !important; /* Remove any default margin for icons */
}

/* Styles for mobile/tablet floating dropdown button */
@media (max-width: 992px) {
    .mobile-dropdown-fixed[b-5rqwe48w4x] {
        position: relative;
        /* bottom: 20px;
        right: 20px;*/
        z-index: 9999;
        background-color: transparent;
        border-radius: 50%;
        padding: 12px;
        /* box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        animation: pulse 1.4s infinite;*/
    }

        .mobile-dropdown-fixed .e-btn[b-5rqwe48w4x] {
            border-radius: 50%;
            padding: 14px;
        }

    @keyframes pulse-b-5rqwe48w4x {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

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

    /* Hide the regular button group on small screens */
    .responsive-button-group[b-5rqwe48w4x] {
        display: none;
    }

    /* Ensure dropdown popup has a decent width on mobile */
    .mobile-dropdown .e-dropdown-popup ul[b-5rqwe48w4x] {
        min-width: 180px;
    }

    /* Show the icon-only group on small screens */
    .responsive-icon-group[b-5rqwe48w4x] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: nowrap;
    }
}

/* Styles for desktop screens (min-width: 993px for d-lg-block) */
@media (min-width: 993px) {
    .mobile-dropdown-fixed[b-5rqwe48w4x] {
        display: none; /* Hide the floating dropdown on large screens */
    }

    .responsive-button-group[b-5rqwe48w4x] {
        display: flex; /* Show the full button group on large screens */
        gap: 0.5rem;
        align-items: center;
        flex-wrap: nowrap;
    }

        .responsive-button-group .btn-label[b-5rqwe48w4x] {
            display: inline; /* Show text labels on large screens */
            margin-left: 5px; /* Add margin next to icon */
        }

    .responsive-icon-group[b-5rqwe48w4x] {
        display: none; /* Hide the icon-only group on large screens */
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Compras/OrdenCompraListPage.razor.rz.scp.css */
.grid-container[b-mdto22hys4] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 8rem);
}
.form-row[b-mdto22hys4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-mdto22hys4] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-mdto22hys4] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-mdto22hys4] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-mdto22hys4] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-mdto22hys4],
    .custom-button[b-mdto22hys4] {
        width: 100%;
    }
}

/* _content/Vantastic.Mono.Web.Blazor/Pages/Compras/OrdenCompraPage.razor.rz.scp.css */
.grid-container[b-yn3ebs10b9] {
    overflow-y:hidden;
    margin-top: 0px;
   
}
.custom-container[b-yn3ebs10b9] {
    
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;*/ /* Altura completa de la ventana */
                     margin:0px;
padding:10px;
}
.page-header[b-yn3ebs10b9] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}
    .page-header .page-block[b-yn3ebs10b9] {
        width: 100%;
    }
    .page-header .page-header-title[b-yn3ebs10b9] {
        display: block;
    }
    .page-header h4[b-yn3ebs10b9], .page-header .h4[b-yn3ebs10b9] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }
    .page-header .breadcrumb[b-yn3ebs10b9] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.card[b-yn3ebs10b9] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f, 0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}
.heading-style[b-yn3ebs10b9] {
    background-color: #0000000f;
    border-inline-start: 2px solid #b6ff00;
    border-radius: 3px;
    padding: 6px;
    padding-inline-start: 8px;
    margin-bottom: 14px;
}
.heading-style h3[b-yn3ebs10b9] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.total-order[b-yn3ebs10b9] {
    max-width: 430px;
    width: 100%;
    margin: 10px 0 30px auto;
}
    .total-order ul[b-yn3ebs10b9] {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: baseline;
    }

p[b-yn3ebs10b9], ul:not(.list-unstyled)[b-yn3ebs10b9], ol[b-yn3ebs10b9] {
    line-height: 22px;
}
.total-order ul li:first-child[b-yn3ebs10b9] {
    border-top: 1px solid #00000014;
}

.total-order ul li[b-yn3ebs10b9] {
    border: 1px solid #00000014;
    border-top: 0;
    display: flex;
}
    .total-order ul li h4[b-yn3ebs10b9] {
        width: 50%;
        color: var(--colorTextLight);
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border-right: 1px solid #00000014;
        background: var(--colorSurface);
        margin-bottom: 0;
    }

h4[b-yn3ebs10b9] {
    font-size: 17px;
}

h1[b-yn3ebs10b9], h2[b-yn3ebs10b9], h3[b-yn3ebs10b9], h4[b-yn3ebs10b9], h5[b-yn3ebs10b9], h6[b-yn3ebs10b9] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}
.total-order ul li h5[b-yn3ebs10b9] {
    color: var(--colorTextPrimary);
    font-size: 14px;
    padding: 10px;
    font-weight: 700;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

h1[b-yn3ebs10b9], h2[b-yn3ebs10b9], h3[b-yn3ebs10b9], h4[b-yn3ebs10b9], h5[b-yn3ebs10b9], h6[b-yn3ebs10b9] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.flex-container[b-yn3ebs10b9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-yn3ebs10b9] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-yn3ebs10b9] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-yn3ebs10b9] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-yn3ebs10b9], .textbox-wrapper[b-yn3ebs10b9] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}
.loading-overlay[b-yn3ebs10b9] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-yn3ebs10b9] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-yn3ebs10b9 1s linear infinite;
}

@keyframes spin-b-yn3ebs10b9 {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Exchange/ExcTransaccionPage.razor.rz.scp.css */



/* _content/Vantastic.Mono.Web.Blazor/Pages/Herramientas/DashboardBIPage.razor.rz.scp.css */

/* _content/Vantastic.Mono.Web.Blazor/Pages/Herramientas/HerramientasMainPage.razor.rz.scp.css */

/* _content/Vantastic.Mono.Web.Blazor/Pages/Herramientas/InventarioFisicoPage.razor.rz.scp.css */

/* Contenedor principal */
/*.contenedor-principal1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;
}*/

/* Título principal */
/*.titulo {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.busqueda-contenedor {
    max-width: 600px;
    margin: 40px auto;
    padding: 25px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.titulo-busqueda {
    text-align: center;
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 600;
}

.grupo-boton,
.grupo-campo,
.grupo-botones {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}*/

/* Input */
/*.input-busqueda {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-width: 250px;
    max-width: 100%;
}*/

/* Botones */
/*.btn-buscar,
.btn-retornar,
.btn-scan {
    padding: 10px 20px;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    flex: 1;
    min-width: 120px;
    max-width: 150px;
    transition: background-color 0.3s ease;
}

.btn-buscar {
    background-color: #007bff;
}

.btn-retornar {
    background-color: #28a745;
}

.btn-scan {
    background-color: #6c757d;
}

.btn-buscar:hover {
    background-color: #0056b3;
}

.btn-retornar:hover {
    background-color: #1e7e34;
}

.btn-scan:hover {
    background-color: #5a6268;
}*/

/* Estilos para la sección de ajuste */

/*.ajuste-seccion {
    width: 100%;
    max-width: 500px;*/ /* Ancho máximo para mantenerlo centrado */
    /*margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.seccion-ajuste {
    margin-bottom: 5px;
}

    .seccion-ajuste h3 {
        font-size: 18px;
        color: #333;
        margin-bottom: 10px;
    }

.input-stock {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    max-width: 200px;*/ /* Limitamos el ancho máximo para no ser demasiado grandes */
    /*margin-bottom: 15px;
}

.btn-evaluar {
    padding: 12px 20px;
    font-size: 16px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

    .btn-evaluar:hover {
        background-color: #0056b3;
    }*/
/* Estilos para el ícono de información */
/*.info-icon {
    font-size: 20px;*/ /* Tamaño del ícono */
    /*color: #007BFF;*/ /* Color del ícono, ajustable */
    /*margin-left: 10px;*/ /* Espaciado entre el texto y el ícono */
    /*vertical-align: middle;*/ /* Alineación vertical */
    /*cursor: pointer;
    transition: color 0.3s ease;
}

    .info-icon:hover {
        color: #0056b3;*/ /* Color cuando se pasa el mouse por encima */
    /*}*/
/* Resultado de ajuste */

/*.resultado-ajuste {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

    .resultado-ajuste p {
        font-size: 16px;
        margin: 0;
        text-align: center;
    }

.input-motivo {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 100%;
    max-width: 500px;
}*/

/*.input-motivo {
    width: 100%;
    max-width: 250px;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}*/

    /*.input-motivo:focus {
        border-color: #007bff;
        outline: none;
    }

.btn-procesar {
    background-color: #ffc107;
    color: #333;
}

    .btn-procesar:hover {
        background-color: #e0a800;
    }*/

/* Responsividad para dispositivos grandes */
/*@media (min-width: 768px) {
    .busqueda-seccion {
        flex-direction: row;
        justify-content: space-between;
    }

    .input-busqueda {
        width: 60%;
    }

    .btn-buscar, .btn-evaluar, .btn-scan {
        width: 120px;
    }

    .ajuste-seccion h3 {
        font-size: 20px;
    }
}*/

/* Loading spinner */
/*.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}*/

/* Estilos para la tabla */
/*.tabla-producto {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-collapse: collapse;
    margin-top: 20px;
}

    .tabla-producto td {
        padding: 8px;
        font-size: 14px;
        border-bottom: 1px solid #ddd;
        vertical-align: middle;
    }

        .tabla-producto td b {
            font-weight: bold;
        }

.alinear-derecha {
    text-align: right;
}

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

    100% {
        transform: rotate(360deg);
    }
}*/
/* === Estilos aislados para Toma de Inventario Físico === */

/* Contenedor principal */
.contenedor-principal1[b-0blvziszy9] {
 
    border: 3px solid groove !important;

    max-width: 1000px;
    margin: 2rem auto;
    padding: 1.5rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-family: "Segoe UI", Roboto, sans-serif;
}

/* Título */
.titulo-busqueda[b-0blvziszy9] {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #333;
}

/* Grupo de botones */
.grupo-boton[b-0blvziszy9] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.button-wrapper .e-btn[b-0blvziszy9] {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    margin: 0 0.3rem;
    font-weight: 500;
}

/* Campos de selección */
.row[b-0blvziszy9] {
    margin-bottom: 1rem;
}

.sf-dropdownlist[b-0blvziszy9] {
    width: 100%;
}

/* Campo de búsqueda */
.grupo-campo[b-0blvziszy9] {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.input-busqueda[b-0blvziszy9] {
    width: 100%;
    max-width: 400px;
    padding: 0.6rem 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
}

/* Botones principales */
.grupo-botones[b-0blvziszy9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

    .grupo-botones button[b-0blvziszy9] {
        padding: 0.7rem 1.3rem;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        transition: background 0.3s ease;
    }

.btn-buscar[b-0blvziszy9] {
    background: #0078d7;
    color: white;
}

    .btn-buscar:hover[b-0blvziszy9] {
        background: #005fa3;
    }

.btn-retornar[b-0blvziszy9] {
    background: #e0e0e0;
}

    .btn-retornar:hover[b-0blvziszy9] {
        background: #c6c6c6;
    }

.btn-scan[b-0blvziszy9] {
    background: #28a745;
    color: white;
}

    .btn-scan:hover[b-0blvziszy9] {
        background: #1f7a33;
    }

/* Tabla producto */
.producto-info[b-0blvziszy9] {
    margin-top: 1.5rem;
    overflow-x: auto;
}

.tabla-producto[b-0blvziszy9] {
    width: 100%;
    border-collapse: collapse;
    background: #fafafa;
    border-radius: 10px;
    overflow: hidden;
}

    .tabla-producto td[b-0blvziszy9] {
        padding: 0.7rem 1rem;
        border-bottom: 1px solid #ddd;
    }

    .tabla-producto tr:last-child td[b-0blvziszy9] {
        border-bottom: none;
    }

.alinear-derecha[b-0blvziszy9] {
    text-align: right;
    font-weight: 600;
    color: #444;
}

/* Sección de ajuste */
.ajuste-seccion[b-0blvziszy9] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 1.2rem;
    margin-top: 2rem;
}

.seccion-ajuste[b-0blvziszy9] {
    padding: 1rem;
    border-radius: 10px;
    background: #f7f9fc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .seccion-ajuste h3[b-0blvziszy9] {
        font-size: 1.1rem;
        margin-bottom: 0.7rem;
        color: #333;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

.input-stock[b-0blvziszy9] {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.btn-evaluar[b-0blvziszy9] {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 1rem;
    background: #ff9800;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

    .btn-evaluar:hover[b-0blvziszy9] {
        background: #e68900;
    }

/* Resultado ajuste */
.resultado-ajuste[b-0blvziszy9] {
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 10px;
    background: #eef6ff;
    border-left: 5px solid #0078d7;
}

    .resultado-ajuste p[b-0blvziszy9] {
        margin: 0.5rem 0;
    }

.input-motivo[b-0blvziszy9] {
    width: 100%;
    padding: 0.6rem 1rem;
    margin: 1rem 0;
    border: 1px solid #bbb;
    border-radius: 8px;
}

/* Scanner overlay */
.scanner-overlay[b-0blvziszy9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
}

.scanner-box[b-0blvziszy9] {
    position: relative;
    width: 300px;
    height: 300px;
    border: 3px solid #fff;
    border-radius: 12px;
    overflow: hidden;
}

.laser-line[b-0blvziszy9] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: red;
    animation: laserScan-b-0blvziszy9 2s infinite;
}

@keyframes laserScan-b-0blvziszy9 {
    0% {
        top: 0;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 0;
    }
}

.loader[b-0blvziszy9] {
    margin-top: 1rem;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-0blvziszy9 1s linear infinite;
}

@keyframes spin-b-0blvziszy9 {
    100% {
        transform: rotate(360deg);
    }
}

.btn-cerrar-scanner[b-0blvziszy9] {
    margin-top: 1.5rem;
    background: #e53935;
    color: white;
    border: none;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

    .btn-cerrar-scanner:hover[b-0blvziszy9] {
        background: #b71c1c;
    }

/* Toast */
.toast-container[b-0blvziszy9] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
}

.toast-message[b-0blvziszy9] {
    padding: 0.9rem 1.3rem;
    border-radius: 8px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    animation: fadeInUp-b-0blvziszy9 0.4s ease;
}

    .toast-message.success[b-0blvziszy9] {
        background: #28a745;
    }

    .toast-message.error[b-0blvziszy9] {
        background: #dc3545;
    }

    .toast-message.info[b-0blvziszy9] {
        background: #0078d7;
    }

@keyframes fadeInUp-b-0blvziszy9 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* _content/Vantastic.Mono.Web.Blazor/Pages/Index.razor.rz.scp.css */

/* Estilado de información centrada con iconos */
.info-section[b-fr63gmz4u3] {
    display: flex;
    justify-content: space-between;
    margin: 0 0;
    font-size: 14px;
}

/* Estilado de los títulos de información */
.info-title[b-fr63gmz4u3] {
    font-weight: bold;
    color: darkblue;
}

/* Descripción de datos */
.info-description[b-fr63gmz4u3] {
    font-weight: normal;
    color: darkslateblue;
    font-size: 12px;
    text-align: end;
}


/* Contenedor Principal */
.container[b-fr63gmz4u3] {
    padding: 10px;
    max-width:100%;
}

/* Contenedor Responsivo para las tarjetas */
.row[b-fr63gmz4u3] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Estilado para las tarjetas */
.card[b-fr63gmz4u3] {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    flex: 1 1 calc(25% - 20px);
    margin: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s ease;
}

    /* Efecto hover */
    .card:hover[b-fr63gmz4u3] {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }

/* Encabezado centrado */
.card-header[b-fr63gmz4u3] {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}



/* Responsividad para diferentes tamaños de pantalla */
@media (max-width: 768px) {
    .card[b-fr63gmz4u3] {
        flex: 1 1 100%;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .card[b-fr63gmz4u3] {
        flex: 1 1 calc(50% - 20px);
    }
}

/* --- Global Utilities --- */
.text-center[b-fr63gmz4u3] {
    text-align: center;
}

.mb-4[b-fr63gmz4u3] {
    margin-bottom: 1.5rem;
}
/* Margin bottom */
.mt-4[b-fr63gmz4u3] {
    margin-top: 1.5rem;
}
/* Margin top */
.py-4[b-fr63gmz4u3] {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
/* Padding Y-axis */
.px-4[b-fr63gmz4u3] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
/* Padding X-axis */
.flex-grow-1[b-fr63gmz4u3] {
    flex-grow: 1;
}
/* For main content to take available space */

/* --- Main Layout Grid --- */
.main-layout-grid[b-fr63gmz4u3] {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 20px; /* Spacing between main sections */
    flex-grow: 1; /* Allow the grid to take available vertical space */
}

/* For larger screens, create two columns for main content + sidebar */
@media (min-width: 992px) { /* Adjust breakpoint as needed for large screens */
    .main-layout-grid[b-fr63gmz4u3] {
        grid-template-columns: 3fr 1fr; /* Main content (3 parts) | Sidebar (1 part) */
    }
}


/* --- Section 1: Company Info & Configuration Boxes --- */
.company-info-header[b-fr63gmz4u3] {
    background-color: #ffffff; /* White background for this section */
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Softer, more modern shadow */
    margin-bottom: 30px; /* Space before next sections */
    display: flex;
    flex-direction: column; /* Stack logo/text vertically first */
    align-items: center;
    justify-content: center;
    text-align:center;
    position: relative; /* For alerts positioning */
}

    .company-info-header img[b-fr63gmz4u3] {
        max-width: 120px; /* Slightly smaller, more elegant logo */
        max-height: 120px;
        object-fit: contain;
        margin-bottom: 15px;
        border-radius: 20%; /* Make logo round if preferred */
        border: 1px solid #673AB7; /* Accent border */
        padding: 5px;
    }

    .company-info-header h3[b-fr63gmz4u3] {
        /*margin: 8px 0;
        font-weight: 700;*/ /* Bolder for prominence */
        /*color: #4A148C;*/ /* Deeper violet */
        /*font-size: 2.2em;*/ /* Larger title */
        /*letter-spacing: 0.5px;*/
        font-size: 3.5rem;
        margin-bottom: 10px;
        font-weight: 700;
    }
    .company-info-header h1 span[b-fr63gmz4u3] {
        color: #ffc107; /* Amarillo para resaltar el nombre */
        font-size: 3.5rem;
        margin-bottom: 10px;
        font-weight: 700;
    }
    .company-info-header p[b-fr63gmz4u3] {
        color: #ffc107; /* Amarillo para resaltar el nombre */
        font-size: 3.5rem;
        margin-bottom: 10px;
        font-weight: 700;
    }

/* --- MODIFIED: New Alerts Section below Company Info --- */
.alerts-section-container[b-fr63gmz4u3] {
    display: flex;
    flex-wrap: wrap; /* Allow alerts to wrap */
    justify-content: space-around; /* Distribute alerts evenly */
    gap: 15px; /* Spacing between alerts */
    margin: 10px 0 20px 0; /* Margin above and below this section */
    padding: 15px 20px;
    /*background-color:  purple;*/ /* Light yellow background for this alert section */
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.alert-item[b-fr63gmz4u3] {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 600;
    color: white; /* Usar variable CSS para el color del texto */
    background-color: var(--alert-bg-color, #f8f9fa); /* Usar variable CSS para el color de fondo */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada y suave */
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 1; /* Eliminar opacidad si el fondo ya es sólido */
    word-break: break-word; /* Asegura que el texto se ajuste */
    border: 1px solid var(--alert-border-color, #e0e0e0); /* Borde sutil, usará la variable */
    position: relative; /* Esencial para el efecto de pulso de borde */
    overflow: hidden; /* Oculta partes del pseudo-elemento fuera del borde */
    flex: 1; /* Permite que las alertas crezcan y ocupen espacio */
    min-width: 280px; /* Ancho mínimo antes de envolver */
    max-width: 48%; /* Permite 2 alertas por fila con un pequeño espacio */
    margin: 5px; /* Espacio alrededor de cada alerta */
    text-align: left; /* Alinea el texto a la izquierda */
    /* Restablecer animación de pulso de fondo, la moveremos al pseudo-elemento */
    animation:none;
}

    /* Pseudo-elemento para el efecto de pulso del borde */
    .alert-item[b-fr63gmz4u3]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 8px; /* Debe coincidir con el border-radius del elemento padre */
        border: 2px solid var(--alert-pulse-color, rgba(0, 123, 255, 0.7)); /* Color y grosor del pulso */
        pointer-events: none; /* Asegura que no interfiera con el clic */

        box-sizing: border-box; /* Asegura que el borde no aumente el tamaño total */
        animation: border-shake-pulse-b-fr63gmz4u3 2s infinite cubic-bezier(0. 4, 0, 0.6, 1);
        opacity: 0;
    }
@keyframes border-shake-pulse-b-fr63gmz4u3 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }

    15% {
        transform: translate(-1px, -1px) scale(1.005) rotate(0.5deg);
        opacity: 0.5;
    }

    30% {
        transform: translate(1px, 1px) scale(1.01) rotate(-0.5deg);
        opacity: 0.3;
    }

    45% {
        transform: translate(-1.5px, 0.5px) scale(1.007) rotate(0.2deg);
        opacity: 0.5;
    }

    60% {
        transform: translate(0.5px, -1.5px) scale(1.01) rotate(-0.3deg);
        opacity: 0.3;
    }

    75% {
        transform: translate(-1px, 1px) scale(1.005) rotate(0.1deg);
        opacity: 0.5;
    }

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

@keyframes pulse4-b-fr63gmz4u3 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}
@keyframes pulse3-b-fr63gmz4u3 {
    0% {
        text-shadow: 0 0 0 rgba(76, 175, 80, 0.7);
    }

    50% {
        text-shadow: 0 0 10px rgba(76, 175, 80, 1), 0 0 20px rgba(76, 175, 80, 0.8);
    }

    100% {
        text-shadow: 0 0 0 rgba(76, 175, 80, 0.7);
    }
}
    @keyframes border-vibrate-b-fr63gmz4u3 {
        0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }

    20% {
        transform: translate(-1px, 1px) scale(1.005);
        opacity: 0.5;
    }

    40% {
        transform: translate(1px, -1px) scale(1.01);
        opacity: 0.3;
    }

    60% {
        transform: translate(-1px, 1px) scale(1.005);
        opacity: 0.5;
    }

    80% {
        transform: translate(1px, -1px) scale(1);
        opacity: 0.7;
    }

    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
}
/* Definición de la animación de pulso de borde */
@keyframes border-pulse-b-fr63gmz4u3 {
    0% {
        transform: scale(0.98);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.02);
        opacity: 0.2;
    }

    100% {
        transform: scale(0.98);
        opacity: 0.7;
    }
}
/* If there is only one alert, make it span full width */
.alerts-section-container:has(> .alert-item:only-child) .alert-item[b-fr63gmz4u3] {
    max-width: 100%;
}


.alert-item i[b-fr63gmz4u3] {
    font-size: 1.4em; /* Slightly larger icon */
    margin-right: 12px;
    color: inherit; /* MODIFIED: Icon color will inherit from parent for better contrast */
}

.alert-item div[b-fr63gmz4u3] {
    flex-grow: 1; /* Allow text content to take remaining space */
}

.alert-item p[b-fr63gmz4u3] {
    margin: 0 0 4px 0; /* MODIFIED: Small margin below title */
    font-weight: bold; /* Make title bolder */
    color: inherit; /* MODIFIED: Inherit color from parent */
}

.alert-item small[b-fr63gmz4u3] {
    opacity: 0.9; /* Keep description slightly less opaque */
    color: inherit; /* MODIFIED: Inherit color from parent */
}



@keyframes pulse-b-fr63gmz4u3 {
    0% {
        width: 0;
        height: 0;
        opacity: 0.3;
    }

    70% {
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    100% {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}


.alert-item:hover[b-fr63gmz4u3] {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}


.alert-item[style*="background-color: #E53935"][b-fr63gmz4u3], /* Red */
.alert-item[style*="background-color: #C62828"][b-fr63gmz4u3], /* Darker Red */
.alert-item[style*="background-color: #B71C1C"][b-fr63gmz4u3], /* Even Darker Red */
.alert-item[style*="background-color: #1E88E5"][b-fr63gmz4u3], /* Blue */
.alert-item[style*="background-color: #673AB7"][b-fr63gmz4u3] /* Violet */ {
    color: #fff; /* White text for dark backgrounds */
}

.alert-item[style*="background-color: #FB8C00"][b-fr63gmz4u3], /* Orange */
.alert-item[style*="background-color: #FFEBEE"][b-fr63gmz4u3], /* Light Red */
.alert-item[style*="background-color: #FFF3E0"][b-fr63gmz4u3], /* Light Orange */
.alert-item[style*="background-color: #FFFDE7"][b-fr63gmz4u3] /* Light Yellow */ {
    color: #333; /* Dark text for light backgrounds */
}

        .main-modules-section[b-fr63gmz4u3] {
    padding: 20px 0;
}

    .main-modules-section h2[b-fr63gmz4u3] {
        text-align: center;
        color: #4A148C;
        font-size: 1.8em;
        margin-bottom: 30px;
        font-weight: 700;
    }

.main-modules-grid[b-fr63gmz4u3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    padding: 0 10px;
}

.module-tile[b-fr63gmz4u3] {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 5px solid var(--tile-color, #673AB7);
}

    .module-tile:hover[b-fr63gmz4u3] {
        transform: translateY(-8px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .module-tile .tile-icon[b-fr63gmz4u3] {
        font-size: 3.5em;
        margin-bottom: 15px;
        color: var(--tile-color, #673AB7);
        line-height: 1;
    }

    .module-tile .tile-content h3[b-fr63gmz4u3] {
        margin: 0 0 8px 0;
        font-size: 1.3em;
        font-weight: 600;
        color: #333;
    }

    .module-tile .tile-content p[b-fr63gmz4u3] {
        font-size: 0.9em;
        color: #666;
        margin: 0;
    }


.premium-modules-sidebar[b-fr63gmz4u3] {
    background-color: #fcfcfc;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 20px;
    position: sticky;
    top: 20px;
    align-self: start;
    margin-left: 0px;
    margin-right: 9px;
    margin-top: 30px;
    width: 100%;
    /*max-width: fit-content;*/
}


@media (max-width: 991px) {
    .premium-modules-sidebar[b-fr63gmz4u3] {
        position: static;
        margin-left: 0;
        margin-top: 30px;
        max-width: none;
    }
}


.premium-modules-sidebar h2[b-fr63gmz4u3] {
    color: #D32F2F;
    font-size: 1.6em;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 700;
    border-bottom: 2px solid #FFCDD2;
    padding-bottom: 10px;
}

.premium-module-item[b-fr63gmz4u3] {
    background-color: #FFF3E0;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 5px solid #FF9800;
    cursor: pointer;
}

    .premium-module-item:hover[b-fr63gmz4u3] {
        transform: translateX(5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .premium-module-item .premium-icon[b-fr63gmz4u3] {
        font-size: 2.5em;
        color: #FF9800;
        margin-right: 15px;
        flex-shrink: 0;
        line-height: 1;
    }

    .premium-module-item .premium-content h3[b-fr63gmz4u3] {
        margin: 0 0 5px 0;
        font-size: 1.15em;
        font-weight: 600;
        color: #333;
    }

    .premium-module-item .premium-content p[b-fr63gmz4u3] {
        font-size: 0.85em;
        color: #777;
        margin: 0;
        word-break: break-word;
    }

    .premium-module-item .premium-content small[b-fr63gmz4u3] {
        font-size: 0.75em;
        color: #999;
        display: block;
        margin-top: 5px;
    }


.page-alerts-section[b-fr63gmz4u3] {
    background-color: #FFEBEE;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin: 30px 0;
    text-align: center;
}

.page-alerts-section h3[b-fr63gmz4u3] {
    color: #C62828;
    font-size: 1.6em;
    margin-bottom: 20px;
    font-weight: 700;
}

.page-alerts-grid[b-fr63gmz4u3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.alert-item-page[b-fr63gmz4u3] {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 0.95em;
    font-weight: 500;
    color: #C62828;
    background-color: #FFEBEE;
    border: 1px solid #EF9A9A;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}
.alert-item-page i[b-fr63gmz4u3] {
    font-size: 1.5em;
    margin-right: 12px;
    flex-shrink: 0;
    color: #C62828;
}
.alert-item-page p[b-fr63gmz4u3] {
    margin: 0;
    flex-grow: 1;
}
.alert-item-page small[b-fr63gmz4u3] {
    display: block;
    font-size: 0.8em;
    color: #B71C1C;
    margin-top: 5px;
}


/* --- Loading Overlay --- */
.loading-overlay[b-fr63gmz4u3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner[b-fr63gmz4u3] {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #673AB7; /* Spin color */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin-b-fr63gmz4u3 1s linear infinite;
}

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

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


/* Botones de íconos */
.icon-btn[b-fr63gmz4u3] {
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: darkviolet;
    transition: transform 0.2s ease;
}

    /* Hover para íconos */
    .icon-btn:hover[b-fr63gmz4u3] {
        transform: scale(1.2);
    }

/* Grid */
.cards-grid-v1[b-fr63gmz4u3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin: 8px 0;
    align-items: stretch;
}

/* Card base */
.premium-module-item-v1[b-fr63gmz4u3] {
    background: #ffffff;
    border: 1px solid rgba(34,41,47,0.06);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(23,31,43,0.06);
    display: flex;
    gap: 14px;
    padding: 16px;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 92px;
}

    .premium-module-item-v1:focus[b-fr63gmz4u3] {
        outline: none;
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(15,23,42,0.12);
        border-color: rgba(0,105,217,0.12);
    }

    .premium-module-item-v1:hover[b-fr63gmz4u3] {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(15,23,42,0.12);
        border-color: rgba(0,105,217,0.14);
    }

/* Icono */
.premium-icon-v1[b-fr63gmz4u3] {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, rgba(0,105,217,0.08), rgba(0,105,217,0.02));
    color: #0069d9;
    box-shadow: inset 0 -6px 12px rgba(0,0,0,0.02);
}

/* Contenido */
.premium-content-v1 h3[b-fr63gmz4u3] {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    color: #21262b;
    letter-spacing: -0.2px;
}

.premium-content-v1 p[b-fr63gmz4u3] {
    margin: 0 0 8px 0;
    font-size: 0.92rem;
    color: #5b6b74;
}

.premium-content-v1 small.tooltip-info-v1[b-fr63gmz4u3] {
    color: #8b97a1;
    display: block;
    font-size: 0.78rem;
}

/* Variante admin */
.premium-module-item-v1.admin-v1 .premium-icon-v1[b-fr63gmz4u3] {
    background: linear-gradient(135deg, rgba(15,157,88,0.07), rgba(15,157,88,0.02));
    color: #0f9d58;
}

/* Disabled */
.premium-module-item-v1.disabled-v1[b-fr63gmz4u3],
.premium-module-item-v1.disabled-v1 *[b-fr63gmz4u3] {
    pointer-events: none;
}

.disabled-overlay-v1[b-fr63gmz4u3] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(2px);
}

    .disabled-overlay-v1 .lock-v1[b-fr63gmz4u3] {
        background: rgba(11,20,29,0.9);
        color: #fff;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 0.85rem;
        display: inline-flex;
        gap: 8px;
        align-items: center;
    }

/* Responsive */
@media (max-width:560px) {
    .premium-icon-v1[b-fr63gmz4u3] {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        font-size: 20px;
    }

    .premium-content-v1 h3[b-fr63gmz4u3] {
        font-size: 1rem;
    }

    .premium-content-v1 p[b-fr63gmz4u3] {
        font-size: 0.88rem;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/IndexMobile-App.razor.rz.scp.css */
.loading-overlay[b-un2m189il9] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-un2m189il9] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-un2m189il9 1s linear infinite;
}
@keyframes spin-b-un2m189il9 {
    to {
        transform: rotate(360deg);
    }
}
/*@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}


.icon-item.alert {
    animation: blink 1.5s infinite;
}*/
@keyframes pulse-b-un2m189il9 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

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

.icon-item.alert[b-un2m189il9] {
    animation: pulse-b-un2m189il9 1.5s infinite;
}

/*.info-box {
    background-color: whitesmoke;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: darkviolet;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

    .info-header span {
        text-align: center;
        flex-grow: 1;
    }

.icon-action {
    cursor: pointer;
    font-size: 18px;
    color: darkviolet;
    transition: transform 0.2s, color 0.2s;
}

    .icon-action:hover {
        color: darkorange;
        transform: scale(1.2);
    }

.info-content div {
    margin: 8px 0;
    font-size: 12px;
    color: #333;
}

.info-content a {
    color: darkviolet;
    text-decoration: none;
}

    .info-content a:hover {
        text-decoration: underline;
    }

@media (max-width: 768px) {
    .info-box {
        flex: 1 1 100%;
    }
}*/
/* Estilado de información centrada con iconos */
.info-section[b-un2m189il9] {
    display: flex;
    justify-content: space-between;
    margin: 0 0;
    font-size: 14px;
}

/* Estilado de los títulos de información */
.info-title[b-un2m189il9] {
    font-weight: bold;
    color: darkblue;
}

/* Descripción de datos */
.info-description[b-un2m189il9] {
    font-weight: normal;
    color: darkslateblue;
    font-size: 12px;
    text-align: end;
}

/* Botones de íconos */
.icon-btn[b-un2m189il9] {
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: darkviolet;
    transition: transform 0.2s ease;
}

    /* Hover para íconos */
    .icon-btn:hover[b-un2m189il9] {
        transform: scale(1.2);
    }
/* Contenedor Principal */
.container[b-un2m189il9] {
    padding: 10px;
}

/* Contenedor Responsivo para las tarjetas */
.row[b-un2m189il9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Estilado para las tarjetas */
.card[b-un2m189il9] {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    /*flex: 1 1 calc(33.333% - 20px);
    margin: 10px;*/

    flex: 1 1 calc(25% - 20px); /* Cambiar a 25% para cuatro cajas */
    margin: 10px;

    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s ease;
}

    /* Efecto hover */
    .card:hover[b-un2m189il9] {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }

/* Encabezado centrado */
.card-header[b-un2m189il9] {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}



/* Responsividad para diferentes tamaños de pantalla */
@media (max-width: 768px) {
    .card[b-un2m189il9] {
        flex: 1 1 100%;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .card[b-un2m189il9] {
        flex: 1 1 calc(50% - 20px);
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/IndexModulo.razor.rz.scp.css */
.loading-overlay[b-pms6desifa] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-pms6desifa] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-pms6desifa 1s linear infinite;
}
@keyframes spin-b-pms6desifa {
    to {
        transform: rotate(360deg);
    }
}
/*.selection-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px;
}

.selection-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;*/ /* Tamaño mediano */
    /*height: 250px;
    border: 2px solid #ddd;
    border-radius: 10px;
    text-align: center;
    background-color: #f9f9f9;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

    .selection-box:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

.selection-image {
    width: 100px;*/ /* Tamaño de la imagen */
    /*height: 100px;
    object-fit: contain;
    margin-bottom: 10px;
}

.selection-text {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .selection-box {
        width: 150px;*/ /* Ajustar tamaño en dispositivos pequeños */
        /*height: 200px;
    }

    .selection-image {
        width: 80px;
        height: 80px;
    }

    .selection-text {
        font-size: 14px;
    }
}*/
body[b-pms6desifa], html[b-pms6desifa] {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3; /* Fondo opcional */
}

.full-screen-container[b-pms6desifa] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    text-align: center;
}

.selection-title[b-pms6desifa] {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.selection-container[b-pms6desifa] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.selection-box[b-pms6desifa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 250px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background-color: #ffffff;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

    .selection-box:hover[b-pms6desifa] {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

.selection-image[b-pms6desifa] {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 10px;
}

.selection-text[b-pms6desifa] {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

@media (max-width: 768px) {
    .selection-box[b-pms6desifa] {
        width: 150px;
        height: 200px;
    }

    .selection-image[b-pms6desifa] {
        width: 80px;
        height: 80px;
    }

    .selection-text[b-pms6desifa] {
        font-size: 14px;
    }

    .selection-title[b-pms6desifa] {
        font-size: 20px;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/ExistenciasPage.razor.rz.scp.css */
.grid-container1[b-gy45zc8lwm] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
   
}
.grid-container[b-gy45zc8lwm] {
    
    /*overflow-y: auto;
    margin-top: 5px;
    
    width: calc(100vw - 6rem);
    height: calc(100vh - 20rem);*/
}

.form-row[b-gy45zc8lwm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-gy45zc8lwm] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-gy45zc8lwm] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-gy45zc8lwm] {
    flex-shrink: 0;
    width:30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-gy45zc8lwm] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-gy45zc8lwm],
    .custom-button[b-gy45zc8lwm] {
        width: 100%;
    }
}

.page-header[b-gy45zc8lwm] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-gy45zc8lwm] {
        width: 100%;
    }

    .page-header .page-header-title[b-gy45zc8lwm] {
        display: block;
    }

    .page-header h4[b-gy45zc8lwm], .page-header .h4[b-gy45zc8lwm] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-gy45zc8lwm] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.pager-container[b-gy45zc8lwm] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/InventarioInicialPage.razor.rz.scp.css */
.grid-container1[b-om3obl4k87] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
   
}
.grid-container[b-om3obl4k87] {
    
    /*overflow-y: auto;
    margin-top: 5px;
    
    width: calc(100vw - 6rem);
    height: calc(100vh - 20rem);*/
}

.form-row[b-om3obl4k87] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-om3obl4k87] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-om3obl4k87] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-om3obl4k87] {
    flex-shrink: 0;
    width:30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-om3obl4k87] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-om3obl4k87],
    .custom-button[b-om3obl4k87] {
        width: 100%;
    }
}

.page-header[b-om3obl4k87] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-om3obl4k87] {
        width: 100%;
    }

    .page-header .page-header-title[b-om3obl4k87] {
        display: block;
    }

    .page-header h4[b-om3obl4k87], .page-header .h4[b-om3obl4k87] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-om3obl4k87] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.pager-container[b-om3obl4k87] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/InventarioPeriodicoPage.razor.rz.scp.css */
.grid-container1[b-clyq575mc0] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
}

.grid-container[b-clyq575mc0] {
    /*overflow-y: auto;
    margin-top: 5px;
    
    width: calc(100vw - 6rem);
    height: calc(100vh - 20rem);*/
}

.form-row[b-clyq575mc0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-clyq575mc0] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-clyq575mc0] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-clyq575mc0] {
    flex-shrink: 0;
    width: 30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-clyq575mc0] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-clyq575mc0],
    .custom-button[b-clyq575mc0] {
        width: 100%;
    }
}

.page-header[b-clyq575mc0] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-clyq575mc0] {
        width: 100%;
    }

    .page-header .page-header-title[b-clyq575mc0] {
        display: block;
    }

    .page-header h4[b-clyq575mc0], .page-header .h4[b-clyq575mc0] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-clyq575mc0] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.pager-container[b-clyq575mc0] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/MantLotesPage.razor.rz.scp.css */
.grid-container[b-s8qym2h97s] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 14rem);
}

.form-row[b-s8qym2h97s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-s8qym2h97s] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-s8qym2h97s] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-s8qym2h97s] {
    flex-shrink: 0;
    width: 30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-s8qym2h97s] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-s8qym2h97s],
    .custom-button[b-s8qym2h97s] {
        width: 100%;
    }
}

.page-header[b-s8qym2h97s] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-s8qym2h97s] {
        width: 100%;
    }

    .page-header .page-header-title[b-s8qym2h97s] {
        display: block;
    }

    .page-header h4[b-s8qym2h97s], .page-header .h4[b-s8qym2h97s] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-s8qym2h97s] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.pager-container[b-s8qym2h97s] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/MantPresentacionesPage.razor.rz.scp.css */
.grid-container1[b-rybl2ylsev] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
}

.grid-container[b-rybl2ylsev] {
    /*overflow-y: auto;
    margin-top: 5px;
    
    width: calc(100vw - 6rem);
    height: calc(100vh - 20rem);*/
}

.form-row[b-rybl2ylsev] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-rybl2ylsev] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-rybl2ylsev] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-rybl2ylsev] {
    flex-shrink: 0;
    width: 30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-rybl2ylsev] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-rybl2ylsev],
    .custom-button[b-rybl2ylsev] {
        width: 100%;
    }
}

.page-header[b-rybl2ylsev] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-rybl2ylsev] {
        width: 100%;
    }

    .page-header .page-header-title[b-rybl2ylsev] {
        display: block;
    }

    .page-header h4[b-rybl2ylsev], .page-header .h4[b-rybl2ylsev] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-rybl2ylsev] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.pager-container[b-rybl2ylsev] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/MantSeriesPage.razor.rz.scp.css */
.grid-container[b-c6lyv3qnn2] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 14rem);
}

.form-row[b-c6lyv3qnn2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-c6lyv3qnn2] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-c6lyv3qnn2] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-c6lyv3qnn2] {
    flex-shrink: 0;
    width: 30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-c6lyv3qnn2] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-c6lyv3qnn2],
    .custom-button[b-c6lyv3qnn2] {
        width: 100%;
    }
}

.page-header[b-c6lyv3qnn2] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-c6lyv3qnn2] {
        width: 100%;
    }

    .page-header .page-header-title[b-c6lyv3qnn2] {
        display: block;
    }

    .page-header h4[b-c6lyv3qnn2], .page-header .h4[b-c6lyv3qnn2] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-c6lyv3qnn2] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.pager-container[b-c6lyv3qnn2] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/MDInventarioIngresarLotesPage.razor.rz.scp.css */
.button-wrapper[b-162hzil4tv] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}
.flex-container[b-162hzil4tv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}
.textbox-wrapper[b-162hzil4tv] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/MDInventarioIngresarSeriesPage.razor.rz.scp.css */
.button-wrapper[b-svp0m69yfp] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}
.flex-container[b-svp0m69yfp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}
.textbox-wrapper[b-svp0m69yfp] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/MDInventarioRegistrarPresentacionPage.razor.rz.scp.css */
.button-wrapper[b-f1fv6m1b4q] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}
.flex-container[b-f1fv6m1b4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}
.textbox-wrapper[b-f1fv6m1b4q] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/MovimientoKardexPage.razor.rz.scp.css */
.pos-toolbar.e-toolbar[b-91qq9o50rd] {
    background-color: #f0f2f5;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 15px;
    margin-bottom: 15px;
}

.page-header[b-91qq9o50rd] {
    width: 100%;
}

.breadcrumb[b-91qq9o50rd] {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
}

.e-breadcrumb-item[b-91qq9o50rd] {
    color: #555;
}

    .e-breadcrumb-item.e-active[b-91qq9o50rd] {
        color: #007bff;
        font-weight: 500;
    }

.custom-button[b-91qq9o50rd] {
    height: 36px;
    margin-left: 10px;
}

.form-row[b-91qq9o50rd] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    padding: 0 15px 15px 15px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
}

.kardex-container[b-91qq9o50rd] {
    display: flex;
    gap: 20px;
    padding: 0 15px;
}

.kardex-grid-section[b-91qq9o50rd] {
    flex: 3; /* Occupy more space */
    min-width: 0; /* Allow content to shrink */
}

.product-summary-sidebar[b-91qq9o50rd] {
    flex: 1; /* Occupy less space, like a sidebar */
    min-width: 250px; /* Minimum width for the sidebar */
    max-width: 350px; /* Max width for the sidebar */
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 15px;
    overflow-y: auto; /* Enable scrolling if content overflows */
    max-height: calc(100vh - 350px); /* Adjust based on header/footer */
}

    .product-summary-sidebar h5[b-91qq9o50rd] {
        margin-top: 0;
        margin-bottom: 15px;
        color: #333;
    }

.product-summary-item[b-91qq9o50rd] {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #e9e9e9;
    font-size: 0.85em;
}

    .product-summary-item:last-child[b-91qq9o50rd] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .product-summary-item strong[b-91qq9o50rd] {
        color: #007bff;
        cursor: pointer;
    }

        .product-summary-item strong:hover[b-91qq9o50rd] {
            text-decoration: underline;
        }

    .product-summary-item span[b-91qq9o50rd] {
        display: block;
        color: #666;
    }

.product-search[b-91qq9o50rd] {
    padding: 0 15px 15px 15px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
}

.chart-section[b-91qq9o50rd] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 15px;
    justify-content: space-around;
    align-items: flex-start;
}

.chart-item[b-91qq9o50rd] {
    flex: 1;
    min-width: 300px;
    max-width: 48%; /* Adjust for responsiveness */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 15px;
    background-color: #fff;
}

.chart-header[b-91qq9o50rd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.e-grid .e-gridheader .e-headercontent[b-91qq9o50rd] {
    height: auto !important; /* Allow header content to determine height */
}

.e-grid .e-gridheader .e-headertext[b-91qq9o50rd] {
    white-space: normal !important; /* Allow text wrapping in headers */
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .kardex-container[b-91qq9o50rd] {
        flex-direction: column;
    }

    .product-summary-sidebar[b-91qq9o50rd] {
        max-width: none;
        max-height: 300px; /* Limit height on smaller screens */
    }

    .chart-item[b-91qq9o50rd] {
        max-width: 100%; /* Stack charts vertically on smaller screens */
    }
}


/* Custom styles for the summary cards */
.kardex-summary-cards-bootstrap[b-91qq9o50rd] {
    display: flex;
    flex-wrap: wrap; /* Allows cards to wrap to the next line on smaller screens */
    gap: 1rem; /* Space between cards */
    margin-top: 15px;
    margin-bottom: 20px;
    justify-content: center; /* Center cards when there's space */
}

.kardex-summary-card-bootstrap[b-91qq9o50rd] {
    flex: 1 1 calc(25% - 1rem); /* Distribute space, allowing ~4 cards per row initially */
    min-width: 200px; /* Minimum width before wrapping */
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* More pronounced shadow for sophistication */
    border-radius: 10px; /* Nicer rounded corners */
    overflow: hidden;
    background-color: #ffffff; /* White background */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover effect */
    border: none; /* Remove default bootstrap card border */
    display: flex; /* Use flexbox for card content */
    flex-direction: column; /* Stack card content vertically */
}

    .kardex-summary-card-bootstrap:hover[b-91qq9o50rd] {
        transform: translateY(-5px); /* More noticeable lift on hover */
        box-shadow: 0 8px 16px rgba(0,0,0,0.12); /* Enhanced shadow on hover */
    }

    .kardex-summary-card-bootstrap .card-body[b-91qq9o50rd] {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 120px; /* Ensure consistent card height */
    }

    .kardex-summary-card-bootstrap .card-title[b-91qq9o50rd] {
        font-size: 1rem;
        color: #6c757d; /* Muted color for the title */
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem; /* Space between icon and text */
        font-weight: 500;
    }

        .kardex-summary-card-bootstrap .card-title i[b-91qq9o50rd] {
            font-size: 1.25rem; /* Icon size relative to title text */
            color: #007bff; /* Primary brand color for icons */
        }

    .kardex-summary-card-bootstrap .card-value[b-91qq9o50rd] {
        font-size: 1.4rem; /* Slightly smaller for two lines of text, adjust for single line if preferred */
        font-weight: bold;
        color: #343a40; /* Darker color for prominence */
        margin-top: auto; /* Pushes value to the bottom if content is short */
        line-height: 1.3; /* Adjust line height for dual values */
    }

        .kardex-summary-card-bootstrap .card-value small[b-91qq9o50rd] {
            display: block; /* Make small text appear on a new line */
            font-size: 0.75em; /* Smaller font for secondary info */
            font-weight: normal;
            color: #828a92;
            margin-top: 0.25rem;
        }

/* Color indicators for special states */
.value-invalid[b-91qq9o50rd] {
    color: #dc3545 !important; /* Red for invalid periods/dates */
    font-weight: 600; /* Slightly bolder for emphasis */
}

.value-valid[b-91qq9o50rd] {
    color: #28a745; /* Green for valid values, or primary for default */
}

/* Responsive adjustments for summary cards */
@media (max-width: 1400px) { /* Adjust for larger screens first if needed */
    .kardex-summary-card-bootstrap[b-91qq9o50rd] {
        flex: 1 1 calc(33.33% - 1rem); /* 3 cards per row on larger desktops */
    }
}

@media (max-width: 992px) { /* Medium desktops and tablets */
    .kardex-summary-card-bootstrap[b-91qq9o50rd] {
        flex: 1 1 calc(50% - 1rem); /* 2 cards per row */
    }
}

@media (max-width: 576px) { /* Small phones */
    .kardex-summary-card-bootstrap[b-91qq9o50rd] {
        flex: 1 1 calc(100% - 1rem); /* 1 card per row */
    }
}
.flex-container[b-91qq9o50rd] {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    align-items: center; /* Vertically aligns items in the center */
    gap: 15px; /* Space between elements */
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

    /* Ensure all direct children of flex-container behave as flex items */
    .flex-container > *[b-91qq9o50rd] {
        /* Critical: flex-shrink: 1 allows items to shrink if necessary to fit on one line */
        flex-shrink: 1;
        /* flex-grow: 0; by default, they only grow if explicitly told to */
        flex-grow: 0;
        width: auto !important; /* Overrides Syncfusion's intrinsic width to let flexbox control */
        box-sizing: border-box; /* Includes padding and border in the element's total width */
    }

/* Specific styling for the button group (CodBar/Desc) */
.product-search-buttons[b-91qq9o50rd] {
    /* Flex-basis set to a small value, so it primarily relies on its content width */
    flex: 0 0 130px; /* Small base, won't grow/shrink unless forced, min-width will take precedence */
    min-width: 130px; /* Absolute minimum width */
    /* Add max-width if you want to prevent it from stretching too much on very wide screens,
       but usually flex-grow:0 is enough. */
}

/* Styling for the product search textbox */
.product-search-input[b-91qq9o50rd] {
    /* Allow it to grow significantly (3) and shrink (1), with a smaller base (200px)
       to give more room to others on a single line */
    flex: 3 1 200px;
    min-width: 150px; /* Ensure it doesn't get too tiny */
}

/* Styling for DropDownLists */
.flex-container .e-dropdownlist[b-91qq9o50rd] {
    /* These should shrink (1) if needed, and have a base width that's reasonable */
    flex: 1 1 150px; /* Allow growing (1), shrinking (1), and a base of 150px */
    min-width: 120px; /* Absolute minimum for readability */
    max-width: 200px; /* Cap its max width for better horizontal packing */
    width: auto !important; /* Crucial override */
}

    /* Ensure the inner input element of SfDropDownList also respects flex */
    .flex-container .e-dropdownlist .e-input-group[b-91qq9o50rd] {
        width: 100% !important; /* Force inner input to fill dropdown width */
    }

/* Styling for the Consultar button */
.consultar-button[b-91qq9o50rd] {
    flex: 0 0 auto; /* Don't grow or shrink, take only necessary content width */
    min-width: 100px; /* Ensure button has decent size */
}

/* --- Responsive Adjustments --- */

/* For screens where everything should ideally be on one line,
   ensure flex-wrap is not forced by overly large min-widths */
@media (min-width: 769px) { /* This breakpoint targets tablets and desktops */
    .flex-container[b-91qq9o50rd] {
        flex-wrap: nowrap; /* Try to keep them on one line unless individual elements force wrap */
        justify-content: flex-start; /* Align to start for a cleaner left-to-right flow */
    }

        .product-search-buttons[b-91qq9o50rd],
        .product-search-input[b-91qq9o50rd],
        .flex-container .e-dropdownlist[b-91qq9o50rd],
        .consultar-button[b-91qq9o50rd] {
            /* Ensure they can shrink to fit */
            flex-shrink: 1;
            /* Allow textbox to grow */
            flex-grow: 0; /* By default, prevent aggressive growth on large screens */
        }

    .product-search-input[b-91qq9o50rd] {
        flex-grow: 3; /* Allow text box to take most available space */
    }
}


/* Tablet and smaller desktop screens (e.g., between 577px and 768px) */
@media (max-width: 992px) {
    .flex-container[b-91qq9o50rd] {
        flex-wrap: wrap; /* Allow wrapping again if space is tight */
        justify-content: flex-start;
    }

    .product-search-input[b-91qq9o50rd] {
        flex: 1 1 100%; /* Take full width */
        order: -1; /* Move to the top */
    }
    /* Dropdowns will try to do 2 per row */
    .flex-container .e-dropdownlist[b-91qq9o50rd] {
        flex: 1 1 calc(50% - 10px); /* Two dropdowns per row with gap */
        max-width: none; /* Allow them to expand */
    }
}

/* Small mobile screens (e.g., 576px and below) */
@media (max-width: 576px) {
    .flex-container[b-91qq9o50rd] {
        flex-direction: column; /* Stack all elements vertically */
        align-items: stretch; /* Make items stretch to fill the container width */
        gap: 10px; /* Reduce gap when stacked */
    }

        .flex-container > *[b-91qq9o50rd] {
            width: 100% !important; /* Force all elements to take full width */
            max-width: 100% !important; /* Ensure they don't exceed 100% */
            flex: 0 0 auto; /* Reset flex properties when stacked */
        }

    .product-search-input[b-91qq9o50rd] {
        order: -1; /* Keep search box at the top */
    }
}

/* Estilos para el texto de fecha no disponible */
.value-invalid[b-91qq9o50rd] {
    color: #dc3545 !important; /* Rojo para estados no disponibles */
    font-weight: 600; /* Ligeramente más negrita */
}

.value-valid[b-91qq9o50rd] {
    color: #6c757d; /* Color secundario para estados válidos */
}
/* Puedes añadir más estilos si los necesitas, como un tamaño de fuente específico */
.text-secondary[b-91qq9o50rd] {
    font-size: 0.95rem; /* Un poco más pequeño que el tamaño base para sub-información */
}


/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/NotaIngresoListPage.razor.rz.scp.css */
.grid-container[b-rljnkmi5q8] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 8rem);
}
.form-row[b-rljnkmi5q8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-rljnkmi5q8] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-rljnkmi5q8] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-rljnkmi5q8] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-rljnkmi5q8] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-rljnkmi5q8],
    .custom-button[b-rljnkmi5q8] {
        width: 100%;
    }
}

/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/NotaIngresoPage.razor.rz.scp.css */
.grid-container[b-wiz8fv1s6n] {
    overflow-y:hidden;
    margin-top: 0px;
   
}
.custom-container[b-wiz8fv1s6n] {
    
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;*/ /* Altura completa de la ventana */
                     margin:0px;
padding:10px;
}
.page-header[b-wiz8fv1s6n] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}
    .page-header .page-block[b-wiz8fv1s6n] {
        width: 100%;
    }
    .page-header .page-header-title[b-wiz8fv1s6n] {
        display: block;
    }
    .page-header h4[b-wiz8fv1s6n], .page-header .h4[b-wiz8fv1s6n] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }
    .page-header .breadcrumb[b-wiz8fv1s6n] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.card[b-wiz8fv1s6n] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f, 0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}
.heading-style[b-wiz8fv1s6n] {
    background-color: #0000000f;
    border-inline-start: 2px solid #b6ff00;
    border-radius: 3px;
    padding: 6px;
    padding-inline-start: 8px;
    margin-bottom: 14px;
}
.heading-style h3[b-wiz8fv1s6n] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.total-order[b-wiz8fv1s6n] {
    max-width: 430px;
    width: 100%;
    margin: 10px 0 30px auto;
}
    .total-order ul[b-wiz8fv1s6n] {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: baseline;
    }

p[b-wiz8fv1s6n], ul:not(.list-unstyled)[b-wiz8fv1s6n], ol[b-wiz8fv1s6n] {
    line-height: 22px;
}
.total-order ul li:first-child[b-wiz8fv1s6n] {
    border-top: 1px solid #00000014;
}

.total-order ul li[b-wiz8fv1s6n] {
    border: 1px solid #00000014;
    border-top: 0;
    display: flex;
}
    .total-order ul li h4[b-wiz8fv1s6n] {
        width: 50%;
        color: var(--colorTextLight);
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border-right: 1px solid #00000014;
        background: var(--colorSurface);
        margin-bottom: 0;
    }

h4[b-wiz8fv1s6n] {
    font-size: 17px;
}

h1[b-wiz8fv1s6n], h2[b-wiz8fv1s6n], h3[b-wiz8fv1s6n], h4[b-wiz8fv1s6n], h5[b-wiz8fv1s6n], h6[b-wiz8fv1s6n] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}
.total-order ul li h5[b-wiz8fv1s6n] {
    color: var(--colorTextPrimary);
    font-size: 14px;
    padding: 10px;
    font-weight: 700;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

h1[b-wiz8fv1s6n], h2[b-wiz8fv1s6n], h3[b-wiz8fv1s6n], h4[b-wiz8fv1s6n], h5[b-wiz8fv1s6n], h6[b-wiz8fv1s6n] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.flex-container[b-wiz8fv1s6n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-wiz8fv1s6n] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-wiz8fv1s6n] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-wiz8fv1s6n] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-wiz8fv1s6n], .textbox-wrapper[b-wiz8fv1s6n] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}
.loading-overlay[b-wiz8fv1s6n] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-wiz8fv1s6n] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-wiz8fv1s6n 1s linear infinite;
}

@keyframes spin-b-wiz8fv1s6n {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/NotaSalidaListPage.razor.rz.scp.css */
.grid-container[b-xffwp8f1gb] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 8rem);
}
.form-row[b-xffwp8f1gb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-xffwp8f1gb] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-xffwp8f1gb] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-xffwp8f1gb] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-xffwp8f1gb] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-xffwp8f1gb],
    .custom-button[b-xffwp8f1gb] {
        width: 100%;
    }
}

/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/NotaSalidaPage.razor.rz.scp.css */
.grid-container[b-se3ihr5zis] {
    overflow-y:hidden;
    margin-top: 0px;
   
}
.custom-container[b-se3ihr5zis] {
    
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;*/ /* Altura completa de la ventana */
                     margin:0px;
padding:10px;
}
.page-header[b-se3ihr5zis] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}
    .page-header .page-block[b-se3ihr5zis] {
        width: 100%;
    }
    .page-header .page-header-title[b-se3ihr5zis] {
        display: block;
    }
    .page-header h4[b-se3ihr5zis], .page-header .h4[b-se3ihr5zis] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }
    .page-header .breadcrumb[b-se3ihr5zis] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.card[b-se3ihr5zis] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f, 0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}
.heading-style[b-se3ihr5zis] {
    background-color: #0000000f;
    border-inline-start: 2px solid #b6ff00;
    border-radius: 3px;
    padding: 6px;
    padding-inline-start: 8px;
    margin-bottom: 14px;
}
.heading-style h3[b-se3ihr5zis] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.total-order[b-se3ihr5zis] {
    max-width: 430px;
    width: 100%;
    margin: 10px 0 30px auto;
}
    .total-order ul[b-se3ihr5zis] {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: baseline;
    }

p[b-se3ihr5zis], ul:not(.list-unstyled)[b-se3ihr5zis], ol[b-se3ihr5zis] {
    line-height: 22px;
}
.total-order ul li:first-child[b-se3ihr5zis] {
    border-top: 1px solid #00000014;
}

.total-order ul li[b-se3ihr5zis] {
    border: 1px solid #00000014;
    border-top: 0;
    display: flex;
}
    .total-order ul li h4[b-se3ihr5zis] {
        width: 50%;
        color: var(--colorTextLight);
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border-right: 1px solid #00000014;
        background: var(--colorSurface);
        margin-bottom: 0;
    }

h4[b-se3ihr5zis] {
    font-size: 17px;
}

h1[b-se3ihr5zis], h2[b-se3ihr5zis], h3[b-se3ihr5zis], h4[b-se3ihr5zis], h5[b-se3ihr5zis], h6[b-se3ihr5zis] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}
.total-order ul li h5[b-se3ihr5zis] {
    color: var(--colorTextPrimary);
    font-size: 14px;
    padding: 10px;
    font-weight: 700;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

h1[b-se3ihr5zis], h2[b-se3ihr5zis], h3[b-se3ihr5zis], h4[b-se3ihr5zis], h5[b-se3ihr5zis], h6[b-se3ihr5zis] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.flex-container[b-se3ihr5zis] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-se3ihr5zis] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-se3ihr5zis] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-se3ihr5zis] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-se3ihr5zis], .textbox-wrapper[b-se3ihr5zis] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}
.loading-overlay[b-se3ihr5zis] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-se3ihr5zis] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-se3ihr5zis 1s linear infinite;
}

@keyframes spin-b-se3ihr5zis {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/Productos/ProductoListPage.razor.rz.scp.css */
.grid-container[b-3cbqv5l1p8] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 14rem);
}

.form-row[b-3cbqv5l1p8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-3cbqv5l1p8] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-3cbqv5l1p8] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-3cbqv5l1p8] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-3cbqv5l1p8] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-3cbqv5l1p8],
    .custom-button[b-3cbqv5l1p8] {
        width: 100%;
    }
}

.page-header[b-3cbqv5l1p8] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-3cbqv5l1p8] {
        width: 100%;
    }

    .page-header .page-header-title[b-3cbqv5l1p8] {
        display: block;
    }

    .page-header h4[b-3cbqv5l1p8], .page-header .h4[b-3cbqv5l1p8] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-3cbqv5l1p8] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.pager-container[b-3cbqv5l1p8] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Inventarios/Productos/ProductoPage.razor.rz.scp.css */
.grid-container[b-6vqhj06sqi] {
    overflow-y:hidden;
    margin-top: 0px;
   
}
.form-row[b-6vqhj06sqi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.custom-textbox[b-6vqhj06sqi] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-6vqhj06sqi] {
    flex-shrink: 0;
}
.custom-container[b-6vqhj06sqi] {
    
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;*/ /* Altura completa de la ventana */
                     margin:0px;
padding:10px;
}
.page-header[b-6vqhj06sqi] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}
    .page-header .page-block[b-6vqhj06sqi] {
        width: 100%;
    }
    .page-header .page-header-title[b-6vqhj06sqi] {
        display: block;
    }
    .page-header h4[b-6vqhj06sqi], .page-header .h4[b-6vqhj06sqi] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }
    .page-header .breadcrumb[b-6vqhj06sqi] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.card[b-6vqhj06sqi] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f, 0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}
.heading-style[b-6vqhj06sqi] {
    background-color: #0000000f;
    border-inline-start: 2px solid #b6ff00;
    border-radius: 3px;
    padding: 6px;
    padding-inline-start: 8px;
    margin-bottom: 14px;
}
.heading-style h3[b-6vqhj06sqi] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.total-order[b-6vqhj06sqi] {
    max-width: 430px;
    width: 100%;
    margin: 10px 0 30px auto;
}
    .total-order ul[b-6vqhj06sqi] {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: baseline;
    }

p[b-6vqhj06sqi], ul:not(.list-unstyled)[b-6vqhj06sqi], ol[b-6vqhj06sqi] {
    line-height: 22px;
}
.total-order ul li:first-child[b-6vqhj06sqi] {
    border-top: 1px solid #00000014;
}

.total-order ul li[b-6vqhj06sqi] {
    border: 1px solid #00000014;
    border-top: 0;
    display: flex;
}
    .total-order ul li h4[b-6vqhj06sqi] {
        width: 50%;
        color: var(--colorTextLight);
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border-right: 1px solid #00000014;
        background: var(--colorSurface);
        margin-bottom: 0;
    }

h4[b-6vqhj06sqi] {
    font-size: 17px;
}

h1[b-6vqhj06sqi], h2[b-6vqhj06sqi], h3[b-6vqhj06sqi], h4[b-6vqhj06sqi], h5[b-6vqhj06sqi], h6[b-6vqhj06sqi] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}
.total-order ul li h5[b-6vqhj06sqi] {
    color: var(--colorTextPrimary);
    font-size: 14px;
    padding: 10px;
    font-weight: 700;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

h1[b-6vqhj06sqi], h2[b-6vqhj06sqi], h3[b-6vqhj06sqi], h4[b-6vqhj06sqi], h5[b-6vqhj06sqi], h6[b-6vqhj06sqi] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.flex-container[b-6vqhj06sqi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-6vqhj06sqi] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-6vqhj06sqi] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-6vqhj06sqi] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-6vqhj06sqi], .textbox-wrapper[b-6vqhj06sqi] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}
.loading-overlay[b-6vqhj06sqi] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-6vqhj06sqi] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-6vqhj06sqi 1s linear infinite;
}

@keyframes spin-b-6vqhj06sqi {
    to {
        transform: rotate(360deg);
    }
}
.rowwithborder[b-6vqhj06sqi] {
    border: 2px solid #007bff; /* Color azul con un borde de 2px */
    border-radius: 8px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 15px; /* Espacio entre filas */
    background-color: #f9f9f9; /* Fondo claro */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar un efecto elevado */
}

.image-container[b-6vqhj06sqi] {
    text-align: center;
    margin: 20px auto;  
    border: 1px solid #ccc;
    padding: 10px;
    width: 300px;  
    height: 300px;  
    position: relative;
    display: flex;
    justify-content: center;  
    align-items: center;  
}

.image-preview[b-6vqhj06sqi] {
    max-width: 50%;
    max-height: 50%;
    object-fit:cover;
}

.button-container[b-6vqhj06sqi] {
    display: flex; 
    justify-content: center; 
    margin-top: 0px;
}

    .button-container .btn[b-6vqhj06sqi] {
        margin: 0 5px; /* Espaciado entre botones */
        padding: 5px 10px; /* Espaciado interno */
        font-size: 14px; /* Tamaño de fuente más pequeño */
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/LoginForm.razor.rz.scp.css */
.mudpaper[b-xbatfqdi2d]{
    elevation:0px;
    box-shadow:none;
}
.card[b-xbatfqdi2d] {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    text-align: left;
    max-width: 400px;
    width: 100%;
}

.logo[b-xbatfqdi2d] {
    width: 120px;
    margin-bottom: 30px;
}

.welcome-text[b-xbatfqdi2d] {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 30px;
    color: #333;
}
.container[b-xbatfqdi2d] {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100vh;
    background-image: url('../../wwwroot/img/logo.png');
    background-size:contain;
    background-position: center;
}
.dxbl-wait-indicator[b-xbatfqdi2d] {
    --dxbl-wait-indicator-color: white;
}
 .dxbl-btn.dxbl-lg[b-xbatfqdi2d] {
    --dxbl-btn-line-height: 1.5rem;
}
@keyframes spin-b-xbatfqdi2d {
    to {
        transform: rotate(360deg);
    }
}


/*body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
    overflow: hidden;
}

.vantastic-container {
    position: relative;
    text-align: center;
    animation: growText 3s infinite;
}

.vantastic-text {
    font-family: Arial, sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: gold;
    text-shadow: 2px 2px 5px #000, 0 0 20px gold, 0 0 30px gold;
    transform: perspective(600px) rotateX(20deg);
    animation: fadeInGrow 3s ease-in-out forwards;
}

.bit-text {
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: gold;
    text-shadow: 2px 2px 5px #000, 0 0 20px gold, 0 0 30px gold;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid gold;
    border-radius: 50%;
    padding: 10px 20px;
    animation: fadeIn 3s ease-in-out 1s forwards;
    opacity: 0;
}*/

/* Animations */
/*@keyframes growText {
    0%, 100% {
        transform: scale(1);
    }

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

@keyframes fadeInGrow {
    0% {
        opacity: 0;
        transform: scale(0.5) rotateX(20deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}*/


/* _content/Vantastic.Mono.Web.Blazor/Pages/Proveedores/CuentaPagarPage.razor.rz.scp.css */
.grid-container1[b-e967idquqw] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: calc(100vw - 6rem);
   
}
.grid-container[b-e967idquqw] {
    
    /*overflow-y: auto;
    margin-top: 5px;
    
    width: calc(100vw - 6rem);
    height: calc(100vh - 20rem);*/
}

.form-row[b-e967idquqw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-e967idquqw] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-e967idquqw] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-e967idquqw] {
    flex-shrink: 0;
    width:30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-e967idquqw] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-e967idquqw],
    .custom-button[b-e967idquqw] {
        width: 100%;
    }
}

.page-header[b-e967idquqw] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-e967idquqw] {
        width: 100%;
    }

    .page-header .page-header-title[b-e967idquqw] {
        display: block;
    }

    .page-header h4[b-e967idquqw], .page-header .h4[b-e967idquqw] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-e967idquqw] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.pager-container[b-e967idquqw] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Proveedores/ProveedorListPage.razor.rz.scp.css */
.grid-container[b-37yfqmn45k] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 14rem);
}

.form-row[b-37yfqmn45k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-37yfqmn45k] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-37yfqmn45k] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-37yfqmn45k] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-37yfqmn45k] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-37yfqmn45k],
    .custom-button[b-37yfqmn45k] {
        width: 100%;
    }
}

.page-header[b-37yfqmn45k] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-37yfqmn45k] {
        width: 100%;
    }

    .page-header .page-header-title[b-37yfqmn45k] {
        display: block;
    }

    .page-header h4[b-37yfqmn45k], .page-header .h4[b-37yfqmn45k] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-37yfqmn45k] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.pager-container[b-37yfqmn45k] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/RegistroComprasPage.razor.rz.scp.css */
.grid-container[b-tuboa8q7zg] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: calc(100vw - 6rem);
    height: calc(100vh - 8rem);
}

.form-row[b-tuboa8q7zg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-tuboa8q7zg] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-tuboa8q7zg] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-tuboa8q7zg] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-tuboa8q7zg] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-tuboa8q7zg],
    .custom-button[b-tuboa8q7zg] {
        width: 100%;
    }
}
.page-header[b-tuboa8q7zg] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-tuboa8q7zg] {
        width: 100%;
    }

    .page-header .page-header-title[b-tuboa8q7zg] {
        display: block;
    }

    .page-header h4[b-tuboa8q7zg], .page-header .h4[b-tuboa8q7zg] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-tuboa8q7zg] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/RegistroVentasPage.razor.rz.scp.css */
.grid-container[b-wccwsj4ndi] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: calc(100vw - 6rem);
    height: calc(100vh - 8rem);
}

.form-row[b-wccwsj4ndi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-wccwsj4ndi] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-wccwsj4ndi] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-wccwsj4ndi] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-wccwsj4ndi] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-wccwsj4ndi],
    .custom-button[b-wccwsj4ndi] {
        width: 100%;
    }
}
.page-header[b-wccwsj4ndi] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-wccwsj4ndi] {
        width: 100%;
    }

    .page-header .page-header-title[b-wccwsj4ndi] {
        display: block;
    }

    .page-header h4[b-wccwsj4ndi], .page-header .h4[b-wccwsj4ndi] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-wccwsj4ndi] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/ReportesMainPage.razor.rz.scp.css */

/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/RptConsultaComprasPage.razor.rz.scp.css */
.grid-container1[b-eoiqzto668] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: calc(100vw - 6rem);
}

.grid-container[b-eoiqzto668] {
    overflow-y: auto;
    margin-top: 5px;
    width: 100%;
    /*height: calc(100vh - 20rem);*/
}

.form-row[b-eoiqzto668] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-eoiqzto668] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-eoiqzto668] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-eoiqzto668] {
    flex-shrink: 0;
    width: 30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-eoiqzto668] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-eoiqzto668],
    .custom-button[b-eoiqzto668] {
        width: 100%;
    }
}

.page-header[b-eoiqzto668] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-eoiqzto668] {
        width: 100%;
    }

    .page-header .page-header-title[b-eoiqzto668] {
        display: block;
    }

    .page-header h4[b-eoiqzto668], .page-header .h4[b-eoiqzto668] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-eoiqzto668] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.pager-container[b-eoiqzto668] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}

.footer-total[b-eoiqzto668] {
    text-align: right; /* Alinear a la derecha */
    padding: 0px;
    background-color: #222; /* Fondo oscuro */
    color: #ffd700; /* Dorado */
    border-top: 2px solid #ffd700;
}

.total-highlight[b-eoiqzto668] {
    font-size: 1.5em; /* Texto más grande */
    font-weight: bold; /* Texto en negrita */
    text-shadow: 2px 2px 4px #000; /* Sombra para efecto 3D */
}
#spreadsheet[b-eoiqzto668] {
    height: 80vh;
    width: 100%;
    overflow: hidden;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/RptConsultaVentasPage.razor.rz.scp.css */
.grid-container1[b-exu0dq4l6c] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: calc(100vw - 6rem);
}

.grid-container[b-exu0dq4l6c] {
    overflow-y: auto;
    margin-top: 5px;
    width: 100%;
    /*height: calc(100vh - 20rem);*/
}

.form-row[b-exu0dq4l6c] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-exu0dq4l6c] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-exu0dq4l6c] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-exu0dq4l6c] {
    flex-shrink: 0;
    width: 30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-exu0dq4l6c] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-exu0dq4l6c],
    .custom-button[b-exu0dq4l6c] {
        width: 100%;
    }
}

.page-header[b-exu0dq4l6c] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-exu0dq4l6c] {
        width: 100%;
    }

    .page-header .page-header-title[b-exu0dq4l6c] {
        display: block;
    }

    .page-header h4[b-exu0dq4l6c], .page-header .h4[b-exu0dq4l6c] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-exu0dq4l6c] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.pager-container[b-exu0dq4l6c] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}

.footer-total[b-exu0dq4l6c] {
    text-align: right; /* Alinear a la derecha */
    padding: 0px;
    background-color: #222; /* Fondo oscuro */
    color: #ffd700; /* Dorado */
    border-top: 2px solid #ffd700;
}

.total-highlight[b-exu0dq4l6c] {
    font-size: 1.5em; /* Texto más grande */
    font-weight: bold; /* Texto en negrita */
    text-shadow: 2px 2px 4px #000; /* Sombra para efecto 3D */
}
#spreadsheet[b-exu0dq4l6c] {
    height: 80vh;
    width: 100%;
    overflow: hidden;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/RptInventarioTallasPage.razor.rz.scp.css */
.grid-container1[b-bzbr2jrhlc] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: calc(100vw - 6rem);
}

.grid-container[b-bzbr2jrhlc] {
    /*overflow-y: auto;
    margin-top: 5px;
    
    width: calc(100vw - 6rem);
    height: calc(100vh - 20rem);*/
}

.form-row[b-bzbr2jrhlc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-bzbr2jrhlc] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-bzbr2jrhlc] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-bzbr2jrhlc] {
    flex-shrink: 0;
    width: 30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-bzbr2jrhlc] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-bzbr2jrhlc],
    .custom-button[b-bzbr2jrhlc] {
        width: 100%;
    }
}

.page-header[b-bzbr2jrhlc] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-bzbr2jrhlc] {
        width: 100%;
    }

    .page-header .page-header-title[b-bzbr2jrhlc] {
        display: block;
    }

    .page-header h4[b-bzbr2jrhlc], .page-header .h4[b-bzbr2jrhlc] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-bzbr2jrhlc] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.pager-container[b-bzbr2jrhlc] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}

.footer-total[b-bzbr2jrhlc] {
    text-align: right; /* Alinear a la derecha */
    padding: 10px;
    background-color: #222; /* Fondo oscuro */
    color: #ffd700; /* Dorado */
    border-top: 2px solid #ffd700;
}

.total-highlight[b-bzbr2jrhlc] {
    font-size: 1.5em; /* Texto más grande */
    font-weight: bold; /* Texto en negrita */
    text-shadow: 2px 2px 4px #000; /* Sombra para efecto 3D */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/RptRentabilidadPage.razor.rz.scp.css */
.grid-container1[b-541tx0ofab] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: calc(100vw - 6rem);
}

.grid-container[b-541tx0ofab] {
    overflow-y: auto;
    margin-top: 5px;
    
    width: 100%;
    /*height: calc(100vh - 20rem);*/
}

.form-row[b-541tx0ofab] {
    display: flex;
    justify-content:flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-541tx0ofab] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-541tx0ofab] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-541tx0ofab] {
    flex-shrink: 0;
    width: 30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-541tx0ofab] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-541tx0ofab],
    .custom-button[b-541tx0ofab] {
        width: 100%;
    }
}

.page-header[b-541tx0ofab] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-541tx0ofab] {
        width: 100%;
    }

    .page-header .page-header-title[b-541tx0ofab] {
        display: block;
    }

    .page-header h4[b-541tx0ofab], .page-header .h4[b-541tx0ofab] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-541tx0ofab] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.pager-container[b-541tx0ofab] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
.footer-total[b-541tx0ofab] {
    text-align: right; /* Alinear a la derecha */
    padding: 0px;
    background-color: #222; /* Fondo oscuro */
    color: #ffd700; /* Dorado */
    border-top: 2px solid #ffd700;
}

.total-highlight[b-541tx0ofab] {
    font-size: 1.5em; /* Texto más grande */
    font-weight: bold; /* Texto en negrita */
    text-shadow: 2px 2px 4px #000; /* Sombra para efecto 3D */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/RptValorizacionPage.razor.rz.scp.css */
.grid-container1[b-mujfvwuf7c] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: calc(100vw - 6rem);
   
}
.grid-container[b-mujfvwuf7c] {
    
    /*overflow-y: auto;
    margin-top: 5px;
    
    width: calc(100vw - 6rem);
    height: calc(100vh - 20rem);*/
}

.form-row[b-mujfvwuf7c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-mujfvwuf7c] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-mujfvwuf7c] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-mujfvwuf7c] {
    flex-shrink: 0;
    width:30%;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-mujfvwuf7c] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-mujfvwuf7c],
    .custom-button[b-mujfvwuf7c] {
        width: 100%;
    }
}

.page-header[b-mujfvwuf7c] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-mujfvwuf7c] {
        width: 100%;
    }

    .page-header .page-header-title[b-mujfvwuf7c] {
        display: block;
    }

    .page-header h4[b-mujfvwuf7c], .page-header .h4[b-mujfvwuf7c] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-mujfvwuf7c] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.pager-container[b-mujfvwuf7c] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}

.footer-total[b-mujfvwuf7c] {
    text-align: right; /* Alinear a la derecha */
    padding: 10px;
    background-color: #222; /* Fondo oscuro */
    color: #ffd700; /* Dorado */
    border-top: 2px solid #ffd700;
}

.total-highlight[b-mujfvwuf7c] {
    font-size: 1.5em; /* Texto más grande */
    font-weight: bold; /* Texto en negrita */
    text-shadow: 2px 2px 4px #000; /* Sombra para efecto 3D */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/VantasticHubComandaCocinaPage2.razor.rz.scp.css */
/* General KDS Styling */
body[b-u2s48vqua1] {
    background-color: #f8f9fa; /* Light background */
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.kitchen-monitor-dashboard[b-u2s48vqua1] {
    padding: 2rem;
}

/* Header Section */
.header-section[b-u2s48vqua1] {
    background-color: #ffffff;
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

    .header-section h3[b-u2s48vqua1] {
        color: #007bff; /* Primary brand color */
        font-size: 2rem;
    }

    .header-section small[b-u2s48vqua1] {
        color: #6c757d;
        font-size: 1.1rem;
    }

.dropdown-container[b-u2s48vqua1] {
    min-width: 280px; /* Adjust as needed */
}

/* Syncfusion Dropdown Specific Styling */
.kitchen-dropdown.e-dropdownlist .e-input[b-u2s48vqua1] {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.kitchen-dropdown.e-dropdownlist.e-float-input.e-input-focus:not(.e-control-wrapper)[b-u2s48vqua1],
.kitchen-dropdown.e-dropdownlist.e-float-input.e-input-focus[b-u2s48vqua1] {
    border-color: #007bff; /* Focus color */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Indicator Cards */
.indicator-cards .card[b-u2s48vqua1] {
    border: none;
    border-radius: 0.75rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .indicator-cards .card:hover[b-u2s48vqua1] {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

.indicator-cards .card-body[b-u2s48vqua1] {
    padding: 1.5rem;
}

.indicator-cards .card-title[b-u2s48vqua1] {
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.indicator-cards .card-text[b-u2s48vqua1] {
    font-size: 2.8rem;
    line-height: 1;
}

.indicator-cards .card i[b-u2s48vqua1] {
    font-size: 3rem;
    opacity: 0.3;
}

/* Order Cards */
/*.order-cards-container .g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.order-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    transition: all 0.3s ease-in-out;
    display: flex;*/ /* Make card a flex container */
    /*flex-direction: column;*/ /* Stack content vertically */
/*}

    .order-card .card-body {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;*/ /* Allow body to grow and fill space */
    /*}

    .order-card .card-title {
        font-size: 1.3rem;
        color: #343a40;
    }

    .order-card .small.text-muted {
        font-size: 0.85rem;
        color: #888 !important;
    }

    .order-card .order-meta p {
        font-size: 0.95rem;
        color: #555;
        display: flex;
        align-items: center;
    }

    .order-card .order-meta i {
        width: 20px;*/ /* Align icons */
        /*text-align: center;
    }*/

    /* List group for items */
    /*.order-card .list-group-flush {
        border-radius: 0.5rem;
        margin-top: 1rem;
        flex-grow: 1;*/ /* Allow list to grow */
    /*}

    .order-card .list-group-item {
        background-color: transparent;
        padding: 0.75rem 0 !important;
        font-size: 0.95rem;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }

        .order-card .list-group-item:last-child {
            border-bottom: none !important;
        }

    .order-card .item-description {
        font-weight: 500;
        color: #333;
    }

    .order-card .badge.bg-secondary {
        background-color: #6c757d !important;
        font-size: 0.75em;
        min-width: 25px;*/ /* ensure badges are uniform */
        /*text-align: center;
    }*/

/* Dispatch Buttons */
/*.dispatch-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 0.3rem;
    transition: background-color 0.2s ease;
}

    .dispatch-btn:hover {
        filter: brightness(1.1);
    }

.dispatch-all-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 0.4rem;
}

    .dispatch-all-btn:hover {
        background-color: #dc3545;
        color: #fff;
    }

.dispatched-tag {
    font-size: 0.85em;
    font-weight: 600;
    padding: 0.4em 0.8em;
}*/

/* Card State Colors */
/*.order-card.card-normal {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.order-card.card-warning {
    background-color: #fff3cd;*/ /* Bootstrap warning light */
    /*border-color: #ffc107 !important;*/ /* Bootstrap warning */
    /*animation: pulse-border-yellow 1.5s infinite alternate;
}

.order-card.card-danger {
    background-color: #f8d7da;*/ /* Bootstrap danger light */
    /*border-color: #dc3545 !important;*/ /* Bootstrap danger */
    /*animation: pulse-border-red 1.5s infinite alternate;
}

@keyframes pulse-border-yellow {
    0% {
        border-color: #ffc107;
    }

    100% {
        border-color: #e0a800;
    }
}

@keyframes pulse-border-red {
    0% {
        border-color: #dc3545;
    }

    100% {
        border-color: #c82333;
    }
}*/
/* Order Cards */
.order-cards-container .g-4[b-u2s48vqua1] {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.order-card[b-u2s48vqua1] {
    background-color: #ffffff; /* Default background for normal cards */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Default border for normal cards */
    border-radius: 0.75rem;
    transition: all 0.3s ease-in-out; /* Add transition for smooth hover */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Subtle default shadow */
}

    /* Hover effect for all order cards */
    .order-card:hover[b-u2s48vqua1] {
        transform: translateY(-5px); /* Lift the card slightly */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Enhance shadow on hover */
    }

    .order-card .card-body[b-u2s48vqua1] {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .order-card .card-title[b-u2s48vqua1] {
        font-size: 1.3rem;
        color: #343a40;
    }

    .order-card .small.text-muted[b-u2s48vqua1] {
        font-size: 0.85rem;
        color: #888 !important;
    }

    .order-card .order-meta p[b-u2s48vqua1] {
        font-size: 0.95rem;
        color: #555;
        display: flex;
        align-items: center;
    }

    .order-card .order-meta i[b-u2s48vqua1] {
        width: 20px;
        text-align: center;
    }

    /* List group for items */
    .order-card .list-group-flush[b-u2s48vqua1] {
        border-radius: 0.5rem;
        margin-top: 1rem;
        flex-grow: 1;
    }

    .order-card .list-group-item[b-u2s48vqua1] {
        background-color: transparent;
        padding: 0.75rem 0 !important;
        font-size: 0.95rem;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }

        .order-card .list-group-item:last-child[b-u2s48vqua1] {
            border-bottom: none !important;
        }

    .order-card .item-description[b-u2s48vqua1] {
        font-weight: 500;
        color: #333;
    }

    .order-card .badge.bg-secondary[b-u2s48vqua1] {
        background-color: #6c757d !important;
        font-size: 0.75em;
        min-width: 25px;
        text-align: center;
    }

/* Dispatch Buttons */
.dispatch-btn[b-u2s48vqua1] {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 0.3rem;
    transition: background-color 0.2s ease;
}

    .dispatch-btn:hover[b-u2s48vqua1] {
        filter: brightness(1.1);
    }

.dispatch-all-btn[b-u2s48vqua1] {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 0.4rem;
}

    .dispatch-all-btn:hover[b-u2s48vqua1] {
        background-color: #dc3545;
        color: #fff;
    }

.dispatched-tag[b-u2s48vqua1] {
    font-size: 0.85em;
    font-weight: 600;
    padding: 0.4em 0.8em;
}

/* Card State Colors */
/* Ensure these classes define their own background and border */
/* Ensure this is in your CSS file */

/* Card State Colors - Revisited for clarity */
.order-card.card-normal[b-u2s48vqua1] {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.order-card.card-warning[b-u2s48vqua1] {
    background-color: #fff3cd; /* Light yellow background */
    border-color: #ffc107 !important; /* Yellow border */
    /* Add the animation for warning cards if you want them to pulse too,
       otherwise, they will just change color */
    /* animation: pulse-border-yellow 1.5s infinite alternate; */
}

.order-card.card-danger[b-u2s48vqua1] {
    background-color: #f8d7da; /* Light red background */
    border-color: #dc3545 !important; /* Red border */
    animation: pulse-border-red-b-u2s48vqua1 1.5s infinite alternate; /* This is key! */
}

/* Keyframe Animations */
@keyframes pulse-border-yellow-b-u2s48vqua1 {
    0% {
        border-color: #ffc107;
    }

    100% {
        border-color: #e0a800;
    }
}

@keyframes pulse-border-red-b-u2s48vqua1 {
    0% {
        border-color: #dc3545;
    }

    50% {
        border-color: #c82333;
    }
    /* Added a 50% state for a more distinct pulse */
    100% {
        border-color: #dc3545;
    }
}

/* If you also want a background pulse (more noticeable) for danger cards: */
@keyframes pulse-background-red-b-u2s48vqua1 {
    0% {
        background-color: #f8d7da;
    }

    50% {
        background-color: #ffcccc;
    }
    /* Lighter red for the pulse peak */
    100% {
        background-color: #f8d7da;
    }
}

/* Example of combining border and background pulse for danger cards */
.order-card.card-danger[b-u2s48vqua1] {
    /* Existing border animation */
    animation: pulse-border-red-b-u2s48vqua1 1.5s infinite alternate;
    /* New background animation */
    animation: pulse-background-red-b-u2s48vqua1 1.5s infinite alternate;
    /* To combine both, use a comma-separated list for the 'animation' property: */
    /* animation: pulse-border-red 1.5s infinite alternate, pulse-background-red 1.5s infinite alternate; */
    /* Or assign directly to specific animation properties: */
    animation-name: pulse-border-red-b-u2s48vqua1, pulse-background-red-b-u2s48vqua1;
    animation-duration: 1.5s, 1.5s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, alternate;
}



/* Sidebar Summary */
.summary-sidebar .card[b-u2s48vqua1] {
    background-color: #ffffff;
}

.summary-sidebar .card-header[b-u2s48vqua1] {
    background-color: #343a40 !important; /* Dark header for contrast */
    color: #ffffff;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-list-container[b-u2s48vqua1] {
    max-height: calc(100vh - 250px); /* Adjust height based on viewport */
    overflow-y: auto;
    padding: 0.5rem !important;
}

.summary-sidebar .list-group-item[b-u2s48vqua1] {
    padding: 0.6rem 0.5rem !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

    .summary-sidebar .list-group-item:last-child[b-u2s48vqua1] {
        border-bottom: none !important;
    }

    .summary-sidebar .list-group-item span:first-child[b-u2s48vqua1] {
        color: #333;
    }

.summary-sidebar .badge[b-u2s48vqua1] {
    min-width: 30px;
    font-size: 0.85em;
}

    .summary-sidebar .badge.bg-success[b-u2s48vqua1] {
        background-color: #28a745 !important;
    }

    .summary-sidebar .badge.bg-warning[b-u2s48vqua1] {
        background-color: #ffc107 !important;
        color: #212529 !important; /* Ensure text is dark on yellow */
    }

/* Utility Classes */
.border-bottom-dashed[b-u2s48vqua1] {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1) !important;
}

.rounded-lg[b-u2s48vqua1] {
    border-radius: 0.75rem !important;
}

.bg-light-gray[b-u2s48vqua1] {
    background-color: #f8f9fa !important;
}

/* Font Awesome Icons */
.fa-utensils[b-u2s48vqua1], .fa-clipboard-list[b-u2s48vqua1], .fa-check-circle[b-u2s48vqua1], .fa-hourglass-half[b-u2s48vqua1],
.fa-receipt[b-u2s48vqua1], .fa-clock[b-u2s48vqua1], .fa-hourglass-start[b-u2s48vqua1], .fa-stopwatch[b-u2s48vqua1],
.fa-chair[b-u2s48vqua1], .fa-user[b-u2s48vqua1], .fa-building[b-u2s48vqua1], .fa-check[b-u2s48vqua1], .fa-concierge-bell[b-u2s48vqua1], .fa-fire-alt[b-u2s48vqua1] {
    color: inherit; /* Use parent's color by default */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/VantasticHubMonitorOcupacionPage.razor.rz.scp.css */
body[b-bxtaiel0jw] {
    background-color: #f0f2f5;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding-top: 56px; /* Ajuste para la barra de navegación fija */
}

/* Layout del Dashboard */
.dashboard-layout[b-bxtaiel0jw] {
    min-height: 100vh;
}

.main-content-row[b-bxtaiel0jw] {
    padding-top: 5rem;
}

/* Sidebar */
.sidebar[b-bxtaiel0jw] {
    background-color: #f8f9fa;
    border-right: 1px solid #e9ecef;
    min-height: calc(100vh - 56px);
    position: sticky;
    top: 56px;
    z-index: 1020;
}

.sidebar-divider[b-bxtaiel0jw] {
    border-color: #e9ecef;
}

.op-list .list-group-item[b-bxtaiel0jw] {
    transition: transform 0.2s ease-in-out;
}

    .op-list .list-group-item:hover[b-bxtaiel0jw] {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.08);
    }

.emp-card[b-bxtaiel0jw] {
    border: none;
    transition: transform 0.2s ease-in-out;
}

    .emp-card:hover[b-bxtaiel0jw] {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.08);
    }

.avatar[b-bxtaiel0jw] {
    background-color: #f8f9fa;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Área de Contenido Principal */
.content-area[b-bxtaiel0jw] {
    background-color: #f0f2f5;
    padding: 0.75rem; /* reducido (en lugar de 1.5rem o 2rem) */
    width: 79%; /* ocupa el 79% del ancho */
    box-sizing: border-box; /* evita que padding sume más ancho */
}
@media (max-width: 992px) {
    .content-area[b-bxtaiel0jw] {
        width: 100%;
        padding: 0.5rem; /* aún más reducido en móviles */
    }
}
/* Cards de KPIs */
.kpi-card[b-bxtaiel0jw] {
    border: none;
    transition: transform 0.3s ease;
    border-radius: 0.5rem;
}

    .kpi-card:hover[b-bxtaiel0jw] {
        transform: translateY(-5px);
    }
.kpi-total .kpi-icon svg[b-bxtaiel0jw] {
    color: #2e7d32;
}

.kpi-locker[b-bxtaiel0jw] {
    background-color: #e3f2fd;
    color: #0d47a1;
}

    .kpi-locker .kpi-icon svg[b-bxtaiel0jw] {
        color: #1e88e5;
    }

.kpi-doble[b-bxtaiel0jw] {
    background-color: #fff3e0;
    color: #e65100;
}

    .kpi-doble .kpi-icon svg[b-bxtaiel0jw] {
        color: #ff8f00;
    }

.kpi-grande[b-bxtaiel0jw] {
    background-color: #fbe9e7;
    color: #bf360c;
}

    .kpi-grande .kpi-icon svg[b-bxtaiel0jw] {
        color: #d84315;
    }

.kpi-muygrande[b-bxtaiel0jw] {
    background-color: #f3e5f5;
    color: #4a148c;
}

    .kpi-muygrande .kpi-icon svg[b-bxtaiel0jw] {
        color: #8e24aa;
    }

.kpi-libre[b-bxtaiel0jw] {
    background-color: #e1f5fe;
    color: #01579b;
}

    .kpi-libre .kpi-icon svg[b-bxtaiel0jw] {
        color: #0277bd;
    }
    /*.kpi-card.kpi-total {
        background-color: #e8f5e9;
        color: #1b5e20;
    }

    .kpi-card.kpi-custodia {
        background: linear-gradient(45deg, #ffc107, #e0a800);
        color: #000;
    }

    .kpi-card.kpi-anulados {
        background: linear-gradient(45deg, #dc3545, #c82333);
        color: #fff;
    }

    .kpi-card.kpi-facturados {
        background: linear-gradient(45deg, #198754, #157347);
        color: #fff;
    }

.kpi-icon {
    font-size: 2.5rem;
    line-height: 1;
}*/

/* Paneles de Tablas y Filtros */
.panel-section[b-bxtaiel0jw] {
    border: none;
    border-radius: 0.75rem;
}

    .panel-section .card-header[b-bxtaiel0jw] {
        background-color: #fff;
        border-bottom: 1px solid #e9ecef;
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
    }

/* Badges de Estado */
.badge[b-bxtaiel0jw] {
    padding: 0.5em 0.8em;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0.5rem;
}

    .badge.bg-warning[b-bxtaiel0jw] {
        background-color: #ffc107 !important;
        color: #000 !important;
    }

    .badge.bg-danger[b-bxtaiel0jw] {
        background-color: #dc3545 !important;
        color: #fff !important;
    }

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

/* Ajustes para Syncfusion y Dropdowns */
.e-control.e-dropdownlist .e-input[b-bxtaiel0jw],
.e-control.e-datepicker .e-input[b-bxtaiel0jw],
.e-control.e-daterangepicker .e-input[b-bxtaiel0jw] {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}
/* ------------------------------------------- */
/* --- ESTRUCTURA Y TIPOGRAFÍA GENERAL --- */
/* ------------------------------------------- */
/*body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;*/ /* Fondo general */
    /*color: #2c3e50;*/ /* Texto principal */
/*}


.main-layout {
    display: grid;
    grid-template-areas:
        "header header"
        "kpis kpis"
        "content sidebar-fixed";
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    padding: 2rem;
    max-width: 100%;
    box-sizing: border-box;
}

.topbar {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.logo {
    font-size: 3rem;
    color: #3498db;*/ /* Azul vibrante para acentos */
/*}

.titles h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.titles small {
    font-size: 1rem;
    color: #7f8c8d;*/ /* Texto secundario */
/*}

.kpis {
    grid-area: kpis;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.sidebar-divider {
    border: none;
    height: 1px;
    background-color: #e0e0e0;*/ /* Use a color from your existing palette */
    /*margin: 2rem 0;*/ /* Adjust spacing as needed */
/*}
.sidebar-fixed {
    grid-area: sidebar-fixed;
    background-color: #f2f4f6;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    height: fit-content;
    position: sticky;
    top: 2rem;
}*/

/* ------------------------------------------- */
/* --- ESTILOS DE COMPONENTES --- */
/* ------------------------------------------- */

/* Tarjetas KPI */
/*.kpi-card {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    .kpi-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

.kpi-icon {
    font-size: 2.5rem;
    margin-right: 1.5rem;
    line-height: 1;
}

.kpi-body span {
    display: block;
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-bottom: 0.25rem;
}

.kpi-body strong {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}*/

/* Colores de los KPIs */
/*.kpi-total {
    background-color: #e8f5e9;
    color: #1b5e20;
}

    .kpi-total .kpi-icon svg {
        color: #2e7d32;
    }

.kpi-locker {
    background-color: #e3f2fd;
    color: #0d47a1;
}

    .kpi-locker .kpi-icon svg {
        color: #1e88e5;
    }

.kpi-doble {
    background-color: #fff3e0;
    color: #e65100;
}

    .kpi-doble .kpi-icon svg {
        color: #ff8f00;
    }

.kpi-grande {
    background-color: #fbe9e7;
    color: #bf360c;
}

    .kpi-grande .kpi-icon svg {
        color: #d84315;
    }

.kpi-muygrande {
    background-color: #f3e5f5;
    color: #4a148c;
}

    .kpi-muygrande .kpi-icon svg {
        color: #8e24aa;
    }

.kpi-libre {
    background-color: #e1f5fe;
    color: #01579b;
}

    .kpi-libre .kpi-icon svg {
        color: #0277bd;
    }*/

/* Paneles y filtros */
/*.panel {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

    .panel-head h2 {
        color: #34495e;
        font-weight: 600;
        margin: 0;
    }

.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    align-items: end;
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.filter {
    display: flex;
    flex-direction: column;
}

    .filter label {
        font-size: 0.9rem;
        color: #7f8c8d;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }*/

/* Botones personalizados */
/*.e-custom {
    font-weight: 600;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

    .e-custom.e-primary {
        background-color: #3498db !important;
        border-color: #3498db !important;
        color: #ffffff !important;
    }

        .e-custom.e-primary:hover {
            background-color: #2980b9 !important;
            border-color: #2980b9 !important;
        }

    .e-custom.e-apply {
        background-color: #34495e !important;
        color: #ffffff !important;
        border: none;
        font-weight: 600;
    }

        .e-custom.e-apply:hover {
            background-color: #2c3e50 !important;
        }

    .e-custom.e-clear {
        background-color: transparent !important;
        color: #5d7890 !important;
        border: none;
        box-shadow: none;
    }*/

/* Badges de estado */
/*.badge {
    padding: 0.4em 0.8em;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    text-align: center;
    white-space: nowrap;
}

.badge-pending {
    background-color: #fff3e0;
    color: #ff9800;
}
.badge-alert {
    background-color: darkred;
    color: white;
}
.badge-invoiced {
    background-color: #e8f5e9;
    color: #4caf50;
}*/

/* Resumen por empleado */
/*.sidebar {
    padding: 0;
}

    .sidebar h3 {
        color: #34495e;
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 2rem;
    }

.emp-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.emp-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .emp-card:hover {
        transform: scale(1.02);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

.emp-top {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.avatar {
    font-size: 2rem;
    background-color: #3498db;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2c3e50;
}

.emp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    font-size: 0.9rem;
    color: #7f8c8d;
}

    .emp-stats div {
        text-align: center;
    }

    .emp-stats strong {
        display: block;
        font-size: 1.2rem;
        color: #34495e;
        margin-top: 0.25rem;
        font-weight: 700;
    }*/

/* Estilo para las tablas de Syncfusion */
/*.e-grid {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

    .e-grid .e-gridheader {
        background-color: #34495e;
        color: #ffffff;
        border-bottom: none;
    }

        .e-grid .e-gridheader .e-headercell {
            background-color: #34495e;
            color: #ffffff;
            border-color: rgba(255, 255, 255, 0.2);
            font-weight: 600;
            padding: 1rem;
        }

    .e-grid .e-gridcontent {
        background-color: #ffffff;
    }

    .e-grid .e-row {
        border-color: #e0e0e0;
    }

        .e-grid .e-row:hover {
            background-color: #f8f9fa;
        }*/

/* ------------------------------------------- */
/* --- RESPONSIVIDAD --- */
/* ------------------------------------------- */
/* Nuevo Resumen de Operaciones por Operador */
/*@media (max-width: 1024px) {
    .main-layout {
        grid-template-areas:
            "header header"
            "kpis kpis"
            "content content"
            "sidebar-fixed sidebar-fixed";
        grid-template-columns: 1fr;
    }
}*/

/* Ajuste para pantallas pequeñas (celulares) */
/*@media (max-width: 768px) {
    .main-layout {
        gap: 1rem;
        padding: 1rem;
    }
}*/
/* Tablets (hasta 1024px) */
/*@media (max-width: 1024px) {
    .main-layout {
        grid-template-areas:
            "header header"
            "kpis kpis"
            "content content"
            "sidebar-fixed sidebar-fixed";
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .sidebar-fixed {
        position: static;
        padding: 1.5rem;
    }

    .filters {
        grid-template-columns: 1fr;
    }
}*/

/* Móviles (hasta 768px) */
/*@media (max-width: 768px) {
    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .titles h1 {
        font-size: 1.5rem;
    }

    .titles small {
        font-size: 0.9rem;
    }

    .kpis {
        grid-template-columns: 1fr;
    }

    .filters {
        padding: 1rem;
    }

    .panel {
        padding: 1rem;
    }

    .panel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .e-grid {*/
        /* Para hacer la tabla deslizable horizontalmente en móviles */
        /*overflow-x: auto;
    }
}
.op-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.op-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.op-top {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.op-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #34495e;
}

.op-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.op-stat {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.op-ok {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.op-free {
    background-color: #e3f2fd;
    color: #1e88e5;
}

.op-canceled {
    background-color: #fbe9e7;
    color: #d84315;
}

.bitacora-dialog .e-dlg-header {
    background-color: #34495e;
    color: #ffffff;
    font-weight: 600;
}

.bitacora-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.bitacora-item {
    display: flex;
    flex-direction: column;
}

    .bitacora-item label {
        font-weight: 600;
        color: #34495e;
        margin-bottom: 0.25rem;
    }

    .bitacora-item span {
        font-size: 0.95rem;
        color: #5d7890;
    }*/
/* _content/Vantastic.Mono.Web.Blazor/Pages/Reportes/VantasticHubPage.razor.rz.scp.css */

.container[b-rokcdgo28e] {
    display: grid;
    grid-template-columns: 5fr 1fr;  
    /*height: calc(100vh - 100px);*/
    width: 100vw;
    overflow: hidden;
    min-width:fit-content;
}

.map-container[b-rokcdgo28e] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
}

.map-header[b-rokcdgo28e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .map-header h2[b-rokcdgo28e] {
        font-size: 1rem;
        font-weight: 600;
        color: #1f2937;
    }

    .map-header button[b-rokcdgo28e] {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

.map[b-rokcdgo28e] {
    flex: 1;
    border-radius: 12px;
    border: 1px solid #ccc;
    width: 100%;
    height: 100%;
    min-height: 600px;
}

.sidebar[b-rokcdgo28e] {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background-color: #f9fafb;
    border-left: 1px solid #ddd;
    overflow-y: auto;
}

.users-list[b-rokcdgo28e] {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

    .users-list h2[b-rokcdgo28e] {
        font-size: 0.9rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
    }

.user-card[b-rokcdgo28e] {
    background-color: #fff;
    border-radius: 6px;
    padding: 0.4rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.75rem;
}

.user-info[b-rokcdgo28e] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #1f2937;
}

    .user-info .fas[b-rokcdgo28e] {
        font-size: 0.9rem;
    }

.user-actions[b-rokcdgo28e] {
    display: flex;
    gap: 0.25rem;
}

.input-message[b-rokcdgo28e] {
    flex: 1;
    padding: 0.2rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.7rem;
}

.btn-send[b-rokcdgo28e] {
    background-color: #3b82f6;
    color: white;
    padding: 0.2rem 0.4rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
}

.btn-send-all[b-rokcdgo28e] {
    background-color: #10b981;
    color: white;
    padding: 0.2rem 0.4rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
}

.notifications[b-rokcdgo28e] {
    padding: 0.4rem;
    background-color: #e5e7eb;
    border-radius: 6px;
    max-height: 120px;
    overflow-y: auto;
    font-size: 0.7rem;
}


/*@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
        height: auto;
        min-width: 100%;
    }

    .map-container {
        height: auto;
        min-height: 400px;
        min-width:100%;
    }

    .map {
        min-height: 400px;
    }

    .sidebar {
        height: auto;
        min-width: 100%;
        border-left: none;
        border-top: 1px solid #ddd;
    }
}*/
@media (max-width: 768px) {
    .container[b-rokcdgo28e] {
        display: flex;
        flex-direction: column;
        height: auto;
        min-width: 100%;
        width: 100%;
        align-items: stretch; /* Asegura que los hijos ocupen todo el ancho */
    }

    .map-container[b-rokcdgo28e] {
        height: auto;
        min-height: 400px;
        width: 100%;
        padding: 1rem; /* mantiene el padding lateral */
        box-sizing: border-box;
        align-items: center; /* centra el contenido interno si es necesario */
    }

    .map[b-rokcdgo28e] {
        min-height: 400px;
        width: 100%; /* que ocupe todo el ancho disponible */
    }

    .sidebar[b-rokcdgo28e] {
        height: auto;
        width: 100%;
        min-width: 100%;
        border-left: none;
        border-top: 1px solid #ddd;
        padding: 0.75rem;
        box-sizing: border-box;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/SIRE/SireMainPage.razor.rz.scp.css */
.toolbar-item[b-b7h0y2b4wp] {
    margin-right: 10px;
}

/*.grid-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.chart-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

.chart-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    width: calc(50% - 30px);*/ /* Adjust as needed for spacing */
    /*min-width: 300px;*/ /* Ensure a minimum width for responsiveness */
    /*box-sizing: border-box;
}

@media (max-width: 768px) {
    .chart-card {
        width: 100%;*/ /* Full width on smaller screens */
    /*}
}*/
.section-container[b-b7h0y2b4wp] {
    margin-bottom: 30px;
    margin-top: 20px;
}

.section-title[b-b7h0y2b4wp] {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 10px;
    border-left: 4px solid #4CAF50;
    padding-left: 10px;
    color: #333;
}

/*.charts-group-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 20px 0 10px 0;
    border-left: 4px solid #2196F3;
    padding-left: 10px;
    color: #444;
}

.chart-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.chart-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    width: calc(50% - 10px);
    min-width: 280px;
    box-sizing: border-box;
}*/
/*.chart-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
}

.chart-card {
    flex: 1 1 25%;
    min-width: 200px;
    max-width: 25%;
}

.charts-group-title {
    font-weight: bold;
    margin: 10px 0 5px 0;
}

@media (max-width: 768px) {
    .chart-card {
        width: 100%;
    }
}*/
/*.chart-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.chart-card {
    flex: 1 1 25%;
    min-width: 250px;
    max-width: 25%;
}

.charts-group-title {
    font-weight: bold;
    margin: 10px 0 5px 0;
}*/

/* Responsive: 2 charts per row on tablets */
/*@media (max-width: 1024px) {
    .chart-card {
        flex: 1 1 48%;
        max-width: 48%;
    }
}*/

/* Responsive: 1 chart per row on phones */
/*@media (max-width: 600px) {
    .chart-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}*/
/*.charts-group {
    margin-bottom: 20px;
}

.charts-group-title {
    font-weight: bold;
    font-size: 16px;
    margin: 10px 0;
}

.chart-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.chart-card {
    flex: 1 1 300px;
    max-width: 300px;
}*/

/* Responsive: 2 por fila en tablet */
/*@media (max-width: 1024px) {
    .chart-card {
        flex: 1 1 45%;
    }
}*/

/* Responsive: 1 por fila en móvil */
/*@media (max-width: 600px) {
    .chart-card {
        flex: 1 1 100%;
    }
}*/
.chart-wrapper[b-b7h0y2b4wp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.chart-group[b-b7h0y2b4wp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 48%; /* 2 grupos por fila en pantallas grandes */
    min-width: 300px;
}

/*.chart-title {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 16px;
}*/
.chart-title[b-b7h0y2b4wp] {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 20px 0 10px 0;
    color: #333;
    background-color: #f5f5f5; /* fondo sutil gris claro */
    padding: 8px 16px;
    border-radius: 6px;
    text-shadow: 1px 1px 2px rgba(200, 200, 200, 0.6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* sombra externa ligera */
}

.chart-pair[b-b7h0y2b4wp] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chart-card[b-b7h0y2b4wp] {
    flex: 1 1 48%; /* 2 gráficos por fila */
    min-width: 350px;
}

@media (max-width: 768px) {
    .chart-group[b-b7h0y2b4wp] {
        flex: 1 1 100%;
    }

    .chart-card[b-b7h0y2b4wp] {
        flex: 1 1 100%;
    }
}

/* _content/Vantastic.Mono.Web.Blazor/Pages/SIRE/SireRCEPage.razor.rz.scp.css */
.section-title[b-33yilpgtmu] {
    border-left: 5px solid #0dcaf0; /* celeste Bootstrap (info) */
    padding-left: 12px;
    font-size: 1.25rem; /* equivalente a text-lg */
    font-weight: 600;
    color: #343a40; /* gris oscuro Bootstrap */
    border-radius: 0.375rem; /* rounded */
    background-color: #f8f9fa; /* gris claro */
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 1rem;
}
.sire-comparison-container .card-header[b-33yilpgtmu] {
    background-color: #f8f9fa; /* Light background for header */
    border-bottom: 1px solid #e9ecef; /* Light border */
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
}

.sire-comparison-container .section-title[b-33yilpgtmu] {
    font-size: 1.1rem;
    color: #343a40;
    text-align: center;
    font-weight: 600;
}

.sire-comparison-container .table[b-33yilpgtmu] {
    margin-bottom: 0; /* Remove default table margin */
}

    .sire-comparison-container .table td[b-33yilpgtmu], .sire-comparison-container .table th[b-33yilpgtmu] {
        padding: 0.5rem; /* Compact table cells */
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/SIRE/SireRVIEPage.razor.rz.scp.css */
.section-title[b-nnl1wtsjg1] {
    border-left: 5px solid #0dcaf0; /* celeste Bootstrap (info) */
    padding-left: 12px;
    font-size: 1.25rem; /* equivalente a text-lg */
    font-weight: 600;
    color: #343a40; /* gris oscuro Bootstrap */
    border-radius: 0.375rem; /* rounded */
    background-color: #f8f9fa; /* gris claro */
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 1rem;
}

.sire-comparison-container .card-header[b-nnl1wtsjg1] {
    background-color: #f8f9fa; /* Light background for header */
    border-bottom: 1px solid #e9ecef; /* Light border */
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
}

.sire-comparison-container .section-title[b-nnl1wtsjg1] {
    font-size: 1.1rem;
    color: #343a40;
    text-align: center;
    font-weight: 600;
}

.sire-comparison-container .table[b-nnl1wtsjg1] {
    margin-bottom: 0; /* Remove default table margin */
}

    .sire-comparison-container .table td[b-nnl1wtsjg1], .sire-comparison-container .table th[b-nnl1wtsjg1] {
        padding: 0.5rem; /* Compact table cells */
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/SplashScreen.razor.rz.scp.css */
/*body {
    margin: 0;
    padding: 0;
    background-color: black;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}


#cinematic-splash {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
    position: relative;
    animation: fadeOut 2s ease-in-out 4s forwards;
}

.cinematic-text {
    text-align: center;
    position: relative;
}

.vantastic {
    font-size: 80px;
    font-weight: bold;
    color: gold;
    text-shadow: 0 0 10px #fff, 0 0 20px gold, 0 0 30px orange, 0 0 40px gold;
    animation: vantasticScale 4s ease-in-out forwards, shimmer 2s linear infinite;
}

.bit-container {
    position: relative;
    margin-top: 20px;
    display: inline-block;
    animation: bitEntrance 4s ease-in-out forwards;
}

.bit {
    font-size: 50px;
    font-weight: bold;
    color: gold;
    border: 3px solid gold;
    border-radius: 50%;
    padding: 20px 30px;
    text-shadow: 0 0 10px #fff, 0 0 20px gold, 0 0 30px orange, 0 0 40px gold;
    animation: shimmer 2s linear infinite;
}*/

/* Animations */
/*@keyframes vantasticScale {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(50px);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) translateY(0);
    }

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

@keyframes bitEntrance {
    0% {
        opacity: 0;
        transform: scale(0) translateY(50px);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }

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

@keyframes shimmer {
    0% {
        text-shadow: 0 0 10px #fff, 0 0 20px gold, 0 0 30px orange, 0 0 40px gold;
    }

    50% {
        text-shadow: 0 0 20px #fff, 0 0 30px gold, 0 0 40px orange, 0 0 50px gold;
    }

    100% {
        text-shadow: 0 0 10px #fff, 0 0 20px gold, 0 0 30px orange, 0 0 40px gold;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}*/


#cinematic-splash[b-krskc69rbq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

.cinematic-text[b-krskc69rbq] {
    text-align: center;
    font-family: 'Arial', sans-serif;
    color: gold;
}

 
.vantastic[b-krskc69rbq] {
    font-size: 10rem;
    font-weight: bold;
    color: gold;
    text-shadow: 0 5px 10px rgba(255, 215, 0, 0.7), 0 10px 20px rgba(255, 215, 0, 0.5), 0 15px 30px rgba(255, 215, 0, 0.3);
    animation: vantastic-animation-b-krskc69rbq 2s ease-out forwards;
}

 
@keyframes vantastic-animation-b-krskc69rbq {
    0% {
        transform: scale(0.5) rotateX(-90deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.5) rotateX(0deg);
        opacity: 1;
    }

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

 
.bit-container[b-krskc69rbq] {
    display: block;  
}

.bit[b-krskc69rbq] {
    font-size: 8rem;
    font-weight: bold;
    color: gold;
    text-shadow: 0 5px 10px rgba(255, 215, 0, 0.7), 0 10px 20px rgba(255, 215, 0, 0.5), 0 15px 30px rgba(255, 215, 0, 0.3);
    animation: bit-animation-b-krskc69rbq 2s ease-out forwards;
}

 
@keyframes bit-animation-b-krskc69rbq {
    0% {
        transform: scale(0.5) rotateY(-90deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.5) rotateY(0deg);
        opacity: 1;
    }

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

 
@keyframes fade-out-b-krskc69rbq {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Media Query para pantallas pequeñas */
@media (max-width: 800px) {
    #cinematic-splash[b-krskc69rbq] {
        /*height: 70%;  Ajusta la altura 
        width: 90%;  Ajusta el ancho 
        padding: 10px;  Agrega un pequeño margen */
    }

        #cinematic-splash .cinematic-text[b-krskc69rbq] {
            font-size: 2.5rem;  /*Reduce el tamaño del texto */
        }
        #cinematic-splash .bit[b-krskc69rbq] {
            font-size: 3rem;
        }
        #cinematic-splash .vantastic[b-krskc69rbq] {
            font-size: 4rem;
        }
}
/*#cinematic-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 2s ease-in-out;
    opacity: 1;*/ /* Visible al inicio */
/*}*/

    /* Cuando esté oculto */
    /*#cinematic-splash.hidden {
        opacity: 0;*/ /* Desaparece con transición */
        /*pointer-events: none;
        visibility: hidden;
    }*/

/* Estilos de texto */
/*.cinematic-text {
    text-align: center;
    color: gold;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(255, 215, 0, 0.8);
}

.vantastic, .bit-container {
    font-size: 3rem;
    display: inline-block;
    animation: fade-in-out 2s ease-in-out forwards;
}

.bit-container {
    margin-top: 20px;
    display: none;
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}*/
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/CotizacionListPage.razor.rz.scp.css */
.grid-container[b-cz5u93nqy8] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 8rem);
}
.form-row[b-cz5u93nqy8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-cz5u93nqy8] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-cz5u93nqy8] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-cz5u93nqy8] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-cz5u93nqy8] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-cz5u93nqy8],
    .custom-button[b-cz5u93nqy8] {
        width: 100%;
    }
}
.page-header[b-cz5u93nqy8] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-cz5u93nqy8] {
        width: 100%;
    }

    .page-header .page-header-title[b-cz5u93nqy8] {
        display: block;
    }

    .page-header h4[b-cz5u93nqy8], .page-header .h4[b-cz5u93nqy8] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-cz5u93nqy8] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.detail-template[b-cz5u93nqy8] {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .detail-template h5[b-cz5u93nqy8] {
        color: #0d6efd;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .detail-template .table[b-cz5u93nqy8] {
        width: 100%;
        border-collapse: collapse;
    }

        .detail-template .table th[b-cz5u93nqy8],
        .detail-template .table td[b-cz5u93nqy8] {
            border: 1px solid #dee2e6;
            padding: 8px;
            font-size: 0.95rem;
        }

        .detail-template .table thead[b-cz5u93nqy8] {
            background-color: #f8f9fa;
        }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/CotizacionPage.razor.rz.scp.css */
.grid-container[b-tpgneg8whs] {
    overflow-y:hidden;
    margin-top: 0px;
   
}
.custom-container[b-tpgneg8whs] {
    
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;*/ /* Altura completa de la ventana */
                     margin:0px;
padding:10px;
}
.page-header[b-tpgneg8whs] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}
    .page-header .page-block[b-tpgneg8whs] {
        width: 100%;
    }
    .page-header .page-header-title[b-tpgneg8whs] {
        display: block;
    }
    .page-header h4[b-tpgneg8whs], .page-header .h4[b-tpgneg8whs] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }
    .page-header .breadcrumb[b-tpgneg8whs] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.card[b-tpgneg8whs] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f, 0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}
.heading-style[b-tpgneg8whs] {
    background-color: #0000000f;
    border-inline-start: 2px solid #b6ff00;
    border-radius: 3px;
    padding: 6px;
    padding-inline-start: 8px;
    margin-bottom: 14px;
}
.heading-style h3[b-tpgneg8whs] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.total-order[b-tpgneg8whs] {
    max-width: 430px;
    width: 100%;
    margin: 10px 0 30px auto;
}
    .total-order ul[b-tpgneg8whs] {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: baseline;
    }

p[b-tpgneg8whs], ul:not(.list-unstyled)[b-tpgneg8whs], ol[b-tpgneg8whs] {
    line-height: 22px;
}
.total-order ul li:first-child[b-tpgneg8whs] {
    border-top: 1px solid #00000014;
}

.total-order ul li[b-tpgneg8whs] {
    border: 1px solid #00000014;
    border-top: 0;
    display: flex;
}
    .total-order ul li h4[b-tpgneg8whs] {
        width: 50%;
        color: var(--colorTextLight);
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border-right: 1px solid #00000014;
        background: var(--colorSurface);
        margin-bottom: 0;
    }

h4[b-tpgneg8whs] {
    font-size: 17px;
}

h1[b-tpgneg8whs], h2[b-tpgneg8whs], h3[b-tpgneg8whs], h4[b-tpgneg8whs], h5[b-tpgneg8whs], h6[b-tpgneg8whs] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}
.total-order ul li h5[b-tpgneg8whs] {
    color: var(--colorTextPrimary);
    font-size: 14px;
    padding: 10px;
    font-weight: 700;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

h1[b-tpgneg8whs], h2[b-tpgneg8whs], h3[b-tpgneg8whs], h4[b-tpgneg8whs], h5[b-tpgneg8whs], h6[b-tpgneg8whs] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.flex-container[b-tpgneg8whs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-tpgneg8whs] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-tpgneg8whs] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-tpgneg8whs] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-tpgneg8whs], .textbox-wrapper[b-tpgneg8whs] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}
.loading-overlay[b-tpgneg8whs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-tpgneg8whs] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-tpgneg8whs 1s linear infinite;
}

@keyframes spin-b-tpgneg8whs {
    to {
        transform: rotate(360deg);
    }
}
fieldset[b-tpgneg8whs] {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
}

legend[b-tpgneg8whs] {
    font-size: 1rem;
    font-weight: 600;
    padding: 0 8px;
}

/* Mobile-first approach: hide text labels by default */
.responsive-button-group .btn-label[b-tpgneg8whs] {
    display: none;
}

/* Show only icons in small screens for the main toolbar buttons */
.responsive-button-group .e-btn .fas[b-tpgneg8whs] {
    margin-right: 0 !important; /* Remove any default margin for icons */
}

/* Styles for mobile/tablet floating dropdown button */
@media (max-width: 992px) {
    .mobile-dropdown-fixed[b-tpgneg8whs] {
        position: relative;
       /* bottom: 20px;
        right: 20px;*/
        z-index: 9999;
        background-color: transparent;
        border-radius: 50%;
        padding: 12px;
       /* box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        animation: pulse 1.4s infinite;*/
    }

        .mobile-dropdown-fixed .e-btn[b-tpgneg8whs] {
            border-radius: 50%;
            padding: 14px;
        }

    @keyframes pulse-b-tpgneg8whs {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

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

    /* Hide the regular button group on small screens */
    .responsive-button-group[b-tpgneg8whs] {
        display: none;
    }

    /* Ensure dropdown popup has a decent width on mobile */
    .mobile-dropdown .e-dropdown-popup ul[b-tpgneg8whs] {
        min-width: 180px;
    }

    /* Show the icon-only group on small screens */
    .responsive-icon-group[b-tpgneg8whs] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: nowrap;
    }
}

/* Styles for desktop screens (min-width: 993px for d-lg-block) */
@media (min-width: 993px) {
    .mobile-dropdown-fixed[b-tpgneg8whs] {
        display: none; /* Hide the floating dropdown on large screens */
    }

    .responsive-button-group[b-tpgneg8whs] {
        display: flex; /* Show the full button group on large screens */
        gap: 0.5rem;
        align-items: center;
        flex-wrap: nowrap;
    }

        .responsive-button-group .btn-label[b-tpgneg8whs] {
            display: inline; /* Show text labels on large screens */
            margin-left: 5px; /* Add margin next to icon */
        }

    .responsive-icon-group[b-tpgneg8whs] {
        display: none; /* Hide the icon-only group on large screens */
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/DocumentosElectronicosPage.razor.rz.scp.css */
.grid-container[b-x5lnqm4x4b] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width:100%;
    /*height: calc(100vh - 8rem);*/
}

.form-row[b-x5lnqm4x4b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-x5lnqm4x4b] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-x5lnqm4x4b] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-x5lnqm4x4b] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-x5lnqm4x4b] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-x5lnqm4x4b],
    .custom-button[b-x5lnqm4x4b] {
        width: 100%;
    }
}
.page-header[b-x5lnqm4x4b] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-x5lnqm4x4b] {
        width: 100%;
    }

    .page-header .page-header-title[b-x5lnqm4x4b] {
        display: block;
    }

    .page-header h4[b-x5lnqm4x4b], .page-header .h4[b-x5lnqm4x4b] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-x5lnqm4x4b] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.detail-template[b-x5lnqm4x4b] {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .detail-template h5[b-x5lnqm4x4b] {
        color: #0d6efd;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .detail-template .table[b-x5lnqm4x4b] {
        width: 100%;
        border-collapse: collapse;
    }

        .detail-template .table th[b-x5lnqm4x4b],
        .detail-template .table td[b-x5lnqm4x4b] {
            border: 1px solid #dee2e6;
            padding: 8px;
            font-size: 0.95rem;
        }

        .detail-template .table thead[b-x5lnqm4x4b] {
            background-color: #f8f9fa;
        }

/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/GuiaRemisionListPage.razor.rz.scp.css */
.grid-container[b-xc7fq9ki8a] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 8rem);    
}
.form-row[b-xc7fq9ki8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-xc7fq9ki8a] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-xc7fq9ki8a] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-xc7fq9ki8a] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-xc7fq9ki8a] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-xc7fq9ki8a],
    .custom-button[b-xc7fq9ki8a] {
        width: 100%;
    }
}
.detail-template[b-xc7fq9ki8a] {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .detail-template h5[b-xc7fq9ki8a] {
        color: #0d6efd;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .detail-template .table[b-xc7fq9ki8a] {
        width: 100%;
        border-collapse: collapse;
    }

        .detail-template .table th[b-xc7fq9ki8a],
        .detail-template .table td[b-xc7fq9ki8a] {
            border: 1px solid #dee2e6;
            padding: 8px;
            font-size: 0.95rem;
        }

        .detail-template .table thead[b-xc7fq9ki8a] {
            background-color: #f8f9fa;
        }

/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/GuiaRemisionPage.razor.rz.scp.css */
.grid-container[b-yv3ebrkjt2] {
    overflow-y:hidden;
    margin-top: 0px;
   
}
.custom-container[b-yv3ebrkjt2] {
    
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;*/ /* Altura completa de la ventana */
                     margin:0px;
padding:10px;
}
.page-header[b-yv3ebrkjt2] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}
    .page-header .page-block[b-yv3ebrkjt2] {
        width: 100%;
    }
    .page-header .page-header-title[b-yv3ebrkjt2] {
        display: block;
    }
    .page-header h4[b-yv3ebrkjt2], .page-header .h4[b-yv3ebrkjt2] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }
    .page-header .breadcrumb[b-yv3ebrkjt2] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.card[b-yv3ebrkjt2] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f, 0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}
.heading-style[b-yv3ebrkjt2] {
    background-color: #0000000f;
    border-inline-start: 2px solid #b6ff00;
    border-radius: 3px;
    padding: 6px;
    padding-inline-start: 8px;
    margin-bottom: 14px;
}
.heading-style h3[b-yv3ebrkjt2] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.total-order[b-yv3ebrkjt2] {
    max-width: 430px;
    width: 100%;
    margin: 10px 0 30px auto;
}
    .total-order ul[b-yv3ebrkjt2] {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: baseline;
    }

p[b-yv3ebrkjt2], ul:not(.list-unstyled)[b-yv3ebrkjt2], ol[b-yv3ebrkjt2] {
    line-height: 22px;
}
.total-order ul li:first-child[b-yv3ebrkjt2] {
    border-top: 1px solid #00000014;
}

.total-order ul li[b-yv3ebrkjt2] {
    border: 1px solid #00000014;
    border-top: 0;
    display: flex;
}
    .total-order ul li h4[b-yv3ebrkjt2] {
        width: 50%;
        color: var(--colorTextLight);
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border-right: 1px solid #00000014;
        background: var(--colorSurface);
        margin-bottom: 0;
    }

h4[b-yv3ebrkjt2] {
    font-size: 17px;
}

h1[b-yv3ebrkjt2], h2[b-yv3ebrkjt2], h3[b-yv3ebrkjt2], h4[b-yv3ebrkjt2], h5[b-yv3ebrkjt2], h6[b-yv3ebrkjt2] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}
.total-order ul li h5[b-yv3ebrkjt2] {
    color: var(--colorTextPrimary);
    font-size: 14px;
    padding: 10px;
    font-weight: 700;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

h1[b-yv3ebrkjt2], h2[b-yv3ebrkjt2], h3[b-yv3ebrkjt2], h4[b-yv3ebrkjt2], h5[b-yv3ebrkjt2], h6[b-yv3ebrkjt2] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.flex-container[b-yv3ebrkjt2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-yv3ebrkjt2] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-yv3ebrkjt2] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-yv3ebrkjt2] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-yv3ebrkjt2], .textbox-wrapper[b-yv3ebrkjt2] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}
.loading-overlay[b-yv3ebrkjt2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-yv3ebrkjt2] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-yv3ebrkjt2 1s linear infinite;
}

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

.containeradi[b-yv3ebrkjt2] {
    display: flex;
    justify-content: center;
    align-items: start;
    height: 90vh;
}

.form-cardadi[b-yv3ebrkjt2] {
    width: 90%;
    max-width: 600px;
    padding: 20px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.input-box[b-yv3ebrkjt2], .dropdown-box[b-yv3ebrkjt2] {
    width: 100%;
    margin-bottom: 10px;
}

.input-group[b-yv3ebrkjt2] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-icon[b-yv3ebrkjt2] {
    min-width: 40px;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/Comanda/ComandaMovilListPage.razor.rz.scp.css */
.grid-container[b-aspggslu1d] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 13rem);
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    /*align-items: center;*/ /* Centrar verticalmente */
}
.form-row[b-aspggslu1d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    width: 100%;
    margin-bottom: 2px;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-aspggslu1d] {
    flex-grow: 1;
}

/*.form-row {
    display: flex;
    gap: 10px;*/ /* Espacio entre los dropdowns */
    /*flex-wrap: wrap;
}*/

/* Para dispositivos móviles y tablets */
@media (max-width: 510px) {
    .form-row[b-aspggslu1d] {
        flex-direction: column; /* Cambia a vertical */
        gap: 5px; /* Espacio menor entre los dropdowns */
    }
}

.pos-toolbar[b-aspggslu1d] {
    background-color: transparent;
    color: white;
}


/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-aspggslu1d] {
    flex-shrink: 0;
    
}


    

.page-header[b-aspggslu1d] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-aspggslu1d] {
        width: 100%;
    }

    .page-header .page-header-title[b-aspggslu1d] {
        display: block;
    }

    .page-header h4[b-aspggslu1d], .page-header .h4[b-aspggslu1d] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-aspggslu1d] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.card[b-aspggslu1d] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px;    
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cart-product-box .horizontal-product-details .trash-button[b-aspggslu1d] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-aspggslu1d] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }
.trash-btn[b-aspggslu1d] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-aspggslu1d] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }
.card-content[b-aspggslu1d]{
    display:contents !important;
}
.info[b-aspggslu1d] {
    flex-grow: 1;
}

    .info h5[b-aspggslu1d] {
        margin: 0px;
        font-size: 15px;
        color: #333;
        font-style:oblique;
    }

    .info h4[b-aspggslu1d] {
        margin: 0px;
        font-size: 14px;
        color: blue;
    }

    .info p[b-aspggslu1d] {
        margin: 2px 0;
        font-size: 14px;
        color: #555;
    }

.actions[b-aspggslu1d] {
    display: flex;
    gap: 10px;
    /*margin-left:140px;*/
}
    .actions .btn:hover[b-aspggslu1d] {
        background-color: rgba(0, 0, 0, 0.1);
    }
    .actions .btn[b-aspggslu1d] {
        border: none;
        background: none;
        cursor: pointer;
        font-size: 18px;
    }

        .actions .btn.view[b-aspggslu1d] {
            color: #007bff;
        }

        .actions .btn.edit[b-aspggslu1d] {
            color: #ffc107;
        }

        .actions .btn.delete[b-aspggslu1d] {
            color: #dc3545;
        }

.producto-linea2[b-aspggslu1d] {
    display: flex;
    align-items: center;
    justify-content: start;
}

/*@media (max-width: 574px) {
    .producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}*/


.botones-producto-linea2[b-aspggslu1d] {
    display: flex;
    align-items: center;
    justify-content: end;    
}

/*@media (max-width: 574px) {
    .botones-producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}*/
/* Contenedor principal del ListView */
/*.responsive-listview {
    max-width: 500px;
    margin: auto;    
    border-radius: 2px;*/
    /*height: 470px;*/
    /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}*/

/* Estilo general de los ítems (cards) */
/*.list-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: lightgray;
    opacity: 0.7;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    margin-left: 10px;
    margin-block: 10px;
    margin-bottom: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f0f0f0;
    overflow: visible;
}*/

    /* Efecto al pasar el cursor por encima */
    /*.list-item:hover {
        transform: translateY(-5px);*/
        /*box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);*/
    /*}*/

/* Contenido de los ítems */
/*.item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;*/ /* Espaciado entre líneas */
/*}

    .item-content h4 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        color: blue;
    }

    .item-content p {
        font-size: 14px;
        margin: 0;
        color: black;
        word-wrap: break-word;*/ /* Asegura que el texto largo se ajuste al ancho */
    /*}*/
.horizontal-product-list[b-aspggslu1d] {
    display: contents;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li[b-aspggslu1d] {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box[b-aspggslu1d] {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box[b-aspggslu1d] {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img[b-aspggslu1d] {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img[b-aspggslu1d] {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details[b-aspggslu1d] {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details[b-aspggslu1d] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}
.cart-product-box .horizontal-product-details .product-title[b-aspggslu1d] {
    font-size: 1.2em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info[b-aspggslu1d] {
    display: flex;
    padding: 0;
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1.2em;
    position: relative;
    color: green;
    word-wrap: break-word;
}

.cart-product-box .horizontal-product-details .product-price[b-aspggslu1d] {
    font-size: 15px
}
.cart-product-box .horizontal-product-details .trash-button[b-aspggslu1d] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-aspggslu1d] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-aspggslu1d] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-aspggslu1d] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }
    .spanstyle[b-aspggslu1d]{
        font-size:1.1em !important;
    }
.spanstylecolor[b-aspggslu1d] {
    font-size: 1.1em !important;
    color:blue;
}
/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 480px) {
    .cart-product-box .horizontal-product-details .product-title[b-aspggslu1d] {
        font-size: 0.8em !important; /* Ajusta para pantallas pequeñas */
        font-weight: 600;
        font-style: italic;
        margin-top: 1px;
    }

    .cart-product-box .horizontal-product-details .product-info[b-aspggslu1d] {
        display: flex;
        padding: 0;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 0.8em; /* Ajusta para pantallas pequeñas */
        position: relative;
        color: green;
        word-wrap:break-word;
    }
}
@media (max-width: 480px) {
    .spanstyle[b-aspggslu1d] {
        font-size: 0.8em !important;
    }

    .spanstylecolor[b-aspggslu1d] {
        font-size: 0.8em !important;
        color: blue;
    }
}
.styletotal[b-aspggslu1d] {
    background-color: white; 
    margin-top: 10px;
    padding: 10px;
    color: navy;
    border-style: ridge;    
}
/*@media (min-width: 1025px) {
    .cart-product-box .horizontal-product-details .product-title {
        font-size: 0.9em !important;*/ /* Ajusta para pantallas pequeñas */
        /*font-weight: 600;
        font-style: italic;
        margin-top: 1px;
    }

    .cart-product-box .horizontal-product-details .product-info {
        display: flex;
        padding: 0;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 1.0em;*/ /* Ajusta para pantallas pequeñas */
        /*position: relative;
        color: green;
    }
}*/
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/Comanda/ComandaMovilPage.razor.rz.scp.css */

.pos-toolbar[b-p3l1rbdver] {
    background-color: transparent;
    color: white;
}

.search-bar[b-p3l1rbdver] {
    padding: 10px 0px 0px 10px;
}

.products-block[b-p3l1rbdver] {
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    max-height: 540px;
    gap: 0px;
}

    .products-block .product-single[b-p3l1rbdver] {
        position: relative;
        text-align: center;
        border: 1px solid lightgreen;
        border-radius: 2px;
        background-color: #fff;
        padding: 2px;
        box-shadow: 0 4px 20px 1px #0000000f,0 1px 4px #00000014;
        cursor: pointer;
        overflow: hidden;
        margin-bottom: 16px;
        margin-left: 8px;
        margin-right: 8px;
        width: calc(36.66% - 16px)
    }
/* Pantallas pequeñas (móviles en modo retrato) */
@media screen and (max-width: 576px) {
    .pos .left-column .products-block .product-single[b-p3l1rbdver] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(30% - 1px) !important
    }
}

/* Pantallas medianas (móviles grandes o tabletas) */
@media screen and (min-width: 577px) and (max-width: 768px) {
    .pos .left-column .products-block .product-single[b-p3l1rbdver] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(30% - 1px) !important
    }
}

/* Pantallas grandes (tabletas en modo horizontal o laptops) */
@media screen and (min-width: 769px) and (max-width: 992px) {
    .pos .left-column .products-block .product-single[b-p3l1rbdver] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(22.66% - 1px) !important
    }
}

/* Pantallas extra grandes (desktops o monitores grandes) */
@media screen and (min-width: 993px) and (max-width:1358px) {
    .pos .left-column .products-block .product-single[b-p3l1rbdver] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20.66% - 1px) !important
    }
}

@media screen and (min-width: 1359px) and (max-width:1440px) {
    .pos .left-column .products-block .product-single[b-p3l1rbdver] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20.66% - 1px) !important
    }
}

@media screen and (min-width: 1441px) {
    .pos .left-column .products-block .product-single[b-p3l1rbdver] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(12.66% - 1px) !important
    }
}



.no-data img[b-p3l1rbdver] {
    max-width: 80px;
}

.no-data h4[b-p3l1rbdver] {
    font-size: 16px;
    color: var(--colorTextLight);
    font-weight: 400
}

.products-block .product-single:hover[b-p3l1rbdver] {
    /*background-color: var(--colorSurface);*/
    transform: scale(1.05); /* Escalar la tarjeta ligeramente en hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añadir sombra más pronunciada en hover */
}
/* Contenedor de la imagen */
.product-image-container[b-p3l1rbdver] {
    position: relative;
    padding: 10px;
    display: flex;
    background-color: white;
    justify-content: center;
    align-items: center;
    height: 80px; /* Altura fija para que todas las imágenes tengan el mismo tamaño */
}

.badge-left[b-p3l1rbdver] {
    position: absolute;
    top: 1px;
    left: 1px;
    /*background-color: #ff5733;*/ /* Color del badge */
    background-color: darkblue;
    opacity: 0.8;
    color: #fff;
    max-width: 100px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.7em;
}

.badge-sinstock[b-p3l1rbdver] {
    position: absolute;
    top: 1px;
    left: 1px;
    /*background-color: #ff5733;*/ /* Color del badge */
    background-color: red;
    opacity: 0.8;
    color: #fff;
    max-width: 100px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.7em;
}

.badge-right[b-p3l1rbdver] {
    display: block;
    background-color: transparent; /* Color del badge */
    color: green;
    border-radius: 2px;
    font-size: 1.0em;
    font-weight: bold;
}

.products-block .product-single .image[b-p3l1rbdver] {
    width: 90%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    border-radius: 1px;
}

.products-block .product-single .product-title[b-p3l1rbdver] {
    font-size: 0.8em;
    margin: 10px 0;
    background-color: green; /* Fondo semitransparente */
    opacity: 0.9;
    color: white;
    padding: 3px;
    height: 40px;
    max-height: 40px;
    border-radius: 2px;
    display: -webkit-box; /* Necesario para el uso de line-clamp */
    -webkit-line-clamp: 2; /* Limita a 2 líneas */
    -webkit-box-orient: vertical; /* Define la orientación del recorte de texto */
    overflow: hidden; /* Oculta el texto que sobrepasa el límite */
    text-overflow: ellipsis; /* Muestra puntos suspensivos (...) si el texto se desborda */
}

@media (max-width: 1199px) {
    .pos .right-column .products-block .product-single .image[b-p3l1rbdver] {
        height: 70px !important;
        max-height: 70px !important
    }
}

@media (max-width: 1199px) {
    .pos .products-block .product-single .product-title[b-p3l1rbdver] {
        font-size: 0.8em !important;
        margin-bottom: 4px
    }
}

.grid-container[b-p3l1rbdver] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
}


/* ====================================================== */
/* Contenedor GRID de Productos (New & Improved with custom3) */
/* ====================================================== */
.products-block-custom3[b-p3l1rbdver] {
    width: 100%;
    /*display: grid;*/
    /* Grid de auto-ajuste: 2, 3 o 4 columnas dependiendo del espacio,
       manteniendo un ancho mínimo razonable para cada tarjeta. */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill para asegurar 1 o más columnas sin huecos si hay pocos ítems */
    gap: 20px; /* Espacio entre las tarjetas de producto */
    padding: 20px 0; /* Padding superior e inferior para el bloque de productos */
    overflow-x: hidden;
    height: auto;
    max-height: 570px;
    /*min-height: calc(100vh - 350px);*/
    overflow-y: auto;
    position: relative
}

/* Estilo individual de cada tarjeta de producto */
.product-single-custom3[b-p3l1rbdver] {
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave y atractiva */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente: imagen, info, botón */
    overflow: hidden; /* Asegura que el contenido no se desborde, especialmente el border-radius */
    cursor: pointer;
    position: relative; /* Para el posicionamiento del badge de stock */
    /* Para mantener una proporción y evitar que se estiren inmensamente */
    /* La altura se ajustará al contenido, pero establecemos una altura mínima */
    min-height: 280px; /* Altura mínima razonable para un producto */
}

    .product-single-custom3:hover[b-p3l1rbdver] {
        transform: translateY(-5px); /* Efecto de levantamiento al pasar el ratón */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Sombra más intensa al hacer hover */
    }

/* Contenedor de la imagen del producto */
.product-image-container-custom3[b-p3l1rbdver] {
    position: relative;
    width: 100%;
    /* Truco para mantener una proporción de aspecto (cuadrada o 4:3) */
    /* 100% de padding-top para una imagen cuadrada, 75% para 4:3 */
    padding-top: 100%; /* Hace que el contenedor sea cuadrado, ideal para imágenes de producto */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se desborde */
    border-bottom: 1px solid #eee; /* Separador sutil */
    background-color: #f0f0f0; /* Fondo si la imagen tarda en cargar */
    display: flex; /* Para centrar la imagen */
    justify-content: center;
    align-items: center;
}

.product-image-custom3[b-p3l1rbdver] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Escala la imagen para que quepa dentro del contenedor sin recortar */
    /* object-fit: cover; // Usa 'cover' si prefieres que la imagen llene el espacio y se recorte si es necesario */
    transition: transform 0.3s ease; /* Transición suave para el zoom al hover */
}

.product-single-custom3:hover .product-image-custom3[b-p3l1rbdver] {
    transform: scale(1.05); /* Ligerísimo zoom en la imagen al hacer hover */
}

/* Badge de stock */
.badge-stock-custom3[b-p3l1rbdver],
.badge-nostock-custom3[b-p3l1rbdver] {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10; /* Asegura que esté sobre la imagen */
}

.badge-stock-custom3[b-p3l1rbdver] {
    background-color: #28a745; /* Verde para stock disponible */
}

.badge-nostock-custom3[b-p3l1rbdver] {
    background-color: #dc3545; /* Rojo para sin stock */
}

/* Información del producto (título y precio) */
.product-info-custom3[b-p3l1rbdver] {
    padding: 15px;
    flex-grow: 1; /* Permite que esta sección crezca y ocupe el espacio disponible */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye el título y el precio */
}

.product-title-custom3[b-p3l1rbdver] {
    font-size: 1.05em;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita el título a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em; /* Asegura un espacio consistente para el título de 2 líneas */
}

.product-price-custom3[b-p3l1rbdver] {
    font-size: 1.25em;
    font-weight: 700;
    color: #007bff; /* Color primario para el precio */
    margin: 0; /* Elimina margen inferior */
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Botón de información */
.btn-info-custom3[b-p3l1rbdver] {
    width: calc(100% - 30px); /* Ancho del botón con padding de los lados */
    margin: 0 15px 15px 15px; /* Margen inferior y lateral para separarlo de los bordes */
    border-radius: 8px; /* Bordes redondeados para el botón */
    font-size: 0.95em;
    font-weight: 600;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    /* Los estilos de color y background ya los gestiona SfButton con CssClass="e-flat e-success" */
}

/* ====================================================== */
/* Media Queries para Responsividad (custom3) */
/* ====================================================== */

/* Para pantallas medianas (md): 2 columnas */
@media (max-width: 768px) {
    .products-block-custom3[b-p3l1rbdver] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Reduce el min-width */
        gap: 15px;
        padding: 15px 0;
    }

    .product-single-custom3[b-p3l1rbdver] {
        min-height: 250px; /* Ajusta altura mínima */
    }
}

/* Para pantallas pequeñas (sm/xs): 1 columna */
@media (max-width: 576px) {
    .products-block-custom3[b-p3l1rbdver] {
        grid-template-columns: 1fr; /* Una columna completa */
        gap: 15px;
        padding: 10px 0;
    }

    .product-single-custom3[b-p3l1rbdver] {
        max-width: 320px; /* Limita el ancho máximo para que no se vea inmenso en pantallas muy pequeñas */
        margin: 0 auto; /* Centra el producto si solo hay uno */
        min-height: 280px;
    }

    .btn-info-custom3[b-p3l1rbdver] {
        width: calc(100% - 20px); /* Ajusta el ancho del botón */
        margin: 0 10px 10px 10px;
    }
}

/* Opcional: Ajuste para pantallas grandes (lg/xl) si necesitas más columnas o un min-width mayor */
@media (min-width: 1200px) {
    .products-block-custom3[b-p3l1rbdver] {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* 4 o 5 columnas */
        gap: 25px;
    }

    .product-single-custom3[b-p3l1rbdver] {
        min-height: 320px;
    }
}

/* ====================================================== */
/* Contenedor GRID de Categorías Adaptable (New & Improved) */
/* ====================================================== */
.categories[b-p3l1rbdver] {
    width: 100%;
    max-height: 20vh; /* Podría limitar la altura y forzar scroll. Ajusta según necesidad, o elimina si prefieres que crezca. */
    overflow-y: auto; /* Permite scroll vertical si el contenido excede el max-height */
    overflow-x: hidden; /* Oculta scroll horizontal */
    display: grid;
    /* Por defecto: ajusta automáticamente el número de columnas con un mínimo de 120px */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px; /* Aumenta el espaciado entre las categorías */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en dispositivos iOS */
    padding: 15px; /* Más padding para que el contenido respire */
    background-color: #f8fafd; /* Un gris muy claro, casi blanco azulado para un look limpio */
    border-radius: 12px; /* Bordes un poco más redondeados */
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* Sombra más suave y moderna para profundidad */
}

/* Forzar 3 columnas en pantallas pequeñas (hasta 576px, breakpoint 'sm' de Bootstrap) */
@media (max-width: 576px) {
    .categories[b-p3l1rbdver] {
        grid-template-columns: repeat(3, 1fr); /* Fuerza 3 columnas iguales */
        max-height: 150px; /* Ajusta la altura máxima para pantallas pequeñas */
        gap: 8px; /* Reduce el espaciado en pantallas pequeñas */
        padding: 10px;
    }
}

/* En pantallas medianas (min-width: 577px hasta 991px, 'md' de Bootstrap) */
@media (min-width: 577px) and (max-width: 991px) {
    .categories[b-p3l1rbdver] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Ajusta el min-width para más columnas */
        gap: 10px;
        padding: 12px;
    }
}

/* En pantallas grandes (min-width: 992px, 'lg' de Bootstrap) */
@media (min-width: 992px) {
    .categories[b-p3l1rbdver] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Más ancho mínimo para pantallas grandes */
        /* max-height: 25vh; */ /* Considera si realmente quieres un max-height fijo aquí */
        gap: 15px; /* Mayor espaciado */
        padding: 20px;
    }
}

/* ====================================================== */
/* Estilos para cada Item de Categoría (New & Improved) */
/* ====================================================== */
.items[b-p3l1rbdver] {
    list-style: none; /* Quita los puntos de lista */
    padding: 0;
    margin: 0;
}

    /* Estilo individual de cada categoría, manteniendo la proporción (altura fija con padding) */
    .items li[b-p3l1rbdver] {
        display: flex;
        flex-direction: column; /* Apila contenido verticalmente */
        justify-content: center; /* Centra verticalmente */
        align-items: center; /* Centra horizontalmente */
        text-align: center;
        cursor: pointer;
        background-color: #ffffff; /* Fondo blanco más brillante */
        height: 75px; /* Aumenta la altura para que respire más el contenido */
        border-radius: 12px; /* Bordes más suaves */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Sombra más definida */
        transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden; /* Oculta cualquier contenido que se desborde */
        box-sizing: border-box;
        padding: 8px; /* Padding interno para el contenido */
        border: 1px solid #e0e7ee; /* Borde sutil para definir cada item */
    }

        /* Hover effect para cada categoría */
        .items li:hover[b-p3l1rbdver] {
            background-color: #e6f0ff; /* Azul clarito más vibrante */
            transform: translateY(-4px); /* Levantamiento más pronunciado */
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); /* Sombra más intensa al hacer hover */
        }

    /* Estilos para el Título de la categoría */
    .items .title[b-p3l1rbdver] {
        font-weight: 700; /* Más negrita para mayor impacto */
        color: #2c3e50; /* Un gris muy oscuro, casi negro, para contraste */
        font-size: clamp(0.8rem, 1.5vw, 1.05rem); /* Rango de tamaño de fuente más dinámico y un poco más grande */
        line-height: 1.2; /* Espaciado de línea ligeramente mayor */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limita a 2 líneas de texto */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* Puntos suspensivos si el texto es muy largo */
        margin-top: 5px; /* Espacio si hubiera un icono arriba */
    }

/* ====================================================== */
/* Ajustes para pantallas XL (min-width: 1200px, 'xl' de Bootstrap) */
/* Puedes añadir una media query para 1440px si es estrictamente necesario,
   pero con auto-fit y minmax, Bootstrap suele manejar bien los tamaños intermedios. */
/* ====================================================== */
@media (min-width: 1200px) {
    .categories[b-p3l1rbdver] {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* Ancho mínimo para más columnas */
        /* max-height: 28vh; */
        gap: 18px; /* Aún más espacio */
        padding: 25px;
    }

    .items li[b-p3l1rbdver] {
        height: 90px; /* Mayor altura para items en pantallas muy grandes */
        padding: 10px;
    }
}
/* Contenedor de la sección */
.section-header[b-p3l1rbdver] {
    width: 100%;
    background-color: #f1f5f9; /* Gris claro suave */
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    margin-top: 10px;
    box-sizing: border-box;
}

/* Título */
.section-title[b-p3l1rbdver] {
    font-size: 1rem;
    font-weight: 600;
    color: #334155; /* Gris oscuro azulado */
    margin: 0;
    word-break: break-word;
}

.pager-container[b-p3l1rbdver] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}




.responsive-container[b-p3l1rbdver] {
    display: flex;
    height: calc(100vh - 60px); /* Ocupa todo el alto menos la altura de la barra de herramientas */
    padding: 10px;
    box-sizing: border-box;
}

.pos .right-column .calculation .table tr td[b-p3l1rbdver] {
    cursor: pointer;
    text-align: center
}

    .pos .right-column .calculation .table tr td.clickable:hover[b-p3l1rbdver] {
        background-color: var(--colorPrimary);
        color: var(--colorOnPrimary)
    }

.pos .right-column .calculation .table td[b-p3l1rbdver], .pos .right-column .calculation .table th[b-p3l1rbdver] {
    font-size: 14px
}

.pos .pos-right .products-block[b-p3l1rbdver] {
    height: auto;
    max-height: 500px;
    min-height: calc(100vh - 250px);
    overflow-y: auto;
    position: relative
}

@media (max-width: 991px) {
    .pos .pos-right[b-p3l1rbdver] {
        margin-top: 20px
    }

    .pos .pos-left .calculation .table td[b-p3l1rbdver], .pos .pos-left .calculation .table th[b-p3l1rbdver] {
        font-size: 10px
    }
}


@media screen and (max-width: 1024px) {
    .responsive-container[b-p3l1rbdver] {
        flex-direction: column;
    }

    .left-column[b-p3l1rbdver], .right-column[b-p3l1rbdver] {
        flex: none;
        width: 100%;
    }
}


.form-row[b-p3l1rbdver] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 2px;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-p3l1rbdver] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */


/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-p3l1rbdver] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-p3l1rbdver],
    .custom-button[b-p3l1rbdver] {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .responsive-container[b-p3l1rbdver] {
        flex-direction: column;
    }

    .left-column[b-p3l1rbdver], .right-column[b-p3l1rbdver] {
        flex: none;
        width: 100%;
    }
}


.loading-overlay[b-p3l1rbdver] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-p3l1rbdver] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-p3l1rbdver 1s linear infinite;
}

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

.right-column .cart[b-p3l1rbdver] {
    height: auto;
    max-height: 470px;
    min-height: calc(100vh - 400px);
}

.right-column .card[b-p3l1rbdver] {
    border-radius: 0px;
    padding: 4px;
}

.horizontal-product-list[b-p3l1rbdver] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li[b-p3l1rbdver] {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box[b-p3l1rbdver] {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box[b-p3l1rbdver] {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img[b-p3l1rbdver] {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img[b-p3l1rbdver] {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details[b-p3l1rbdver] {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details[b-p3l1rbdver] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cart-product-box .horizontal-product-details .trash-button[b-p3l1rbdver] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-p3l1rbdver] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-p3l1rbdver] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-p3l1rbdver] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.cart-product-box .horizontal-product-details .product-title[b-p3l1rbdver] {
    font-size: 0.8em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info[b-p3l1rbdver] {
    display: flex;
    padding: 0;
    margin-top: 1px;
    margin-bottom: 5px;
    font-size: 0.8em;
    position: relative;
    color: green;
}

.cart-product-box .horizontal-product-details .product-price[b-p3l1rbdver] {
    font-size: 15px
}

.cart-product-box .horizontal-product-details .product-price-input[b-p3l1rbdver] {
    border-bottom: 1px solid var(--colorPrimary);
    padding: 2px 0
}

    .cart-product-box .horizontal-product-details .product-price-input input[b-p3l1rbdver] {
        width: 70px;
        padding: 0;
        border: none;
        outline: none;
        background: transparent
    }

.cart-product-box .horizontal-product-details .product-info li[b-p3l1rbdver] {
    position: relative;
    font-weight: 400;
    line-height: 1;
    color: var(--colorTextLight);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    gap: 5px
}
/* En tu archivo CSS o bloque <style> */

.card[b-p3l1rbdver] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f,0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0
}

    .card[b-p3l1rbdver]:before {
        position: absolute;
        content: "";
        height: 80%;
        width: 1px;
        inset-inline-start: 0;
        background: var(--colorBorderBefore);
        inset-block-start: 10%;
        box-shadow: 8px 0 0 17px var(--colorBorderBeforeShadow)
    }

    .card .card-header[b-p3l1rbdver], .card .card-body[b-p3l1rbdver], .card .card-footer[b-p3l1rbdver] {
        background-color: transparent
    }

        .card .card-header .title[b-p3l1rbdver] {
            font-size: 16px;
            line-height: 28px;
            padding-right: 10px;
            margin-bottom: 0;
            color: var(--colorTextPrimary)
        }

    .card .card-header[b-p3l1rbdver] {
        border-bottom: 1px solid #dee2e630;
        line-height: 30px;
        align-self: center;
        width: 100%;
        display: flex;
        align-items: center
    }

    .card .card-footer[b-p3l1rbdver] {
        background-color: transparent;
        border: none
    }

@media (max-width: 767.98px) {
    .card .card-header[b-p3l1rbdver] {
        height: auto;
        flex-wrap: wrap
    }

    .card .card-header[b-p3l1rbdver], .card .card-body[b-p3l1rbdver], .card .card-footer[b-p3l1rbdver] {
        background-color: transparent;
        padding: 10px
    }
}

.producto-linea2[b-p3l1rbdver] {
    display: flex;
    align-items: center;
    justify-content: start;
}

@media (max-width: 574px) {
    .producto-linea2[b-p3l1rbdver] {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}


.botones-producto-linea2[b-p3l1rbdver] {
    display: flex;
    align-items: center;
    justify-content: end;
}

@media (max-width: 574px) {
    .botones-producto-linea2[b-p3l1rbdver] {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}


.producto-linea3[b-p3l1rbdver] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* Previene el salto a una nueva fila */
    gap: 8px;
}

    .producto-linea3 .input-wrapper[b-p3l1rbdver] {
        flex: 1 1 auto;
        min-width: 70px; /* Tamaño mínimo para cada control */
    }

@media (max-width: 576px) {
    .producto-linea3[b-p3l1rbdver] {
        gap: 4px; /* Reduce el espacio entre elementos */
    }

        .producto-linea3 .input-wrapper[b-p3l1rbdver] {
            flex: 1 1 33%; /* Cada elemento ocupa una tercera parte */
        }
}


.card hr[b-p3l1rbdver] {
    color: var(--colorBorder)
}

.pos-toolbar[b-p3l1rbdver] {
    background-color: transparent;
    color: white;
}

.page-header[b-p3l1rbdver] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-p3l1rbdver] {
        width: 100%;
    }

    .page-header .page-header-title[b-p3l1rbdver] {
        display: block;
    }

    .page-header h4[b-p3l1rbdver], .page-header .h4[b-p3l1rbdver] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-p3l1rbdver] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }



/* Contenedor principal: Auto-fit, tarjetas más cómodas en pantallas grandes */
.products-block-custom[b-p3l1rbdver] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    justify-items: stretch;
    overflow-x: hidden;
    height: auto;
    max-height: 500px;
    min-height: calc(100vh - 250px);
    overflow-y: auto;
    position: relative
}

/* Pantallas pequeñas: fuerza 2 columnas y reduce espaciados */
@media (max-width: 400px) {
    .products-block-custom[b-p3l1rbdver] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }
}

/* Tarjeta individual */
.product-single-custom[b-p3l1rbdver] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: white;
    border-radius: 12px;
    padding: 0.8rem;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover en pantallas grandes */
@media (min-width: 600px) {
    .product-single-custom:hover[b-p3l1rbdver] {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }
}

.product-single-custom:hover[b-p3l1rbdver] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* Imagen del producto */
.product-image-container-custom[b-p3l1rbdver] {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.product-image-custom[b-p3l1rbdver] {
    width: 100%;
    max-width: 110px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #ddd;
}

/* Badges de stock */
.badge-stock-custom[b-p3l1rbdver],
.badge-nostock-custom[b-p3l1rbdver] {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 6px;
    font-size: 0.7rem;
    border-radius: 20px;
    color: #fff;
    white-space: nowrap;
}

.badge-stock-custom[b-p3l1rbdver] {
    background-color: #4caf50;
}

.badge-nostock-custom[b-p3l1rbdver] {
    background-color: #f44336;
}

/* Información del producto */
.product-info-custom[b-p3l1rbdver] {
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.product-title-custom[b-p3l1rbdver] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    word-wrap: break-word;
}

.product-price-custom[b-p3l1rbdver] {
    font-size: 0.75rem;
    color: #555;
}

/* Botón Info */
.btn-info-custom[b-p3l1rbdver] {
    margin-top: 6px;
    font-size: 0.75rem;
    background-color: #e3f2fd;
    color: #1565c0;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Contenedor No Data */
.no-data-custom[b-p3l1rbdver] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    padding: 2rem;
}

    .no-data-custom img[b-p3l1rbdver] {
        width: 70px;
        height: 70px;
        opacity: 0.7;
    }

/* Paginador */
.pager-container-custom[b-p3l1rbdver] {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

/* Limpieza global */
body[b-p3l1rbdver], html[b-p3l1rbdver] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}


/* FIX: Añadir cursor: pointer para la tarjeta de producto */
.product-cardc3[b-p3l1rbdver] {
    background-color: var(--card-bg);
    border: 1px solid groove;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer; /* <--- AQUÍ LA CORRECCIÓN */
}

    .product-cardc3:hover[b-p3l1rbdver] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-color: var(--primary-accent);
    }

.product-image-containerc3[b-p3l1rbdver] {
    aspect-ratio: 1 / 1;
    background-color: #f1f3f5;
}

.product-img[b-p3l1rbdver] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-cardc3 .card-body[b-p3l1rbdver] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-titlec3[b-p3l1rbdver] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 45px;
}

.product-pricec3[b-p3l1rbdver] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-accent);
    margin-top: auto;
    padding-top: 0.5rem;
}

    .product-pricec3 .original-pricec3[b-p3l1rbdver] {
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--text-muted-light);
    }

.discount-badge[b-p3l1rbdver] {
    font-weight: 600;
    font-size: 0.75rem;
    background-color: var(--primary-accent) !important;
}

.ratingc3[b-p3l1rbdver] {
    font-size: 0.8rem;
}

.product-popup-imagec3[b-p3l1rbdver] {
    width: 100%; /* Ensures it fills the column width */
    height: 100%; /* Or a fixed height you prefer */
    object-fit: cover; /* OR cover */
    display: block; /* Removes any extra space below the image */
}

/* Optional: Add a max-height if you want it responsive but not too tall */
@media (max-width: 767px) {
    .product-popup-imagec3[b-p3l1rbdver] {
        height: 250px;
    }
}
/* For the new 'btn-product-info' button */
.btn-product-info[b-p3l1rbdver] {
    /* Basic button styling - adjust colors to match your theme */
    background-color: #007bff; /* A nice blue, adjust to your theme's info/success color */
    color: #fff;
    border: none;
    border-radius: 8px; /* Slightly more rounded corners */
    padding: 10px 15px; /* Comfortable padding */
    font-size: 0.95rem; /* Slightly larger text */
    font-weight: 600; /* Bolder text */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Smooth transitions for hover */
    /*display: inline-flex;*/ /* Allows icon and text to sit nicely side-by-side */
    align-items: center;
    margin-top: 5px;
    gap: 8px; /* Space between icon and text */
    text-decoration: none; /* Remove underline if it's a link-like button */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    /* Positioning and z-index if needed within a complex layout */
    position: relative; /* Allows z-index to work */
    z-index: 10; /* Keep it above other elements if necessary */
}

    /* Hover state for interaction */
    .btn-product-info:hover[b-p3l1rbdver] {
        background-color: #0056b3; /* Darker blue on hover */
        transform: translateY(-2px); /* Slight lift effect */
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* More prominent shadow on hover */
    }

    /* Active/Clicked state */
    .btn-product-info:active[b-p3l1rbdver] {
        background-color: #004085; /* Even darker on click */
        transform: translateY(0); /* Button pushes down */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Reduced shadow */
    }

    /* Optional: If you want to disable it */
    .btn-product-info:disabled[b-p3l1rbdver] {
        background-color: #cccccc;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/Comanda/MDConfirmarComandaPage.razor.rz.scp.css */
.sfcontainer[b-4yyzhwsnvx] {
    width: 100%;
    margin-top: 0px; /* Ajusta el valor según sea necesario */
}

.grid-container[b-4yyzhwsnvx] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
    width:100%;
}

/*table.table-bordered.dataTable {
    border-right-width: 0
}

    table.table-bordered.dataTable thead tr:first-child th, table.table-bordered.dataTable thead tr:first-child td {
        border-top-width: 1px
    }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-left-width: 0
    }

        table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child {
            border-left-width: 1px
        }

        table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child {
            border-right-width: 1px
        }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-bottom-width: 1px
    }

div.dataTables_scrollHead table.table-bordered {
    border-bottom-width: 0
}

table {
    margin: 0
}

.table thead {
    background: #dfdfdf28;
    border-bottom: 1px solid var(--colorBorder)
}

    .table thead th {
        font-weight: 600;
        color: var(--colorTextPrimary);
        padding: 10px;
        white-space: nowrap;
        
    }

.table th, .table td {
    text-align: start
}

.table-sm tbody td {
    padding-left: 10px;
    padding-right: 10px
}

.table td, .table:not(.table-bordered) th {
    border-top: none;
    border-bottom: 1px solid var(--colorBorder)
}

.table > :not(:last-child) > :last-child > * {
    border-bottom: 1px solid var(--colorBorder)
}

.table:not(.table-sm):not(.table-md):not(.dataTable) td, .table:not(.table-sm):not(.table-md):not(.dataTable) th {
    color: var(--colorTextPrimary);
    padding: 10px;
    vertical-align: middle
}

.table:not(.table-sm) thead th {
    border-bottom: none;
    color: var(--colorTextPrimary);
    white-space: nowrap;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: start
}

.table.table-md th, .table.table-md td {
    padding: 10px 15px
}

.table tr td {
    color: var(--colorTextPrimary)
}

.table.table-bordered tr {
    border-color: lightblue
}

.table.table-bordered td, .table.table-bordered th {
    border-color: lightblue;
    color: var(--colorTextLight)
}*/


.loading-overlay[b-4yyzhwsnvx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-4yyzhwsnvx] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-4yyzhwsnvx 1s linear infinite;
}
@keyframes spin-b-4yyzhwsnvx {
    to {
        transform: rotate(360deg);
    }
}
.message-card[b-4yyzhwsnvx] {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-left: 5px solid #007bff;
}

.card-header[b-4yyzhwsnvx] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}

.card-body[b-4yyzhwsnvx] {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}

.card-footer[b-4yyzhwsnvx] {
    text-align: right;
}

.btn-action[b-4yyzhwsnvx] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

    .btn-action:hover[b-4yyzhwsnvx] {
        background-color: #0056b3;
    }
    .ndoc[b-4yyzhwsnvx]{
        font-weight:600;
        color:green;
    }
.rsunatok[b-4yyzhwsnvx] {
    font-weight: 600;
    color: blue;
}
.rsunaterr[b-4yyzhwsnvx] {
    font-weight: 600;
    color: orangered;
}

.flex-container[b-4yyzhwsnvx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-4yyzhwsnvx] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-4yyzhwsnvx] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-4yyzhwsnvx] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-4yyzhwsnvx], .textbox-wrapper[b-4yyzhwsnvx] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}

/* Estilo general del invoice-wrapper */
.invoice-container[b-4yyzhwsnvx] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
    background-color: #f9f9f9;
}

#invoice-wrapper[b-4yyzhwsnvx] {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    word-wrap: break-word;
    text-align: left;
    width: auto;
    }


    table[b-4yyzhwsnvx] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    table th[b-4yyzhwsnvx],
    table td[b-4yyzhwsnvx] {
        padding: 5px 5px!important;
        /*border-bottom: 1px solid #ddd;*/
        text-align: left;
        vertical-align: top;
    }

.printer-80mm table[b-4yyzhwsnvx] {
    font-size: 12px;
}

    .printer-80mm table th[b-4yyzhwsnvx],
    .printer-80mm table td[b-4yyzhwsnvx] {
        padding: 5px 1px;
    }

    .printer-80mm table th[b-4yyzhwsnvx] {
        /*border-bottom: 2px solid #000;*/
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.printer-80mm[b-4yyzhwsnvx] {
    width: 80mm;
}

.texto-80mm[b-4yyzhwsnvx] {
    
}

.printer-58mm[b-4yyzhwsnvx]{
    width:58mm;
}

.printer-210mm[b-4yyzhwsnvx] {
    width: 210mm;
}

.texto-210mm[b-4yyzhwsnvx] {
    font-size: 14px;
    
}
.texto-58mm[b-4yyzhwsnvx] {
    font-size: 9px;
    
}


.printer-210mm table[b-4yyzhwsnvx] {
    font-size: 14px;
}

.printer-58mm table[b-4yyzhwsnvx] {
    font-size: 9px;
    
}

    .printer-58mm table th[b-4yyzhwsnvx],
    .printer-58mm table td[b-4yyzhwsnvx] {
        padding: 5px 3px;
    }

    .printer-58mm table th[b-4yyzhwsnvx] {
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.description[b-4yyzhwsnvx] {
    word-wrap: break-word;
    max-width: 100%;
    font-size: 10px; 
    padding-top: 5px;
}


.invoice-title[b-4yyzhwsnvx] {
    text-align: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.invoice-details[b-4yyzhwsnvx] {
    display: flex;
    flex-direction: column;
    width: 100%;    
    line-height: 1.3; /* Mejor separación entre líneas */
}
    .row-80mm[b-4yyzhwsnvx] {
        grid-template-columns: 100px 1fr; /* Columna fija para el título, flexible para el valor */
    }
    .row-58mm[b-4yyzhwsnvx] {
        grid-template-columns: 90px 1fr; /* Columna fija para el título, flexible para el valor */
    }
    .row-210mm[b-4yyzhwsnvx] {
        grid-template-columns: 110px 1fr; /* Columna fija para el título, flexible para el valor */
    }
    .invoice-details .row[b-4yyzhwsnvx] {
        display: grid;        
        gap: 5px; /* Espacio entre columnas */
        margin-bottom: 3px; /* Espacio entre filas */
    }

.invoice-details .label[b-4yyzhwsnvx] {
    text-align: left;
    font-weight: bold; /* Destacar los títulos */
    color: #333; /* Texto más oscuro para mejor legibilidad */
    font-family: 'Roboto';
    font-size: 14px;
}

.invoice-details .value[b-4yyzhwsnvx] {
    text-align: left;
    color: #555; /* Color más claro para diferenciar del título */
    word-wrap: break-word; /* Ajustar el texto largo */
    margin-left: -25px;
    font-family: 'Roboto';
    font-size: 14px;
}

.ticket-header[b-4yyzhwsnvx] {
    text-align: center;
    margin-bottom: 10px;
}

    .ticket-header h1[b-4yyzhwsnvx] {
        font-size: 16px;
        margin: 0;
        font-weight: bold;
    }

    .ticket-header p[b-4yyzhwsnvx] {
        margin: 2px 0;
        font-size: 12px;
    }

.divider[b-4yyzhwsnvx] {
    border-top: 1px dashed black;
    margin: 10px 0;
}

.rowcabe[b-4yyzhwsnvx] {
    margin: 10px;
}

.h3_1[b-4yyzhwsnvx] {
    font-weight: 600;
    text-align: center;
    color: green;
}

.my-button[b-4yyzhwsnvx] {
    display: inline-block;
    padding: 6px 12px; /* Espaciado interno pequeño */
    font-size: 14px; /* Tamaño de texto legible */
    line-height: 1.5; /* Altura de línea */
    color: #fff; /* Color del texto */
    background-color: #007bff; /* Azul moderno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Esquinas redondeadas */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s; /* Animación suave */
    width: 100%; /* Tamaño igual al padre */
    max-width: 120px; /* Límite máximo */
}

    /* Hover (al pasar el mouse) */
    .my-button:hover[b-4yyzhwsnvx] {
        background-color: #0056b3;
    }

    /* Activo (al hacer clic) */
    .my-button:active[b-4yyzhwsnvx] {
        background-color: #003f7f;
        transform: scale(0.95); /* Pequeña reducción al hacer clic */
    }

/* Tamaño responsivo */
@media (max-width: 768px) { /* Tablets y pantallas medianas */
    .my-button[b-4yyzhwsnvx] {
        font-size: 12px;
        padding: 5px 10px;
    }
}

@media (max-width: 576px) { /* Teléfonos y pantallas pequeñas */
    .my-button[b-4yyzhwsnvx] {
        font-size: 10px;
        padding: 4px 8px;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/Comanda/MDSeleccionarMesaPage.razor.rz.scp.css */
.grid-container[b-xq5mgrpqgq] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
}

.rowcabe[b-xq5mgrpqgq] {
    margin: 10px;
}

.h2_1[b-xq5mgrpqgq] {
    font-weight: 600;
    text-align: center;
    color: green;
}

@media (max-width: 480px) {

    .h2_1[b-xq5mgrpqgq] {
        font-size: 0.8em;
        word-wrap: break-word;
    }
}


.mesa-container[b-xq5mgrpqgq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    padding: 10px;
}

.mesa-item[b-xq5mgrpqgq] {
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    transition: box-shadow 0.3s ease;
}

    .mesa-item:hover[b-xq5mgrpqgq] {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

.mesa-image[b-xq5mgrpqgq] {
    max-width: 80px;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/Comanda/PopupVerComandaDetallePage.razor.rz.scp.css */
grid-container[b-tnrcrijg3z] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 13rem);
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    /*align-items: center;*/ /* Centrar verticalmente */
}

.form-row[b-tnrcrijg3z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-tnrcrijg3z] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-tnrcrijg3z] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-tnrcrijg3z] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
/*@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox,
    .custom-button {
        width: 100%;
    }
}*/
.page-header[b-tnrcrijg3z] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-tnrcrijg3z] {
        width: 100%;
    }

    .page-header .page-header-title[b-tnrcrijg3z] {
        display: block;
    }

    .page-header h4[b-tnrcrijg3z], .page-header .h4[b-tnrcrijg3z] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-tnrcrijg3z] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.card[b-tnrcrijg3z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cart-product-box .horizontal-product-details .trash-button[b-tnrcrijg3z] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-tnrcrijg3z] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-tnrcrijg3z] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-tnrcrijg3z] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.card-content[b-tnrcrijg3z] {
    display: contents !important;
}

.info[b-tnrcrijg3z] {
    flex-grow: 1;
}

    .info h5[b-tnrcrijg3z] {
        margin: 0px;
        font-size: 15px;
        color: #333;
        font-style: oblique;
    }

    .info h4[b-tnrcrijg3z] {
        margin: 0px;
        font-size: 14px;
        color: blue;
    }

    .info p[b-tnrcrijg3z] {
        margin: 2px 0;
        font-size: 14px;
        color: #555;
    }

.actions[b-tnrcrijg3z] {
    display: flex;
    gap: 10px;
    /*margin-left:140px;*/
}

    .actions .btn:hover[b-tnrcrijg3z] {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .actions .btn[b-tnrcrijg3z] {
        border: none;
        background: none;
        cursor: pointer;
        font-size: 18px;
    }

        .actions .btn.view[b-tnrcrijg3z] {
            color: #007bff;
        }

        .actions .btn.edit[b-tnrcrijg3z] {
            color: #ffc107;
        }

        .actions .btn.delete[b-tnrcrijg3z] {
            color: #dc3545;
        }

.producto-linea2[b-tnrcrijg3z] {
    display: flex;
    align-items: center;
    justify-content: start;
}

/*@media (max-width: 574px) {
    .producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}*/


.botones-producto-linea2[b-tnrcrijg3z] {
    display: flex;
    align-items: center;
    justify-content: end;
}

/*@media (max-width: 574px) {
    .botones-producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}*/
/* Contenedor principal del ListView */
/*.responsive-listview {
    max-width: 500px;
    margin: auto;    
    border-radius: 2px;*/
/*height: 470px;*/
/*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}*/

/* Estilo general de los ítems (cards) */
/*.list-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: lightgray;
    opacity: 0.7;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    margin-left: 10px;
    margin-block: 10px;
    margin-bottom: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f0f0f0;
    overflow: visible;
}*/

/* Efecto al pasar el cursor por encima */
/*.list-item:hover {
        transform: translateY(-5px);*/
/*box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);*/
/*}*/

/* Contenido de los ítems */
/*.item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;*/ /* Espaciado entre líneas */
/*}

    .item-content h4 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        color: blue;
    }

    .item-content p {
        font-size: 14px;
        margin: 0;
        color: black;
        word-wrap: break-word;*/ /* Asegura que el texto largo se ajuste al ancho */
/*}*/
.horizontal-product-list[b-tnrcrijg3z] {
    display: contents;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li[b-tnrcrijg3z] {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box[b-tnrcrijg3z] {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box[b-tnrcrijg3z] {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img[b-tnrcrijg3z] {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img[b-tnrcrijg3z] {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details[b-tnrcrijg3z] {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details[b-tnrcrijg3z] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cart-product-box .horizontal-product-details .product-title[b-tnrcrijg3z] {
    font-size: 1.2em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info[b-tnrcrijg3z] {
    display: flex;
    padding: 0;
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1.2em;
    position: relative;
    color: green;
}



.product-title2[b-tnrcrijg3z] {
    display: flex;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 0.9em;
    font-weight:500;
    position: relative;
}

.product-info[b-tnrcrijg3z] {
    display: flex;    
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 0.9em;
    position: relative;
    color: green;
}

.cart-product-box .horizontal-product-details .product-price[b-tnrcrijg3z] {
    font-size: 15px
}

.cart-product-box .horizontal-product-details .trash-button[b-tnrcrijg3z] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-tnrcrijg3z] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-tnrcrijg3z] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-tnrcrijg3z] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.spanstyle[b-tnrcrijg3z] {
    font-size: 1.1em !important;
}

.spanstylecolor[b-tnrcrijg3z] {
    font-size: 1.1em !important;
    color: blue;
}
.rowcabe[b-tnrcrijg3z] {
    margin:10px;
}
.h3_1[b-tnrcrijg3z]{
    font-weight:600;
    text-align:center;
    color:green;
}
.h2_1[b-tnrcrijg3z] {
    font-weight: 600;
    text-align:center;
    color:blue;
}
/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 480px) {
    .cart-product-box .horizontal-product-details .product-title[b-tnrcrijg3z] {
        font-size: 0.8em !important; /* Ajusta para pantallas pequeñas */
        font-weight: 600;
        font-style: italic;
        margin-top: 1px;
    }

    .cart-product-box .horizontal-product-details .product-info[b-tnrcrijg3z] {
        display: flex;
        padding: 0;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 0.8em; /* Ajusta para pantallas pequeñas */
        position: relative;
        color: green;
        word-wrap: break-word;
    }
    .product-title2[b-tnrcrijg3z] {
        display: flex;
        font-style: italic;
        margin-top: 5px;
        margin-bottom: 0px;
        font-size: 0.8em;
        font-weight: 500;
        position: relative;
    }

    .product-info[b-tnrcrijg3z] {
        display: flex;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 0.8em;
        position: relative;
        color: green;
        word-break:break-word;
    }
    
}

@media (max-width: 480px) {
    .spanstyle[b-tnrcrijg3z] {
        font-size: 0.8em !important;
    }

    .spanstylecolor[b-tnrcrijg3z] {
        font-size: 0.8em !important;
        color: blue;
    }
}
.styletotal[b-tnrcrijg3z] {
    background-color: white;
    margin-top: 10px;
    padding: 10px;
    color: navy;
    border-style: ridge;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/Common/PopupVerDocumentoDetallePage.razor.rz.scp.css */
/* Contenedor principal para cada producto en la lista */
.product-item-card[b-ivjw23tptp] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra para efecto 3D */
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex; /* Usamos Flexbox para organizar el contenido */
    flex-direction: column;
    gap: 1rem; /* Espacio entre las secciones de la tarjeta */
}

/* Sección superior con título, descripción y badge */
.product-main-details[b-ivjw23tptp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* Espacio pequeño entre los elementos */
}

/* Título del producto */
.product-title-c3[b-ivjw23tptp] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #007bff; /* Azul para el título */
    margin: 0;
    display: flex;
    align-items: center;
}

    .product-title-c3 i[b-ivjw23tptp] {
        color: #495057; /* Icono en color gris para contraste */
    }

/* Descripción del producto */
.product-description-c3[b-ivjw23tptp] {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

/* Estilo para el badge de la lista */
.product-badge-c3[b-ivjw23tptp] {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.25rem;
    font-weight: 600;
    background-color: #20c997; /* Un verde vivo para llamar la atención */
    color: #fff;
    align-self: flex-start; /* Alinea el badge a la izquierda */
}

/* Sección inferior con los detalles de cantidad y precio */
.product-summary-grid[b-ivjw23tptp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Crea columnas responsivas */
    gap: 0.75rem;
    border-top: 1px solid #e9ecef; /* Separador sutil */
    padding-top: 1rem;
}

/* Estilo para cada item del resumen (cantidad, P.U., total) */
.summary-item[b-ivjw23tptp] {
    font-size: 0.9rem;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .summary-item strong[b-ivjw23tptp] {
        font-weight: 600;
        color: #212529;
    }

    .summary-item i[b-ivjw23tptp] {
        font-size: 1rem;
        color: #6c757d; /* Color secundario para los iconos */
    }

/* Estilo específico para el total */
.product-total-c3[b-ivjw23tptp] {
    font-size: 1rem;
    font-weight: 700;
    color: #28a745; /* Color verde para el total */
    justify-self: end; /* Alinea el total a la derecha en la cuadrícula */
}

/*
   Estilos generales para el contenedor de la tarjeta
*/
.document-info-card[b-ivjw23tptp] {
    background-color: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/*
   Ajuste de los títulos
   `clamp()` se usa para un tamaño de fuente adaptable y legible.
*/
.document-title[b-ivjw23tptp] {
    font-size: clamp(0.95rem, 1.5vw, 2.5rem);
    font-weight: 700;
    color: #007bff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.document-number[b-ivjw23tptp] {
    font-size: clamp(0.95rem, 1.5vw, 1.5rem);
    color: #6c757d;
}

/*
   Estilos para los detalles del documento
*/
.document-details-section[b-ivjw23tptp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-row[b-ivjw23tptp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.80rem, 1.5vw, 0.90rem);
    color: #495057;
}
.info-text[b-ivjw23tptp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    color: #495057;
}
/*
   Estilos para los badges de resumen
*/
.document-summary-section[b-ivjw23tptp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid #e9ecef;
    padding-top: 1rem;
}

.info-badge-items[b-ivjw23tptp], .info-badge-total[b-ivjw23tptp] {
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.info-badge-items[b-ivjw23tptp] {
    background-color: #6c757d;
}

.info-badge-total[b-ivjw23tptp] {
    background-color: #28a745;
}

/*
   Diseño para pantallas de escritorio (a partir de 768px)
*/
@media (min-width: 768px) {
    .document-details-section[b-ivjw23tptp] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .document-summary-section[b-ivjw23tptp] {
        justify-content: flex-end;
        gap: 2rem;
    }
}
.e-dialog .e-dlg-header[b-ivjw23tptp] {
    width: 100%;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/Cotizaciones/CotizacionMovilListPage.razor.rz.scp.css */
.grid-container[b-x2rbnm6glg] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 13rem);
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    /*align-items: center;*/ /* Centrar verticalmente */
}
/* --- Styles for the Cotizacion Filter Row --- */
/* This is your component's own div, so it gets the isolation hash */
.cotizacion-filter-row[b-x2rbnm6glg] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

    /* --- Styling for Dropdowns within the Filter Row --- */
    /* Use ::deep to target Syncfusion's internal .e-dropdownlist class */
    .cotizacion-filter-row[b-x2rbnm6glg]  .e-dropdownlist {
        flex-grow: 1;
        flex-basis: 0;
        min-width: 12.5rem;
        height: auto;
    }

        /* Use ::deep to target the inner input group of Syncfusion dropdowns */
        .cotizacion-filter-row[b-x2rbnm6glg]  .e-dropdownlist .e-input-group {
            width: 100%;
            box-sizing: border-box;
        }

    /* Adjust FloatLabelType for better appearance - requires ::deep too */
    .cotizacion-filter-row[b-x2rbnm6glg]  .e-float-text {
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        transition: all 0.2s ease-out;
        pointer-events: none;
        color: #6c757d;
    }

    .cotizacion-filter-row[b-x2rbnm6glg]  .e-float-input.e-input-focus + .e-float-text,
    .cotizacion-filter-row[b-x2rbnm6glg]  .e-float-input.e-valid-input + .e-float-text {
        top: 0.5rem;
        font-size: 0.75rem;
        color: #007bff;
    }

    /* --- Styling for SfButton within the Filter Row --- */
    /* Use ::deep to target Syncfusion's internal .e-btn class */
    .cotizacion-filter-row[b-x2rbnm6glg]  .e-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 0.25rem;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
        height: 2.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* Syncfusion primary button specific styles - requires ::deep */
        .cotizacion-filter-row[b-x2rbnm6glg]  .e-btn.e-primary {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
        }

            .cotizacion-filter-row[b-x2rbnm6glg]  .e-btn.e-primary:hover {
                background-color: #0056b3;
                border-color: #004085;
            }

        /* Spacing for the button icon - requires ::deep */
        .cotizacion-filter-row[b-x2rbnm6glg]  .e-btn .e-btn-icon {
            margin-right: 0.5rem;
        }

/* --- Responsiveness for Smaller Screens --- */
/* The top-level class will still get the isolation hash, so no ::deep needed here */
@media (max-width: 768px) {
    .cotizacion-filter-row[b-x2rbnm6glg] {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 1rem;
    }

        /* Use ::deep for all Syncfusion elements within the media query as well */
        .cotizacion-filter-row[b-x2rbnm6glg]  .e-dropdownlist,
        .cotizacion-filter-row[b-x2rbnm6glg]  .e-dropdownlist .e-input-group,
        .cotizacion-filter-row[b-x2rbnm6glg]  .e-btn {
            width: 100%;
            min-width: auto;
            flex-basis: auto;
        }
}
    .pos-toolbar[b-x2rbnm6glg] {
        background-color: transparent;
        color: white;
    }
    /* El TextBox ocupa el espacio disponible en la fila */
    .custom-textbox[b-x2rbnm6glg] {
        flex-grow: 1;
    }

    /* El botón ocupa su tamaño natural pero se ajusta */
    .custom-button[b-x2rbnm6glg] {
        flex-shrink: 0;
    }




    .page-header[b-x2rbnm6glg] {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding-left: 0px;
        border-left: 3px solid #b6ff00;
        border-radius: 5px;
        box-shadow: 0 4px 25px #00000005;
    }

        .page-header .page-block[b-x2rbnm6glg] {
            width: 100%;
        }

        .page-header .page-header-title[b-x2rbnm6glg] {
            display: block;
        }

        .page-header h4[b-x2rbnm6glg], .page-header .h4[b-x2rbnm6glg] {
            margin-top: 5px;
            margin-bottom: 2px;
            margin-right: 8px;
            padding-right: 8px;
            font-weight: 500;
            font-size: 18px;
            color: var(--colorTextPrimary);
        }

        .page-header .breadcrumb[b-x2rbnm6glg] {
            padding: 0;
            display: inline-flex;
            margin-bottom: 0;
            background: transparent;
            font-size: 13px;
        }

    .card[b-x2rbnm6glg] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin: 10px;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .cart-product-box .horizontal-product-details .trash-button[b-x2rbnm6glg] {
        outline: none;
        border: none;
        background: transparent
    }

        .cart-product-box .horizontal-product-details .trash-button i[b-x2rbnm6glg] {
            font-size: 18px;
            color: red;
            cursor: pointer
        }

    .trash-btn[b-x2rbnm6glg] {
        outline: none;
        border: none;
        background: transparent
    }

        .trash-btn i[b-x2rbnm6glg] {
            font-size: 18px;
            color: red;
            cursor: pointer
        }

    .card-content[b-x2rbnm6glg] {
        display: contents !important;
    }

    .info[b-x2rbnm6glg] {
        flex-grow: 1;
    }

        .info h5[b-x2rbnm6glg] {
            margin: 0px;
            font-size: 15px;
            color: #333;
            font-style: oblique;
        }

        .info h4[b-x2rbnm6glg] {
            margin: 0px;
            font-size: 14px;
            color: blue;
        }

        .info p[b-x2rbnm6glg] {
            margin: 2px 0;
            font-size: 14px;
            color: #555;
        }

    .actions[b-x2rbnm6glg] {
        display: flex;
        gap: 10px;
        /*margin-left:140px;*/
    }

        .actions .btn:hover[b-x2rbnm6glg] {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .actions .btn[b-x2rbnm6glg] {
            border: none;
            background: none;
            cursor: pointer;
            font-size: 18px;
        }

            .actions .btn.view[b-x2rbnm6glg] {
                color: #007bff;
            }

            .actions .btn.edit[b-x2rbnm6glg] {
                color: #ffc107;
            }

            .actions .btn.delete[b-x2rbnm6glg] {
                color: #dc3545;
            }

    .producto-linea2[b-x2rbnm6glg] {
        display: flex;
        align-items: center;
        justify-content: start;
    }

    /*@media (max-width: 574px) {
    .producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}*/


    .botones-producto-linea2[b-x2rbnm6glg] {
        display: flex;
        align-items: center;
        justify-content: end;
    }

    /*@media (max-width: 574px) {
    .botones-producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}*/
    /* Contenedor principal del ListView */
    /*.responsive-listview {
    max-width: 500px;
    margin: auto;    
    border-radius: 2px;*/
    /*height: 470px;*/
    /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}*/

    /* Estilo general de los ítems (cards) */
    /*.list-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: lightgray;
    opacity: 0.7;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    margin-left: 10px;
    margin-block: 10px;
    margin-bottom: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f0f0f0;
    overflow: visible;
}*/

    /* Efecto al pasar el cursor por encima */
    /*.list-item:hover {
        transform: translateY(-5px);*/
    /*box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);*/
    /*}*/

    /* Contenido de los ítems */
    /*.item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;*/ /* Espaciado entre líneas */
    /*}

    .item-content h4 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        color: blue;
    }

    .item-content p {
        font-size: 14px;
        margin: 0;
        color: black;
        word-wrap: break-word;*/ /* Asegura que el texto largo se ajuste al ancho */
    /*}*/
    .horizontal-product-list[b-x2rbnm6glg] {
        display: contents;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px
    }

        .horizontal-product-list > li[b-x2rbnm6glg] {
            display: block;
            width: 100%;
            margin: 1px;
        }

    .horizontal-product-box[b-x2rbnm6glg] {
        background: var(--colorSurface);
        border-radius: 4px;
        padding: 8px;
        display: flex;
        gap: 5px
    }

    .cart-product-box[b-x2rbnm6glg] {
        background: var(--colorSurface);
        border-radius: 4px;
        display: flex;
        background-color: whitesmoke;
        border-color: lightgreen;
        border-width: 1px;
        gap: 10px
    }

        .cart-product-box .horizontal-product-img[b-x2rbnm6glg] {
            width: 88px;
            height: 88px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--colorBackground);
            border-radius: 8px;
            padding: 12px 20px
        }

    .horizontal-product-box .horizontal-product-img[b-x2rbnm6glg] {
        width: 80px;
        height: 80px;
        padding: 12px 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px
    }

    .cart-product-box .horizontal-product-details[b-x2rbnm6glg] {
        width: calc(100% - 98px)
    }

    .horizontal-product-box .horizontal-product-details[b-x2rbnm6glg] {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .cart-product-box .horizontal-product-details .product-title[b-x2rbnm6glg] {
        font-size: 1.2em;
        font-weight: 600;
        font-style: italic;
        margin-top: 1px;
    }

    .cart-product-box .horizontal-product-details .product-info[b-x2rbnm6glg] {
        display: flex;
        padding: 0;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 1.2em;
        position: relative;
        color: green;
        word-wrap: break-word;
    }

    .cart-product-box .horizontal-product-details .product-price[b-x2rbnm6glg] {
        font-size: 15px
    }

    .cart-product-box .horizontal-product-details .trash-button[b-x2rbnm6glg] {
        outline: none;
        border: none;
        background: transparent
    }

        .cart-product-box .horizontal-product-details .trash-button i[b-x2rbnm6glg] {
            font-size: 18px;
            color: red;
            cursor: pointer
        }

    .trash-btn[b-x2rbnm6glg] {
        outline: none;
        border: none;
        background: transparent
    }

        .trash-btn i[b-x2rbnm6glg] {
            font-size: 18px;
            color: red;
            cursor: pointer
        }

    .spanstyle[b-x2rbnm6glg] {
        font-size: 1.1em !important;
    }

    .spanstylecolor[b-x2rbnm6glg] {
        font-size: 1.1em !important;
        color: blue;
    }
    /* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
    @media (max-width: 480px) {
        .cart-product-box .horizontal-product-details .product-title[b-x2rbnm6glg] {
            font-size: 0.8em !important; /* Ajusta para pantallas pequeñas */
            font-weight: 600;
            font-style: italic;
            margin-top: 1px;
        }

        .cart-product-box .horizontal-product-details .product-info[b-x2rbnm6glg] {
            display: flex;
            padding: 0;
            font-style: italic;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 0.8em; /* Ajusta para pantallas pequeñas */
            position: relative;
            color: green;
            word-wrap: break-word;
        }
    }

    @media (max-width: 480px) {
        .spanstyle[b-x2rbnm6glg] {
            font-size: 0.8em !important;
        }

        .spanstylecolor[b-x2rbnm6glg] {
            font-size: 0.8em !important;
            color: blue;
        }
    }

    .styletotal[b-x2rbnm6glg] {
        background-color: white;
        margin-top: 10px;
        padding: 10px;
        color: navy;
        border-style: ridge;
    }
    /*@media (min-width: 1025px) {
    .cart-product-box .horizontal-product-details .product-title {
        font-size: 0.9em !important;*/ /* Ajusta para pantallas pequeñas */
    /*font-weight: 600;
        font-style: italic;
        margin-top: 1px;
    }

    .cart-product-box .horizontal-product-details .product-info {
        display: flex;
        padding: 0;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 1.0em;*/ /* Ajusta para pantallas pequeñas */
    /*position: relative;
        color: green;
    }
}*/
    /* Estilo general del invoice-wrapper */
    .invoice-container[b-x2rbnm6glg] {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 15px;
        background-color: #f9f9f9;
    }

    #invoice-wrapper[b-x2rbnm6glg] {
        background: white;
        border: 1px solid #ddd;
        padding: 15px;
        font-family: "Courier New", Courier, monospace;
        font-size: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        word-wrap: break-word;
        text-align: left;
        width: auto;
    }


    table[b-x2rbnm6glg] {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

        table th[b-x2rbnm6glg],
        table td[b-x2rbnm6glg] {
            padding: 5px 5px !important;
            /*border-bottom: 1px solid #ddd;*/
            text-align: left;
            vertical-align: top;
        }

    .printer-80mm table[b-x2rbnm6glg] {
        font-size: 12px;
    }

        .printer-80mm table th[b-x2rbnm6glg],
        .printer-80mm table td[b-x2rbnm6glg] {
            padding: 5px 1px;
        }

        .printer-80mm table th[b-x2rbnm6glg] {
            /*border-bottom: 2px solid #000;*/
            border-bottom: 1px dashed black;
            border-top: 1px dashed black;
            margin: 10px 0;
        }


    .printer-80mm[b-x2rbnm6glg] {
        width: 80mm;
    }

    .texto-80mm[b-x2rbnm6glg] {
    }

    .printer-58mm[b-x2rbnm6glg] {
        width: 58mm;
    }

    .printer-210mm[b-x2rbnm6glg] {
        width: 210mm;
    }

    .texto-210mm[b-x2rbnm6glg] {
        font-size: 14px;
    }

    .texto-58mm[b-x2rbnm6glg] {
        font-size: 9px;
    }


    .printer-210mm table[b-x2rbnm6glg] {
        font-size: 14px;
    }

    .printer-58mm table[b-x2rbnm6glg] {
        font-size: 9px;
    }

        .printer-58mm table th[b-x2rbnm6glg],
        .printer-58mm table td[b-x2rbnm6glg] {
            padding: 5px 3px;
        }

        .printer-58mm table th[b-x2rbnm6glg] {
            border-bottom: 1px dashed black;
            border-top: 1px dashed black;
            margin: 10px 0;
        }


    .description[b-x2rbnm6glg] {
        word-wrap: break-word;
        max-width: 100%;
        font-size: 10px;
        padding-top: 5px;
    }


    .invoice-title[b-x2rbnm6glg] {
        text-align: center;
        font-family: 'Roboto';
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .invoice-details[b-x2rbnm6glg] {
        display: flex;
        flex-direction: column;
        width: 100%;
        line-height: 1.3; /* Mejor separación entre líneas */
    }

    .row-80mm[b-x2rbnm6glg] {
        grid-template-columns: 100px 1fr; /* Columna fija para el título, flexible para el valor */
    }

    .row-58mm[b-x2rbnm6glg] {
        grid-template-columns: 90px 1fr; /* Columna fija para el título, flexible para el valor */
    }

    .row-210mm[b-x2rbnm6glg] {
        grid-template-columns: 110px 1fr; /* Columna fija para el título, flexible para el valor */
    }

    .invoice-details .row[b-x2rbnm6glg] {
        display: grid;
        gap: 5px; /* Espacio entre columnas */
        margin-bottom: 3px; /* Espacio entre filas */
    }

    .invoice-details .label[b-x2rbnm6glg] {
        text-align: left;
        font-weight: bold; /* Destacar los títulos */
        color: #333; /* Texto más oscuro para mejor legibilidad */
        font-family: 'Roboto';
        font-size: 14px;
    }

    .invoice-details .value[b-x2rbnm6glg] {
        text-align: left;
        color: #555; /* Color más claro para diferenciar del título */
        word-wrap: break-word; /* Ajustar el texto largo */
        margin-left: -25px;
        font-family: 'Roboto';
        font-size: 14px;
    }

    .ticket-header[b-x2rbnm6glg] {
        text-align: center;
        margin-bottom: 10px;
    }

        .ticket-header h1[b-x2rbnm6glg] {
            font-size: 16px;
            margin: 0;
            font-weight: bold;
        }

        .ticket-header p[b-x2rbnm6glg] {
            margin: 2px 0;
            font-size: 12px;
        }

    .divider[b-x2rbnm6glg] {
        border-top: 1px dashed black;
        margin: 10px 0;
    }

    .rowcabe[b-x2rbnm6glg] {
        margin: 10px;
    }

    .h3_1[b-x2rbnm6glg] {
        font-weight: 600;
        text-align: center;
        color: green;
    }

    .document-grid-container[b-x2rbnm6glg] {
        padding: 1rem;
        max-width: 1100px;
        margin: auto;
    }

    .document-card[b-x2rbnm6glg] {
        background: #fff;
        border-radius: 0.6rem;
        padding: 1rem;
        margin-bottom: 1rem;
        border: 1px solid #e3e6f0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .document-card-header[b-x2rbnm6glg] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .doc-title[b-x2rbnm6glg] {
        font-size: 1rem;
        font-weight: 600;
        color: #333;
    }

    .doc-subtitle[b-x2rbnm6glg] {
        font-size: 0.85rem;
    }

    .doc-total[b-x2rbnm6glg] {
        font-size: 0.95rem;
        color: #2e7d32;
    }

    .document-card-body[b-x2rbnm6glg] {
        font-size: 0.85rem;
        color: #444;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .document-card-footer[b-x2rbnm6glg] {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .doc-info[b-x2rbnm6glg] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/Cotizaciones/CotizacionMovilPOSPage.razor.rz.scp.css */

.pos-toolbar[b-0zbhulmucj] {
    background-color: transparent;
    color: white;
}

.search-bar[b-0zbhulmucj] {
    padding: 10px 0px 0px 10px;
}

.products-block[b-0zbhulmucj] {
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    max-height: 540px;
    gap: 0px;
}

    .products-block .product-single[b-0zbhulmucj] {
        position: relative;
        text-align: center;
        border: 1px solid lightgreen;
        border-radius: 2px;
        background-color: #fff;
        padding: 2px;
        box-shadow: 0 4px 20px 1px #0000000f,0 1px 4px #00000014;
        cursor: pointer;
        overflow: hidden;
        margin-bottom: 16px;
        margin-left: 8px;
        margin-right: 8px;
        width: calc(36.66% - 16px)
    }
/* Pantallas pequeñas (móviles en modo retrato) */
@media screen and (max-width: 576px) {
    .pos .left-column .products-block .product-single[b-0zbhulmucj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(30% - 1px) !important
    }
}

/* Pantallas medianas (móviles grandes o tabletas) */
@media screen and (min-width: 577px) and (max-width: 768px) {
    .pos .left-column .products-block .product-single[b-0zbhulmucj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(30% - 1px) !important
    }
}

/* Pantallas grandes (tabletas en modo horizontal o laptops) */
@media screen and (min-width: 769px) and (max-width: 992px) {
    .pos .left-column .products-block .product-single[b-0zbhulmucj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(22.66% - 1px) !important
    }
}

/* Pantallas extra grandes (desktops o monitores grandes) */
@media screen and (min-width: 993px) and (max-width:1358px) {
    .pos .left-column .products-block .product-single[b-0zbhulmucj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20.66% - 1px) !important
    }
}

@media screen and (min-width: 1359px) and (max-width:1440px) {
    .pos .left-column .products-block .product-single[b-0zbhulmucj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20.66% - 1px) !important
    }
}

@media screen and (min-width: 1441px) {
    .pos .left-column .products-block .product-single[b-0zbhulmucj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(12.66% - 1px) !important
    }
}



.no-data img[b-0zbhulmucj] {
    max-width: 80px;
}

.no-data h4[b-0zbhulmucj] {
    font-size: 16px;
    color: var(--colorTextLight);
    font-weight: 400
}

.products-block .product-single:hover[b-0zbhulmucj] {
    /*background-color: var(--colorSurface);*/
    transform: scale(1.05); /* Escalar la tarjeta ligeramente en hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añadir sombra más pronunciada en hover */
}
/* Contenedor de la imagen */
.product-image-container[b-0zbhulmucj] {
    position: relative;
    padding: 10px;
    display: flex;
    background-color: white;
    justify-content: center;
    align-items: center;
    height: 80px; /* Altura fija para que todas las imágenes tengan el mismo tamaño */
}

.badge-left[b-0zbhulmucj] {
    position: absolute;
    top: 1px;
    left: 1px;
    /*background-color: #ff5733;*/ /* Color del badge */
    background-color: darkblue;
    opacity: 0.8;
    color: #fff;
    max-width: 100px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.7em;
}

.badge-sinstock[b-0zbhulmucj] {
    position: absolute;
    top: 1px;
    left: 1px;
    /*background-color: #ff5733;*/ /* Color del badge */
    background-color: red;
    opacity: 0.8;
    color: #fff;
    max-width: 100px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.7em;
}

.badge-right[b-0zbhulmucj] {
    display: block;
    background-color: transparent; /* Color del badge */
    color: green;
    border-radius: 2px;
    font-size: 1.0em;
    font-weight: bold;
}

.products-block .product-single .image[b-0zbhulmucj] {
    width: 90%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    border-radius: 1px;
}

.products-block .product-single .product-title[b-0zbhulmucj] {
    font-size: 0.8em;
    margin: 10px 0;
    background-color: green; /* Fondo semitransparente */
    opacity: 0.9;
    color: white;
    padding: 3px;
    height: 40px;
    max-height: 40px;
    border-radius: 2px;
    display: -webkit-box; /* Necesario para el uso de line-clamp */
    -webkit-line-clamp: 2; /* Limita a 2 líneas */
    -webkit-box-orient: vertical; /* Define la orientación del recorte de texto */
    overflow: hidden; /* Oculta el texto que sobrepasa el límite */
    text-overflow: ellipsis; /* Muestra puntos suspensivos (...) si el texto se desborda */
}

@media (max-width: 1199px) {
    .pos .right-column .products-block .product-single .image[b-0zbhulmucj] {
        height: 70px !important;
        max-height: 70px !important
    }
}

@media (max-width: 1199px) {
    .pos .products-block .product-single .product-title[b-0zbhulmucj] {
        font-size: 0.8em !important;
        margin-bottom: 4px
    }
}

.grid-container[b-0zbhulmucj] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
}


/* ====================================================== */
/* Contenedor GRID de Productos (New & Improved with custom3) */
/* ====================================================== */
.products-block-custom3[b-0zbhulmucj] {
    width: 100%;
    /*display: grid;*/
    /* Grid de auto-ajuste: 2, 3 o 4 columnas dependiendo del espacio,
       manteniendo un ancho mínimo razonable para cada tarjeta. */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill para asegurar 1 o más columnas sin huecos si hay pocos ítems */
    gap: 20px; /* Espacio entre las tarjetas de producto */
    padding: 20px 0; /* Padding superior e inferior para el bloque de productos */
    overflow-x: hidden;
    height: auto;
    max-height: 570px;
    /*min-height: calc(100vh - 350px);*/
    overflow-y: auto;
    position: relative
}

/* Estilo individual de cada tarjeta de producto */
.product-single-custom3[b-0zbhulmucj] {
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave y atractiva */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente: imagen, info, botón */
    overflow: hidden; /* Asegura que el contenido no se desborde, especialmente el border-radius */
    cursor: pointer;
    position: relative; /* Para el posicionamiento del badge de stock */
    /* Para mantener una proporción y evitar que se estiren inmensamente */
    /* La altura se ajustará al contenido, pero establecemos una altura mínima */
    min-height: 280px; /* Altura mínima razonable para un producto */
}

    .product-single-custom3:hover[b-0zbhulmucj] {
        transform: translateY(-5px); /* Efecto de levantamiento al pasar el ratón */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Sombra más intensa al hacer hover */
    }

/* Contenedor de la imagen del producto */
.product-image-container-custom3[b-0zbhulmucj] {
    position: relative;
    width: 100%;
    /* Truco para mantener una proporción de aspecto (cuadrada o 4:3) */
    /* 100% de padding-top para una imagen cuadrada, 75% para 4:3 */
    padding-top: 100%; /* Hace que el contenedor sea cuadrado, ideal para imágenes de producto */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se desborde */
    border-bottom: 1px solid #eee; /* Separador sutil */
    background-color: #f0f0f0; /* Fondo si la imagen tarda en cargar */
    display: flex; /* Para centrar la imagen */
    justify-content: center;
    align-items: center;
}

.product-image-custom3[b-0zbhulmucj] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Escala la imagen para que quepa dentro del contenedor sin recortar */
    /* object-fit: cover; // Usa 'cover' si prefieres que la imagen llene el espacio y se recorte si es necesario */
    transition: transform 0.3s ease; /* Transición suave para el zoom al hover */
}

.product-single-custom3:hover .product-image-custom3[b-0zbhulmucj] {
    transform: scale(1.05); /* Ligerísimo zoom en la imagen al hacer hover */
}

/* Badge de stock */
.badge-stock-custom3[b-0zbhulmucj],
.badge-nostock-custom3[b-0zbhulmucj] {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10; /* Asegura que esté sobre la imagen */
}

.badge-stock-custom3[b-0zbhulmucj] {
    background-color: #28a745; /* Verde para stock disponible */
}

.badge-nostock-custom3[b-0zbhulmucj] {
    background-color: #dc3545; /* Rojo para sin stock */
}

/* Información del producto (título y precio) */
.product-info-custom3[b-0zbhulmucj] {
    padding: 15px;
    flex-grow: 1; /* Permite que esta sección crezca y ocupe el espacio disponible */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye el título y el precio */
}

.product-title-custom3[b-0zbhulmucj] {
    font-size: 1.05em;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita el título a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em; /* Asegura un espacio consistente para el título de 2 líneas */
}

.product-price-custom3[b-0zbhulmucj] {
    font-size: 1.25em;
    font-weight: 700;
    color: #007bff; /* Color primario para el precio */
    margin: 0; /* Elimina margen inferior */
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Botón de información */
.btn-info-custom3[b-0zbhulmucj] {
    width: calc(100% - 30px); /* Ancho del botón con padding de los lados */
    margin: 0 15px 15px 15px; /* Margen inferior y lateral para separarlo de los bordes */
    border-radius: 8px; /* Bordes redondeados para el botón */
    font-size: 0.95em;
    font-weight: 600;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    /* Los estilos de color y background ya los gestiona SfButton con CssClass="e-flat e-success" */
}

/* ====================================================== */
/* Media Queries para Responsividad (custom3) */
/* ====================================================== */

/* Para pantallas medianas (md): 2 columnas */
@media (max-width: 768px) {
    .products-block-custom3[b-0zbhulmucj] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Reduce el min-width */
        gap: 15px;
        padding: 15px 0;
    }

    .product-single-custom3[b-0zbhulmucj] {
        min-height: 250px; /* Ajusta altura mínima */
    }
}

/* Para pantallas pequeñas (sm/xs): 1 columna */
@media (max-width: 576px) {
    .products-block-custom3[b-0zbhulmucj] {
        grid-template-columns: 1fr; /* Una columna completa */
        gap: 15px;
        padding: 10px 0;
    }

    .product-single-custom3[b-0zbhulmucj] {
        max-width: 320px; /* Limita el ancho máximo para que no se vea inmenso en pantallas muy pequeñas */
        margin: 0 auto; /* Centra el producto si solo hay uno */
        min-height: 280px;
    }

    .btn-info-custom3[b-0zbhulmucj] {
        width: calc(100% - 20px); /* Ajusta el ancho del botón */
        margin: 0 10px 10px 10px;
    }
}

/* Opcional: Ajuste para pantallas grandes (lg/xl) si necesitas más columnas o un min-width mayor */
@media (min-width: 1200px) {
    .products-block-custom3[b-0zbhulmucj] {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* 4 o 5 columnas */
        gap: 25px;
    }

    .product-single-custom3[b-0zbhulmucj] {
        min-height: 320px;
    }
}

/* ====================================================== */
/* Contenedor GRID de Categorías Adaptable (New & Improved) */
/* ====================================================== */
.categories[b-0zbhulmucj] {
    width: 100%;
    max-height: 20vh; /* Podría limitar la altura y forzar scroll. Ajusta según necesidad, o elimina si prefieres que crezca. */
    overflow-y: auto; /* Permite scroll vertical si el contenido excede el max-height */
    overflow-x: hidden; /* Oculta scroll horizontal */
    display: grid;
    /* Por defecto: ajusta automáticamente el número de columnas con un mínimo de 120px */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px; /* Aumenta el espaciado entre las categorías */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en dispositivos iOS */
    padding: 15px; /* Más padding para que el contenido respire */
    background-color: #f8fafd; /* Un gris muy claro, casi blanco azulado para un look limpio */
    border-radius: 12px; /* Bordes un poco más redondeados */
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* Sombra más suave y moderna para profundidad */
}

/* Forzar 3 columnas en pantallas pequeñas (hasta 576px, breakpoint 'sm' de Bootstrap) */
@media (max-width: 576px) {
    .categories[b-0zbhulmucj] {
        grid-template-columns: repeat(3, 1fr); /* Fuerza 3 columnas iguales */
        max-height: 150px; /* Ajusta la altura máxima para pantallas pequeñas */
        gap: 8px; /* Reduce el espaciado en pantallas pequeñas */
        padding: 10px;
    }
}

/* En pantallas medianas (min-width: 577px hasta 991px, 'md' de Bootstrap) */
@media (min-width: 577px) and (max-width: 991px) {
    .categories[b-0zbhulmucj] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Ajusta el min-width para más columnas */
        gap: 10px;
        padding: 12px;
    }
}

/* En pantallas grandes (min-width: 992px, 'lg' de Bootstrap) */
@media (min-width: 992px) {
    .categories[b-0zbhulmucj] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Más ancho mínimo para pantallas grandes */
        /* max-height: 25vh; */ /* Considera si realmente quieres un max-height fijo aquí */
        gap: 15px; /* Mayor espaciado */
        padding: 20px;
    }
}

/* ====================================================== */
/* Estilos para cada Item de Categoría (New & Improved) */
/* ====================================================== */
.items[b-0zbhulmucj] {
    list-style: none; /* Quita los puntos de lista */
    padding: 0;
    margin: 0;
}

    /* Estilo individual de cada categoría, manteniendo la proporción (altura fija con padding) */
    .items li[b-0zbhulmucj] {
        display: flex;
        flex-direction: column; /* Apila contenido verticalmente */
        justify-content: center; /* Centra verticalmente */
        align-items: center; /* Centra horizontalmente */
        text-align: center;
        cursor: pointer;
        background-color: #ffffff; /* Fondo blanco más brillante */
        height: 75px; /* Aumenta la altura para que respire más el contenido */
        border-radius: 12px; /* Bordes más suaves */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Sombra más definida */
        transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden; /* Oculta cualquier contenido que se desborde */
        box-sizing: border-box;
        padding: 8px; /* Padding interno para el contenido */
        border: 1px solid #e0e7ee; /* Borde sutil para definir cada item */
    }

        /* Hover effect para cada categoría */
        .items li:hover[b-0zbhulmucj] {
            background-color: #e6f0ff; /* Azul clarito más vibrante */
            transform: translateY(-4px); /* Levantamiento más pronunciado */
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); /* Sombra más intensa al hacer hover */
        }

    /* Estilos para el Título de la categoría */
    .items .title[b-0zbhulmucj] {
        font-weight: 700; /* Más negrita para mayor impacto */
        color: #2c3e50; /* Un gris muy oscuro, casi negro, para contraste */
        font-size: clamp(0.8rem, 1.5vw, 1.05rem); /* Rango de tamaño de fuente más dinámico y un poco más grande */
        line-height: 1.2; /* Espaciado de línea ligeramente mayor */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limita a 2 líneas de texto */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* Puntos suspensivos si el texto es muy largo */
        margin-top: 5px; /* Espacio si hubiera un icono arriba */
    }

/* ====================================================== */
/* Ajustes para pantallas XL (min-width: 1200px, 'xl' de Bootstrap) */
/* Puedes añadir una media query para 1440px si es estrictamente necesario,
   pero con auto-fit y minmax, Bootstrap suele manejar bien los tamaños intermedios. */
/* ====================================================== */
@media (min-width: 1200px) {
    .categories[b-0zbhulmucj] {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* Ancho mínimo para más columnas */
        /* max-height: 28vh; */
        gap: 18px; /* Aún más espacio */
        padding: 25px;
    }

    .items li[b-0zbhulmucj] {
        height: 90px; /* Mayor altura para items en pantallas muy grandes */
        padding: 10px;
    }
}
/* Contenedor de la sección */
.section-header[b-0zbhulmucj] {
    width: 100%;
    background-color: #f1f5f9; /* Gris claro suave */
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    margin-top: 10px;
    box-sizing: border-box;
}

/* Título */
.section-title[b-0zbhulmucj] {
    font-size: 1rem;
    font-weight: 600;
    color: #334155; /* Gris oscuro azulado */
    margin: 0;
    word-break: break-word;
}

.pager-container[b-0zbhulmucj] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}




.responsive-container[b-0zbhulmucj] {
    display: flex;
    height: calc(100vh - 60px); /* Ocupa todo el alto menos la altura de la barra de herramientas */
    padding: 10px;
    box-sizing: border-box;
}

.pos .right-column .calculation .table tr td[b-0zbhulmucj] {
    cursor: pointer;
    text-align: center
}

    .pos .right-column .calculation .table tr td.clickable:hover[b-0zbhulmucj] {
        background-color: var(--colorPrimary);
        color: var(--colorOnPrimary)
    }

.pos .right-column .calculation .table td[b-0zbhulmucj], .pos .right-column .calculation .table th[b-0zbhulmucj] {
    font-size: 14px
}

.pos .pos-right .products-block[b-0zbhulmucj] {
    height: auto;
    max-height: 500px;
    min-height: calc(100vh - 250px);
    overflow-y: auto;
    position: relative
}

@media (max-width: 991px) {
    .pos .pos-right[b-0zbhulmucj] {
        margin-top: 20px
    }

    .pos .pos-left .calculation .table td[b-0zbhulmucj], .pos .pos-left .calculation .table th[b-0zbhulmucj] {
        font-size: 10px
    }
}


@media screen and (max-width: 1024px) {
    .responsive-container[b-0zbhulmucj] {
        flex-direction: column;
    }

    .left-column[b-0zbhulmucj], .right-column[b-0zbhulmucj] {
        flex: none;
        width: 100%;
    }
}


.form-row[b-0zbhulmucj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 2px;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-0zbhulmucj] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */


/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-0zbhulmucj] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-0zbhulmucj],
    .custom-button[b-0zbhulmucj] {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .responsive-container[b-0zbhulmucj] {
        flex-direction: column;
    }

    .left-column[b-0zbhulmucj], .right-column[b-0zbhulmucj] {
        flex: none;
        width: 100%;
    }
}


.loading-overlay[b-0zbhulmucj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-0zbhulmucj] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-0zbhulmucj 1s linear infinite;
}

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

.right-column .cart[b-0zbhulmucj] {
    height: auto;
    max-height: 470px;
    min-height: calc(100vh - 400px);
}

.right-column .card[b-0zbhulmucj] {
    border-radius: 0px;
    padding: 4px;
}

.horizontal-product-list[b-0zbhulmucj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li[b-0zbhulmucj] {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box[b-0zbhulmucj] {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box[b-0zbhulmucj] {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img[b-0zbhulmucj] {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img[b-0zbhulmucj] {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details[b-0zbhulmucj] {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details[b-0zbhulmucj] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cart-product-box .horizontal-product-details .trash-button[b-0zbhulmucj] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-0zbhulmucj] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-0zbhulmucj] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-0zbhulmucj] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.cart-product-box .horizontal-product-details .product-title[b-0zbhulmucj] {
    font-size: 0.8em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info[b-0zbhulmucj] {
    display: flex;
    padding: 0;
    margin-top: 1px;
    margin-bottom: 5px;
    font-size: 0.8em;
    position: relative;
    color: green;
}

.cart-product-box .horizontal-product-details .product-price[b-0zbhulmucj] {
    font-size: 15px
}

.cart-product-box .horizontal-product-details .product-price-input[b-0zbhulmucj] {
    border-bottom: 1px solid var(--colorPrimary);
    padding: 2px 0
}

    .cart-product-box .horizontal-product-details .product-price-input input[b-0zbhulmucj] {
        width: 70px;
        padding: 0;
        border: none;
        outline: none;
        background: transparent
    }

.cart-product-box .horizontal-product-details .product-info li[b-0zbhulmucj] {
    position: relative;
    font-weight: 400;
    line-height: 1;
    color: var(--colorTextLight);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    gap: 5px
}
/* En tu archivo CSS o bloque <style> */

.card[b-0zbhulmucj] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f,0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0
}

    .card[b-0zbhulmucj]:before {
        position: absolute;
        content: "";
        height: 80%;
        width: 1px;
        inset-inline-start: 0;
        background: var(--colorBorderBefore);
        inset-block-start: 10%;
        box-shadow: 8px 0 0 17px var(--colorBorderBeforeShadow)
    }

    .card .card-header[b-0zbhulmucj], .card .card-body[b-0zbhulmucj], .card .card-footer[b-0zbhulmucj] {
        background-color: transparent
    }

        .card .card-header .title[b-0zbhulmucj] {
            font-size: 16px;
            line-height: 28px;
            padding-right: 10px;
            margin-bottom: 0;
            color: var(--colorTextPrimary)
        }

    .card .card-header[b-0zbhulmucj] {
        border-bottom: 1px solid #dee2e630;
        line-height: 30px;
        align-self: center;
        width: 100%;
        display: flex;
        align-items: center
    }

    .card .card-footer[b-0zbhulmucj] {
        background-color: transparent;
        border: none
    }

@media (max-width: 767.98px) {
    .card .card-header[b-0zbhulmucj] {
        height: auto;
        flex-wrap: wrap
    }

    .card .card-header[b-0zbhulmucj], .card .card-body[b-0zbhulmucj], .card .card-footer[b-0zbhulmucj] {
        background-color: transparent;
        padding: 10px
    }
}

.producto-linea2[b-0zbhulmucj] {
    display: flex;
    align-items: center;
    justify-content: start;
}

@media (max-width: 574px) {
    .producto-linea2[b-0zbhulmucj] {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}


.botones-producto-linea2[b-0zbhulmucj] {
    display: flex;
    align-items: center;
    justify-content: end;
}

@media (max-width: 574px) {
    .botones-producto-linea2[b-0zbhulmucj] {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}


.producto-linea3[b-0zbhulmucj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* Previene el salto a una nueva fila */
    gap: 8px;
}

    .producto-linea3 .input-wrapper[b-0zbhulmucj] {
        flex: 1 1 auto;
        min-width: 70px; /* Tamaño mínimo para cada control */
    }

@media (max-width: 576px) {
    .producto-linea3[b-0zbhulmucj] {
        gap: 4px; /* Reduce el espacio entre elementos */
    }

        .producto-linea3 .input-wrapper[b-0zbhulmucj] {
            flex: 1 1 33%; /* Cada elemento ocupa una tercera parte */
        }
}


.card hr[b-0zbhulmucj] {
    color: var(--colorBorder)
}

.pos-toolbar[b-0zbhulmucj] {
    background-color: transparent;
    color: white;
}

.page-header[b-0zbhulmucj] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-0zbhulmucj] {
        width: 100%;
    }

    .page-header .page-header-title[b-0zbhulmucj] {
        display: block;
    }

    .page-header h4[b-0zbhulmucj], .page-header .h4[b-0zbhulmucj] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-0zbhulmucj] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }



/* Contenedor principal: Auto-fit, tarjetas más cómodas en pantallas grandes */
.products-block-custom[b-0zbhulmucj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    justify-items: stretch;
    overflow-x: hidden;
    height: auto;
    max-height: 500px;
    min-height: calc(100vh - 250px);
    overflow-y: auto;
    position: relative
}

/* Pantallas pequeñas: fuerza 2 columnas y reduce espaciados */
@media (max-width: 400px) {
    .products-block-custom[b-0zbhulmucj] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }
}

/* Tarjeta individual */
.product-single-custom[b-0zbhulmucj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: white;
    border-radius: 12px;
    padding: 0.8rem;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover en pantallas grandes */
@media (min-width: 600px) {
    .product-single-custom:hover[b-0zbhulmucj] {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }
}

.product-single-custom:hover[b-0zbhulmucj] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* Imagen del producto */
.product-image-container-custom[b-0zbhulmucj] {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.product-image-custom[b-0zbhulmucj] {
    width: 100%;
    max-width: 110px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #ddd;
}

/* Badges de stock */
.badge-stock-custom[b-0zbhulmucj],
.badge-nostock-custom[b-0zbhulmucj] {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 6px;
    font-size: 0.7rem;
    border-radius: 20px;
    color: #fff;
    white-space: nowrap;
}

.badge-stock-custom[b-0zbhulmucj] {
    background-color: #4caf50;
}

.badge-nostock-custom[b-0zbhulmucj] {
    background-color: #f44336;
}

/* Información del producto */
.product-info-custom[b-0zbhulmucj] {
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.product-title-custom[b-0zbhulmucj] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    word-wrap: break-word;
}

.product-price-custom[b-0zbhulmucj] {
    font-size: 0.75rem;
    color: #555;
}

/* Botón Info */
.btn-info-custom[b-0zbhulmucj] {
    margin-top: 6px;
    font-size: 0.75rem;
    background-color: #e3f2fd;
    color: #1565c0;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Contenedor No Data */
.no-data-custom[b-0zbhulmucj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    padding: 2rem;
}

    .no-data-custom img[b-0zbhulmucj] {
        width: 70px;
        height: 70px;
        opacity: 0.7;
    }

/* Paginador */
.pager-container-custom[b-0zbhulmucj] {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

/* Limpieza global */
body[b-0zbhulmucj], html[b-0zbhulmucj] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}


/* FIX: Añadir cursor: pointer para la tarjeta de producto */
.product-cardc3[b-0zbhulmucj] {
    background-color: var(--card-bg);
    border: 1px solid groove;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer; /* <--- AQUÍ LA CORRECCIÓN */
}

    .product-cardc3:hover[b-0zbhulmucj] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-color: var(--primary-accent);
    }

.product-image-containerc3[b-0zbhulmucj] {
    aspect-ratio: 1 / 1;
    background-color: #f1f3f5;
}

.product-img[b-0zbhulmucj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-cardc3 .card-body[b-0zbhulmucj] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-titlec3[b-0zbhulmucj] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 45px;
}

.product-pricec3[b-0zbhulmucj] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-accent);
    margin-top: auto;
    padding-top: 0.5rem;
}

    .product-pricec3 .original-pricec3[b-0zbhulmucj] {
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--text-muted-light);
    }

.discount-badge[b-0zbhulmucj] {
    font-weight: 600;
    font-size: 0.75rem;
    background-color: var(--primary-accent) !important;
}

.ratingc3[b-0zbhulmucj] {
    font-size: 0.8rem;
}

.product-popup-imagec3[b-0zbhulmucj] {
    width: 100%; /* Ensures it fills the column width */
    height: 100%; /* Or a fixed height you prefer */
    object-fit: cover; /* OR cover */
    display: block; /* Removes any extra space below the image */
}

/* Optional: Add a max-height if you want it responsive but not too tall */
@media (max-width: 767px) {
    .product-popup-imagec3[b-0zbhulmucj] {
        height: 250px;
    }
}
/* For the new 'btn-product-info' button */
.btn-product-info[b-0zbhulmucj] {
    /* Basic button styling - adjust colors to match your theme */
    background-color: #007bff; /* A nice blue, adjust to your theme's info/success color */
    color: #fff;
    border: none;
    border-radius: 8px; /* Slightly more rounded corners */
    padding: 10px 15px; /* Comfortable padding */
    font-size: 0.95rem; /* Slightly larger text */
    font-weight: 600; /* Bolder text */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Smooth transitions for hover */
    /*display: inline-flex;*/ /* Allows icon and text to sit nicely side-by-side */
    align-items: center;
    margin-top: 5px;
    gap: 8px; /* Space between icon and text */
    text-decoration: none; /* Remove underline if it's a link-like button */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    /* Positioning and z-index if needed within a complex layout */
    position: relative; /* Allows z-index to work */
    z-index: 10; /* Keep it above other elements if necessary */
}

    /* Hover state for interaction */
    .btn-product-info:hover[b-0zbhulmucj] {
        background-color: #0056b3; /* Darker blue on hover */
        transform: translateY(-2px); /* Slight lift effect */
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* More prominent shadow on hover */
    }

    /* Active/Clicked state */
    .btn-product-info:active[b-0zbhulmucj] {
        background-color: #004085; /* Even darker on click */
        transform: translateY(0); /* Button pushes down */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Reduced shadow */
    }

    /* Optional: If you want to disable it */
    .btn-product-info:disabled[b-0zbhulmucj] {
        background-color: #cccccc;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/Pedidos/PedidoMovilListPage.razor.rz.scp.css */
.grid-container[b-ky7rcf0e06] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 13rem);
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    /*align-items: center;*/ /* Centrar verticalmente */
}
/* --- Styles for the Cotizacion Filter Row --- */
/* This is your component's own div, so it gets the isolation hash */
.cotizacion-filter-row[b-ky7rcf0e06] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

    /* --- Styling for Dropdowns within the Filter Row --- */
    /* Use ::deep to target Syncfusion's internal .e-dropdownlist class */
    .cotizacion-filter-row[b-ky7rcf0e06]  .e-dropdownlist {
        flex-grow: 1;
        flex-basis: 0;
        min-width: 12.5rem;
        height: auto;
    }

        /* Use ::deep to target the inner input group of Syncfusion dropdowns */
        .cotizacion-filter-row[b-ky7rcf0e06]  .e-dropdownlist .e-input-group {
            width: 100%;
            box-sizing: border-box;
        }

    /* Adjust FloatLabelType for better appearance - requires ::deep too */
    .cotizacion-filter-row[b-ky7rcf0e06]  .e-float-text {
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        transition: all 0.2s ease-out;
        pointer-events: none;
        color: #6c757d;
    }

    .cotizacion-filter-row[b-ky7rcf0e06]  .e-float-input.e-input-focus + .e-float-text,
    .cotizacion-filter-row[b-ky7rcf0e06]  .e-float-input.e-valid-input + .e-float-text {
        top: 0.5rem;
        font-size: 0.75rem;
        color: #007bff;
    }

    /* --- Styling for SfButton within the Filter Row --- */
    /* Use ::deep to target Syncfusion's internal .e-btn class */
    .cotizacion-filter-row[b-ky7rcf0e06]  .e-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 0.25rem;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
        height: 2.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* Syncfusion primary button specific styles - requires ::deep */
        .cotizacion-filter-row[b-ky7rcf0e06]  .e-btn.e-primary {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
        }

            .cotizacion-filter-row[b-ky7rcf0e06]  .e-btn.e-primary:hover {
                background-color: #0056b3;
                border-color: #004085;
            }

        /* Spacing for the button icon - requires ::deep */
        .cotizacion-filter-row[b-ky7rcf0e06]  .e-btn .e-btn-icon {
            margin-right: 0.5rem;
        }

/* --- Responsiveness for Smaller Screens --- */
/* The top-level class will still get the isolation hash, so no ::deep needed here */
@media (max-width: 768px) {
    .cotizacion-filter-row[b-ky7rcf0e06] {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 1rem;
    }

        /* Use ::deep for all Syncfusion elements within the media query as well */
        .cotizacion-filter-row[b-ky7rcf0e06]  .e-dropdownlist,
        .cotizacion-filter-row[b-ky7rcf0e06]  .e-dropdownlist .e-input-group,
        .cotizacion-filter-row[b-ky7rcf0e06]  .e-btn {
            width: 100%;
            min-width: auto;
            flex-basis: auto;
        }
}
.pos-toolbar[b-ky7rcf0e06] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-ky7rcf0e06] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-ky7rcf0e06] {
    flex-shrink: 0;
    
}


    

.page-header[b-ky7rcf0e06] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-ky7rcf0e06] {
        width: 100%;
    }

    .page-header .page-header-title[b-ky7rcf0e06] {
        display: block;
    }

    .page-header h4[b-ky7rcf0e06], .page-header .h4[b-ky7rcf0e06] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-ky7rcf0e06] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.card[b-ky7rcf0e06] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px;    
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cart-product-box .horizontal-product-details .trash-button[b-ky7rcf0e06] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-ky7rcf0e06] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }
.trash-btn[b-ky7rcf0e06] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-ky7rcf0e06] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }
.card-content[b-ky7rcf0e06]{
    display:contents !important;
}
.info[b-ky7rcf0e06] {
    flex-grow: 1;
}

    .info h5[b-ky7rcf0e06] {
        margin: 0px;
        font-size: 15px;
        color: #333;
        font-style:oblique;
    }

    .info h4[b-ky7rcf0e06] {
        margin: 0px;
        font-size: 14px;
        color: blue;
    }

    .info p[b-ky7rcf0e06] {
        margin: 2px 0;
        font-size: 14px;
        color: #555;
    }

.actions[b-ky7rcf0e06] {
    display: flex;
    gap: 10px;
    /*margin-left:140px;*/
}
    .actions .btn:hover[b-ky7rcf0e06] {
        background-color: rgba(0, 0, 0, 0.1);
    }
    .actions .btn[b-ky7rcf0e06] {
        border: none;
        background: none;
        cursor: pointer;
        font-size: 18px;
    }

        .actions .btn.view[b-ky7rcf0e06] {
            color: #007bff;
        }

        .actions .btn.edit[b-ky7rcf0e06] {
            color: #ffc107;
        }

        .actions .btn.delete[b-ky7rcf0e06] {
            color: #dc3545;
        }

.producto-linea2[b-ky7rcf0e06] {
    display: flex;
    align-items: center;
    justify-content: start;
}

/*@media (max-width: 574px) {
    .producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}*/


.botones-producto-linea2[b-ky7rcf0e06] {
    display: flex;
    align-items: center;
    justify-content: end;    
}

/*@media (max-width: 574px) {
    .botones-producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}*/
/* Contenedor principal del ListView */
/*.responsive-listview {
    max-width: 500px;
    margin: auto;    
    border-radius: 2px;*/
    /*height: 470px;*/
    /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}*/

/* Estilo general de los ítems (cards) */
/*.list-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: lightgray;
    opacity: 0.7;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    margin-left: 10px;
    margin-block: 10px;
    margin-bottom: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f0f0f0;
    overflow: visible;
}*/

    /* Efecto al pasar el cursor por encima */
    /*.list-item:hover {
        transform: translateY(-5px);*/
        /*box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);*/
    /*}*/

/* Contenido de los ítems */
/*.item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;*/ /* Espaciado entre líneas */
/*}

    .item-content h4 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        color: blue;
    }

    .item-content p {
        font-size: 14px;
        margin: 0;
        color: black;
        word-wrap: break-word;*/ /* Asegura que el texto largo se ajuste al ancho */
    /*}*/
.horizontal-product-list[b-ky7rcf0e06] {
    display: contents;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li[b-ky7rcf0e06] {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box[b-ky7rcf0e06] {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box[b-ky7rcf0e06] {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img[b-ky7rcf0e06] {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img[b-ky7rcf0e06] {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details[b-ky7rcf0e06] {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details[b-ky7rcf0e06] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}
.cart-product-box .horizontal-product-details .product-title[b-ky7rcf0e06] {
    font-size: 1.2em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info[b-ky7rcf0e06] {
    display: flex;
    padding: 0;
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1.2em;
    position: relative;
    color: green;
    word-wrap: break-word;
}

.cart-product-box .horizontal-product-details .product-price[b-ky7rcf0e06] {
    font-size: 15px
}
.cart-product-box .horizontal-product-details .trash-button[b-ky7rcf0e06] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-ky7rcf0e06] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-ky7rcf0e06] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-ky7rcf0e06] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }
    .spanstyle[b-ky7rcf0e06]{
        font-size:1.1em !important;
    }
.spanstylecolor[b-ky7rcf0e06] {
    font-size: 1.1em !important;
    color:blue;
}
/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 480px) {
    .cart-product-box .horizontal-product-details .product-title[b-ky7rcf0e06] {
        font-size: 0.8em !important; /* Ajusta para pantallas pequeñas */
        font-weight: 600;
        font-style: italic;
        margin-top: 1px;
    }

    .cart-product-box .horizontal-product-details .product-info[b-ky7rcf0e06] {
        display: flex;
        padding: 0;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 0.8em; /* Ajusta para pantallas pequeñas */
        position: relative;
        color: green;
        word-wrap:break-word;
    }
}
@media (max-width: 480px) {
    .spanstyle[b-ky7rcf0e06] {
        font-size: 0.8em !important;
    }

    .spanstylecolor[b-ky7rcf0e06] {
        font-size: 0.8em !important;
        color: blue;
    }
}
.styletotal[b-ky7rcf0e06] {
    background-color: white; 
    margin-top: 10px;
    padding: 10px;
    color: navy;
    border-style: ridge;    
}
/*@media (min-width: 1025px) {
    .cart-product-box .horizontal-product-details .product-title {
        font-size: 0.9em !important;*/ /* Ajusta para pantallas pequeñas */
        /*font-weight: 600;
        font-style: italic;
        margin-top: 1px;
    }

    .cart-product-box .horizontal-product-details .product-info {
        display: flex;
        padding: 0;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 1.0em;*/ /* Ajusta para pantallas pequeñas */
        /*position: relative;
        color: green;
    }
}*/
/* Estilo general del invoice-wrapper */
.invoice-container[b-ky7rcf0e06] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
    background-color: #f9f9f9;
}

#invoice-wrapper[b-ky7rcf0e06] {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    word-wrap: break-word;
    text-align: left;
    width: auto;
}


table[b-ky7rcf0e06] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    table th[b-ky7rcf0e06],
    table td[b-ky7rcf0e06] {
        padding: 5px 5px !important;
        /*border-bottom: 1px solid #ddd;*/
        text-align: left;
        vertical-align: top;
    }

.printer-80mm table[b-ky7rcf0e06] {
    font-size: 12px;
}

    .printer-80mm table th[b-ky7rcf0e06],
    .printer-80mm table td[b-ky7rcf0e06] {
        padding: 5px 1px;
    }

    .printer-80mm table th[b-ky7rcf0e06] {
        /*border-bottom: 2px solid #000;*/
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.printer-80mm[b-ky7rcf0e06] {
    width: 80mm;
}

.texto-80mm[b-ky7rcf0e06] {
}

.printer-58mm[b-ky7rcf0e06] {
    width: 58mm;
}

.printer-210mm[b-ky7rcf0e06] {
    width: 210mm;
}

.texto-210mm[b-ky7rcf0e06] {
    font-size: 14px;
}

.texto-58mm[b-ky7rcf0e06] {
    font-size: 9px;
}


.printer-210mm table[b-ky7rcf0e06] {
    font-size: 14px;
}

.printer-58mm table[b-ky7rcf0e06] {
    font-size: 9px;
}

    .printer-58mm table th[b-ky7rcf0e06],
    .printer-58mm table td[b-ky7rcf0e06] {
        padding: 5px 3px;
    }

    .printer-58mm table th[b-ky7rcf0e06] {
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.description[b-ky7rcf0e06] {
    word-wrap: break-word;
    max-width: 100%;
    font-size: 10px;
    padding-top: 5px;
}


.invoice-title[b-ky7rcf0e06] {
    text-align: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.invoice-details[b-ky7rcf0e06] {
    display: flex;
    flex-direction: column;
    width: 100%;
    line-height: 1.3; /* Mejor separación entre líneas */
}

.row-80mm[b-ky7rcf0e06] {
    grid-template-columns: 100px 1fr; /* Columna fija para el título, flexible para el valor */
}

.row-58mm[b-ky7rcf0e06] {
    grid-template-columns: 90px 1fr; /* Columna fija para el título, flexible para el valor */
}

.row-210mm[b-ky7rcf0e06] {
    grid-template-columns: 110px 1fr; /* Columna fija para el título, flexible para el valor */
}

.invoice-details .row[b-ky7rcf0e06] {
    display: grid;
    gap: 5px; /* Espacio entre columnas */
    margin-bottom: 3px; /* Espacio entre filas */
}

.invoice-details .label[b-ky7rcf0e06] {
    text-align: left;
    font-weight: bold; /* Destacar los títulos */
    color: #333; /* Texto más oscuro para mejor legibilidad */
    font-family: 'Roboto';
    font-size: 14px;
}

.invoice-details .value[b-ky7rcf0e06] {
    text-align: left;
    color: #555; /* Color más claro para diferenciar del título */
    word-wrap: break-word; /* Ajustar el texto largo */
    margin-left: -25px;
    font-family: 'Roboto';
    font-size: 14px;
}

.ticket-header[b-ky7rcf0e06] {
    text-align: center;
    margin-bottom: 10px;
}

    .ticket-header h1[b-ky7rcf0e06] {
        font-size: 16px;
        margin: 0;
        font-weight: bold;
    }

    .ticket-header p[b-ky7rcf0e06] {
        margin: 2px 0;
        font-size: 12px;
    }

.divider[b-ky7rcf0e06] {
    border-top: 1px dashed black;
    margin: 10px 0;
}

.rowcabe[b-ky7rcf0e06] {
    margin: 10px;
}

.h3_1[b-ky7rcf0e06] {
    font-weight: 600;
    text-align: center;
    color: green;
}
.document-grid-container[b-ky7rcf0e06] {
    padding: 1rem;
    max-width: 1100px;
    margin: auto;
}

.document-card[b-ky7rcf0e06] {
    background: #fff;
    border-radius: 0.6rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e3e6f0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.document-card-header[b-ky7rcf0e06] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.doc-title[b-ky7rcf0e06] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.doc-subtitle[b-ky7rcf0e06] {
    font-size: 0.85rem;
}

.doc-total[b-ky7rcf0e06] {
    font-size: 0.95rem;
    color: #2e7d32;
}

.document-card-body[b-ky7rcf0e06] {
    font-size: 0.85rem;
    color: #444;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.document-card-footer[b-ky7rcf0e06] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.doc-info[b-ky7rcf0e06] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/Pedidos/PedidoMovilPOSPage.razor.rz.scp.css */

.pos-toolbar[b-7g5p72z7sj] {
    background-color: transparent;
    color: white;
}

.search-bar[b-7g5p72z7sj] {
    padding: 10px 0px 0px 10px;
}

.products-block[b-7g5p72z7sj] {
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    max-height: 540px;
    gap: 0px;
}

    .products-block .product-single[b-7g5p72z7sj] {
        position: relative;
        text-align: center;
        border: 1px solid lightgreen;
        border-radius: 2px;
        background-color: #fff;
        padding: 2px;
        box-shadow: 0 4px 20px 1px #0000000f,0 1px 4px #00000014;
        cursor: pointer;
        overflow: hidden;
        margin-bottom: 16px;
        margin-left: 8px;
        margin-right: 8px;
        width: calc(36.66% - 16px)
    }
/* Pantallas pequeñas (móviles en modo retrato) */
@media screen and (max-width: 576px) {
    .pos .left-column .products-block .product-single[b-7g5p72z7sj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(30% - 1px) !important
    }
}

/* Pantallas medianas (móviles grandes o tabletas) */
@media screen and (min-width: 577px) and (max-width: 768px) {
    .pos .left-column .products-block .product-single[b-7g5p72z7sj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(30% - 1px) !important
    }
}

/* Pantallas grandes (tabletas en modo horizontal o laptops) */
@media screen and (min-width: 769px) and (max-width: 992px) {
    .pos .left-column .products-block .product-single[b-7g5p72z7sj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(22.66% - 1px) !important
    }
}

/* Pantallas extra grandes (desktops o monitores grandes) */
@media screen and (min-width: 993px) and (max-width:1358px) {
    .pos .left-column .products-block .product-single[b-7g5p72z7sj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20.66% - 1px) !important
    }
}

@media screen and (min-width: 1359px) and (max-width:1440px) {
    .pos .left-column .products-block .product-single[b-7g5p72z7sj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20.66% - 1px) !important
    }
}

@media screen and (min-width: 1441px) {
    .pos .left-column .products-block .product-single[b-7g5p72z7sj] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(12.66% - 1px) !important
    }
}



.no-data img[b-7g5p72z7sj] {
    max-width: 80px;
}

.no-data h4[b-7g5p72z7sj] {
    font-size: 16px;
    color: var(--colorTextLight);
    font-weight: 400
}

.products-block .product-single:hover[b-7g5p72z7sj] {
    /*background-color: var(--colorSurface);*/
    transform: scale(1.05); /* Escalar la tarjeta ligeramente en hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añadir sombra más pronunciada en hover */
}
/* Contenedor de la imagen */
.product-image-container[b-7g5p72z7sj] {
    position: relative;
    padding: 10px;
    display: flex;
    background-color: white;
    justify-content: center;
    align-items: center;
    height: 80px; /* Altura fija para que todas las imágenes tengan el mismo tamaño */
}

.badge-left[b-7g5p72z7sj] {
    position: absolute;
    top: 1px;
    left: 1px;
    /*background-color: #ff5733;*/ /* Color del badge */
    background-color: darkblue;
    opacity: 0.8;
    color: #fff;
    max-width: 100px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.7em;
}

.badge-sinstock[b-7g5p72z7sj] {
    position: absolute;
    top: 1px;
    left: 1px;
    /*background-color: #ff5733;*/ /* Color del badge */
    background-color: red;
    opacity: 0.8;
    color: #fff;
    max-width: 100px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.7em;
}

.badge-right[b-7g5p72z7sj] {
    display: block;
    background-color: transparent; /* Color del badge */
    color: green;
    border-radius: 2px;
    font-size: 1.0em;
    font-weight: bold;
}

.products-block .product-single .image[b-7g5p72z7sj] {
    width: 90%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    border-radius: 1px;
}

.products-block .product-single .product-title[b-7g5p72z7sj] {
    font-size: 0.8em;
    margin: 10px 0;
    background-color: green; /* Fondo semitransparente */
    opacity: 0.9;
    color: white;
    padding: 3px;
    height: 40px;
    max-height: 40px;
    border-radius: 2px;
    display: -webkit-box; /* Necesario para el uso de line-clamp */
    -webkit-line-clamp: 2; /* Limita a 2 líneas */
    -webkit-box-orient: vertical; /* Define la orientación del recorte de texto */
    overflow: hidden; /* Oculta el texto que sobrepasa el límite */
    text-overflow: ellipsis; /* Muestra puntos suspensivos (...) si el texto se desborda */
}

@media (max-width: 1199px) {
    .pos .right-column .products-block .product-single .image[b-7g5p72z7sj] {
        height: 70px !important;
        max-height: 70px !important
    }
}

@media (max-width: 1199px) {
    .pos .products-block .product-single .product-title[b-7g5p72z7sj] {
        font-size: 0.8em !important;
        margin-bottom: 4px
    }
}

.grid-container[b-7g5p72z7sj] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
}


/* ====================================================== */
/* Contenedor GRID de Productos (New & Improved with custom3) */
/* ====================================================== */
.products-block-custom3[b-7g5p72z7sj] {
    width: 100%;
    /*display: grid;*/
    /* Grid de auto-ajuste: 2, 3 o 4 columnas dependiendo del espacio,
       manteniendo un ancho mínimo razonable para cada tarjeta. */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill para asegurar 1 o más columnas sin huecos si hay pocos ítems */
    gap: 20px; /* Espacio entre las tarjetas de producto */
    padding: 20px 0; /* Padding superior e inferior para el bloque de productos */
    overflow-x: hidden;
    height: auto;
    max-height: 570px;
    /*min-height: calc(100vh - 350px);*/
    overflow-y: auto;
    position: relative
}

/* Estilo individual de cada tarjeta de producto */
.product-single-custom3[b-7g5p72z7sj] {
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave y atractiva */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente: imagen, info, botón */
    overflow: hidden; /* Asegura que el contenido no se desborde, especialmente el border-radius */
    cursor: pointer;
    position: relative; /* Para el posicionamiento del badge de stock */
    /* Para mantener una proporción y evitar que se estiren inmensamente */
    /* La altura se ajustará al contenido, pero establecemos una altura mínima */
    min-height: 280px; /* Altura mínima razonable para un producto */
}

    .product-single-custom3:hover[b-7g5p72z7sj] {
        transform: translateY(-5px); /* Efecto de levantamiento al pasar el ratón */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Sombra más intensa al hacer hover */
    }

/* Contenedor de la imagen del producto */
.product-image-container-custom3[b-7g5p72z7sj] {
    position: relative;
    width: 100%;
    /* Truco para mantener una proporción de aspecto (cuadrada o 4:3) */
    /* 100% de padding-top para una imagen cuadrada, 75% para 4:3 */
    padding-top: 100%; /* Hace que el contenedor sea cuadrado, ideal para imágenes de producto */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se desborde */
    border-bottom: 1px solid #eee; /* Separador sutil */
    background-color: #f0f0f0; /* Fondo si la imagen tarda en cargar */
    display: flex; /* Para centrar la imagen */
    justify-content: center;
    align-items: center;
}

.product-image-custom3[b-7g5p72z7sj] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Escala la imagen para que quepa dentro del contenedor sin recortar */
    /* object-fit: cover; // Usa 'cover' si prefieres que la imagen llene el espacio y se recorte si es necesario */
    transition: transform 0.3s ease; /* Transición suave para el zoom al hover */
}

.product-single-custom3:hover .product-image-custom3[b-7g5p72z7sj] {
    transform: scale(1.05); /* Ligerísimo zoom en la imagen al hacer hover */
}

/* Badge de stock */
.badge-stock-custom3[b-7g5p72z7sj],
.badge-nostock-custom3[b-7g5p72z7sj] {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10; /* Asegura que esté sobre la imagen */
}

.badge-stock-custom3[b-7g5p72z7sj] {
    background-color: #28a745; /* Verde para stock disponible */
}

.badge-nostock-custom3[b-7g5p72z7sj] {
    background-color: #dc3545; /* Rojo para sin stock */
}

/* Información del producto (título y precio) */
.product-info-custom3[b-7g5p72z7sj] {
    padding: 15px;
    flex-grow: 1; /* Permite que esta sección crezca y ocupe el espacio disponible */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye el título y el precio */
}

.product-title-custom3[b-7g5p72z7sj] {
    font-size: 1.05em;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita el título a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em; /* Asegura un espacio consistente para el título de 2 líneas */
}

.product-price-custom3[b-7g5p72z7sj] {
    font-size: 1.25em;
    font-weight: 700;
    color: #007bff; /* Color primario para el precio */
    margin: 0; /* Elimina margen inferior */
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Botón de información */
.btn-info-custom3[b-7g5p72z7sj] {
    width: calc(100% - 30px); /* Ancho del botón con padding de los lados */
    margin: 0 15px 15px 15px; /* Margen inferior y lateral para separarlo de los bordes */
    border-radius: 8px; /* Bordes redondeados para el botón */
    font-size: 0.95em;
    font-weight: 600;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    /* Los estilos de color y background ya los gestiona SfButton con CssClass="e-flat e-success" */
}

/* ====================================================== */
/* Media Queries para Responsividad (custom3) */
/* ====================================================== */

/* Para pantallas medianas (md): 2 columnas */
@media (max-width: 768px) {
    .products-block-custom3[b-7g5p72z7sj] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Reduce el min-width */
        gap: 15px;
        padding: 15px 0;
    }

    .product-single-custom3[b-7g5p72z7sj] {
        min-height: 250px; /* Ajusta altura mínima */
    }
}

/* Para pantallas pequeñas (sm/xs): 1 columna */
@media (max-width: 576px) {
    .products-block-custom3[b-7g5p72z7sj] {
        grid-template-columns: 1fr; /* Una columna completa */
        gap: 15px;
        padding: 10px 0;
    }

    .product-single-custom3[b-7g5p72z7sj] {
        max-width: 320px; /* Limita el ancho máximo para que no se vea inmenso en pantallas muy pequeñas */
        margin: 0 auto; /* Centra el producto si solo hay uno */
        min-height: 280px;
    }

    .btn-info-custom3[b-7g5p72z7sj] {
        width: calc(100% - 20px); /* Ajusta el ancho del botón */
        margin: 0 10px 10px 10px;
    }
}

/* Opcional: Ajuste para pantallas grandes (lg/xl) si necesitas más columnas o un min-width mayor */
@media (min-width: 1200px) {
    .products-block-custom3[b-7g5p72z7sj] {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* 4 o 5 columnas */
        gap: 25px;
    }

    .product-single-custom3[b-7g5p72z7sj] {
        min-height: 320px;
    }
}

/* ====================================================== */
/* Contenedor GRID de Categorías Adaptable (New & Improved) */
/* ====================================================== */
.categories[b-7g5p72z7sj] {
    width: 100%;
    max-height: 20vh; /* Podría limitar la altura y forzar scroll. Ajusta según necesidad, o elimina si prefieres que crezca. */
    overflow-y: auto; /* Permite scroll vertical si el contenido excede el max-height */
    overflow-x: hidden; /* Oculta scroll horizontal */
    display: grid;
    /* Por defecto: ajusta automáticamente el número de columnas con un mínimo de 120px */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px; /* Aumenta el espaciado entre las categorías */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en dispositivos iOS */
    padding: 15px; /* Más padding para que el contenido respire */
    background-color: #f8fafd; /* Un gris muy claro, casi blanco azulado para un look limpio */
    border-radius: 12px; /* Bordes un poco más redondeados */
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* Sombra más suave y moderna para profundidad */
}

/* Forzar 3 columnas en pantallas pequeñas (hasta 576px, breakpoint 'sm' de Bootstrap) */
@media (max-width: 576px) {
    .categories[b-7g5p72z7sj] {
        grid-template-columns: repeat(3, 1fr); /* Fuerza 3 columnas iguales */
        max-height: 150px; /* Ajusta la altura máxima para pantallas pequeñas */
        gap: 8px; /* Reduce el espaciado en pantallas pequeñas */
        padding: 10px;
    }
}

/* En pantallas medianas (min-width: 577px hasta 991px, 'md' de Bootstrap) */
@media (min-width: 577px) and (max-width: 991px) {
    .categories[b-7g5p72z7sj] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Ajusta el min-width para más columnas */
        gap: 10px;
        padding: 12px;
    }
}

/* En pantallas grandes (min-width: 992px, 'lg' de Bootstrap) */
@media (min-width: 992px) {
    .categories[b-7g5p72z7sj] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Más ancho mínimo para pantallas grandes */
        /* max-height: 25vh; */ /* Considera si realmente quieres un max-height fijo aquí */
        gap: 15px; /* Mayor espaciado */
        padding: 20px;
    }
}

/* ====================================================== */
/* Estilos para cada Item de Categoría (New & Improved) */
/* ====================================================== */
.items[b-7g5p72z7sj] {
    list-style: none; /* Quita los puntos de lista */
    padding: 0;
    margin: 0;
}

    /* Estilo individual de cada categoría, manteniendo la proporción (altura fija con padding) */
    .items li[b-7g5p72z7sj] {
        display: flex;
        flex-direction: column; /* Apila contenido verticalmente */
        justify-content: center; /* Centra verticalmente */
        align-items: center; /* Centra horizontalmente */
        text-align: center;
        cursor: pointer;
        background-color: #ffffff; /* Fondo blanco más brillante */
        height: 75px; /* Aumenta la altura para que respire más el contenido */
        border-radius: 12px; /* Bordes más suaves */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Sombra más definida */
        transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden; /* Oculta cualquier contenido que se desborde */
        box-sizing: border-box;
        padding: 8px; /* Padding interno para el contenido */
        border: 1px solid #e0e7ee; /* Borde sutil para definir cada item */
    }

        /* Hover effect para cada categoría */
        .items li:hover[b-7g5p72z7sj] {
            background-color: #e6f0ff; /* Azul clarito más vibrante */
            transform: translateY(-4px); /* Levantamiento más pronunciado */
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); /* Sombra más intensa al hacer hover */
        }

    /* Estilos para el Título de la categoría */
    .items .title[b-7g5p72z7sj] {
        font-weight: 700; /* Más negrita para mayor impacto */
        color: #2c3e50; /* Un gris muy oscuro, casi negro, para contraste */
        font-size: clamp(0.8rem, 1.5vw, 1.05rem); /* Rango de tamaño de fuente más dinámico y un poco más grande */
        line-height: 1.2; /* Espaciado de línea ligeramente mayor */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limita a 2 líneas de texto */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* Puntos suspensivos si el texto es muy largo */
        margin-top: 5px; /* Espacio si hubiera un icono arriba */
    }

/* ====================================================== */
/* Ajustes para pantallas XL (min-width: 1200px, 'xl' de Bootstrap) */
/* Puedes añadir una media query para 1440px si es estrictamente necesario,
   pero con auto-fit y minmax, Bootstrap suele manejar bien los tamaños intermedios. */
/* ====================================================== */
@media (min-width: 1200px) {
    .categories[b-7g5p72z7sj] {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* Ancho mínimo para más columnas */
        /* max-height: 28vh; */
        gap: 18px; /* Aún más espacio */
        padding: 25px;
    }

    .items li[b-7g5p72z7sj] {
        height: 90px; /* Mayor altura para items en pantallas muy grandes */
        padding: 10px;
    }
}
/* Contenedor de la sección */
.section-header[b-7g5p72z7sj] {
    width: 100%;
    background-color: #f1f5f9; /* Gris claro suave */
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    margin-top: 10px;
    box-sizing: border-box;
}

/* Título */
.section-title[b-7g5p72z7sj] {
    font-size: 1rem;
    font-weight: 600;
    color: #334155; /* Gris oscuro azulado */
    margin: 0;
    word-break: break-word;
}

.pager-container[b-7g5p72z7sj] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}




.responsive-container[b-7g5p72z7sj] {
    display: flex;
    height: calc(100vh - 60px); /* Ocupa todo el alto menos la altura de la barra de herramientas */
    padding: 10px;
    box-sizing: border-box;
}

.pos .right-column .calculation .table tr td[b-7g5p72z7sj] {
    cursor: pointer;
    text-align: center
}

    .pos .right-column .calculation .table tr td.clickable:hover[b-7g5p72z7sj] {
        background-color: var(--colorPrimary);
        color: var(--colorOnPrimary)
    }

.pos .right-column .calculation .table td[b-7g5p72z7sj], .pos .right-column .calculation .table th[b-7g5p72z7sj] {
    font-size: 14px
}

.pos .pos-right .products-block[b-7g5p72z7sj] {
    height: auto;
    max-height: 500px;
    min-height: calc(100vh - 250px);
    overflow-y: auto;
    position: relative
}

@media (max-width: 991px) {
    .pos .pos-right[b-7g5p72z7sj] {
        margin-top: 20px
    }

    .pos .pos-left .calculation .table td[b-7g5p72z7sj], .pos .pos-left .calculation .table th[b-7g5p72z7sj] {
        font-size: 10px
    }
}


@media screen and (max-width: 1024px) {
    .responsive-container[b-7g5p72z7sj] {
        flex-direction: column;
    }

    .left-column[b-7g5p72z7sj], .right-column[b-7g5p72z7sj] {
        flex: none;
        width: 100%;
    }
}


.form-row[b-7g5p72z7sj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 2px;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-7g5p72z7sj] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */


/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-7g5p72z7sj] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-7g5p72z7sj],
    .custom-button[b-7g5p72z7sj] {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .responsive-container[b-7g5p72z7sj] {
        flex-direction: column;
    }

    .left-column[b-7g5p72z7sj], .right-column[b-7g5p72z7sj] {
        flex: none;
        width: 100%;
    }
}


.loading-overlay[b-7g5p72z7sj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-7g5p72z7sj] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-7g5p72z7sj 1s linear infinite;
}

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

.right-column .cart[b-7g5p72z7sj] {
    height: auto;
    max-height: 470px;
    min-height: calc(100vh - 400px);
}

.right-column .card[b-7g5p72z7sj] {
    border-radius: 0px;
    padding: 4px;
}

.horizontal-product-list[b-7g5p72z7sj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li[b-7g5p72z7sj] {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box[b-7g5p72z7sj] {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box[b-7g5p72z7sj] {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img[b-7g5p72z7sj] {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img[b-7g5p72z7sj] {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details[b-7g5p72z7sj] {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details[b-7g5p72z7sj] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cart-product-box .horizontal-product-details .trash-button[b-7g5p72z7sj] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-7g5p72z7sj] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-7g5p72z7sj] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-7g5p72z7sj] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.cart-product-box .horizontal-product-details .product-title[b-7g5p72z7sj] {
    font-size: 0.8em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info[b-7g5p72z7sj] {
    display: flex;
    padding: 0;
    margin-top: 1px;
    margin-bottom: 5px;
    font-size: 0.8em;
    position: relative;
    color: green;
}

.cart-product-box .horizontal-product-details .product-price[b-7g5p72z7sj] {
    font-size: 15px
}

.cart-product-box .horizontal-product-details .product-price-input[b-7g5p72z7sj] {
    border-bottom: 1px solid var(--colorPrimary);
    padding: 2px 0
}

    .cart-product-box .horizontal-product-details .product-price-input input[b-7g5p72z7sj] {
        width: 70px;
        padding: 0;
        border: none;
        outline: none;
        background: transparent
    }

.cart-product-box .horizontal-product-details .product-info li[b-7g5p72z7sj] {
    position: relative;
    font-weight: 400;
    line-height: 1;
    color: var(--colorTextLight);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    gap: 5px
}
/* En tu archivo CSS o bloque <style> */

.card[b-7g5p72z7sj] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f,0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0
}

    .card[b-7g5p72z7sj]:before {
        position: absolute;
        content: "";
        height: 80%;
        width: 1px;
        inset-inline-start: 0;
        background: var(--colorBorderBefore);
        inset-block-start: 10%;
        box-shadow: 8px 0 0 17px var(--colorBorderBeforeShadow)
    }

    .card .card-header[b-7g5p72z7sj], .card .card-body[b-7g5p72z7sj], .card .card-footer[b-7g5p72z7sj] {
        background-color: transparent
    }

        .card .card-header .title[b-7g5p72z7sj] {
            font-size: 16px;
            line-height: 28px;
            padding-right: 10px;
            margin-bottom: 0;
            color: var(--colorTextPrimary)
        }

    .card .card-header[b-7g5p72z7sj] {
        border-bottom: 1px solid #dee2e630;
        line-height: 30px;
        align-self: center;
        width: 100%;
        display: flex;
        align-items: center
    }

    .card .card-footer[b-7g5p72z7sj] {
        background-color: transparent;
        border: none
    }

@media (max-width: 767.98px) {
    .card .card-header[b-7g5p72z7sj] {
        height: auto;
        flex-wrap: wrap
    }

    .card .card-header[b-7g5p72z7sj], .card .card-body[b-7g5p72z7sj], .card .card-footer[b-7g5p72z7sj] {
        background-color: transparent;
        padding: 10px
    }
}

.producto-linea2[b-7g5p72z7sj] {
    display: flex;
    align-items: center;
    justify-content: start;
}

@media (max-width: 574px) {
    .producto-linea2[b-7g5p72z7sj] {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}


.botones-producto-linea2[b-7g5p72z7sj] {
    display: flex;
    align-items: center;
    justify-content: end;
}

@media (max-width: 574px) {
    .botones-producto-linea2[b-7g5p72z7sj] {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}


.producto-linea3[b-7g5p72z7sj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* Previene el salto a una nueva fila */
    gap: 8px;
}

    .producto-linea3 .input-wrapper[b-7g5p72z7sj] {
        flex: 1 1 auto;
        min-width: 70px; /* Tamaño mínimo para cada control */
    }

@media (max-width: 576px) {
    .producto-linea3[b-7g5p72z7sj] {
        gap: 4px; /* Reduce el espacio entre elementos */
    }

        .producto-linea3 .input-wrapper[b-7g5p72z7sj] {
            flex: 1 1 33%; /* Cada elemento ocupa una tercera parte */
        }
}


.card hr[b-7g5p72z7sj] {
    color: var(--colorBorder)
}

.pos-toolbar[b-7g5p72z7sj] {
    background-color: transparent;
    color: white;
}

.page-header[b-7g5p72z7sj] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-7g5p72z7sj] {
        width: 100%;
    }

    .page-header .page-header-title[b-7g5p72z7sj] {
        display: block;
    }

    .page-header h4[b-7g5p72z7sj], .page-header .h4[b-7g5p72z7sj] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-7g5p72z7sj] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }



/* Contenedor principal: Auto-fit, tarjetas más cómodas en pantallas grandes */
.products-block-custom[b-7g5p72z7sj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    justify-items: stretch;
    overflow-x: hidden;
    height: auto;
    max-height: 500px;
    min-height: calc(100vh - 250px);
    overflow-y: auto;
    position: relative
}

/* Pantallas pequeñas: fuerza 2 columnas y reduce espaciados */
@media (max-width: 400px) {
    .products-block-custom[b-7g5p72z7sj] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }
}

/* Tarjeta individual */
.product-single-custom[b-7g5p72z7sj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: white;
    border-radius: 12px;
    padding: 0.8rem;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover en pantallas grandes */
@media (min-width: 600px) {
    .product-single-custom:hover[b-7g5p72z7sj] {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }
}

.product-single-custom:hover[b-7g5p72z7sj] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* Imagen del producto */
.product-image-container-custom[b-7g5p72z7sj] {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.product-image-custom[b-7g5p72z7sj] {
    width: 100%;
    max-width: 110px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #ddd;
}

/* Badges de stock */
.badge-stock-custom[b-7g5p72z7sj],
.badge-nostock-custom[b-7g5p72z7sj] {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 6px;
    font-size: 0.7rem;
    border-radius: 20px;
    color: #fff;
    white-space: nowrap;
}

.badge-stock-custom[b-7g5p72z7sj] {
    background-color: #4caf50;
}

.badge-nostock-custom[b-7g5p72z7sj] {
    background-color: #f44336;
}

/* Información del producto */
.product-info-custom[b-7g5p72z7sj] {
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.product-title-custom[b-7g5p72z7sj] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    word-wrap: break-word;
}

.product-price-custom[b-7g5p72z7sj] {
    font-size: 0.75rem;
    color: #555;
}

/* Botón Info */
.btn-info-custom[b-7g5p72z7sj] {
    margin-top: 6px;
    font-size: 0.75rem;
    background-color: #e3f2fd;
    color: #1565c0;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Contenedor No Data */
.no-data-custom[b-7g5p72z7sj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    padding: 2rem;
}

    .no-data-custom img[b-7g5p72z7sj] {
        width: 70px;
        height: 70px;
        opacity: 0.7;
    }

/* Paginador */
.pager-container-custom[b-7g5p72z7sj] {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

/* Limpieza global */
body[b-7g5p72z7sj], html[b-7g5p72z7sj] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}


/* FIX: Añadir cursor: pointer para la tarjeta de producto */
.product-cardc3[b-7g5p72z7sj] {
    background-color: var(--card-bg);
    border: 1px solid groove;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer; /* <--- AQUÍ LA CORRECCIÓN */
}

    .product-cardc3:hover[b-7g5p72z7sj] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-color: var(--primary-accent);
    }

.product-image-containerc3[b-7g5p72z7sj] {
    aspect-ratio: 1 / 1;
    background-color: #f1f3f5;
}

.product-img[b-7g5p72z7sj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-cardc3 .card-body[b-7g5p72z7sj] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-titlec3[b-7g5p72z7sj] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 45px;
}

.product-pricec3[b-7g5p72z7sj] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-accent);
    margin-top: auto;
    padding-top: 0.5rem;
}

    .product-pricec3 .original-pricec3[b-7g5p72z7sj] {
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--text-muted-light);
    }

.discount-badge[b-7g5p72z7sj] {
    font-weight: 600;
    font-size: 0.75rem;
    background-color: var(--primary-accent) !important;
}

.ratingc3[b-7g5p72z7sj] {
    font-size: 0.8rem;
}

.product-popup-imagec3[b-7g5p72z7sj] {
    width: 100%; /* Ensures it fills the column width */
    height: 100%; /* Or a fixed height you prefer */
    object-fit: cover; /* OR cover */
    display: block; /* Removes any extra space below the image */
}

/* Optional: Add a max-height if you want it responsive but not too tall */
@media (max-width: 767px) {
    .product-popup-imagec3[b-7g5p72z7sj] {
        height: 250px;
    }
}
/* For the new 'btn-product-info' button */
.btn-product-info[b-7g5p72z7sj] {
    /* Basic button styling - adjust colors to match your theme */
    background-color: #007bff; /* A nice blue, adjust to your theme's info/success color */
    color: #fff;
    border: none;
    border-radius: 8px; /* Slightly more rounded corners */
    padding: 10px 15px; /* Comfortable padding */
    font-size: 0.95rem; /* Slightly larger text */
    font-weight: 600; /* Bolder text */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Smooth transitions for hover */
    /*display: inline-flex;*/ /* Allows icon and text to sit nicely side-by-side */
    align-items: center;
    margin-top: 5px;
    gap: 8px; /* Space between icon and text */
    text-decoration: none; /* Remove underline if it's a link-like button */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    /* Positioning and z-index if needed within a complex layout */
    position: relative; /* Allows z-index to work */
    z-index: 10; /* Keep it above other elements if necessary */
}

    /* Hover state for interaction */
    .btn-product-info:hover[b-7g5p72z7sj] {
        background-color: #0056b3; /* Darker blue on hover */
        transform: translateY(-2px); /* Slight lift effect */
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* More prominent shadow on hover */
    }

    /* Active/Clicked state */
    .btn-product-info:active[b-7g5p72z7sj] {
        background-color: #004085; /* Even darker on click */
        transform: translateY(0); /* Button pushes down */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Reduced shadow */
    }

    /* Optional: If you want to disable it */
    .btn-product-info:disabled[b-7g5p72z7sj] {
        background-color: #cccccc;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/POS/POSMovil2Page.razor.rz.scp.css */
/* --- Estilos del Contenedor Principal (Flexbox para el Layout) --- */
.pos-main-content[b-qiekk2lmib] {
    display: flex; /* Habilita Flexbox para la distribución de los paneles */
    height: calc(100vh - 150px); /* Ocupa el 100% de la altura de la ventana */
    width: 100%;
}

/* --- Panel Izquierdo (Productos y Categorías) --- */
.pos-left-panel[b-qiekk2lmib] {
    flex: 1; /* Ocupa todo el espacio disponible */
    background-color: #FFFFFF; /* Blanco */
    /* Sugerencias: #fefefe, #fcfcfc, #F8F9FA */
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

/* --- Panel de la Derecha (Carrito de Compras) --- */
.pos-right-panel[b-qiekk2lmib] {
    display: none; /* Oculto por defecto en móviles */
}

/*
   Media query para pantallas grandes (tabletas y escritorio).
   A partir de 768px, el panel derecho se hará visible.
*/
@media (min-width: 768px) {
    .pos-right-panel[b-qiekk2lmib] {
        display: flex; /* Lo hace visible */
        flex-direction: column;
        width: 380px; /* Ancho fijo para el panel */
        flex-shrink: 0;
        background-color: #F8F9FA; /* Blanco grisáceo */
        /* Sugerencias: #f0f2f5, #e9ecef, #f5f5f5 */
       
       
    }
}

/* --- Estilos de las Pestañas de Categorías y Modo Listado --- */
.pos-tab-container[b-qiekk2lmib] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.e-tab-text[b-qiekk2lmib] {
    font-weight: 600;
}

/* ====================================================== */
/* Contenedor GRID de Categorías Adaptable (New & Improved) */
/* ====================================================== */
.categories[b-qiekk2lmib] {
    width: 100%;
    max-height: 20vh; /* Podría limitar la altura y forzar scroll. Ajusta según necesidad, o elimina si prefieres que crezca. */
    overflow-y: auto; /* Permite scroll vertical si el contenido excede el max-height */
    overflow-x: hidden; /* Oculta scroll horizontal */
    display: grid;
    /* Por defecto: ajusta automáticamente el número de columnas con un mínimo de 120px */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px; /* Aumenta el espaciado entre las categorías */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en dispositivos iOS */
    padding: 15px; /* Más padding para que el contenido respire */
    background-color: #f8fafd; /* Un gris muy claro, casi blanco azulado para un look limpio */
    border-radius: 12px; /* Bordes un poco más redondeados */
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* Sombra más suave y moderna para profundidad */
}

/* Forzar 3 columnas en pantallas pequeñas (hasta 576px, breakpoint 'sm' de Bootstrap) */
@media (max-width: 576px) {
    .categories[b-qiekk2lmib] {
        grid-template-columns: repeat(3, 1fr); /* Fuerza 3 columnas iguales */
        max-height: 150px; /* Ajusta la altura máxima para pantallas pequeñas */
        gap: 8px; /* Reduce el espaciado en pantallas pequeñas */
        padding: 10px;
    }
}

/* En pantallas medianas (min-width: 577px hasta 991px, 'md' de Bootstrap) */
@media (min-width: 577px) and (max-width: 991px) {
    .categories[b-qiekk2lmib] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Ajusta el min-width para más columnas */
        gap: 10px;
        padding: 12px;
    }
}

/* En pantallas grandes (min-width: 992px, 'lg' de Bootstrap) */
@media (min-width: 992px) {
    .categories[b-qiekk2lmib] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Más ancho mínimo para pantallas grandes */
        /* max-height: 25vh; */ /* Considera si realmente quieres un max-height fijo aquí */
        gap: 15px; /* Mayor espaciado */
        padding: 20px;
    }
}

/* ====================================================== */
/* Estilos para cada Item de Categoría (New & Improved) */
/* ====================================================== */
.items[b-qiekk2lmib] {
    list-style: none; /* Quita los puntos de lista */
    padding: 0;
    margin: 0;
}
    /* Estilos de los botones de categoría */
    .items li[b-qiekk2lmib] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        cursor: pointer;
        background-color: #f0fff0; /* Un verde muy claro, casi blanco */
        height: 75px;
        border-radius: 5px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        overflow: hidden;
        box-sizing: border-box;
        padding: 8px;
        border: 1px solid #c8e6c9; /* Borde verde suave */
    }

        /* Efecto al pasar el cursor (hover) */
        .items li:hover[b-qiekk2lmib] {
            background-color: #a5d6a7; /* Un verde más fuerte y claro */
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

    /* Estilos para el Título de la categoría */
    .items .title[b-qiekk2lmib] {
        font-weight: 600;
        color: #2e7d32; /* Un verde oscuro y profundo para contraste */
        font-size: clamp(0.8rem, 1.5vw, 1.0rem);
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 5px;
    }
    /* Estilos de los botones de categoría */
    /*.items li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        cursor: pointer;
        background-color: #fcfcfc;*/ /* Un blanco casi puro para mayor claridad */
        /*height: 75px;
        border-radius: 8px;*/ /* Bordes menos redondeados para un look más moderno */
        /*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);*/ /* Sombra más sutil y elegante */
        /*transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        overflow: hidden;
        box-sizing: border-box;
        padding: 8px;
        border: 1px solid #e2e8f0;*/ /* Borde más nítido y limpio */
    /*}*/

        /* Efecto al pasar el cursor (hover) */
        /*.items li:hover {
            background-color: #f0f4f7;*/ /* Un gris azulado muy claro */
            /*transform: translateY(-2px);*/ /* Un levantamiento más sutil */
            /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/ /* Sombra más definida */
        /*}*/

    /* Estilos para el Título de la categoría */
    /*.items .title {
        font-weight: 600;*/ /* Menos negrita para un look más profesional */
        /*color: #4a5568;*/ /* Un gris oscuro, pero menos duro que el negro */
        /*font-size: clamp(0.8rem, 1.5vw, 1.05rem);
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 5px;
    }*/
    /* Estilo individual de cada categoría, manteniendo la proporción (altura fija con padding) */
    /*.items li {
        display: flex;
        flex-direction: column;*/ /* Apila contenido verticalmente */
        /*justify-content: center;*/ /* Centra verticalmente */
        /*align-items: center;*/ /* Centra horizontalmente */
        /*text-align: center;
        cursor: pointer;
        background-color: #ffffff;*/ /* Fondo blanco más brillante */
        /*height: 75px;*/ /* Aumenta la altura para que respire más el contenido */
        /*border-radius: 12px;*/ /* Bordes más suaves */
        /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);*/ /* Sombra más definida */
        /*transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;*/ /* Oculta cualquier contenido que se desborde */
        /*box-sizing: border-box;
        padding: 8px;*/ /* Padding interno para el contenido */
        /*border: 1px solid #e0e7ee;*/ /* Borde sutil para definir cada item */
    /*}*/

        /* Hover effect para cada categoría */
        /*.items li:hover {
            background-color: #e6f0ff;*/ /* Azul clarito más vibrante */
            /*transform: translateY(-4px);*/ /* Levantamiento más pronunciado */
            /*box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);*/ /* Sombra más intensa al hacer hover */
        /*}*/

    /* Estilos para el Título de la categoría */
    /*.items .title {
        font-weight: 700;*/ /* Más negrita para mayor impacto */
        /*color: #2c3e50;*/ /* Un gris muy oscuro, casi negro, para contraste */
        /*font-size: clamp(0.8rem, 1.5vw, 1.05rem);*/ /* Rango de tamaño de fuente más dinámico y un poco más grande */
        /*line-height: 1.2;*/ /* Espaciado de línea ligeramente mayor */
        /*display: -webkit-box;
        -webkit-line-clamp: 2;*/ /* Limita a 2 líneas de texto */
        /*-webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;*/ /* Puntos suspensivos si el texto es muy largo */
        /*margin-top: 5px;*/ /* Espacio si hubiera un icono arriba */
    /*}*/

/* ====================================================== */
/* Ajustes para pantallas XL (min-width: 1200px, 'xl' de Bootstrap) */
/* Puedes añadir una media query para 1440px si es estrictamente necesario,
   pero con auto-fit y minmax, Bootstrap suele manejar bien los tamaños intermedios. */
/* ====================================================== */
@media (min-width: 1200px) {
    .categories[b-qiekk2lmib] {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* Ancho mínimo para más columnas */
        /* max-height: 28vh; */
        gap: 18px; /* Aún más espacio */
        padding: 25px;
    }

    .items li[b-qiekk2lmib] {
        height: 70px; /* Mayor altura para items en pantallas muy grandes */
        padding: 10px;
    }
}
/* Contenedor de la sección */
.section-info[b-qiekk2lmib] {
    width: 100%;
    background-color: #f1f5f9; /* Gris claro suave */
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    margin-top: 10px;
    box-sizing: border-box;
}

/* Título */
.section-title[b-qiekk2lmib] {
    font-size: 1rem;
    font-weight: 600;
    color: #334155; /* Gris oscuro azulado */
    margin: 0;
    word-break: break-word;
}

.pager-container[b-qiekk2lmib] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}

.item-count[b-qiekk2lmib] {
    font-size: 0.8rem;
    color: #6C757D; /* Gris secundario */
}

/* --- Estilos del Grid de Productos --- */
.product-grid-container[b-qiekk2lmib] {
    flex: 1;
    /* La clave es esta línea. La altura debe ser limitada,
       por ejemplo, a un valor fijo o a '100%'.
       El 'overflow-y' ya está ahí, lo cual es correcto.
    */
    height: 45vh; /* Ocupa el 100% de la altura de su padre flex */
    overflow-y: auto; /* Permite el scroll vertical si el contenido excede la altura */
    padding-right: 0rem;
}

/*
   Estilos de la cuadrícula de productos.
*/
.product-grid[b-qiekk2lmib] {
    display: grid;
    /* Esto permite que la cuadrícula se ajuste dinámicamente */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.0rem;
    padding: 0.5rem;
}
/*.product-grid-container {
    flex: 1;
    overflow-y: auto;
    padding-right: 0rem;
    
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.0rem;
    padding: 0.5rem;
}*/
/*.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;*/ /* Espaciado entre las tarjetas */
    /*padding: 0.5rem;
}*/

/*
   Ajustes para móviles grandes y tabletas (mayor a 576px)
   Aumenta a 3 columnas.
*/
/*@media (min-width: 576px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}*/

/*
   Ajustes para tabletas y escritorios (mayor a 768px)
   Aumenta a 4 columnas.
*/
/*@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}*/

/*
   Ajustes para pantallas grandes (mayor a 992px)
   Aumenta a 5 columnas.
*/
/*@media (min-width: 992px) {
    .product-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}*/

/*
   Ajustes para pantallas muy grandes (mayor a 1200px)
   Aumenta a 6 columnas para aprovechar el espacio.
*/
/*@media (min-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}*/


.product-card[b-qiekk2lmib] {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border: 1px solid #E9ECEF;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .product-card:hover[b-qiekk2lmib] {
        transform: translateY(-5px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    }

.stock-badge[b-qiekk2lmib] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background-color: #28A745; /* Verde éxito */
    /* Sugerencias: #2a9d8f, #4CAF50, #5cb85c */
    color: #FFFFFF; /* Blanco */
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .stock-badge.out-of-stock[b-qiekk2lmib] {
        background-color: #DC3545; /* Rojo peligro */
        /* Sugerencias: #c0392b, #e74c3c, #cc0000 */
    }

.product-card-image-wrapper[b-qiekk2lmib] {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.product-card-image[b-qiekk2lmib] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-body[b-qiekk2lmib] {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    text-align: center;
    flex-grow: 1;
    justify-content: space-between;
}

.product-card-title[b-qiekk2lmib] {
    /* Rango de tamaño de fuente responsivo: */
    /* Mínimo (móvil): 0.8rem, Preferido (fluido): 1.5vw, Máximo (escritorio): 1rem */
    font-size: clamp(0.8rem, 1.5vw, 0.8rem);
    font-weight: 500;
    color: #343A40;
    margin-bottom: 0.5rem;
    
    text-align: center; /* Centra el texto horizontalmente */
    /* Configuración para mostrar el texto en dos líneas si es necesario */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita el texto a un máximo de 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap:break-word;
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es muy largo */
    line-height: 1.2; /* Espaciado entre líneas para mejor lectura */
}

.product-card-price[b-qiekk2lmib] {
    /* Rango de tamaño de fuente responsivo: */
    /* Mínimo (móvil): 1rem, Preferido (fluido): 2.5vw, Máximo (escritorio): 1.2rem */
    font-size: clamp(1rem, .5vw, 0.8rem);
    font-weight: 500;
    color: #007BFF;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el precio y el ícono horizontalmente */
    gap: 0.5rem;
}

.btn-info[b-qiekk2lmib] {
    background-color: #00BFFF; /* Azul info */
    /* Sugerencias: #00BCD4, #00BFFF, #5bc0de */
    color: #FFFFFF; /* Blanco */
    border: none;
    padding: 0.50rem 1rem;
    border-radius: 5px;
    width: 100%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease-in-out;
}

    .btn-info:hover[b-qiekk2lmib] {
        background-color: #138496; /* Azul más oscuro */
        /* Sugerencias: #0097a7, #0099e6, #40a0c4 */
    }


.btn-info2[b-qiekk2lmib] {
    /*background-color: #00BFFF;*/ /* Azul info */
    /* Sugerencias: #00BCD4, #00BFFF, #5bc0de */
    color: blue; /* Blanco */
    border: none;
    padding: 0.50rem 1rem;
    border-radius: 5px;
    width: 100%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width:20%;
    gap: 0.5rem;
    transition: background-color 0.2s ease-in-out;
}

    .btn-info2:hover[b-qiekk2lmib] {
        background-color: #0099e6; /* Azul más oscuro */
        color:white;
        /* Sugerencias: #0097a7, #0099e6, #40a0c4 */
    }

/* --- Estilos del Modo Listado --- */
.list-mode-container[b-qiekk2lmib] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.search-form[b-qiekk2lmib] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.btn-search[b-qiekk2lmib] {
    background-color: #007BFF; /* Azul principal */
    /* Sugerencias: #3498db, #0056b3, #1e90ff */
    color: #FFFFFF; /* Blanco */
    border: none;
    border-radius: 8px;
    padding: 0 1rem;
}

.product-list-view[b-qiekk2lmib] {
    flex: 1;
    overflow-y: auto;
}

.list-item-card[b-qiekk2lmib] {
    background-color: #FFFFFF; /* Blanco */
    border: 1px solid #DEE2E6; /* Gris claro */
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .list-item-card:hover[b-qiekk2lmib] {
        background-color: #F1F1F1; /* Gris muy claro */
        /* Sugerencias: #ECEFF1, #F8F9FA, #E9ECEF */
    }

.item-header[b-qiekk2lmib] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.item-name[b-qiekk2lmib] {
    font-size: 1rem;
    font-weight: 600;
    color: #343A40;
    margin: 0;
}

.item-code[b-qiekk2lmib] {
    font-size: 0.8rem;
    color: #6C757D;
}

.item-details[b-qiekk2lmib] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #495057;
    margin-bottom: 0.5rem;
}

.item-other-prices[b-qiekk2lmib] {
    font-size: 0.8rem;
    color: #495057;
    margin-bottom: 0.5rem;
}

    .item-other-prices ul[b-qiekk2lmib] {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0.25rem;
    }

    .item-other-prices li[b-qiekk2lmib] {
        background-color: #F8F9FA;
        border: 1px dashed #DEE2E6;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        margin-bottom: 0.2rem;
    }

.item-actions[b-qiekk2lmib] {
    display: flex;
    justify-content: flex-end;
}

.pager-container[b-qiekk2lmib] {
    padding-top: 1rem;
    display: flex;
    justify-content: center;
}


/*
   Estilos del contenedor principal del carrito.
   Asegura que el encabezado, el cuerpo y el pie de página
   se distribuyan correctamente.
*/
/*
   Estilos principales del panel del carrito (la tarjeta).
*/
.card-rightcolcustom1[b-qiekk2lmib] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 380px; /* Ancho fijo para el panel */
    flex-shrink: 0;
    background-color: white;
    border: 1px solid #DEE2E6;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.card-rightcolcustom2[b-qiekk2lmib] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%; /* Ancho fijo para el panel */
    flex-shrink: 0;
    background-color: white;
    border: 1px solid #DEE2E6;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/*
   Estilos de la barra de búsqueda en el encabezado.
*/
.search-bar-rightcolcustom1[b-qiekk2lmib] {
    padding: 1rem;
    border-bottom: 1px solid #DEE2E6;
}

.barcode-search-rightcolcustom1[b-qiekk2lmib] {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    width: 100%;
}

/*
   Estilos del cuerpo principal del carrito, donde está la lista de productos.
*/
.card-body-rightcolcustom1[b-qiekk2lmib] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Oculta el overflow del contenedor principal */
}

.cart-list-wrapper-rightcolcustom1[b-qiekk2lmib] {
    flex-grow: 1;
    overflow-y: auto; /* Permite el scroll solo en la lista */
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem;
}

.horizontal-product-list-rightcolcustom1[b-qiekk2lmib] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cart-product-box-rightcolcustom1[b-qiekk2lmib] {
    border-bottom: 1px solid #DEE2E6;
    padding: 0.75rem 0;
}

.horizontal-product-item-rightcolcustom1[b-qiekk2lmib] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.horizontal-product-details-rightcolcustom1[b-qiekk2lmib] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/*
   Estilos de los elementos dentro de cada producto en la lista.
*/
.product-line-top-rightcolcustom1[b-qiekk2lmib] {
    font-size: 0.75rem;
    font-weight: bold;
    color: #6C757D;
    margin-bottom: 0.5rem;
}

.product-title-rightcolcustom1[b-qiekk2lmib] {
    font-size: 0.75rem;
    font-weight: 200;
    color: #343A40;
    margin: 0;
}

.product-info-list-rightcolcustom1[b-qiekk2lmib] {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    color: #495057;
}
.product-inputs-line-rightcolcustom1[b-qiekk2lmib] {
    display: flex;
    gap: 0.5rem; /* Ajusta el espacio entre los inputs */
    align-items: center;
    margin-top: 0.5rem;
}


/*
   Estilos de los inputs numéricos y dropdowns.
*/
.numeric-qty-rightcolcustom1[b-qiekk2lmib],
.numeric-total-rightcolcustom1[b-qiekk2lmib],
.dropdown-igv-rightcolcustom1[b-qiekk2lmib],
.dropdown-currency-rightcolcustom1[b-qiekk2lmib] {
    border-radius: 8px !important;
    padding: 0.75rem 1rem;
    border: 1px solid #CED4DA !important;
}

/*
   Estilos de los botones de acción (editar, eliminar).
*/
.btn-edit-rightcolcustom1[b-qiekk2lmib],
.btn-delete-rightcolcustom1[b-qiekk2lmib] {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    color: #fff;
    border: none;
}

.btn-edit-rightcolcustom1[b-qiekk2lmib] {
    background-color: #17A2B8; /* Azul info */
}

.btn-delete-rightcolcustom1[b-qiekk2lmib] {
    background-color: #DC3545; /* Rojo peligro */
}

/*
   Estilos del área de resumen de totales.
*/
.calculation-summary-rightcolcustom1[b-qiekk2lmib] {
    border-top: 1px solid #DEE2E6;
    padding: 1rem;
}

.table-summary-rightcolcustom1[b-qiekk2lmib] {
    margin-bottom: 0;
}

.clickable-total-rightcolcustom1[b-qiekk2lmib] {
    text-align: right;
    font-weight: bold;
    color: #007BFF;
    font-size: 1.8em;
}

/*
   Estilos para los botones de acción del pie de página (Siguiente, Limpiar).
*/
.bottom-actions-rightcolcustom1[b-qiekk2lmib] {
    padding: 1rem;
}

.btn-next-rightcolcustom1[b-qiekk2lmib] {
    background-color: #28A745;
    color: #FFFFFF;
    border-radius: 8px;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
}

.btn-clear-rightcolcustom1[b-qiekk2lmib] {
    background-color: #DC3545;
    color: #FFFFFF;
    border-radius: 8px;
    border: none;
    padding: 0.75rem 1rem;
}

/*
   Estilos para el mensaje de "Sin información".
*/
.no-data-rightcolcustom1[b-qiekk2lmib] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6C757D;
    text-align: center;
}

/* --- Mensaje de "Sin Información" --- */
.no-data-info[b-qiekk2lmib] {
    text-align: center;
    padding: 2rem;
    color: #6C757D; /* Gris secundario */
    /* Sugerencias: #ADB5BD, #495057, #999999 */
}

    .no-data-info img[b-qiekk2lmib] {
        max-width: 120px;
        opacity: 0.4;
        margin-bottom: 1rem;
    }

    .no-data-info h4[b-qiekk2lmib] {
        color: #6C757D;
        font-size: 1.2rem;
    }

/* Estilos para el contenedor de la barra de herramientas móvil */
.mobile-toolbar[b-qiekk2lmib] {
    display: flex;
    justify-content: flex-end; /* Alinea los elementos (botones) a la derecha */
    gap: 1rem; /* Crea un espacio de 1rem entre cada botón */
    padding: 0.5rem; /* Añade un pequeño relleno alrededor del contenedor */
    background-color: #fff; /* Fondo blanco */
    
}

/* Estilos para los botones individuales */
/*.mobile-tool-btn {
    border: none;*/ /* Elimina el borde del botón */
    /*background-color: transparent;*/ /* Fondo transparente */
    /*cursor: pointer;*/ /* Cambia el cursor para indicar que es clicable */
    /*padding: 0.5rem;*/ /* Relleno para hacer el área de clic más grande */
    /*font-size: 1.5rem;*/ /* Aumenta el tamaño del icono */
    /*transition: color 0.3s ease;*/ /* Transición suave para el color */
/*}*/

    /* Estilos para los iconos dentro de los botones */
    .mobile-tool-btn .fas[b-qiekk2lmib] {
        color: #007BFF; /* Color azul principal para los iconos */
    }

    /* Efecto al pasar el cursor sobre los botones */
    .mobile-tool-btn:hover .fas[b-qiekk2lmib] {
        color: #0056b3; /* Un azul más oscuro al pasar el mouse para un efecto interactivo */
    }
/*
   Estilos para el botón que contiene el icono y el badge.
   Se establece la posición relativa para que el badge se posicione
   de forma absoluta en relación con este botón.
*/
.mobile-tool-btn[b-qiekk2lmib] {
    position: relative; /* Clave para posicionar el badge */
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

/*
   Estilos del badge (el contador de ítems).
   Se posiciona en la esquina superior derecha del botón.
*/
.cart-badge[b-qiekk2lmib] {
    position: absolute; /* Posicionamiento absoluto */
    top: -5px; /* Ajusta la posición vertical */
    right: -5px; /* Ajusta la posición horizontal */
    background-color: #DC3545; /* Color de fondo rojo (de peligro) */
    color: white; /* Color del texto blanco */
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px; /* Relleno para dar forma al badge */
    border-radius: 50%; /* Hace que el badge sea circular */
    border: 2px solid #fff; /* Borde blanco para mayor visibilidad */
    line-height: 1; /* Asegura que el texto esté centrado verticalmente */
}

.pos-toolbar[b-qiekk2lmib] {
    background-color: transparent;
    color: white;
}

.page-header[b-qiekk2lmib] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-qiekk2lmib] {
        width: 100%;
    }

    .page-header .page-header-title[b-qiekk2lmib] {
        display: block;
    }

    .page-header h4[b-qiekk2lmib], .page-header .h4[b-qiekk2lmib] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-qiekk2lmib] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/POS/POSMovilListPage.razor.rz.scp.css */
.grid-container[b-gbrlqisy0z] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 13rem);
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    /*align-items: center;*/ /* Centrar verticalmente */
}

/* --- Styles for the Cotizacion Filter Row --- */
/* This is your component's own div, so it gets the isolation hash */
.cotizacion-filter-row[b-gbrlqisy0z] {
    display: flex;    
    gap: 1.25rem;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

    /* --- Styling for Dropdowns within the Filter Row --- */
    /* Use ::deep to target Syncfusion's internal .e-dropdownlist class */
    .cotizacion-filter-row[b-gbrlqisy0z]  .e-dropdownlist {
        flex-grow: 1;
        flex-basis: 0;
        min-width: 12.5rem;
        height: auto;
    }

        /* Use ::deep to target the inner input group of Syncfusion dropdowns */
        .cotizacion-filter-row[b-gbrlqisy0z]  .e-dropdownlist .e-input-group {
            width: 100%;
            box-sizing: border-box;
        }

    /* Adjust FloatLabelType for better appearance - requires ::deep too */
    .cotizacion-filter-row[b-gbrlqisy0z]  .e-float-text {
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        transition: all 0.2s ease-out;
        pointer-events: none;
        color: #6c757d;
    }

    .cotizacion-filter-row[b-gbrlqisy0z]  .e-float-input.e-input-focus + .e-float-text,
    .cotizacion-filter-row[b-gbrlqisy0z]  .e-float-input.e-valid-input + .e-float-text {
        top: 0.5rem;
        font-size: 0.75rem;
        color: #007bff;
    }

    /* --- Styling for SfButton within the Filter Row --- */
    /* Use ::deep to target Syncfusion's internal .e-btn class */
    .cotizacion-filter-row[b-gbrlqisy0z]  .e-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 0.25rem;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
        height: 2.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* Syncfusion primary button specific styles - requires ::deep */
        .cotizacion-filter-row[b-gbrlqisy0z]  .e-btn.e-primary {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
        }

            .cotizacion-filter-row[b-gbrlqisy0z]  .e-btn.e-primary:hover {
                background-color: #0056b3;
                border-color: #004085;
            }

        /* Spacing for the button icon - requires ::deep */
        .cotizacion-filter-row[b-gbrlqisy0z]  .e-btn .e-btn-icon {
            margin-right: 0.5rem;
        }

/* --- Responsiveness for Smaller Screens --- */
/* The top-level class will still get the isolation hash, so no ::deep needed here */
@media (max-width: 768px) {
    .cotizacion-filter-row[b-gbrlqisy0z] {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 1rem;
    }

        /* Use ::deep for all Syncfusion elements within the media query as well */
        .cotizacion-filter-row[b-gbrlqisy0z]  .e-dropdownlist,
        .cotizacion-filter-row[b-gbrlqisy0z]  .e-dropdownlist .e-input-group,
        .cotizacion-filter-row[b-gbrlqisy0z]  .e-btn {
            width: 100%;
            min-width: auto;
            flex-basis: auto;
        }
}

.pos-toolbar[b-gbrlqisy0z] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-gbrlqisy0z] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-gbrlqisy0z] {
    flex-shrink: 0;
}




.page-header[b-gbrlqisy0z] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-gbrlqisy0z] {
        width: 100%;
    }

    .page-header .page-header-title[b-gbrlqisy0z] {
        display: block;
    }

    .page-header h4[b-gbrlqisy0z], .page-header .h4[b-gbrlqisy0z] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-gbrlqisy0z] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.card[b-gbrlqisy0z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cart-product-box .horizontal-product-details .trash-button[b-gbrlqisy0z] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-gbrlqisy0z] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-gbrlqisy0z] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-gbrlqisy0z] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.card-content[b-gbrlqisy0z] {
    display: contents !important;
}

.info[b-gbrlqisy0z] {
    flex-grow: 1;
}

    .info h5[b-gbrlqisy0z] {
        margin: 0px;
        font-size: 15px;
        color: #333;
        font-style: oblique;
    }

    .info h4[b-gbrlqisy0z] {
        margin: 0px;
        font-size: 14px;
        color: blue;
    }

    .info p[b-gbrlqisy0z] {
        margin: 2px 0;
        font-size: 14px;
        color: #555;
    }

.actions[b-gbrlqisy0z] {
    display: flex;
    gap: 10px;
    /*margin-left:140px;*/
}

    .actions .btn:hover[b-gbrlqisy0z] {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .actions .btn[b-gbrlqisy0z] {
        border: none;
        background: none;
        cursor: pointer;
        font-size: 18px;
    }

        .actions .btn.view[b-gbrlqisy0z] {
            color: #007bff;
        }

        .actions .btn.edit[b-gbrlqisy0z] {
            color: #ffc107;
        }

        .actions .btn.delete[b-gbrlqisy0z] {
            color: #dc3545;
        }

.producto-linea2[b-gbrlqisy0z] {
    display: flex;
    align-items: center;
    justify-content: start;
}

/*@media (max-width: 574px) {
    .producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}*/


.botones-producto-linea2[b-gbrlqisy0z] {
    display: flex;
    align-items: center;
    justify-content: end;
}

/*@media (max-width: 574px) {
    .botones-producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}*/
/* Contenedor principal del ListView */
/*.responsive-listview {
    max-width: 500px;
    margin: auto;    
    border-radius: 2px;*/
/*height: 470px;*/
/*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}*/

/* Estilo general de los ítems (cards) */
/*.list-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: lightgray;
    opacity: 0.7;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    margin-left: 10px;
    margin-block: 10px;
    margin-bottom: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f0f0f0;
    overflow: visible;
}*/

/* Efecto al pasar el cursor por encima */
/*.list-item:hover {
        transform: translateY(-5px);*/
/*box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);*/
/*}*/

/* Contenido de los ítems */
/*.item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;*/ /* Espaciado entre líneas */
/*}

    .item-content h4 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        color: blue;
    }

    .item-content p {
        font-size: 14px;
        margin: 0;
        color: black;
        word-wrap: break-word;*/ /* Asegura que el texto largo se ajuste al ancho */
/*}*/
.horizontal-product-list[b-gbrlqisy0z] {
    display: contents;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li[b-gbrlqisy0z] {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box[b-gbrlqisy0z] {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box[b-gbrlqisy0z] {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img[b-gbrlqisy0z] {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img[b-gbrlqisy0z] {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details[b-gbrlqisy0z] {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details[b-gbrlqisy0z] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cart-product-box .horizontal-product-details .product-title[b-gbrlqisy0z] {
    font-size: 1.2em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info[b-gbrlqisy0z] {
    display: flex;
    padding: 0;
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1.2em;
    position: relative;
    color: green;
    word-wrap: break-word;
}

.cart-product-box .horizontal-product-details .product-price[b-gbrlqisy0z] {
    font-size: 15px
}

.cart-product-box .horizontal-product-details .trash-button[b-gbrlqisy0z] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-gbrlqisy0z] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-gbrlqisy0z] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-gbrlqisy0z] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.spanstyle[b-gbrlqisy0z] {
    font-size: 1.1em !important;
}

.spanstylecolor[b-gbrlqisy0z] {
    font-size: 1.1em !important;
    color: blue;
}
/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 480px) {
    .cart-product-box .horizontal-product-details .product-title[b-gbrlqisy0z] {
        font-size: 0.8em !important; /* Ajusta para pantallas pequeñas */
        font-weight: 600;
        font-style: italic;
        margin-top: 1px;
    }

    .cart-product-box .horizontal-product-details .product-info[b-gbrlqisy0z] {
        display: flex;
        padding: 0;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 0.8em; /* Ajusta para pantallas pequeñas */
        position: relative;
        color: green;
        word-wrap: break-word;
    }
}

@media (max-width: 480px) {
    .spanstyle[b-gbrlqisy0z] {
        font-size: 0.8em !important;
    }

    .spanstylecolor[b-gbrlqisy0z] {
        font-size: 0.8em !important;
        color: blue;
    }
}

.styletotal[b-gbrlqisy0z] {
    background-color: white;
    margin-top: 10px;
    padding: 10px;
    color: navy;
    border-style: ridge;
}
/*@media (min-width: 1025px) {
    .cart-product-box .horizontal-product-details .product-title {
        font-size: 0.9em !important;*/ /* Ajusta para pantallas pequeñas */
/*font-weight: 600;
        font-style: italic;
        margin-top: 1px;
    }

    .cart-product-box .horizontal-product-details .product-info {
        display: flex;
        padding: 0;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 1.0em;*/ /* Ajusta para pantallas pequeñas */
/*position: relative;
        color: green;
    }
}*/
/* Estilo general del invoice-wrapper */
.invoice-container[b-gbrlqisy0z] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
    background-color: #f9f9f9;
}

#invoice-wrapper[b-gbrlqisy0z] {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    word-wrap: break-word;
    text-align: left;
    width: auto;
}


table[b-gbrlqisy0z] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    table th[b-gbrlqisy0z],
    table td[b-gbrlqisy0z] {
        padding: 5px 5px !important;
        /*border-bottom: 1px solid #ddd;*/
        text-align: left;
        vertical-align: top;
    }

.printer-80mm table[b-gbrlqisy0z] {
    font-size: 12px;
}

    .printer-80mm table th[b-gbrlqisy0z],
    .printer-80mm table td[b-gbrlqisy0z] {
        padding: 5px 1px;
    }

    .printer-80mm table th[b-gbrlqisy0z] {
        /*border-bottom: 2px solid #000;*/
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.printer-80mm[b-gbrlqisy0z] {
    width: 80mm;
}

.texto-80mm[b-gbrlqisy0z] {
}

.printer-58mm[b-gbrlqisy0z] {
    width: 58mm;
}

.printer-210mm[b-gbrlqisy0z] {
    width: 210mm;
}

.texto-210mm[b-gbrlqisy0z] {
    font-size: 14px;
}

.texto-58mm[b-gbrlqisy0z] {
    font-size: 9px;
}


.printer-210mm table[b-gbrlqisy0z] {
    font-size: 14px;
}

.printer-58mm table[b-gbrlqisy0z] {
    font-size: 9px;
}

    .printer-58mm table th[b-gbrlqisy0z],
    .printer-58mm table td[b-gbrlqisy0z] {
        padding: 5px 3px;
    }

    .printer-58mm table th[b-gbrlqisy0z] {
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.description[b-gbrlqisy0z] {
    word-wrap: break-word;
    max-width: 100%;
    font-size: 10px;
    padding-top: 5px;
}


.invoice-title[b-gbrlqisy0z] {
    text-align: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.invoice-details[b-gbrlqisy0z] {
    display: flex;
    flex-direction: column;
    width: 100%;
    line-height: 1.3; /* Mejor separación entre líneas */
}

.row-80mm[b-gbrlqisy0z] {
    grid-template-columns: 100px 1fr; /* Columna fija para el título, flexible para el valor */
}

.row-58mm[b-gbrlqisy0z] {
    grid-template-columns: 90px 1fr; /* Columna fija para el título, flexible para el valor */
}

.row-210mm[b-gbrlqisy0z] {
    grid-template-columns: 110px 1fr; /* Columna fija para el título, flexible para el valor */
}

.invoice-details .row[b-gbrlqisy0z] {
    display: grid;
    gap: 5px; /* Espacio entre columnas */
    margin-bottom: 3px; /* Espacio entre filas */
}

.invoice-details .label[b-gbrlqisy0z] {
    text-align: left;
    font-weight: bold; /* Destacar los títulos */
    color: #333; /* Texto más oscuro para mejor legibilidad */
    font-family: 'Roboto';
    font-size: 14px;
}

.invoice-details .value[b-gbrlqisy0z] {
    text-align: left;
    color: #555; /* Color más claro para diferenciar del título */
    word-wrap: break-word; /* Ajustar el texto largo */
    margin-left: -25px;
    font-family: 'Roboto';
    font-size: 14px;
}

.ticket-header[b-gbrlqisy0z] {
    text-align: center;
    margin-bottom: 10px;
}

    .ticket-header h1[b-gbrlqisy0z] {
        font-size: 16px;
        margin: 0;
        font-weight: bold;
    }

    .ticket-header p[b-gbrlqisy0z] {
        margin: 2px 0;
        font-size: 12px;
    }

.divider[b-gbrlqisy0z] {
    border-top: 1px dashed black;
    margin: 10px 0;
}

.rowcabe[b-gbrlqisy0z] {
    margin: 10px;
}

.h3_1[b-gbrlqisy0z] {
    font-weight: 600;
    text-align: center;
    color: green;
}
.document-grid-container[b-gbrlqisy0z] {
    padding: 1rem;
    max-width: 1100px;
    margin: auto;
}

.document-card[b-gbrlqisy0z] {
    background: #fff;
    border-radius: 0.6rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e3e6f0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.document-card-header[b-gbrlqisy0z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.doc-title[b-gbrlqisy0z] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.doc-subtitle[b-gbrlqisy0z] {
    font-size: 0.85rem;
}

.doc-total[b-gbrlqisy0z] {
    font-size: 0.95rem;
    color: #2e7d32;
}

.document-card-body[b-gbrlqisy0z] {
    font-size: 0.85rem;
    color: #444;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.document-card-footer[b-gbrlqisy0z] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.doc-info[b-gbrlqisy0z] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/Mobile/POS/POSMovilPage.razor.rz.scp.css */
.cart-icon-mobile[b-ylirfso391] {
    position: relative;
}

.cart-badge[b-ylirfso391] {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 50%;
}
.custom3-toolbar[b-ylirfso391] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom3-toolbar-buttons[b-ylirfso391] {
    display: flex;
    align-items: center;
}

.custom3-toolbar-group[b-ylirfso391] {
    display: flex;
    gap: 0.5rem;
}
/* Mobile-first approach: hide text labels by default */
.responsive-button-group .btn-label[b-ylirfso391] {
    display: none;
}

/* Show only icons in small screens for the main toolbar buttons */
.responsive-button-group .e-btn .fas[b-ylirfso391] {
    margin-right: 0 !important; /* Remove any default margin for icons */
}

/* Styles for mobile/tablet floating dropdown button */
@media (max-width: 992px) {
    .mobile-dropdown-fixed[b-ylirfso391] {
        position: relative;
        /* bottom: 20px;
        right: 20px;*/
        z-index: 9999;
        background-color: transparent;
        border-radius: 50%;
        padding: 12px;
        /* box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        animation: pulse 1.4s infinite;*/
    }

        .mobile-dropdown-fixed .e-btn[b-ylirfso391] {
            border-radius: 50%;
            padding: 14px;
        }

    @keyframes pulse-b-ylirfso391 {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

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

    /* Hide the regular button group on small screens */
    .responsive-button-group[b-ylirfso391] {
        display: none;
    }

    /* Ensure dropdown popup has a decent width on mobile */
    .mobile-dropdown .e-dropdown-popup ul[b-ylirfso391] {
        min-width: 180px;
    }

    /* Show the icon-only group on small screens */
    .responsive-icon-group[b-ylirfso391] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: nowrap;
    }
}

/* Styles for desktop screens (min-width: 993px for d-lg-block) */
@media (min-width: 993px) {
    .mobile-dropdown-fixed[b-ylirfso391] {
        display: none; /* Hide the floating dropdown on large screens */
    }

    .responsive-button-group[b-ylirfso391] {
        display: flex; /* Show the full button group on large screens */
        gap: 0.5rem;
        align-items: center;
        flex-wrap: nowrap;
    }

        .responsive-button-group .btn-label[b-ylirfso391] {
            display: inline; /* Show text labels on large screens */
            margin-left: 5px; /* Add margin next to icon */
        }

    .responsive-icon-group[b-ylirfso391] {
        display: none; /* Hide the icon-only group on large screens */
    }
}
.pos-toolbar[b-ylirfso391] {
    background-color: transparent;
    color: white;
}

.search-bar[b-ylirfso391] {
    padding: 10px 0px 0px 10px;
}

.products-block[b-ylirfso391] {
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    max-height: 540px;
    gap: 0px;
}

    .products-block .product-single[b-ylirfso391] {
        position: relative;
        text-align: center;
        border: 1px solid lightgreen;
        border-radius: 2px;
        background-color: #fff;
        padding: 2px;
        box-shadow: 0 4px 20px 1px #0000000f,0 1px 4px #00000014;
        cursor: pointer;
        overflow: hidden;
        margin-bottom: 16px;
        margin-left: 8px;
        margin-right: 8px;
        width: calc(36.66% - 16px)
    }
/* Pantallas pequeñas (móviles en modo retrato) */
@media screen and (max-width: 576px) {
    .pos .left-column .products-block .product-single[b-ylirfso391] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(30% - 1px) !important
    }
}

/* Pantallas medianas (móviles grandes o tabletas) */
@media screen and (min-width: 577px) and (max-width: 768px) {
    .pos .left-column .products-block .product-single[b-ylirfso391] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(30% - 1px) !important
    }
}

/* Pantallas grandes (tabletas en modo horizontal o laptops) */
@media screen and (min-width: 769px) and (max-width: 992px) {
    .pos .left-column .products-block .product-single[b-ylirfso391] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(22.66% - 1px) !important
    }
}

/* Pantallas extra grandes (desktops o monitores grandes) */
@media screen and (min-width: 993px) and (max-width:1358px) {
    .pos .left-column .products-block .product-single[b-ylirfso391] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20.66% - 1px) !important
    }
}

@media screen and (min-width: 1359px) and (max-width:1440px) {
    .pos .left-column .products-block .product-single[b-ylirfso391] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20.66% - 1px) !important
    }
}

@media screen and (min-width: 1441px) {
    .pos .left-column .products-block .product-single[b-ylirfso391] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(12.66% - 1px) !important
    }
}



.no-data img[b-ylirfso391] {
    max-width: 80px;
}

.no-data h4[b-ylirfso391] {
    font-size: 16px;
    color: var(--colorTextLight);
    font-weight: 400
}

.products-block .product-single:hover[b-ylirfso391] {
    /*background-color: var(--colorSurface);*/
    transform: scale(1.05); /* Escalar la tarjeta ligeramente en hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añadir sombra más pronunciada en hover */
}
/* Contenedor de la imagen */
.product-image-container[b-ylirfso391] {
    position: relative;
    padding: 10px;
    display: flex;
    background-color: white;
    justify-content: center;
    align-items: center;
    height: 80px; /* Altura fija para que todas las imágenes tengan el mismo tamaño */
}

.badge-left[b-ylirfso391] {
    position: absolute;
    top: 1px;
    left: 1px;
    /*background-color: #ff5733;*/ /* Color del badge */
    background-color: darkblue;
    opacity: 0.8;
    color: #fff;
    max-width: 100px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.7em;
}

.badge-sinstock[b-ylirfso391] {
    position: absolute;
    top: 1px;
    left: 1px;
    /*background-color: #ff5733;*/ /* Color del badge */
    background-color: red;
    opacity: 0.8;
    color: #fff;
    max-width: 100px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.7em;
}

.badge-right[b-ylirfso391] {
    display: block;
    background-color: transparent; /* Color del badge */
    color: green;
    border-radius: 2px;
    font-size: 1.0em;
    font-weight: bold;
}

.products-block .product-single .image[b-ylirfso391] {
    width: 90%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    border-radius: 1px;
}

.products-block .product-single .product-title[b-ylirfso391] {
    font-size: 0.8em;
    margin: 10px 0;
    background-color: green; /* Fondo semitransparente */
    opacity: 0.9;
    color: white;
    padding: 3px;
    height: 40px;
    max-height: 40px;
    border-radius: 2px;
    display: -webkit-box; /* Necesario para el uso de line-clamp */
    -webkit-line-clamp: 2; /* Limita a 2 líneas */
    -webkit-box-orient: vertical; /* Define la orientación del recorte de texto */
    overflow: hidden; /* Oculta el texto que sobrepasa el límite */
    text-overflow: ellipsis; /* Muestra puntos suspensivos (...) si el texto se desborda */
}

@media (max-width: 1199px) {
    .pos .right-column .products-block .product-single .image[b-ylirfso391] {
        height: 70px !important;
        max-height: 70px !important
    }
}

@media (max-width: 1199px) {
    .pos .products-block .product-single .product-title[b-ylirfso391] {
        font-size: 0.8em !important;
        margin-bottom: 4px
    }
}

.grid-container[b-ylirfso391] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
}

/* Contenedor general */
.products-block-custom3[b-ylirfso391] {
    padding: 0.5rem;
}

/* Card general */
/*.product-cardc3 {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

    .product-cardc3:hover {
        transform: translateY(-4px);
    }*/

/* Imagen */
/*.product-image-containerc3 {
    text-align: center;
    padding: 0.5rem;
    position: relative;
}

.product-popup-imagec3 {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    border-radius: 8px;
}*/

/* Badge stock */
.badge-stock-custom3[b-ylirfso391],
.badge-nostock-custom3[b-ylirfso391] {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
}

.badge-stock-custom3[b-ylirfso391] {
    background-color: #28a745;
}

.badge-nostock-custom3[b-ylirfso391] {
    background-color: #dc3545;
}

/* Títulos y textos */
.product-title[b-ylirfso391] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.product-pricec3[b-ylirfso391] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 0.6rem;
}

/* Botón Info */
.btn-product-info[b-ylirfso391] {
    font-size: 0.85rem;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 4px 10px;
    transition: background 0.2s;
}

    .btn-product-info:hover[b-ylirfso391] {
        background: #e9ecef;
    }

/* ---------------------- */
/* 🔹 RESPONSIVE AJUSTES */
/* ---------------------- */
/*@media (max-width: 576px) {
    .product-popup-imagec3 {
        max-height: 120px;
    }

    .product-title {
        font-size: 0.8rem;
    }

    .product-pricec3 {
        font-size: 0.75rem;
    }

    .btn-product-info {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .badge-stock-custom3,
    .badge-nostock-custom3 {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
}*/

@media (min-width: 577px) and (max-width: 992px) {
    .product-popup-imagec3[b-ylirfso391] {
        max-height: 150px;
    }
    
    .product-title[b-ylirfso391] {
        font-size: 0.9rem;
    }

    .product-pricec3[b-ylirfso391] {
        font-size: 0.85rem;
    }
}


/* Contenedor imagen */
.product-image-containerc3[b-ylirfso391] {
    text-align: center;
    padding: 0.5rem;
    position: relative;
    min-height: 160px; /* desktop/tablet */
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-popup-imagec3[b-ylirfso391] {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    border-radius: 8px;
}

/* ---------------------- */
/* 🔹 RESPONSIVE AJUSTES */
/* ---------------------- */
@media (max-width: 576px) {
    .product-image-containerc3[b-ylirfso391] {
        min-height: 100px; /* 🔽 contenedor más bajo en móviles */
        padding: 0.25rem;
    }

    .product-popup-imagec3[b-ylirfso391] {
        max-height: 90px; /* 🔽 imagen más pequeña */
    }

    .product-title[b-ylirfso391] {
        font-size: 0.8rem;
    }

    .product-pricec3[b-ylirfso391] {
        font-size: 0.75rem;
    }

    .btn-product-info[b-ylirfso391] {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .badge-stock-custom3[b-ylirfso391],
    .badge-nostock-custom3[b-ylirfso391] {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
}
/* ====================================================== */
/* Contenedor GRID de Productos (New & Improved with custom3) */
/* ====================================================== */
/*.products-block-custom3 {
    width: 100%;*/
    /*display: grid;*/
    /* Grid de auto-ajuste: 2, 3 o 4 columnas dependiendo del espacio,
       manteniendo un ancho mínimo razonable para cada tarjeta. */
    /*grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));*/ /* Auto-fill para asegurar 1 o más columnas sin huecos si hay pocos ítems */
    /*gap: 20px;*/ /* Espacio entre las tarjetas de producto */
    /*padding: 20px 0;*/ /* Padding superior e inferior para el bloque de productos */
    /*overflow-x: hidden;
    height: auto;
    max-height: 570px;*/
    /*min-height: calc(100vh - 350px);*/
    /*overflow-y: auto;
    position: relative
}*/

/* Estilo individual de cada tarjeta de producto */
/*.product-single-custom3 {
    background-color: #ffffff;*/ /* Fondo blanco */
    /*border-radius: 12px;*/ /* Bordes redondeados */
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);*/ /* Sombra suave y atractiva */
    /*transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;*/ /* Apila los elementos verticalmente: imagen, info, botón */
    /*overflow: hidden;*/ /* Asegura que el contenido no se desborde, especialmente el border-radius */
    /*cursor: pointer;
    position: relative;*/ /* Para el posicionamiento del badge de stock */
    /* Para mantener una proporción y evitar que se estiren inmensamente */
    /* La altura se ajustará al contenido, pero establecemos una altura mínima */
    /*min-height: 280px;*/ /* Altura mínima razonable para un producto */
/*}

    .product-single-custom3:hover {
        transform: translateY(-5px);*/ /* Efecto de levantamiento al pasar el ratón */
        /*box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);*/ /* Sombra más intensa al hacer hover */
    /*}*/

/* Contenedor de la imagen del producto */
/*.product-image-container-custom3 {
    position: relative;
    width: 100%;*/
    /* Truco para mantener una proporción de aspecto (cuadrada o 4:3) */
    /* 100% de padding-top para una imagen cuadrada, 75% para 4:3 */
    /*padding-top: 100%;*/ /* Hace que el contenedor sea cuadrado, ideal para imágenes de producto */
    /*overflow: hidden;*/ /* Oculta cualquier parte de la imagen que se desborde */
    /*border-bottom: 1px solid #eee;*/ /* Separador sutil */
    /*background-color: #f0f0f0;*/ /* Fondo si la imagen tarda en cargar */
    /*display: flex;*/ /* Para centrar la imagen */
    /*justify-content: center;
    align-items: center;
}

.product-image-custom3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;*/ /* Escala la imagen para que quepa dentro del contenedor sin recortar */
    /* object-fit: cover; // Usa 'cover' si prefieres que la imagen llene el espacio y se recorte si es necesario */
    /*transition: transform 0.3s ease;*/ /* Transición suave para el zoom al hover */
/*}

.product-single-custom3:hover .product-image-custom3 {
    transform: scale(1.05);*/ /* Ligerísimo zoom en la imagen al hacer hover */
/*}*/

/* Badge de stock */
/*.badge-stock-custom3,
.badge-nostock-custom3 {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10;*/ /* Asegura que esté sobre la imagen */
/*}

.badge-stock-custom3 {
    background-color: #28a745;*/ /* Verde para stock disponible */
/*}

.badge-nostock-custom3 {
    background-color: #dc3545;*/ /* Rojo para sin stock */
/*}*/

/* Información del producto (título y precio) */
/*.product-info-custom3 {
    padding: 15px;
    flex-grow: 1;*/ /* Permite que esta sección crezca y ocupe el espacio disponible */
    /*display: flex;
    flex-direction: column;
    justify-content: space-between;*/ /* Distribuye el título y el precio */
/*}

.product-title-custom3 {
    font-size: 1.05em;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;*/ /* Limita el título a 2 líneas */
    /*-webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;*/ /* Asegura un espacio consistente para el título de 2 líneas */
/*}

.product-price-custom3 {
    font-size: 1.25em;
    font-weight: 700;
    color: #007bff;*/ /* Color primario para el precio */
    /*margin: 0;*/ /* Elimina margen inferior */
    /*display: flex;
    align-items: center;
    gap: 5px;
}*/

/* Botón de información */
/*.btn-info-custom3 {
    width: calc(100% - 30px);*/ /* Ancho del botón con padding de los lados */
    /*margin: 0 15px 15px 15px;*/ /* Margen inferior y lateral para separarlo de los bordes */
    /*border-radius: 8px;*/ /* Bordes redondeados para el botón */
    /*font-size: 0.95em;
    font-weight: 600;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;*/
    /* Los estilos de color y background ya los gestiona SfButton con CssClass="e-flat e-success" */
/*}*/

/* ====================================================== */
/* Media Queries para Responsividad (custom3) */
/* ====================================================== */

/* Para pantallas medianas (md): 2 columnas */
/*@media (max-width: 768px) {
    .products-block-custom3 {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));*/ /* Reduce el min-width */
        /*gap: 15px;
        padding: 15px 0;
    }

    .product-single-custom3 {
        min-height: 250px;*/ /* Ajusta altura mínima */
    /*}
}*/

/* Para pantallas pequeñas (sm/xs): 1 columna */
/*@media (max-width: 576px) {
    .products-block-custom3 {
        grid-template-columns: 1fr;*/ /* Una columna completa */
        /*gap: 15px;
        padding: 10px 0;
    }

    .product-single-custom3 {
        max-width: 320px;*/ /* Limita el ancho máximo para que no se vea inmenso en pantallas muy pequeñas */
        /*margin: 0 auto;*/ /* Centra el producto si solo hay uno */
        /*min-height: 280px;
    }

    .btn-info-custom3 {
        width: calc(100% - 20px);*/ /* Ajusta el ancho del botón */
        /*margin: 0 10px 10px 10px;
    }
}*/

/* Opcional: Ajuste para pantallas grandes (lg/xl) si necesitas más columnas o un min-width mayor */
/*@media (min-width: 1200px) {
    .products-block-custom3 {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));*/ /* 4 o 5 columnas */
        /*gap: 25px;
    }

    .product-single-custom3 {
        min-height: 320px;
    }
}*/

/* ====================================================== */
/* Contenedor GRID de Categorías Adaptable (New & Improved) */
/* ====================================================== */
.categories[b-ylirfso391] {
    width: 100%;
    max-height: 20vh;  /* Podría limitar la altura y forzar scroll. Ajusta según necesidad, o elimina si prefieres que crezca. */
    overflow-y: auto; /* Permite scroll vertical si el contenido excede el max-height */
    overflow-x: hidden; /* Oculta scroll horizontal */
    display: grid;
    /* Por defecto: ajusta automáticamente el número de columnas con un mínimo de 120px */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px; /* Aumenta el espaciado entre las categorías */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en dispositivos iOS */
    padding: 15px; /* Más padding para que el contenido respire */
    background-color: #f8fafd; /* Un gris muy claro, casi blanco azulado para un look limpio */
    border-radius: 12px; /* Bordes un poco más redondeados */
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* Sombra más suave y moderna para profundidad */
}

/* Forzar 3 columnas en pantallas pequeñas (hasta 576px, breakpoint 'sm' de Bootstrap) */
@media (max-width: 576px) {
    .categories[b-ylirfso391] {
        grid-template-columns: repeat(3, 1fr); /* Fuerza 3 columnas iguales */
        max-height: 150px; /* Ajusta la altura máxima para pantallas pequeñas */
        gap: 8px; /* Reduce el espaciado en pantallas pequeñas */
        padding: 10px;
    }
}

/* En pantallas medianas (min-width: 577px hasta 991px, 'md' de Bootstrap) */
@media (min-width: 577px) and (max-width: 991px) {
    .categories[b-ylirfso391] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Ajusta el min-width para más columnas */
        gap: 10px;
        padding: 12px;
    }
}

/* En pantallas grandes (min-width: 992px, 'lg' de Bootstrap) */
@media (min-width: 992px) {
    .categories[b-ylirfso391] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Más ancho mínimo para pantallas grandes */
        /* max-height: 25vh; */ /* Considera si realmente quieres un max-height fijo aquí */
        gap: 15px; /* Mayor espaciado */
        padding: 20px;
    }
}

/* ====================================================== */
/* Estilos para cada Item de Categoría (New & Improved) */
/* ====================================================== */
.items[b-ylirfso391] {
    list-style: none; /* Quita los puntos de lista */
    padding: 0;
    margin: 0;
}

    /* Estilo individual de cada categoría, manteniendo la proporción (altura fija con padding) */
    .items li[b-ylirfso391] {
        display: flex;
        flex-direction: column; /* Apila contenido verticalmente */
        justify-content: center; /* Centra verticalmente */
        align-items: center; /* Centra horizontalmente */
        text-align: center;
        cursor: pointer;
        background-color: #ffffff; /* Fondo blanco más brillante */
        height: 75px; /* Aumenta la altura para que respire más el contenido */
        border-radius: 12px; /* Bordes más suaves */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Sombra más definida */
        transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden; /* Oculta cualquier contenido que se desborde */
        box-sizing: border-box;
        padding: 8px; /* Padding interno para el contenido */
        border: 1px solid #e0e7ee; /* Borde sutil para definir cada item */
    }

        /* Hover effect para cada categoría */
        .items li:hover[b-ylirfso391] {
            background-color: #e6f0ff; /* Azul clarito más vibrante */
            transform: translateY(-4px); /* Levantamiento más pronunciado */
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); /* Sombra más intensa al hacer hover */
        }

    /* Estilos para el Título de la categoría */
    .items .title[b-ylirfso391] {
        font-weight: 700; /* Más negrita para mayor impacto */
        color: #2c3e50; /* Un gris muy oscuro, casi negro, para contraste */
        font-size: clamp(0.8rem, 1.5vw, 1.05rem); /* Rango de tamaño de fuente más dinámico y un poco más grande */
        line-height: 1.2; /* Espaciado de línea ligeramente mayor */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limita a 2 líneas de texto */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* Puntos suspensivos si el texto es muy largo */
        margin-top: 5px; /* Espacio si hubiera un icono arriba */
    }

/* ====================================================== */
/* Ajustes para pantallas XL (min-width: 1200px, 'xl' de Bootstrap) */
/* Puedes añadir una media query para 1440px si es estrictamente necesario,
   pero con auto-fit y minmax, Bootstrap suele manejar bien los tamaños intermedios. */
/* ====================================================== */
@media (min-width: 1200px) {
    .categories[b-ylirfso391] {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* Ancho mínimo para más columnas */
        /* max-height: 28vh; */
        gap: 18px; /* Aún más espacio */
        padding: 25px;
    }

    .items li[b-ylirfso391] {
        height: 90px; /* Mayor altura para items en pantallas muy grandes */
        padding: 10px;
    }
}
/* Contenedor de la sección */
.section-header[b-ylirfso391] {
    width: 100%;
    background-color: #f1f5f9; /* Gris claro suave */
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    margin-top: 10px;
    box-sizing: border-box;
}

/* Título */
.section-title[b-ylirfso391] {
    font-size: 1rem;
    font-weight: 600;
    color: #334155; /* Gris oscuro azulado */
    margin: 0;
    word-break: break-word;
}

.pager-container[b-ylirfso391] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}




.responsive-container[b-ylirfso391] {
    display: flex;
    height: calc(100vh - 60px); /* Ocupa todo el alto menos la altura de la barra de herramientas */
    padding: 10px;
    box-sizing: border-box;
}

.pos .right-column .calculation .table tr td[b-ylirfso391] {
    cursor: pointer;
    text-align: center
}

    .pos .right-column .calculation .table tr td.clickable:hover[b-ylirfso391] {
        background-color: var(--colorPrimary);
        color: var(--colorOnPrimary)
    }

.pos .right-column .calculation .table td[b-ylirfso391], .pos .right-column .calculation .table th[b-ylirfso391] {
    font-size: 14px
}

.pos .pos-right .products-block[b-ylirfso391] {
    height: auto;
    max-height: 500px;
    min-height: calc(100vh - 250px);
    overflow-y: auto;
    position: relative
}

@media (max-width: 991px) {
    .pos .pos-right[b-ylirfso391] {
        margin-top: 20px
    }

    .pos .pos-left .calculation .table td[b-ylirfso391], .pos .pos-left .calculation .table th[b-ylirfso391] {
        font-size: 10px
    }
}


@media screen and (max-width: 1024px) {
    .responsive-container[b-ylirfso391] {
        flex-direction: column;
    }

    .left-column[b-ylirfso391], .right-column[b-ylirfso391] {
        flex: none;
        width: 100%;
    }
}


.form-row[b-ylirfso391] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 2px;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-ylirfso391] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */


/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-ylirfso391] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-ylirfso391],
    .custom-button[b-ylirfso391] {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .responsive-container[b-ylirfso391] {
        flex-direction: column;
    }

    .left-column[b-ylirfso391], .right-column[b-ylirfso391] {
        flex: none;
        width: 100%;
    }
}


.loading-overlay[b-ylirfso391] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-ylirfso391] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-ylirfso391 1s linear infinite;
}

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

.right-column .cart[b-ylirfso391] {
    height: auto;
    max-height: 470px;
    min-height: calc(100vh - 400px);
}

.right-column .card[b-ylirfso391] {
    border-radius: 0px;
    padding: 4px;
}

.horizontal-product-list[b-ylirfso391] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li[b-ylirfso391] {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box[b-ylirfso391] {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box[b-ylirfso391] {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img[b-ylirfso391] {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img[b-ylirfso391] {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details[b-ylirfso391] {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details[b-ylirfso391] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cart-product-box .horizontal-product-details .trash-button[b-ylirfso391] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-ylirfso391] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-ylirfso391] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-ylirfso391] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.cart-product-box .horizontal-product-details .product-title[b-ylirfso391] {
    font-size: 0.8em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info[b-ylirfso391] {
    display: flex;
    padding: 0;
    margin-top: 1px;
    margin-bottom: 5px;
    font-size: 0.8em;
    position: relative;
    color: green;
}

.cart-product-box .horizontal-product-details .product-price[b-ylirfso391] {
    font-size: 15px
}

.cart-product-box .horizontal-product-details .product-price-input[b-ylirfso391] {
    border-bottom: 1px solid var(--colorPrimary);
    padding: 2px 0
}

    .cart-product-box .horizontal-product-details .product-price-input input[b-ylirfso391] {
        width: 70px;
        padding: 0;
        border: none;
        outline: none;
        background: transparent
    }

.cart-product-box .horizontal-product-details .product-info li[b-ylirfso391] {
    position: relative;
    font-weight: 400;
    line-height: 1;
    color: var(--colorTextLight);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    gap: 5px
}
/* En tu archivo CSS o bloque <style> */

.card[b-ylirfso391] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f,0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0
}

    .card[b-ylirfso391]:before {
        position: absolute;
        content: "";
        height: 80%;
        width: 1px;
        inset-inline-start: 0;
        background: var(--colorBorderBefore);
        inset-block-start: 10%;
        box-shadow: 8px 0 0 17px var(--colorBorderBeforeShadow)
    }

    .card .card-header[b-ylirfso391], .card .card-body[b-ylirfso391], .card .card-footer[b-ylirfso391] {
        background-color: transparent
    }

        .card .card-header .title[b-ylirfso391] {
            font-size: 16px;
            line-height: 28px;
            padding-right: 10px;
            margin-bottom: 0;
            color: var(--colorTextPrimary)
        }

    .card .card-header[b-ylirfso391] {
        border-bottom: 1px solid #dee2e630;
        line-height: 30px;
        align-self: center;
        width: 100%;
        display: flex;
        align-items: center
    }

    .card .card-footer[b-ylirfso391] {
        background-color: transparent;
        border: none
    }

@media (max-width: 767.98px) {
    .card .card-header[b-ylirfso391] {
        height: auto;
        flex-wrap: wrap
    }

    .card .card-header[b-ylirfso391], .card .card-body[b-ylirfso391], .card .card-footer[b-ylirfso391] {
        background-color: transparent;
        padding: 10px
    }
}

.producto-linea2[b-ylirfso391] {
    display: flex;
    align-items: center;
    justify-content: start;
}

@media (max-width: 574px) {
    .producto-linea2[b-ylirfso391] {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}


.botones-producto-linea2[b-ylirfso391] {
    display: flex;
    align-items: center;
    justify-content: end;
}

@media (max-width: 574px) {
    .botones-producto-linea2[b-ylirfso391] {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}


.producto-linea3[b-ylirfso391] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* Previene el salto a una nueva fila */
    gap: 8px;
}

    .producto-linea3 .input-wrapper[b-ylirfso391] {
        flex: 1 1 auto;
        min-width: 70px; /* Tamaño mínimo para cada control */
    }

@media (max-width: 576px) {
    .producto-linea3[b-ylirfso391] {
        gap: 4px; /* Reduce el espacio entre elementos */
    }

        .producto-linea3 .input-wrapper[b-ylirfso391] {
            flex: 1 1 33%; /* Cada elemento ocupa una tercera parte */
        }
}


.card hr[b-ylirfso391] {
    color: var(--colorBorder)
}

.pos-toolbar[b-ylirfso391] {
    background-color: transparent;
    color: white;
}

.page-header[b-ylirfso391] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-ylirfso391] {
        width: 100%;
    }

    .page-header .page-header-title[b-ylirfso391] {
        display: block;
    }

    .page-header h4[b-ylirfso391], .page-header .h4[b-ylirfso391] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-ylirfso391] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }



/* Contenedor principal: Auto-fit, tarjetas más cómodas en pantallas grandes */
.products-block-custom[b-ylirfso391] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    
    justify-items: stretch;
    overflow-x: hidden;
    height: auto;
    max-height: 500px;
    min-height: calc(100vh - 250px);
    overflow-y: auto;
    position: relative
}

/* Pantallas pequeñas: fuerza 2 columnas y reduce espaciados */
@media (max-width: 400px) {
    .products-block-custom[b-ylirfso391] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }
}

/* Tarjeta individual */
.product-single-custom[b-ylirfso391] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: white;
    border-radius: 12px;
    padding: 0.8rem;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover en pantallas grandes */
@media (min-width: 600px) {
    .product-single-custom:hover[b-ylirfso391] {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }
}
.product-single-custom:hover[b-ylirfso391] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* Imagen del producto */
.product-image-container-custom[b-ylirfso391] {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.product-image-custom[b-ylirfso391] {
    width: 100%;
    max-width: 110px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #ddd;
}

/* Badges de stock */
.badge-stock-custom[b-ylirfso391],
.badge-nostock-custom[b-ylirfso391] {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 6px;
    font-size: 0.7rem;
    border-radius: 20px;
    color: #fff;
    white-space: nowrap;
}

.badge-stock-custom[b-ylirfso391] {
    background-color: #4caf50;
}

.badge-nostock-custom[b-ylirfso391] {
    background-color: #f44336;
}

/* Información del producto */
.product-info-custom[b-ylirfso391] {
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.product-title-custom[b-ylirfso391] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    word-wrap: break-word;
}

.product-price-custom[b-ylirfso391] {
    font-size: 0.75rem;
    color: #555;
}

/* Botón Info */
.btn-info-custom[b-ylirfso391] {
    margin-top: 6px;
    font-size: 0.75rem;
    background-color: #e3f2fd;
    color: #1565c0;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Contenedor No Data */
.no-data-custom[b-ylirfso391] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    padding: 2rem;
}

    .no-data-custom img[b-ylirfso391] {
        width: 70px;
        height: 70px;
        opacity: 0.7;
    }

/* Paginador */
.pager-container-custom[b-ylirfso391] {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

/* Limpieza global */
body[b-ylirfso391], html[b-ylirfso391] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}
/* Product Grid Layout */
.product-grid-container[b-ylirfso391] {
    padding: 1rem;
    background-color: #f7f7f7;
}

.product-list[b-ylirfso391] {
    display: grid;
    /* This is the core of the dynamic layout: */
    /* It automatically creates columns based on the available space,
       ensuring a minimum card width of 250px and filling the rest of the space. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem; /* Gap between grid items */
}

/* Product Card Styling */
.product-card[b-ylirfso391] {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures all cards are the same height */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

    .product-card:hover[b-ylirfso391] {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

/* Image Wrapper for Proportional Images */
.product-card-image-wrapper[b-ylirfso391] {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Creates a perfect square aspect ratio (1:1) */
    background-color: #f8f8f8;
    overflow: hidden;
}

.product-card-image[b-ylirfso391] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Prevents image distortion */
    object-position: center;
    transition: transform 0.3s ease-in-out;
}

.product-card:hover .product-card-image[b-ylirfso391] {
    transform: scale(1.05);
}

/* Stock Badges */
.product-stock-badge[b-ylirfso391] {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

    .product-stock-badge.in-stock[b-ylirfso391] {
        background-color: #28a745; /* Bootstrap's success color */
    }

    .product-stock-badge.out-of-stock[b-ylirfso391] {
        background-color: #dc3545; /* Bootstrap's danger color */
    }

/* Card Body */
.product-card-body[b-ylirfso391] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1; /* Allows body to fill remaining vertical space */
}

/* Title Styling */
.product-card-title[b-ylirfso391] {
    font-size: 1rem;
    font-weight: 600;
    color: #343a40;
    line-height: 1.4;
    height: 2.8rem; /* Fixed height for two lines (1.4rem * 2) */
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limits title to two lines */
    -webkit-box-orient: vertical;
}

/* Price Styling */
.product-card-price[b-ylirfso391] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #007bff;
    margin-top: auto; /* Pushes price to the bottom */
}

.price-text[b-ylirfso391] {
    display: flex;
    align-items: center;
}

    .price-text .fas[b-ylirfso391] {
        color: #6c757d;
        margin-right: 0.5rem;
    }

/* Button Styling */
.product-card-button[b-ylirfso391] {
    width: 100%;
    padding: 0.6rem 0;
    border: none;
    border-radius: 5px;
    background-color: #17a2b8;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    margin-top: 1rem;
}

    .product-card-button:hover[b-ylirfso391] {
        background-color: #138496;
        transform: translateY(-2px);
    }

    .product-card-button .fas[b-ylirfso391] {
        margin-right: 0.5rem;
    }

/* Optional: Adjustments for very small screens */
@media (max-width: 575px) {
    .product-list[b-ylirfso391] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/OperacionesVentasPage.razor.rz.scp.css */
.grid-container[b-nevmb60fzs] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 8rem);
}

.form-row[b-nevmb60fzs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-nevmb60fzs] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-nevmb60fzs] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-nevmb60fzs] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 768px) {
    .form-row[b-nevmb60fzs] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-nevmb60fzs],
    .custom-button[b-nevmb60fzs] {
        width: 100%;
    }
}
.page-header[b-nevmb60fzs] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-nevmb60fzs] {
        width: 100%;
    }

    .page-header .page-header-title[b-nevmb60fzs] {
        display: block;
    }

    .page-header h4[b-nevmb60fzs], .page-header .h4[b-nevmb60fzs] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-nevmb60fzs] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.detail-template[b-nevmb60fzs] {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .detail-template h5[b-nevmb60fzs] {
        color: #0d6efd;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .detail-template .table[b-nevmb60fzs] {
        width: 100%;
        border-collapse: collapse;
    }

        .detail-template .table th[b-nevmb60fzs],
        .detail-template .table td[b-nevmb60fzs] {
            border: 1px solid #dee2e6;
            padding: 8px;
            font-size: 0.95rem;
        }

        .detail-template .table thead[b-nevmb60fzs] {
            background-color: #f8f9fa;
        }

/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/PedidoListPage.razor.rz.scp.css */
.grid-container[b-le4flvq6vv] {
   
    overflow-y: auto;
    margin-top: 5px;
   
    width: 100%;
    height: calc(100vh - 8rem);
}
.form-row[b-le4flvq6vv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}
.pos-toolbar[b-le4flvq6vv] {
    background-color: transparent;
    color: white;
}
 
.custom-textbox[b-le4flvq6vv] {
    flex-grow: 1;
}

 
.custom-button[b-le4flvq6vv] {
    flex-shrink: 0;
}

 
@media (max-width: 768px) {
    .form-row[b-le4flvq6vv] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox[b-le4flvq6vv],
    .custom-button[b-le4flvq6vv] {
        width: 100%;
    }
}
.page-header[b-le4flvq6vv] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-le4flvq6vv] {
        width: 100%;
    }

    .page-header .page-header-title[b-le4flvq6vv] {
        display: block;
    }

    .page-header h4[b-le4flvq6vv], .page-header .h4[b-le4flvq6vv] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-le4flvq6vv] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.detail-template[b-le4flvq6vv] {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .detail-template h5[b-le4flvq6vv] {
        color: #0d6efd;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .detail-template .table[b-le4flvq6vv] {
        width: 100%;
        border-collapse: collapse;
    }

        .detail-template .table th[b-le4flvq6vv],
        .detail-template .table td[b-le4flvq6vv] {
            border: 1px solid #dee2e6;
            padding: 8px;
            font-size: 0.95rem;
        }

        .detail-template .table thead[b-le4flvq6vv] {
            background-color: #f8f9fa;
        }

.text-truncate[b-le4flvq6vv] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.elegant-design[b-le4flvq6vv] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.detail-header[b-le4flvq6vv] {
    margin-bottom: 15px;
    color: #333;
}

    .detail-header h5[b-le4flvq6vv] {
        font-size: 1.2em;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .detail-header i[b-le4flvq6vv] {
        margin-right: 5px;
        color: #555;
    }


/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/PedidoPage.razor.rz.scp.css */
.grid-container[b-4dejf4m3fz] {
    overflow-y:hidden;
    margin-top: 0px;
   
}
.custom-container[b-4dejf4m3fz] {
    
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;*/ /* Altura completa de la ventana */
                     margin:0px;
padding:10px;
}
.page-header[b-4dejf4m3fz] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}
    .page-header .page-block[b-4dejf4m3fz] {
        width: 100%;
    }
    .page-header .page-header-title[b-4dejf4m3fz] {
        display: block;
    }
    .page-header h4[b-4dejf4m3fz], .page-header .h4[b-4dejf4m3fz] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }
    .page-header .breadcrumb[b-4dejf4m3fz] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }
.card[b-4dejf4m3fz] {
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px #0000000f, 0 1px 4px #00000014;
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}
.heading-style[b-4dejf4m3fz] {
    background-color: #0000000f;
    border-inline-start: 2px solid #b6ff00;
    border-radius: 3px;
    padding: 6px;
    padding-inline-start: 8px;
    margin-bottom: 14px;
}
.heading-style h3[b-4dejf4m3fz] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.total-order[b-4dejf4m3fz] {
    max-width: 430px;
    width: 100%;
    margin: 10px 0 30px auto;
}
    .total-order ul[b-4dejf4m3fz] {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: baseline;
    }

p[b-4dejf4m3fz], ul:not(.list-unstyled)[b-4dejf4m3fz], ol[b-4dejf4m3fz] {
    line-height: 22px;
}
.total-order ul li:first-child[b-4dejf4m3fz] {
    border-top: 1px solid #00000014;
}

.total-order ul li[b-4dejf4m3fz] {
    border: 1px solid #00000014;
    border-top: 0;
    display: flex;
}
    .total-order ul li h4[b-4dejf4m3fz] {
        width: 50%;
        color: var(--colorTextLight);
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border-right: 1px solid #00000014;
        background: var(--colorSurface);
        margin-bottom: 0;
    }

h4[b-4dejf4m3fz] {
    font-size: 17px;
}

h1[b-4dejf4m3fz], h2[b-4dejf4m3fz], h3[b-4dejf4m3fz], h4[b-4dejf4m3fz], h5[b-4dejf4m3fz], h6[b-4dejf4m3fz] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}
.total-order ul li h5[b-4dejf4m3fz] {
    color: var(--colorTextPrimary);
    font-size: 14px;
    padding: 10px;
    font-weight: 700;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

h1[b-4dejf4m3fz], h2[b-4dejf4m3fz], h3[b-4dejf4m3fz], h4[b-4dejf4m3fz], h5[b-4dejf4m3fz], h6[b-4dejf4m3fz] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

.flex-container[b-4dejf4m3fz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-4dejf4m3fz] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-4dejf4m3fz] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-4dejf4m3fz] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-4dejf4m3fz], .textbox-wrapper[b-4dejf4m3fz] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}
.loading-overlay[b-4dejf4m3fz] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-4dejf4m3fz] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-4dejf4m3fz 1s linear infinite;
}

@keyframes spin-b-4dejf4m3fz {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/MDGuiaRemisionEnvioPage.razor.rz.scp.css */
.sfcontainer[b-6v21s9t2o4] {
    width: 100%;
    margin-top: 0px; /* Ajusta el valor según sea necesario */
}

.grid-container[b-6v21s9t2o4] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
    width:100%;
}
.rowcabe[b-6v21s9t2o4] {
    margin: 10px;
}

.h3_1[b-6v21s9t2o4] {
    font-weight: 600;
    text-align: center;
    color: green;
}
/*table.table-bordered.dataTable {
    border-right-width: 0
}

    table.table-bordered.dataTable thead tr:first-child th, table.table-bordered.dataTable thead tr:first-child td {
        border-top-width: 1px
    }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-left-width: 0
    }

        table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child {
            border-left-width: 1px
        }

        table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child {
            border-right-width: 1px
        }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-bottom-width: 1px
    }

div.dataTables_scrollHead table.table-bordered {
    border-bottom-width: 0
}

table {
    margin: 0
}

.table thead {
    background: #dfdfdf28;
    border-bottom: 1px solid var(--colorBorder)
}

    .table thead th {
        font-weight: 600;
        color: var(--colorTextPrimary);
        padding: 10px;
        white-space: nowrap;
        
    }

.table th, .table td {
    text-align: start
}

.table-sm tbody td {
    padding-left: 10px;
    padding-right: 10px
}

.table td, .table:not(.table-bordered) th {
    border-top: none;
    border-bottom: 1px solid var(--colorBorder)
}

.table > :not(:last-child) > :last-child > * {
    border-bottom: 1px solid var(--colorBorder)
}

.table:not(.table-sm):not(.table-md):not(.dataTable) td, .table:not(.table-sm):not(.table-md):not(.dataTable) th {
    color: var(--colorTextPrimary);
    padding: 10px;
    vertical-align: middle
}

.table:not(.table-sm) thead th {
    border-bottom: none;
    color: var(--colorTextPrimary);
    white-space: nowrap;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: start
}

.table.table-md th, .table.table-md td {
    padding: 10px 15px
}

.table tr td {
    color: var(--colorTextPrimary)
}

.table.table-bordered tr {
    border-color: lightblue
}

.table.table-bordered td, .table.table-bordered th {
    border-color: lightblue;
    color: var(--colorTextLight)
}*/
/*.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);*/ /* Fondo semitransparente */
    /*display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;*/ /* Asegura que el overlay esté encima de otros elementos */
/*}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}*/

.loading-overlay[b-6v21s9t2o4] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-6v21s9t2o4] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-6v21s9t2o4 1s linear infinite;
}
@keyframes spin-b-6v21s9t2o4 {
    to {
        transform: rotate(360deg);
    }
}
.message-card[b-6v21s9t2o4] {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-left: 5px solid #007bff;
}

.card-header[b-6v21s9t2o4] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}

.card-body[b-6v21s9t2o4] {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}

.card-footer[b-6v21s9t2o4] {
    text-align: right;
}

.btn-action[b-6v21s9t2o4] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

    .btn-action:hover[b-6v21s9t2o4] {
        background-color: #0056b3;
    }
    .ndoc[b-6v21s9t2o4]{
        font-weight:600;
        color:green;
    }
.rsunatok[b-6v21s9t2o4] {
    font-weight: 600;
    color: blue;
}
.rsunaterr[b-6v21s9t2o4] {
    font-weight: 600;
    color: orangered;
}

.flex-container[b-6v21s9t2o4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-6v21s9t2o4] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-6v21s9t2o4] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-6v21s9t2o4] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-6v21s9t2o4], .textbox-wrapper[b-6v21s9t2o4] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}

/* Estilo general del invoice-wrapper */
.invoice-container[b-6v21s9t2o4] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
    background-color: #f9f9f9;
}

#invoice-wrapper[b-6v21s9t2o4] {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    word-wrap: break-word;
    text-align: left;
    width: auto;
}


table[b-6v21s9t2o4] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    table th[b-6v21s9t2o4],
    table td[b-6v21s9t2o4] {
        padding: 5px 5px !important;
        /*border-bottom: 1px solid #ddd;*/
        text-align: left;
        vertical-align: top;
    }

.printer-80mm table[b-6v21s9t2o4] {
    font-size: 12px;
}

    .printer-80mm table th[b-6v21s9t2o4],
    .printer-80mm table td[b-6v21s9t2o4] {
        padding: 5px 1px;
    }

    .printer-80mm table th[b-6v21s9t2o4] {
        /*border-bottom: 2px solid #000;*/
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.printer-80mm[b-6v21s9t2o4] {
    width: 80mm;
}

.texto-80mm[b-6v21s9t2o4] {
}

.printer-58mm[b-6v21s9t2o4] {
    width: 58mm;
}

.printer-210mm[b-6v21s9t2o4] {
    width: 210mm;
}

.texto-210mm[b-6v21s9t2o4] {
    font-size: 14px;
}

.texto-58mm[b-6v21s9t2o4] {
    font-size: 9px;
}


.printer-210mm table[b-6v21s9t2o4] {
    font-size: 14px;
}

.printer-58mm table[b-6v21s9t2o4] {
    font-size: 9px;
}

    .printer-58mm table th[b-6v21s9t2o4],
    .printer-58mm table td[b-6v21s9t2o4] {
        padding: 5px 3px;
    }

    .printer-58mm table th[b-6v21s9t2o4] {
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.description[b-6v21s9t2o4] {
    word-wrap: break-word;
    max-width: 100%;
    font-size: 10px;
    padding-top: 5px;
}


.invoice-title[b-6v21s9t2o4] {
    text-align: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.invoice-details[b-6v21s9t2o4] {
    display: flex;
    flex-direction: column;
    width: 100%;
    line-height: 1.3; /* Mejor separación entre líneas */
}

.row-80mm[b-6v21s9t2o4] {
    grid-template-columns: 100px 1fr; /* Columna fija para el título, flexible para el valor */
}

.row-58mm[b-6v21s9t2o4] {
    grid-template-columns: 90px 1fr; /* Columna fija para el título, flexible para el valor */
}

.row-210mm[b-6v21s9t2o4] {
    grid-template-columns: 110px 1fr; /* Columna fija para el título, flexible para el valor */
}

.invoice-details .row[b-6v21s9t2o4] {
    display: grid;
    gap: 5px; /* Espacio entre columnas */
    margin-bottom: 3px; /* Espacio entre filas */
}

.invoice-details .label[b-6v21s9t2o4] {
    text-align: left;
    font-weight: bold; /* Destacar los títulos */
    color: #333; /* Texto más oscuro para mejor legibilidad */
    font-family: 'Roboto';
    font-size: 14px;
}

.invoice-details .value[b-6v21s9t2o4] {
    text-align: left;
    color: #555; /* Color más claro para diferenciar del título */
    word-wrap: break-word; /* Ajustar el texto largo */
    margin-left: -25px;
    font-family: 'Roboto';
    font-size: 14px;
}

.ticket-header[b-6v21s9t2o4] {
    text-align: center;
    margin-bottom: 10px;
}

    .ticket-header h1[b-6v21s9t2o4] {
        font-size: 16px;
        margin: 0;
        font-weight: bold;
    }

    .ticket-header p[b-6v21s9t2o4] {
        margin: 2px 0;
        font-size: 12px;
    }

.divider[b-6v21s9t2o4] {
    border-top: 1px dashed black;
    margin: 10px 0;
}

.container12[b-6v21s9t2o4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.title-section[b-6v21s9t2o4] {
    text-align: center;
    margin-bottom: 15px;
}

.button-group[b-6v21s9t2o4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.btn-fixed[b-6v21s9t2o4] {
    width: 250px; /* Fija el mismo ancho para todos los botones */
    min-width: 250px;
}

/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/MDGuiaRemisionPaymentPage.razor.rz.scp.css */
.sfcontainer[b-7uriy1ausv] {
    width: 100%;
    margin-top: 0px; /* Ajusta el valor según sea necesario */
}

.grid-container[b-7uriy1ausv] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
    width:100%;
}
.rowcabe[b-7uriy1ausv] {
    margin: 10px;
}

.h3_1[b-7uriy1ausv] {
    font-weight: 600;
    text-align: center;
    color: green;
}
/*table.table-bordered.dataTable {
    border-right-width: 0
}

    table.table-bordered.dataTable thead tr:first-child th, table.table-bordered.dataTable thead tr:first-child td {
        border-top-width: 1px
    }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-left-width: 0
    }

        table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child {
            border-left-width: 1px
        }

        table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child {
            border-right-width: 1px
        }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-bottom-width: 1px
    }

div.dataTables_scrollHead table.table-bordered {
    border-bottom-width: 0
}

table {
    margin: 0
}

.table thead {
    background: #dfdfdf28;
    border-bottom: 1px solid var(--colorBorder)
}

    .table thead th {
        font-weight: 600;
        color: var(--colorTextPrimary);
        padding: 10px;
        white-space: nowrap;
        
    }

.table th, .table td {
    text-align: start
}

.table-sm tbody td {
    padding-left: 10px;
    padding-right: 10px
}

.table td, .table:not(.table-bordered) th {
    border-top: none;
    border-bottom: 1px solid var(--colorBorder)
}

.table > :not(:last-child) > :last-child > * {
    border-bottom: 1px solid var(--colorBorder)
}

.table:not(.table-sm):not(.table-md):not(.dataTable) td, .table:not(.table-sm):not(.table-md):not(.dataTable) th {
    color: var(--colorTextPrimary);
    padding: 10px;
    vertical-align: middle
}

.table:not(.table-sm) thead th {
    border-bottom: none;
    color: var(--colorTextPrimary);
    white-space: nowrap;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: start
}

.table.table-md th, .table.table-md td {
    padding: 10px 15px
}

.table tr td {
    color: var(--colorTextPrimary)
}

.table.table-bordered tr {
    border-color: lightblue
}

.table.table-bordered td, .table.table-bordered th {
    border-color: lightblue;
    color: var(--colorTextLight)
}*/
/*.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);*/ /* Fondo semitransparente */
    /*display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;*/ /* Asegura que el overlay esté encima de otros elementos */
/*}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}*/

.loading-overlay[b-7uriy1ausv] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-7uriy1ausv] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-7uriy1ausv 1s linear infinite;
}
@keyframes spin-b-7uriy1ausv {
    to {
        transform: rotate(360deg);
    }
}
.message-card[b-7uriy1ausv] {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-left: 5px solid #007bff;
}

.card-header[b-7uriy1ausv] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}

.card-body[b-7uriy1ausv] {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}

.card-footer[b-7uriy1ausv] {
    text-align: right;
}

.btn-action[b-7uriy1ausv] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

    .btn-action:hover[b-7uriy1ausv] {
        background-color: #0056b3;
    }
    .ndoc[b-7uriy1ausv]{
        font-weight:600;
        color:green;
    }
.rsunatok[b-7uriy1ausv] {
    font-weight: 600;
    color: blue;
}
.rsunaterr[b-7uriy1ausv] {
    font-weight: 600;
    color: orangered;
}

.flex-container[b-7uriy1ausv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-7uriy1ausv] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-7uriy1ausv] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-7uriy1ausv] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-7uriy1ausv], .textbox-wrapper[b-7uriy1ausv] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}

/* Estilo general del invoice-wrapper */
.invoice-container[b-7uriy1ausv] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
    background-color: #f9f9f9;
}

#invoice-wrapper[b-7uriy1ausv] {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    word-wrap: break-word;
    text-align: left;
    width: auto;
}


table[b-7uriy1ausv] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    table th[b-7uriy1ausv],
    table td[b-7uriy1ausv] {
        padding: 5px 5px !important;
        /*border-bottom: 1px solid #ddd;*/
        text-align: left;
        vertical-align: top;
    }

.printer-80mm table[b-7uriy1ausv] {
    font-size: 12px;
}

    .printer-80mm table th[b-7uriy1ausv],
    .printer-80mm table td[b-7uriy1ausv] {
        padding: 5px 1px;
    }

    .printer-80mm table th[b-7uriy1ausv] {
        /*border-bottom: 2px solid #000;*/
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.printer-80mm[b-7uriy1ausv] {
    width: 80mm;
}

.texto-80mm[b-7uriy1ausv] {
}

.printer-58mm[b-7uriy1ausv] {
    width: 58mm;
}

.printer-210mm[b-7uriy1ausv] {
    width: 210mm;
}

.texto-210mm[b-7uriy1ausv] {
    font-size: 14px;
}

.texto-58mm[b-7uriy1ausv] {
    font-size: 9px;
}


.printer-210mm table[b-7uriy1ausv] {
    font-size: 14px;
}

.printer-58mm table[b-7uriy1ausv] {
    font-size: 9px;
}

    .printer-58mm table th[b-7uriy1ausv],
    .printer-58mm table td[b-7uriy1ausv] {
        padding: 5px 3px;
    }

    .printer-58mm table th[b-7uriy1ausv] {
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.description[b-7uriy1ausv] {
    word-wrap: break-word;
    max-width: 100%;
    font-size: 10px;
    padding-top: 5px;
}


.invoice-title[b-7uriy1ausv] {
    text-align: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.invoice-details[b-7uriy1ausv] {
    display: flex;
    flex-direction: column;
    width: 100%;
    line-height: 1.3; /* Mejor separación entre líneas */
}

.row-80mm[b-7uriy1ausv] {
    grid-template-columns: 100px 1fr; /* Columna fija para el título, flexible para el valor */
}

.row-58mm[b-7uriy1ausv] {
    grid-template-columns: 90px 1fr; /* Columna fija para el título, flexible para el valor */
}

.row-210mm[b-7uriy1ausv] {
    grid-template-columns: 110px 1fr; /* Columna fija para el título, flexible para el valor */
}

.invoice-details .row[b-7uriy1ausv] {
    display: grid;
    gap: 5px; /* Espacio entre columnas */
    margin-bottom: 3px; /* Espacio entre filas */
}

.invoice-details .label[b-7uriy1ausv] {
    text-align: left;
    font-weight: bold; /* Destacar los títulos */
    color: #333; /* Texto más oscuro para mejor legibilidad */
    font-family: 'Roboto';
    font-size: 14px;
}

.invoice-details .value[b-7uriy1ausv] {
    text-align: left;
    color: #555; /* Color más claro para diferenciar del título */
    word-wrap: break-word; /* Ajustar el texto largo */
    margin-left: -25px;
    font-family: 'Roboto';
    font-size: 14px;
}

.ticket-header[b-7uriy1ausv] {
    text-align: center;
    margin-bottom: 10px;
}

    .ticket-header h1[b-7uriy1ausv] {
        font-size: 16px;
        margin: 0;
        font-weight: bold;
    }

    .ticket-header p[b-7uriy1ausv] {
        margin: 2px 0;
        font-size: 12px;
    }

.divider[b-7uriy1ausv] {
    border-top: 1px dashed black;
    margin: 10px 0;
}

/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/MDPOSConfirmarCotizacionPage.razor.rz.scp.css */
.sfcontainer[b-9sw3q50xr7] {
    width: 100%;
    margin-top: 0px; /* Ajusta el valor según sea necesario */
}

.grid-container[b-9sw3q50xr7] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
    width:100%;
}

/*table.table-bordered.dataTable {
    border-right-width: 0
}

    table.table-bordered.dataTable thead tr:first-child th, table.table-bordered.dataTable thead tr:first-child td {
        border-top-width: 1px
    }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-left-width: 0
    }

        table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child {
            border-left-width: 1px
        }

        table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child {
            border-right-width: 1px
        }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-bottom-width: 1px
    }

div.dataTables_scrollHead table.table-bordered {
    border-bottom-width: 0
}

table {
    margin: 0
}

.table thead {
    background: #dfdfdf28;
    border-bottom: 1px solid var(--colorBorder)
}

    .table thead th {
        font-weight: 600;
        color: var(--colorTextPrimary);
        padding: 10px;
        white-space: nowrap;
        
    }

.table th, .table td {
    text-align: start
}

.table-sm tbody td {
    padding-left: 10px;
    padding-right: 10px
}

.table td, .table:not(.table-bordered) th {
    border-top: none;
    border-bottom: 1px solid var(--colorBorder)
}

.table > :not(:last-child) > :last-child > * {
    border-bottom: 1px solid var(--colorBorder)
}

.table:not(.table-sm):not(.table-md):not(.dataTable) td, .table:not(.table-sm):not(.table-md):not(.dataTable) th {
    color: var(--colorTextPrimary);
    padding: 10px;
    vertical-align: middle
}

.table:not(.table-sm) thead th {
    border-bottom: none;
    color: var(--colorTextPrimary);
    white-space: nowrap;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: start
}

.table.table-md th, .table.table-md td {
    padding: 10px 15px
}

.table tr td {
    color: var(--colorTextPrimary)
}

.table.table-bordered tr {
    border-color: lightblue
}

.table.table-bordered td, .table.table-bordered th {
    border-color: lightblue;
    color: var(--colorTextLight)
}*/


.loading-overlay[b-9sw3q50xr7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-9sw3q50xr7] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-9sw3q50xr7 1s linear infinite;
}
@keyframes spin-b-9sw3q50xr7 {
    to {
        transform: rotate(360deg);
    }
}
.message-card[b-9sw3q50xr7] {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-left: 5px solid #007bff;
}

.card-header[b-9sw3q50xr7] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}

.card-body[b-9sw3q50xr7] {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}

.card-footer[b-9sw3q50xr7] {
    text-align: right;
}

.btn-action[b-9sw3q50xr7] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

    .btn-action:hover[b-9sw3q50xr7] {
        background-color: #0056b3;
    }
    .ndoc[b-9sw3q50xr7]{
        font-weight:600;
        color:green;
    }
.rsunatok[b-9sw3q50xr7] {
    font-weight: 600;
    color: blue;
}
.rsunaterr[b-9sw3q50xr7] {
    font-weight: 600;
    color: orangered;
}

.flex-container[b-9sw3q50xr7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-9sw3q50xr7] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-9sw3q50xr7] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-9sw3q50xr7] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-9sw3q50xr7], .textbox-wrapper[b-9sw3q50xr7] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}

/* Estilo general del invoice-wrapper */
.invoice-container[b-9sw3q50xr7] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
    background-color: #f9f9f9;
}

#invoice-wrapper[b-9sw3q50xr7] {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    word-wrap: break-word;
    text-align: left;
    width: auto;
    }


    table[b-9sw3q50xr7] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    table th[b-9sw3q50xr7],
    table td[b-9sw3q50xr7] {
        padding: 5px 5px!important;
        /*border-bottom: 1px solid #ddd;*/
        text-align: left;
        vertical-align: top;
    }

.printer-80mm table[b-9sw3q50xr7] {
    font-size: 12px;
}

    .printer-80mm table th[b-9sw3q50xr7],
    .printer-80mm table td[b-9sw3q50xr7] {
        padding: 5px 1px;
    }

    .printer-80mm table th[b-9sw3q50xr7] {
        /*border-bottom: 2px solid #000;*/
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.printer-80mm[b-9sw3q50xr7] {
    width: 80mm;
}

.texto-80mm[b-9sw3q50xr7] {
    
}

.printer-58mm[b-9sw3q50xr7]{
    width:58mm;
}

.printer-210mm[b-9sw3q50xr7] {
    width: 210mm;
}

.texto-210mm[b-9sw3q50xr7] {
    font-size: 14px;
    
}
.texto-58mm[b-9sw3q50xr7] {
    font-size: 9px;
    
}


.printer-210mm table[b-9sw3q50xr7] {
    font-size: 14px;
}

.printer-58mm table[b-9sw3q50xr7] {
    font-size: 9px;
    
}

    .printer-58mm table th[b-9sw3q50xr7],
    .printer-58mm table td[b-9sw3q50xr7] {
        padding: 5px 3px;
    }

    .printer-58mm table th[b-9sw3q50xr7] {
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.description[b-9sw3q50xr7] {
    word-wrap: break-word;
    max-width: 100%;
    font-size: 10px; 
    padding-top: 5px;
}


.invoice-title[b-9sw3q50xr7] {
    text-align: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.invoice-details[b-9sw3q50xr7] {
    display: flex;
    flex-direction: column;
    width: 100%;    
    line-height: 1.3; /* Mejor separación entre líneas */
}
    .row-80mm[b-9sw3q50xr7] {
        grid-template-columns: 100px 1fr; /* Columna fija para el título, flexible para el valor */
    }
    .row-58mm[b-9sw3q50xr7] {
        grid-template-columns: 90px 1fr; /* Columna fija para el título, flexible para el valor */
    }
    .row-210mm[b-9sw3q50xr7] {
        grid-template-columns: 110px 1fr; /* Columna fija para el título, flexible para el valor */
    }
    .invoice-details .row[b-9sw3q50xr7] {
        display: grid;        
        gap: 5px; /* Espacio entre columnas */
        margin-bottom: 3px; /* Espacio entre filas */
    }

.invoice-details .label[b-9sw3q50xr7] {
    text-align: left;
    font-weight: bold; /* Destacar los títulos */
    color: #333; /* Texto más oscuro para mejor legibilidad */
    font-family: 'Roboto';
    font-size: 14px;
}

.invoice-details .value[b-9sw3q50xr7] {
    text-align: left;
    color: #555; /* Color más claro para diferenciar del título */
    word-wrap: break-word; /* Ajustar el texto largo */
    margin-left: -25px;
    font-family: 'Roboto';
    font-size: 14px;
}

.ticket-header[b-9sw3q50xr7] {
    text-align: center;
    margin-bottom: 10px;
}

    .ticket-header h1[b-9sw3q50xr7] {
        font-size: 16px;
        margin: 0;
        font-weight: bold;
    }

    .ticket-header p[b-9sw3q50xr7] {
        margin: 2px 0;
        font-size: 12px;
    }

.divider[b-9sw3q50xr7] {
    border-top: 1px dashed black;
    margin: 10px 0;
}

.rowcabe[b-9sw3q50xr7] {
    margin: 10px;
}

.h3_1[b-9sw3q50xr7] {
    font-weight: 600;
    text-align: center;
    color: green;
}

.my-button[b-9sw3q50xr7] {
    display: inline-block;
    padding: 6px 12px; /* Espaciado interno pequeño */
    font-size: 14px; /* Tamaño de texto legible */
    line-height: 1.5; /* Altura de línea */
    color: #fff; /* Color del texto */
    background-color: #007bff; /* Azul moderno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Esquinas redondeadas */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s; /* Animación suave */
    width: 100%; /* Tamaño igual al padre */
    max-width: 120px; /* Límite máximo */
}

    /* Hover (al pasar el mouse) */
    .my-button:hover[b-9sw3q50xr7] {
        background-color: #0056b3;
    }

    /* Activo (al hacer clic) */
    .my-button:active[b-9sw3q50xr7] {
        background-color: #003f7f;
        transform: scale(0.95); /* Pequeña reducción al hacer clic */
    }

/* Tamaño responsivo */
@media (max-width: 768px) { /* Tablets y pantallas medianas */
    .my-button[b-9sw3q50xr7] {
        font-size: 12px;
        padding: 5px 10px;
    }
}

@media (max-width: 576px) { /* Teléfonos y pantallas pequeñas */
    .my-button[b-9sw3q50xr7] {
        font-size: 10px;
        padding: 4px 8px;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/MDPOSConfirmarPedidoPage.razor.rz.scp.css */
.sfcontainer[b-1vckrjxsqp] {
    width: 100%;
    margin-top: 0px; /* Ajusta el valor según sea necesario */
}

.grid-container[b-1vckrjxsqp] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
    width:100%;
}

/*table.table-bordered.dataTable {
    border-right-width: 0
}

    table.table-bordered.dataTable thead tr:first-child th, table.table-bordered.dataTable thead tr:first-child td {
        border-top-width: 1px
    }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-left-width: 0
    }

        table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child {
            border-left-width: 1px
        }

        table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child {
            border-right-width: 1px
        }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-bottom-width: 1px
    }

div.dataTables_scrollHead table.table-bordered {
    border-bottom-width: 0
}

table {
    margin: 0
}

.table thead {
    background: #dfdfdf28;
    border-bottom: 1px solid var(--colorBorder)
}

    .table thead th {
        font-weight: 600;
        color: var(--colorTextPrimary);
        padding: 10px;
        white-space: nowrap;
        
    }

.table th, .table td {
    text-align: start
}

.table-sm tbody td {
    padding-left: 10px;
    padding-right: 10px
}

.table td, .table:not(.table-bordered) th {
    border-top: none;
    border-bottom: 1px solid var(--colorBorder)
}

.table > :not(:last-child) > :last-child > * {
    border-bottom: 1px solid var(--colorBorder)
}

.table:not(.table-sm):not(.table-md):not(.dataTable) td, .table:not(.table-sm):not(.table-md):not(.dataTable) th {
    color: var(--colorTextPrimary);
    padding: 10px;
    vertical-align: middle
}

.table:not(.table-sm) thead th {
    border-bottom: none;
    color: var(--colorTextPrimary);
    white-space: nowrap;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: start
}

.table.table-md th, .table.table-md td {
    padding: 10px 15px
}

.table tr td {
    color: var(--colorTextPrimary)
}

.table.table-bordered tr {
    border-color: lightblue
}

.table.table-bordered td, .table.table-bordered th {
    border-color: lightblue;
    color: var(--colorTextLight)
}*/


.loading-overlay[b-1vckrjxsqp] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-1vckrjxsqp] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-1vckrjxsqp 1s linear infinite;
}
@keyframes spin-b-1vckrjxsqp {
    to {
        transform: rotate(360deg);
    }
}
.message-card[b-1vckrjxsqp] {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-left: 5px solid #007bff;
}

.card-header[b-1vckrjxsqp] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}

.card-body[b-1vckrjxsqp] {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}

.card-footer[b-1vckrjxsqp] {
    text-align: right;
}

.btn-action[b-1vckrjxsqp] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

    .btn-action:hover[b-1vckrjxsqp] {
        background-color: #0056b3;
    }
    .ndoc[b-1vckrjxsqp]{
        font-weight:600;
        color:green;
    }
.rsunatok[b-1vckrjxsqp] {
    font-weight: 600;
    color: blue;
}
.rsunaterr[b-1vckrjxsqp] {
    font-weight: 600;
    color: orangered;
}

.flex-container[b-1vckrjxsqp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-1vckrjxsqp] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-1vckrjxsqp] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-1vckrjxsqp] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-1vckrjxsqp], .textbox-wrapper[b-1vckrjxsqp] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}

/* Estilo general del invoice-wrapper */
.invoice-container[b-1vckrjxsqp] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
    background-color: #f9f9f9;
}

#invoice-wrapper[b-1vckrjxsqp] {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    word-wrap: break-word;
    text-align: left;
    width: auto;
    }


    table[b-1vckrjxsqp] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    table th[b-1vckrjxsqp],
    table td[b-1vckrjxsqp] {
        padding: 5px 5px!important;
        /*border-bottom: 1px solid #ddd;*/
        text-align: left;
        vertical-align: top;
    }

.printer-80mm table[b-1vckrjxsqp] {
    font-size: 12px;
}

    .printer-80mm table th[b-1vckrjxsqp],
    .printer-80mm table td[b-1vckrjxsqp] {
        padding: 5px 1px;
    }

    .printer-80mm table th[b-1vckrjxsqp] {
        /*border-bottom: 2px solid #000;*/
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.printer-80mm[b-1vckrjxsqp] {
    width: 80mm;
}

.texto-80mm[b-1vckrjxsqp] {
    
}

.printer-58mm[b-1vckrjxsqp]{
    width:58mm;
}

.printer-210mm[b-1vckrjxsqp] {
    width: 210mm;
}

.texto-210mm[b-1vckrjxsqp] {
    font-size: 14px;
    
}
.texto-58mm[b-1vckrjxsqp] {
    font-size: 9px;
    
}


.printer-210mm table[b-1vckrjxsqp] {
    font-size: 14px;
}

.printer-58mm table[b-1vckrjxsqp] {
    font-size: 9px;
    
}

    .printer-58mm table th[b-1vckrjxsqp],
    .printer-58mm table td[b-1vckrjxsqp] {
        padding: 5px 3px;
    }

    .printer-58mm table th[b-1vckrjxsqp] {
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.description[b-1vckrjxsqp] {
    word-wrap: break-word;
    max-width: 100%;
    font-size: 10px; 
    padding-top: 5px;
}


.invoice-title[b-1vckrjxsqp] {
    text-align: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.invoice-details[b-1vckrjxsqp] {
    display: flex;
    flex-direction: column;
    width: 100%;    
    line-height: 1.3; /* Mejor separación entre líneas */
}
    .row-80mm[b-1vckrjxsqp] {
        grid-template-columns: 100px 1fr; /* Columna fija para el título, flexible para el valor */
    }
    .row-58mm[b-1vckrjxsqp] {
        grid-template-columns: 90px 1fr; /* Columna fija para el título, flexible para el valor */
    }
    .row-210mm[b-1vckrjxsqp] {
        grid-template-columns: 110px 1fr; /* Columna fija para el título, flexible para el valor */
    }
    .invoice-details .row[b-1vckrjxsqp] {
        display: grid;        
        gap: 5px; /* Espacio entre columnas */
        margin-bottom: 3px; /* Espacio entre filas */
    }

.invoice-details .label[b-1vckrjxsqp] {
    text-align: left;
    font-weight: bold; /* Destacar los títulos */
    color: #333; /* Texto más oscuro para mejor legibilidad */
    font-family: 'Roboto';
    font-size: 14px;
}

.invoice-details .value[b-1vckrjxsqp] {
    text-align: left;
    color: #555; /* Color más claro para diferenciar del título */
    word-wrap: break-word; /* Ajustar el texto largo */
    margin-left: -25px;
    font-family: 'Roboto';
    font-size: 14px;
}

.ticket-header[b-1vckrjxsqp] {
    text-align: center;
    margin-bottom: 10px;
}

    .ticket-header h1[b-1vckrjxsqp] {
        font-size: 16px;
        margin: 0;
        font-weight: bold;
    }

    .ticket-header p[b-1vckrjxsqp] {
        margin: 2px 0;
        font-size: 12px;
    }

.divider[b-1vckrjxsqp] {
    border-top: 1px dashed black;
    margin: 10px 0;
}

.rowcabe[b-1vckrjxsqp] {
    margin: 10px;
}

.h3_1[b-1vckrjxsqp] {
    font-weight: 600;
    text-align: center;
    color: green;
}

.my-button[b-1vckrjxsqp] {
    display: inline-block;
    padding: 6px 12px; /* Espaciado interno pequeño */
    font-size: 14px; /* Tamaño de texto legible */
    line-height: 1.5; /* Altura de línea */
    color: #fff; /* Color del texto */
    background-color: #007bff; /* Azul moderno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Esquinas redondeadas */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s; /* Animación suave */
    width: 100%; /* Tamaño igual al padre */
    max-width: 120px; /* Límite máximo */
}

    /* Hover (al pasar el mouse) */
    .my-button:hover[b-1vckrjxsqp] {
        background-color: #0056b3;
    }

    /* Activo (al hacer clic) */
    .my-button:active[b-1vckrjxsqp] {
        background-color: #003f7f;
        transform: scale(0.95); /* Pequeña reducción al hacer clic */
    }

/* Tamaño responsivo */
@media (max-width: 768px) { /* Tablets y pantallas medianas */
    .my-button[b-1vckrjxsqp] {
        font-size: 12px;
        padding: 5px 10px;
    }
}

@media (max-width: 576px) { /* Teléfonos y pantallas pequeñas */
    .my-button[b-1vckrjxsqp] {
        font-size: 10px;
        padding: 4px 8px;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/MDPOSPaymentPage.razor.rz.scp.css */
.sfcontainer[b-16yfwwnyh6] {
    width: 100%;
    margin-top: 0px; /* Ajusta el valor según sea necesario */
}

.grid-container[b-16yfwwnyh6] {
    max-height: calc(100vh - 262px);
    overflow-y: auto;
    width:100%;
}
.rowcabe[b-16yfwwnyh6] {
    margin: 10px;
}

.h3_1[b-16yfwwnyh6] {
    font-weight: 600;
    text-align: center;
    color: green;
}
/*table.table-bordered.dataTable {
    border-right-width: 0
}

    table.table-bordered.dataTable thead tr:first-child th, table.table-bordered.dataTable thead tr:first-child td {
        border-top-width: 1px
    }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-left-width: 0
    }

        table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child {
            border-left-width: 1px
        }

        table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child {
            border-right-width: 1px
        }

    table.table-bordered.dataTable th, table.table-bordered.dataTable td {
        border-bottom-width: 1px
    }

div.dataTables_scrollHead table.table-bordered {
    border-bottom-width: 0
}

table {
    margin: 0
}

.table thead {
    background: #dfdfdf28;
    border-bottom: 1px solid var(--colorBorder)
}

    .table thead th {
        font-weight: 600;
        color: var(--colorTextPrimary);
        padding: 10px;
        white-space: nowrap;
        
    }

.table th, .table td {
    text-align: start
}

.table-sm tbody td {
    padding-left: 10px;
    padding-right: 10px
}

.table td, .table:not(.table-bordered) th {
    border-top: none;
    border-bottom: 1px solid var(--colorBorder)
}

.table > :not(:last-child) > :last-child > * {
    border-bottom: 1px solid var(--colorBorder)
}

.table:not(.table-sm):not(.table-md):not(.dataTable) td, .table:not(.table-sm):not(.table-md):not(.dataTable) th {
    color: var(--colorTextPrimary);
    padding: 10px;
    vertical-align: middle
}

.table:not(.table-sm) thead th {
    border-bottom: none;
    color: var(--colorTextPrimary);
    white-space: nowrap;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: start
}

.table.table-md th, .table.table-md td {
    padding: 10px 15px
}

.table tr td {
    color: var(--colorTextPrimary)
}

.table.table-bordered tr {
    border-color: lightblue
}

.table.table-bordered td, .table.table-bordered th {
    border-color: lightblue;
    color: var(--colorTextLight)
}*/
/*.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);*/ /* Fondo semitransparente */
    /*display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;*/ /* Asegura que el overlay esté encima de otros elementos */
/*}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}*/

.loading-overlay[b-16yfwwnyh6] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-16yfwwnyh6] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-16yfwwnyh6 1s linear infinite;
}
@keyframes spin-b-16yfwwnyh6 {
    to {
        transform: rotate(360deg);
    }
}
.message-card[b-16yfwwnyh6] {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-left: 5px solid #007bff;
}

.card-header[b-16yfwwnyh6] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}

.card-body[b-16yfwwnyh6] {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}

.card-footer[b-16yfwwnyh6] {
    text-align: right;
}

.btn-action[b-16yfwwnyh6] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

    .btn-action:hover[b-16yfwwnyh6] {
        background-color: #0056b3;
    }
    .ndoc[b-16yfwwnyh6]{
        font-weight:600;
        color:green;
    }
.rsunatok[b-16yfwwnyh6] {
    font-weight: 600;
    color: blue;
}
.rsunaterr[b-16yfwwnyh6] {
    font-weight: 600;
    color: orangered;
}

.flex-container[b-16yfwwnyh6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible */
    flex-wrap: nowrap; /* Para mantener los elementos en la misma línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Aseguramos que el ButtonGroup ocupe un tamaño adecuado */
.button-wrapper[b-16yfwwnyh6] {
    flex: 0 1 auto;
    min-width: 200px; /* Puedes ajustar este valor según sea necesario */
}

/* Aseguramos que el TextBox sea flexible y ocupe el espacio restante */
.textbox-wrapper[b-16yfwwnyh6] {
    flex: 1; /* Ocupa el espacio restante proporcionalmente */
    min-width: 150px; /* Ancho mínimo para cuando la pantalla sea pequeña */
}

/* Responsivo */
@media (max-width: 600px) {
    .flex-container[b-16yfwwnyh6] {
        flex-direction: column; /* Los elementos se apilan verticalmente en pantallas pequeñas */
    }

    .button-wrapper[b-16yfwwnyh6], .textbox-wrapper[b-16yfwwnyh6] {
        width: 100%; /* Ambos elementos ocuparán el ancho completo en pantallas pequeñas */
    }
}

/* Estilo general del invoice-wrapper */
.invoice-container[b-16yfwwnyh6] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
    background-color: #f9f9f9;
}

#invoice-wrapper[b-16yfwwnyh6] {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    word-wrap: break-word;
    text-align: left;
    width: auto;
}


table[b-16yfwwnyh6] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    table th[b-16yfwwnyh6],
    table td[b-16yfwwnyh6] {
        padding: 5px 5px !important;
        /*border-bottom: 1px solid #ddd;*/
        text-align: left;
        vertical-align: top;
    }

.printer-80mm table[b-16yfwwnyh6] {
    font-size: 12px;
}

    .printer-80mm table th[b-16yfwwnyh6],
    .printer-80mm table td[b-16yfwwnyh6] {
        padding: 5px 1px;
    }

    .printer-80mm table th[b-16yfwwnyh6] {
        /*border-bottom: 2px solid #000;*/
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.printer-80mm[b-16yfwwnyh6] {
    width: 80mm;
}

.texto-80mm[b-16yfwwnyh6] {
}

.printer-58mm[b-16yfwwnyh6] {
    width: 58mm;
}

.printer-210mm[b-16yfwwnyh6] {
    width: 210mm;
}

.texto-210mm[b-16yfwwnyh6] {
    font-size: 14px;
}

.texto-58mm[b-16yfwwnyh6] {
    font-size: 9px;
}


.printer-210mm table[b-16yfwwnyh6] {
    font-size: 14px;
}

.printer-58mm table[b-16yfwwnyh6] {
    font-size: 9px;
}

    .printer-58mm table th[b-16yfwwnyh6],
    .printer-58mm table td[b-16yfwwnyh6] {
        padding: 5px 3px;
    }

    .printer-58mm table th[b-16yfwwnyh6] {
        border-bottom: 1px dashed black;
        border-top: 1px dashed black;
        margin: 10px 0;
    }


.description[b-16yfwwnyh6] {
    word-wrap: break-word;
    max-width: 100%;
    font-size: 10px;
    padding-top: 5px;
}


.invoice-title[b-16yfwwnyh6] {
    text-align: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.invoice-details[b-16yfwwnyh6] {
    display: flex;
    flex-direction: column;
    width: 100%;
    line-height: 1.3; /* Mejor separación entre líneas */
}

.row-80mm[b-16yfwwnyh6] {
    grid-template-columns: 100px 1fr; /* Columna fija para el título, flexible para el valor */
}

.row-58mm[b-16yfwwnyh6] {
    grid-template-columns: 90px 1fr; /* Columna fija para el título, flexible para el valor */
}

.row-210mm[b-16yfwwnyh6] {
    grid-template-columns: 110px 1fr; /* Columna fija para el título, flexible para el valor */
}

.invoice-details .row[b-16yfwwnyh6] {
    display: grid;
    gap: 5px; /* Espacio entre columnas */
    margin-bottom: 3px; /* Espacio entre filas */
}

.invoice-details .label[b-16yfwwnyh6] {
    text-align: left;
    font-weight: bold; /* Destacar los títulos */
    color: #333; /* Texto más oscuro para mejor legibilidad */
    font-family: 'Roboto';
    font-size: 14px;
}

.invoice-details .value[b-16yfwwnyh6] {
    text-align: left;
    color: #555; /* Color más claro para diferenciar del título */
    word-wrap: break-word; /* Ajustar el texto largo */
    margin-left: -25px;
    font-family: 'Roboto';
    font-size: 14px;
}

.ticket-header[b-16yfwwnyh6] {
    text-align: center;
    margin-bottom: 10px;
}

    .ticket-header h1[b-16yfwwnyh6] {
        font-size: 16px;
        margin: 0;
        font-weight: bold;
    }

    .ticket-header p[b-16yfwwnyh6] {
        margin: 2px 0;
        font-size: 12px;
    }

.divider[b-16yfwwnyh6] {
    border-top: 1px dashed black;
    margin: 10px 0;
}

/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/Modals/MDSeleccionarListaPreciosPage.razor.rz.scp.css */
.grid-container[b-9la3g4fym5] {
    /*max-height: calc(100vh - 160px);*/
    overflow-y: auto;
    margin-top: 5px;
    /*height: calc(100vh - 160px);*/
    width: 100%;
    height: calc(100vh - 28rem);
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    /*align-items: center;*/ /* Centrar verticalmente */
}

.form-row[b-9la3g4fym5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    width: 100%;
    margin-bottom: 2px;
}

.pos-toolbar[b-9la3g4fym5] {
    background-color: transparent;
    color: white;
}
/* El TextBox ocupa el espacio disponible en la fila */
.custom-textbox[b-9la3g4fym5] {
    flex-grow: 1;
}

/* El botón ocupa su tamaño natural pero se ajusta */
.custom-button[b-9la3g4fym5] {
    flex-shrink: 0;
}

/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
/*@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-textbox,
    .custom-button {
        width: 100%;
    }
}*/
.page-header[b-9la3g4fym5] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0px;
    border-left: 3px solid #b6ff00;
    border-radius: 5px;
    box-shadow: 0 4px 25px #00000005;
}

    .page-header .page-block[b-9la3g4fym5] {
        width: 100%;
    }

    .page-header .page-header-title[b-9la3g4fym5] {
        display: block;
    }

    .page-header h4[b-9la3g4fym5], .page-header .h4[b-9la3g4fym5] {
        margin-top: 5px;
        margin-bottom: 2px;
        margin-right: 8px;
        padding-right: 8px;
        font-weight: 500;
        font-size: 18px;
        color: var(--colorTextPrimary);
    }

    .page-header .breadcrumb[b-9la3g4fym5] {
        padding: 0;
        display: inline-flex;
        margin-bottom: 0;
        background: transparent;
        font-size: 13px;
    }

.card[b-9la3g4fym5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cart-product-box .horizontal-product-details .trash-button[b-9la3g4fym5] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-9la3g4fym5] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-9la3g4fym5] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-9la3g4fym5] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.card-content[b-9la3g4fym5] {
    display: contents !important;
}

.info[b-9la3g4fym5] {
    flex-grow: 1;
}

    .info h5[b-9la3g4fym5] {
        margin: 0px;
        font-size: 15px;
        color: #333;
        font-style: oblique;
    }

    .info h4[b-9la3g4fym5] {
        margin: 0px;
        font-size: 14px;
        color: blue;
    }

    .info p[b-9la3g4fym5] {
        margin: 2px 0;
        font-size: 14px;
        color: #555;
    }

.actions[b-9la3g4fym5] {
    display: flex;
    gap: 10px;
    /*margin-left:140px;*/
}

    .actions .btn:hover[b-9la3g4fym5] {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .actions .btn[b-9la3g4fym5] {
        border: none;
        background: none;
        cursor: pointer;
        font-size: 18px;
    }

        .actions .btn.view[b-9la3g4fym5] {
            color: #007bff;
        }

        .actions .btn.edit[b-9la3g4fym5] {
            color: #ffc107;
        }

        .actions .btn.delete[b-9la3g4fym5] {
            color: #dc3545;
        }

.producto-linea2[b-9la3g4fym5] {
    display: flex;
    align-items: center;
    justify-content: start;
}

/*@media (max-width: 574px) {
    .producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: start;
    }
}*/


.botones-producto-linea2[b-9la3g4fym5] {
    display: flex;
    align-items: center;
    justify-content: end;
}

/*@media (max-width: 574px) {
    .botones-producto-linea2 {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}*/
/* Contenedor principal del ListView */
/*.responsive-listview {
    max-width: 500px;
    margin: auto;    
    border-radius: 2px;*/
/*height: 470px;*/
/*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}*/

/* Estilo general de los ítems (cards) */
/*.list-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: lightgray;
    opacity: 0.7;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    margin-left: 10px;
    margin-block: 10px;
    margin-bottom: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f0f0f0;
    overflow: visible;
}*/

/* Efecto al pasar el cursor por encima */
/*.list-item:hover {
        transform: translateY(-5px);*/
/*box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);*/
/*}*/

/* Contenido de los ítems */
/*.item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;*/ /* Espaciado entre líneas */
/*}

    .item-content h4 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        color: blue;
    }

    .item-content p {
        font-size: 14px;
        margin: 0;
        color: black;
        word-wrap: break-word;*/ /* Asegura que el texto largo se ajuste al ancho */
/*}*/
.horizontal-product-list[b-9la3g4fym5] {
    display: contents;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px
}

    .horizontal-product-list > li[b-9la3g4fym5] {
        display: block;
        width: 100%;
        margin: 1px;
    }

.horizontal-product-box[b-9la3g4fym5] {
    background: var(--colorSurface);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    gap: 5px
}

.cart-product-box[b-9la3g4fym5] {
    background: var(--colorSurface);
    border-radius: 4px;
    display: flex;
    background-color: whitesmoke;
    border-color: lightgreen;
    border-width: 1px;
    gap: 10px
}

    .cart-product-box .horizontal-product-img[b-9la3g4fym5] {
        width: 88px;
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--colorBackground);
        border-radius: 8px;
        padding: 12px 20px
    }

.horizontal-product-box .horizontal-product-img[b-9la3g4fym5] {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px
}

.cart-product-box .horizontal-product-details[b-9la3g4fym5] {
    width: calc(100% - 98px)
}

.horizontal-product-box .horizontal-product-details[b-9la3g4fym5] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cart-product-box .horizontal-product-details .product-title[b-9la3g4fym5] {
    font-size: 1.2em;
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
}

.cart-product-box .horizontal-product-details .product-info[b-9la3g4fym5] {
    display: flex;
    padding: 0;
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1.2em;
    position: relative;
    color: green;
}



.product-title2[b-9la3g4fym5] {
    display: flex;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 0.9em;
    font-weight: 500;
    position: relative;
}

.product-info[b-9la3g4fym5] {
    display: flex;
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 0.9em;
    position: relative;
    color: green;
}

.cart-product-box .horizontal-product-details .product-price[b-9la3g4fym5] {
    font-size: 15px
}

.cart-product-box .horizontal-product-details .trash-button[b-9la3g4fym5] {
    outline: none;
    border: none;
    background: transparent
}

    .cart-product-box .horizontal-product-details .trash-button i[b-9la3g4fym5] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.trash-btn[b-9la3g4fym5] {
    outline: none;
    border: none;
    background: transparent
}

    .trash-btn i[b-9la3g4fym5] {
        font-size: 18px;
        color: red;
        cursor: pointer
    }

.spanstyle[b-9la3g4fym5] {
    font-size: 1.1em !important;
}

.spanstylecolor[b-9la3g4fym5] {
    font-size: 1.1em !important;
    color: blue;
}

.rowcabe[b-9la3g4fym5] {
    margin: 10px;
}

.h3_1[b-9la3g4fym5] {
    font-weight: 400;
    text-align: center;
    color: green;
}

.h2_1[b-9la3g4fym5] {
    font-weight: 400;
    text-align: center;
    color: dodgerblue;
    word-wrap: break-word;
}
/* Diseño responsivo: En pantallas más pequeñas, los elementos se ajustan */
@media (max-width: 480px) {
    .h2_1[b-9la3g4fym5] {
        word-wrap: break-word;
    }

    .cart-product-box .horizontal-product-details .product-title[b-9la3g4fym5] {
        font-size: 0.8em !important; /* Ajusta para pantallas pequeñas */
        font-weight: 600;
        font-style: italic;
        margin-top: 1px;
    }

    .cart-product-box .horizontal-product-details .product-info[b-9la3g4fym5] {
        display: flex;
        padding: 0;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 0.8em; /* Ajusta para pantallas pequeñas */
        position: relative;
        color: green;
        word-wrap: break-word;
    }

    .product-title2[b-9la3g4fym5] {
        display: flex;
        font-style: italic;
        margin-top: 5px;
        margin-bottom: 0px;
        font-size: 0.8em;
        font-weight: 500;
        position: relative;
    }

    .product-info[b-9la3g4fym5] {
        display: flex;
        font-style: italic;
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 0.8em;
        position: relative;
        color: green;
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .spanstyle[b-9la3g4fym5] {
        font-size: 0.8em !important;
    }

    .spanstylecolor[b-9la3g4fym5] {
        font-size: 0.8em !important;
        color: blue;
    }
}

.styletotal[b-9la3g4fym5] {
    background-color: white;
    margin-top: 10px;
    padding: 10px;
    color: navy;
    border-style: ridge;
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/Modals/MDSeleccionarPrecioComandaPage.razor.rz.scp.css */
/* Contenedor principal del encabezado de confirmación */
.product-confirm-header[b-fdibwbodu2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background-color: #f8f9fa; /* Color de fondo muy suave */
    border-bottom: 2px solid #e9ecef; /* Separador sutil */
    border-radius: 8px 8px 0 0; /* Bordes redondeados solo arriba */
}

/* Subtítulo de "CONFIRMAR" */
.header-subtitle[b-fdibwbodu2] {
    font-size: 1rem;
    font-weight: 600;
    color: #007bff; /* Un azul vibrante para el acento */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
}

/* Título principal con la descripción del producto */
.header-title[b-fdibwbodu2] {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* Tamaño responsivo */
    font-weight: 700;
    color: #212529; /* Negro para alto contraste */
    margin: 0.5rem 0;
    /* Configuración para el texto a dos líneas y con puntos suspensivos */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estilos para el bloque de precio */
.header-details[b-fdibwbodu2] {
    margin-top: 1rem;
}

.price-info[b-fdibwbodu2] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #495057; /* Gris oscuro para legibilidad */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    /* Estilos para el icono de dinero */
    .price-info .fas[b-fdibwbodu2] {
        color: #28a745; /* Verde para un color que simbolice dinero */
    }

.numeric-inputs-wrapper[b-fdibwbodu2] {
    display: flex;
    justify-content: center; /* Centra horizontalmente los elementos hijos */
    align-items: center; /* Centra verticalmente los elementos hijos */
    gap: 1rem; /* Agrega espacio entre los campos de texto */
    padding: 1rem;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

/*
   Ajustes para que cada campo de texto tenga un ancho flexible.
*/
.e-numerictextbox[b-fdibwbodu2] {
    flex-basis: 200px; /* Ancho base de 200px para cada campo */
    flex-grow: 1; /* Permite que cada campo crezca para llenar el espacio */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/Modals/MDSeleccionarPrecioPage.razor.rz.scp.css */
/* Contenedor principal del encabezado de confirmación */
.product-confirm-header[b-wikpy0rdt0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background-color: #f8f9fa; /* Color de fondo muy suave */
    border-bottom: 2px solid #e9ecef; /* Separador sutil */
    border-radius: 8px 8px 0 0; /* Bordes redondeados solo arriba */
}

/* Subtítulo de "CONFIRMAR" */
.header-subtitle[b-wikpy0rdt0] {
    font-size: 1rem;
    font-weight: 600;
    color: #007bff; /* Un azul vibrante para el acento */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
}

/* Título principal con la descripción del producto */
.header-title[b-wikpy0rdt0] {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* Tamaño responsivo */
    font-weight: 700;
    color: #212529; /* Negro para alto contraste */
    margin: 0.5rem 0;
    /* Configuración para el texto a dos líneas y con puntos suspensivos */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estilos para el bloque de precio */
.header-details[b-wikpy0rdt0] {
    margin-top: 1rem;
}

.price-info[b-wikpy0rdt0] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #495057; /* Gris oscuro para legibilidad */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    /* Estilos para el icono de dinero */
    .price-info .fas[b-wikpy0rdt0] {
        color: #28a745; /* Verde para un color que simbolice dinero */
    }

.numeric-inputs-wrapper[b-wikpy0rdt0] {
    display: flex;
    justify-content: center; /* Centra horizontalmente los elementos hijos */
    align-items: center; /* Centra verticalmente los elementos hijos */
    gap: 1rem; /* Agrega espacio entre los campos de texto */
    padding: 1rem;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

/*
   Ajustes para que cada campo de texto tenga un ancho flexible.
*/
.e-numerictextbox[b-wikpy0rdt0] {
    flex-basis: 200px; /* Ancho base de 200px para cada campo */
    flex-grow: 1; /* Permite que cada campo crezca para llenar el espacio */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/Modals/MDSeleccionarPresentacionPage.razor.rz.scp.css */
/*
   Contenedor principal para organizar la vista
*/
/*.grid-container {
    display: flex;
    flex-direction: column;
    height: 100%;*/ /* Ocupa todo el alto disponible de su contenedor padre */
/*}*/
.grid-container[b-v322m661yv] {
    padding: 1rem;
    background-color: #f5f5f5; /* Un gris muy claro para diferenciar el contenido */
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra interna sutil */
}
/*
   Contenedor de la lista para el control de altura y scroll
*/
.listview-container[b-v322m661yv] {
    flex: 1; /* Permite que el contenedor de la lista crezca y ocupe el espacio restante */
    overflow-y: auto; /* Habilita el scroll vertical cuando la lista excede su altura */
}

/*
   Ajustes para el SfListView
*/
.listview-template[b-v322m661yv] {
    height: 100%;
}
    .listview-template .e-list-item[b-v322m661yv] {
        padding: 0;
    }
/*
   Contenedor de inputs fijos en la parte inferior
*/
.input-container[b-v322m661yv] {
    display: flex;
    flex-wrap: wrap; /* Los inputs se moverán a la siguiente línea si no hay espacio */
    gap: 10px;
    padding: 15px;
    background-color: #f8f9fa; /* Fondo para diferenciarlo del resto del contenido */
    border-top: 1px solid #e9ecef; /* Borde superior para separación visual */
    /*
      Estas reglas evitan que el contenedor se desplace,
      manteniéndolo fijo en la parte inferior.
    */
    position: sticky;
    bottom: 0;
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding no cause desbordamiento */
}

    /*
   Estilos para los inputs dentro del contenedor
*/
    .input-container .responsive-input[b-v322m661yv],
    .input-container .responsive-numeric[b-v322m661yv] {
        flex: 1 1 200px; /* Permite que los inputs se ajusten y crezcan */
        min-width: 150px;
    }

/*
   Alineación de elementos de la tarjeta
*/
.card[b-v322m661yv] {
    border: 1px solid #e0e7ee;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.horizontal-product-box[b-v322m661yv] {
    display: flex;
    flex-direction: column;
}

.horizontal-product-details[b-v322m661yv] {
    flex: 1;
}

.product-info[b-v322m661yv] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.producto-linea2[b-v322m661yv], .botones-producto-linea2[b-v322m661yv] {
    font-size: 0.9rem;
    color: #666;
}

.spanstyle[b-v322m661yv] {
    font-weight: bold;
    color: #007bff; /* Azul para el factor y el precio */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/Modals/MDSeleccionarTallajePage.razor.rz.scp.css */
.products-block[b-qnxqapem6y] {
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
    height: 420px;
}



    .products-block .product-single[b-qnxqapem6y] {
        cursor: pointer;
        position: relative;
        width: calc(26.66% - 50px);
        height: 155px;
        border: 1px solid lightgreen;
        border-radius: 2px;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
@media (max-width: 1399px) {
    .products-block .product-single[b-qnxqapem6y] {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20% - 12px) !important
    }
}

@media (max-width: 1199px) {
    .products-block .product-single[b-qnxqapem6y] {
        width: calc(25% - 12px) !important
    }
}

@media (max-width: 991px) {
    .products-block .product-single[b-qnxqapem6y] {
        width: calc(32.66% - 12px) !important
    }
}

@media (max-width: 767px) {
    .products-block .product-single[b-qnxqapem6y] {
        width: calc(25% - 12px) !important
    }
}

@media (max-width: 575px) {
    .products-block .product-single[b-qnxqapem6y] {
        width: calc(25% - 12px) !important
    }
}

@media (max-width: 480px) {
    .products-block .product-single[b-qnxqapem6y] {
        width: calc(47.33% - 12px) !important
    }
}

@media (max-width: 374px) {
    .products-block .product-single[b-qnxqapem6y] {
        width: calc(47.33% - 12px) !important
    }
}
        /*@media (max-width: 1399px) {
    .products-block .product-single {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20% - 12px) !important
    }
}

@media (max-width: 1199px) {
    .products-block .product-single {
        width: calc(25% - 12px) !important
    }
}

@media (max-width: 991px) {
    .products-block .product-single {
        width: calc(45.66% - 12px) !important
    }
}

@media (max-width: 767px) {
    .products-block .product-single {
        width: calc(45% - 12px) !important
    }
}

@media (max-width: 575px) {
    .products-block .product-single {
        width: calc(45% - 12px) !important
    }
}

@media (max-width: 480px) {*/ /*movil*/
        /*.products-block .product-single {
        width: calc(43.33% - 12px) !important
    }
}

@media (max-width: 374px) {
    .products-block .product-single {
        width: calc(50% - 12px) !important
    }
}*/

        .products-block .product-single:hover[b-qnxqapem6y] {
            /*background-color: var(--colorSurface);*/
            transform: scale(1.05); /* Escalar la tarjeta ligeramente en hover */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añadir sombra más pronunciada en hover */
        }
/* Contenedor de la imagen */
.product-image-container[b-qnxqapem6y] {
    position: relative;
    padding: 10px;
    display: flex;
    background-color: white;
    justify-content: center;
    align-items: center;
    height: 80px; /* Altura fija para que todas las imágenes tengan el mismo tamaño */
}

.badge-left[b-qnxqapem6y] {
    position: absolute;
    top: 1px;
    left: 1px;
    /*background-color: #ff5733;*/ /* Color del badge */
    background-color: blue;
    color: #fff;
    opacity: 0.70;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.8em;
    font-weight: bold;
}

.badge-right[b-qnxqapem6y] {
    display: block;
    background-color: transparent; /* Color del badge */
    color: green;
    padding: 4px 1px;
    margin-top: 5px;
    border-radius: 2px;
    font-size: 1.0em;
    font-weight: bold;
}

.products-block .product-single .image[b-qnxqapem6y] {
    /*  height: 50px !important;
max-height: 100px !important;
object-fit: contain;
width: 50% !important;
border-top-left-radius: .625rem;
border-top-right-radius: .625rem;*/
    /*width: 60%;
    height: 60%;
    padding: 10px 10px;*/
    height: 90%;
    width: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    border-radius: 1px;
}

.product-info[b-qnxqapem6y] {
    padding: 1px;
    position: relative;
}

.products-block .product-single .product-title[b-qnxqapem6y] {
    /*font-size: 0.7em;
    margin: 1px 0;
    background-color: rgba(0, 0, 0, 0.7);*/ /* Fondo semitransparente */
    /*color: white;
    padding: 5px;
    border-radius: 5px;
    overflow: hidden;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap:normal;
    max-height:50%;*/
    font-size: 0.8em;
    margin: 10px 0;
    /*background-color: rgba(0, 0, 0, 0.7);*/ /* Fondo semitransparente */
    background-color: lightseagreen; /* Fondo semitransparente */

    color: white;
    padding: 5px;
    border-radius: 2px;
    display: -webkit-box; /* Necesario para el uso de line-clamp */
    -webkit-line-clamp: 2; /* Limita a 2 líneas */
    -webkit-box-orient: vertical; /* Define la orientación del recorte de texto */
    overflow: hidden; /* Oculta el texto que sobrepasa el límite */
    text-overflow: ellipsis; /* Muestra puntos suspensivos (...) si el texto se desborda */
    /*
    
    font-size: 9px;*/
    /*
    margin: 0 0;
    align-content: center;
    vertical-align: central;
    word-wrap: normal;*/
}

@media (max-width: 1199px) {
    .products-block .product-single .product-title[b-qnxqapem6y] {
        font-size: 0.8em !important;
        margin-bottom: 4px
        /*font-size: 0.7em;
        margin: 0 0;
        align-content: center;
        vertical-align: central;        
        word-wrap: normal;*/
    }
}

/* Estilos para el contenedor de la tarjeta */
/*.item-card {
    display: flex;    
    flex-direction:column;    
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 5px;
    margin: 15px;    
    background-color: #ffffff;
    height:70px;
    cursor: pointer;
}*/

/* Estilos para la imagen */
/*.item-image img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
}*/

/* Detalles del producto */
/*.item-details {
    padding: 15px 0;
    text-align: center;
}*/

/* Título del producto */
/*.item-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1px;
}*/

/* Precio del producto */
/*.item-price {
    font-size: 0.9rem;
    color: #388E3C;
    font-weight: 600;
}*/

/* Efecto hover para la tarjeta */
/*.item-card:hover {
    transform: scale(1.09);*/ /* Escalar la tarjeta ligeramente en hover */
/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/ /* Añadir sombra más pronunciada en hover */
/*}*/

/* Ajustes para pantallas pequeñas */
/*@media (min-width: 768px) {
    .item-card {
        flex-direction: row;
        align-items: center;
    }

    .item-image img {
        width: 60px;
        height: 60px;
    }

    .item-details {
        text-align: left;
        padding-top:25px;
        padding-left: 20px;
    }
}
*/
a[b-qnxqapem6y], a:hover[b-qnxqapem6y], .highcontrast #dialog a[b-qnxqapem6y], .highcontrast #dialog a:hover[b-qnxqapem6y] {
    color: inherit;
    text-decoration: none;
}

.e-btn-icon.e-icons.e-circle-check.e-icon-left[b-qnxqapem6y]:before {
    content: '\e7ff';
}

.e-btn-icon.e-icons.e-close.e-icon-left[b-qnxqapem6y]:before {
    content: '\e825';
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/Modals/MDVerDetalleProductoPage.razor.rz.scp.css */


/*
   Contenedor principal para el encabezado del producto
   Usa Flexbox para organizar los elementos horizontalmente
*/
.product-info-header[b-vmumzz3llp] {
    display: flex;
    flex-direction: column; /* Apila los elementos en móvil */
    gap: 1rem;
    padding: 1rem;
    background-color: #f8f9fa; /* Fondo suave para destacar */
    border-bottom: 1px solid #e9ecef;
}

/*
   Alinea los detalles del producto en pantallas más grandes
*/
@media (min-width: 576px) {
    .product-info-header[b-vmumzz3llp] {
        flex-direction: row; /* En escritorios, los elementos se alinean en una fila */
        align-items: center;
        justify-content: space-between;
    }
}

/*
   Estilos para el título del producto
*/
.product-title-full[b-vmumzz3llp] {
    font-size: clamp(1rem, 2vw, 1.5rem); /* Tamaño de fuente adaptable */
    font-weight: 700;
    color: #343a40; /* Gris oscuro para alta legibilidad */
    margin: 0;
    /* Configuración para limitar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
   Estilos para los contenedores de los iconos y texto
*/
.header-details[b-vmumzz3llp] {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se muevan a la siguiente línea */
    gap: 1rem;
    align-items: center;
}

.header-info[b-vmumzz3llp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d; /* Color de texto gris */
}

    .header-info h4[b-vmumzz3llp] {
        margin: 0;
        font-size: 1rem;
        font-weight: 500;
    }

    /*
   Estilos para los iconos
*/
    .header-info i[b-vmumzz3llp] {
        color: #007bff; /* Un azul vibrante para los iconos */
        font-size: 1.25rem;
    }

/*
   Contenedor de la lista principal
*/
.grid-container[b-vmumzz3llp] {
    padding: 1rem;
    background-color: #f5f5f5; /* Un gris muy claro para diferenciar el contenido */
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra interna sutil */
}

/*
   Contenedor de cada item de la lista (tarjeta de inventario)
*/
.listview-template .e-list-item[b-vmumzz3llp] {
    padding: 0;
}

.card[b-vmumzz3llp] {
    border: none; /* Elimina el borde de la tarjeta por defecto */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave para un efecto flotante */
    background-color: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .card:hover[b-vmumzz3llp] {
        transform: translateY(-3px); /* Efecto de levantamiento al pasar el cursor */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

.card-content[b-vmumzz3llp] {
    padding: 1rem;
}

/*
   Lista horizontal de productos
*/
.horizontal-product-list[b-vmumzz3llp] {
    list-style: none; /* Elimina viñetas */
    padding: 0;
    margin: 0;
}

.cart-product-box[b-vmumzz3llp] {
    padding: 0.5rem 0;
}

/*
   Contenedor de los detalles del producto
*/
.horizontal-product-box[b-vmumzz3llp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/*
   Título principal del producto
*/
.horizontal-product-details h4[b-vmumzz3llp] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50; /* Un color oscuro para alta legibilidad */
    margin: 0;
    line-height: 1.2;
}

/*
   Línea de stock
*/
.producto-linea2[b-vmumzz3llp] {
    font-size: 0.9rem;
    color: #7f8c8d; /* Color gris para el texto secundario */
}

    .producto-linea2 .spanstyle[b-vmumzz3llp] {
        font-weight: 700;
        color: #27ae60; /* Verde para el stock, indica disponibilidad */
    }

/*
   Alineación de elementos para pantallas pequeñas
*/
.d-flex[b-vmumzz3llp] {
    display: flex;
}

.align-items-center[b-vmumzz3llp] {
    align-items: center;
}

.gap-2[b-vmumzz3llp] {
    gap: 0.5rem;
}

.justify-content-between[b-vmumzz3llp] {
    justify-content: space-between;
}

.justify-content-start[b-vmumzz3llp] {
    justify-content: flex-start;
}

.list-view-custom-header .e-listview-header[b-vmumzz3llp] {
    padding: 10px 15px; /* Ejemplo de padding: 10px arriba/abajo y 15px a los lados */
    /* o puedes usar margin si es necesario */
    /* margin-bottom: 5px; */
    border-bottom: 2px solid #ccc; /* Agrega una línea para separar el título */
    background-color: #f8f9fa; /* Color de fondo sutil para el encabezado */
    font-weight: bold; /* Hace el texto del título más notable */
}
/* _content/Vantastic.Mono.Web.Blazor/Pages/Ventas/POS/Modals/MDVerTotalesPage.razor.rz.scp.css */
/* Table styling */

table.table-bordered.dataTable[b-f73dezttg4] {
    border-right-width: 0
}

    table.table-bordered.dataTable thead tr:first-child th[b-f73dezttg4], table.table-bordered.dataTable thead tr:first-child td[b-f73dezttg4] {
        border-top-width: 1px
    }

    table.table-bordered.dataTable th[b-f73dezttg4], table.table-bordered.dataTable td[b-f73dezttg4] {
        border-left-width: 0
    }

        table.table-bordered.dataTable th:first-child[b-f73dezttg4], table.table-bordered.dataTable td:first-child[b-f73dezttg4] {
            border-left-width: 1px
        }

        table.table-bordered.dataTable th:last-child[b-f73dezttg4], table.table-bordered.dataTable td:last-child[b-f73dezttg4] {
            border-right-width: 1px
        }

    table.table-bordered.dataTable th[b-f73dezttg4], table.table-bordered.dataTable td[b-f73dezttg4] {
        border-bottom-width: 1px
    }

div.dataTables_scrollHead table.table-bordered[b-f73dezttg4] {
    border-bottom-width: 0
}

table[b-f73dezttg4] {
    margin: 0
}

.table thead[b-f73dezttg4] {
    background: #dfdfdf28;
    border-bottom: 1px solid var(--colorBorder)
}

    .table thead th[b-f73dezttg4] {
        font-weight: 600;
        color: var(--colorTextPrimary);
        padding: 10px;
        white-space: nowrap;
    }

.table th[b-f73dezttg4], .table td[b-f73dezttg4] {
    text-align: start
}

.table-sm tbody td[b-f73dezttg4] {
    padding-left: 10px;
    padding-right: 10px
}

.table td[b-f73dezttg4], .table:not(.table-bordered) th[b-f73dezttg4] {
    border-top: none;
    border-bottom: 1px solid var(--colorBorder)
}

.table > :not(:last-child) > :last-child > *[b-f73dezttg4] {
    border-bottom: 1px solid var(--colorBorder)
}

.table:not(.table-sm):not(.table-md):not(.dataTable) td[b-f73dezttg4], .table:not(.table-sm):not(.table-md):not(.dataTable) th[b-f73dezttg4] {
    color: var(--colorTextPrimary);
    padding: 10px;
    vertical-align: middle
}

.table:not(.table-sm) thead th[b-f73dezttg4] {
    border-bottom: none;
    color: var(--colorTextPrimary);
    white-space: nowrap;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: start
}

.table.table-md th[b-f73dezttg4], .table.table-md td[b-f73dezttg4] {
    padding: 10px 15px
}

.table tr td[b-f73dezttg4] {
    color: var(--colorTextPrimary)
}

.table.table-bordered tr[b-f73dezttg4] {
    border-color: lightblue
}

.table.table-bordered td[b-f73dezttg4], .table.table-bordered th[b-f73dezttg4] {
    border-color: lightblue;
    color: var(--colorTextLight)
}

.loading-overlay[b-f73dezttg4] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que el overlay esté encima de otros elementos */
}

.loading-spinner[b-f73dezttg4] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-f73dezttg4 1s linear infinite;
}
@keyframes spin-b-f73dezttg4 {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Shared/MainLayout.razor.rz.scp.css */
.page[b-ck3aulpzoj] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.topnav[b-ck3aulpzoj] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-toggler[b-ck3aulpzoj] {
    background-color: #05163C;
}

.navbar-dark .navbar-toggler[b-ck3aulpzoj] {
    color: transparent;
    border-color: transparent;
}

.navbar-brand[b-ck3aulpzoj] {
    font-size: 1.1rem;
    margin-right: 24px;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ck3aulpzoj] {
        display: block;
    }

    .collapse[b-ck3aulpzoj] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

.main[b-ck3aulpzoj] {
    flex: 1;
}

.sidebar[b-ck3aulpzoj] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ck3aulpzoj] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items:flex-start;
}

    .top-row[b-ck3aulpzoj]  a, .top-row .btn-link[b-ck3aulpzoj] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

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

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-ck3aulpzoj] {
        display: none;
    }

    .top-row.auth[b-ck3aulpzoj] {
        justify-content: space-between;
    }

    .top-row a[b-ck3aulpzoj], .top-row .btn-link[b-ck3aulpzoj] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ck3aulpzoj] {
        flex-direction: row;
    }

    .sidebar[b-ck3aulpzoj] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ck3aulpzoj] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-ck3aulpzoj] {
        padding-left: 1rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/Vantastic.Mono.Web.Blazor/Shared/NavMenu.razor.rz.scp.css */


.oi[b-zi4taopcz3] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-zi4taopcz3] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-zi4taopcz3] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-zi4taopcz3] {
        padding-bottom: 1rem;
    }

    .nav-item[b-zi4taopcz3]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item[b-zi4taopcz3]  a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }

        .nav-item[b-zi4taopcz3]  a:hover {
            background-color: lightgray;
            color: white;
        }

/*.modulo-icono {
    width: 28px;*/  /*Ajusta el ancho del icono*/ 
    /*height: 28px;*/  /*Ajusta el alto del icono */    
    /*vertical-align: middle;*/  /*Alinea la imagen con el texto */
    /*padding:1px;
    margin:5px;
}
.header-contenido {
    display:flex;
    align-items: center;*/  /*Alinear verticalmente el icono con el texto */
/*}
.accordion-modulo {
    margin-bottom: 15px;  
}

    .accordion-modulo ul {
        list-style-type: none;
        padding-left: 10px;
    }

    .accordion-modulo li {
        margin-bottom: 5px;  
    }

    .fondo{
        background-color:seagreen;
    }*/

/*To display border for the tree*/
[b-zi4taopcz3] .e-treeview {    
    overflow: hidden;
    margin-top:0px;
    margin-left:10px;
    height: calc(100vh - 60px) !important;
    overflow-y: auto;
    
}

[b-zi4taopcz3] .e-treeview .e-ul {
    margin: 0px;
    padding: 0 0 0 25px;
    overflow:hidden;
}

/* To change the background color for the first level nodes*/
/*::deep .e-treeview .e-list-item.e-level-1 > .e-fullrow, .accordiontree .e-list-item.e-level-1.e-active > .e-fullrow, .accordiontree .e-list-item.e-level-1.e-hover > .e-fullrow, .accordiontree .e-list-item.e-level-1 > .e-fullrow, .accordiontree .e-list-item.e-level-1.e-active.e-hover > .e-fullrow {
    background-color: darkslateblue;
    border-color: darkslateblue;
}*/

/*To change the text color for the first level nodes*/
[b-zi4taopcz3] .e-treeview .e-list-item.e-level-1 > .e-text-content .e-list-text, .accordiontree .e-list-item.e-level-1.e-active > .e-text-content .e-list-text[b-zi4taopcz3], .accordiontree .e-list-item.e-level-1.e-hover > .e-text-content .e-list-text[b-zi4taopcz3], .accordiontree .e-list-item.e-level-1.e-active.e-hover > .e-text-content .e-list-text[b-zi4taopcz3] {
    color: darkblue;
    font-size: 13px;
    
   
}
/*::deep .scroller {

    background-color: #e8f5e9 !important;*/*/[b-zi4taopcz3] /* Cambia esto al color que desees */
    /*background-image: none !important;*/ /* Elimina cualquier degradado */
    /*box-shadow: none !important;*/ /* Elimina las sombras si las hay */
/*}*/

/*To hide the expand and collapse icon*/

 .separator {
    border: 1px solid #b7b3b3;
    
    width: 272px;
    margin: 1rem;
    margin-top: 0px;
}
[b-zi4taopcz3] .displayText{
    color:darkblue;
    margin-left:7px;
}

[b-zi4taopcz3] .e-treeview .e-list-item .e-text-content,
.e-btn[b-zi4taopcz3] {
    transition: all 0.3s ease-in-out; /* Suave transici�n para interacciones */
}

/*::deep .e-treeview .e-list-item .e-list-text {
    color: #2e7d32;*/ /* Cambia el color del texto del TreeView */
/*}*/
/*::deep .e-treeview .e-list-item:hover .e-text-content {
    background-color: #a5d6a7;*/ /* Fondo verde suave al pasar el cursor sobre los items */
    /*border-radius: 5px;*/ /* Esquinas redondeadas para un dise�o m�s suave */
/*}*/

/*::deep .e-treeview .e-icons {
    color: #4caf50;*/ /* Color verde para los iconos */
/*}*/

/*To change the background color for the second level nodes*/

/*::deep .e-treeview .e-list-item.e-level-2 > .e-fullrow, .accordiontree .e-list-item.e-level-2.e-active > .e-fullrow, .accordiontree .e-list-item.e-level-2.e-hover > .e-fullrow, .accordiontree .e-list-item.e-level-2 > .e-fullrow, .accordiontree .e-list-item.e-level-2.e-active.e-hover > .e-fullrow {
    background-color: white;
    border-color: white;   
}*/
[b-zi4taopcz3] .e-treeview .e-list-text {
    cursor: pointer;
    color: black;
   /* text-decoration: underline;*/
}
/*To change the text color for the second level nodes*/
[b-zi4taopcz3] .e-treeview .e-list-item.e-level-2 > .e-text-content .e-list-text, .accordiontree .e-list-item.e-level-2.e-active > .e-text-content .e-list-text[b-zi4taopcz3], .accordiontree .e-list-item.e-level-2.e-hover > .e-text-content .e-list-text[b-zi4taopcz3], .accordiontree .e-list-item.e-level-2.e-active.e-hover > .e-text-content .e-list-text[b-zi4taopcz3] {
    color: black;
    font-size: 13px;
   
}
/*::deep .e-treeview .e-icon-expandable {
    color: red;
}

::deep .e-treeview .e-icon-collapsible {
    color: black;
}*/

/*::deep e-treeview .e-list-item .e-icons {
    font-family: "Customize-icon";
}

::deep .e-treeview .e-list-item .e-icon-expandable::before, .custom.e-treeview .e-list-item .e-icon-collapsible:before {
    content: '\e700';
    font-size: 12px;
}

@@font-face {
    font-family: 'Customize-icon';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRcAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmcYqIngAAAcwAAAD8aGVhZBWT124AAADQAAAANmhoZWEHmANtAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQBAAH4AAAHEAAAACG1heHABEAAxAAABCAAAACBuYW1l/qscPAAAAsgAAAJ5cG9zdIPGFvoAAAVEAAAAVgABAAADUv9qAFoEAAAA//8D6QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAIKcGUl8PPPUACwPoAAAAANlGSVAAAAAA2UZJUAAAAAAD6QPpAAAACAACAAAAAAAAAAEAAAADACUAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPpAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAAEAAfgADAAAAAAPpA+kACAAWACQAAAEhFSEHMzcnIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYCMf6kAWqUqMK8rgF+goKK/qCEfn5Coquf/amRkZoBkpqRkUq3xLcCKmSTybt4if6ghYKChQFgiUJBQRma/m6akZGaAZKaSElJAAMAAAAAA+gD6QAGABQAIgAAASMXNyMRIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYBvrLp6JmGAW6BgYf+oYiBgUGhqqH9qZOTmgGOmpOTSrbCtgGy6ekBbwuI/qGHgYGIAV6IQEFBFpr+cZmTk5oBj5lKSUkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA4AAQABAAAAAAACAAcADwABAAAAAAADAA4AFgABAAAAAAAEAA4AJAABAAAAAAAFAAsAMgABAAAAAAAGAA4APQABAAAAAAAKACwASwABAAAAAAALABIAdwADAAEECQAAAAIAiQADAAEECQABABwAiwADAAEECQACAA4ApwADAAEECQADABwAtQADAAEECQAEABwA0QADAAEECQAFABYA7QADAAEECQAGABwBAwADAAEECQAKAFgBHwADAAEECQALACQBdyBDdXN0b21pemUtaWNvblJlZ3VsYXJDdXN0b21pemUtaWNvbkN1c3RvbWl6ZS1pY29uVmVyc2lvbiAxLjBDdXN0b21pemUtaWNvbkZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEMAdQBzAHQAbwBtAGkAegBlAC0AaQBjAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFy1hcnJvdy1jaXJjbGUtcmlnaHQtXzAxEi1hcnJvdy1jaXJjbGUtZG93bgAAAAA=) format('truetype');
    font-weight: normal;
    font-style: normal;
}*/
/*::deep .e-treeview .e-list-item .e-icon-expandable::before, .custom.e-treeview .e-list-item .e-icon-collapsible:before {
    font-size: 16px;*/ /* Tama�o m�s peque�o para los �conos */
    /*width: 16px;*/ /* Ancho peque�o */
    /*height: 16px;*/ /* Alto peque�o */
    /*vertical-align: middle;*/ /* Alinear �conos verticalmente con el texto */
    /*margin-right: 10px;*/ /* Espacio entre �cono y texto */
    /*color: #4caf50;*/ /* Color del �cono, puedes cambiarlo si lo deseas */
/*}*/


/* Cambiar tama�o de los �conos en el SfTreeView para que sean peque�os */
[b-zi4taopcz3] .e-treeview .e-list-item .e-icon-expandable::before, .e-treeview .e-list-item .e-icon-collapsible[b-zi4taopcz3]::before {
    font-size: 16px; /* Tama�o m�s peque�o para los �conos */
    width: 16px; /* Ancho peque�o */
    height: 16px; /* Alto peque�o */
    vertical-align: middle; /* Alinear �conos verticalmente con el texto */
    margin-right: 10px; /* Espacio entre �cono y texto */
    color: #4caf50; /* Color del �cono, puedes cambiarlo si lo deseas */
}
/* Resaltar el �tem cuando se pasa el mouse por encima */
[b-zi4taopcz3] .e-treeview .e-list-item:hover {
     /* Color de fondo ligero (verde claro) */
    /*border-radius: 4px;*/ /* Bordes redondeados */
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/ /* Sombra suave para dar un poco de profundidad */
}
    /* Cambiar el tama�o de los �conos de expansi�n (flechas para expandir/colapsar nodos) */
/*::deep .e-treeview .e-list-item .e-icon-expandable::after, .e-treeview .e-list-item .e-icon-collapsible::after {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #4caf50;
}*/

/* Estilo para iconos al hacer hover en los nodos */
/*::deep .e-treeview .e-list-item:hover .e-icons {
    color: #ff0000;  
}*/