/* Estilos del componente compartido CapaEditorHeader (AF / Inv / SFCap / SFGPP) */

.wl-capa-header {
    margin-bottom: 1rem;
}

.wl-capa-header .wl-gold-line {
    height: 3px;
    background: #D4A853;
    margin-bottom: 0.75rem;
    border-radius: 2px;
}

.wl-capa-header .wl-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 0.85rem;
    color: #667085;
    margin-bottom: .3rem;
    flex-wrap: wrap;
}

.wl-capa-header .wl-breadcrumb a {
    color: #1E3A5F;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.wl-capa-header .wl-breadcrumb a:hover {
    text-decoration: underline;
}

.wl-capa-header .wl-capa-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E3A5F;
    margin: 0;
    line-height: 1.2;
}

.wl-capa-header .wl-capa-subtitle {
    font-size: 0.9rem;
    color: #667085;
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.wl-capa-header .wl-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #eff4fb;
    color: #1E3A5F;
    border: 1px solid #d4dff0;
    white-space: nowrap;
}

.wl-capa-header .wl-chip-ok {
    background: #e6f4ea;
    color: #1e7e34;
    border-color: #b7dfc2;
}

.wl-capa-header .wl-chip-err {
    background: #fde9e9;
    color: #b42318;
    border-color: #f5c7c7;
}

.wl-capa-header .wl-chip-warn {
    background: #fff8e1;
    color: #805b00;
    border-color: #f2dfa0;
}

.wl-capa-header .wl-kpi-card {
    background: white;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    padding: 0.85rem 1rem;
    height: 100%;
}

.wl-capa-header .wl-kpi-card.danger {
    border: 2px solid #dc3545;
}

.wl-capa-header .wl-kpi-card.success {
    border: 2px solid #198754;
}

.wl-capa-header .wl-kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #667085;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: .25rem;
}

/* Achica con el ancho (como .wl-kpi-value-fluid): en «Saldos y capas» el editor va al lado de la lista y a 1280 px
   «17.790.031,52» a 1.35rem no cabía en la tarjeta (090, cuenta 120006). */
.wl-capa-header .wl-kpi-value {
    font-size: clamp(1rem, 1.2vw + 0.2rem, 1.35rem);
    overflow-wrap: anywhere;
    font-weight: 700;
    color: #1E3A5F;
    line-height: 1.2;
}

