/* =====================================================================================
   mpu-r2a.css — piezas propias de la tanda R2A (UNI, 03-oct-2026): Certificados de Trabajo,
   portal público de verificación, CAP (áreas y cargos), Estructuras y Trabajadores V3.

   Solo clases propias con prefijo mpu-r2a- (comunes de la tanda) o mpu-cer- (certificados).
   Ninguna regla sobre .dxbl-* (ver mpu-base.css). Colores: solo variables de mpu-base.css.
   Va enlazado en Components/App.razor después de mpu-base.css.
   ===================================================================================== */

/* ---------- Comunes de la tanda ---------- */
/* Anchos fijos de controles en una barra de filtros (para no escribir style="" en línea) */
.mpu-r2a-w-90  { width: 90px; }
.mpu-r2a-w-150 { width: 150px; }
.mpu-r2a-w-190 { width: 190px; }
.mpu-r2a-w-240 { width: 240px; }
.mpu-r2a-w-320 { width: 320px; }
.mpu-r2a-ancho { width: 100%; }
/* Un editor que ocupa todo el ancho con un boton pegado a su derecha (p. ej. «quitar») */
.mpu-r2a-campo-boton { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mpu-espacio-1); align-items: center; }

/* Rótulo de un control fuera de DxFormLayout */
.mpu-r2a-etiqueta { display: block; margin-bottom: var(--mpu-espacio-1); font-size: var(--mpu-texto-chico); font-weight: 600; color: var(--mpu-secundario); }
/* Nota bajo un control */
.mpu-r2a-nota { margin-top: var(--mpu-espacio-1); font-size: 11.5px; color: var(--mpu-apagado); }
.mpu-r2a-nota-error { color: var(--mpu-peligro); }
.mpu-r2a-nota-ok { color: var(--mpu-verde-texto); }

/* Texto fuerte dentro de una celda y su segunda línea apagada */
.mpu-r2a-fuerte { font-weight: 600; }
.mpu-r2a-linea2 { font-size: 11.5px; color: var(--mpu-apagado); }

/* Columnas lado a lado: lista a la izquierda (ancho fijo) y detalle a la derecha */
.mpu-r2a-lista-detalle { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--mpu-espacio-3); align-items: start; }
.mpu-r2a-detalle-lista { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--mpu-espacio-3); align-items: start; }
@media (max-width: 1100px) {
    .mpu-r2a-lista-detalle, .mpu-r2a-detalle-lista { grid-template-columns: minmax(0, 1fr); }
}

/* Estado vacío (sin selección, sin registros) */
.mpu-r2a-vacio {
    display: flex; flex-direction: column; align-items: center; gap: var(--mpu-espacio-2);
    padding: 40px var(--mpu-espacio-4); text-align: center; color: var(--mpu-apagado);
    border: 1px dashed var(--mpu-borde-control); border-radius: var(--mpu-radio-grande); background: var(--mpu-superficie);
}
.mpu-r2a-vacio i { font-size: 22px; }
.mpu-r2a-vacio strong { color: var(--mpu-texto); }

/* Iniciales en círculo (sin foto) */
.mpu-r2a-iniciales {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--mpu-azul-700); color: var(--mpu-superficie); font-size: 14px; font-weight: 600;
}

/* Lista seleccionable de tarjetas (p. ej. vínculos laborales) */
.mpu-r2a-lista { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; border-top: 1px solid var(--mpu-borde); }
.mpu-r2a-lista-item {
    display: flex; flex-direction: column; gap: 2px; padding: var(--mpu-espacio-2) var(--mpu-espacio-3);
    border-bottom: 1px solid var(--mpu-borde); border-left: 3px solid transparent; cursor: pointer; background: var(--mpu-superficie);
}
.mpu-r2a-lista-item:hover { background: var(--mpu-fila-hover); }
.mpu-r2a-lista-item-sel { background: var(--mpu-fila-seleccionada); border-left-color: var(--mpu-azul-700); }
.mpu-r2a-lista-item-sel:hover { background: var(--mpu-fila-seleccionada); }

