/* =====================================================================================
   mpu-ficha.css — Ficha del trabajador (UNI-FT, 02-oct-2026)
   Fuente: design_handoff_rrhh_urubamba/README.md (Ficha) y el prototipo v3. Solo clases propias
   (ficha-*) y, en la grilla, las variables OFICIALES de DxGrid sobre la clase propia mpu-grilla.
   ===================================================================================== */

/* Fila seleccionada/enfocada celeste #DCE5F3 (guía): variables oficiales de DxGrid sobre una clase propia
   en el MISMO elemento (DevExpress las define en .dxbl-grid; .mpu-grilla carga despues y gana). */
.mpu-grilla {
    --dxbl-grid-focus-bg: #DCE5F3;
    --dxbl-grid-focus-color: #16191D;
    --dxbl-grid-selection-bg: #E8EDF6;
    --dxbl-grid-selection-color: #16191D;
}

.ficha { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Cabecera fija ---------- */
.ficha-cabecera {
    position: sticky; top: -16px; z-index: 5;
    background: var(--mpu-fondo-zonas); padding-top: 4px;
}
.ficha-cabecera-caja {
    background: #FFFFFF; border: 1px solid var(--mpu-borde); border-radius: 4px; padding: 7px 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.ficha-linea1 { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ficha-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mpu-azul-700); color: #FFFFFF; font-size: 12px; font-weight: 700;
}
.ficha-nombre { margin: 0; font-size: 18px; font-weight: 600; color: var(--mpu-texto); overflow: hidden; text-overflow: ellipsis; }
.ficha-codigo { font-family: var(--mpu-fuente-cifras); font-size: 12px; color: var(--mpu-secundario); flex-shrink: 0; }
.ficha-linea2 {
    display: flex; flex-wrap: nowrap; gap: 14px; padding-left: 40px; min-width: 0; overflow: hidden;
    font-size: 12.5px; color: var(--mpu-apagado); white-space: nowrap;
}
.ficha-linea2 b { font-weight: 600; color: var(--mpu-texto); }
.ficha-linea2 .ficha-lugar { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ficha-punto { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 4px; vertical-align: middle; }

.ficha-filtro { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--mpu-apagado); }
.ficha-filtro-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 10px;
    border-radius: 12px; background: var(--mpu-azul-700); color: #FFFFFF; font-size: 12px; font-weight: 600;
}
.ficha-filtro-chip button {
    width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: #2B4675; color: #FFFFFF; font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Cuerpo: índice + sección ---------- */
.ficha-cuerpo { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; }
.ficha-indice { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 8px; }
.ficha-indice-caja { background: #FFFFFF; border: 1px solid var(--mpu-borde); border-radius: 4px; padding: 4px 0; }
.ficha-indice-grupo { padding: 8px 12px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mpu-apagado); }
.ficha-indice-item {
    display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 12px;
    border: 0; border-left: 3px solid transparent; background: transparent; cursor: pointer; text-align: left;
    font: inherit; font-size: 12.5px; color: var(--mpu-texto);
}
.ficha-indice-item:hover { background: #F4F6F9; }
.ficha-indice-item:focus-visible { outline: 2px solid var(--mpu-azul-700); outline-offset: -2px; }
.ficha-indice-activo { background: #E8EDF6; color: var(--mpu-azul-700); font-weight: 600; border-left-color: var(--mpu-azul-700); }
.ficha-indice-item .ficha-cuenta { margin-left: auto; font-family: var(--mpu-fuente-cifras); font-size: 11px; color: var(--mpu-apagado); }
.ficha-indice-item .fa-lock { margin-left: auto; font-size: 10px; color: var(--mpu-apagado); }

.ficha-buscar { position: relative; }
.ficha-buscar-resultados {
    position: absolute; top: 30px; left: 0; width: 300px; z-index: 20; max-height: 320px; overflow-y: auto;
    background: #FFFFFF; border: 1px solid var(--mpu-borde); border-radius: 4px; box-shadow: 0 6px 20px rgba(10, 27, 61, .22);
}
.ficha-buscar-item {
    display: block; width: 100%; padding: 6px 10px; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit;
}
.ficha-buscar-item:hover, .ficha-buscar-item:focus-visible { background: #F4F6F9; outline: none; }
.ficha-buscar-item b { display: block; font-size: 13px; font-weight: 600; color: var(--mpu-texto); }
.ficha-buscar-item span { font-family: var(--mpu-fuente-cifras); font-size: 11px; color: var(--mpu-apagado); }
.ficha-buscar-vacio { padding: 8px 10px; font-size: 12px; color: var(--mpu-apagado); }

/* ---------- Secciones ---------- */
.ficha-seccion { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ficha-seccion-cabecera { display: flex; align-items: baseline; gap: 10px; min-height: 34px; }
.ficha-seccion-titulo { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--mpu-texto); }
.ficha-seccion-sub { font-size: 12px; color: var(--mpu-apagado); }
.ficha-caja { background: #FFFFFF; border: 1px solid var(--mpu-borde); border-radius: 4px; padding: 10px 12px; }
.ficha-dos { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
@media (max-width: 1200px) { .ficha-dos { grid-template-columns: minmax(0, 1fr); } }

/* Línea de tiempo laboral */
.ficha-tl-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ficha-tl-leyenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--mpu-secundario); }
.ficha-tl-leyenda i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.ficha-tl { position: relative; margin: 10px 0 4px; }
.ficha-tl-pista { position: absolute; left: 0; right: 0; top: 18px; height: 22px; background: #F4F6F9; border-radius: 2px; }
.ficha-tl-anio { position: absolute; top: 0; bottom: 0; border-left: 1px solid #E1E5EA; }
.ficha-tl-anio span { position: absolute; top: 0; left: 3px; font-family: var(--mpu-fuente-cifras); font-size: 10.5px; color: var(--mpu-apagado); }
.ficha-tl-barra {
    position: absolute; top: 18px; height: 22px; min-width: 3px; border: 1px solid #FFFFFF; border-radius: 2px;
    padding: 0; cursor: pointer;
}
.ficha-tl-barra:focus-visible { outline: 2px solid var(--mpu-dorado); outline-offset: 1px; }
.ficha-tl-con-sel .ficha-tl-barra { opacity: .35; }
.ficha-tl-con-sel .ficha-tl-barra.ficha-tl-sel { opacity: 1; border: 2px solid #16191D; }
.ficha-tl-hoy { position: absolute; top: 12px; height: 34px; width: 2px; background: #B42318; }
.ficha-nota { font-size: 12px; color: var(--mpu-apagado); }

/* Detalle al lado de la grilla */
.ficha-detalle-titulo { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; color: var(--mpu-texto); }
.ficha-enlaces { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; }
.ficha-enlaces button { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--mpu-azul-700); text-decoration: underline; }
.ficha-regimen { display: inline-flex; align-items: center; gap: 6px; }
.ficha-regimen i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.ficha-vigente { color: var(--mpu-verde-texto); font-weight: 600; }

/* FICHA-ORDEN (14-oct-2026) · Periodos laborales: el vínculo elegido se abre BAJO su fila (fila de detalle de DxGrid),
   con su ficha y «Cargos y remuneraciones de este vínculo». La fila elegida queda resaltada (celeste + filete dorado)
   y la caja del detalle lleva el mismo filete: se ve a qué vínculo pertenece. */
/* La grilla de periodos es más ancha que la vista (desplaza en horizontal): la caja del vínculo queda pegada a la izquierda
   y con el ancho VISIBLE de la grilla (cqw del contenedor), para que nada del detalle quede fuera de la vista. */
.ficha-grilla-periodos { --dxbl-grid-selection-bg: #DCE5F3; container-type: inline-size; }
.ficha-grilla-periodos .dxbl-grid-table > tbody > tr[aria-selected="true"] > td { font-weight: 600; }
.ficha-grilla-periodos .dxbl-grid-table > tbody > tr[aria-selected="true"] > td:first-child { box-shadow: inset 4px 0 0 var(--mpu-dorado); }
.ficha-grilla-periodos .dxbl-grid-table > tbody > tr.dxbl-grid-detail-row > td { padding: 0 0 0 0; background: #F4F6F9; }
.ficha-vinculo-num { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ficha-vinculo-num i { font-size: 10px; color: var(--mpu-azul-700); }
.ficha-vinculo {
    margin: 6px 8px 10px 8px; padding: 10px 12px; background: #FFFFFF; border: 1px solid var(--mpu-borde);
    border-left: 4px solid var(--mpu-dorado); border-radius: 4px; display: flex; flex-direction: column; gap: 10px;
    white-space: normal; font-weight: 400;
    position: sticky; left: 8px; box-sizing: border-box; width: calc(100cqw - 50px); max-width: calc(100cqw - 50px); /* 100cqw = ancho visible de la grilla; 50px = sangria de la celda de detalle + margenes */
}
.ficha-vinculo-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ficha-vinculo-titulo { margin: 0; font-size: 14px; font-weight: 600; color: var(--mpu-texto); }
.ficha-vinculo-titulo span { margin-left: 6px; font-size: 12.5px; font-weight: 400; color: var(--mpu-secundario); }
.ficha-vinculo-datos { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: 16px; }
@media (max-width: 1100px) { .ficha-vinculo-datos { grid-template-columns: max-content minmax(0, 1fr); } }
.ficha-vinculo-sub { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--mpu-borde); padding-top: 10px; }
.ficha-vinculo-subtitulo { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--mpu-azul-700); }

/* Tarjeta de sección vacía (Sin datos ≠ No aplica) y de sección sensible sin permiso */
.ficha-vacio { max-width: 720px; border: 1px dashed var(--mpu-borde-control); border-radius: 4px; background: #FFFFFF; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.ficha-vacio-titulo { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--mpu-texto); }
.ficha-vacio p { margin: 0; font-size: 13px; color: var(--mpu-secundario); }
/* FSV (09-oct-2026): persona registrada sin vínculo laboral — llamado a «Nuevo ingreso» sobre sus datos personales */
.ficha-sin-vinculo { max-width: 900px; border: 1px solid var(--mpu-borde); border-left: 3px solid var(--mpu-azul-700); border-radius: 4px; background: #FFFFFF; padding: 10px 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ficha-sin-vinculo-icono { width: 32px; height: 32px; border-radius: 50%; background: #E8EDF6; color: var(--mpu-azul-700); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ficha-sin-vinculo-texto { flex: 1 1 320px; min-width: 0; }
.ficha-sin-vinculo-texto h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; color: var(--mpu-texto); }
.ficha-sin-vinculo-texto p { margin: 0; font-size: 12.5px; color: var(--mpu-secundario); }
.ficha-sin-vinculo-cuerpo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ficha-foto { width: 72px; height: 90px; object-fit: cover; border: 1px solid var(--mpu-borde); border-radius: 3px; }
.ficha-bloqueo { max-width: 640px; border: 1px solid var(--mpu-borde); border-radius: 4px; background: #FFFFFF; padding: 16px; display: flex; gap: 14px; }
.ficha-bloqueo-icono { width: 32px; height: 32px; border-radius: 50%; background: var(--mpu-fondo-zonas); color: var(--mpu-apagado); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ficha-bloqueo-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #A94436; }
.ficha-bloqueo h3 { margin: 2px 0 6px; font-size: 14px; font-weight: 600; color: var(--mpu-texto); }
.ficha-bloqueo p { margin: 0 0 4px; font-size: 13px; color: var(--mpu-secundario); }

@media print {
    .mpu-marco { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
    .mpu-marco-lateral, .mpu-marco-encabezado, .mpu-pestanas, .mpu-barra, .ficha-indice { display: none; }
    .mpu-marco-contenido { overflow: visible; }
    .ficha-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

/* Calendario de asistencia (códigos reales de TareoTipoAsistencia) */
.ficha-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ficha-cal-cab { font-size: 11px; font-weight: 600; color: var(--mpu-apagado); text-align: center; padding-bottom: 2px; }
.ficha-cal-dia { height: 42px; border-radius: 3px; padding: 3px 5px; display: flex; flex-direction: column; justify-content: space-between; background: #FFFFFF; border: 1px solid #E7EAEE; }
.ficha-cal-num { font-family: var(--mpu-fuente-cifras); font-size: 10.5px; color: var(--mpu-apagado); }
.ficha-cal-marca { font-size: 12px; font-weight: 700; text-align: center; }
.ficha-cal-ok     { background: var(--mpu-ok-fondo);    color: var(--mpu-verde-texto); border-color: transparent; }
.ficha-cal-aviso  { background: var(--mpu-aviso-fondo); color: var(--mpu-aviso-texto); border-color: transparent; }
.ficha-cal-error  { background: var(--mpu-error-fondo); color: #A94436; border-color: transparent; }
.ficha-cal-info   { background: var(--mpu-info-fondo);  color: var(--mpu-azul-700); border-color: transparent; }
.ficha-cal-neutro { background: var(--mpu-fondo-zonas); color: var(--mpu-secundario); border-color: transparent; }