/* /Components/Account/Pages/Login.razor.rz.scp.css */
/*
 * Maquetación del login. Los tokens NO se redefinen acá: salen de
 * wwwroot/css/clean-os/tokens/, que App.razor carga en todas las páginas.
 *
 * Esta hoja nació cuando el login era la única pantalla con el sistema, así
 * que traía su propia copia de los 46 tokens. Al adoptarse el sistema en toda
 * la aplicación esa copia quedó pisando a la global con los valores viejos: el
 * lienzo se veía verde grisáceo (#E7EAE9) mientras el resto de la app ya era
 * blanco con la banda azul, y el tema oscuro del login tiraba a verde en vez
 * de al azul del sistema. Tampoco se redefine color-scheme ni el apagado de
 * prefers-reduced-motion: tokens/base.css y tokens/motion.css ya los ponen
 * sobre :root, y seguirlos desde acá significaba mantener dos verdades.
 */
.login-shell[b-3eyaqdgyyg] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, var(--space-6));
    background: var(--background);
    font-family: var(--font-sans);
    transition: var(--transition-theme);
    box-sizing: border-box;
}

/* Ícono como ligadura de Material Symbols Rounded (regla de iconografía del sistema) */
.material-symbols-rounded[b-3eyaqdgyyg] {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    user-select: none;
}

/* Tarjeta: reemplaza el rounded-pill + container-fluid que generaban los bordes blancos.
   Radio único (--radius, 12px) y sombra amplia solo porque es lo único que "flota"
   en la pantalla (regla de elevación: sombra en cero dentro de la hoja, salvo lo flotante). */
.login-card[b-3eyaqdgyyg] {
    position: relative;
    width: 100%;
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: var(--transition-theme);
}

/* ---------- Panel visual (izquierda) ---------- */
.login-visual[b-3eyaqdgyyg] {
    position: relative;
    min-height: 620px;
    padding: var(--space-12) var(--space-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.login-visual-overlay[b-3eyaqdgyyg] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 26, 26, .15), rgba(20, 26, 26, .62));
}

.login-visual-content[b-3eyaqdgyyg] {
    position: relative;
    z-index: 1;
    max-width: 23rem;
}

.login-logo[b-3eyaqdgyyg] {
    max-width: 170px;
    height: auto;
    margin-bottom: var(--space-8);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25));
}

.login-visual-title[b-3eyaqdgyyg] {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-lh);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--text-h2-ls);
    margin: 0 0 var(--space-3);
    color: #fff;
}

.login-visual-text[b-3eyaqdgyyg] {
    font-size: var(--text-body-size);
    line-height: 1.5;
    margin: 0;
    color: rgba(255, 255, 255, .86);
}

.login-mobile-brand[b-3eyaqdgyyg] {
    display: none;
    text-align: center;
    margin-bottom: var(--space-6);
}

.login-mobile-brand img[b-3eyaqdgyyg] {
    max-width: 130px;
    height: auto;
}

/* ---------- Panel de formulario (derecha) ---------- */
.login-form-panel[b-3eyaqdgyyg] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(var(--space-8), 5vw, var(--space-12));
    background: var(--surface);
}

/* Botón fantasma icon-only (mismo patrón que .btn-fantasma del sistema:
   sin borde, sin fondo hasta el hover, color de texto secundario). */
.login-theme-toggle[b-3eyaqdgyyg] {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
    transition: var(--transition-control);
}

.login-theme-toggle:hover[b-3eyaqdgyyg] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.login-theme-toggle:focus-visible[b-3eyaqdgyyg] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.login-theme-toggle .material-symbols-rounded[b-3eyaqdgyyg] {
    font-size: var(--icon-size);
}

.login-theme-toggle .icon-moon[b-3eyaqdgyyg] {
    display: none;
}

html[data-theme="dark"] .login-theme-toggle .icon-sun[b-3eyaqdgyyg] {
    display: none;
}

html[data-theme="dark"] .login-theme-toggle .icon-moon[b-3eyaqdgyyg] {
    display: inline-flex;
}

.login-form-inner[b-3eyaqdgyyg] {
    width: 100%;
    max-width: 360px;
}

