/* =====================================================================================
   mpu-base.css — ESTILO ÚNICO de la app (UNI-01/UNI-02, oct-2026)

   Fuente de verdad: Docs/Uniformidad/Guia de estilo RRHH.dc.html (aprobada el 02-10-2026).
   Una sola fuente de colores, espacios y bordes. Las páginas NO escriben colores a mano ni su
   propio <style>: usan las piezas Mpu* (Components/Shared/Mpu) y estas variables.

   Reglas (ver Docs/Uniformidad y la memoria «NO repintar DevExpress por dentro»):
   - Aquí NO hay reglas sobre .dxbl-*: los componentes DevExpress toman el color del tema
     (acento #122D5E fijado en Services/DxThemes.cs con SetCustomAccentColor) y su tamaño de la API.
   - Letra: la de Fluent (Segoe UI); estas reglas no la cambian. Mono solo para códigos, DNI,
     rutas, fechas e importes (clase mpu-cifra).
   - Las clases propias llevan prefijo mpu- para no chocar con Bootstrap (que NO se carga)
     ni con los temas viejos. Las clases row, col-N, d-flex y mb-N NO se definen aquí a propósito
     (ojo: nunca escribir asterisco seguido de barra dentro de un comentario, lo cierra).
   ===================================================================================== */

:root {
    /* Color institucional (guía 01) */
    --mpu-azul-900: #0A1B3D;      /* barra lateral */
    --mpu-azul-700: #122D5E;      /* acento: botón principal */
    --mpu-dorado: #D4A01E;        /* solo fondos y marcas; nunca texto sobre blanco */
    --mpu-verde: #1DA87A;
    --mpu-verde-texto: #0F6B4C;

    /* Estados y neutros (guía 01) */
    --mpu-peligro: #B42318;
    --mpu-aviso-texto: #7A5208;
    --mpu-texto: #16191D;
    --mpu-secundario: #414A54;
    --mpu-apagado: #6B7580;
    --mpu-borde-control: #C9D0D8;
    --mpu-borde: #D5DAE0;
    --mpu-seleccion: #E8EDF6;
    --mpu-fondo-zonas: #F1F3F5;
    --mpu-superficie: #FFFFFF;
    --mpu-fila-hover: #F4F6F9;
    --mpu-fila-seleccionada: #DCE5F3;

    /* Fondos suaves de estado (texto oscuro encima: contraste AA) */
    --mpu-ok-fondo: #E3F5EE;
    --mpu-aviso-fondo: #FBF1D6;
    --mpu-error-fondo: #FBE4E4;
    --mpu-info-fondo: #E8EDF6;
    --mpu-neutro-fondo: #ECEEF2;

    /* Densidad compacta (guía 01) */
    --mpu-espacio-1: 4px;
    --mpu-espacio-2: 8px;
    --mpu-espacio-3: 12px;
    --mpu-espacio-4: 16px;
    --mpu-radio: 3px;
    --mpu-radio-grande: 4px;
    --mpu-radio-pildora: 10px;
    --mpu-texto-base: 13px;
    --mpu-texto-chico: 12px;
    --mpu-titulo-pagina: 18px;
    --mpu-titulo-bloque: 13.5px;
    --mpu-fuente-cifras: 'IBM Plex Mono', Consolas, monospace;
}

