@import '_content/KosherClick.Components/KosherClick.Components.8cb4hjw4gq.bundle.scp.css';

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-im67qa3usy],
.components-reconnect-repeated-attempt-visible[b-im67qa3usy],
.components-reconnect-failed-visible[b-im67qa3usy],
.components-pause-visible[b-im67qa3usy],
.components-resume-failed-visible[b-im67qa3usy],
.components-rejoining-animation[b-im67qa3usy] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SignInLayout.razor.rz.scp.css */
/* La pantalla de acceso se pinta oscura SIEMPRE, en tema claro y en oscuro.

   No es un descuido de la variable de tema: el fondo es una imagen casi negra, y una caja
   clara encima sería un rectángulo blanco pegado sobre una foto. Por eso los colores van
   fijos aquí y no salen de las variables de Metronic. Es la única pantalla del portal donde
   pasa, y pasa porque es la única cuyo fondo no es el del tema. */

.acceso-fondo[b-93ifo2od1r] {
    background-color: #050505;
    background-image: url('_content/KosherClick.Components/marca/login-background.png');
    background-size: cover;
    background-position: center;
    /* `fixed` para que el patrón no se desplace si la caja obliga a hacer scroll en un
       teléfono. */
    background-attachment: fixed;
}

.acceso-logo[b-93ifo2od1r] {
    height: 60px;
    max-width: 100%;
}

.acceso-lema[b-93ifo2od1r] {
    color: #b5b5c3;
    font-size: 1.15rem;
    font-weight: 500;
    max-width: 420px;
    margin-inline: auto;
}

/* El panel de la derecha. Semitransparente sobre el fondo: deja ver el patrón sin competir
   con el formulario.

   El ancho se gobierna desde aquí y NO con las utilidades de Bootstrap. `w-100` y
   `w-lg-500px` llevan `!important`, así que ganaban sobre cualquier `width` de esta hoja y
   el panel se estiraba hasta desbordar la página. */
.acceso-panel[b-93ifo2od1r] {
    background-color: rgba(21, 21, 24, 0.92);
    width: 100%;
}

/* Desde `lg` flota con margen y esquinas redondeadas, que es lo que lo vuelve una tarjeta
   sobre el fondo en vez de una franja pegada al borde.

   LAS MEDIDAS SALEN DE MEDIR LA REFERENCIA DE METRONIC, no de tantear. Sobre un viewport de
   1915 px el panel mide ~600 y deja ~295 de margen a su derecha, o sea un 15% del ancho.
   Un margen fijo de 40 px —lo que tenía— dejaba la caja pegada al borde y esa es la
   diferencia que se nota a primera vista.

   `clamp` y no un valor fijo porque el margen es proporción, no distancia: a 1920 tiene que
   ser holgado y a 1000 no puede comerse el panel entero.

   Por debajo de `lg` va a sangre completa a propósito: en un teléfono el margen se come
   ancho útil del formulario, y las esquinas redondeadas no se aprecian cuando el panel
   ocupa toda la pantalla. */