/* Insignia de icono (mismo patrón que .tarjeta-icono.acento del sistema) */
.login-icon-badge[b-3eyaqdgyyg] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-inner);
    background: var(--accent-soft);
    color: var(--accent-on-soft);
    margin-bottom: var(--space-4);
}

.login-icon-badge .material-symbols-rounded[b-3eyaqdgyyg] {
    font-size: var(--icon-size-lg);
}

/* Título de tarjeta flotante: misma escala que .modal-cabecera h2 (--text-h4-*) */
.login-title[b-3eyaqdgyyg] {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-lh);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--text-h4-ls);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.login-subtitle[b-3eyaqdgyyg] {
    font-size: var(--text-small-size);
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 var(--space-6);
}

[b-3eyaqdgyyg] .login-validation-summary {
    color: var(--danger-text);
    background: var(--danger-soft);
    border-radius: var(--radius-inner);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-caption-size);
    margin: 0 0 var(--space-4);
    list-style: none;
}

[b-3eyaqdgyyg] .login-validation-summary li {
    margin: 0;
}

[b-3eyaqdgyyg] .alert {
    border: 0;
    border-radius: var(--radius-inner);
    font-size: var(--text-caption-size);
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4);
}

[b-3eyaqdgyyg] .alert-danger {
    background: var(--danger-soft);
    color: var(--danger-text);
}

[b-3eyaqdgyyg] .alert-success {
    background: var(--success-soft);
    color: var(--success-text);
}

.login-field[b-3eyaqdgyyg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

/* Mismo patrón que .campo-etiqueta del sistema */
.login-field label[b-3eyaqdgyyg] {
    font-size: var(--text-caption-size);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

/* Mismo patrón que .campo del sistema: 48px de alto, radio único, foco por
   anillo exterior (no borde interior) */
[b-3eyaqdgyyg] .login-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: var(--input-h);
    padding: var(--input-py) var(--input-px);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-small-size);
    transition: var(--transition-control);
}

/* El sitio para el ojo se declara acá y no solo en la regla global .campo-clave:
   el CSS aislado de esta página lleva atributo de ámbito, así que su `padding`
   de arriba le gana a la regla global y el texto pasaría por debajo del botón. */
[b-3eyaqdgyyg] .campo-clave .login-input {
    padding-inline-end: 2.75rem;
}

[b-3eyaqdgyyg] .login-input::placeholder {
    color: var(--text-tertiary);
}

[b-3eyaqdgyyg] .login-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* Mismo patrón que .campo-error del sistema */
[b-3eyaqdgyyg] .login-field-error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-caption-size);
    color: var(--danger-text);
}

/* Mismo patrón que .btn-primario del sistema (sin sombra: --shadow-accent es "none") */
.login-submit[b-3eyaqdgyyg] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-h);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    background: var(--accent-solid);
    color: var(--accent-on-solid);
    font-family: inherit;
    font-size: var(--text-small-size);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    margin-top: var(--space-2);
    transition: var(--transition-control);
}

.login-submit:hover[b-3eyaqdgyyg] {
    background: var(--accent-solid-hover);
}

.login-submit:active[b-3eyaqdgyyg] {
    background: var(--accent-solid-press);
}

.login-submit:focus-visible[b-3eyaqdgyyg] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.login-footer[b-3eyaqdgyyg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border);
    font-size: var(--text-caption-size);
    color: var(--text-tertiary);
}

.login-footer-logo[b-3eyaqdgyyg] {
    height: 22px;
    width: auto;
    opacity: .85;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .login-card[b-3eyaqdgyyg] {
        grid-template-columns: 1fr;
        max-width: 460px;
    }

    .login-visual[b-3eyaqdgyyg] {
        display: none;
    }

    .login-mobile-brand[b-3eyaqdgyyg] {
        display: block;
    }
}

@media (max-width: 480px) {
    .login-shell[b-3eyaqdgyyg] {
        padding: var(--space-4);
    }

    .login-card[b-3eyaqdgyyg] {
        border-radius: var(--radius);
    }

    .login-form-panel[b-3eyaqdgyyg] {
        padding: var(--space-6) var(--space-4);
    }
}
/* /Components/Account/Shared/MensajeInvitado.razor.rz.scp.css */
/* Lienzo a sangre: ocupa la ventana y centra el mensaje en los dos ejes. El
   relleno de página que .rz-body reparte al resto de la aplicación se anula
   en app-shell.css para estas pantallas, igual que para el login. */
