/* UNI-R5O (04-oct-2026) - Liquidaciones de beneficios sociales (U1, U3-U9 y los conceptos del tablero).
   Clases PROPIAS de la tanda, con los tokens de mpu-base.css. Nunca reglas sobre .dxbl-*: el color de los
   componentes DevExpress sale del tema. Si se aprueban, subirlas a mpu-base.css.
   Reemplaza a las hojas liquidaciones-bs.css y liquidaciones-tablero.css y a los <style> de cada pagina. */

/* ---------- Filtros de la pagina: campos con rotulo encima, en una fila ---------- */
.mpu-r5o-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--mpu-espacio-3); }
.mpu-r5o-campo { display: flex; flex-direction: column; gap: var(--mpu-espacio-1); min-width: 0; }
.mpu-r5o-rotulo { font-size: var(--mpu-texto-chico); font-weight: 600; color: var(--mpu-secundario); }
.mpu-r5o-rotulo-suave { font-weight: 400; color: var(--mpu-apagado); }

/* ---------- Fila de tarjetas KPI que se reparte el ancho (5 o 6 tarjetas) ---------- */
.mpu-r5o-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--mpu-espacio-3); }

/* ---------- Identidad tecnica del modulo (build, commit, entorno) al pie ---------- */
.mpu-r5o-version { font-size: 11px; color: var(--mpu-apagado); }

/* ---------- Estado tachado (ANULADA / correlativo invalidado) ---------- */
.mpu-r5o-tachado { text-decoration: line-through; }

/* ---------- Listas de detalle dentro de avisos y paneles ---------- */
.mpu-r5o-lista { margin: var(--mpu-espacio-1) 0 0; padding-left: 18px; font-size: var(--mpu-texto-chico); line-height: 1.6; }
.mpu-r5o-linea { font-family: var(--mpu-fuente-cifras); font-size: var(--mpu-texto-chico); line-height: 1.7; white-space: pre-wrap; }
.mpu-r5o-linea-error { color: var(--mpu-peligro); font-weight: 600; }
.mpu-r5o-cuerpo-aviso { display: flex; flex-direction: column; gap: var(--mpu-espacio-1); padding: var(--mpu-espacio-2) 0; }

/* ---------- Leyenda de colores de fila y de estados ---------- */
.mpu-r5o-leyenda { display: flex; flex-wrap: wrap; gap: var(--mpu-espacio-2) var(--mpu-espacio-4); font-size: var(--mpu-texto-chico); color: var(--mpu-secundario); }
.mpu-r5o-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.mpu-r5o-muestra { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--mpu-borde); }
.mpu-r5o-muestra-error { background: var(--mpu-error-fondo); }
.mpu-r5o-muestra-aviso-fuerte { background: var(--mpu-aviso-fondo); border-color: var(--mpu-aviso-texto); }
.mpu-r5o-muestra-aviso { background: var(--mpu-aviso-fondo); }
.mpu-r5o-muestra-info { background: var(--mpu-info-fondo); }
.mpu-r5o-muestra-neutro { background: var(--mpu-neutro-fondo); }

/* ---------- Formato condicional de filas (U5) - de mayor a menor gravedad ----------
   Sobre tr/td con clase propia (CustomizeElement), igual que mpu-r4m-fila-error. */
.mpu-grilla tr.mpu-r5o-fila-error > td { background: var(--mpu-error-fondo); color: var(--mpu-peligro); font-weight: 600; }
.mpu-grilla tr.mpu-r5o-fila-aviso-fuerte > td { background: var(--mpu-aviso-fondo); color: var(--mpu-aviso-texto); }
.mpu-grilla tr.mpu-r5o-fila-aviso > td { background: var(--mpu-aviso-fondo); }
.mpu-grilla tr.mpu-r5o-fila-info > td { background: var(--mpu-info-fondo); }
.mpu-grilla tr.mpu-r5o-fila-neutro > td { background: var(--mpu-neutro-fondo); color: var(--mpu-secundario); font-style: italic; }
/* Fila que no se puede marcar o que esta anulada/bloqueada: texto apagado (el motivo va en el title). */
.mpu-grilla tr.mpu-r5o-fila-apagada > td { color: var(--mpu-apagado); }

/* ---------- Importes ---------- */
.mpu-r5o-negativo { color: var(--mpu-peligro); }