@media (min-width: 992px) {
    .acceso-panel[b-93ifo2od1r] {
        /* `flex: none` porque flex-column-fluid deja el elemento creciendo, y creciendo
           ignora el ancho. Los tres valores juntos son lo que lo fija de verdad. */
        flex: none;
        width: min(600px, 42vw);

        /* LA TARJETA SE AJUSTA A SU CONTENIDO Y SE CENTRA.

           Sin esto el panel es un ítem flex con `align-self: stretch` —el valor por omisión—
           así que crecía hasta los 100vh del contenedor y quedaba un bloque de borde a borde
           con el formulario flotando a media altura. Se leía como una columna del layout, no
           como una tarjeta: es la diferencia que se nota a primera vista aunque el margen
           lateral ya estuviera bien. */
        align-self: center;

        /* Los márgenes verticales dejan de sostener la altura y pasan a ser solo aire para
           que la tarjeta nunca toque el borde.

           Relativos por la misma razón que el lateral: son proporción, no distancia. En un
           monitor alto la tarjeta tiene que respirar y en una laptop de 768 px de alto no
           puede comerse el espacio que necesita el formulario. El mínimo de 1.5rem es lo que
           impide que en una pantalla muy baja quede pegada al borde. */
        /* El izquierdo se queda en 0: la columna de la marca ya reparte ese espacio, y darle
           margen ahí movería la tarjeta hacia el centro y desharía la proporción medida
           contra la referencia de Metronic. */
        margin: clamp(1.5rem, 6vh, 5rem) clamp(2.5rem, 15vw, 20rem) clamp(1.5rem, 6vh, 5rem) 0;

        /* El respiro de ARRIBA y ABAJO lo da la tarjeta, no el contenedor: `p-lg-10` de
           Metronic es 2.5rem por los cuatro lados y con la altura ya ajustada se siente
           apretado en vertical. También relativo, para que acompañe al margen. */
        padding-top: clamp(2.5rem, 5vh, 4.5rem) !important;
        padding-bottom: clamp(2.5rem, 5vh, 4.5rem) !important;

        border-radius: 1rem;

        /* Lo que la despega del fondo. Una tarjeta del mismo tono que la imagen y sin sombra
           parece un recorte; la sombra es lo que dice "esto está encima". */
        box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.55);

        /* Un borde apenas visible para que el canto se distinga donde el fondo queda casi
           del mismo tono que el panel. */
        border: 1px solid rgba(255, 255, 255, 0.06);
    }
}

.acceso-caja[b-93ifo2od1r] {
    /* El formulario dentro del panel: en la referencia son ~405 px dentro de 600. */
    max-width: 400px;
}

.acceso-pie[b-93ifo2od1r] {
    color: #565674;
    font-size: 0.8rem;
}

.acceso-pie a[b-93ifo2od1r] {
    color: #7c7c96;
    text-decoration: none;
}

.acceso-pie a:hover[b-93ifo2od1r] {
    color: #3699ff;
}

/* Desde aquí se pinta el contenido de la página, que llega por @Body. `::deep` hace falta
   porque el aislamiento de CSS de Blazor marca solo el markup de ESTE componente: sin él,
   estas reglas no alcanzarían al formulario y quedaría con el texto oscuro del tema claro
   sobre el panel oscuro, ilegible. */

[b-93ifo2od1r] .acceso-titulo {
    color: #ffffff;
}

[b-93ifo2od1r] .acceso-subtitulo,
[b-93ifo2od1r] .acceso-nota {
    color: #9a9ab0;
}

/* Los enlaces del panel: el naranja de la marca, que sobre el fondo oscuro contrasta y
   además es el mismo color del botón de acción de los correos. El azul por omisión de
   Bootstrap sobre #1b1b20 queda por debajo del contraste mínimo de WCAG AA. */
[b-93ifo2od1r] .acceso-enlace {
    color: #f3732c;
    text-decoration: none;
}

[b-93ifo2od1r] .acceso-enlace:hover {
    text-decoration: underline;
}

[b-93ifo2od1r] label {
    color: #cdcdde;
}

/* Los campos: fondo propio y borde tenue. `form-control` de Metronic en tema claro los
   pinta blancos, que aquí desaparecerían del panel. */
[b-93ifo2od1r] .form-control {
    background-color: #1b1b20;
    border-color: #2f2f3a;
    color: #ffffff;
}

[b-93ifo2od1r] .form-control:focus {
    background-color: #1b1b20;
    border-color: #3699ff;
    color: #ffffff;
    box-shadow: none;
}

[b-93ifo2od1r] .form-control::placeholder {
    color: #565674;
}

/* Las seis casillas del código de un solo uso SE FUERON a
   `Components/Shared/CodigoDeSeisDigitos.razor.css` (work item 319).

   Estaban aquí porque /verificar era la única pantalla que las usaba, y con `::deep` quedaban
   con el atributo de scope de este layout: solo aplicaban a sus descendientes. El wizard del
   doble factor monta el mismo componente bajo `MainLayout`, así que ahí las casillas se
   quedaban sin ancho y `form-control` las estiraba a lo largo del modal.

   No se vuelven a subir aquí. Estilan el marcado propio del componente, así que su sitio es el
   CSS del componente, que viaja con él. El motivo largo está en ese archivo. */

