/* ============================================================
   LkStock Web — Estilo base (FASE 13)
   Diseño propio, simple y limpio (inspiración tipo dashboard).
   Paleta: azul / celeste / blanco / gris muy claro.
   ============================================================ */

:root {
    /* Colores */
    --lk-primario: #2563eb;
    --lk-primario-hover: #1d4ed8;
    --lk-celeste: #38bdf8;
    --lk-celeste-suave: #e0f2fe;
    --lk-fondo: #f8fafc;
    --lk-superficie: #ffffff;
    --lk-texto-fuerte: #0f172a;
    --lk-texto-secundario: #64748b;
    --lk-borde: #dbeafe;
    --lk-borde-suave: #e2e8f0;
    --lk-exito: #16a34a;
    --lk-error: #dc2626;
    --lk-exito-suave: #dcfce7;
    --lk-error-suave: #fee2e2;
    /* Texto sobre celeste suave (íconos de grupo del menú). */
    --lk-texto-acento: #075985;

    /* Radios */
    --lk-radio-sm: 6px;
    --lk-radio: 10px;
    --lk-radio-lg: 16px;

    /* Sombras */
    --lk-sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --lk-sombra: 0 4px 16px rgba(15, 23, 42, 0.08);
    --lk-sombra-lg: 0 12px 32px rgba(37, 99, 235, 0.12);

    /* Layout */
    --lk-topbar-altura: 60px;
    /* 2026-10-10: antes 1100px centrado (sobraba espacio a los costados en monitores anchos). */
    --lk-ancho-max: 100%;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--lk-fondo);
    color: var(--lk-texto-fuerte);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    color: var(--lk-texto-fuerte);
    font-weight: 600;
    line-height: 1.25;
}

a {
    color: var(--lk-primario);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ============================================================
   Barra superior (topbar)
   ============================================================ */

.lk-topbar {
    height: var(--lk-topbar-altura);
    background: linear-gradient(90deg, var(--lk-primario) 0%, var(--lk-celeste) 100%);
    color: #fff;
    box-shadow: var(--lk-sombra-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.lk-topbar__inner {
    max-width: var(--lk-ancho-max);
    margin: 0 auto;
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lk-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.2px;
}

.lk-brand:hover {
    text-decoration: none;
    color: #fff;
}

.lk-brand__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--lk-radio-sm);
    background: rgba(255, 255, 255, 0.18);
    font-weight: 800;
    font-size: 0.95rem;
}

.lk-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.lk-nav__link {
    color: rgba(255, 255, 255, 0.92);
    padding: 7px 14px;
    border-radius: var(--lk-radio-sm);
    font-weight: 500;
    transition: background-color 0.15s ease;
}

.lk-nav__link:hover {
    background: rgba(255, 255, 255, 0.18);
    text-decoration: none;
    color: #fff;
}

/* ============================================================
   Contenido / layout general
   ============================================================ */

.lk-main {
    max-width: var(--lk-ancho-max);
    margin: 0 auto;
    padding: 28px 20px 48px 20px;
}

.lk-page-title {
    margin: 0 0 4px 0;
    font-size: 1.6rem;
}

.lk-page-subtitle {
    margin: 0 0 24px 0;
    color: var(--lk-texto-secundario);
}

/* ============================================================
   Topbar: lado izquierdo + botón hamburguesa (toggle sidebar)
   ============================================================ */

.lk-topbar__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lk-topbar__toggle {
    display: flex; /* visible siempre: desktop colapsa, móvil abre drawer */
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--lk-radio-sm);
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
}

.lk-topbar__toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
}

/* ============================================================
   Shell con sidebar (solo autenticado)
   ============================================================ */

.lk-shell {
    max-width: var(--lk-ancho-max);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 0 20px;
}

.lk-sidebar {
    flex: 0 0 240px;
    width: 240px;
    position: sticky;
    top: calc(var(--lk-topbar-altura) + 20px);
    margin-top: 24px;
    background: var(--lk-superficie);
    border: 1px solid var(--lk-borde-suave);
    border-radius: var(--lk-radio);
    box-shadow: var(--lk-sombra-sm);
    padding: 14px 12px;
    max-height: calc(100vh - var(--lk-topbar-altura) - 40px);
    overflow-y: auto;
    transition: width 0.18s ease, flex-basis 0.18s ease;
}

/* Modo colapsado (angosto): solo iconos/iniciales. */
.lk-sidebar--colapsado {
    flex: 0 0 68px;
    width: 68px;
    padding: 14px 8px;
}

.lk-sidebar__buscar {
    margin-bottom: 14px;
}

/* Menú angosto de escritorio: sin buscador (en celular el @media de 860px lo vuelve a mostrar). */
.lk-sidebar--colapsado .lk-sidebar__buscar {
    display: none;
}

.lk-sidebar__input {
    width: 100%;
    font-size: 0.9rem;
}

.lk-sidebar__grupo {
    margin-bottom: 10px;
}

.lk-sidebar__grupo:last-child {
    margin-bottom: 0;
}

/* "Más usados": mismo look/comportamiento que un grupo (colapsable), con separador para
   distinguirlo del resto. */
.lk-sidebar__grupo--fijo {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--lk-borde-suave);
}

/* Encabezado de grupo (acordeón) */
.lk-sidebar__grupo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 8px;
    border: none;
    background: transparent;
    border-radius: var(--lk-radio-sm);
    cursor: pointer;
    color: var(--lk-texto-secundario);
    transition: background-color 0.15s ease;
}

.lk-sidebar__grupo-header:hover {
    background: var(--lk-fondo);
}

.lk-sidebar__grupo-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: var(--lk-radio-sm);
    background: var(--lk-celeste-suave);
    color: var(--lk-texto-acento);
    font-size: 0.8rem;
    font-weight: 800;
}

.lk-sidebar__grupo-titulo {
    flex: 1 1 auto;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.lk-sidebar__chevron {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--lk-texto-secundario);
    transition: transform 0.18s ease;
}

.lk-sidebar__chevron--abierto {
    transform: rotate(180deg);
}

.lk-sidebar__items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
    padding-left: 6px;
}

