@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';
@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css';

/* /Pages/Abonos/Abonos.razor.rz.scp.css */
.documento-toolbar[b-heecolorfs] {
    margin-bottom: 1rem;
}

/* Tarjetas de cabecera: 1 columna en celular, máximo 2 por fila de ahí en adelante
   (incluso en pantallas grandes), para que no queden demasiado angostas y apiladas. */
.documento-cards[b-heecolorfs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .documento-cards[b-heecolorfs] {
        grid-template-columns: 1fr 1fr;
    }
}

.documento-card[b-heecolorfs] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.documento-card-header[b-heecolorfs] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.documento-card .card-body[b-heecolorfs] {
    padding: 0.6rem 1rem;
}

.documento-fields[b-heecolorfs] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.documento-field[b-heecolorfs] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .documento-field label[b-heecolorfs] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .documento-field[b-heecolorfs] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .documento-field[b-heecolorfs] >  label {
        flex: 0 0 150px;
    }

    .documento-field[b-heecolorfs] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}
/* /Pages/Cartera/CarteraCliente.razor.rz.scp.css */
.cartera-toolbar[b-nuekthoxjr] {
    margin-bottom: 1rem;
}

/* Dos tarjetas de cabecera: 1 columna en celular, ambas en una fila desde tablet en
   adelante (nunca hace falta un tercer nivel de columnas, solo son 2). */
.cartera-cards[b-nuekthoxjr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .cartera-cards[b-nuekthoxjr] {
        grid-template-columns: 1fr 1fr;
    }
}

.cartera-card[b-nuekthoxjr] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.cartera-card-header[b-nuekthoxjr] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.cartera-card .card-body[b-nuekthoxjr] {
    padding: 0.6rem 1rem;
}

.cartera-fields[b-nuekthoxjr] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cartera-field[b-nuekthoxjr] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .cartera-field label[b-nuekthoxjr] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .cartera-field[b-nuekthoxjr] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .cartera-field[b-nuekthoxjr] >  label {
        flex: 0 0 150px;
    }

    .cartera-field[b-nuekthoxjr] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.cartera-field-total[b-nuekthoxjr] {
    background-color: var(--fondo-resaltado);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
}

    .cartera-field-total label[b-nuekthoxjr] {
        color: var(--link);
        font-weight: 700;
    }

/* Tarjetas de movimiento para celular (Movimientos de Cartera). */
.cartera-history-cards[b-nuekthoxjr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.cartera-history-card[b-nuekthoxjr] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.cartera-history-card-header[b-nuekthoxjr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cartera-history-fecha[b-nuekthoxjr] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--letra);
}

.cartera-product-desc[b-nuekthoxjr] {
    font-size: 0.85rem;
    color: var(--letra);
    margin: 0.3rem 0 0.5rem;
}

.cartera-cards-pager[b-nuekthoxjr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.8rem;
    color: var(--letra-secondary);
}
/* /Pages/Clientes/Clientes.razor.rz.scp.css */
.cliente-toolbar[b-yjw0qp1xht] {
    margin-bottom: 1rem;
}

.cliente-card[b-yjw0qp1xht] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.cliente-card-header[b-yjw0qp1xht] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.cliente-card .card-body[b-yjw0qp1xht] {
    padding: 0.6rem 1rem;
}

.cliente-fields[b-yjw0qp1xht] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cliente-field[b-yjw0qp1xht] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .cliente-field label[b-yjw0qp1xht] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .cliente-field[b-yjw0qp1xht] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .cliente-field[b-yjw0qp1xht] >  label {
        flex: 0 0 150px;
    }

    .cliente-field[b-yjw0qp1xht] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Tarjetas de dirección para celular (la tabla tiene 8 columnas, inmanejable en un teléfono). */
.cliente-direccion-cards[b-yjw0qp1xht] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.cliente-direccion-card[b-yjw0qp1xht] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.cliente-direccion-card-header[b-yjw0qp1xht] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.cliente-direccion-nombre[b-yjw0qp1xht] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--letra);
}
/* /Pages/Colaborador/Colaborador.razor.rz.scp.css */
.colaborador-toolbar[b-05h593h119] {
    margin-bottom: 1rem;
}

.colaborador-card[b-05h593h119] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.colaborador-card-header[b-05h593h119] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.colaborador-card .card-body[b-05h593h119] {
    padding: 0.6rem 1rem;
}

/* 1 columna en celular, hasta 3 en escritorio, ya que son varios campos cortos. */
.colaborador-fields[b-05h593h119] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

@media (min-width: 768px) {
    .colaborador-fields[b-05h593h119] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .colaborador-fields[b-05h593h119] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.colaborador-field[b-05h593h119] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

    .colaborador-field label[b-05h593h119] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }
/* /Pages/Comisiones/AbonosCV.razor.rz.scp.css */
.documento-toolbar[b-cgowl5yuw2] {
    margin-bottom: 1rem;
}

/* Tarjetas de cabecera: 1 columna en celular, máximo 2 por fila de ahí en adelante
   (incluso en pantallas grandes), para que no queden demasiado angostas y apiladas. */
.documento-cards[b-cgowl5yuw2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .documento-cards[b-cgowl5yuw2] {
        grid-template-columns: 1fr 1fr;
    }
}

.documento-card[b-cgowl5yuw2] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.documento-card-header[b-cgowl5yuw2] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.documento-card .card-body[b-cgowl5yuw2] {
    padding: 0.6rem 1rem;
}

.documento-fields[b-cgowl5yuw2] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.documento-field[b-cgowl5yuw2] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .documento-field label[b-cgowl5yuw2] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .documento-field[b-cgowl5yuw2] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .documento-field[b-cgowl5yuw2] >  label {
        flex: 0 0 150px;
    }

    .documento-field[b-cgowl5yuw2] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}
/* /Pages/Comisiones/EstadoCuentaVen.razor.rz.scp.css */
.estcta-toolbar[b-q2a0n7biut] {
    margin-bottom: 1rem;
}

/* Dos tarjetas de cabecera: 1 columna en celular, ambas en una fila desde tablet en
   adelante (solo son 2). */
.estcta-cards[b-q2a0n7biut] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .estcta-cards[b-q2a0n7biut] {
        grid-template-columns: 1fr 1fr;
    }
}

.estcta-card[b-q2a0n7biut] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.estcta-card-header[b-q2a0n7biut] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.estcta-card .card-body[b-q2a0n7biut] {
    padding: 0.6rem 1rem;
}

.estcta-fields[b-q2a0n7biut] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.estcta-field[b-q2a0n7biut] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .estcta-field label[b-q2a0n7biut] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .estcta-field[b-q2a0n7biut] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .estcta-field[b-q2a0n7biut] >  label {
        flex: 0 0 150px;
    }

    .estcta-field[b-q2a0n7biut] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.estcta-field-total[b-q2a0n7biut] {
    background-color: var(--fondo-resaltado);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
}

    .estcta-field-total label[b-q2a0n7biut] {
        color: var(--link);
        font-weight: 700;
    }

/* Tarjetas de movimiento para celular. */
.estcta-history-cards[b-q2a0n7biut] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.estcta-history-card[b-q2a0n7biut] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.estcta-history-card-header[b-q2a0n7biut] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.estcta-history-fecha[b-q2a0n7biut] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--letra);
}

.estcta-history-desc[b-q2a0n7biut] {
    font-size: 0.85rem;
    color: var(--letra);
    margin: 0.3rem 0 0.5rem;
}

.estcta-cards-pager[b-q2a0n7biut] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.8rem;
    color: var(--letra-secondary);
}
/* /Pages/Compras/CompraOrden.razor.rz.scp.css */
.compra-toolbar[b-vz30y170ef] {
    margin-bottom: 1rem;
}

.compra-alert[b-vz30y170ef] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    padding: 0.5rem 0.9rem;
}

/* Cuatro tarjetas de cabecera: 1 columna en celular, 2x2 en tablet/iPad, las 4 en una sola
   fila en escritorio/portátil (donde ya hay ancho de sobra para eso). */
.compra-cards[b-vz30y170ef] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .compra-cards[b-vz30y170ef] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .compra-cards[b-vz30y170ef] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.compra-card[b-vz30y170ef] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.compra-card-header[b-vz30y170ef] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.compra-card .card-body[b-vz30y170ef] {
    padding: 0.6rem 1rem;
}

.compra-fields[b-vz30y170ef] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.compra-field[b-vz30y170ef] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .compra-field label[b-vz30y170ef] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .compra-field[b-vz30y170ef] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .compra-field[b-vz30y170ef] >  label {
        flex: 0 0 150px;
    }

    .compra-field[b-vz30y170ef] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.compra-field-total[b-vz30y170ef] {
    background-color: var(--fondo-resaltado);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
}

    .compra-field-total label[b-vz30y170ef] {
        color: var(--link);
        font-weight: 700;
    }

/* Tarjetas de producto para celular (pestaña O.C): la tabla de detalle tiene ~11 columnas
   según el contexto, inmanejable en un teléfono incluso con scroll horizontal. */
.compra-product-cards[b-vz30y170ef] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.compra-product-card[b-vz30y170ef] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.compra-product-card-header[b-vz30y170ef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.compra-product-upc[b-vz30y170ef] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--letra);
}

.compra-product-meta[b-vz30y170ef] {
    font-size: 0.75rem;
    color: var(--letra-secondary);
    margin-left: 0.5rem;
}

.compra-product-desc[b-vz30y170ef] {
    font-size: 0.85rem;
    color: var(--letra);
    margin: 0.3rem 0 0.5rem;
}

.compra-product-grid[b-vz30y170ef] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

    .compra-product-grid .compra-field-total[b-vz30y170ef] {
        grid-column: 1 / -1;
    }

.compra-product-tracking[b-vz30y170ef] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.compra-tracking-chip[b-vz30y170ef] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--fondo-resaltado);
    border-radius: 0.4rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}

    .compra-tracking-chip .btn[b-vz30y170ef] {
        padding: 0 0.3rem;
        line-height: 1.3;
    }

/* Tarjetas para las pestañas de historial (Trackings/Warehouse) en celular: más simples,
   sin campos editables, solo lectura + botón "Ver". */