/* El ojito de CampoDeContrasena: dentro del campo, a la derecha.

   Va aquí y no en un `.razor.css` del componente porque el aislamiento de CSS de Blazor
   alcanza al componente y no al `.form-control` que tiene al lado — y el hueco de la
   derecha (`pe-12`) y el ojito tienen que cuadrar entre sí. Todo el vocabulario visual de
   estas cuatro pantallas vive en este archivo. */
[b-93ifo2od1r] .acceso-ojito {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: #565674;
    cursor: pointer;
}

[b-93ifo2od1r] .acceso-ojito:hover {
    color: #cdcdde;
}

/* Edge pinta SU PROPIO ojito en todo <input type="password"> en cuanto se teclea algo, así que
   junto al nuestro salían dos. Reportado el 2026-09-03 en /primer-acceso. Se apaga el del
   navegador: el nuestro es el que funciona igual en todos. */
[b-93ifo2od1r] input[type="password"]::-ms-reveal,
[b-93ifo2od1r] input[type="password"]::-ms-clear {
    display: none;
}

/* El foco SÍ se ve, aunque el botón esté fuera del recorrido del tabulador: se llega con
   el ratón y con lector de pantalla, y un control sin foco visible no se puede usar sin
   ver. `outline` y no `box-shadow`, que el `:focus` del campo ya usa. */
[b-93ifo2od1r] .acceso-ojito:focus-visible {
    outline: 2px solid #3699ff;
    outline-offset: -2px;
    color: #ffffff;
}

/* El autocompletado de Chrome pinta el campo de amarillo claro con texto negro, que sobre
   este panel se ve como un error. El truco del inset shadow es la única forma de taparlo:
   el navegador ignora `background-color` en ese estado. */
[b-93ifo2od1r] .form-control:-webkit-autofill,
[b-93ifo2od1r] .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1b1b20 inset;
    -webkit-text-fill-color: #ffffff;
}

[b-93ifo2od1r] .alert-danger {
    background-color: rgba(241, 65, 108, 0.12);
    border: 1px solid rgba(241, 65, 108, 0.35);
    color: #f1416c;
}
/* /Components/Pages/Ventas/Ventas.razor.rz.scp.css */
/* El pivote del Resumen X Día: una raya entre columnas y nada más (work item 480).

   Sin ella, recorrer un renglón de quince días es perder la cuenta de en qué día se va: los
   números quedan flotando en una banda sin referencia vertical.

   `table-bordered` de Bootstrap no sirve aquí — rayaría también las horizontales y pelearía con
   el `table-row-dashed` que la tabla ya lleva, que es el punteado de la plantilla. */

.pivote-por-dia th + th[b-2065ijo6ge],
.pivote-por-dia td + td[b-2065ijo6ge] {
    border-left: 1px solid var(--bs-border-color);
}

/* La primera columna —el artículo— es el rótulo del renglón, no un día: la raya que la separa de
   los días se queda, pero la tabla no abre con una línea suelta a la izquierda. */
.pivote-por-dia th:first-child[b-2065ijo6ge],
.pivote-por-dia td:first-child[b-2065ijo6ge] {
    border-left: 0;
}

/* En móvil la tabla se desplaza horizontalmente dentro de su `table-responsive`, y ahí las rayas
   importan más, no menos: son la única pista de dónde acaba un día cuando el encabezado ya salió
   de la pantalla. No se quitan por ancho. */