/* Subgrupo dentro de un grupo (ej. "Stock" dentro de "Configuración") */
.lk-sidebar__subgrupo {
    margin-top: 2px;
}

.lk-sidebar__subgrupo-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px 6px 34px;
    border: none;
    background: transparent;
    border-radius: var(--lk-radio-sm);
    cursor: pointer;
    color: var(--lk-texto-secundario);
    transition: background-color 0.15s ease;
}

.lk-sidebar__subgrupo-header:hover {
    background: var(--lk-fondo);
}

.lk-sidebar__subgrupo-titulo {
    flex: 1 1 auto;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.lk-sidebar__items--sub {
    padding-left: 20px;
}

.lk-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--lk-radio-sm);
    color: var(--lk-texto-fuerte);
    font-weight: 500;
    font-size: 0.92rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lk-sidebar__link:hover {
    background: var(--lk-celeste-suave);
    color: var(--lk-primario);
    text-decoration: none;
}

/* Item activo destacado en azul/celeste */
.lk-sidebar__link--activo {
    background: var(--lk-primario);
    color: #fff;
}

.lk-sidebar__link--activo:hover {
    background: var(--lk-primario-hover);
    color: #fff;
}

.lk-sidebar__link-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: var(--lk-radio-sm);
    background: var(--lk-fondo);
    color: var(--lk-texto-secundario);
    font-size: 0.72rem;
    font-weight: 700;
}

.lk-sidebar__link--activo .lk-sidebar__link-ico {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.lk-sidebar__link-text {
    flex: 1 1 auto;
}

.lk-sidebar__vacio {
    color: var(--lk-texto-secundario);
    font-size: 0.88rem;
    padding: 4px 8px;
    margin: 0;
}

/* En modo colapsado se ocultan textos/chevron; quedan solo los iconos centrados. */
.lk-sidebar--colapsado .lk-sidebar__grupo-titulo,
.lk-sidebar--colapsado .lk-sidebar__subgrupo-titulo,
.lk-sidebar--colapsado .lk-sidebar__chevron,
.lk-sidebar--colapsado .lk-sidebar__link-text {
    display: none;
}

.lk-sidebar--colapsado .lk-sidebar__grupo-header,
.lk-sidebar--colapsado .lk-sidebar__link {
    justify-content: center;
    gap: 0;
    padding: 8px 0;
}

/* El subgrupo colapsado no aporta nada visible (sin título) — solo estorba el padding. */
.lk-sidebar--colapsado .lk-sidebar__subgrupo-header {
    display: none;
}

.lk-sidebar--colapsado .lk-sidebar__items,
.lk-sidebar--colapsado .lk-sidebar__items--sub {
    padding-left: 0;
}

.lk-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 28px 0 48px 0;
}

/* ============================================================
   Cards
   ============================================================ */

.lk-card {
    background: var(--lk-superficie);
    border: 1px solid var(--lk-borde-suave);
    border-radius: var(--lk-radio);
    box-shadow: var(--lk-sombra);
    padding: 24px;
}

.lk-card__title {
    margin: 0 0 4px 0;
    font-size: 1.15rem;
}

.lk-card__subtitle {
    margin: 0 0 16px 0;
    color: var(--lk-texto-secundario);
    font-size: 0.92rem;
}

.lk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

/* ============================================================
   Formularios
   ============================================================ */

.lk-field {
    margin-bottom: 16px;
}

.lk-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--lk-texto-fuerte);
}

.lk-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--lk-borde-suave);
    border-radius: var(--lk-radio-sm);
    font-size: 0.95rem;
    color: var(--lk-texto-fuerte);
    background: var(--lk-superficie);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lk-input:focus {
    outline: none;
    border-color: var(--lk-primario);
    box-shadow: 0 0 0 3px var(--lk-celeste-suave);
}

.lk-input:disabled {
    background: var(--lk-fondo);
    color: var(--lk-texto-secundario);
}

/* Campo de contraseña con botón "Ver/Ocultar" lateral (FASE 15.2) */
.lk-password-field {
    position: relative;
}

.lk-password-input {
    padding-right: 44px; /* deja lugar para el botón con ícono de ojo */
}

.lk-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--lk-texto-secundario);
    padding: 0;
    border-radius: var(--lk-radio-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lk-password-toggle:hover:not(:disabled) {
    background: var(--lk-celeste-suave);
    color: var(--lk-primario);
}

.lk-password-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--lk-celeste-suave);
}

.lk-password-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lk-password-toggle__ico {
    width: 20px;
    height: 20px;
}

/* ============================================================
   Botones
   ============================================================ */

.lk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--lk-radio-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.lk-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.lk-btn--primario {
    background: var(--lk-primario);
    color: #fff;
    box-shadow: var(--lk-sombra-sm);
}

.lk-btn--primario:hover:not(:disabled) {
    background: var(--lk-primario-hover);
}

.lk-btn--bloque {
    width: 100%;
}

.lk-btn--outline {
    background: var(--lk-superficie);
    color: var(--lk-primario);
    border-color: var(--lk-borde);
}

.lk-btn--outline:hover:not(:disabled) {
    background: var(--lk-celeste-suave);
}

/* ============================================================
   Mensajes / estados
   ============================================================ */

/* Spinner de carga */
.lk-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lk-spin 0.7s linear infinite;
}

@keyframes lk-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Pantalla de autenticación (login centrado)
   ============================================================ */

.lk-auth {
    min-height: calc(100vh - var(--lk-topbar-altura));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.lk-auth__card {
    width: 100%;
    max-width: 400px;
    background: var(--lk-superficie);
    border: 1px solid var(--lk-borde-suave);
    border-radius: var(--lk-radio-lg);
    box-shadow: var(--lk-sombra-lg);
    padding: 32px;
}

.lk-auth__header {
    text-align: center;
    margin-bottom: 24px;
}

.lk-auth__title {
    margin: 0 0 6px 0;
    font-size: 1.4rem;
}

.lk-auth__subtitle {
    margin: 0;
    color: var(--lk-texto-secundario);
    font-size: 0.92rem;
}

/* ============================================================
   Lista de datos (perfil)
   ============================================================ */

.lk-datalist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lk-datalist__item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--lk-borde-suave);
}

