.fp-ic{display:inline-block;width:16px;height:16px;flex:none;vertical-align:-3px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.fp-ic.user-round{--m:url(../diseno/assets/icons/user-round.svg)}
.fp-ic.id-card{--m:url(../diseno/assets/icons/id-card.svg)}
.fp-ic.store{--m:url(../diseno/assets/icons/store.svg)}
.fp-ic.phone{--m:url(../diseno/assets/icons/phone.svg)}
.fp-ic.smartphone{--m:url(../diseno/assets/icons/smartphone.svg)}
.fp-ic.whatsapp{--m:url(../diseno/assets/icons/whatsapp.svg)}
.fp-ic.briefcase{--m:url(../diseno/assets/icons/briefcase.svg)}
.fp-ic.banknote{--m:url(../diseno/assets/icons/banknote.svg)}
.fp-ic.clock{--m:url(../diseno/assets/icons/clock.svg)}


.lf-panel[data-tipo="persona"]{width:520px}
.lf-panel[data-tipo="persona"] .lf-cab h2{overflow-wrap:normal;word-break:normal}
.lf-panel[data-tipo="persona"] .lf-cab h2>span{min-width:0}
.lf-panel[data-tipo="persona"] .lf-cab small{overflow-wrap:normal}

.lf-panel[data-tipo="persona"] .lf-pie{padding-right:84px}
.fp{display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--cc-texto);overflow-wrap:normal;word-break:normal;hyphens:none}
.fp-sec{margin:0;padding:12px 14px 14px;border:1px solid var(--cc-borde);border-radius:12px;background:var(--cc-superficie)}
.fp-sec>h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cc-texto-2)}
.fp-sec>h3 small{margin-left:auto;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--cc-texto-3)}

.fp-rej{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px 16px;margin:0}
.fp-rej+.fp-rej{margin-top:12px}
.fp-d{display:flex;flex-direction:column;gap:2px;min-width:0}
.fp-d.ancho{grid-column:1/-1}
.fp-d dt{font-size:12px;font-weight:600;color:var(--cc-texto-3);line-height:1.3}
.fp-d dd{margin:0;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--cc-texto)}
.fp-d dd.num,.fp-tel .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.fp-d dd.correo{white-space:nowrap;font-size:14px}
.fp-d dd.alerta{color:var(--u-alerta)}
.fp-d small{font-size:12.5px;color:var(--cc-texto-3);line-height:1.4}
.fp a{color:var(--cc-enlace);text-decoration:none}
.fp a:hover{text-decoration:underline}
.fp-falta{display:inline-block;font-size:12.5px;font-weight:600;color:var(--cc-texto-3);border:1px dashed var(--cc-borde-fuerte);border-radius:6px;padding:1px 7px;white-space:nowrap}
.fp-gris{color:var(--cc-texto-3);font-weight:500;font-size:13px}
.fp-nota{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--cc-texto-3)}
.fp-vacio{margin:0;font-size:13.5px;line-height:1.45;color:var(--cc-texto-2)}
.fp-pend{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--u-alerta-suave);color:var(--u-alerta);font-size:13px;line-height:1.4}
.fp-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 0}
.fp .px-btn{min-height:36px;font-size:13px;gap:6px;text-decoration:none}
.fp-espera{flex:1 1 180px;font-size:12.5px;line-height:1.4;color:var(--cc-texto-3)}

.fp-tels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:12px 0 0}
.fp-tel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--cc-borde);background:var(--cc-superficie-2)}
.fp-tel.personal{border-left:3px solid var(--cc-primario,var(--cc-texto))}
.fp-tel.tienda{border-left:3px solid var(--cc-borde-fuerte)}
.fp-tel h4{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-texto-2)}
.fp-tel p{margin:0;font-size:15px;font-weight:700}
.fp-tel small{font-size:12.5px;line-height:1.4;color:var(--cc-texto-3)}
.fp-tel p.fp-gris{font-size:13px;font-weight:500}
.fp-tel .px-btn{margin-top:4px;white-space:nowrap}
.fp-wa{color:var(--cc-texto)!important}
.fp-h4{margin:14px 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-texto-3)}
.fp-vtas{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.fp-vta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:4px 14px;padding:8px 10px;border-radius:8px;background:var(--cc-superficie-2);font-size:13.5px;font-variant-numeric:tabular-nums}
.fp-vta b{grid-column:1/-1;font-size:13px}
.fp-vta span{display:flex;flex-direction:column;gap:1px;font-weight:600}
.fp-vta i{font-style:normal;font-size:12px;font-weight:500;color:var(--cc-texto-3)}
.fp-hito{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px;font-size:14px}
.fp-hito span{font-size:12.5px;color:var(--cc-texto-3)}
.fp .v2t-tag{display:inline-block;font-size:12px;font-weight:700;border-radius:6px;padding:1px 6px;background:var(--u-alerta-suave);color:var(--u-alerta)}


