/* UNI-R3H (03-oct-2026) - Reportes MEF, acuse de boletas, presupuesto (PAP), documentos, conceptos,
   SMTP y mantenimiento. Clases PROPIAS de la tanda (nunca reglas sobre .dxbl-*). Si se aprueban,
   subirlas a mpu-base.css.

   mpu-r3h-rejilla-5: cinco tarjetas KPI en una fila (mpu-base solo llega a 4). */
.mpu-r3h-rejilla-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mpu-espacio-3); }
@media (max-width: 900px) {
    .mpu-r3h-rejilla-5 { grid-template-columns: minmax(0, 1fr); }
}

/* Anchos fijos para editores sueltos en una fila de filtros (en vez de style="width:..."). */
.mpu-r3h-ancho-chico { width: 110px; flex-shrink: 0; }
.mpu-r3h-ancho-medio { width: 180px; flex-shrink: 0; }
.mpu-r3h-ancho-grande { width: 280px; flex-shrink: 0; }

/* Visor de reporte (DxReportViewer) y de PDF (iframe) dentro de una ventana Grande (1100 px):
   el visor necesita alto propio; la ventana mide como mucho 80 % del alto. */
.mpu-r3h-visor { height: calc(80vh - 150px); min-height: 380px; }
.mpu-r3h-visor-pdf {
    display: block; width: 100%; height: calc(80vh - 190px); min-height: 360px;
    border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande);
}

/* Lista corta con desplazamiento (conceptos de una persona, errores de un proceso). */
.mpu-r3h-lista { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; }
.mpu-r3h-lista-item {
    display: flex; justify-content: space-between; gap: var(--mpu-espacio-2);
    padding: 3px 0; border-bottom: 1px solid var(--mpu-fondo-zonas); font-size: var(--mpu-texto-chico);
}
.mpu-r3h-lista-item:last-child { border-bottom: none; }
.mpu-r3h-total {
    display: flex; justify-content: space-between; gap: var(--mpu-espacio-2);
    margin-top: var(--mpu-espacio-2); padding-top: var(--mpu-espacio-1);
    border-top: 1px solid var(--mpu-borde); font-weight: 600;
}

/* Importe negativo o de descuento (texto rojo de la guia, sin fondo). */
.mpu-r3h-negativo { color: var(--mpu-peligro); }
/* Texto preformateado (vista previa de un documento o de un correo). */
.mpu-r3h-pre {
    white-space: pre-wrap; font-family: var(--mpu-fuente-cifras); font-size: var(--mpu-texto-chico);
    background: var(--mpu-fondo-zonas); border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande);
    padding: var(--mpu-espacio-3); max-height: 50vh; overflow: auto;
}

/* Disenador de reportes MEF: el DxReportDesigner necesita alto propio; panel de IA a la derecha. */
.mpu-r3h-disenador { display: flex; gap: var(--mpu-espacio-3); height: calc(100vh - 200px); min-height: 500px; }
.mpu-r3h-disenador-principal {
    flex: 1; min-width: 0; overflow: hidden;
    border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande); background: var(--mpu-superficie);
}
.mpu-r3h-disenador-lateral { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; }
.mpu-r3h-disenador-chat { flex: 1; min-height: 0; }
.mpu-r3h-alto-total { height: 100%; }
/* Visor de reporte a pagina completa (ReportViewerMef). */
.mpu-r3h-visor-pagina {
    height: calc(100vh - 200px); min-height: 500px; overflow: hidden;
    border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande); background: var(--mpu-superficie);
}

/* ---------- Paginas PUBLICAS del trabajador (acuse de boletas, registro y verificacion de correo) ----------
   Van dentro de PublicLayout (sin marco), pensadas para celular: una columna centrada y una tarjeta. */