.lk-datalist__item:last-child {
    border-bottom: none;
}

.lk-datalist__label {
    color: var(--lk-texto-secundario);
    font-weight: 500;
}

.lk-datalist__value {
    color: var(--lk-texto-fuerte);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* ============================================================
   ABM (toolbar + formulario + tabla) — FASE 25
   ============================================================ */

.lk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.lk-toolbar__search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.lk-toolbar__search .lk-toolbar__texto {
    max-width: 280px;
}

.lk-form-panel {
    border: 1px solid var(--lk-borde-suave);
    border-radius: var(--lk-radio);
    background: var(--lk-fondo);
    padding: 18px;
    margin-bottom: 18px;
}

.lk-action-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Dentro de una fila de tabla, Editar/Eliminar nunca deben envolver a 2 líneas: el
   contenedor a veces queda 1-2px más angosto que 2 botones .lk-btn--icon + gap (30+8+30),
   y ese faltante alcanza para que flex-wrap los apile. Fuera de la tabla (ej. el pie del
   formulario Guardar/Cancelar/Recuperar) sí puede envolver en mobile, por eso no se toca
   la regla general de arriba. */
.lk-table .lk-action-buttons {
    flex-wrap: nowrap;
}

.lk-btn--sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Botón cuadrado solo-ícono (Editar/Eliminar de fila): ahorra espacio horizontal en la
   tabla, sobre todo en mobile. El texto queda en el `title` (tooltip + accesibilidad). */
.lk-btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
}

/* Botón de toolbar solo-ícono (Buscar/Nuevo/Actualizar/Exportar, 2026-08-11): a diferencia de
   .lk-btn--icon (cuadrado fijo 30x30, para filas de tabla), este mantiene el mismo alto que el
   resto del toolbar y el input de búsqueda (mismo padding vertical que .lk-btn), solo se angosta
   horizontalmente porque no lleva texto. El texto queda en el `title` (tooltip + accesibilidad). */
.lk-btn--icon-only {
    padding: 10px 12px;
    gap: 0;
}

.lk-btn__ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.lk-btn--peligro {
    background: var(--lk-error);
    color: #fff;
    box-shadow: var(--lk-sombra-sm);
}

.lk-btn--peligro:hover:not(:disabled) {
    background: #b91c1c;
}

/* Envuelve <table class="lk-table"> — el scroll horizontal queda contenido acá adentro
   (con las columnas angostas de Id y Acciones fijas) en vez de desbordar toda la página,
   que es lo que pasaba en mobile con tablas de varias columnas (ver captura 2026-08-10). */
.lk-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lk-table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.lk-table thead th {
    text-align: left;
    padding: 10px 12px;
    color: var(--lk-texto-secundario);
    font-weight: 600;
    border-bottom: 2px solid var(--lk-borde-suave);
    white-space: nowrap;
}

.lk-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--lk-borde-suave);
    vertical-align: middle;
}

.lk-table tbody tr:hover {
    background: var(--lk-fondo);
}

.lk-empty-state {
    padding: 28px;
    text-align: center;
    color: var(--lk-texto-secundario);
    background: var(--lk-fondo);
    border: 1px dashed var(--lk-borde-suave);
    border-radius: var(--lk-radio);
}



/* ============================================================
   Responsive básico
   ============================================================ */

@media (max-width: 860px) {
    /* En móvil el sidebar es un drawer/overlay; el botón hamburguesa lo abre/cierra. */
    .lk-shell {
        display: block;
        padding: 0 14px;
    }

    .lk-sidebar {
        position: fixed;
        top: var(--lk-topbar-altura);
        left: 0;
        bottom: 0;
        width: 260px;
        flex-basis: auto;
        margin-top: 0;
        max-height: none;
        border-radius: 0;
        box-shadow: var(--lk-sombra-lg);
        z-index: 90;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    /* En móvil ignoramos el modo "colapsado angosto": el drawer va completo (también el buscador). */
    .lk-sidebar--colapsado .lk-sidebar__buscar {
        display: block;
    }

    .lk-sidebar--colapsado {
        width: 260px;
        flex: 0 0 auto;
        padding: 14px 12px;
    }

    .lk-sidebar--colapsado .lk-sidebar__grupo-titulo,
    .lk-sidebar--colapsado .lk-sidebar__subgrupo-titulo,
    .lk-sidebar--colapsado .lk-sidebar__chevron,
    .lk-sidebar--colapsado .lk-sidebar__link-text {
        display: inline;
    }

    .lk-sidebar--colapsado .lk-sidebar__grupo-header,
    .lk-sidebar--colapsado .lk-sidebar__link {
        justify-content: flex-start;
        gap: 10px;
        padding: 8px 10px;
    }

    .lk-sidebar--colapsado .lk-sidebar__subgrupo-header {
        display: flex;
    }

    .lk-sidebar--abierto {
        transform: translateX(0);
    }

    .lk-content {
        padding: 20px 0 40px 0;
    }
}

@media (max-width: 640px) {
    .lk-topbar__inner {
        padding: 0 12px;
    }

    .lk-brand {
        font-size: 1rem;
    }

    .lk-nav__link {
        padding: 6px 10px;
    }

    .lk-main {
        padding: 20px 14px 40px 14px;
    }
}

@media (max-width: 480px) {
    /* Angosto: "LkStock Web" + Inicio/Perfil/Salir no entran en una sola fila de 60px
       (se ve en pantalla el texto de la marca partiéndose en 2 líneas y el botón Salir
       quedando montado sobre el resto). En vez de agrandar el topbar (rompería el cálculo
       de posición del sidebar, que depende de --lk-topbar-altura), se saca el texto de la
       marca y se deja solo el logo cuadrado — recupera espacio de sobra para que el resto
       entre en una sola fila sin ajustar la altura. */
    .lk-brand span:not(.lk-brand__logo) {
        display: none;
    }

    .lk-nav {
        gap: 2px;
    }

    .lk-nav__link {
        padding: 6px 8px;
        font-size: 0.85rem;
    }

    .lk-nav .lk-btn {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}

/* ============================================================
   Reglas requeridas por Blazor (no quitar)
   ============================================================ */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    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 {
        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: "Ha ocurrido un error."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 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: var(--lk-primario);
            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, "Cargando");
    }

code {
    color: #c02d76;
}

/* ===== Exportación de listados (dropdown) — FASE 29 ===== */
.lk-export {
    position: relative;
    display: inline-block;
}

.lk-export__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 220px;
    background: var(--lk-superficie);
    border: 1px solid var(--lk-borde-suave);
    border-radius: var(--lk-radio);
    box-shadow: var(--lk-sombra);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lk-export__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: var(--lk-radio-sm);
    color: var(--lk-texto-fuerte);
    font: inherit;
    cursor: pointer;
}