#px-main .v2g.rh-abierta{position:relative}

#px-main .v2g.rh-abierta>.v2g-barras{margin-right:calc(var(--rh-w,380px) + 20px)}
#px-main .v2g .v2g-barra.rh-sel{outline:2px solid var(--cc-texto-2);outline-offset:-2px;background:var(--u-neutro-suave)}
.rh-gente{position:absolute;right:16px;top:0;width:var(--rh-w,380px);box-sizing:border-box;z-index:3;padding:12px 14px;border:1px solid var(--cc-borde-fuerte);border-radius:12px;background:var(--cc-superficie);box-shadow:var(--cc-sombra-3,0 8px 24px rgba(0,0,0,.14));font-size:14px;overflow-wrap:normal;word-break:normal}
.rh-gente::before{content:'';position:absolute;left:-7px;top:calc(var(--rh-y,22px) - 6px);width:12px;height:12px;background:var(--cc-superficie);border-left:1px solid var(--cc-borde-fuerte);border-bottom:1px solid var(--cc-borde-fuerte);transform:rotate(45deg)}
.rh-gente.abajo{position:static;width:auto;margin:4px 0 8px;box-shadow:none}
.rh-gente.abajo::before{display:none}
.rh-gente-cab{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:4px 10px;margin:0 0 8px}
.rh-gente-cab>div{min-width:0;display:flex;flex-direction:column;gap:1px}
.rh-gente-cab b{font-size:14.5px;font-weight:700;line-height:1.3}
.rh-gente-cab span{font-size:12.5px;color:var(--cc-texto-3)}
#px-main .rh-gente .rh-gente-local{font-size:13px;min-height:32px}
#px-main .rh-gente .rh-gente-x{flex:none;margin:0;width:32px;height:32px;min-height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--cc-borde-fuerte);border-radius:8px;background:var(--cc-superficie);color:var(--cc-texto);font:inherit;font-size:18px;line-height:1;cursor:pointer}
.rh-gente-vacio{margin:0;font-size:13.5px;color:var(--cc-texto-3)}

.rh-gente .rh-gente-t{width:100%;min-width:0;max-width:100%;border-collapse:collapse;font-size:13.5px;table-layout:auto}
.rh-gente-t th{padding:6px 8px 6px 0;text-align:left;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cc-texto-3);border-bottom:1px solid var(--cc-borde);cursor:pointer;white-space:nowrap}
#px-main .rh-gente-t td{padding:8px 8px 8px 0;border-bottom:1px solid var(--cc-borde);vertical-align:top;line-height:1.35;white-space:normal;height:auto;background:none}
#px-main .rh-gente-t td+td,#px-main .rh-gente-t th+th{white-space:nowrap;width:1%;padding-right:0;padding-left:10px}
#px-main .rh-gente-t th{background:none;height:auto}
.rh-gente-t td.alerta{color:var(--u-alerta);font-weight:600}
.rh-gente-t tfoot td{border-bottom:0;font-weight:700;padding-top:8px}
#px-main .rh-gente-t .lf-ent{font-size:13.5px;text-align:left}


.rh-faltan{margin:16px 0 0;padding:14px 16px;border:1px solid var(--cc-borde);border-radius:12px;background:var(--cc-superficie)}
.rh-faltan>h3{margin:0 0 10px;font-size:15px;font-weight:700}
.rh-faltan .tabla td{overflow-wrap:normal}
.rh-faltan tfoot td{font-weight:700}