.compra-history-cards[b-vz30y170ef] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.compra-history-card[b-vz30y170ef] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.compra-history-card-header[b-vz30y170ef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
/* /Pages/Despachos/Despachos.razor.rz.scp.css */
.despacho-toolbar[b-8lk1llhiyn] {
    margin-bottom: 1rem;
}

/* Tres tarjetas de cabecera: 1 columna en celular, 2 en tablet, las 3 en una fila en
   escritorio/portátil. Se dejan del mismo alto (comportamiento default de CSS Grid). */
.despacho-cards[b-8lk1llhiyn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .despacho-cards[b-8lk1llhiyn] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .despacho-cards[b-8lk1llhiyn] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Las dos tarjetas de Observaciones: siempre a lo sumo 2 columnas (mitad y mitad), nunca 3,
   sin importar qué tan ancha esté la pantalla. */
.despacho-cards-2col[b-8lk1llhiyn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .despacho-cards-2col[b-8lk1llhiyn] {
        grid-template-columns: 1fr 1fr;
    }
}

.despacho-card[b-8lk1llhiyn] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.despacho-card-header[b-8lk1llhiyn] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.despacho-card .card-body[b-8lk1llhiyn] {
    padding: 0.6rem 1rem;
}

.despacho-fields[b-8lk1llhiyn] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.despacho-field[b-8lk1llhiyn] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .despacho-field label[b-8lk1llhiyn] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .despacho-field[b-8lk1llhiyn] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .despacho-field[b-8lk1llhiyn] >  label {
        flex: 0 0 150px;
    }

    .despacho-field[b-8lk1llhiyn] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.despacho-field-total[b-8lk1llhiyn] {
    background-color: var(--fondo-resaltado);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
}

    .despacho-field-total label[b-8lk1llhiyn] {
        color: var(--link);
        font-weight: 700;
    }

/* Campos que ocupan poco espacio (cantidades, pesos, fletes): van uno al lado del otro
   siempre, incluso en celular, para no gastar una fila completa por cada uno. */
.despacho-field-pair[b-8lk1llhiyn] {
    display: flex;
    gap: 0.6rem;
}

    .despacho-field-pair > .despacho-field[b-8lk1llhiyn] {
        flex: 1 1 0;
        min-width: 0;
    }

/* Pares que solo van lado a lado en pantallas grandes (ej. Subtotal/Total, Observaciones);
   en celular se apilan como el resto de los campos. */
.despacho-field-pair-desktop[b-8lk1llhiyn] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

@media (min-width: 768px) {
    .despacho-field-pair-desktop[b-8lk1llhiyn] {
        flex-direction: row;
        gap: 0.6rem;
    }
}

/* Tarjetas de producto para celular (pestaña Productos): la tabla tiene hasta 13 columnas
   según el estado del despacho, inmanejable en un teléfono. */
.despacho-product-cards[b-8lk1llhiyn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.despacho-product-card[b-8lk1llhiyn] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.despacho-product-card-header[b-8lk1llhiyn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.despacho-product-upc[b-8lk1llhiyn] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--letra);
}

.despacho-product-meta[b-8lk1llhiyn] {
    font-size: 0.75rem;
    color: var(--letra-secondary);
    margin-left: 0.5rem;
}

.despacho-product-desc[b-8lk1llhiyn] {
    font-size: 0.85rem;
    color: var(--letra);
    margin: 0.3rem 0 0.5rem;
}

.despacho-product-grid[b-8lk1llhiyn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
}

    .despacho-product-grid .despacho-field-total[b-8lk1llhiyn] {
        grid-column: 1 / -1;
    }

/* Tarjetas para la pestaña de Códigos (seriales/imei) en celular: solo lectura. */
.despacho-history-cards[b-8lk1llhiyn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.despacho-history-card[b-8lk1llhiyn] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.despacho-history-card-header[b-8lk1llhiyn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

/* Las Observaciones ocupan solo lo que su propio contenido necesita (JS: ajustarAlturaTextarea
   ajusta el alto real según el texto); esto solo pone un mínimo razonable cuando está vacío.
   InputTextArea renderiza su propio <textarea> (otro componente), así que hace falta ::deep. */
[b-8lk1llhiyn] .despacho-observacion {
    min-height: 2.5rem;
    overflow-y: hidden;
}
/* /Pages/Egresos/Egresos.razor.rz.scp.css */
.documento-toolbar[b-ytui02aqlc] {
    margin-bottom: 1rem;
}

/* Tarjetas de cabecera: 1 columna en celular, máximo 2 por fila de ahí en adelante
   (incluso en pantallas grandes), para que no queden demasiado angostas y apiladas. */
.documento-cards[b-ytui02aqlc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .documento-cards[b-ytui02aqlc] {
        grid-template-columns: 1fr 1fr;
    }
}

.documento-card[b-ytui02aqlc] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.documento-card-header[b-ytui02aqlc] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.documento-card .card-body[b-ytui02aqlc] {
    padding: 0.6rem 1rem;
}

.documento-fields[b-ytui02aqlc] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.documento-field[b-ytui02aqlc] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .documento-field label[b-ytui02aqlc] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .documento-field[b-ytui02aqlc] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .documento-field[b-ytui02aqlc] >  label {
        flex: 0 0 150px;
    }

    .documento-field[b-ytui02aqlc] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}
/* /Pages/Garantias/PTGOrden.razor.rz.scp.css */
.ptg-toolbar[b-onr95peoy6] {
    margin-bottom: 1rem;
}

/* Dos tarjetas de cabecera: 1 columna en celular, ambas en una fila desde tablet en
   adelante (solo son 2). */
.ptg-cards[b-onr95peoy6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .ptg-cards[b-onr95peoy6] {
        grid-template-columns: 1fr 1fr;
    }
}

.ptg-card[b-onr95peoy6] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.ptg-card-header[b-onr95peoy6] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.ptg-card .card-body[b-onr95peoy6] {
    padding: 0.6rem 1rem;
}

.ptg-fields[b-onr95peoy6] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ptg-field[b-onr95peoy6] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .ptg-field label[b-onr95peoy6] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .ptg-field[b-onr95peoy6] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .ptg-field[b-onr95peoy6] >  label {
        flex: 0 0 150px;
    }

    .ptg-field[b-onr95peoy6] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.ptg-field-total[b-onr95peoy6] {
    background-color: var(--fondo-resaltado);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
}

    .ptg-field-total label[b-onr95peoy6] {
        color: var(--link);
        font-weight: 700;
    }

.ptg-field-pair[b-onr95peoy6] {
    display: flex;
    gap: 0.6rem;
}

    .ptg-field-pair > .ptg-field[b-onr95peoy6] {
        flex: 1 1 0;
        min-width: 0;
    }

/* Tarjetas de producto para celular (pestaña Productos). */
.ptg-product-cards[b-onr95peoy6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.ptg-product-card[b-onr95peoy6] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.ptg-product-card-header[b-onr95peoy6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.ptg-product-upc[b-onr95peoy6] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--letra);
}

.ptg-product-meta[b-onr95peoy6] {
    font-size: 0.75rem;
    color: var(--letra-secondary);
}

.ptg-product-desc[b-onr95peoy6] {
    font-size: 0.85rem;
    color: var(--letra);
    margin: 0.3rem 0 0.5rem;
}

/* Tarjetas para la pestaña de Seguimiento en celular. */
.ptg-history-cards[b-onr95peoy6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.ptg-history-card[b-onr95peoy6] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.ptg-history-card-header[b-onr95peoy6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
/* /Pages/Index.razor.rz.scp.css */
/* Batería vertical */
.battery[b-ke1nqswsrl] {
  width: 72px;
  height: 160px;
  border: 2px solid rgba(128, 128, 128, 0.4);
  border-radius: 6px;
  position: relative;
  background: var(--fondo-resaltado);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);
}
.battery[b-ke1nqswsrl]::after {
  /* terminal */
  content: "";
  position: absolute;
  left: 23px;
  top: -8px;
  width: 23px;
  height: 8px;
  background: rgba(128, 128, 128, 0.4);
  border-radius: 3px;
}
.battery-fill[b-ke1nqswsrl] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  transition: height 600ms ease, background-color 300ms ease;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* Colores */
.battery-fill.green[b-ke1nqswsrl] { background: #28a745; }
.battery-fill.yellow[b-ke1nqswsrl] { background: #ffc107; }
.battery-fill.red[b-ke1nqswsrl] { background: #dc3545; }

/* Ajustes de tarjeta — la batería mantiene su tamaño fijo (72x160), pero la tarjeta que la
   contiene debe ocupar todo el ancho de su celda en la grilla como las demás, en vez de quedar
   angosta y centrada con mucho espacio vacío alrededor. */
.card-mi-reto .meta[b-ke1nqswsrl] { font-size: 0.9rem; color: var(--letra-secondary); }

/* Este dashboard usaba el blanco fijo por defecto de Bootstrap para .card/.table-light/.progress
   en vez de las variables de tema de la app, así que en modo oscuro quedaban como recuadros
   blancos encendidos en medio de un fondo oscuro. */
.card[b-ke1nqswsrl] {
    background-color: var(--fondo-modal);
    color: var(--letra);
    border: 1px solid rgba(128, 128, 128, 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Grid del dashboard: tarjetas de tamaño uniforme que se acomodan solas según el espacio
   disponible, en vez del sistema de .row/.col de Bootstrap con anchos fijos en pixeles por
   estilo inline. Ese sistema desbordaba en celular porque un elemento flex no se achica por
   debajo del ancho de su contenido salvo que se fije min-width:0 — con una grilla (RadzenDataGrid
   incluida) más ancha que la pantalla, la tarjeta completa (y la página) se desbordaba en vez de
   solo la tabla.  */
.dashboard-grid[b-ke1nqswsrl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    /* align-items: stretch (el valor por defecto) para que las tarjetas de una misma fila
       compartan el mismo alto — el contenido corto (Retos del Mes/Mi Meta) usa
       .dashboard-card-body-centered para repartirse en ese espacio en vez de quedar arriba
       con un hueco vacío abajo. */
    margin-bottom: 1.25rem;
}

.dashboard-grid-wide[b-ke1nqswsrl] {
    grid-column: span 2;
}

.dashboard-grid-extra-wide[b-ke1nqswsrl] {
    grid-column: span 3;
}

@media (max-width: 1199.98px) {
    .dashboard-grid-extra-wide[b-ke1nqswsrl] {
        grid-column: span 2;
    }
}

@media (max-width: 767.98px) {
    .dashboard-grid-wide[b-ke1nqswsrl],
    .dashboard-grid-extra-wide[b-ke1nqswsrl] {
        grid-column: span 1;
    }
}

.dashboard-card[b-ke1nqswsrl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .dashboard-card .card-body[b-ke1nqswsrl] {
        overflow-x: auto;
        flex: 1 1 auto;
    }

.dashboard-card-body-centered[b-ke1nqswsrl] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

/* Encabezado consistente para todas las tarjetas del dashboard: mismo lenguaje visual que ya
   usan los módulos de Tareas/Retos (ícono + texto en un color de acento + borde inferior), en
   vez de las barras de color sólido de Bootstrap que quedaban un poco ruidosas al repetirse en
   tantas tarjetas seguidas. */
.dashboard-card-header[b-ke1nqswsrl] {
    background: transparent;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 2px solid var(--dashboard-accent, var(--link));
    color: var(--dashboard-accent, var(--link));
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-card-header-success[b-ke1nqswsrl] { --dashboard-accent: #28a745; }
.dashboard-card-header-info[b-ke1nqswsrl] { --dashboard-accent: #17a2b8; }
.dashboard-card-header-secondary[b-ke1nqswsrl] { --dashboard-accent: #6c757d; }

/* Tiras de KPI arriba del todo — el resumen "de un vistazo" antes de entrar al detalle. */
.dashboard-kpis[b-ke1nqswsrl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dashboard-kpi[b-ke1nqswsrl] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.15);
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.dashboard-kpi-icon[b-ke1nqswsrl] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex: 0 0 auto;
}

.dashboard-kpi-value[b-ke1nqswsrl] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--letra);
    line-height: 1.15;
}

.dashboard-kpi-label[b-ke1nqswsrl] {
    font-size: 0.75rem;
    color: var(--letra-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* El carrusel de "más vendidos" tenía una altura fija + overflow:auto sobre la tarjeta entera,
   lo que generaba un segundo scroll (el de la tarjeta) encima del scroll normal de la página. Se
   deja crecer con su contenido — el carrusel ya limita el alto de la imagen por su cuenta. */
.dashboard-carousel-img[b-ke1nqswsrl] {
    max-height: 200px;
    object-fit: contain;
    margin: auto;
}

.table-light[b-ke1nqswsrl] {
    background-color: var(--fondo-resaltado-2);
    color: var(--letra);
}

    .table-light th[b-ke1nqswsrl] {
        color: var(--letra);
    }

.progress[b-ke1nqswsrl] {
    background-color: var(--fondo-resaltado-2);
}

/* Tarjeta por fila en celular para las tablas de "Cumplimiento por Vendedor" y "Productos en
   Inventario" — con 5-7 columnas quedaban recortadas/ilegibles en pantallas angostas (mismo
   patrón ya usado para las tablas de vendedores/inventario en RetoForm.razor). */
.dashboard-cards[b-ke1nqswsrl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dashboard-item-card[b-ke1nqswsrl] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
    text-align: left;
}

.dashboard-item-header[b-ke1nqswsrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dashboard-item-desc[b-ke1nqswsrl] {
    font-size: 0.85rem;
    color: var(--letra-secondary);
    margin-bottom: 0.5rem;
}

.dashboard-fields[b-ke1nqswsrl] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dashboard-field[b-ke1nqswsrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
}

    .dashboard-field label[b-ke1nqswsrl] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    .dashboard-field .progress[b-ke1nqswsrl] {
        flex: 1 1 auto;
        margin-left: 0.75rem;
    }
/* /Pages/Ingresos/Ingresos.razor.rz.scp.css */
.documento-toolbar[b-hgwxnh3anb] {
    margin-bottom: 1rem;
}

/* Tarjetas de cabecera: 1 columna en celular, máximo 2 por fila de ahí en adelante
   (incluso en pantallas grandes), para que no queden demasiado angostas y apiladas. */
.documento-cards[b-hgwxnh3anb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .documento-cards[b-hgwxnh3anb] {
        grid-template-columns: 1fr 1fr;
    }
}

.documento-card[b-hgwxnh3anb] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.documento-card-header[b-hgwxnh3anb] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.documento-card .card-body[b-hgwxnh3anb] {
    padding: 0.6rem 1rem;
}

.documento-fields[b-hgwxnh3anb] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.documento-field[b-hgwxnh3anb] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .documento-field label[b-hgwxnh3anb] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .documento-field[b-hgwxnh3anb] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .documento-field[b-hgwxnh3anb] >  label {
        flex: 0 0 150px;
    }

    .documento-field[b-hgwxnh3anb] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}
/* /Pages/Inventario/AsignaLectura.razor.rz.scp.css */
.asignalectura-toolbar[b-zlrylsli0x] {
    margin-bottom: 1rem;
}

.asignalectura-card[b-zlrylsli0x] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.asignalectura-card-header[b-zlrylsli0x] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.asignalectura-card .card-body[b-zlrylsli0x] {
    padding: 0.6rem 1rem;
}

/* Tarjeta por usuario para celular (la tabla de 3 columnas con fecha editable es
   incómoda en pantallas angostas). */
.asignalectura-cards[b-zlrylsli0x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.asignalectura-item-card[b-zlrylsli0x] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.asignalectura-item-header[b-zlrylsli0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.asignalectura-usuario[b-zlrylsli0x] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--letra);
}

.asignalectura-field[b-zlrylsli0x] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

    .asignalectura-field label[b-zlrylsli0x] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }
/* /Pages/Inventario/MovInventario.razor.rz.scp.css */
.movinventario-toolbar[b-2me6x4595e] {
    margin-bottom: 1rem;
}

/* Dos tarjetas de cabecera: 1 columna en celular, ambas en una fila desde tablet en
   adelante (solo son 2). */
.movinventario-cards[b-2me6x4595e] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .movinventario-cards[b-2me6x4595e] {
        grid-template-columns: 1fr 1fr;
    }
}

.movinventario-card[b-2me6x4595e] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.movinventario-card-header[b-2me6x4595e] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.movinventario-card .card-body[b-2me6x4595e] {
    padding: 0.6rem 1rem;
}

.movinventario-fields[b-2me6x4595e] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.movinventario-field[b-2me6x4595e] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .movinventario-field label[b-2me6x4595e] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .movinventario-field[b-2me6x4595e] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .movinventario-field[b-2me6x4595e] >  label {
        flex: 0 0 150px;
    }

    .movinventario-field[b-2me6x4595e] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Nombre del producto encontrado tras buscar por UPC (antes era una etiqueta roja
   suelta ocupando toda una fila del grid Bootstrap). */
.movinventario-nombre[b-2me6x4595e] {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: -0.15rem;
}
/* /Pages/Pedidos/PedidoOrden.razor.rz.scp.css */
.pedido-toolbar[b-83k4pky9xu] {
    margin-bottom: 1rem;
}

.pedido-alert[b-83k4pky9xu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    padding: 0.5rem 0.9rem;
}

.pedido-cards[b-83k4pky9xu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

@media (max-width: 991.98px) {
    .pedido-cards[b-83k4pky9xu] {
        grid-template-columns: 1fr;
    }
}

.pedido-card[b-83k4pky9xu] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.pedido-card-header[b-83k4pky9xu] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.pedido-card .card-body[b-83k4pky9xu] {
    padding: 0.6rem 1rem;
}

.pedido-fields[b-83k4pky9xu] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pedido-field[b-83k4pky9xu] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.pedido-field label[b-83k4pky9xu] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--letra-secondary);
    font-weight: 600;
    margin-bottom: 0;
}

/* En pantallas medianas/grandes el label vuelve a ir al lado del campo (como estaba
   originalmente); en móvil se queda arriba del campo para que no se corte el texto. */
@media (min-width: 768px) {
    .pedido-field[b-83k4pky9xu] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .pedido-field[b-83k4pky9xu] >  label {
        flex: 0 0 130px;
    }

    .pedido-field[b-83k4pky9xu] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* N° y Fecha ocupan poco espacio: van uno al lado del otro siempre, incluso en celular
   (validado en pantallas tan angostas como un iPhone SE). */
.pedido-field-pair[b-83k4pky9xu] {
    display: flex;
    gap: 0.6rem;
}

    .pedido-field-pair > .pedido-field[b-83k4pky9xu] {
        flex: 1 1 0;
        min-width: 0;
    }

/* Subtotal y Valor Total solo van uno al lado del otro en pantallas grandes; en celular
   se apilan como el resto de los campos. */
.pedido-field-pair-desktop[b-83k4pky9xu] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

@media (min-width: 768px) {
    .pedido-field-pair-desktop[b-83k4pky9xu] {
        flex-direction: row;
        gap: 0.6rem;
    }
}

.pedido-field[b-83k4pky9xu]  .d-flex > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* El look "plano, sin caja gris" de los campos deshabilitados ahora es un estilo global
   (wwwroot/css/app.css, .form-control:disabled) que aplica a todo el proyecto, no solo aquí. */

.pedido-field-total[b-83k4pky9xu] {
    background-color: var(--fondo-resaltado);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
}

    .pedido-field-total label[b-83k4pky9xu] {
        color: var(--link);
        font-weight: 700;
    }

/* Tarjetas de producto para celular: reemplazan al QuickGrid (una fila con 8 columnas
   no cabe en un teléfono sin scroll horizontal, que es incómodo para editar precio/cantidad). */
.pedido-product-cards[b-83k4pky9xu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
}

.pedido-product-card[b-83k4pky9xu] {
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
}

.pedido-product-card-header[b-83k4pky9xu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.pedido-product-upc[b-83k4pky9xu] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--letra);
}

.pedido-product-desc[b-83k4pky9xu] {
    font-size: 0.85rem;
    color: var(--letra);
    margin-bottom: 0.6rem;
}

.pedido-product-grid[b-83k4pky9xu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
}

.pedido-product-grid .pedido-field-total[b-83k4pky9xu] {
    grid-column: 1 / -1;
}

/* /Pages/Pedidos/PedidosListado.razor.rz.scp.css */
.pedidoslistado-toolbar[b-sm4xbrpiyj] {
    margin-bottom: 0.75rem;
}

.pedidoslistado-title[b-sm4xbrpiyj] {
    margin: 0;
}
/* /Pages/Pedidos/PuntoVenta.razor.rz.scp.css */
.puntoventa-toolbar[b-vanzjj0u7w] {
    margin-bottom: 1rem;
}

/* Tres tarjetas de cabecera: 1 columna en celular, 2 en tablet, las 3 en una fila en
   escritorio/portátil. Se dejan del mismo alto (comportamiento default de CSS Grid). */
.puntoventa-cards[b-vanzjj0u7w] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .puntoventa-cards[b-vanzjj0u7w] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .puntoventa-cards[b-vanzjj0u7w] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.puntoventa-card[b-vanzjj0u7w] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.puntoventa-card-header[b-vanzjj0u7w] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.puntoventa-card .card-body[b-vanzjj0u7w] {
    padding: 0.6rem 1rem;
}

.puntoventa-fields[b-vanzjj0u7w] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.puntoventa-field[b-vanzjj0u7w] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .puntoventa-field label[b-vanzjj0u7w] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .puntoventa-field[b-vanzjj0u7w] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .puntoventa-field[b-vanzjj0u7w] >  label {
        flex: 0 0 150px;
    }

    .puntoventa-field[b-vanzjj0u7w] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.puntoventa-field-total[b-vanzjj0u7w] {
    background-color: var(--fondo-resaltado);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
}

    .puntoventa-field-total label[b-vanzjj0u7w] {
        color: var(--link);
        font-weight: 700;
    }

/* Etiqueta pequeña sobre el campo de UPC del escáner (no usa .puntoventa-field porque va
   junto al botón de cámara en una sola fila, no dentro de una tarjeta). */
.puntoventa-small-label[b-vanzjj0u7w] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--letra-secondary);
    font-weight: 600;
    margin-bottom: 0.1rem;
    display: block;
}

/* Tarjetas de producto para celular (pestaña Productos): la tabla tiene hasta 10 columnas
   según el estado de la venta, inmanejable en un teléfono. */
.puntoventa-product-cards[b-vanzjj0u7w] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.puntoventa-product-card[b-vanzjj0u7w] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.puntoventa-product-card-header[b-vanzjj0u7w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.puntoventa-product-upc[b-vanzjj0u7w] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--letra);
}

.puntoventa-product-meta[b-vanzjj0u7w] {
    font-size: 0.75rem;
    color: var(--letra-secondary);
    margin-left: 0.5rem;
}

.puntoventa-product-desc[b-vanzjj0u7w] {
    font-size: 0.85rem;
    color: var(--letra);
    margin: 0.3rem 0 0.5rem;
}

.puntoventa-product-grid[b-vanzjj0u7w] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
}

    .puntoventa-product-grid .puntoventa-field-total[b-vanzjj0u7w] {
        grid-column: 1 / -1;
    }

/* Tarjetas para la pestaña de Códigos (seriales/imei) en celular: solo lectura. */
.puntoventa-history-cards[b-vanzjj0u7w] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.puntoventa-history-card[b-vanzjj0u7w] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.puntoventa-history-card-header[b-vanzjj0u7w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
/* /Pages/Perfiles/Perfil.razor.rz.scp.css */
.perfil-toolbar[b-7e0449c3dz] {
    margin-bottom: 1rem;
}

.perfil-card[b-7e0449c3dz] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.perfil-card-header[b-7e0449c3dz] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.perfil-card .card-body[b-7e0449c3dz] {
    padding: 0.6rem 1rem;
}

/* Datos del perfil (ID/Código/Nombre/Activo): 1 columna en celular, hasta 4 en una fila
   en escritorio, ya que son pocos campos y cortos. */
.perfil-fields[b-7e0449c3dz] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

@media (min-width: 768px) {
    .perfil-fields[b-7e0449c3dz] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.perfil-field[b-7e0449c3dz] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

    .perfil-field label[b-7e0449c3dz] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

.perfil-tree[b-7e0449c3dz] {
    padding: 0.4rem 0;
}

.perfil-modulo[b-7e0449c3dz] {
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

    .perfil-modulo:last-child[b-7e0449c3dz] {
        border-bottom: none;
    }

/* Encabezado de cada módulo: chevron, checkbox y nombre pegados a la izquierda, en ese
   orden (no un switch suelto a la derecha del todo). Clic en cualquier parte de la fila
   expande/colapsa; el checkbox usa stopPropagation para no disparar eso también. */
.perfil-modulo-header[b-7e0449c3dz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--letra);
}

    .perfil-modulo-header:hover[b-7e0449c3dz] {
        background-color: var(--fondo-resaltado);
    }

.perfil-chevron[b-7e0449c3dz] {
    transition: transform 0.15s ease-in-out;
    color: var(--link);
    flex: 0 0 auto;
}

.perfil-chevron-open[b-7e0449c3dz] {
    transform: rotate(90deg);
}

.perfil-nombre[b-7e0449c3dz] {
    flex: 1 1 auto;
}

/* Lista de Opciones dentro de un módulo abierto. Siempre visibles al expandir, sin
   importar si el módulo está o no marcado como activo. */
.perfil-opciones[b-7e0449c3dz] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem 0.75rem 2.1rem;
}

.perfil-opcion[b-7e0449c3dz] {
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.5rem;
    background-color: var(--fondo-resaltado);
}

.perfil-opcion-header[b-7e0449c3dz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Funciones (hoja del árbol): lista compacta de checkbox + nombre, sin flecha de expandir. */
.perfil-funciones[b-7e0449c3dz] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.3rem 0.6rem 0.6rem 3.4rem;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.perfil-funcion[b-7e0449c3dz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.82rem;
    color: var(--letra);
}
/* /Pages/Perfiles/Usuario.razor.rz.scp.css */
.usuario-toolbar[b-b5rq09heqx] {
    margin-bottom: 1rem;
}

/* Tarjetas de cabecera: 1 columna en celular, 2 en tablet/escritorio. */
.usuario-cards[b-b5rq09heqx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .usuario-cards[b-b5rq09heqx] {
        grid-template-columns: 1fr 1fr;
    }
}

.usuario-card[b-b5rq09heqx] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.usuario-card-header[b-b5rq09heqx] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.usuario-card .card-body[b-b5rq09heqx] {
    padding: 0.6rem 1rem;
}

.usuario-fields[b-b5rq09heqx] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.usuario-field[b-b5rq09heqx] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .usuario-field label[b-b5rq09heqx] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .usuario-field[b-b5rq09heqx] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .usuario-field[b-b5rq09heqx] >  label {
        flex: 0 0 150px;
    }

    .usuario-field[b-b5rq09heqx] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Código Perfil / Nombre Perfil van uno al lado del otro siempre. */
.usuario-field-pair[b-b5rq09heqx] {
    display: flex;
    gap: 0.6rem;
}

    .usuario-field-pair > .usuario-field[b-b5rq09heqx] {
        flex: 1 1 0;
        min-width: 0;
    }

/* Árbol de Módulos/Opciones/Funciones — mismo patrón que Perfil.razor. */
.usuario-tree[b-b5rq09heqx] {
    padding: 0.4rem 0;
}

.usuario-modulo[b-b5rq09heqx] {
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

    .usuario-modulo:last-child[b-b5rq09heqx] {
        border-bottom: none;
    }

.usuario-modulo-header[b-b5rq09heqx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--letra);
}

    .usuario-modulo-header:hover[b-b5rq09heqx] {
        background-color: var(--fondo-resaltado);
    }

.usuario-chevron[b-b5rq09heqx] {
    transition: transform 0.15s ease-in-out;
    color: var(--link);
    flex: 0 0 auto;
}

.usuario-chevron-open[b-b5rq09heqx] {
    transform: rotate(90deg);
}

.usuario-nombre[b-b5rq09heqx] {
    flex: 1 1 auto;
}

.usuario-opciones[b-b5rq09heqx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem 0.75rem 2.1rem;
}

.usuario-opcion[b-b5rq09heqx] {
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.5rem;
    background-color: var(--fondo-resaltado);
}

.usuario-opcion-header[b-b5rq09heqx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

.usuario-funciones[b-b5rq09heqx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.3rem 0.6rem 0.6rem 3.4rem;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.usuario-funcion[b-b5rq09heqx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.82rem;
    color: var(--letra);
}
/* /Pages/Productos/Productos.razor.rz.scp.css */
.producto-toolbar[b-dlejmvl97u] {
    margin-bottom: 1rem;
}

/* Tarjetas de cabecera: 1 columna en celular, 2 en tablet, 3 en escritorio/portátil. */
.producto-cards[b-dlejmvl97u] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .producto-cards[b-dlejmvl97u] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .producto-cards[b-dlejmvl97u] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.producto-card[b-dlejmvl97u] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.producto-card-header[b-dlejmvl97u] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.producto-card .card-body[b-dlejmvl97u] {
    padding: 0.6rem 1rem;
}

.producto-fields[b-dlejmvl97u] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.producto-field[b-dlejmvl97u] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .producto-field label[b-dlejmvl97u] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .producto-field[b-dlejmvl97u] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .producto-field[b-dlejmvl97u] >  label {
        flex: 0 0 150px;
    }

    .producto-field[b-dlejmvl97u] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Campos cortos que van uno al lado del otro siempre, incluso en celular. */
.producto-field-pair[b-dlejmvl97u] {
    display: flex;
    gap: 0.6rem;
}

    .producto-field-pair > .producto-field[b-dlejmvl97u] {
        flex: 1 1 0;
        min-width: 0;
    }

/* Código + Nombre de una misma línea/grupo, uno al lado del otro dentro de UN solo
   producto-field (una sola etiqueta, "Código"/"Nombre" van como placeholder de cada
   input en vez de repetir la etiqueta) para no tener que reservar dos columnas de
   150px de label en una tarjeta angosta. */
.producto-field-duo[b-dlejmvl97u] {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

    .producto-field-duo[b-dlejmvl97u] >  input {
        flex: 1 1 0;
        min-width: 0;
    }

/* Subtítulo pequeño dentro de una tarjeta para marcar un sub-grupo de campos
   (ej. "Producto", "Referencia", "info General", "Garantía") sin ser un nuevo card-header. */
.producto-subheading[b-dlejmvl97u] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--link);
    margin-top: 0.4rem;
    margin-bottom: 0.1rem;
}

    .producto-fields .producto-subheading:first-child[b-dlejmvl97u] {
        margin-top: 0;
    }

/* Grupos de checkboxes (Idiomas, Subtítulos, Modos de Juego) en una cuadrícula en vez
   de todos apilados en una sola línea larga. */
.producto-checkbox-grid[b-dlejmvl97u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem 1rem;
}

@media (min-width: 480px) {
    .producto-checkbox-grid[b-dlejmvl97u] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.producto-checkbox-grid-modos[b-dlejmvl97u] {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 480px) {
    .producto-checkbox-grid-modos[b-dlejmvl97u] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.producto-garantia-table[b-dlejmvl97u] {
    margin-bottom: 0;
}

    .producto-garantia-table th[b-dlejmvl97u] {
        font-size: 0.75rem;
    }

    .producto-garantia-table td[b-dlejmvl97u] {
        vertical-align: middle;
    }

    .producto-garantia-table input[b-dlejmvl97u] {
        max-width: 100px;
    }
/* /Pages/Productos/ProductosStock.razor.rz.scp.css */
.grid[b-gbdk07i9cc]  table {
    width: 3000px !important;
}

/* Sticky header while scrolling */
[b-gbdk07i9cc] thead {
    top: 0;
    background-color: #d8d8d8;
    outline: 1px solid gray;
    z-index: 1;
}

/* For virtualized grids, it's essential that all rows have the same known height */
/*::deep tr {
    height: 30px;
    border-bottom: 0.5px solid silver;
}*/

[b-gbdk07i9cc] tbody td {
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    text-overflow: ellipsis;
}

th.vacio[b-gbdk07i9cc] {
    width: 910px;
}

.prodstock-toolbar[b-gbdk07i9cc] {
    margin-bottom: 0.75rem;
}

.prodstock-title[b-gbdk07i9cc] {
    margin: 0;
}

/* Tres niveles de vista:
   - Celular (<768px): siempre tarjetas, obligatorio.
   - Tablet/iPad (768–1199.98px): el usuario elige (botón .prodstock-view-toggle) y se
     recuerda vía LocalStorage (clase .prodstock-pref-grid en .prodstock-view-container).
   - Escritorio/portátil (≥1200px): siempre tabla, obligatorio, sin importar la preferencia. */
.prodstock-grid-wrap[b-gbdk07i9cc] {
    display: none;
}

.prodstock-cards-wrap[b-gbdk07i9cc] {
    display: block;
}

@media (min-width: 768px) {
    .prodstock-view-container.prodstock-pref-grid .prodstock-grid-wrap[b-gbdk07i9cc] {
        display: block;
    }

    .prodstock-view-container.prodstock-pref-grid .prodstock-cards-wrap[b-gbdk07i9cc] {
        display: none;
    }
}

@media (min-width: 1200px) {
    .prodstock-grid-wrap[b-gbdk07i9cc] {
        display: block !important;
    }

    .prodstock-cards-wrap[b-gbdk07i9cc] {
        display: none !important;
    }
}

.prodstock-view-toggle[b-gbdk07i9cc] {
    display: none;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .prodstock-view-toggle[b-gbdk07i9cc] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }
}

.prodstock-cards-toolbar[b-gbdk07i9cc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.prodstock-sort-row[b-gbdk07i9cc] {
    display: flex;
    gap: 0.5rem;
}

    .prodstock-sort-row select[b-gbdk07i9cc] {
        flex: 1 1 auto;
        min-width: 0;
    }

.prodstock-cards-pager[b-gbdk07i9cc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--letra-secondary);
    padding: 0.5rem;
}

/* Tarjetas de producto para celular: en pantallas angostas la tabla (hasta ~20 columnas
   según el contexto) es inmanejable incluso con scroll horizontal. Los vendedores necesitan
   ver todos los números de stock/tránsito de un vistazo, así que en vez de ocultarlos se
   agrupan por color en una tarjeta por producto. */
.prodstock-cards[b-gbdk07i9cc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.prodstock-card[b-gbdk07i9cc] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

/* En tablet/iPad (donde el usuario eligió tarjetas) hay ancho de sobra: en vez de apilar todo
   en una sola columna angosta, la identidad del producto va a la izquierda y el stock/tránsito
   se organiza a la derecha, aprovechando el ancho completo de la pantalla. */
@media (min-width: 768px) {
    .prodstock-card[b-gbdk07i9cc] {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .prodstock-card-main[b-gbdk07i9cc] {
        flex: 0 0 300px;
    }

    .prodstock-card-stock[b-gbdk07i9cc] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .prodstock-chip-row[b-gbdk07i9cc] {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    }
}

.prodstock-card-header[b-gbdk07i9cc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.prodstock-upc[b-gbdk07i9cc] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--letra);
}

.prodstock-ref[b-gbdk07i9cc] {
    font-size: 0.75rem;
    color: var(--letra-secondary);
    margin-left: 0.5rem;
}

.prodstock-estado[b-gbdk07i9cc] {
    font-size: 0.75rem;
    color: var(--letra-secondary);
    margin-left: 0.5rem;
}

.prodstock-desc[b-gbdk07i9cc] {
    font-size: 0.85rem;
    color: var(--letra);
    margin: 0.3rem 0 0.5rem;
}

.prodstock-inputs[b-gbdk07i9cc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.prodstock-field[b-gbdk07i9cc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 90px;
}

    .prodstock-field label[b-gbdk07i9cc] {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--letra-secondary);
        font-weight: 600;
    }

    .prodstock-field[b-gbdk07i9cc]  .form-control {
        max-width: 110px;
    }

.prodstock-input-final[b-gbdk07i9cc]  .form-control {
    background-color: #1e9e3c !important;
    color: white !important;
}

.prodstock-group-label[b-gbdk07i9cc] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--letra-secondary);
    font-weight: 600;
    margin-top: 0.4rem;
    margin-bottom: 0.25rem;
}

.prodstock-chip-row[b-gbdk07i9cc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.prodstock-chip[b-gbdk07i9cc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    padding: 0.3rem 0.2rem;
    color: black;
}

.prodstock-chip-label[b-gbdk07i9cc] {
    font-size: 0.65rem;
    opacity: 0.8;
}

.prodstock-chip-value[b-gbdk07i9cc] {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

    .prodstock-chip-value .btn[b-gbdk07i9cc] {
        padding: 0 0.3rem;
        line-height: 1.4;
    }

.prodstock-chip-dispo[b-gbdk07i9cc] {
    background-color: #37dbd0;
}

.prodstock-chip-reserv[b-gbdk07i9cc] {
    background-color: #c7ebfc;
}

.prodstock-chip-pago[b-gbdk07i9cc] {
    background-color: #2b59c4;
    color: white;
}

.prodstock-chip-transito-dispo[b-gbdk07i9cc] {
    background-color: #ffdd03;
}

.prodstock-chip-transito-reserv[b-gbdk07i9cc] {
    background-color: #fff08f;
}

.prodstock-chip-transito-pago[b-gbdk07i9cc] {
    background-color: #f7ef05;
}

.prodstock-secondary[b-gbdk07i9cc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    font-size: 0.72rem;
    color: var(--letra-secondary);
}

    .prodstock-secondary .btn[b-gbdk07i9cc] {
        padding: 0 0.3rem;
        line-height: 1.2;
    }

/* Modales de detalle (Stock/Tránsito/Pendientes por comprar/Histórico de precio): usaban
   row/col-sm con min-width/max-width fijos que forzaban scroll horizontal en celular. */
.prodstock-modal[b-gbdk07i9cc] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.prodstock-modal-columns[b-gbdk07i9cc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .prodstock-modal-columns[b-gbdk07i9cc] {
        grid-template-columns: 1fr 1fr;
    }
}

.prodstock-modal-section-title[b-gbdk07i9cc] {
    text-align: center;
    font-size: 1rem;
}

.prodstock-modal-field[b-gbdk07i9cc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.6rem;
}

    .prodstock-modal-field label[b-gbdk07i9cc] {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--letra-secondary);
        font-weight: 600;
    }

@media (min-width: 768px) {
    .prodstock-modal-field[b-gbdk07i9cc] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
    }

    .prodstock-modal-field[b-gbdk07i9cc] >  label {
        flex: 0 0 150px;
    }

    .prodstock-modal-field[b-gbdk07i9cc] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Sin Width/Height fijo en <BlazorBootstrap.LineChart/>, el div que envuelve el canvas queda
   sin tamaño propio (style=""); acá se lo damos vía CSS para que Chart.js (Responsive=true)
   pueda redimensionar de verdad según el ancho real disponible, no uno fijo en píxeles. */
.prodstock-modal-charts[b-gbdk07i9cc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .prodstock-modal-charts[b-gbdk07i9cc] >  div {
        width: 100%;
        min-width: 0;
    }

@media (min-width: 992px) {
    .prodstock-modal-charts[b-gbdk07i9cc] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .prodstock-modal-charts[b-gbdk07i9cc] >  div {
        width: auto;
        flex: 1 1 0;
    }
}
/* /Pages/Productos/ProductosyPrecios.razor.rz.scp.css */
.productos-toolbar[b-2qozsa7l7t] {
    margin-bottom: 1rem;
}

.productos-cards[b-2qozsa7l7t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

@media (max-width: 991.98px) {
    .productos-cards[b-2qozsa7l7t] {
        grid-template-columns: 1fr;
    }
}

.productos-card[b-2qozsa7l7t] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.productos-card-header[b-2qozsa7l7t] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.productos-card .card-body[b-2qozsa7l7t] {
    padding: 0.6rem 1rem;
}

.productos-fields[b-2qozsa7l7t] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.productos-field[b-2qozsa7l7t] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.productos-field label[b-2qozsa7l7t] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--letra-secondary);
    font-weight: 600;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .productos-field[b-2qozsa7l7t] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .productos-field[b-2qozsa7l7t] >  label {
        flex: 0 0 130px;
    }

    .productos-field[b-2qozsa7l7t] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.productos-option[b-2qozsa7l7t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .productos-option label[b-2qozsa7l7t] {
        font-size: 0.85rem;
        color: var(--letra);
        margin-bottom: 0;
    }

.productos-bodegas-list[b-2qozsa7l7t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.4rem 1rem;
    max-height: 350px;
    overflow-y: auto;
}
/* /Pages/Recepcion/Inventario.razor.rz.scp.css */
.recepcion-toolbar[b-ewrqhjqsji] {
    margin-bottom: 1rem;
}

/* Paso inicial (Tipo + Codigo) antes de que exista una recepción: tarjeta centrada en vez
   del formulario suelto sin estilo que había antes. */
.recepcion-inicio-wrap[b-ewrqhjqsji] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding: 0 0.5rem;
}

.recepcion-inicio-card[b-ewrqhjqsji] {
    width: 100%;
    max-width: 480px;
}

/* Tarjetas de cabecera: 1 columna en celular, 2 en tablet, hasta 3 en una fila en
   escritorio/portátil (la de Observación solo aparece si _radio2 != 0). */
.recepcion-cards[b-ewrqhjqsji] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .recepcion-cards[b-ewrqhjqsji] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .recepcion-cards[b-ewrqhjqsji] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.recepcion-card[b-ewrqhjqsji] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.recepcion-card-header[b-ewrqhjqsji] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.recepcion-card .card-body[b-ewrqhjqsji] {
    padding: 0.6rem 1rem;
}

.recepcion-fields[b-ewrqhjqsji] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.recepcion-field[b-ewrqhjqsji] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .recepcion-field label[b-ewrqhjqsji] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .recepcion-field[b-ewrqhjqsji] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .recepcion-field[b-ewrqhjqsji] >  label {
        flex: 0 0 150px;
    }

    .recepcion-field[b-ewrqhjqsji] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* El textarea de Observación crece con su propio contenido en vez de un alto fijo forzado.
   InputTextArea renderiza su propio <textarea> (otro componente), así que hace falta ::deep. */
[b-ewrqhjqsji] .recepcion-observacion {
    min-height: 4.5rem;
}

/* Tarjetas de producto para celular (pestaña Productos). */
.recepcion-product-cards[b-ewrqhjqsji] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.recepcion-product-card[b-ewrqhjqsji] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.recepcion-product-card-header[b-ewrqhjqsji] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.recepcion-product-upc[b-ewrqhjqsji] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--letra);
}

.recepcion-product-meta[b-ewrqhjqsji] {
    font-size: 0.75rem;
    color: var(--letra-secondary);
    margin-left: 0.5rem;
}

.recepcion-product-desc[b-ewrqhjqsji] {
    font-size: 0.85rem;
    color: var(--letra);
    margin: 0.3rem 0 0.5rem;
}

.recepcion-product-grid[b-ewrqhjqsji] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
}

/* Tarjetas para la pestaña de Códigos (seriales/imei) en celular. */
.recepcion-history-cards[b-ewrqhjqsji] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.recepcion-history-card[b-ewrqhjqsji] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.recepcion-history-card-header[b-ewrqhjqsji] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
/* /Pages/Retos/RetoForm.razor.rz.scp.css */
.reto-toolbar[b-8w64w7g5xa] {
    margin-bottom: 1rem;
}

/* Mismo estilo de tarjeta (borde, sombra suave, encabezado azul subrayado con ícono) que
   el resto de la app, en vez del "card p-3" plano sin color que tenía esta página. */
.reto-card[b-8w64w7g5xa] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.reto-card-header[b-8w64w7g5xa] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.reto-card .card-body[b-8w64w7g5xa] {
    padding: 0.75rem 1rem;
}

/* Las 3 tarjetas de resumen (Inventario/Ventas/Cumplimiento Global): 1 columna en celular,
   las 3 en una fila desde tablet en adelante. */
.reto-cards-resumen[b-8w64w7g5xa] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .reto-cards-resumen[b-8w64w7g5xa] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tarjetas para celular reemplazando las tablas de Vendedores/Productos (5-7 columnas,
   con campos editables, inmanejables en pantallas angostas). */
.reto-cards[b-8w64w7g5xa] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reto-item-card[b-8w64w7g5xa] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.reto-item-header[b-8w64w7g5xa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.reto-item-upc[b-8w64w7g5xa] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--letra);
}

.reto-item-desc[b-8w64w7g5xa] {
    font-size: 0.85rem;
    color: var(--letra-secondary);
}

.reto-fields[b-8w64w7g5xa] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.reto-field[b-8w64w7g5xa] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .reto-field label[b-8w64w7g5xa] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }
/* /Pages/Tareas/EditarDescripcionTarea.razor.rz.scp.css */
.tarea-editor-modal[b-gvmdc0t47t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0 0 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* RadzenHtmlEditor ya trae su propio layout flex-column con el área de texto en flex:1 — solo
   hace falta que el editor mismo crezca para llenar el modal en vez de quedar con una altura
   fija, así se aprovecha toda la pantalla. */
.tarea-editor-modal[b-gvmdc0t47t]  .rz-html-editor {
    flex: 1 1 auto;
    min-height: 0;
}

/* Una imagen pegada a su tamaño real (p.ej. una captura de pantalla de varios miles de
   píxeles) puede ser más ancha que el editor y forzar scroll horizontal — se limita al ancho
   disponible por defecto; igual se puede agrandar de nuevo arrastrando el handle de resize. */
.tarea-editor-modal[b-gvmdc0t47t]  .rz-html-editor-content img {
    max-width: 100%;
    height: auto;
}

.tarea-editor-modal-acciones[b-gvmdc0t47t] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.tarea-editor-ayuda-resize[b-gvmdc0t47t] {
    font-size: 0.75rem;
    color: var(--letra-secondary);
    margin: 0.5rem 0 0 0;
    flex: 0 0 auto;
}
/* /Pages/Tareas/ListadoTareas.razor.rz.scp.css */
.tarea-toolbar[b-s964si4q5h] {
    margin-bottom: 1rem;
}

/* En celular cada rem de margen cuenta: la pila deslizable ya usa lo que quede después del
   título/toolbar como su alto (ver ajustarAlturaPila en Utilidades.js), así que menos margen acá
   es más alto real para la lista de tarjetas. */
@media (max-width: 991.98px) {
    .tarea-toolbar[b-s964si4q5h] {
        margin-bottom: 0.5rem;
    }
}

.tarea-search[b-s964si4q5h] {
    flex: 1 1 260px;
    max-width: 420px;
}

/* Tablero: columnas lado a lado en pantallas medianas/grandes (con scroll horizontal si no
   caben), apiladas verticalmente en celular -- el drag-and-drop nativo HTML5 no funciona bien
   en táctil de todas formas, así que en celular el usuario cambia de estado desde el detalle. */
.tarea-board[b-s964si4q5h] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 992px) {
    .tarea-board[b-s964si4q5h] {
        flex-direction: row;
        align-items: flex-start;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
}

.tarea-column[b-s964si4q5h] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .tarea-column[b-s964si4q5h] {
        flex: 1 1 280px;
        min-width: 280px;
        max-width: 340px;
    }
}

.tarea-column-header[b-s964si4q5h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    border-bottom: 2px solid var(--link);
    color: var(--link);
}

.tarea-column-header-secondary[b-s964si4q5h] {
    border-bottom-color: #6c757d;
    color: #6c757d;
}

.tarea-column-header-info[b-s964si4q5h] {
    border-bottom-color: #17a2b8;
    color: #17a2b8;
}

.tarea-column-header-warning[b-s964si4q5h] {
    border-bottom-color: #d39e00;
    color: #b58100;
}

.tarea-column-header-success[b-s964si4q5h] {
    border-bottom-color: #28a745;
    color: #28a745;
}

.tarea-column-count[b-s964si4q5h] {
    background-color: rgba(128, 128, 128, 0.25);
    color: var(--letra);
}

.tarea-column-body[b-s964si4q5h] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    min-height: 120px;
    max-height: 65vh;
    overflow-y: auto;
    transition: background-color 0.1s ease-in-out;
}

.tarea-column-drop-hover[b-s964si4q5h] {
    background-color: var(--fondo-resaltado);
}

.tarea-column-empty[b-s964si4q5h] {
    color: var(--letra-secondary);
    font-size: 0.8rem;
    text-align: center;
    margin: 1rem 0;
}

/* Tarjeta de tarea: borde izquierdo de color según prioridad, arrastrable con el mouse. */
.tarea-card[b-s964si4q5h] {
    background-color: var(--fondo);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-left: 4px solid #6c757d;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

    .tarea-card:active[b-s964si4q5h] {
        cursor: grabbing;
    }

    .tarea-card:hover[b-s964si4q5h] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

.tarea-card-prioridad-urgente[b-s964si4q5h] {
    border-left-color: #dc3545;
}

.tarea-card-prioridad-alta[b-s964si4q5h] {
    border-left-color: #fd7e14;
}

.tarea-card-prioridad-mediana[b-s964si4q5h] {
    border-left-color: #17a2b8;
}

.tarea-card-prioridad-baja[b-s964si4q5h] {
    border-left-color: #6c757d;
}

.tarea-card-vencida[b-s964si4q5h] {
    background-color: rgba(220, 53, 69, 0.06);
}

.tarea-card-header[b-s964si4q5h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.tarea-card-id[b-s964si4q5h] {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--letra-secondary);
}

.tarea-badge-prioridad-urgente[b-s964si4q5h] {
    background-color: #dc3545;
    color: white;
}

.tarea-badge-prioridad-alta[b-s964si4q5h] {
    background-color: #fd7e14;
    color: white;
}

.tarea-badge-prioridad-mediana[b-s964si4q5h] {
    background-color: #17a2b8;
    color: white;
}

.tarea-badge-prioridad-baja[b-s964si4q5h] {
    background-color: #6c757d;
    color: white;
}

.tarea-card-desc[b-s964si4q5h] {
    font-size: 0.85rem;
    color: var(--letra);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tarea-card-footer[b-s964si4q5h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.tarea-card-modulo[b-s964si4q5h] {
    font-size: 0.72rem;
    color: var(--letra-secondary);
}

.tarea-card-vencida-badge[b-s964si4q5h] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #dc3545;
}

.tarea-card-asignado[b-s964si4q5h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--letra-secondary);
    border-top: 1px solid rgba(128, 128, 128, 0.15);
    padding-top: 0.4rem;
}

.tarea-card-fecha[b-s964si4q5h] {
    font-weight: 600;
}

/* Pila deslizable de celular: lo que se apila son los ESTADOS (una "página" = una columna
   completa, con todas sus tarjetas adentro y scroll vertical propio), no las tarjetas una por
   una. scroll-snap centra una página a la vez, dejando ver un poco del borde de la
   anterior/siguiente a los lados (con menos escala/opacidad, ver actualizarProfundidadPila en
   Utilidades.js) para insinuar que hay algo detrás — deslizar de derecha a izquierda avanza de
   Asignado a En Proceso, etc.; de izquierda a derecha vuelve a la anterior. */
/* El alto real (no un vh fijo) lo pone ajustarAlturaPila (Utilidades.js): mide dónde termina
   quedando este contenedor después del título/toolbar/buscador (que ocupan más o menos según el
   ancho de pantalla) y lo estira hasta el fondo de la ventana. Un vh fijo dejaba espacio vacío
   abajo (cuando el toolbar ocupaba poco) o se quedaba corto y hacía scrollear TODA la página en
   vez de solo la lista — que es lo que aparecía como esa barra de scroll vertical a la derecha
   de toda la pantalla. El padding vertical es el que evita que ese mismo overflow recorte el
   box-shadow de la tarjeta activa (overflow-x:auto obliga a que el eje Y también recorte, así
   que sin este margen la sombra de arriba/abajo se veía cortada). */
.tarea-stack-scroller[b-s964si4q5h] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 6vw 0.75rem;
    gap: 4vw;
    scrollbar-width: none;
}

    .tarea-stack-scroller[b-s964si4q5h]::-webkit-scrollbar {
        display: none;
    }

.tarea-stack-page[b-s964si4q5h] {
    flex: 0 0 88vw;
    max-width: 420px;
    height: 100%;
    scroll-snap-align: center;
    transition: transform 0.12s ease-out, opacity 0.12s ease-out;
}

    /* Dentro de la pila, la lista de tarjetas debe llenar el alto de la página (fijado por
       ajustarAlturaPila) en vez del max-height:65vh de .tarea-column-body (pensado para el
       tablero de escritorio, donde varias columnas conviven en la misma pantalla). */
    .tarea-stack-page .tarea-column-body[b-s964si4q5h] {
        flex: 1;
        min-height: 0;
        max-height: none;
    }

/* Vista "Ver archivadas": lista simple de tarjetas en vez del tablero de 4 columnas, ya que
   acá no hace falta arrastrar nada. */
.tarea-archivadas[b-s964si4q5h] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tarea-card-archivada[b-s964si4q5h] {
    cursor: default;
    opacity: 0.9;
}

    .tarea-card-archivada .tarea-card-desc[b-s964si4q5h] {
        cursor: pointer;
    }

.tarea-card-archivada-acciones[b-s964si4q5h] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
}
/* /Pages/Tareas/Tareas.razor.rz.scp.css */
.tarea-toolbar[b-y2c94rx0ob] {
    margin-bottom: 1rem;
}

.tarea-card[b-y2c94rx0ob] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.15);
    border-radius: 0.9rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    min-width: 0;
    margin-bottom: 1.25rem;
}

.tarea-card-header[b-y2c94rx0ob] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.95rem;
    text-align: left;
    padding: 0.9rem 1.25rem;
    border-bottom: 2px solid var(--link);
}

.tarea-card .card-body[b-y2c94rx0ob] {
    padding: 1.25rem 1.5rem;
}

/* Tarjeta de identidad: N° ticket + estado + prioridad + stepper. */
.tarea-header-body[b-y2c94rx0ob] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.tarea-header-top[b-y2c94rx0ob] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tarea-ticket[b-y2c94rx0ob] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--letra);
}