/* /Components/Shared/CodigoDeSeisDigitos.razor.rz.scp.css */
/* Las seis casillas del código de un solo uso.

   VIVE AQUÍ Y NO EN EL CSS DE UN LAYOUT, y eso es el arreglo del work item 319. Estas reglas
   estaban en `Layout/SignInLayout.razor.css` con `::deep`, escritas cuando /verificar era la
   única pantalla que las usaba. El CSS aislado de Blazor las compilaba con el atributo de
   scope de ESE layout, así que solo aplicaban a sus descendientes: en cuanto el wizard del
   doble factor —que cuelga de `MainLayout`, tanto en el modal como en /doble-factor— montó el
   mismo componente, las casillas se quedaron sin ancho.

   Y sin ancho no quedan "un poco raras": `form-control` trae `width: 100%`, así que seis de
   ellas en un `d-flex` se reparten los 800 px del `modal-lg` y salen enormes y estiradas.
   Parecía un diseño pensado para el teléfono; era CSS que no llegaba.

   Aquí el aislamiento juega a favor: los `<input>` los renderiza este componente, así que
   llevan su atributo de scope y las reglas los alcanzan donde sea que se monte. No hace falta
   `::deep` —eso es para alcanzar el marcado de OTRO componente— ni un archivo global, que es
   la otra forma de que esto vuelva a pasar al revés.

   (El ojito de `CampoDeContrasena` sigue en el CSS del layout, y con razón: necesita cuadrar
   con el `pe-12` de un `.form-control` HERMANO, que el aislamiento no alcanza. Son dos casos
   distintos y por eso no se mudan juntos.) */

/* CUADRADAS Y CON `aspect-ratio`, no con un `height` fijo: así el alto sigue al ancho y las
   seis se mantienen cuadradas cuando `clamp` las estrecha en un teléfono. Con alto fijo se
   volverían rectángulos verticales justo en la pantalla donde menos espacio hay.

   El ancho es `clamp` y no un valor fijo porque son seis en fila más sus separaciones, y a
   360 px de viewport —el teléfono más angosto que se usa— seis casillas de 60 px desbordan la
   caja. La regla de patron-pantalla.md es que la página no hace scroll horizontal, y aquí eso
   se cumple encogiendo la casilla, que es lo único que puede ceder.

   `flex: 0 0 auto` para que el `d-flex` del contenedor no las estire: el `width` de arriba es
   la medida, no una sugerencia, y sin esto `form-control` volvería a repartirse el ancho
   disponible en cuanto el contenedor sea más ancho que las seis juntas.

   `padding: 0` porque Metronic le pone padding lateral al `form-control-lg`, y en una casilla
   de un solo carácter centrado ese padding solo le roba ancho al dígito. */
.acceso-digito[b-7savb89w3g] {
    width: clamp(2.5rem, 13vw, 3.5rem);
    flex: 0 0 auto;
    aspect-ratio: 1;
    padding: 0;
}

/* Sin las flechitas de incremento. No se usa `type="number"` —el módulo filtra a dígitos— pero
   un teclado o una extensión pueden pintarlas igual, y dentro de una casilla de este tamaño
   tapan el número. */
.acceso-digito[b-7savb89w3g]::-webkit-outer-spin-button,
.acceso-digito[b-7savb89w3g]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}
/* /Components/Shared/WizardDeDobleFactor.razor.rz.scp.css */
/* Lo poco que el wizard necesita del CSS y no le da una utilidad de Metronic (work item 319).

   Metronic no trae una utilidad `min-w-0` —comprobado contra style.bundle.css, que es la fuente
   del contrato de clases (convenciones.md §8)—, así que esta regla se escribe. Es la única
   pieza del reparto en tercios que no sale de `flex-fill` + `gap-8`. */

/* UN ELEMENTO FLEX NO SE ENCOGE POR DEBAJO DE SU CONTENIDO SIN ESTO. `flex-fill` es
   `flex: 1 1 auto`, y el `min-width: auto` que traen los elementos flex por omisión convierte
   el «puede encogerse» en una promesa vacía: el ancho del texto manda, los tres pasos vuelven
   a medir su ancho natural, y con `flex-nowrap` eso desborda en vez de apilarse.

   Con `min-width: 0` la descripción parte en dos renglones cuando no cabe, que es el
   comportamiento que hace innecesario acertarle a un punto de corte. Va en el item Y en la
   etiqueta porque son dos niveles de flex anidados —`stepper-nav` > `stepper-item` >
   `stepper-label`— y el de dentro tiene su propio `min-width: auto`.

   Sin `::deep`: los dos elementos los pinta el marcado de este componente, así que el
   aislamiento de Blazor ya les pone su atributo de scope. `::deep` es para alcanzar el marcado
   de otro componente, y aquí no hace falta ninguno. */
.stepper-item[b-cazcy78byx],
.stepper-item .stepper-label[b-cazcy78byx] {
    min-width: 0;
}