.rh-gente.abajo .rh-gente-t,.rh-gente.abajo .rh-gente-t tbody,.rh-gente.abajo .rh-gente-t tfoot{display:block}
.rh-gente.abajo .rh-gente-t thead tr{display:flex;flex-wrap:wrap;gap:2px 16px;border-bottom:1px solid var(--cc-borde)}
#px-main .rh-gente.abajo .rh-gente-t th{display:inline-flex;align-items:center;gap:4px;width:auto;padding:6px 0;border-bottom:0}
.rh-gente.abajo .rh-gente-t tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--cc-borde)}
#px-main .rh-gente.abajo .rh-gente-t td{display:block;width:auto;padding:0;border-bottom:0;white-space:normal}
#px-main .rh-gente.abajo .rh-gente-t tbody td:first-child{grid-column:1/-1}
#px-main .rh-gente.abajo .rh-gente-t tbody td+td{font-size:13px}
.rh-gente.abajo .rh-gente-t tbody td+td::before{content:attr(data-etiqueta) ': ';color:var(--cc-texto-3)}
.rh-gente.abajo .rh-gente-t tfoot tr{display:block;padding:8px 0 0}


.lf-panel[data-tipo="persona"],.lf-panel[data-tipo="deudor"],.fp{
  --fp-fondo:#f1f5f8; --fp-rotulo:#4f6176; --fp-cab-1:#004a59; --fp-cab-2:#0b6072; --fp-cab-3:#0e7490; --fp-cab-texto:#ffffff;
  --fp-cab-sub:#e3f2f6; --fp-cab-filo:#f5b041; --fp-icono-sobre:#ffffff;
  
  --fp-petroleo:#0b6072; --fp-petroleo-t:#0e7490;
  --fp-morado:#7d3194;   --fp-morado-t:#8e3fa6;
  --fp-indigo:#3a4fb8;   --fp-indigo-t:#4c63d2;
  --fp-ambar:#8a5000;    --fp-ambar-t:#f5b041;
  --fp-verde:#18693f;    --fp-verde-t:#1f9d55;
  --fp-pizarra:#3d5674;  --fp-pizarra-t:#5b7699;
  --fp-mezcla:8%; --fp-mezcla-borde:30%;
  
  --u-alerta:#8f5300;
}
:root[data-tema="oscuro"] :is(.lf-panel[data-tipo="persona"],.lf-panel[data-tipo="deudor"],.fp){
  --fp-fondo:#11161b; --fp-rotulo:#a3b3c6; --fp-cab-1:#05303a; --fp-cab-2:#0a4654; --fp-cab-3:#0c5566; --fp-cab-texto:#f1fafc;
  --fp-cab-sub:#cde6ee; --fp-cab-filo:#e8960c; --fp-icono-sobre:#10161b;
  --fp-petroleo:#6ccbe0; --fp-petroleo-t:#2aa5bf;
  --fp-morado:#dcaaee;   --fp-morado-t:#b066cc;
  --fp-indigo:#adb9ff;   --fp-indigo-t:#6f83ea;
  --fp-ambar:#f5b041;    --fp-ambar-t:#e8960c;
  --fp-verde:#72d9a5;    --fp-verde-t:#1f9d55;
  --fp-pizarra:#b6c5d9;  --fp-pizarra-t:#7f95b3;
  --fp-mezcla:13%; --fp-mezcla-borde:38%; --u-alerta:#f2b04a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) :is(.lf-panel[data-tipo="persona"],.lf-panel[data-tipo="deudor"],.fp){
    --fp-fondo:#11161b; --fp-rotulo:#a3b3c6; --fp-cab-1:#05303a; --fp-cab-2:#0a4654; --fp-cab-3:#0c5566; --fp-cab-texto:#f1fafc;
    --fp-cab-sub:#cde6ee; --fp-cab-filo:#e8960c; --fp-icono-sobre:#10161b;
    --fp-petroleo:#6ccbe0; --fp-petroleo-t:#2aa5bf;
    --fp-morado:#dcaaee;   --fp-morado-t:#b066cc;
    --fp-indigo:#adb9ff;   --fp-indigo-t:#6f83ea;
    --fp-ambar:#f5b041;    --fp-ambar-t:#e8960c;
    --fp-verde:#72d9a5;    --fp-verde-t:#1f9d55;
    --fp-pizarra:#b6c5d9;  --fp-pizarra-t:#7f95b3;
    --fp-mezcla:13%; --fp-mezcla-borde:38%; --u-alerta:#f2b04a;
  }
}

.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]){background:var(--fp-fondo)}
.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]) .lf-pie{background:var(--fp-fondo);color:var(--fp-rotulo)}