/* ---------- Celdas de dos lineas (titulo + detalle) ---------- */
.mpu-r5o-celda { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mpu-r5o-celda-sub { font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpu-r5o-celda-motivo { font-size: var(--mpu-texto-chico); color: var(--mpu-peligro); white-space: normal; }

/* ---------- Detalle de una fila (niveles 2 y 3 del tablero, apareamiento de U4) ---------- */
.mpu-r5o-nivel { display: flex; flex-direction: column; gap: var(--mpu-espacio-2); padding: var(--mpu-espacio-2) var(--mpu-espacio-3);
                 background: var(--mpu-fondo-zonas); border-left: 3px solid var(--mpu-azul-700); }
.mpu-r5o-nivel-3 { background: var(--mpu-superficie); border-left-color: var(--mpu-borde); }
.mpu-r5o-nivel-rotulo { font-size: 11px; font-weight: 600; color: var(--mpu-apagado); text-transform: uppercase; letter-spacing: .3px; }

/* ---------- Pagina con panel lateral fijo (U1: grilla + resumen del lote) ---------- */
.mpu-r5o-con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--mpu-espacio-3); align-items: start; }
@media (max-width: 1100px) { .mpu-r5o-con-lateral { grid-template-columns: minmax(0, 1fr); } }
.mpu-r5o-cifra-grande { font-size: 26px; font-weight: 600; line-height: 1; color: var(--mpu-texto); }

/* ---------- Barra de progreso (calculo, completitud) - sin degradado ---------- */
.mpu-r5o-progreso { height: 8px; border-radius: 4px; background: var(--mpu-neutro-fondo); overflow: hidden; }
.mpu-r5o-progreso-barra { height: 100%; background: var(--mpu-azul-700); transition: width .18s linear; }
@media (prefers-reduced-motion: reduce) { .mpu-r5o-progreso-barra { transition: none; } }

/* ---------- Hallazgos de una validacion (ventana de detalle de U1) ---------- */
.mpu-r5o-hallazgo { padding: var(--mpu-espacio-2) var(--mpu-espacio-3); border: 1px solid var(--mpu-borde); border-left-width: 4px;
                    border-radius: var(--mpu-radio-grande); display: flex; flex-direction: column; gap: 2px; }
.mpu-r5o-hallazgo-error { background: var(--mpu-error-fondo); border-left-color: var(--mpu-peligro); }
.mpu-r5o-hallazgo-aviso { background: var(--mpu-aviso-fondo); border-left-color: var(--mpu-dorado); }
.mpu-r5o-hallazgo-neutro { background: var(--mpu-neutro-fondo); border-left-color: var(--mpu-apagado); }
.mpu-r5o-hallazgo-ok { background: var(--mpu-ok-fondo); border-left-color: var(--mpu-verde); }
.mpu-r5o-hallazgo-titulo { font-weight: 600; color: var(--mpu-texto); }
.mpu-r5o-hallazgo-detalle { font-size: var(--mpu-texto-chico); color: var(--mpu-secundario); }
.mpu-r5o-pre { white-space: pre-wrap; }

/* Casilla obligatoria sin responder (condicion de cese, declaraciones): marco rojo en la ENVOLTURA propia. */
.mpu-r5o-falta { outline: 2px solid var(--mpu-peligro); outline-offset: 1px; border-radius: var(--mpu-radio); }

/* Etiqueta pulsable dentro de una celda (abre el detalle de la validacion). */
.mpu-r5o-enlace { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
                  text-decoration: underline dotted; text-underline-offset: 2px; }

/* Fila con un dato obligatorio sin responder (U1: candidato marcado sin condicion de cese). */
.mpu-grilla tr.mpu-r5o-fila-falta > td { background: var(--mpu-error-fondo); }

/* Fila de nivel 1 con su detalle abierto (tablero): se lee como un bloque con el nivel 2. */
.mpu-grilla tr.mpu-r5o-fila-abierta > td { background: var(--mpu-seleccion); }
/* ---------- Traza de un concepto (U3): cuerpo + panel de datos a la derecha ---------- */
.mpu-r5o-traza { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--mpu-espacio-3); align-items: start; }
@media (max-width: 1100px) { .mpu-r5o-traza { grid-template-columns: minmax(0, 1fr); } }
.mpu-r5o-cita { display: flex; flex-direction: column; gap: 2px; padding-left: var(--mpu-espacio-2); border-left: 3px solid var(--mpu-borde); }