.tarea-vencida-badge[b-y2c94rx0ob] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #dc3545;
}

.tarea-badge-estado-asignado[b-y2c94rx0ob] {
    background-color: #6c757d;
    color: white;
}

.tarea-badge-estado-enproceso[b-y2c94rx0ob] {
    background-color: #17a2b8;
    color: white;
}

.tarea-badge-estado-terminada[b-y2c94rx0ob] {
    background-color: #ffc107;
    color: #212529;
}

.tarea-badge-estado-aprobada[b-y2c94rx0ob] {
    background-color: #28a745;
    color: white;
}

.tarea-badge-estado-archivada[b-y2c94rx0ob] {
    background-color: #6c757d;
    color: white;
}

/* Indicadores de tiempo transcurrido (creación / última actividad) bajo el stepper. */
.tarea-meta-tiempo[b-y2c94rx0ob] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.75rem;
    color: var(--letra-secondary);
}

.tarea-badge-prioridad-urgente[b-y2c94rx0ob] {
    background-color: #dc3545;
    color: white;
}

.tarea-badge-prioridad-alta[b-y2c94rx0ob] {
    background-color: #fd7e14;
    color: white;
}

.tarea-badge-prioridad-mediana[b-y2c94rx0ob] {
    background-color: #17a2b8;
    color: white;
}

