/* ING (04-oct-2026) - Asistente de ingreso de trabajador (/laboral/ingreso). Clases PROPIAS (mpu-ing-*),
   nunca reglas sobre .dxbl-*. La barra de pasos se propone como pieza compartida MpuPasos si se aprueba. */

/* Barra de pasos: 1 Persona - 2 Plaza - ... - 6 Revision */
.mpu-ing-pasos {
    list-style: none; margin: 0 0 var(--mpu-espacio-3); padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--mpu-espacio-1); align-items: center;
}
.mpu-ing-paso {
    display: inline-flex; align-items: center; gap: var(--mpu-espacio-2);
    padding: var(--mpu-espacio-1) var(--mpu-espacio-3); min-height: 30px;
    border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-pildora);
    background: var(--mpu-superficie); color: var(--mpu-secundario);
    font: inherit; font-size: var(--mpu-texto-base); cursor: pointer;
}
.mpu-ing-paso:disabled { cursor: default; color: var(--mpu-apagado); background: var(--mpu-fondo-zonas); }
.mpu-ing-paso-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--mpu-neutro-fondo); color: var(--mpu-texto); font-size: var(--mpu-texto-chico); font-weight: 600;
}
.mpu-ing-paso-actual { border-color: var(--mpu-azul-700); color: var(--mpu-azul-700); font-weight: 600; background: var(--mpu-seleccion); }
.mpu-ing-paso-actual .mpu-ing-paso-num { background: var(--mpu-azul-700); color: #FFFFFF; }
.mpu-ing-paso-ok .mpu-ing-paso-num { background: var(--mpu-ok-fondo); color: var(--mpu-verde-texto); }
.mpu-ing-paso-error .mpu-ing-paso-num { background: var(--mpu-error-fondo); color: var(--mpu-peligro); }
.mpu-ing-paso-sep { width: 14px; height: 1px; background: var(--mpu-borde); }

/* Cuerpo: contenido del paso + resumen a la derecha (abajo en pantallas chicas). */
.mpu-ing-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--mpu-espacio-3); align-items: start; }
@media (max-width: 1100px) { .mpu-ing-cuerpo { grid-template-columns: minmax(0, 1fr); } }
.mpu-ing-principal { display: flex; flex-direction: column; gap: var(--mpu-espacio-3); min-width: 0; }
.mpu-ing-resumen { position: sticky; top: var(--mpu-espacio-3); display: flex; flex-direction: column; gap: var(--mpu-espacio-3); }

/* Lista de control (✔ / ⚠ / ✖) */
.mpu-ing-control { display: flex; gap: var(--mpu-espacio-2); align-items: flex-start; padding: var(--mpu-espacio-1) 0; font-size: var(--mpu-texto-chico); }
.mpu-ing-control > i { margin-top: 2px; width: 14px; text-align: center; }
.mpu-ing-control-ok > i { color: var(--mpu-verde-texto); }
.mpu-ing-control-aviso > i { color: var(--mpu-aviso-texto); }
.mpu-ing-control-error > i { color: var(--mpu-peligro); }
.mpu-ing-control-info > i { color: var(--mpu-azul-700); }
.mpu-ing-conteo { display: flex; gap: var(--mpu-espacio-3); font-size: var(--mpu-texto-chico); }

/* Campos de una fila de filtros (tipo, mes, año, DNI) */
.mpu-ing-campos { display: flex; flex-wrap: wrap; gap: var(--mpu-espacio-3); align-items: flex-end; }
.mpu-ing-campo { display: flex; flex-direction: column; gap: var(--mpu-espacio-1); min-width: 0; }
.mpu-ing-campo > label { font-size: var(--mpu-texto-chico); color: var(--mpu-secundario); font-weight: 600; }
.mpu-ing-ancho-chico { width: 120px; }
.mpu-ing-ancho-medio { width: 200px; }
.mpu-ing-ancho-grande { width: 360px; max-width: 100%; }

/* ---- v2 (04-oct): un paso por pantalla, listas compactas, importes que no se parten ---- */
.mpu-ing .mpu-cifra, .mpu-ing-derecha { white-space: nowrap; }
.mpu-ing .mpu-panel { padding: var(--mpu-espacio-3) var(--mpu-espacio-4); }
.mpu-ing-principal > .mpu-aviso { margin: 0; }
.mpu-ing-ancho-mini { width: 96px; }
.mpu-ing-crece { flex: 1 1 320px; }
.mpu-ing-subtitulo { margin: var(--mpu-espacio-3) 0 var(--mpu-espacio-1); font-size: var(--mpu-texto-chico); font-weight: 600; color: var(--mpu-secundario); }
.mpu-ing-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--mpu-espacio-2); flex-wrap: wrap; }
.mpu-ing-cabecera > .mpu-panel-titulo { margin: 0; }

