/* =====================================================================================
   mpu-formper.css — Ventana «Nuevo / Editar trabajador» (FORMPER-C, 08-oct-2026)
   «Opción C · Credencial institucional» (elegida por el Arquitecto):
   cabecera azul con línea dorada (HeaderTemplate propio), cuerpo #F4F6FA con tarjetas blancas
   (BodyTemplate propio, con su desplazamiento), pie de DevExpress. A 1366×768 se ve TODO sin desplazarse.
   Sólo clases PROPIAS (fp-*) y variables de mpu-base.css; NINGUNA regla sobre .dxbl-*.
   ===================================================================================== */

.fp-ventana, .fp-alta {
    --fp-azul-900: #0A1B3D;
    --fp-azul-700: #122D5E;
    --fp-dorado: #D4A01E;
    --fp-fondo: #F4F6FA;
    --fp-borde-tarjeta: #E3E7EF;
    --fp-rotulo-claro: #C3CDE2;   /* sobre #0A1B3D: 10,9:1 */
    --fp-falta-fondo: #FFFBEF;
}

/* ---------- Cabecera tipo credencial ---------- */
.fp-cred {
    display: flex; align-items: center; gap: 16px; min-width: 0; width: 100%; box-sizing: border-box;
    padding: 12px 12px 12px 20px;
    background: var(--fp-azul-900); color: #FFFFFF; border-bottom: 3px solid var(--fp-dorado);
}
.fp-cred-foto { display: flex; align-items: flex-start; gap: 8px; flex-shrink: 0; }
.fp-foto {
    width: 78px; height: 104px; border-radius: 6px; object-fit: cover; object-position: center 25%;
    flex-shrink: 0; display: block; border: 2px solid #FFFFFF; background: var(--fp-azul-700); box-sizing: border-box;
}
.fp-iniciales {
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: 28px; font-weight: 600; letter-spacing: 1px;
}
.fp-foto-acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fp-subir-boton { display: inline-flex; }
.fp-entrada-oculta { width: 0; height: 0; overflow: hidden; flex: 0 0 0; }

.fp-cred-centro { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.fp-cred-rotulo {
    font-size: 11px; line-height: 14px; letter-spacing: 1px; font-weight: 600; color: var(--fp-dorado);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-nombre {
    margin: 0; font-size: 22px; font-weight: 600; line-height: 28px; color: #FFFFFF;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-nombre-vacio { color: var(--fp-rotulo-claro); font-weight: 400; font-style: italic; }
.fp-cred-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.fp-cred-chip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 1px 9px; border-radius: 10px; font-size: 12px; line-height: 18px; color: #FFFFFF;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-cred-chip b { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.fp-cc-cod { color: var(--fp-rotulo-claro); }
.fp-cc-doc    { background: #1F3A6E; }
.fp-cc-ok     { background: #1B5E4A; }
.fp-cc-aviso  { background: #6B520F; }
.fp-cc-info   { background: #2C4A86; }
.fp-cc-neutro { background: #34405A; }
.fp-cc-error  { background: #8E1F18; font-weight: 600; max-width: 420px; }

.fp-cred-datos {
    display: grid; grid-template-columns: repeat(3, auto); margin: 0; flex-shrink: 0;
    border: 1px solid #2A4378; border-radius: 8px; overflow: hidden;
}
.fp-cred-dato { padding: 7px 14px; min-width: 64px; max-width: 150px; }
.fp-cred-dato + .fp-cred-dato { border-left: 1px solid #2A4378; }
.fp-cred-dato dt { font-size: 11px; line-height: 14px; font-weight: 400; color: var(--fp-rotulo-claro); }
.fp-cred-dato dd { margin: 2px 0 0; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-cred-cerrar { align-self: flex-start; flex-shrink: 0; }

/* ---------- Cuerpo: fondo gris claro con tarjetas blancas; el desplazamiento es nuestro ---------- */
.fp-cuerpo {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 12px 20px; background: var(--fp-fondo);
    font-size: var(--mpu-texto-base); color: var(--mpu-texto);
}
.fp-form { min-width: 0; }
.fp-tarjetas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.fp-columna { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fp-tarjeta {
    background: #FFFFFF; border: 1px solid var(--fp-borde-tarjeta); border-radius: 10px;
    padding: 10px 14px 12px; min-width: 0; display: flex; flex-direction: column; gap: 6px;
}
.fp-t-identidad { align-self: stretch; }
.fp-t-detalle { grid-column: 1 / -1; }
.fp-seccion-titulo {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 14px; font-weight: 600; line-height: 20px; color: var(--fp-azul-700);
}
.fp-icono { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Rejillas */
.fp-rejilla { display: grid; gap: 4px 8px; min-width: 0; }
.fp-r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-rcontacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.fp-r1 { grid-template-columns: minmax(0, 1fr); }
.fp-detalle { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fp-ancho { grid-column: 1 / -1; }
.fp-doble { grid-column: span 2; }
@media (max-width: 900px) {
    .fp-tarjetas { grid-template-columns: minmax(0, 1fr); }
    .fp-r3, .fp-detalle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-cred-datos { display: none; }
}

/* Campo: rótulo en letra normal, control debajo. El borde transparente reserva el lugar del resaltado. */
.fp-campo {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: 2px 6px 4px; border: 1px solid transparent; border-radius: 6px;
}
/* Obligatorio vacío: se marca el CONTENEDOR (rótulo + editor), nunca el editor DevExpress. */
.fp-falta { background: var(--fp-falta-fondo); border-color: var(--fp-dorado); }
.fp-rotulo { font-size: var(--mpu-texto-chico); line-height: 16px; color: var(--mpu-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-oblig::after { content: " *"; color: var(--mpu-peligro); }
.fp-ayuda { font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); line-height: 15px; }
.fp-ayuda-aviso { color: var(--mpu-aviso-texto); }
.fp-ayuda-error { color: var(--mpu-peligro); font-weight: 600; }

.fp-plegable { display: flex; align-items: center; gap: 0 8px; margin-left: -2px; min-height: 26px; min-width: 0; }
.fp-plegable .fp-ayuda { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 0; }

/* ---------- Pie fijo de la ventana ---------- */
.fp-pie { padding: 4px 4px; }
.fp-pie-nota { min-width: 0; font-size: var(--mpu-texto-chico); color: var(--mpu-apagado); }
.fp-auditoria { display: inline-block; line-height: 16px; }
.fp-pie-error { color: var(--mpu-peligro); font-weight: 600; }

/* ---------- FORMPER · tipos de documento: ventana de alta (mismo lenguaje: tarjetas blancas) ---------- */
.fp-aviso-doc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-alta-cab {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    padding: 10px 8px 10px 16px; background: var(--fp-azul-900); color: #FFFFFF; border-bottom: 3px solid var(--fp-dorado);
}
.fp-alta-cab-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.fp-alta-cab-titulo { margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; color: #FFFFFF; }
.fp-alta-cuerpo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fp-alta-cuerpo .fp-tarjeta { gap: 8px; }
.fp-alta-doc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 6px 10px; align-items: end; }
.fp-alta-doc .fp-campo { padding: 0; }
.fp-alta-reniec { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-alta-cuerpo p { margin: 0; }