.tarea-badge-prioridad-baja[b-y2c94rx0ob] {
    background-color: #6c757d;
    color: white;
}

/* Stepper del flujo Asignado -> En Proceso -> Terminada -> Aprobada. */
.tarea-stepper[b-y2c94rx0ob] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tarea-step[b-y2c94rx0ob] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tarea-step-dot[b-y2c94rx0ob] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: rgba(128, 128, 128, 0.3);
    flex: 0 0 auto;
}

.tarea-step-label[b-y2c94rx0ob] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--letra-secondary);
}

.tarea-step-done .tarea-step-dot[b-y2c94rx0ob] {
    background-color: #28a745;
}

.tarea-step-done .tarea-step-label[b-y2c94rx0ob] {
    color: var(--letra);
}

.tarea-step-active .tarea-step-dot[b-y2c94rx0ob] {
    background-color: var(--link);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.tarea-step-active .tarea-step-label[b-y2c94rx0ob] {
    color: var(--link);
    font-weight: 700;
}

.tarea-step-line[b-y2c94rx0ob] {
    width: 1.5rem;
    height: 2px;
    background-color: rgba(128, 128, 128, 0.3);
}

.tarea-step-line-done[b-y2c94rx0ob] {
    background-color: #28a745;
}

/* Dos tarjetas de cabecera: 1 columna en celular, ambas en una fila desde tablet en
   adelante (solo son 2). */
.tarea-cards[b-y2c94rx0ob] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .tarea-cards[b-y2c94rx0ob] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Cada campo es una "tarjeta" propia (fondo levemente distinto, borde suave, esquinas
   redondeadas) en vez de una fila de formulario — se acomodan solas según el espacio
   disponible, sin puntos de quiebre fijos por ancho de pantalla. La descripción siempre ocupa
   el ancho completo. */
.tarea-fields[b-y2c94rx0ob] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.tarea-field[b-y2c94rx0ob] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    background-color: var(--fondo);
    border: 1px solid rgba(128, 128, 128, 0.15);
    border-radius: 0.6rem;
}