.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]) .lf-cab{background:linear-gradient(120deg,var(--fp-cab-1) 0%,var(--fp-cab-2) 55%,var(--fp-cab-3) 100%);color:var(--fp-cab-texto);border-bottom:3px solid var(--fp-cab-filo)}
.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]) .lf-cab h2{color:var(--fp-cab-texto)}
.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]) .lf-cab h2 :is(.fp-ic,.cat-icono){color:var(--fp-cab-filo)}
.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]) .lf-cab small{color:var(--fp-cab-sub)}
.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]) .lf-cab .lf-chip{box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]) .lf-cab .lf-chip.neutro{background:var(--fp-cab-sub);color:var(--fp-cab-1)}
.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]) .lf-cerrar{background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.5);color:var(--fp-cab-texto)}
.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]) .lf-cerrar:hover{background:rgba(0,0,0,.32)}
.lf-panel:is([data-tipo="persona"],[data-tipo="deudor"]) .lf-cerrar:focus-visible{outline:2px solid var(--fp-cab-filo);outline-offset:2px}


.fp-sec{--fp-tit:var(--fp-petroleo);--fp-tin:var(--fp-petroleo-t);
  background:color-mix(in srgb,var(--fp-tin) var(--fp-mezcla),var(--cc-superficie));
  border-color:color-mix(in srgb,var(--fp-tin) var(--fp-mezcla-borde),var(--cc-superficie));
  box-shadow:0 1px 2px rgba(var(--cc-sombra-color,16,32,40),.06)}
.fp-sec:is([data-fp-sec="datos"],[data-fp-sec="debe"]){--fp-tit:var(--fp-petroleo);--fp-tin:var(--fp-petroleo-t)}
.fp-sec:is([data-fp-sec="local"],[data-fp-sec="creditos"]){--fp-tit:var(--fp-morado);--fp-tin:var(--fp-morado-t)}
.fp-sec[data-fp-sec="contacto"]{--fp-tit:var(--fp-indigo);--fp-tin:var(--fp-indigo-t)}
.fp-sec:is([data-fp-sec="trabajo"],[data-fp-sec="acciones"]){--fp-tit:var(--fp-ambar);--fp-tin:var(--fp-ambar-t)}
.fp-sec:is([data-fp-sec="sueldo"],[data-fp-sec="pagos"]){--fp-tit:var(--fp-verde);--fp-tin:var(--fp-verde-t)}
.fp-sec:is([data-fp-sec="historial"],[data-fp-sec="gestiones"]){--fp-tit:var(--fp-pizarra);--fp-tin:var(--fp-pizarra-t)}

.fp-sec>h3{position:relative;min-height:26px;padding-left:34px;color:var(--fp-tit)}
.fp-sec>h3::before{content:'';position:absolute;left:0;top:0;width:26px;height:26px;border-radius:7px;background:var(--fp-tit)}
.fp-sec>h3>.fp-ic:first-child{position:absolute;left:5px;top:5px;color:var(--fp-icono-sobre)}
.fp-sec>h3 small{color:var(--fp-rotulo)}

.fp-d dt,.fp-d small,.fp-gris,.fp-nota,.fp-espera,.fp-hito span,.fp-tel small,.fp-vta i{color:var(--fp-rotulo)}
.fp-vacio{color:var(--fp-rotulo)}
.fp-falta{color:var(--fp-rotulo);border-color:color-mix(in srgb,var(--fp-tit) 45%,var(--cc-superficie));background:var(--cc-superficie)}
.fp-h4{color:var(--fp-tit)}

.fp-sec .fp-tel,.fp-sec .fp-vta{background:var(--cc-superficie);border:1px solid color-mix(in srgb,var(--fp-tin) 26%,var(--cc-superficie))}
.fp-sec .fp-tel.personal{border-left:3px solid var(--fp-tit)}
.fp-sec .fp-tel.tienda{border-left:3px solid color-mix(in srgb,var(--fp-tit) 45%,var(--cc-superficie))}
.fp-sec .fp-tel h4{color:var(--fp-tit)}
.fp-hito b{color:var(--fp-tit)}

.fp-sec[data-fp-sec="sueldo"] .fp-d:first-child dd.num{font-size:19px;font-weight:700;color:var(--fp-tit)}
.fp-vta span{color:var(--cc-texto)}

@media (max-width:767px){
  .lf-panel[data-tipo="persona"]{width:100%}
  .fp-sec{padding:12px}
  .fp-d dd.correo{font-size:13.5px}
}