.mpu-r3h-publico {
    max-width: 560px; margin: 24px auto; padding: 0 16px; box-sizing: border-box;
    display: flex; flex-direction: column; gap: var(--mpu-espacio-3);
    font-size: var(--mpu-texto-base); color: var(--mpu-texto);
}
.mpu-r3h-publico-ancho { max-width: 780px; }
.mpu-r3h-tarjeta {
    background: var(--mpu-superficie); border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande);
    padding: 20px; display: flex; flex-direction: column; gap: var(--mpu-espacio-3);
}
.mpu-r3h-tarjeta-titulo { margin: 0; font-size: var(--mpu-titulo-pagina); font-weight: 600; line-height: 24px; color: var(--mpu-texto); }
.mpu-r3h-tarjeta-subtitulo { margin: 0; font-size: 12.5px; color: var(--mpu-apagado); }
.mpu-r3h-tarjeta-pie {
    margin: 0; padding-top: var(--mpu-espacio-2); border-top: 1px solid var(--mpu-borde);
    font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); text-align: center;
}
/* Resultado de una accion (confirmado, enlace no valido...): icono grande y titulo centrados. */
.mpu-r3h-resultado { display: flex; flex-direction: column; align-items: center; gap: var(--mpu-espacio-1); text-align: center; }
.mpu-r3h-resultado-icono { font-size: 40px; line-height: 1; }
.mpu-r3h-resultado-ok { color: var(--mpu-verde-texto); }
.mpu-r3h-resultado-error { color: var(--mpu-peligro); }
.mpu-r3h-resultado-aviso { color: var(--mpu-aviso-texto); }
.mpu-r3h-resultado-titulo { margin: 0; font-size: 16px; font-weight: 600; }
/* Boton a todo el ancho (DxButton con CssClass propia; el tamano sale de SizeMode). */
.mpu-r3h-boton-ancho { width: 100%; }
/* Campo de codigo de 6 digitos (InputCssClass del DxTextBox: clase propia sobre el input). */
.mpu-r3h-codigo { text-align: center; font-family: var(--mpu-fuente-cifras); font-size: 20px; letter-spacing: 6px; }
/* Recuadro de texto legal (consentimiento). */
.mpu-r3h-legal {
    background: var(--mpu-fondo-zonas); border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande);
    padding: var(--mpu-espacio-3); font-size: var(--mpu-texto-chico); line-height: 1.5; color: var(--mpu-secundario);
}
/* Lienzo de firma (signaturePad). */
.mpu-r3h-firma-lienzo {
    display: block; width: 100%; height: 120px; cursor: crosshair; touch-action: none;
    background: var(--mpu-superficie); border: 1px solid var(--mpu-borde-control); border-radius: var(--mpu-radio-grande);
}
/* Manual del trabajador: pasos numerados. */
.mpu-r3h-paso { display: flex; gap: var(--mpu-espacio-3); align-items: flex-start; }
.mpu-r3h-paso-num {
    flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--mpu-azul-700); color: #FFFFFF; font-weight: 600; font-family: var(--mpu-fuente-cifras);
}
.mpu-r3h-paso-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--mpu-espacio-2); }
.mpu-r3h-paso-titulo { margin: 0; font-size: var(--mpu-titulo-bloque); font-weight: 600; }
/* Ejemplo de pantalla o correo dentro del manual: recuadro gris claro con borde punteado. */
.mpu-r3h-ejemplo {
    background: var(--mpu-fondo-zonas); border: 1px dashed var(--mpu-borde-control); border-radius: var(--mpu-radio-grande);
    padding: var(--mpu-espacio-3); display: flex; flex-direction: column; gap: var(--mpu-espacio-1); font-size: var(--mpu-texto-chico);
}
.mpu-r3h-ejemplo-boton {
    align-self: flex-start; padding: 6px 14px; border-radius: var(--mpu-radio); font-weight: 600;
    border: 1px solid var(--mpu-azul-700); color: var(--mpu-azul-700); background: var(--mpu-superficie);
}

/* Opcion seleccionable en forma de tarjeta (plantillas del Generador de documentos). */
.mpu-r3h-opcion {
    display: flex; flex-direction: column; align-items: center; gap: var(--mpu-espacio-1); text-align: center;
    cursor: pointer; border-width: 2px;
}
.mpu-r3h-opcion:hover, .mpu-r3h-opcion:focus-visible { border-color: var(--mpu-azul-700); outline: none; }
.mpu-r3h-opcion-elegida { border-color: var(--mpu-azul-700); background: var(--mpu-seleccion); }
.mpu-r3h-opcion-icono { font-size: 24px; color: var(--mpu-azul-700); }

/* Texto con saltos de linea (mensaje de una prueba de conexion). */
.mpu-r3h-pre-linea { white-space: pre-line; }

/* Zona con desplazamiento para una fila larga de chips (DNIs leidos). */
.mpu-r3h-desplazable { max-height: 150px; overflow-y: auto; }

/* Arbol de tablas de la eliminacion en cascada: un nodo por tabla, sangria por nivel (1 a 6). */
.mpu-r3h-arbol-nodo {
    border: 1px solid var(--mpu-borde); border-left: 3px solid var(--mpu-azul-700); border-radius: var(--mpu-radio-grande);
    padding: var(--mpu-espacio-2) var(--mpu-espacio-3); background: var(--mpu-superficie);
    display: flex; flex-direction: column; gap: var(--mpu-espacio-1);
}
.mpu-r3h-nivel-1 { margin-left: 0; }
.mpu-r3h-nivel-2 { margin-left: 24px; }
.mpu-r3h-nivel-3 { margin-left: 48px; }
.mpu-r3h-nivel-4 { margin-left: 72px; }
.mpu-r3h-nivel-5 { margin-left: 96px; }
.mpu-r3h-nivel-6 { margin-left: 120px; }