.tarea-field label[b-y2c94rx0ob] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--letra-secondary);
    font-weight: 700;
    margin-bottom: 0;
}

/* Campos de solo lectura (Creado Por, Creación): texto plano en vez de un input deshabilitado,
   que se ve apagado/sucio sin aportar nada (nunca se puede escribir en ellos). */
.tarea-field-texto .tarea-field-valor[b-y2c94rx0ob] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--letra);
}

.tarea-field-full[b-y2c94rx0ob] {
    grid-column: 1 / -1;
}

/* Prioridad con un acento de color a la izquierda (igual idea que las tarjetas del tablero),
   en vez de pintar todo el select de un color sólido — eso hacía que la lista desplegada de
   opciones se viera con el mismo color sólido y fuera casi ilegible. */
.tarea-select-pill[b-y2c94rx0ob] {
    font-weight: 700;
    border-left-width: 4px;
    border-left-style: solid;
}

.tarea-select-prioridad-urgente[b-y2c94rx0ob] {
    border-left-color: #dc3545;
    color: #dc3545;
}

.tarea-select-prioridad-alta[b-y2c94rx0ob] {
    border-left-color: #fd7e14;
    color: #fd7e14;
}

.tarea-select-prioridad-mediana[b-y2c94rx0ob] {
    border-left-color: #17a2b8;
    color: #17a2b8;
}