.lk-export__item:hover {
    background: var(--lk-celeste-suave);
    color: var(--lk-primario);
}

.lk-export__sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--lk-borde-suave);
}

/* ============================================================
   Descarga de LkMobile (página pública /descargar-mobile)
   ============================================================ */

.lk-descarga {
    max-width: 460px;
}

.lk-descarga__centro {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.lk-descarga__version {
    text-align: center;
    margin: 0 0 16px 0;
    color: var(--lk-texto-secundario);
}

.lk-descarga__qr {
    width: 220px;
    max-width: 100%;
    margin: 20px auto 8px auto;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--lk-borde-suave);
    border-radius: var(--lk-radio-lg);
}

.lk-descarga__qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.lk-descarga__ayuda {
    text-align: center;
    margin: 0 0 4px 0;
    font-size: 0.88rem;
    color: var(--lk-texto-secundario);
}

.lk-descarga__url {
    text-align: center;
    margin: 0 0 16px 0;
    font-size: 0.85rem;
    word-break: break-all;
}

.lk-descarga__pasos {
    margin: 16px 0 0 0;
    padding-left: 20px;
    font-size: 0.9rem;
    color: var(--lk-texto-secundario);
}

.lk-descarga__pasos li {
    margin-bottom: 6px;
}

.lk-descarga__volver {
    text-align: center;
    margin: 20px 0 0 0;
    font-size: 0.9rem;
}

.lk-auth__enlace {
    text-align: center;
    margin: 16px 0 0 0;
    font-size: 0.9rem;
}

.lk-descarga__qr--chico {
    width: 160px;
}

.lk-descarga__seccion {
    font-size: 1.05rem;
    margin: 20px 0 4px 0;
    padding-top: 16px;
    border-top: 1px solid var(--lk-borde-suave);
}

.lk-descarga__seccion:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.lk-version-servidor {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--lk-texto-secundario);
}

/* ============================================================
   Licencia (LkDocs/22): aviso de vencimiento y "Verificar vencimiento"
   ============================================================ */

.lk-licencia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.lk-licencia--compacta {
    justify-content: center;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--lk-texto-secundario);
}

.lk-licencia__verificar {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.lk-licencia__verificar:disabled {
    cursor: default;
    opacity: 0.6;
}

.lk-licencia__resultado {
    flex-basis: 100%;
}

.lk-licencia__mensaje {
    white-space: pre-line;
}

.lk-licencia__manual {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--lk-borde-suave);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lk-licencia__manual-titulo {
    margin: 0;
    font-weight: 600;
}

.lk-licencia__codigo {
    font-family: monospace;
    font-size: 0.75rem;
    word-break: break-all;
    resize: none;
}

/* ============================================================
   Controles de formulario compartidos (F0): fecha, decimal, color, sección
   ============================================================ */

.lk-input--numero {
    text-align: right;
}

.lk-input--error {
    border-color: var(--lk-error);
    box-shadow: 0 0 0 3px var(--lk-error-suave);
}

.lk-field-error {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--lk-error);
}

.lk-color-field {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lk-color-codigo {
    font-family: Consolas, monospace;
    font-size: 0.9rem;
    color: var(--lk-texto-secundario);
}

.lk-color-muestra {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid var(--lk-borde-suave);
    border-radius: 4px;
}

.lk-seccion {
    margin: 0 0 18px 0;
    padding: 0;
    border: 1px solid var(--lk-borde);
    border-radius: var(--lk-radio);
    background: var(--lk-superficie);
    min-width: 0;
}

.lk-seccion__titulo {
    margin-left: 14px;
    padding: 0 8px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--lk-primario);
}

.lk-seccion__cuerpo {
    padding: 14px 16px 0 16px;
}

/* ============================================================
   Selector de claves foráneas (LkSelector, LkDocs/25 §10.6)
   ============================================================ */

.lk-selector {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.lk-selector__input {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
}

/* Texto escrito sin confirmar o registro inexistente: rojo, como en LkWin. */
.lk-selector--pendiente .lk-selector__input {
    color: var(--lk-error);
    font-weight: 600;
    border-color: var(--lk-error);
}

.lk-selector__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex: 0 0 40px;
    border: var(--rz-input-border);
    border-radius: var(--rz-input-border-radius);
    background: var(--lk-superficie);
    color: var(--lk-texto-secundario);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.lk-selector__btn:hover:not(:disabled) {
    color: var(--lk-primario);
    border-color: var(--lk-primario);
    background: var(--lk-celeste-suave);
}

.lk-selector__btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.lk-selector__spinner {
    position: absolute;
    right: 98px;
    top: 50%;
    margin-top: -8px;
}

.lk-selector__ayuda {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--lk-error);
}

/* Grilla de la ventana de búsqueda (RadzenDataGrid): filas con cursor de mano y la marcada bien visible. */


.lk-selector__grilla .rz-data-row {
    cursor: pointer;
}

/* Fila marcada (flechas): celeste con texto oscuro en negrita y barra azul a la izquierda (el azul fuerte con el
   texto azul de Radzen no se leía bien). */
.lk-selector__grilla .rz-data-row.rz-state-highlight > td {
    background-color: var(--lk-celeste-suave) !important;
}

.lk-selector__grilla .rz-data-row.rz-state-highlight > td,
.lk-selector__grilla .rz-data-row.rz-state-highlight .rz-cell-data {
    color: var(--lk-texto-fuerte) !important;
    font-weight: 600;
}