/* ---------- Certificados de Trabajo (mpu-cer-) ---------- */
/* Formulario de emisión: historial a la izquierda, opciones a la derecha */
.mpu-cer-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--mpu-espacio-4); }
.mpu-cer-form-lado { display: flex; flex-direction: column; gap: var(--mpu-espacio-3); padding-left: var(--mpu-espacio-4); border-left: 1px solid var(--mpu-borde); }
@media (max-width: 900px) {
    .mpu-cer-form { grid-template-columns: minmax(0, 1fr); }
    .mpu-cer-form-lado { padding-left: 0; border-left: none; }
}
.mpu-cer-buscar { display: flex; align-items: flex-end; gap: var(--mpu-espacio-2); }
.mpu-cer-buscar > div { flex: 1; min-width: 0; }

/* Titular encontrado */
.mpu-cer-identidad {
    display: flex; align-items: center; gap: var(--mpu-espacio-3); padding: var(--mpu-espacio-2) var(--mpu-espacio-3);
    border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande); background: var(--mpu-fondo-zonas);
}
.mpu-cer-identidad-datos { flex: 1; min-width: 0; }
.mpu-cer-identidad-nombre { font-size: 14px; font-weight: 600; color: var(--mpu-texto); }
.mpu-cer-identidad-linea { display: flex; flex-wrap: wrap; gap: var(--mpu-espacio-3); font-size: var(--mpu-texto-chico); color: var(--mpu-secundario); }

/* Casillas con título y nota */
.mpu-cer-opciones { border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande); background: var(--mpu-superficie); }
.mpu-cer-opcion { display: flex; align-items: flex-start; gap: var(--mpu-espacio-2); padding: var(--mpu-espacio-2) var(--mpu-espacio-3); border-bottom: 1px solid var(--mpu-borde); }
.mpu-cer-opcion:last-child { border-bottom: none; }
.mpu-cer-opcion-titulo { display: block; font-size: var(--mpu-texto-base); font-weight: 500; }
.mpu-cer-opcion-nota { display: block; font-size: 11px; color: var(--mpu-apagado); }

/* Certificados anteriores del titular */
.mpu-cer-anteriores { display: flex; flex-direction: column; gap: var(--mpu-espacio-1); max-height: 190px; overflow-y: auto; }
.mpu-cer-anterior {
    display: flex; align-items: center; gap: var(--mpu-espacio-2); padding: 6px var(--mpu-espacio-3);
    border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande); background: var(--mpu-superficie);
}
.mpu-cer-anterior > div { flex: 1; min-width: 0; }

/* Detalle: datos a la izquierda, vista previa del PDF a la derecha. El alto (62vh) deja sitio al
   pie de la ventana (alto 92 %) en una pantalla de 768 px: con 600 px fijos el pie quedaba fuera. */
.mpu-cer-detalle { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: var(--mpu-espacio-3); min-height: 62vh; }
@media (max-width: 900px) { .mpu-cer-detalle { grid-template-columns: minmax(0, 1fr); } }
.mpu-cer-detalle-datos { display: flex; flex-direction: column; gap: var(--mpu-espacio-3); overflow-y: auto; max-height: 66vh; }
.mpu-cer-periodos { max-height: 220px; overflow-y: auto; }
.mpu-cer-periodo { padding: 6px 0; border-bottom: 1px solid var(--mpu-borde); }
.mpu-cer-periodo:last-child { border-bottom: none; }
.mpu-cer-visor { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande); }
.mpu-cer-visor-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--mpu-espacio-2); padding: 6px var(--mpu-espacio-3); border-bottom: 1px solid var(--mpu-borde); font-weight: 600; font-size: var(--mpu-texto-chico); color: var(--mpu-secundario); }
.mpu-cer-visor-cuerpo { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 58vh; padding: var(--mpu-espacio-2); background: var(--mpu-fondo-zonas); }
.mpu-cer-visor-cuerpo iframe { width: 100%; height: 100%; min-height: 56vh; border: none; background: var(--mpu-superficie); }