/* Persona: iniciales + nombre completo (nunca cortado) */
.mpu-ing-persona { display: flex; align-items: center; gap: var(--mpu-espacio-3); }
.mpu-ing-iniciales {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mpu-seleccion); color: var(--mpu-azul-700); font-weight: 600;
}
.mpu-ing-nombre { font-size: 15px; font-weight: 600; color: var(--mpu-texto); }

/* Listas compactas (vínculos, conceptos, pares, resumen, control) */
.mpu-ing-lista, .mpu-ing-conceptos, .mpu-ing-pares, .mpu-ing-apilado, .mpu-ing-totales, .mpu-ing-control-lista, .mpu-ing-correctas { list-style: none; margin: 0; padding: 0; }
.mpu-ing-fila, .mpu-ing-conceptos > li {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--mpu-espacio-3); align-items: center;
    padding: 6px 0; border-bottom: 1px solid var(--mpu-fondo-zonas); font-size: var(--mpu-texto-base);
}
.mpu-ing-fila:last-child, .mpu-ing-conceptos > li:last-child { border-bottom: none; }
.mpu-ing-tipo { width: 76px; font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); }
.mpu-ing-derecha { text-align: right; }

/* Datos en dos columnas: rótulo arriba, valor abajo */
.mpu-ing-datos2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mpu-espacio-3) var(--mpu-espacio-4); margin-top: var(--mpu-espacio-2); }
.mpu-ing-datos2 > div, .mpu-ing-apilado > li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mpu-ing-datos2 span, .mpu-ing-apilado span, .mpu-ing-pares span { font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); }
.mpu-ing-datos2 strong, .mpu-ing-apilado strong { font-weight: 600; color: var(--mpu-texto); overflow-wrap: anywhere; }
.mpu-ing-apilado { display: flex; flex-direction: column; gap: var(--mpu-espacio-2); }

/* Paso 3 y resultado: dos columnas */
.mpu-ing-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mpu-espacio-3); align-items: start; }
.mpu-ing-dos-resultado { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .mpu-ing-dos, .mpu-ing-dos-resultado { grid-template-columns: minmax(0, 1fr); } }
.mpu-ing-formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mpu-espacio-3); }
.mpu-ing-pares > li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--mpu-espacio-2); padding: 4px 0; border-bottom: 1px solid var(--mpu-fondo-zonas); }
.mpu-ing-pares strong { font-weight: 500; font-size: var(--mpu-texto-chico); color: var(--mpu-texto); }

/* Importe destacado */
.mpu-ing-importe { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mpu-espacio-3); padding: var(--mpu-espacio-2) 0; border-bottom: 1px solid var(--mpu-borde); }
.mpu-ing-importe strong { font-size: 20px; color: var(--mpu-azul-700); }

/* Totales del resultado */
.mpu-ing-totales > li { display: flex; justify-content: space-between; gap: var(--mpu-espacio-3); padding: 6px 0; border-bottom: 1px solid var(--mpu-fondo-zonas); }
.mpu-ing-neto { font-size: 16px; }
.mpu-ing-neto strong { color: var(--mpu-verde-texto); }

/* Lista de control */
.mpu-ing-control-lista { display: flex; flex-direction: column; gap: var(--mpu-espacio-2); margin: var(--mpu-espacio-2) 0; }
.mpu-ing-control-lista > li { border-radius: var(--mpu-radio); padding: var(--mpu-espacio-2) var(--mpu-espacio-3); font-size: var(--mpu-texto-base); }
.mpu-ing-control-lista > .mpu-ing-control-error { background: var(--mpu-error-fondo); }
.mpu-ing-control-lista > .mpu-ing-control-aviso { background: var(--mpu-aviso-fondo); }
.mpu-ing-control-lista a { font-size: var(--mpu-texto-chico); color: var(--mpu-azul-700); }
.mpu-ing-enlace { background: none; border: none; padding: var(--mpu-espacio-1) 0; color: var(--mpu-verde-texto); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.mpu-ing-correctas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--mpu-espacio-3); font-size: var(--mpu-texto-chico); color: var(--mpu-secundario); }
.mpu-ing-correctas i { color: var(--mpu-verde-texto); }
.mpu-ing-conteo-resumen { display: flex; align-items: center; gap: var(--mpu-espacio-2); margin-top: var(--mpu-espacio-3); }