.wl-capa-header .wl-kpi-value.text-danger { color: #b42318; }
.wl-capa-header .wl-kpi-value.text-success { color: #198754; }

/* Botón "Más" del menú desplegable */
.wl-capa-header .wl-mas-btn {
    background: #f4f5f7;
    border: 1px solid #d0d5dd;
    color: #344054;
    border-radius: 4px;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.wl-capa-header .wl-mas-btn:hover {
    background: #e9eaec;
}

.wl-capa-header .wl-mas-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    min-width: 220px;
    z-index: 1050;
    padding: 0.25rem 0;
    margin-top: 4px;
}

.wl-capa-header .wl-mas-menu .wl-mas-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    color: #344054;
    cursor: pointer;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}

.wl-capa-header .wl-mas-menu .wl-mas-item:hover {
    background: #f4f5f7;
}

.wl-capa-header .wl-mas-menu .wl-mas-item-danger {
    color: #b42318;
}

.wl-capa-header .wl-mas-menu hr {
    margin: 0.25rem 0;
    border: 0;
    border-top: 1px solid #e4e7ec;
}

.wl-capa-header .wl-mas-wrapper {
    position: relative;
    display: inline-block;
}

/* «Saldos y capas» (S31N29): la lista de cuentas va en una columna angosta (3/12 desde 1200 px). Los nombres largos
   («Maquinarias y equipos de obra») no hacían salto de línea y el distintivo «Cuadra» se salía de la columna, encima del
   editor (visto en 090 a 1366 px, 14-oct-2026). El nombre parte en varias líneas y el distintivo no se encoge.
   Va aquí y no en un .razor.css: el host no carga los estilos de componente. */
.wl-s31-fila-cuenta {
    gap: 0.5rem;
    min-width: 0;
}

.wl-s31-fila-cuenta .k-button {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    text-align: left;
    justify-content: flex-start;
    padding-inline: 0;
}

.wl-s31-fila-cuenta .badge {
    flex-shrink: 0;
}

/* «De dónde sale» (S31N29): la tabla de capas puede ser larga (VIS 120003: 115 capas) y se desplaza dentro de la ventana */
.wl-s31-tabla-capas {
    max-height: 45vh;
    overflow: auto;
}

/* Plan de cuentas de S31N29: Cuenta y Nombre quedan fijos al desplazar. El tema pinta las celdas fijas de las filas alternas
   con su propio gris, más oscuro que el resto de la fila (el alterno de .custom-grid no las alcanza). Se superpone el mismo
   alterno sobre el fondo opaco de la grilla: la celda fija sigue tapando lo que pasa por debajo. */
.k-grid.wl-s31-plan .k-master-row.k-table-alt-row:not(:hover) .k-grid-content-sticky:not(.k-group-cell) {
    background: linear-gradient(var(--wl-alt-row-bg), var(--wl-alt-row-bg)), var(--kendo-color-surface-alt);
}

/* ===== Ingreso de Datos (S31N29, 15-oct-2026; maqueta FNx6tRYFCoR2RcqfA4bVkg) =====
   D1: la pantalla ocupa el alto de la ventana: cabecera y filtros arriba, la tabla se desplaza sola y el pie de totales
   queda siempre a la vista (en la pantalla anterior la página medía 1.309 px y los totales quedaban a 1.124, fuera de la pantalla).
   --wl-ingreso-arriba = lo que ocupan la barra de la aplicación y el margen de la página. */
.wl-ingreso {
    --wl-ingreso-arriba: 96px;
    --wl-ingreso-ancho-cuenta: 92px;   /* ancho de la columna Cuenta y desde dónde se fija Nombre: uno solo para los dos */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: calc(100dvh - var(--wl-ingreso-arriba));
    min-height: 460px;
    padding-top: 0.75rem;
}

.wl-ingreso-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.wl-ingreso-titulo { min-width: 0; }
.wl-ingreso-titulo .k-button-link { padding-inline: 0; }

.wl-ingreso-acciones {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.wl-ingreso-estado {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.wl-ingreso-estado-ok { background: var(--kendo-color-success-subtle); color: var(--kendo-color-success-on-subtle); }
.wl-ingreso-estado-pend { background: var(--kendo-color-warning-subtle); color: var(--kendo-color-warning-on-subtle); }
.wl-ingreso-estado-error { background: var(--kendo-color-error-subtle); color: var(--kendo-color-error-on-subtle); }

.wl-ingreso-mas { position: relative; }
.wl-ingreso-velo { position: fixed; inset: 0; z-index: 1040; }
.wl-ingreso-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 290px;
    padding: 0.25rem;
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md, 6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.wl-ingreso-menu-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: var(--kendo-border-radius-sm, 4px);
    background: transparent;
    color: var(--kendo-color-on-app-surface);
    text-align: left;
    cursor: pointer;
}
.wl-ingreso-menu-item small { color: var(--kendo-color-subtle); }
.wl-ingreso-menu-item:hover, .wl-ingreso-menu-item:focus-visible { background: var(--kendo-color-base-subtle-hover); }
.wl-ingreso-menu-peligro strong { color: var(--kendo-color-error); }

.wl-ingreso-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.wl-ingreso-buscar { margin-left: auto; width: 280px; max-width: 100%; }

/* La tabla: se desplaza dentro de su caja; encabezado y las dos primeras columnas fijas */
.wl-ingreso-caja {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 10px);
}
.wl-ingreso-tabla {
    width: 100%;
    min-width: 1000px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.wl-ingreso-col-cuenta { width: var(--wl-ingreso-ancho-cuenta); }
.wl-ingreso-col-saldo { width: 156px; }   /* cabe «524.657.570,27», el saldo más largo de 090 */
.wl-ingreso-col-dh { width: 128px; }
.wl-ingreso-col-tipo { width: 176px; }
.wl-ingreso-col-capas { width: 236px; }

.wl-ingreso-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    height: 38px;
    padding: 0 10px;
    background: var(--kendo-color-surface-alt);
    color: var(--kendo-color-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--wl-accent-gold);
    white-space: nowrap;
}
html[data-theme="light"] .wl-ingreso-tabla thead th { background: var(--kendo-color-primary-subtle); color: var(--kendo-color-primary); }

.wl-ingreso-tabla td {
    padding: 5px 10px;
    background: var(--kendo-color-surface);
    border-bottom: 1px solid var(--kendo-color-border);
    vertical-align: middle;
}
/* Capas: las columnas fijas en 2 porque la casilla numérica de Telerik trae position:relative + z-index:1 y, al desplazar
   a lo ancho, los saldos se pintaban encima de los nombres (visto por el usuario en 090, 15-oct-2026). El encabezado, encima. */
.wl-ingreso-tabla .wl-ingreso-fija1 { position: sticky; left: 0; z-index: 2; }
.wl-ingreso-tabla .wl-ingreso-fija2 { position: sticky; left: var(--wl-ingreso-ancho-cuenta); z-index: 2; box-shadow: 1px 0 0 var(--kendo-color-border); }
.wl-ingreso-tabla thead .wl-ingreso-fija1, .wl-ingreso-tabla thead .wl-ingreso-fija2 { z-index: 5; }

.wl-ingreso-grupo th {
    padding: 0;
    background: var(--kendo-color-surface-alt);
    border-bottom: 1px solid var(--kendo-color-border);
    text-align: left;
}
.wl-ingreso-grupo .wl-ingreso-fija1 {
    display: inline-block;
    padding: 7px 10px;
    font-weight: 700;
    color: var(--kendo-color-primary);
    background: var(--kendo-color-surface-alt);
}
.wl-ingreso-grupo-info { margin-left: 0.6rem; font-weight: 500; color: var(--kendo-color-subtle); }

.wl-ingreso-num { font-variant-numeric: tabular-nums; }
.wl-ingreso-nombre { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.wl-ingreso-saldo .k-input-inner { text-align: right; font-variant-numeric: tabular-nums; }
.wl-ingreso-saldo small { display: block; text-align: right; }
.wl-ingreso-tipo { color: var(--kendo-color-subtle); }

/* D4: Debe / Haber en palabras */
.wl-ingreso-dh {
    display: inline-flex;
    border: 1px solid var(--kendo-color-border);
    border-radius: 7px;
    overflow: hidden;
}
.wl-ingreso-dh button {
    height: 30px;
    padding: 0 0.7rem;
    border: 0;
    background: var(--kendo-color-surface);
    color: var(--kendo-color-subtle);
    font: inherit;
    cursor: pointer;
}
.wl-ingreso-dh button + button { border-left: 1px solid var(--kendo-color-border); }
.wl-ingreso-dh button:hover { background: var(--kendo-color-base-subtle-hover); }
.wl-ingreso-dh button.wl-ingreso-dh-on { background: var(--kendo-color-primary); color: var(--kendo-color-on-primary); font-weight: 600; }

.wl-ingreso-capas { display: flex; align-items: center; gap: 0.5rem; }
.wl-ingreso-capas-cifras { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wl-ingreso-capas .k-button { margin-left: auto; white-space: nowrap; }
.wl-ingreso-ok { color: var(--kendo-color-success); }

/* Filas: pendiente de guardar, con error, o con capas que no cuadran */
.wl-ingreso-tabla tr.wl-ingreso-fila-pend td { background: var(--kendo-color-warning-subtle); }
.wl-ingreso-tabla tr.wl-ingreso-fila-error td { background: var(--kendo-color-error-subtle); }
.wl-ingreso-tabla tr.wl-ingreso-fila-descuadre td:first-child { box-shadow: inset 3px 0 0 var(--kendo-color-error); }
.wl-ingreso-tabla tbody tr:not(.wl-ingreso-grupo):not(.wl-ingreso-aviso):not(.wl-ingreso-fila-pend):not(.wl-ingreso-fila-error):hover td { background: var(--kendo-color-base-subtle-hover); }

/* Pie de totales, fuera de la caja que se desplaza */
.wl-ingreso-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding: 0.6rem 1rem;
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 10px);
    font-variant-numeric: tabular-nums;
}
.wl-ingreso-pie-bloque { display: flex; flex-direction: column; gap: 0.1rem; }
.wl-ingreso-pie-titulo { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kendo-color-subtle); }
.wl-ingreso-pie-separador { width: 1px; align-self: stretch; background: var(--kendo-color-border); }
.wl-ingreso-tabla tr.wl-ingreso-aviso td {
    padding: 4px 10px 8px;
    background: var(--kendo-color-error-subtle);
    color: var(--kendo-color-error-on-subtle);
    font-size: 12px;
    font-weight: 600;
}
.wl-ingreso-tabla tr.wl-ingreso-aviso .wl-ingreso-fija1 { display: inline-block; background: transparent; }
.wl-ingreso-bloques { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-left: 0.5rem; }
.wl-ingreso-bloques .k-button { font-variant-numeric: tabular-nums; min-width: 3.2rem; }
@keyframes wl-ingreso-destello { from { background: var(--kendo-color-primary-subtle); } to { background: var(--kendo-color-surface); } }
.wl-ingreso-tabla tr.wl-ingreso-resaltar td { animation: wl-ingreso-destello 1.6s ease-out; }
/* Al pasar de fila con las flechas, la casilla no queda escondida bajo el encabezado fijo (38 px) */
.wl-ingreso-saldo input { scroll-margin-top: 48px; scroll-margin-bottom: 8px; }

/* «Saldos y capas»: desde 1200 px (lista al lado del editor) la lista de cuentas tiene su propia barra, para poder llevarla
   hasta la cuenta elegida sin que el editor se vaya de la vista (VIS: 113 cuentas con capas). */
@media (min-width: 1200px) {
    .wl-s31-lista-cuentas {
        max-height: calc(100dvh - 240px);
        min-height: 320px;
        overflow-y: auto;
    }
}

/* Grillas de capas con la descripción sin ancho fijo (capital, inventarios): la tabla no baja de 880 px. En un panel
   angosto la grilla se desplaza a lo ancho y la descripción conserva ~210 px; en uno ancho, la descripción se estira.
   Sin esto, las columnas fijas (650-670 px) le dejaban 0-40 px y el texto se partía en 3 a 5 renglones. */
.wl-grid-capas .k-grid-header-table,
.wl-grid-capas .k-grid-table {
    min-width: 880px;
}