/* UNI-R5Q (04/06-oct-2026) - Ventanas y formularios que se cortaban. Clases PROPIAS de la tanda (nunca reglas
   sobre las clases internas de DevExpress). Si se aprueban, subirlas a mpu-base.css.

   «Conceptos de la planilla» (UNI-R5Q-2, decisión del Arquitecto): cabecera en DxFormLayout de solo lectura,
   franja de cifras que no se parten y una grilla con la regla completa por pestaña. */

/* Cabecera compacta (Arquitecto 06-oct: sin cuadros ni títulos de grupo). Un texto largo NUNCA empuja el alto:
   elipsis y el texto completo en el tooltip (title). */
.mpu-r5q-cabecera { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mpu-r5q-cab-titulo { display: flex; align-items: baseline; gap: var(--mpu-espacio-2); min-width: 0; }
.mpu-r5q-cab-nombre { font-size: 16px; font-weight: 600; color: var(--mpu-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mpu-r5q-cab-estado { margin-left: auto; display: flex; gap: var(--mpu-espacio-1); flex-shrink: 0; align-self: center; }
.mpu-r5q-cab-datos { display: grid; grid-template-columns: 1.2fr 1.6fr 1.2fr 0.8fr; gap: var(--mpu-espacio-3); }
.mpu-r5q-dato { display: flex; flex-direction: column; min-width: 0; }
.mpu-r5q-dato-rotulo { font-size: 11px; color: var(--mpu-apagado); line-height: 14px; }
.mpu-r5q-dato-valor { font-weight: 600; color: var(--mpu-texto); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpu-r5q-cab-dias { font-size: var(--mpu-texto-chico); color: var(--mpu-secundario); line-height: 16px; }
.mpu-r5q-cab-dias strong { color: var(--mpu-texto); }

/* Franja de una línea: Ingresos (+ Otros) − Descuentos = NETO · Aportes · Total planilla; cifras sin partir */
.mpu-r5q-franja {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--mpu-espacio-4);
    padding: 5px var(--mpu-espacio-3); background: var(--mpu-fondo-zonas);
    border-top: 1px solid var(--mpu-borde); border-bottom: 1px solid var(--mpu-borde);
}
.mpu-r5q-fr-item { white-space: nowrap; }
.mpu-r5q-fr-rotulo { font-size: var(--mpu-texto-chico); color: var(--mpu-secundario); }
.mpu-r5q-fr-valor { font-weight: 600; color: var(--mpu-texto); }
.mpu-r5q-fr-neto .mpu-r5q-fr-rotulo { font-weight: 600; color: var(--mpu-azul-700); }
.mpu-r5q-fr-neto .mpu-r5q-fr-valor { font-size: 17px; color: var(--mpu-azul-700); }

/* Contenido de cada pestaña: aire bajo la tira de pestañas */
.mpu-r5q-pestana { padding-top: var(--mpu-espacio-3); }

/* Lista de datos con cifras en columnas angostas (costos de la plaza del PAP): la etiqueta se ajusta y la
   cifra va a la derecha sin partirse (mpu-datos fija la etiqueta en 140 px, que en media columna no entra). */
.mpu-r5q-datos-cifras { grid-template-columns: minmax(0, 1fr) auto; }
.mpu-r5q-datos-cifras dd { text-align: right; white-space: nowrap; }

/* UNI-R5Q-3 · página de detalle de la planilla: foto + cabecera, y «Datos que usa el cálculo» en líneas */
.mpu-r5q-persona { display: flex; align-items: center; gap: var(--mpu-espacio-3); min-width: 0; }
.mpu-r5q-persona > .mpu-r5q-cabecera { flex: 1 1 auto; }
.mpu-r5q-calc { display: flex; flex-direction: column; gap: var(--mpu-espacio-2); }
.mpu-r5q-calc .mpu-panel-titulo { margin: 0; }
.mpu-r5q-calc-lineas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px var(--mpu-espacio-4); }
.mpu-r5q-calc-linea { display: flex; gap: var(--mpu-espacio-2); align-items: baseline; min-width: 0; line-height: 18px; font-size: var(--mpu-texto-base); }
.mpu-r5q-calc-rotulo { flex: 0 0 104px; font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); }
@media (max-width: 1100px) { .mpu-r5q-calc-lineas { grid-template-columns: minmax(0, 1fr); } }

/* UNI-R5Q-3 · página de detalle (diseño aprobado 06-oct): FRANJA superior (identificación + contacto / datos de la
   planilla) y debajo DOS zonas: la grilla (la más ancha) y el PANEL derecho de 360 px (Resumen, Verificación, Datos
   del cálculo). La grilla y el panel ocupan el alto disponible y se desplazan por dentro: la página no se desplaza.
   <1200 px: todo apilado. --r5q-top lo fija la página (dónde empieza la zona). */
.mpu-r5q-num { font-variant-numeric: tabular-nums; white-space: nowrap; }   /* un solo tipo para cifras: el de la app */
.mpu-r5q-detalle .mpu-grilla { font-variant-numeric: tabular-nums; }

.mpu-r5q-sup { display: flex; align-items: center; gap: var(--mpu-espacio-3); min-width: 0; padding: 0 0 var(--mpu-espacio-2); margin-bottom: var(--mpu-espacio-2); border-bottom: 1px solid var(--mpu-borde); }
.mpu-r5q-sup-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; font-size: 16px; }
.mpu-r5q-sup-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mpu-r5q-sup-l1 { display: flex; align-items: center; gap: var(--mpu-espacio-2); min-width: 0; line-height: 22px; }
.mpu-r5q-sup-nombre { font-size: 16px; font-weight: 600; color: var(--mpu-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 120px; flex: 0 1 auto; }
.mpu-r5q-sup-puesto { color: var(--mpu-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 60px; flex: 0 1 auto; }
.mpu-r5q-sup-l1 > .mpu-chip, .mpu-r5q-sup-l1 > .mpu-suave { flex-shrink: 0; white-space: nowrap; }
.mpu-r5q-sup-l2 { font-size: var(--mpu-texto-chico); color: var(--mpu-secundario); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpu-r5q-sup-l2 strong { color: var(--mpu-texto); }
.mpu-r5q-contacto { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; white-space: nowrap; }
.mpu-r5q-icono-enlace { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--mpu-radio); color: var(--mpu-azul-700); text-decoration: none; }
.mpu-r5q-icono-enlace:hover { background: var(--mpu-fila-hover); }
.mpu-r5q-contacto > .mpu-suave { padding: 0 6px; }

.mpu-r5q-dos {
    display: grid; gap: var(--mpu-espacio-4); align-items: stretch;
    grid-template-columns: minmax(0, 1fr) 360px;
    height: calc(100vh - var(--r5q-top, 200px) - 36px); min-height: 360px; /* 36 px: el pie de mpu-contenido y del marco */
}
.mpu-r5q-der { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mpu-r5q-grilla-alta { flex: 0 1 auto; min-height: 200px; }  /* mide según sus filas; si no cabe, se encoge y desplaza por dentro */
.mpu-r5q-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-left: var(--mpu-espacio-3); border-left: 1px solid var(--mpu-borde); font-size: var(--mpu-texto-base); }
@media (max-width: 1199px) {
    .mpu-r5q-dos { grid-template-columns: minmax(0, 1fr); height: auto; }
    .mpu-r5q-panel { overflow: visible; padding-left: 0; border-left: 0; }
    .mpu-r5q-grilla-alta { height: 70vh; flex: none; }
    .mpu-r5q-sup-l1 { flex-wrap: wrap; }
    .mpu-r5q-sup-l2 { white-space: normal; }
}
.mpu-r5q-bloque-izq { padding: var(--mpu-espacio-2) 0; border-bottom: 1px solid var(--mpu-borde); display: flex; flex-direction: column; gap: 4px; }
.mpu-r5q-bloque-izq:first-child { padding-top: 0; }
.mpu-r5q-bloque-izq:last-child { border-bottom: 0; }
.mpu-r5q-izq-titulo { margin: 0; font-size: var(--mpu-titulo-bloque); font-weight: 600; color: var(--mpu-azul-700); }

/* Resumen */
.mpu-r5q-resumen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 0; align-items: baseline; }
.mpu-r5q-res-rotulo { color: var(--mpu-secundario); }
.mpu-r5q-res-valor { text-align: right; white-space: nowrap; font-weight: 600; color: var(--mpu-texto); padding-left: var(--mpu-espacio-3); }
.mpu-r5q-res-neto { color: var(--mpu-azul-700); font-weight: 600; line-height: 28px; background: var(--mpu-info-fondo); align-self: stretch; display: flex; align-items: center; }
.mpu-r5q-res-rotulo.mpu-r5q-res-neto { padding-left: 6px; border-radius: var(--mpu-radio) 0 0 var(--mpu-radio); }
.mpu-r5q-res-valor.mpu-r5q-res-neto { justify-content: flex-end; padding-right: 6px; border-radius: 0 var(--mpu-radio) var(--mpu-radio) 0; font-size: 19px; }
.mpu-r5q-res-comparacion { grid-column: 1 / -1; text-align: right; font-size: var(--mpu-texto-chico); line-height: 16px; font-variant-numeric: tabular-nums; }
.mpu-r5q-sube { color: var(--mpu-verde-texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mpu-r5q-baja { color: var(--mpu-peligro); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Verificación: ✓ verde · ⚠ ámbar · ✗ rojo; texto corto, detalle en el tooltip */
.mpu-r5q-verif { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mpu-r5q-verif li { display: flex; gap: 6px; align-items: baseline; line-height: 18px; cursor: help; }
.mpu-r5q-verif li > i { flex: 0 0 14px; }
.mpu-r5q-verif-ok > i { color: var(--mpu-verde-texto); }
.mpu-r5q-verif-aviso > i { color: var(--mpu-aviso-texto); }
.mpu-r5q-verif-aviso { color: var(--mpu-aviso-texto); }
.mpu-r5q-verif-error > i, .mpu-r5q-verif-error { color: var(--mpu-peligro); font-weight: 600; }

/* Filas del mes anterior que no están este mes */
.mpu-r5q-ausente { color: var(--mpu-apagado); font-style: italic; }
.mpu-r5q-fila-ausente { color: var(--mpu-apagado); }

/* La barra única (DxToolbar plana) */
.mpu-r5q-cinta { width: calc(100% - 28px); margin: 0 14px var(--mpu-espacio-2); border-bottom: 1px solid var(--mpu-borde); }

/* «Datos del cálculo»: tabla corta, un dato por línea, plegable */
.mpu-r5q-calc-panel { gap: 4px; }
.mpu-r5q-calc-dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px var(--mpu-espacio-2); margin: 0; line-height: 18px; font-size: var(--mpu-texto-base); font-variant-numeric: tabular-nums; }
.mpu-r5q-calc-dl dt { font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); }
.mpu-r5q-calc-dl dd { margin: 0; color: var(--mpu-texto); overflow-wrap: anywhere; }