@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');


:root {
    /*modo claro*/
    --fondo: withe;
    --letra: black;
    --link: #0071c1;
    --fondo-resaltado: #f7f7f7;
    --fondo-resaltado-2: #e2e3e5;
    --ini-side: rgb(5, 39, 103);
    --fin-side: #3a0647;
    --in-disabled: #e9ecef;
    --fondo-modal: white;
    --letra-secondary: #6c757d;
    --letra-dark: #343a40;
    --fondo-fija: white;
    --even: #E6E6E6;
    --hover: #A9A9A9;
    --active: rgba(67, 64, 210, 0.12);
    --rz-shadow-10: 0px 24px 38px rgba(0, 0, 0, 0.14), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 11px 15px rgba(0, 0, 0, 0.14);
}

.modo-oscuro {
    --fondo: #020c1a;
    --letra: white;
    --fondo-resaltado: #393939;
    --fondo-resaltado-2: #414648;
    --link: #3ca4ff;
    --ini-side: rgb(5, 39, 103);
    --fin-side: #020c1a;
    --in-disabled: #424242;
    --fondo-modal: #020c1a;
    --letra-secondary: white;
    --letra-dark: white;
    --fondo-fija: #020c1a;
    --even: #1C242F;
    --hover: #585C60;
    --active: #052767;
    --rz-shadow-10: 0px 24px 38px rgb(255 255 255 / 14%), 0px 9px 46px rgb(255 255 255 / 12%), 0px 11px 15px rgb(255 255 255 / 14%);
}

.modo-prueba {
    --fondo: withe;
    --letra: black;
    --link: #0071c1;
    --fondo-resaltado: #f7f7f7;
    --fondo-resaltado-2: #e2e3e5;
    --ini-side: #9B122B;
    --fin-side: #9B122B;
    --in-disabled: #e9ecef;
    --fondo-modal: white;
    --letra-secondary: #6c757d;
    --letra-dark: #343a40;
    --fondo-fija: white;
    --even: #E6E6E6;
    --hover: #A9A9A9;
    --active: rgba(67, 64, 210, 0.12);
}

.btn-outline-secondary {
    color: var(--letra-secondary) !important;
}

.btn-outline-dark {
    color: var(--letra-dark) !important;
}

.btn-outline-secondary:hover {
    color: white !important;
}

.btn-outline-dark:hover {
    color: white !important;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.89rem;
    /* Evita que un gesto de scroll horizontal (deslizar en el trackpad, o arrastrar algo como
       el handle de redimensionar imágenes) dispare la navegación de "atrás/adelante" del
       navegador cuando llega al borde de la página — sin esto se pierden cambios sin guardar
       aunque el diálogo de confirmación de NavigationLock nunca llega a dispararse, porque el
       navegador intercepta el gesto antes de que sea una navegación real. */
    overscroll-behavior-x: none;
}

/* Causa raíz del scroll horizontal de página completa en los listados (Compras, Traslados,
   etc. con columnas anchas en su RadzenDataGrid): RadzenBody es una celda de CSS Grid dentro
   de RadzenLayout (grid-template-areas en MainLayout.razor) y, como cualquier celda de grid,
   no se achica por debajo del ancho intrínseco de su contenido salvo que se le fije
   min-width:0 explícitamente — el mismo problema que ya se había resuelto en las tarjetas del
   dashboard (.dashboard-card). Una RadzenDataGrid con columnas cuya suma de Width en px supera
   el ancho de la pantalla empujaba entonces TODA la página (sidebar incluido) a desbordarse en
   vez de que solo la grilla scrolleara internamente (que es lo que su propio CSS
   .rz-data-grid-data{overflow:auto} ya hace, una vez que el contenedor de afuera sí se achica).
   Con este único cambio global se arregla en todos los listados de la app a la vez, sin tener
   que tocar cada página por separado. */
.rz-body {
    min-width: 0;
}

.rz-data-grid {
    min-width: 0;
}