/* Contador del sustento de la anulación */
.mpu-cer-contador { display: flex; justify-content: space-between; gap: var(--mpu-espacio-3); margin-top: var(--mpu-espacio-1); font-size: 11px; color: var(--mpu-apagado); }
.mpu-cer-contador-falta { color: var(--mpu-peligro); white-space: nowrap; }

/* Pantalla de bloqueo del módulo (compuerta de esquema) */
.mpu-cer-bloqueo { max-width: 760px; margin: var(--mpu-espacio-4) auto; display: flex; flex-direction: column; gap: var(--mpu-espacio-3); }
.mpu-cer-motivo { padding: var(--mpu-espacio-2) var(--mpu-espacio-3); background: var(--mpu-fondo-zonas); border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio); font-family: var(--mpu-fuente-cifras); font-size: var(--mpu-texto-chico); }

/* ---------- Portal público de verificación /verificar (mpu-vp-) ----------
   Página SSR estática y anónima: sin marco de la app, con <form method="get"> de HTML llano
   (por eso aquí sí se da estilo a un input y un botón nativos: son clases propias). */
.mpu-vp { min-height: 100vh; background: var(--mpu-fondo-zonas); color: var(--mpu-texto); font-size: var(--mpu-texto-base); line-height: 1.55; }
.mpu-vp-interior { max-width: 880px; margin: 0 auto; padding-left: var(--mpu-espacio-4); padding-right: var(--mpu-espacio-4); }
.mpu-vp-cabecera { padding: var(--mpu-espacio-3) 0; background: var(--mpu-azul-900); color: var(--mpu-superficie); }
.mpu-vp-marca { font-size: 20px; color: var(--mpu-dorado); }
.mpu-vp-entidad { font-size: 15px; font-weight: 600; }
.mpu-vp-lema { font-size: 11.5px; opacity: .85; }
.mpu-vp-cuerpo { padding-top: 24px; padding-bottom: 40px; }
.mpu-vp-busqueda { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mpu-espacio-2); align-items: end; }
.mpu-vp-input {
    width: 100%; padding: 8px 10px; border: 1px solid var(--mpu-borde-control); border-radius: var(--mpu-radio);
    background: var(--mpu-superficie); color: var(--mpu-texto); font-size: 14px;
}
.mpu-vp-input:focus { outline: 2px solid var(--mpu-seleccion); border-color: var(--mpu-azul-700); }
.mpu-vp-boton {
    padding: 9px 18px; border: 1px solid var(--mpu-azul-700); border-radius: var(--mpu-radio);
    background: var(--mpu-azul-700); color: var(--mpu-superficie); font: inherit; font-weight: 600; cursor: pointer;
}
.mpu-vp-boton:hover { background: var(--mpu-azul-900); }
.mpu-vp-banner { display: flex; align-items: flex-start; gap: var(--mpu-espacio-3); padding: var(--mpu-espacio-3) var(--mpu-espacio-4); border: 1px solid; border-radius: var(--mpu-radio-grande); }
.mpu-vp-banner > i { font-size: 24px; line-height: 1; margin-top: 2px; }
.mpu-vp-banner-titulo { font-size: 16px; font-weight: 600; }
.mpu-vp-banner-ok     { background: var(--mpu-ok-fondo);     border-color: #B7E4D3; color: var(--mpu-verde-texto); }
.mpu-vp-banner-error  { background: var(--mpu-error-fondo);  border-color: #F1B8B8; color: var(--mpu-peligro); }
.mpu-vp-banner-neutro { background: var(--mpu-neutro-fondo); border-color: var(--mpu-borde); color: var(--mpu-secundario); }
.mpu-vp-firma { display: flex; gap: var(--mpu-espacio-3); margin-top: var(--mpu-espacio-2); padding: var(--mpu-espacio-3); border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande); background: var(--mpu-fondo-zonas); color: var(--mpu-secundario); }
.mpu-vp-firma > i { font-size: 20px; color: var(--mpu-apagado); }
@media (max-width: 620px) { .mpu-vp-busqueda { grid-template-columns: minmax(0, 1fr); } }