.invitado-lienzo[b-jpjqpr6aya] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--background);
    box-sizing: border-box;
}

/* Ancho de mensaje, no de página: son tres líneas de texto. Antes la tarjeta
   llegaba a 1320px por el container-xxl del andamiaje. */
.invitado-tarjeta[b-jpjqpr6aya] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    max-width: 420px;
    padding: var(--space-12) var(--space-8);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
}

.invitado-marca[b-jpjqpr6aya] {
    height: 40px;
    width: auto;
    margin-bottom: var(--space-2);
}

/* El icono acompaña, no anuncia: en tinta terciaria para que el título siga
   siendo lo primero que se lee. */
.invitado-icono[b-jpjqpr6aya] {
    font-size: 40px;
    line-height: 1;
    color: var(--text-tertiary);
}

.invitado-titulo[b-jpjqpr6aya] {
    margin: 0;
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-lh);
    letter-spacing: var(--text-h4-ls);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.invitado-cuerpo[b-jpjqpr6aya] {
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    color: var(--text-secondary);
    text-wrap: pretty;
}

.invitado-volver[b-jpjqpr6aya] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    color: var(--text-link);
    font-size: var(--text-small-size);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.invitado-volver:hover[b-jpjqpr6aya] {
    color: var(--text-link-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.invitado-volver:focus-visible[b-jpjqpr6aya] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
}

.invitado-volver .material-symbols-rounded[b-jpjqpr6aya] {
    font-size: var(--icon-size);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-diq6yvsjuu] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-diq6yvsjuu] {
    flex: 1;
}

.sidebar[b-diq6yvsjuu] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3db8a3 70%);
}

.top-row[b-diq6yvsjuu] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

    .top-row[b-diq6yvsjuu]  a:hover, .top-row[b-diq6yvsjuu]  .btn-link:hover {
        text-decoration: underline;
    }

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

@media (max-width: 640.98px) {
    .top-row[b-diq6yvsjuu] {
        justify-content: space-between;
    }

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

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

    .sidebar[b-diq6yvsjuu] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

    .top-row.auth[b-diq6yvsjuu]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-diq6yvsjuu], article[b-diq6yvsjuu] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

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

    #blazor-error-ui .dismiss[b-diq6yvsjuu] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Gestion/Producto/ProductoGeneralIndex.razor.rz.scp.css */
/* Cabecera de los grupos de la grilla de productos.

   El conteo tiene que caer exactamente sobre la columna "Nro Registro" del subnivel,
   no colgar del final de un nombre que cambia de largo en cada grupo. La aritmética,
   que es la razón de que no haya column-gap:

   La celda de la cabecera de grupo y la celda "Producto" de las filas de datos son
   las dos la primera después del td.rz-col-icon que Radzen inserta por nivel, y
   comparten --rz-grid-cell-padding. O sea que las dos arrancan en la misma vertical.
   Desde ahí, el dato de "Nro Registro" está a exactamente el ancho RENDERIZADO de la
   columna "Producto" — que no es su Width declarado: la tabla corre con
   table-layout:fixed y width:100%, así que reparte el sobrante entre las columnas, y
   encima la grilla permite arrastrar el borde. Por eso ese ancho lo mide
   os-columna-grupo.js sobre la cabecera real y lo deja en --ancho-col-producto; los
   300px acá son solo el respaldo para el instante previo a la primera medición.

   El vencimiento ya no se muestra acá: es un dato de cada registro, y el más próximo
   del grupo se leía como si fuera del producto entero. */
.grupo-cabecera[b-edpympaj5e] {
    display: grid;
    grid-template-columns: var(--ancho-col-producto, 300px) max-content;
    align-items: center;
    column-gap: 0;
}