/* Pasos del calculo: filas de rejilla (antes una tabla HTML). */
.mpu-r5o-pasos { display: flex; flex-direction: column; border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio); font-size: var(--mpu-texto-chico); }
.mpu-r5o-pasos-cab, .mpu-r5o-pasos-fila { display: grid; grid-template-columns: 32px minmax(0, 2fr) minmax(0, 2fr) 110px; gap: var(--mpu-espacio-2); padding: 3px var(--mpu-espacio-2); }
.mpu-r5o-pasos-cab { background: var(--mpu-fondo-zonas); font-weight: 600; color: var(--mpu-secundario); }
.mpu-r5o-pasos-fila { border-top: 1px solid var(--mpu-borde); }
.mpu-r5o-pasos-fila > span:nth-child(3) { overflow-wrap: anywhere; }
.mpu-r5o-pasos-fila > span:last-child, .mpu-r5o-pasos-cab > span:last-child { text-align: right; }
.mpu-r5o-pasos-total { font-weight: 600; background: var(--mpu-fondo-zonas); }

/* Grilla del alcance en la ventana de guardado: alto fijo con desplazamiento virtual (sin paginador, decision documentada). */
.mpu-r5o-alcance { height: 320px; }
/* ==================== Ajustes visuales (revision a 1366 y 1600 px, 04-oct-2026) ====================
   🔺 PARA SUBIR A mpu-base.css si se aprueba: son correcciones de las piezas compartidas (MpuKpi, MpuAviso)
   aplicadas SOLO bajo contenedores propios de esta tanda (.mpu-r5o-kpis, .mpu-r5o-pagina). */

/* Una cifra de dinero NUNCA se parte: «S/» y el monto en la misma linea. Cifra a 18 px para que seis
   tarjetas quepan en una fila a 1366 px; la unidad (texto) si puede bajar de linea. */
.mpu-r5o-kpis .mpu-kpi-valor { font-size: 18px; }
.mpu-r5o-kpis .mpu-kpi-valor .mpu-cifra { white-space: nowrap; }
.mpu-r5o-kpis .mpu-kpi-unidad { font-size: var(--mpu-texto-chico); }

/* MpuAviso esta pensado para UNA linea (franja de 32 px en fila). Con texto largo o una lista dentro, el
   rotulo, el icono y el texto quedaban en columnas desalineadas. Aqui: icono y rotulo arriba a la izquierda,
   el rotulo nunca se parte, y el texto ocupa el resto y puede tener varias lineas. */
.mpu-r5o-pagina .mpu-aviso { align-items: flex-start; padding: 6px var(--mpu-espacio-3); line-height: 1.45; }
.mpu-r5o-pagina .mpu-aviso > i { margin-top: 3px; }
.mpu-r5o-pagina .mpu-aviso-rotulo { white-space: nowrap; }
.mpu-r5o-pagina .mpu-aviso-texto { min-width: 0; }
.mpu-r5o-pagina .mpu-aviso .mpu-r5o-lista { margin-top: 2px; }

/* Pagina con panel lateral: el lateral baja debajo de la grilla cuando no hay ancho para los dos
   (a 1366 la grilla necesita todo el ancho para que sus columnas clave se vean completas). */
@media (max-width: 1599px) { .mpu-r5o-con-lateral { grid-template-columns: minmax(0, 1fr); } }

/* Pista de desplazamiento horizontal sobre una grilla ancha: el corte a la derecha nunca es mudo. */
.mpu-r5o-pista { font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); }

.mpu-r5o-nowrap { white-space: nowrap; }
/* El detalle de una fila (traza de U3, niveles del tablero, apareamiento de U4) vive DENTRO de la celda de una
   grilla que puede ser mas ancha que la pantalla y que no parte texto (TextWrapEnabled=false). Sin esto el texto
   de las citas salia cortado a la derecha. Aqui: el detalle parte lineas, no pasa del ancho visible de la
   pagina y se queda pegado a la izquierda aunque la grilla se desplace en horizontal. */
.mpu-r5o-nivel { white-space: normal; position: sticky; left: 0; max-width: calc(100vw - 330px); box-sizing: border-box; }
@media (min-width: 1600px) { .mpu-r5o-con-lateral .mpu-r5o-nivel { max-width: calc(100vw - 650px); } }

.mpu-r5o-chips { display: inline-flex; flex-wrap: wrap; gap: var(--mpu-espacio-1); margin-left: var(--mpu-espacio-2); vertical-align: middle; }
.mpu-r5o-traza .mpu-datos { grid-template-columns: 110px minmax(0, 1fr); }