.tarea-select-prioridad-baja[b-y2c94rx0ob] {
    border-left-color: #6c757d;
    color: #6c757d;
}

    .tarea-select-pill option[b-y2c94rx0ob] {
        color: var(--letra);
        font-weight: 400;
    }

.tarea-field-editor[b-y2c94rx0ob]  .rz-html-editor-content {
    background-color: var(--fondo-modal);
    color: var(--letra);
}

/* Vista de solo lectura de la descripción: texto renderizado (no el editor deshabilitado, que
   parece interactivo aunque no lo sea) más un botón para abrir el editor en un modal. */
.tarea-descripcion-vista[b-y2c94rx0ob] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.tarea-descripcion-html[b-y2c94rx0ob] {
    color: var(--letra);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 100%;
    overflow-wrap: break-word;
}

    .tarea-descripcion-html[b-y2c94rx0ob]  p,
    .tarea-descripcion-html[b-y2c94rx0ob]  ul,
    .tarea-descripcion-html[b-y2c94rx0ob]  ol {
        margin: 0 0 0.5rem 0;
    }

    .tarea-descripcion-html[b-y2c94rx0ob]  img {
        max-width: 100%;
        border-radius: 0.4rem;
    }

.tarea-descripcion-vacia[b-y2c94rx0ob] {
    color: var(--letra-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

/* Feed de Actividad y Seguimiento: timeline tipo chat en vez de la grilla + textarea
   compartida que tenía antes. */
.tarea-feed[b-y2c94rx0ob] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    max-height: 420px;
    overflow-y: auto;
}

.tarea-feed-empty[b-y2c94rx0ob] {
    color: var(--letra-secondary);
    font-size: 0.85rem;
    text-align: center;
    margin: 1rem 0;
}

.tarea-feed-item[b-y2c94rx0ob] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.tarea-feed-icon[b-y2c94rx0ob] {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

.tarea-feed-icon-actividad[b-y2c94rx0ob] {
    background-color: #007bff;
}

.tarea-feed-icon-seguimiento[b-y2c94rx0ob] {
    background-color: #28a745;
}

.tarea-feed-content[b-y2c94rx0ob] {
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--fondo-resaltado);
    border-radius: 0.6rem;
    padding: 0.65rem 0.9rem;
}

.tarea-feed-meta[b-y2c94rx0ob] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.tarea-feed-usuario[b-y2c94rx0ob] {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--letra);
}