/* NOTA: hubo aquí una regla ".rz-data-grid-data .rz-grid-table { width:auto; min-width:100%;
   table-layout:fixed }" para que la tabla se desbordara en vez de comprimir columnas. Se quitó
   por completo: forzaba a TODAS las columnas sin Width explícito (ej. "Observación" en Listado
   de Compras) a estirarse para llenar el espacio sobrante y dejaban de poder redimensionarse
   con el mouse — un efecto global no deseado para un ajuste que solo hacía falta en casos muy
   puntuales (esos se resuelven aparte, por página/columna, no con una regla que toque todas las
   grillas de la app). Con esto la grilla vuelve a su comportamiento nativo de Radzen: cada
   columna respeta su Width y se puede redimensionar libremente. */

/* Causa raíz real (y mucho más grande) del scroll horizontal por el toolbar/botones en
   celular en prácticamente todos los listados: wwwroot/css/bootstrap/bootstrap.min.css tiene
   una regla ".col-sm-1{flex:0 0 8.333%...}" (y el resto de .col-sm-2 a .col-sm-11) DUPLICADA
   por fuera de su @media (min-width:576px) — es decir, existe una copia de esa regla que no
   tiene ninguna condición de pantalla y por lo tanto se aplica siempre, incluso en celular.
   El resultado: en vez de apilarse a 100% de ancho por debajo de 576px (el comportamiento
   estándar y correcto de Bootstrap), estas columnas se quedan SIEMPRE en su ancho porcentual
   — un botón dentro de un .col-sm-1 (8.33% de una pantalla de celular) no cabe, y ese
   desborde es lo que se ve como "scroll horizontal por el botón" en Compras, Ingresos,
   Traslados, Despachos, etc. Esta regla restaura el comportamiento correcto sin tener que
   arreglar (ni poder confiar en) el archivo de Bootstrap ya minificado.
   Importante: el selector va con el combinador directo ".row > " porque .col-sm también se
   reutiliza fuera de la grilla de Bootstrap (p. ej. NavMenu.razor usa "col-sm"/"col-sm-2" solo
   como utilidad de ancho dentro de un <a> con display:flex) — sin ese scope, forzar
   flex:0 0 100% en CADA hijo de ese flex container (que no es un .row y no envuelve) hacía que
   los dos hijos pidieran 100% cada uno sin poder apilarse, y ESO generaba scroll horizontal en
   el menú móvil. */