.lk-selector__grilla .rz-data-row.rz-state-highlight > td:first-child {
    box-shadow: inset 3px 0 0 var(--lk-primario);
}

.lk-selector__resumen {
    flex: 1;
    font-size: 0.85rem;
    color: var(--lk-texto-secundario);
}

/* Diálogo de búsqueda del selector (RadzenDialog + LkSelectorDialogo, 2026-10-10). Reemplaza la ventana propia
   que tenía el selector. Encabezado azul como la barra superior; el cuerpo se desplaza y el pie queda fijo abajo. */
.lk-selector-dialogo .rz-dialog-titlebar,
.lk-dialogo .rz-dialog-titlebar {
    background: linear-gradient(90deg, var(--lk-primario), var(--lk-celeste));
    color: #fff;
}

.lk-selector-dialogo .rz-dialog-title,
.lk-dialogo .rz-dialog-title {
    color: #fff;
    font-weight: 600;
}

.lk-selector-dialogo .rz-dialog-titlebar-close,
.lk-selector-dialogo .rz-dialog-titlebar-close .rzi,
.lk-dialogo .rz-dialog-titlebar-close,
.lk-dialogo .rz-dialog-titlebar-close .rzi {
    color: #fff;
}

.lk-selector-dialogo__busqueda {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.lk-selector-dialogo__texto {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
}

/* La grilla del diálogo no supera la pantalla: desplazamiento dentro de la zona de datos. */
.lk-selector__grilla .rz-data-grid-data {
    max-height: calc(100vh - 340px);
}

@media (max-width: 640px) {
    /* Celular: el diálogo ocupa casi todo el ancho y los botones quedan solo con ícono. */
    .lk-selector-dialogo {
        width: calc(100vw - 16px) !important;
    }

    .lk-selector-dialogo .lk-btn__texto {
        display: none;
    }
}

/* ============================================================
   Radzen.Blazor — integración con la paleta de LkWeb (piloto Depósitos 2026-10-10).
   El tema standard-base se carga antes de este archivo; acá solo se ajustan sus variables
   para que la grilla use los mismos colores, fuente y radios que el resto de la web.
   ============================================================ */
:root {
    --rz-primary: var(--lk-primario);
    --rz-primary-light: #3b82f6;
    --rz-primary-lighter: rgba(37, 99, 235, 0.10);
    --rz-primary-dark: var(--lk-primario-hover);
    --rz-primary-darker: #1e40af;
    --rz-text-font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --rz-border-radius: var(--lk-radio-sm);
    --rz-grid-header-background-color: var(--lk-celeste-suave);
    --rz-grid-hover-background-color: var(--lk-celeste-suave);
}

.lk-card .rz-data-grid {
    border: 1px solid var(--lk-borde-suave);
    border-radius: var(--lk-radio);
    box-shadow: var(--lk-sombra-sm);
}

/* Sin overflow:hidden en la grilla (cortaba la lista de "Mostrar" del pie, que Radzen abre adentro con
   position:absolute): las esquinas de arriba se redondean en la zona de datos, que ya tiene su propio scroll. */
.lk-card .rz-data-grid .rz-data-grid-data {
    border-top-left-radius: var(--lk-radio);
    border-top-right-radius: var(--lk-radio);
}

.lk-card .rz-data-grid .rz-grid-table thead th {
    color: var(--lk-texto-fuerte);
}

/* Pie de la grilla Radzen: resumen + selector "Mostrar" (incluye "Todos"). */
.lk-grilla-pie {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Íconos de Radzen ocultos hasta que carga su fuente (lk-ui.js agrega .lk-iconos-listos a <html>). */
html:not(.lk-iconos-listos) .rzi,
html:not(.lk-iconos-listos) [class*="rzi-"] {
    visibility: hidden;
}

/* Indicador de carga propio de la grilla (LoadingTemplate): spinner CSS, sin depender de la fuente. */
.lk-grilla-cargando {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--lk-superficie);
    border: 1px solid var(--lk-borde-suave);
    border-radius: var(--lk-radio);
    box-shadow: var(--lk-sombra);
    color: var(--lk-texto-secundario);
    font-size: 14px;
}

.lk-grilla-cargando__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--lk-celeste-suave);
    border-top-color: var(--lk-primario);
    border-radius: 50%;
    animation: lk-spin 0.7s linear infinite;
}

/* LkListToolbar en bloques (2026-10-10): [FiltrosAntes] [buscador + Buscar + Actualizar] ... [Nuevo / Editar
   último / Exportar]. Al faltar lugar baja un bloque entero, nunca un botón suelto. "Buscar por" no se corta. */