.tarea-badge-tipo-actividad[b-y2c94rx0ob] {
    background-color: #007bff;
    color: white;
}

.tarea-badge-tipo-seguimiento[b-y2c94rx0ob] {
    background-color: #28a745;
    color: white;
}

.tarea-feed-fecha[b-y2c94rx0ob] {
    font-size: 0.72rem;
    color: var(--letra-secondary);
    margin-left: auto;
}

.tarea-feed-borrar[b-y2c94rx0ob] {
    padding: 0 0.15rem;
    color: var(--letra-secondary);
    line-height: 1;
}

    .tarea-feed-borrar:hover[b-y2c94rx0ob] {
        color: #dc3545;
    }

.tarea-feed-texto[b-y2c94rx0ob] {
    font-size: 0.85rem;
    color: var(--letra);
    white-space: pre-wrap;
}

/* Caja para agregar un nuevo seguimiento, siempre al fondo del feed. */
.tarea-compose[b-y2c94rx0ob] {
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    padding: 0.85rem 1rem;
}
/* /Pages/Traslados/Traslados.razor.rz.scp.css */
.traslado-toolbar[b-myget3kx0i] {
    margin-bottom: 1rem;
}

.traslado-alert[b-myget3kx0i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    padding: 0.5rem 0.9rem;
}

/* Tres tarjetas de cabecera: 1 columna en celular, 2 en tablet, las 3 en una fila en
   escritorio/portátil. Se dejan del mismo alto (comportamiento default de CSS Grid). */
.traslado-cards[b-myget3kx0i] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .traslado-cards[b-myget3kx0i] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .traslado-cards[b-myget3kx0i] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.traslado-card[b-myget3kx0i] {
    background-color: var(--fondo-modal);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.traslado-card-header[b-myget3kx0i] {
    background: transparent;
    color: var(--link);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.5rem 1rem 0.35rem;
    border-bottom: 2px solid var(--link);
}

.traslado-card .card-body[b-myget3kx0i] {
    padding: 0.6rem 1rem;
}

.traslado-fields[b-myget3kx0i] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.traslado-field[b-myget3kx0i] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .traslado-field label[b-myget3kx0i] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--letra-secondary);
        font-weight: 600;
        margin-bottom: 0;
    }

/* En pantallas medianas/grandes el label va al lado del campo; en móvil queda arriba. */
@media (min-width: 768px) {
    .traslado-field[b-myget3kx0i] {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        min-height: 1.9rem;
    }

    .traslado-field[b-myget3kx0i] >  label {
        flex: 0 0 150px;
    }

    .traslado-field[b-myget3kx0i] >  *:not(label) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Campos que ocupan poco espacio (pesos, valores, flete): van uno al lado del otro
   siempre, incluso en celular, para no gastar una fila completa por cada uno. */
.traslado-field-pair[b-myget3kx0i] {
    display: flex;
    gap: 0.6rem;
}

    .traslado-field-pair > .traslado-field[b-myget3kx0i] {
        flex: 1 1 0;
        min-width: 0;
    }

/* Tarjetas de producto/caja para celular (pestañas Traslado y Cajas). */
.traslado-product-cards[b-myget3kx0i] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.traslado-product-card[b-myget3kx0i] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.traslado-product-card-header[b-myget3kx0i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.traslado-product-upc[b-myget3kx0i] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--letra);
}

.traslado-product-meta[b-myget3kx0i] {
    font-size: 0.75rem;
    color: var(--letra-secondary);
    margin-left: 0.5rem;
}

.traslado-product-desc[b-myget3kx0i] {
    font-size: 0.85rem;
    color: var(--letra);
    margin: 0.3rem 0 0.5rem;
}

.traslado-product-grid[b-myget3kx0i] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
}

/* Tarjetas para Observaciones y Códigos en celular: mismo look que traslado-product-card,
   solo lectura. */
.traslado-history-cards[b-myget3kx0i] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.traslado-history-card[b-myget3kx0i] {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    background-color: var(--fondo-modal);
}