/* ---------- Encabezado de página: una línea, sin botones ni fondo (guía 02) ---------- */
.mpu-encabezado {
    display: flex; align-items: baseline; gap: var(--mpu-espacio-3);
    padding: var(--mpu-espacio-3) 14px; min-width: 0;
}
.mpu-encabezado-titulo {
    margin: 0; font-size: var(--mpu-titulo-pagina); font-weight: 600; line-height: 24px;
    color: var(--mpu-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mpu-encabezado-subtitulo {
    font-size: 12.5px; color: var(--mpu-apagado);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* ---------- Barra de acciones (guía 02): 36 px, Principal · Secundarios · | · Peligro ---------- */
.mpu-barra {
    display: flex; align-items: center; justify-content: space-between; gap: var(--mpu-espacio-3);
    min-height: 36px; padding: 0 var(--mpu-espacio-3);
    background: var(--mpu-superficie); border-bottom: 1px solid var(--mpu-borde);
}
.mpu-barra-botones { display: flex; align-items: center; gap: var(--mpu-espacio-1); flex-wrap: wrap; }
.mpu-barra-separador { width: 1px; height: 20px; background: var(--mpu-borde); margin: 0 var(--mpu-espacio-1); }
.mpu-barra-estado { font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); text-align: right; }
/* Buscador de la página dentro de la barra: ancho fijo, para que la barra quede en una línea */
.mpu-barra-buscar { width: 240px; flex-shrink: 0; }

/* Envoltura de MpuBoton: solo para que el title funcione con el botón deshabilitado */
.mpu-boton { display: inline-flex; }
/* Peligro en contorno: el rojo va en el ícono (clase propia que MpuBoton agrega al IconCssClass) */
.mpu-icono-peligro { color: var(--mpu-peligro); }

/* ---------- Ventana: pie fijo, principal a la derecha (guía 06) ---------- */
.mpu-ventana-cuerpo { font-size: var(--mpu-texto-base); color: var(--mpu-texto); }
.mpu-ventana-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--mpu-espacio-3); width: 100%; }
.mpu-ventana-nota { font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); min-width: 0; }
.mpu-ventana-botones { display: flex; gap: var(--mpu-espacio-2); flex-shrink: 0; }

/* ---------- Secciones de formulario: título azul 13 px y línea fina (guía 05) ----------
   Se aplica con CaptionCssClass="mpu-seccion-titulo" en un DxFormLayoutGroup (decoración por
   defecto): es una clase propia, no una regla .dxbl-*. 🪤 NO usar Decoration="FormLayoutGroupDecoration.None":
   con None DevExpress NO dibuja el título del grupo (medido 03-oct-2026, tanda UNI-R2B). */
.mpu-seccion-titulo {
    font-size: 13px; font-weight: 600; color: var(--mpu-azul-700);
    border-bottom: 1px solid var(--mpu-borde); padding-bottom: var(--mpu-espacio-1);
}

/* ---------- Chips (guía 04): píldora para estado, rectángulo para rol/alerta/origen ---------- */
.mpu-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: var(--mpu-radio-pildora);
    font-size: var(--mpu-texto-chico); font-weight: 600; line-height: 18px; white-space: nowrap;
}
.mpu-chip-etiqueta { border-radius: var(--mpu-radio); font-weight: 500; }
.mpu-chip-ok     { background: var(--mpu-ok-fondo);     color: var(--mpu-verde-texto); }
.mpu-chip-aviso  { background: var(--mpu-aviso-fondo);  color: var(--mpu-aviso-texto); }
.mpu-chip-error  { background: var(--mpu-error-fondo);  color: var(--mpu-peligro); }
.mpu-chip-info   { background: var(--mpu-info-fondo);   color: var(--mpu-azul-700); }
.mpu-chip-neutro { background: var(--mpu-neutro-fondo); color: var(--mpu-secundario); }

/* ---------- Avisos en página: franja de 32 px con ícono (guía 08) ---------- */
.mpu-aviso {
    /* UNI-R5Q: alineado por la PRIMERA línea (baseline) y no al centro: con un rótulo o un texto de varias
       líneas el cuerpo quedaba desalineado. Con una sola línea la franja sigue midiendo 32 px. */
    display: flex; align-items: baseline; gap: var(--mpu-espacio-2);
    min-height: 32px; padding: 7px var(--mpu-espacio-3);
    border: 1px solid transparent; border-radius: var(--mpu-radio-grande);
    font-size: var(--mpu-texto-base); line-height: 18px;
}
/* El rótulo no se aprieta (antes «Acciones que borran» se partía en 2 líneas en 8 % del ancho) ni se come
   media franja (uno largo ocupaba el 37 %): tamaño natural hasta 20em y, si es más largo, salta de línea ahí. */