.lk-toolbar__antes {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.lk-toolbar__antes .lk-label {
    white-space: nowrap;
}

.lk-toolbar__buscador {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 380px;
}

.lk-toolbar__buscador .lk-toolbar__texto {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

.lk-toolbar__acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Celular: cada bloque en su fila, ocupando todo el ancho; las acciones a la derecha. */
@media (max-width: 640px) {
    .lk-toolbar__antes,
    .lk-toolbar__buscador {
        flex: 1 0 100%;
        max-width: none;
    }

    .lk-toolbar__antes .lk-campo-en-linea {
        flex: 1 1 auto;
    }

    .lk-toolbar__antes .lk-campo-en-linea .rz-dropdown {
        flex: 1 1 auto;
        width: auto !important;
    }
}

/* Barra superior: ícono + texto; en pantallas angostas solo el ícono (el texto queda en el title).
   2026-10-10: a 320 px Inicio/Perfil/Actualizar permisos/Salir no entraban y se salían de la franja. */
.lk-nav__link,
.lk-nav .lk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Hasta 1024 px (tablet, ventana angosta) la barra va solo con íconos: con "App móvil" los textos ya no entraban y la
   barra se partía en dos renglones (prueba de Leonardo a 768 px, 2026-10-10). El título de cada botón sigue en el tooltip. */
@media (max-width: 1024px) {
    .lk-nav__texto {
        display: none;
    }

    .lk-nav {
        flex-wrap: nowrap;
        gap: 4px;
    }
}

@media (max-width: 640px) {

    .lk-nav__link,
    .lk-nav .lk-btn {
        padding: 7px 9px;
    }
}

/* Botón "Restablecer columnas" del pie de LkGrid: discreto, tipo enlace. */
.lk-grilla-pie__restablecer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 2px 4px;
    color: var(--lk-primario);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.lk-grilla-pie__restablecer:hover:not(:disabled) {
    text-decoration: underline;
}

.lk-grilla-pie__restablecer:disabled {
    color: var(--lk-texto-secundario);
    opacity: 0.6;
    cursor: default;
}

.lk-grilla-pie__restablecer .lk-btn__ico {
    width: 15px;
    height: 15px;
}

/* Campos de formulario con Radzen (LkCampoTexto/Area/Numero/Combo, LkInputFecha), 2026-10-10:
   ocupan todo el ancho del campo como el .lk-input anterior. */
.lk-field .lk-campo__control,
.lk-field .rz-datepicker.lk-campo__control,
.lk-field .rz-numeric.lk-campo__control,
.lk-field .rz-dropdown.lk-campo__control {
    width: 100%;
}

/* Opción Sí/No: interruptor + texto en una línea. */
.lk-campo-sino {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lk-campo-sino__texto {
    margin: 0;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--lk-texto-fuerte);
    cursor: pointer;
    user-select: none;
}

.lk-campo-sino__texto--deshabilitado {
    cursor: default;
    opacity: 0.6;
}

/* LkCampoTexto con Ocupado=true: círculo de carga dentro del campo, a la derecha (ej. búsqueda por cédula). */
.lk-campo__caja {
    position: relative;
}

.lk-campo__ocupado {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid var(--lk-celeste-suave);
    border-top-color: var(--lk-primario);
    border-radius: 50%;
    animation: lk-spin 0.7s linear infinite;
    pointer-events: none;
}

/* Pestañas de Radzen en formularios (ej. Conceptos de gastos): separación con los campos de arriba y adentro.
   Overflow="TabsOverflow.Scroll": si los títulos no entran (celular) se recorren con flechas; min-width:0 evita
   que la fila de pestañas ensanche la página. */
.lk-pestanas {
    margin: 8px 0 16px 0;
    min-width: 0;
    max-width: 100%;
}

.lk-pestanas .rz-tabview-nav li {
    white-space: nowrap;
}

.lk-pestanas .rz-tabview-panel {
    padding: 16px 4px 4px 4px;
}

/* Esqueleto de carga de formularios (LkCargandoFormulario, RadzenSkeleton). */
.lk-cargando-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 8px 4px;
}

.lk-cargando-form__campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Panel de RadzenColorPicker (LkInputColor): más ancho y sin flechitas en Rojo/Verde/Azul/Transparencia, para que
   los números entren completos en sus cuadros (2026-10-10). Se pueden seguir escribiendo. */
.rz-colorpicker-popup {
    --rz-colorpicker-panel-max-width: 24rem;
}

.rz-colorpicker-rgba .rz-numeric-button {
    display: none;
}

.rz-colorpicker-rgba .rz-numeric,
.rz-colorpicker-rgba .rz-textbox {
    padding-inline: 6px;
}

.rz-colorpicker-rgba .rz-numeric input {
    padding-inline: 0;
    text-align: center;
}

/* LkCampoArchivo (RadzenFileInput): ocultar el tamaño en bytes que Radzen muestra junto al nombre (3.ª columna de la
   fila: imagen | nombre | tamaño | quitar). Se deja el nombre como referencia (no se guarda en la base). */
.lk-campo-archivo .rz-fileupload-row > div:nth-child(3) {
    display: none;
}

/* LkCampoCombo EnLinea: etiqueta y lista en la misma línea, sin margen de campo ("Buscar por", "Mostrar"). */
.lk-campo-en-linea {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lk-campo-en-linea .lk-label {
    margin: 0;
    white-space: nowrap;
}

.lk-grilla-pie .lk-campo-en-linea .lk-label {
    font-weight: normal;
    color: inherit;
}

/* Botones de los formularios (LkFormAcciones y los propios de cada página): ícono + texto; en celular solo el ícono
   (el texto queda en el title), mismo criterio que la barra superior. 2026-10-10. */
@media (max-width: 640px) {
    .lk-action-buttons .lk-btn__texto {
        display: none;
    }

    .lk-action-buttons .lk-btn {
        padding: 10px 14px;
    }
}

/* Confirmaciones y avisos (LkDialogoConfirmar en RadzenDialog, reemplaza a SweetAlert2, 2026-10-10). */
.lk-dialogo-confirmar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.lk-dialogo-confirmar__icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.lk-dialogo-confirmar__icono .lk-btn__ico {
    width: 24px;
    height: 24px;
}

.lk-dialogo-confirmar__icono--pregunta {
    background: var(--lk-celeste-suave);
    color: var(--lk-primario);
}

.lk-dialogo-confirmar__icono--peligro {
    background: var(--lk-error-suave);
    color: var(--lk-error);
}

.lk-dialogo-confirmar__icono--aviso {
    background: #fef3c7;
    color: #b45309;
}

.lk-dialogo-confirmar__mensaje {
    margin: 10px 0 0 0;
    color: var(--lk-texto-fuerte);
    line-height: 1.45;
}

.lk-dialogo-confirmar__botones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

@media (max-width: 640px) {
    .lk-dialogo {
        width: calc(100vw - 16px) !important;
    }
}

/* F2 LkDocs/26: obligatorios (asterisco rojo) y campos con error (como LkWin: rojo claro + texto debajo). */
.lk-obligatorio {
    color: var(--lk-error);
    font-weight: 700;
    margin-right: 3px;
}

.lk-field--error .rz-textbox,
.lk-field--error .rz-textarea,
.lk-field--error .rz-numeric,
.lk-field--error .rz-dropdown,
.lk-field--error .rz-datepicker > .rz-inputtext,
.lk-field--error .lk-selector__input,
.lk-field--error .rz-fileupload,
.lk-password-field--error .rz-textbox {
    border-color: var(--lk-error) !important;
    background-color: var(--lk-error-suave) !important;
}

.lk-field--error .lk-label {
    color: var(--lk-error);
}

/* F4 LkDocs/26: estrella de favorito en el menú lateral (se ve al pasar el mouse o si ya es favorito). */
.lk-sidebar__fav {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--lk-texto-secundario);
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: var(--lk-radio-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.lk-sidebar__link:hover .lk-sidebar__fav,
.lk-sidebar__fav:focus-visible,
.lk-sidebar__fav--activo {
    opacity: 1;
}

.lk-sidebar__fav--activo {
    color: #f59e0b;
}

.lk-sidebar__link--activo .lk-sidebar__fav {
    color: #fff;
}

.lk-sidebar--colapsado .lk-sidebar__fav {
    display: none;
}

@media (hover: none) {
    .lk-sidebar__fav {
        opacity: 1;
    }
}

/* F4 LkDocs/26: tarjetas del Inicio (Favoritos, Más usados, Recientes), como LkTarjetasModulos de LkWin. */
.lk-inicio__seccion {
    margin-bottom: 22px;
}

.lk-inicio__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lk-texto-fuerte);
    margin: 0 0 10px 0;
}

.lk-inicio__vacio {
    margin-bottom: 22px;
    color: var(--lk-texto-secundario);
}

.lk-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.lk-tarjeta {
    position: relative;
    background: var(--lk-superficie);
    border: 1px solid var(--lk-borde-suave);
    border-left: 4px solid var(--lk-tarjeta-color, var(--lk-primario));
    border-radius: var(--lk-radio);
    box-shadow: var(--lk-sombra-sm);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.lk-tarjeta:hover {
    box-shadow: var(--lk-sombra);
    transform: translateY(-1px);
}

.lk-tarjeta__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px 16px 14px;
    min-height: 92px;
    color: var(--lk-texto-fuerte);
    text-decoration: none;
}

.lk-tarjeta__link:hover {
    text-decoration: none;
}

.lk-tarjeta__ico {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lk-radio);
    background: var(--lk-tarjeta-color, var(--lk-primario));
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.lk-tarjeta__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lk-tarjeta__nombre {
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.lk-tarjeta__grupo {
    font-size: 0.8rem;
    color: var(--lk-texto-secundario);
    margin-top: 2px;
}

.lk-tarjeta__fav {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0;
    background: transparent;
    color: var(--lk-texto-secundario);
    font-size: 1.15rem;
    line-height: 1;
    padding: 4px;
    border-radius: var(--lk-radio-sm);
    cursor: pointer;
}

.lk-tarjeta__fav:hover {
    background: var(--lk-fondo);
}

.lk-tarjeta__fav--activo {
    color: #f59e0b;
}

/* Esqueleto de carga del Inicio: misma caja que .lk-tarjeta (borde, padding, alto), con ícono y dos líneas grises. */
.lk-tarjeta--esqueleto {
    border-left-color: var(--lk-borde-suave);
}

.lk-tarjeta--esqueleto:hover {
    box-shadow: var(--lk-sombra-sm);
    transform: none;
}

.lk-tarjeta .lk-tarjeta__ico-esqueleto.rz-skeleton {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--lk-radio);
}

.lk-tarjeta__texto--esqueleto {
    flex: 1 1 auto;
    gap: 8px;
}

.lk-tarjeta .lk-tarjeta__texto--esqueleto .rz-skeleton {
    height: 0.85rem;
}

@media (max-width: 600px) {
    .lk-tarjetas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .lk-tarjeta__link {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 32px 12px 12px;
        min-height: 0;
    }

    .lk-tarjeta__texto--esqueleto {
        align-self: stretch;
    }
}

/* Indicador de actividad sobre fondo claro (estrella de favorito, carga del Inicio), F4 LkDocs/26. */
.lk-spinner--oscuro {
    display: inline-block;
    border-color: var(--lk-celeste-suave);
    border-top-color: var(--lk-primario);
}

.lk-spinner--chico {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

.lk-inicio__cargando {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--lk-texto-secundario);
    margin-bottom: 12px;
}

.lk-tarjeta__fav:disabled,
.lk-sidebar__fav:disabled {
    cursor: progress;
}

/* F5 LkDocs/26: LkAviso (RadzenAlert). Mismo espacio debajo que el aviso anterior; el banner de licencia acomoda texto y
   botón en una línea dentro del mensaje de Radzen. */
.lk-aviso.rz-alert {
    margin: 0 0 16px 0;
}

.lk-aviso.lk-licencia .rz-alert-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

/* F5: Perfil (avatar con la inicial). */
.lk-perfil__cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.lk-perfil__avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lk-primario);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.lk-perfil__cabecera .lk-card__title,
.lk-perfil__cabecera .lk-card__subtitle {
    margin: 0;
}

