/* ==========================================================================
   Norte . estilos de Gente (v2)
   Filas limpias separadas por hairline, avatar con anillo en la escala de
   blancos de los tokens, mini barra de calor de 30 días. La relación solo
   aparece como chip y como texto. Solo tokens de norte.css.
   ========================================================================== */

.gente{display:flex;flex-direction:column;gap:14px}
.gente-body{display:flex;flex-direction:column;gap:14px}
.gente-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.gente-detail{display:none}

/* "Añadir persona" vive en la cabecera; en móvil solo el icono */
.gente-add{gap:6px}
@media (max-width:899px){.gente-add{width:36px;padding:0;gap:0}.gente-add span{display:none}}

/* buscador y los dos desplegables: en móvil caben en dos líneas, sin scroll lateral */
.gente-search{display:flex;align-items:center;gap:8px}
.search{position:relative;flex:1;min-width:0}
.search>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--tx3);pointer-events:none}
.search .input{padding-left:42px;border-radius:100px}
.search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.gente-import{width:44px;height:44px;flex:none}
.gente-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-inline:2px}
.gente-filters .nsel{min-width:0}
.gente-filters .nsel-btn{max-width:46vw}
.gente-count{font-size:12px;color:var(--tx3);font-weight:600;margin-left:auto;white-space:nowrap}
.gente-note{font-size:11.5px;color:var(--tx4);line-height:1.4;padding:10px 4px 0}

/* lista: sin cajas, una hairline entre filas */
.gente-list{display:flex;flex-direction:column}
.prow{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 8px;text-align:left;width:100%;cursor:pointer;border-radius:var(--r);
  border-top:1px solid var(--line);transition:background .18s;
}
.prow:first-child{border-top:0}
.prow:hover{background:rgba(255,255,255,.03)}
.prow.on{background:var(--or-soft)}
.avatar.ring{box-shadow:0 0 0 1.5px var(--ring,var(--line2));border-color:transparent;background:var(--card2)}
.prow .avatar{width:38px;height:38px;font-size:12.5px}
.pmain{display:flex;flex-direction:column;gap:3px;min-width:0}
.ptop{display:flex;align-items:center;gap:8px;min-width:0}
.pname{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chip.rel{flex:none;background:none;border-color:var(--line);color:var(--tx3);padding:2px 8px;min-height:20px;font-size:11px}
.chip.none{border-style:dashed}
.pmeta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx3);min-width:0}
.pago{color:var(--tx2)}
.psep{color:var(--tx4)}

/* mini barra de calor: 30 días */
.pheat{display:flex;align-items:center;gap:8px;flex:none}
.heat{display:flex;align-items:flex-end;gap:1.5px;height:18px}
.heat i{width:2.5px;height:6px;border-radius:100px;background:var(--line2);display:block;transition:height .2s var(--tech)}
.heat i.on{height:18px;background:var(--good)}
.pheat-n{font-size:12px;color:var(--tx3);font-weight:600;min-width:14px;text-align:right}
@media (max-width:420px){
  .prow{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:11px 6px}
  .pheat{grid-column:2;justify-content:flex-start}
  .heat i{width:3px}
}

/* ---------- ficha ---------- */
.pdetail{display:flex;flex-direction:column;gap:18px}
.pd-head{display:flex;align-items:flex-start;gap:16px}
.pd-head .avatar.lg{width:60px;height:60px;font-size:21px;box-shadow:0 0 0 2px var(--ring,var(--line2))}
.pd-title{display:flex;flex-direction:column;gap:9px;min-width:0}
.pd-title h2{font-size:clamp(24px,3.4vw,34px);overflow-wrap:anywhere}
.pd-edit{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pd-name{font-family:var(--fd);font-size:20px;font-weight:800;letter-spacing:-.03em;border-radius:var(--r)}
.pd-edit .q{padding:9px 0}
.pd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pd-stat{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:var(--r);background:var(--card2);text-align:left;min-height:44px}
.pd-stat .num{font-size:20px;white-space:nowrap}
.pd-stat .num.txt{font-size:17px}
.pd-stat.link{cursor:pointer;transition:background .18s}
.pd-stat.link:hover{background:var(--card3)}
.pd-grid{gap:12px}
.pd-block{display:flex;flex-direction:column;gap:8px;min-width:0}
.pd-hint{font-size:12.5px}
.rate{display:flex;gap:2px;margin-left:-8px}
.rate-dot{width:36px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);transition:background .18s}
.rate-dot:hover{background:rgba(255,255,255,.04)}
.rate-dot[disabled]{pointer-events:none}
.rate-dot i{width:12px;height:12px;border-radius:100px;background:var(--tx4);transition:background .18s,transform .18s var(--tech)}
.rate-dot.on i{background:var(--tx);transform:scale(1.15)}
.trust{position:relative;height:6px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:10px}
.trust i{position:absolute;left:0;top:0;bottom:0;border-radius:100px;background:var(--tx);transition:width .3s var(--ease)}
.pd-contact{display:flex;flex-direction:column}
.pd-contact .label{padding-bottom:4px}
.pd-crow .q-ctl{gap:10px}
.pd-crow .v{font-size:14px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pd-crow a.v:hover{color:var(--or)}
.pd-cin{min-height:38px;padding:7px 12px;font-size:14px;border-radius:100px;max-width:220px}
.chip.more{color:var(--tx3);border-style:dashed}
.pd-foot{display:flex;gap:8px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)}
.pd-empty{min-height:260px;justify-content:center}
.pdetail-holder{padding-top:2px}
.pdetail-holder .pd-title h2{display:none}   /* en la hoja el nombre ya va en el título */
.padd .q{border-bottom:0;padding:8px 0}
.gente-off{gap:12px;min-height:300px;justify-content:center}
.gente-off b{font-family:var(--fd);font-size:20px;letter-spacing:-.03em;color:var(--tx)}

@media (max-width:480px){
  .grid.c2.pd-grid{grid-template-columns:1fr}
  .pd-cin{max-width:100%}
}

/* escritorio: lista a la izquierda, ficha como panel sin borde a la derecha */
@media (min-width:900px){
  .gente-body{display:grid;grid-template-columns:minmax(320px,390px) minmax(0,1fr);gap:26px;align-items:start}
  .gente-detail{display:block;position:sticky;top:80px;background:var(--card);border-radius:var(--r-lg);padding:24px 26px;
    max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:thin}
  .gente-list{max-height:calc(100vh - 260px);overflow:auto;scrollbar-width:thin;padding-right:4px}
  .gente-filters .nsel-btn{max-width:none}
  .prow.on{background:var(--or-soft)}
  .prow.on .pname{color:var(--tx)}
}
@media (min-width:1180px){
  .gente-body{grid-template-columns:400px minmax(0,1fr)}
}

/* ---------- foto de la persona (ronda 3) ---------- */
.pd-photo{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;width:104px}
.pd-photo .btn{width:100%;justify-content:center;padding-inline:4px;font-size:11px;letter-spacing:-.01em}
.pd-photo-add{align-self:center;width:96px}
.pd-photo-add .avatar.lg{width:76px;height:76px;font-size:26px;box-shadow:0 0 0 2px var(--line2)}