.mpu-aviso-rotulo { font-weight: 600; flex: 0 0 auto; max-width: 20em; }
.mpu-aviso-texto { flex-grow: 1; min-width: 0; color: var(--mpu-texto); }
.mpu-aviso-info  { background: var(--mpu-info-fondo);  border-color: #C9D4E8; color: var(--mpu-azul-700); }
.mpu-aviso-ok    { background: var(--mpu-ok-fondo);    border-color: #B7E4D3; color: var(--mpu-verde-texto); }
.mpu-aviso-aviso { background: var(--mpu-aviso-fondo); border-color: #EBD48F; color: var(--mpu-aviso-texto); }
.mpu-aviso-error { background: var(--mpu-error-fondo); border-color: #F1B8B8; color: var(--mpu-peligro); }

/* ---------- Tarjeta KPI (guía 09): cifra con su fecha de corte ---------- */
.mpu-kpi {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--mpu-espacio-2) var(--mpu-espacio-3);
    background: var(--mpu-superficie); border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande);
    /* UNI-R5Q: la tarjeta es contenedor de consulta (cqi = ancho de la tarjeta) para que la cifra se achique
       en vez de partirse. min-width: con contención de ancho una tarjeta dentro de un flex no se cae a 0. */
    min-width: 120px; container-type: inline-size;
}
.mpu-kpi-pendiente { border-style: dashed; }
.mpu-kpi-rotulo { display: flex; align-items: center; gap: 6px; font-size: var(--mpu-texto-chico); color: var(--mpu-secundario); }
.mpu-kpi-rotulo > span:not(.mpu-kpi-punto) { flex-grow: 1; }
.mpu-kpi-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mpu-kpi-punto-ok { background: var(--mpu-verde); }
.mpu-kpi-punto-aviso { background: var(--mpu-dorado); }
.mpu-kpi-punto-error { background: var(--mpu-peligro); }
.mpu-kpi-punto-info { background: var(--mpu-azul-700); }
.mpu-kpi-punto-neutro { background: var(--mpu-apagado); }
/* Una cifra de dinero NUNCA se parte («S/» arriba y el número abajo, visto a 1366 px con 6 tarjetas):
   la cifra no salta de línea y el tamaño baja con el ancho de la tarjeta (20 px hasta 13 px; «S/ 1,290,996.16»
   entra en una tarjeta de 168 px). La unidad sí puede pasar a la línea siguiente. */
.mpu-kpi-valor { font-size: clamp(13px, 11cqi, 20px); font-weight: 600; color: var(--mpu-texto); }
.mpu-kpi-valor .mpu-cifra { white-space: nowrap; }
.mpu-kpi-pendiente .mpu-kpi-valor { font-size: var(--mpu-texto-base); color: var(--mpu-secundario); }
.mpu-kpi-unidad { font-size: var(--mpu-texto-base); font-weight: 400; color: var(--mpu-secundario); }
.mpu-kpi-corte { font-size: 11px; color: var(--mpu-apagado); }

/* ---------- Rejilla y pilas propias (reemplazan row/col/d-flex, que no existen) ---------- */
.mpu-pila      { display: flex; flex-direction: column; gap: var(--mpu-espacio-3); }
.mpu-fila      { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mpu-espacio-2); }
.mpu-separa    { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mpu-espacio-3); }
.mpu-rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mpu-espacio-3); }
.mpu-rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mpu-espacio-3); }
.mpu-rejilla-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mpu-espacio-3); }
@media (max-width: 900px) {
    .mpu-rejilla-2, .mpu-rejilla-3, .mpu-rejilla-4 { grid-template-columns: minmax(0, 1fr); }
}
.mpu-contenido { padding: 0 14px var(--mpu-espacio-4); display: flex; flex-direction: column; gap: var(--mpu-espacio-3); }