.lk-perfil__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* F5: página 404 "perdido en el espacio": pen "404 Page - Lost In Space" de Saleh Riaz (codepen.io/salehriaz/pen/erJrZM),
   con sus SVG en wwwroot/img/404 (crédito al autor) y los colores de LkStock; dentro del área de contenido. */
@keyframes lk-espacio-cohete {
    100% { transform: translate(1200px, -600px); }
}

@keyframes lk-espacio-astronauta-mover {
    100% { transform: translate(-160px, -160px); }
}

@keyframes lk-espacio-astronauta-girar {
    100% { transform: rotate(-720deg); }
}

@keyframes lk-espacio-brillo {
    40% { opacity: 0.3; }
    90%, 100% { opacity: 1; transform: scale(1.2); }
}

.lk-espacio {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - var(--lk-topbar-altura) - 48px);
    border-radius: var(--lk-radio-lg);
    background: linear-gradient(160deg, #0f172a 0%, #1e3a8a 55%, var(--lk-primario) 100%);
    color: #fff;
    user-select: none;
}

.lk-espacio__estrellas {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 55% 35%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 75% 15%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 85% 60%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 20% 85%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 65% 85%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 45% 10%, #fff 50%, transparent 51%);
    background-size: 320px 320px;
    opacity: 0.7;
}