@media (max-width: 575.98px) {
    .row > [class*="col-sm"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

canvas {
    background-color: white;
    border-radius: 10px;
}

.col-title-text[b-b7yucal7gj] {
    white-space: normal !important;
}

h1:focus {
    outline: none;
}

.gridhijo {
    height: auto;
    overflow-y: auto;
}

[b-d35eagfz5z] thead {
    font-size: 0.75rem !important;
}

a, .btn-link {
    color: var(--link);
}

.alert-secondary {
    background-color: var(--fondo-resaltado-2);
    color: var(--letra);
}

.table {
    color: var(--letra);
}

div.main {
    background-color: var(--fondo);
    color: var(--letra);
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 0.5rem;
}
/* ------------------------------------------------------------ */
.loadingimg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

@keyframes fadeIn {
    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

.fade-in {
    animation: fadeIn 2s ease-in-out;
}
/* ------------------------------------------------------------ */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.my-custom-modal-class {
    background-color: var(--fondo-modal) !important;
    width: 100% !important;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
}

/* Modal a pantalla casi completa (para el editor de descripción de tareas: aprovecha mejor
   el espacio que el tamaño automático que usan los demás modales de la app). El overflow:hidden
   es necesario porque solo fijar "height" en un contenedor flex no evita que su contenido lo
   empuje más alto — sin esto, una descripción larga desbordaba el modal entero (y la página)
   en vez de scrollear solamente adentro del editor. */
.tarea-editor-modal-fullheight {
    height: calc(100vh - 60px) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .tarea-editor-modal-fullheight .bm-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

th[b-vznuo5fmpv].fija {
    position: sticky !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 153px;
}

th[b-vznuo5fmpv].fija2 {
    width: 175px;
}

th[b-vznuo5fmpv].fija3 {
    position: sticky !important;
    top: 0;
    left: 124px;
    bottom: 0;
    width: 219px
}

th[b-vznuo5fmpv].fijaprecio {
    position: sticky !important;
    top: 0;
    left: 312px;
    bottom: 0;
}

th[b-vznuo5fmpv].fijacant {
    position: sticky !important;
    top: 0;
    left: 429px;
    bottom: 0;
}

th[b-vznuo5fmpv].ColthCant {
    width: 20px;
}

#blazor-error-ui {
    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;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

td.fijaprecio {
    position: sticky !important;
    left: 312px !important;
    background-color: var(--fondo-modal) !important;
    border-bottom: rgba(128, 128, 128, 0.2) solid;
}

td.fijacant {
    position: sticky !important;
    left: 429px !important;
    background-color: var(--fondo-modal) !important;
    border-bottom: rgba(128, 128, 128, 0.2) solid;
}

td.fija {
    position: sticky !important;
    left: 0px !important;
    background-color: var(--fondo-modal) !important;
    border-bottom: rgba(128, 128, 128, 0.2) solid;
}

td.fija2 {
    background-color: var(--fondo-modal) !important;
    border-bottom: rgba(128, 128, 128, 0.2) solid;
}

td.fija3 {
    position: sticky !important;
    left: 124px !important;
    background-color: var(--fondo-modal) !important;
    border-bottom: rgba(128, 128, 128, 0.2) solid;
}

th {
    color: black;
}

    th.fija {
        background-color: #eee;
        z-index: 1;
    }

    th.fija2 {
        background-color: #eee;
    }

    th.fija3 {
        background-color: #eee;
        z-index: 1;
    }

    th.fijaprecio {
        background-color: #eee;
        z-index: 1;
    }

    th.fijacant {
        background-color: #eee;
        width: 20px;
        z-index: 1;
    }

tbody tr:hover {
    background: var(--hover) !important; /* Cambia el color al pasar el cursor */
    color: var(--letra);
}

tbody tr:nth-child(even):hover {
    background: var(--hover) !important; /* Cambia el color al pasar el cursor */
    color: var(--letra);
}

/*tr:nth-child(even) .fija{
    background: rgba(227,227,227) !important;
}*/

.sinh tbody tr:hover {
    background: var(--hover) !important; /* Cambia el color al pasar el cursor */
    color: var(--letra);
}

.sinh tbody tr:nth-child(even):hover {
    background: var(--hover) !important; /* Cambia el color al pasar el cursor */
    color: var(--letra);
}

.gridpit {
    height: 36rem;
    overflow-y: auto;
    margin-top: 10px;
}

.search-box {
    height: 100%;
}

    .search-box:before {
        content: ' ';
        width: 1.25rem;
        height: 1.25rem;
        position: absolute;
        left: 1.5rem;
        top: calc(50% - 1.25rem/2);
        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>');
    }

input[type=search]:focus {
    border-color: rgb(59 130 246);
    outline-color: rgb(59 130 246);
}

input[type=search] {
    width: 100%;
    height: 100%;
    padding: 0.1rem 0.1rem 0.1rem 2.5rem;
    color: rgb(19 83 220);
    background-color: rgb(249 250 251);
    border: 1px solid rgb(209 213 219);
    border-radius: 0.5rem;
    outline-offset: 1px;
}

/*estilos para el scroll bar*/
::-webkit-scrollbar {
    -webkit-appearance: none !important;
}

    ::-webkit-scrollbar:vertical {
        width: 10px !important;
    }

::-webkit-scrollbar-button:increment, .contenedor::-webkit-scrollbar-button {
    display: none !important;
}

::-webkit-scrollbar:horizontal {
    height: 10px !important;
}

::-webkit-scrollbar-thumb {
    background-color: #797979 !important;
    border-radius: 20px !important;
    border: 2px solid #f1f2f3 !important;
}

::-webkit-scrollbar-track {
    border-radius: 10px !important;
}

.DesDesNu {
    white-space: break-spaces !important;
}

/* Para columnas de nombre/descripción que necesitan verse en una sola línea (sin el forzado
   de salto de línea de .DesDesNu) con un ancho cómodo en vez del que decida el navegador. */
.col-ancho-nombre {
    white-space: nowrap !important;
}

    th.col-ancho-nombre {
        width: 260px;
    }
/* ------------------------------------------------------------ */
/* Stop country name text from wrapping, and truncate with ellipsis */
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 */
tr {
    height: 1.8rem;
}

    /* Subtle stripe effect */
    tr:nth-child(even) {
        background: var(--even);
    }



/* Magnifying glass */
.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 */
thead {
    position: sticky;
    top: 0;
    background-color: #eee;
    white-space: normal;
    z-index: 2;
}

.container {
    max-width: 100% !important;
}

table {
    min-width: 100%
}

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

.modal-content {
    background-color: var(--fondo-modal);
}

/* Evita que la página de atrás siga haciendo scroll mientras hay un modal abierto
   (Utilidades.js: bloquearScrollFondo/desbloquearScrollFondo). Se aplica tanto a <body>
   como a .rz-body (el contenedor que realmente scrollea dentro de RadzenLayout). */
.modal-scroll-lock {
    overflow: hidden !important;
}

.close {
    color: var(--letra);
}

.form-control {
    background-color: var(--fondo);
    color: var(--letra);
}

/* Campos deshabilitados (modo lectura, el caso más común en formularios ya guardados):
   se muestran como texto plano con una línea inferior en vez de una caja gris, para que
   la información sea más legible y el formulario no se vea apagado. Antes usaba
   var(--in-disabled) como fondo gris; ese estilo quedó reemplazado por este en todo el
   proyecto (probado primero en Pedidos). */
.form-control:disabled {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0;
    padding-left: 0.1rem;
    color: var(--letra);
    font-weight: 500;
}

.go-previous[b-3qssc0bm46], .go-next[b-3qssc0bm46], .go-first[b-3qssc0bm46], .go-last[b-3qssc0bm46] {
    background-color: white !important;
    border-radius: 5px;
}

.bm-close {
    color: var(--letra);
}

.rz-datatable {
    background-color: var(--fondo) !important;
    padding: 0px;
    padding-left: 5px;
}

td .rz-cell-data {
    color: var(--color) !important;
    padding: 0px;
    padding-left: 5px;
}


th.rz-unselectable-text.rz-sortable-column.rz-frozen-cell.rz-frozen-cell-left.rz-frozen-cell-left-end.rz-text-align-left {
    background-color: white !important;
}

.rz-grid-table-fixed .rz-frozen-cell-left {
    padding: 0px;
    padding-left: 5px;
}

td.rz-frozen-cell.rz-frozen-cell-left.rz-frozen-cell-left-end {
    background-color: var(--even) !important;
}



.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: var(--even) !important;
    padding: 0px;
    padding-left: 5px;
}

.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even):is(:hover) > td {
    background-color: var(--hover) !important; /* Cambia el color al pasar el cursor */
    color: var(--letra);
    padding: 0px;
    padding-left: 5px;
}

.rz-grid-table-fixed tbody > tr:not(.rz-expanded-row-content):nth-child(odd):is(:hover) > td {
    background-color: var(--hover) !important;
}

.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td {
    background-color: var(--fondo-fija) !important;
    padding: 0px;
    padding-left: 5px;
}

.rz-grid-table-fixed tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td {
    background-color: var(--fondo-fija) !important;
    padding: 0px;
    padding-left: 5px;
}

.rz-paginator-page.rz-state-active {
    background-color: var(--active) !important;
}


.rz-datatable-thead th .rz-column-title-content, .rz-grid-table thead th .rz-column-title-content {
    display: inline-block !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.descripcion .rz-cell-data {
    white-space: normal !important;
}

.rz-layout {
    background-color: var(--fondo) !important;
    color: var(--letra) !important;
}

.rz-header {
    background-image: linear-gradient(180deg, var(--ini-side) 0%, var(--fin-side) 70%);
}

.top-row[b-d35eagfz5z] {
    background-image: linear-gradient(180deg, var(--ini-side) 0%, var(--fin-side) 70%);
}

.rallitas{
    background-color: var(--letra) !important;
}

.rz-header {
    color: var(--letra) !important;
}