/* ---------- Superficies y texto ---------- */
.mpu-panel {
    background: var(--mpu-superficie); border: 1px solid var(--mpu-borde);
    border-radius: var(--mpu-radio-grande); padding: var(--mpu-espacio-3);
}
.mpu-panel-titulo {
    margin: 0 0 var(--mpu-espacio-2); font-size: var(--mpu-titulo-bloque); font-weight: 600; color: var(--mpu-texto);
}
.mpu-suave { color: var(--mpu-apagado); }
.mpu-chico { font-size: var(--mpu-texto-chico); }
.mpu-cifra { font-family: var(--mpu-fuente-cifras); font-variant-numeric: tabular-nums; }
/* Enlace dentro de una celda de grilla: toma el color de la fila (legible también en la fila
   seleccionada, que es azul oscuro) y se distingue por el subrayado. */
.mpu-enlace-celda { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Panel lateral de detalle (DetalleEmpleadoForm y similares) ----------
   Se desliza desde la derecha sobre un velo; 440 px; cabecera, cuerpo con desplazamiento y pie fijo
   con el principal a la DERECHA (misma regla que las ventanas, guía 06). */
.mpu-lateral { position: fixed; inset: 0; z-index: 1050; pointer-events: none; }
.mpu-lateral-velo { position: absolute; inset: 0; background: rgba(10, 27, 61, .35); opacity: 0; transition: opacity .2s ease; }
.mpu-lateral-caja {
    position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw;
    display: flex; flex-direction: column; background: var(--mpu-superficie);
    border-left: 1px solid var(--mpu-borde); box-shadow: -8px 0 24px rgba(10, 27, 61, .12);
    transform: translateX(100%); transition: transform .2s ease;
}
.mpu-lateral-abierto { pointer-events: auto; }
.mpu-lateral-abierto .mpu-lateral-velo { opacity: 1; }
.mpu-lateral-abierto .mpu-lateral-caja { transform: none; }
.mpu-lateral-cabecera {
    display: flex; align-items: center; justify-content: space-between; gap: var(--mpu-espacio-2);
    min-height: 44px; padding: 0 var(--mpu-espacio-2) 0 14px; border-bottom: 1px solid var(--mpu-borde);
}
.mpu-lateral-titulo { margin: 0; font-size: 14px; font-weight: 600; color: var(--mpu-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpu-lateral-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--mpu-espacio-3) 14px; display: flex; flex-direction: column; gap: var(--mpu-espacio-4); }
.mpu-lateral-pie {
    display: flex; align-items: center; justify-content: space-between; gap: var(--mpu-espacio-2);
    padding: var(--mpu-espacio-2) 14px; border-top: 1px solid var(--mpu-borde); background: var(--mpu-fondo-zonas);
}
.mpu-lateral-ficha { display: flex; gap: var(--mpu-espacio-3); align-items: flex-start; }
.mpu-lateral-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mpu-lateral-iniciales {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mpu-azul-700); color: #FFFFFF; font-size: 18px; font-weight: 600;
}
.mpu-lateral-identidad { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mpu-lateral-nombre { font-size: 15px; font-weight: 600; color: var(--mpu-texto); }
.mpu-lateral-contacto { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mpu-texto-chico); color: var(--mpu-azul-700); text-decoration: none; }
.mpu-lateral-contacto:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .mpu-lateral-velo, .mpu-lateral-caja { transition: none; } }

/* Datos de solo lectura: pares rótulo / valor en dos columnas (en vez de cajas deshabilitadas) */
.mpu-datos { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px var(--mpu-espacio-3); margin: var(--mpu-espacio-2) 0 0; font-size: var(--mpu-texto-base); }
.mpu-datos dt { color: var(--mpu-apagado); font-weight: 400; }
.mpu-datos dd { margin: 0; color: var(--mpu-texto); overflow-wrap: anywhere; }