.lk-espacio__centro {
    position: relative;
    z-index: 100;
    padding: 14% 5% 10% 5%;
    text-align: center;
}

.lk-espacio__404 {
    position: relative;
    z-index: 100;
    max-width: 80%;
    height: auto;
    pointer-events: none;
}

.lk-espacio__texto {
    margin: 12px 0 18px 0;
    font-size: 1rem;
    /* Fijo (no var(--lk-celeste-suave)): el fondo del 404 es oscuro en los dos temas y en modo oscuro esa variable
       es un azul oscuro que no se leía. */
    color: #e0f2fe;
}

.lk-espacio__boton {
    position: relative;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1px solid var(--lk-celeste);
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease-in;
}

.lk-espacio__boton:hover {
    background-color: var(--lk-celeste);
    color: #0f172a;
    text-decoration: none;
    transform: scale(1.05);
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
}

.lk-espacio__objetos img {
    pointer-events: none;
}

.lk-espacio__cohete {
    position: absolute;
    z-index: 95;
    top: 75%;
    transform: translateX(-50px);
    animation: lk-espacio-cohete 200s linear infinite both running;
}

.lk-espacio__tierra {
    position: absolute;
    top: 20%;
    left: 15%;
    z-index: 90;
}

.lk-espacio__luna {
    position: absolute;
    top: 12%;
    left: 25%;
    z-index: 91;
}

.lk-espacio__caja-astronauta {
    position: absolute;
    z-index: 110;
    top: 60%;
    right: 20%;
    will-change: transform;
    animation: lk-espacio-astronauta-mover 50s infinite linear both alternate;
}

.lk-espacio__astronauta {
    animation: lk-espacio-astronauta-girar 200s infinite linear both alternate;
}

.lk-espacio__brillo {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 100%;
    background-color: #fff;
    opacity: 0.3;
    will-change: opacity;
}

.lk-espacio__brillo:nth-child(1) { top: 80%; left: 25%; animation: lk-espacio-brillo 2s infinite ease-in-out alternate 1s; }
.lk-espacio__brillo:nth-child(2) { top: 20%; left: 40%; animation: lk-espacio-brillo 2s infinite ease-in-out alternate 3s; }
.lk-espacio__brillo:nth-child(3) { top: 25%; left: 25%; animation: lk-espacio-brillo 2s infinite ease-in-out alternate 5s; }
.lk-espacio__brillo:nth-child(4) { top: 75%; left: 80%; animation: lk-espacio-brillo 2s infinite ease-in-out alternate 7s; }
.lk-espacio__brillo:nth-child(5) { top: 90%; left: 50%; animation: lk-espacio-brillo 2s infinite ease-in-out alternate 9s; }

@media (max-width: 600px) {
    .lk-espacio__centro {
        padding-top: 25%;
    }

    .lk-espacio__caja-astronauta {
        top: 70%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lk-espacio * {
        animation: none !important;
    }
}

/* Botones hechos con <a> (App móvil en la barra, Ir al inicio, Descargar): sin subrayado al pasar el mouse. */
a.lk-btn:hover {
    text-decoration: none;
}

/* ============================================================
   F6 LkDocs/26 (2026-10-10): modo oscuro. <html data-tema="oscuro"> (lk-ui.js / index.html) cambia la paleta --lk-*;
   la hoja de Radzen pasa a standard-dark-base y sus colores de LkStock se reajustan acá. LkMobile sigue en claro.
   ============================================================ */
:root[data-tema="oscuro"] {
    color-scheme: dark;

    --lk-primario: #3b82f6;
    --lk-primario-hover: #2563eb;
    --lk-celeste: #38bdf8;
    --lk-celeste-suave: #12304a;
    --lk-fondo: #0b1120;
    --lk-superficie: #111a2e;
    --lk-texto-fuerte: #e2e8f0;
    --lk-texto-secundario: #94a3b8;
    --lk-borde: #1e3a5f;
    --lk-borde-suave: #24324a;
    --lk-exito: #4ade80;
    --lk-error: #f87171;
    --lk-exito-suave: #0f2e1d;
    --lk-error-suave: #3a1418;
    --lk-texto-acento: #7dd3fc;

    --lk-sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --lk-sombra: 0 4px 16px rgba(0, 0, 0, 0.45);
    --lk-sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

    /* Radzen oscuro con los colores de LkStock. */
    --rz-primary: var(--lk-primario);
    --rz-primary-light: #60a5fa;
    --rz-primary-lighter: rgba(59, 130, 246, 0.18);
    --rz-primary-dark: #2563eb;
    --rz-primary-darker: #1d4ed8;
    --rz-base-background-color: var(--lk-fondo);
    --rz-grid-header-background-color: var(--lk-celeste-suave);
    --rz-grid-hover-background-color: var(--lk-celeste-suave);
}

/* Barra superior: el degradado azul se oscurece para no encandilar. */
:root[data-tema="oscuro"] .lk-topbar {
    background: linear-gradient(90deg, #1e3a8a 0%, #0c4a6e 100%);
}

/* Botones claros sobre la barra (outline): en oscuro, fondo translúcido. */
:root[data-tema="oscuro"] .lk-topbar .lk-btn--outline {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.25);
}

/* Botón sol/luna: cuadrado, solo ícono. */
.lk-tema-btn {
    padding: 7px 9px;
}

/* El QR necesita fondo blanco para poder leerse. */
:root[data-tema="oscuro"] .lk-descarga__qr {
    background: #ffffff;
}

/* Celular angosto (≤480 px, 2026-10-10): con el botón de tema y "App móvil" la barra no entraba a 320 px y "Salir"
   quedaba cortado. Se saca el botón Inicio (el logo "Lk" ya lleva al inicio) y se achican márgenes y botones. */
@media (max-width: 480px) {
    .lk-topbar__inner {
        padding: 0 10px;
        gap: 8px;
    }

    .lk-topbar__left {
        gap: 8px;
    }

    .lk-nav {
        gap: 3px;
    }

    .lk-nav__link--inicio {
        display: none;
    }

    .lk-nav__link,
    .lk-nav .lk-btn {
        padding: 6px 7px;
    }
}