/* Lo que tiene que cuadrar con el número de registro de abajo es la CIFRA, no el
   fondo de la pastilla. Alineando la caja, el relleno propio del distintivo deja
   su texto 4px adentro y la columna se lee corrida; así que la pastilla se corre a
   la izquierda exactamente ese relleno y el dato queda en la misma vertical.

   Va con ::deep porque el <span class="rz-badge"> lo pinta RadzenBadge, y el
   aislamiento de CSS solo marca los elementos que escribe esta página: sin ::deep
   el selector pediría un atributo de ámbito que ese span no lleva y no aplicaría
   nunca. */
.grupo-cabecera[b-edpympaj5e]  .rz-badge {
    /* Espejo de la parte horizontal de --rz-badge-padding (0.125rem 0.25rem).
       Se repite el valor porque CSS no puede leer un solo lado de un atajo. */
    margin-inline-start: -0.25rem;
}

/* Una pista de ancho fijo no se estira: un nombre más largo se recorta con puntos
   suspensivos en vez de desplazar lo que viene detrás y romper la alineación. El nombre
   completo sigue disponible en el title y en la columna Producto de cada fila.

   El aire hasta el distintivo va como padding del nombre y no como column-gap: así el
   hueco sale de los 300px de la pista en vez de sumarse a ellos, y la alineación con
   "Nro Registro" no se corre. */
.grupo-nombre[b-edpympaj5e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: 0.75rem;
}

/* Barra única sobre la grilla: alta a la izquierda, controles de vista al centro y
   descarga al extremo derecho. Antes eran dos filas con márgenes propios en cada botón,
   y el conjunto se leía disperso. */
.barra-acciones[b-edpympaj5e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Los filetes laterales agrupan lo que solo cambia cómo se ve la tabla, separándolo de
   las acciones que crean o extraen datos. */
.controles-vista[b-edpympaj5e] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-inline: 1rem;
    border-inline: 1px solid var(--rz-base-300);
}

/* El title de cada opción vive en este envoltorio, dentro del Template del item:
   RadzenSelectBarItem no admite atributos sueltos y no acepta un title propio. Se estira
   para que el tooltip salte en toda la superficie del botón, no solo sobre el glifo. */
.icono-opcion[b-edpympaj5e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Con perfil Lector no se pinta el botón de alta y el grupo de vista pasa a abrir la
   fila: ahí su filete izquierdo quedaría colgando. */
.controles-vista:first-child[b-edpympaj5e] {
    padding-inline-start: 0;
    border-inline-start: none;
}

/* Expandir y colapsar son dos botones sueltos: se juntan para que se lean como un par,
   igual que las barras de selección que tienen al lado. */
.grupo-botones[b-edpympaj5e] {
    display: inline-flex;
    gap: 0.25rem;
}

.accion-exportar[b-edpympaj5e] {
    margin-left: auto;
}

/* El nombre es el dato por el que se busca cada fila: en semibold la vista lo engancha
   antes que el resto de las columnas, que son atributos de ese producto y no su
   identidad. El número de registro queda en peso normal a propósito, para que los dos
   no compitan. */
.nombre-producto[b-edpympaj5e] {
    font-weight: var(--weight-semibold);
}

/* Agrupado, el nombre del producto ya lo dice la cabecera del grupo: repetirlo en
   semibold en cada fila de abajo pone tres o cuatro veces el mismo peso en la misma
   columna y deja de señalar nada. En el subnivel el ancla pasa a ser el número de
   registro, que es lo que distingue una fila de otra dentro del mismo producto.

   La sangría del subnivel no se escribe acá: Radzen ya inserta un td.rz-col-icon por
   nivel de grupo en cada fila de datos, del mismo ancho que el del control de plegado
   de la cabecera, así que las dos ya arrancan alineadas. Agregar padding acá las
   desalinearía en sentido contrario. */
.grid-agrupado .nombre-producto[b-edpympaj5e] {
    font-weight: var(--weight-regular);
}

.grid-agrupado .registro[b-edpympaj5e] {
    font-weight: var(--weight-semibold);
}

/* Advertencias: el texto (hasta 200 caracteres) se ajusta al ancho de la columna en
   varias líneas, en vez de cortarse con puntos suspensivos de Radzen. */
[b-edpympaj5e] .advertencias {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

[b-edpympaj5e] td:has(.advertencias) {
  white-space: normal;
}