/* ---- 276 (06-oct): columna derecha del paso 3 con el documento de ingreso y la plantilla ---- */
.mpu-ing-columna { display: flex; flex-direction: column; gap: var(--mpu-espacio-3); min-width: 0; }
.mpu-ing-fila-completa { grid-column: 1 / -1; }
.mpu-ing-doc-fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 140px minmax(0, 1fr); gap: var(--mpu-espacio-3); }
@media (max-width: 1100px) { .mpu-ing-doc-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mpu-ing-enlace-azul { color: var(--mpu-azul-700); align-self: flex-start; }

/* ---- VINC fase B (08-oct): paso 0 «¿Cómo se vincula?» (11 tipos) y lo que propone ---- */
.mpu-vinc-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--mpu-espacio-2); }
.mpu-vinc-tipo {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
    padding: 5px var(--mpu-espacio-3); min-width: 0;
    border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio);
    background: var(--mpu-superficie); color: var(--mpu-texto); font: inherit; cursor: pointer;
}
.mpu-vinc-tipo strong { font-size: var(--mpu-texto-base); font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpu-vinc-tipo span { font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); line-height: 1.25; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpu-vinc-tipo:hover:not(:disabled) { border-color: var(--mpu-azul-700); }
.mpu-vinc-tipo:focus-visible { outline: 2px solid var(--mpu-azul-700); outline-offset: 1px; }
.mpu-vinc-tipo-actual { border-color: var(--mpu-azul-700); background: var(--mpu-seleccion); box-shadow: inset 3px 0 0 var(--mpu-azul-700); }
.mpu-vinc-tipo-actual strong { color: var(--mpu-azul-700); }
.mpu-vinc-propuesta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mpu-espacio-2) var(--mpu-espacio-4); }
.mpu-vinc-propuesta > div:not(.mpu-ing-campo) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mpu-vinc-propuesta span { font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); }
.mpu-vinc-propuesta strong { font-weight: 600; font-size: var(--mpu-texto-base); color: var(--mpu-texto); overflow-wrap: anywhere; }
@media (max-width: 1100px) { .mpu-vinc-propuesta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mpu-vinc-regla { margin: var(--mpu-espacio-1) 0 0; }
.mpu-ing-pares > li.mpu-vinc-tp { align-items: center; padding: 2px 0; }
.mpu-vinc-propuesto { font-weight: 400; }
/* EDAD-02 (08-oct-2026) · casilla «¿Percibe pensión?» del paso Vínculo y página «Alertas de edad». Sin reglas sobre .dxbl-*. */
.mpu-ing-campo-check { justify-content: flex-start; }
.mpu-edad-mes { gap: var(--mpu-espacio-2); align-items: center; }
.mpu-edad-combo { width: 130px; }
.mpu-edad-combo-chico { width: 92px; }

/* EDAD-03 (08-oct-2026) · solicitud de continuidad a los 70 (ventana y columna de «Alertas de edad»). Sin reglas sobre .dxbl-*. */
.mpu-solcont-datos { grid-template-columns: 130px minmax(0, 1fr); }
.mpu-solcont-error { display: block; }
.mpu-solcont-eliminar { justify-content: flex-end; gap: var(--mpu-espacio-2); align-items: center; }
.mpu-edad-solicitud { display: flex; align-items: center; gap: var(--mpu-espacio-1); min-width: 0; }

/* 09-oct-2026 · plaza con el buscador de listas grandes (DxPopupLookup): el cuadro crece y la casilla «Incluir ocupadas»
   va a su lado; el conteo va en el rótulo, en una línea. Sin reglas sobre .dxbl-*. */
.mpu-ing-plaza-fila { display: flex; align-items: center; gap: var(--mpu-espacio-2); min-width: 0; }
.mpu-ing-plaza-fila > .mpu-lookup { flex: 1 1 auto; min-width: 0; }
.mpu-ing-plaza-todas { white-space: nowrap; }
.mpu-ing-campo > label.mpu-ing-plaza-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpu-ing-plaza-rotulo > .mpu-suave { font-weight: 400; }