.traslado-history-card-header[b-myget3kx0i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* La tabla de Observaciones (Ojo/Usuario/Fecha/Comentario) es auto-layout con width:100%,
   así que por defecto el navegador reparte el ancho sobrante entre TODAS las columnas por
   igual, dejando Usuario/Fecha/el botón mucho más anchos que su contenido y Comentario
   recortado sin aprovechar ese espacio libre. Se fuerzan las columnas angostas a su ancho
   mínimo de contenido (width:1%) para que Comentario (width:100%) absorba el resto. */
[b-myget3kx0i] .traslado-obs-col-narrow {
    width: 1% !important;
    white-space: nowrap !important;
}

[b-myget3kx0i] .traslado-obs-col-wide {
    width: 100% !important;
}

/* Comentario recortado con puntos suspensivos en la tabla de escritorio; el botón del ojo
   abre el modal y el title nativo (tooltip) muestran el texto completo. Se usa !important
   porque hay una regla global (tbody { white-space: nowrap; ... } en app.css, necesaria
   para otras tablas) que de otra forma gana y deja que la columna crezca con el texto
   completo, forzando el scroll horizontal en vez de recortar. */
.traslado-observacion-truncate[b-myget3kx0i] {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: help;
}

/* En "Información del Traslado" los nombres de campo se acortaron (Peso Sol., Valor Sol., etc.),
   así que la columna de la etiqueta puede ser más angosta y dejarle más espacio al valor. */
@media (min-width: 768px) {
    .traslado-fields-compact .traslado-field[b-myget3kx0i] >  label {
        flex: 0 0 90px;
    }
}
/* /Shared/FiltroFechaRango.razor.rz.scp.css */
.filtro-fecha-boton[b-k6jb5tyf16] {
    white-space: nowrap;
}

.filtro-fecha-backdrop[b-k6jb5tyf16] {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.filtro-fecha-popover[b-k6jb5tyf16] {
    position: fixed;
    z-index: 1101;
    min-width: 200px;
    background-color: var(--fondo-modal, #fff);
    color: var(--letra, #212529);
    border: 1px solid rgba(128, 128, 128, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    padding: 0.75rem;
}
/* /Shared/IndicadorCargaFondo.razor.rz.scp.css */
.indicador-carga-fondo[b-n3fd1k3b3i] {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--fondo-modal, #212529);
    color: var(--letra, #fff);
    border: 1px solid rgba(128, 128, 128, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.8rem;
}
/* /Shared/InputConSugerencias.razor.rz.scp.css */
.input-sugerencias-wrap[b-aiwcuazwvl] {
    position: relative;
}

.input-sugerencias-backdrop[b-aiwcuazwvl] {
    position: fixed;
    inset: 0;
    z-index: 1090;
}

.input-sugerencias-lista[b-aiwcuazwvl] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1091;
    margin: 2px 0 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background-color: var(--fondo-modal, #fff);
    color: var(--letra, #212529);
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.4rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

    .input-sugerencias-lista li[b-aiwcuazwvl] {
        padding: 0.35rem 0.75rem;
        font-size: 0.85rem;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .input-sugerencias-lista li:hover[b-aiwcuazwvl] {
            background-color: rgba(128, 128, 128, 0.15);
        }
/* /Shared/LanguageSelector.razor.rz.scp.css */
.language-selector[b-joxf3zib1n] {
    padding: 0.25rem 1rem 0.7rem;
}

.language-selector label[b-joxf3zib1n] {
    display: block;
    margin: 0 0 0.35rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.language-selector__control[b-joxf3zib1n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.language-selector__control:focus-within[b-joxf3zib1n] {
    border-color: rgba(115, 190, 255, 0.95);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 0 0.18rem rgba(76, 167, 255, 0.25);
}

.language-selector__control span[b-joxf3zib1n] {
    color: #9fd5ff;
    font-size: 1rem;
}

.language-selector select[b-joxf3zib1n] {
    width: 100%;
    min-height: 2rem;
    border: 0;
    outline: 0;
    appearance: auto;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
}

.language-selector select option[b-joxf3zib1n] {
    background: #263238;
    color: #fff;
}
/* /Shared/Login.razor.rz.scp.css */
body[b-peqzx6wf88] {
    font-family: 'Overpass', sans-serif;
    font-weight: normal;
    font-size: 100%;
    color: #1b262c;
    margin: 0;
    background: linear-gradient(160deg, #0f4c75 0%, #1b262c 100%);
}

#contenedor[b-peqzx6wf88] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px;
    min-width: 100vw;
    min-height: 100vh;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

#central[b-peqzx6wf88] {
    max-width: 380px;
    width: 100%;
}

.titulo[b-peqzx6wf88] {
    font-size: 220%;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-bottom: 4px;
}

.subtitulo[b-peqzx6wf88] {
    font-size: 90%;
    color: #bbe1fa;
    text-align: center;
    margin-bottom: 24px;
    opacity: 0.85;
}

#login[b-peqzx6wf88] {
    width: 100%;
    padding: 40px 32px;
    background-color: #3282b8;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    border-radius: 14px;
    box-sizing: border-box;
}

    #login input[b-peqzx6wf88] {
        font-family: 'Overpass', sans-serif;
        font-size: 100%;
        color: #1b262c;
        display: block;
        width: 100%;
        height: 42px;
        margin-bottom: 12px;
        padding: 5px 5px 5px 12px;
        box-sizing: border-box;
        border: 2px solid transparent;
        border-radius: 8px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        #login input[b-peqzx6wf88]::placeholder {
            font-family: 'Overpass', sans-serif;
            color: #8a8a8a;
        }

        #login input:focus[b-peqzx6wf88] {
            outline: none;
            border-color: #bbe1fa;
            box-shadow: 0 0 0 3px rgba(187,225,250,0.35);
        }

        #login input:disabled[b-peqzx6wf88] {
            opacity: 0.7;
        }

    #login .radio[b-peqzx6wf88] {
        font-family: 'Overpass', sans-serif;
        font-size: 100%;
        color: #1b262c;
        display: block;
        width: 100%;
        background-color: white;
        margin-bottom: 12px;
        padding: 8px 12px;
        box-sizing: border-box;
        border-radius: 8px;
    }

        #login .radio label[b-peqzx6wf88] {
            font-size: 72%;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #6c757d;
            margin-bottom: 4px;
            display: block;
        }

    #login button[b-peqzx6wf88] {
        font-family: 'Overpass', sans-serif;
        font-size: 105%;
        font-weight: 700;
        color: #1b262c;
        width: 100%;
        height: 44px;
        border: none;
        border-radius: 8px;
        background-color: #bbe1fa;
        margin-top: 6px;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    }

        #login button:hover:not(:disabled)[b-peqzx6wf88] {
            background-color: #0f4c75;
            color: #bbe1fa;
        }

        #login button:disabled[b-peqzx6wf88] {
            opacity: 0.85;
            cursor: default;
        }

.pie-form[b-peqzx6wf88] {
    font-size: 90%;
    text-align: center;
    margin-top: 15px;
}

    .pie-form a[b-peqzx6wf88] {
        display: block;
        text-decoration: none;
        color: #bbe1fa;
        margin-bottom: 3px;
    }

        .pie-form a:hover[b-peqzx6wf88] {
            color: #0f4c75;
        }

.inferior[b-peqzx6wf88] {
    margin-top: 10px;
    font-size: 90%;
    text-align: center;
}

    .inferior a[b-peqzx6wf88] {
        display: block;
        text-decoration: none;
        color: #bbe1fa;
        margin-bottom: 3px;
    }

        .inferior a:hover[b-peqzx6wf88] {
            color: #3282b8;
        }
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-d35eagfz5z] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main[b-d35eagfz5z] {
    flex: 1;
}

.form-check-label[b-d35eagfz5z] {
    margin-right: 1.75rem;
}

.sidebar[b-d35eagfz5z] {
    background-image: linear-gradient(180deg, var(--ini-side) 0%, var(--fin-side) 70%);
    position: sticky;
    top: 0;
    z-index: 10;
    overflow-y: auto;
}

.footer[b-d35eagfz5z] {
    border-bottom: 1px;
    justify-content: flex-end;
    height: 3.5rem;
    align-items: center;
    display: flex;
    flex-direction: row;
}

.top-row[b-d35eagfz5z] {
    background-color: rgb(5, 39, 103, 0.4);
    color: white !important;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-d35eagfz5z]  a, .top-row .btn-link[b-d35eagfz5z] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

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

.blazor-error-ui[b-d35eagfz5z] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.blazorise-modal-close[b-d35eagfz5z] {
    display: none;
}

@media (max-width: 1199.98px) {
    .top-row:not(.auth)[b-d35eagfz5z] {
        display: none;
    }

    .top-row.auth[b-d35eagfz5z] {
        justify-content: space-between;
    }

    .top-row a[b-d35eagfz5z], .top-row .btn-link[b-d35eagfz5z] {
        margin-left: 0;
    }

    .rz-sidebar[b-d35eagfz5z]{
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .page[b-d35eagfz5z] {
        flex-direction: row;
    }

    .main[b-d35eagfz5z] {
        width: 80%;
    }

    .sidebar[b-d35eagfz5z] {
        /*width: 245px;*/
        height: 100vh;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .top-row[b-d35eagfz5z] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-alterna[b-d35eagfz5z] {
        display: none;
    }

    .main > div[b-d35eagfz5z] {
        padding-left: 0.3rem !important;
        padding-right: 1.5rem !important;
    }

    .footer[b-d35eagfz5z] {
        display: none;
    }
}

@media (min-width: 1200px) {

    .container[b-d35eagfz5z] {
        max-width: 6500px;
    }
}

/*------------------------------------------------------------*/
/*Stop country name text from wrapping, and truncate with ellipsis*/
[b-d35eagfz5z] tbody {
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    text-overflow: ellipsis;
}

/*Stop the last page from collapsing to the number of rows on it*/
[b-d35eagfz5z] tr {
    height: 1.8rem;
}

    /*Subtle stripe effect*/
    [b-d35eagfz5z] tr:nth-child(even) {
        background: rgba(128,128,128,0.2);
    }



/*Magnifying glass*/
[b-d35eagfz5z] .country-name .col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>');
}


/*Sticky header while scrolling*/
[b-d35eagfz5z] thead {
    position: sticky;
    top: 0;
    background-color: #eee;
    white-space: normal;
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-rwrfhcispu] {
    background-color: rgba(255, 255, 255, 0.1);
}
.flex-column-over[b-rwrfhcispu] {
    overflow-y: auto;
}
.top-row[b-rwrfhcispu] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
    position: sticky;
    top: 0;
    z-index: 1;
}

.navbar-brand[b-rwrfhcispu] {
    font-size: 1.1rem;
}

.nav-buscador[b-rwrfhcispu] {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
}

    .nav-buscador input[b-rwrfhcispu] {
        background-color: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.15);
        color: white;
        height: 29px;
    }

        .nav-buscador input[b-rwrfhcispu]::placeholder {
            color: rgba(255,255,255,0.5);
        }

        .nav-buscador input:focus[b-rwrfhcispu] {
            background-color: rgba(255,255,255,0.12);
            color: white;
        }

.oi[b-rwrfhcispu] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-rwrfhcispu] {
    font-size: 0.9rem;
    padding-bottom: 0.4rem;
}

    .nav-item:first-of-type[b-rwrfhcispu] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-rwrfhcispu] {
        padding-bottom: 1rem;
    }

    .nav-item[b-rwrfhcispu]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 0.9rem;
    }

.hijo[b-rwrfhcispu] {
    background-color: rgba(56, 56, 56, 0.60);
    border-radius: 7px;
}

/* Separa el menú en bloques (Operación / Gestión / Sistema) — con ~13 ítems de primer nivel
   todos al mismo nivel visual, costaba escanear rápido dónde estaba cada cosa. */
.nav-section-label[b-rwrfhcispu] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
    padding: 0.9rem 1rem 0.35rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 0.4rem;
}

    .nav-section-label:first-of-type[b-rwrfhcispu] {
        border-top: none;
        margin-top: 0;
        padding-top: 0.25rem;
    }

.nav-item[b-rwrfhcispu]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-rwrfhcispu]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 1199.98px) {
    .navbar-toggler[b-rwrfhcispu] {
        display: none;
    }

    .acount[b-rwrfhcispu] {
        display: none;
    }

    .flex-column-over[b-rwrfhcispu]{
        min-width: 240px;
    }

    .collapse[b-rwrfhcispu]{
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* /Shared/SelectBuscable.razor.rz.scp.css */
.select-buscable-boton[b-5hxep4xzzf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
    background-color: var(--fondo, white);
    color: var(--letra, inherit);
}

.select-buscable-texto[b-5hxep4xzzf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-buscable-backdrop[b-5hxep4xzzf] {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.select-buscable-popover[b-5hxep4xzzf] {
    position: fixed;
    z-index: 1101;
    min-width: 260px;
    max-width: 340px;
    background-color: var(--fondo-modal, #fff);
    color: var(--letra, #212529);
    border: 1px solid rgba(128, 128, 128, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    padding: 0.6rem;
}

.select-buscable-lista[b-5hxep4xzzf] {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
}

    .select-buscable-lista li[b-5hxep4xzzf] {
        padding: 0.35rem 0.5rem;
        font-size: 0.85rem;
        cursor: pointer;
        border-radius: 0.3rem;
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .select-buscable-lista li:hover[b-5hxep4xzzf] {
            background-color: rgba(128, 128, 128, 0.15);
        }

    .select-buscable-lista li.select-buscable-vacio[b-5hxep4xzzf] {
        cursor: default;
        color: var(--letra-secondary, #6c757d);
        justify-content: center;
    }

        .select-buscable-lista li.select-buscable-vacio:hover[b-5hxep4xzzf] {
            background-color: transparent;
        }