/* =========================================================
   persones.html — pàgina "Persones" (fusiona Interaccions + Tasques
   de tercers). Reutilitza .chk de tasques.css per al checkbox, i les
   pills/estats de tercers.css.
   ARA TAMBÉ s'usa inline dins del dashboard principal (index.html),
   secció "Interaccions" — per això inclou .bloc-cap/.bico.
   ========================================================= */

.bloc-cap{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.bico{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;box-shadow:var(--ombra);font-size:16px;flex-shrink:0}
.bico.inter{background:linear-gradient(135deg,var(--teal),var(--blau-fort))}
/* El bloc del títol (2n fill, sempre entre la icona i els botons) ha
   de poder-se encongir i deixar que el seu PROPI text es parteixi en
   línies — sense min-width:0 un títol llarg ("Previsió d'ingressos
   per casa") no cap i, combinat amb flex-wrap al pare, saltava
   sencer a una línia a part, separant-se de la icona. */
/* El bloc del títol s'identifica per EXCLUSIÓ (no per posició, com
   nth-child) perquè ordre-moduls.js insereix la nansa d'arrossegar (o
   les fletxes en mòbil) com a PRIMER fill de .bloc-cap — això desplaça
   tots els índexs i feia que nth-child(2) acabés apuntant a la icona
   en lloc del títol. Amb :not() funciona independentment de l'ordre. */
.bloc-cap > div:not(.bico):not(.bloc-cap-accions){flex:1;min-width:0}
.bloc-cap h2{font-size:17px;font-weight:800;letter-spacing:-.3px}
.bloc-cap .sub{font-size:11.5px;color:var(--gris);font-weight:500}
.bloc-cap-accions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap;flex-shrink:0}

/* Targeta genèrica per a mòduls que no en tenen una de pròpia (Interaccions, Registres) */
.mod-card{background:var(--card);border:1px solid var(--linia);border-radius:var(--radi);box-shadow:var(--ombra);padding:18px 20px;overflow-x:auto}

@media(max-width:640px){
  .bico{width:30px;height:30px;font-size:14px}
  .bloc-cap h2{font-size:15px}
  .bloc-cap .sub{font-size:11px}
  /* .mod-card té 18px/20px de padding pensats per a escriptori; en
     mòbil, sumat al marge de <main>, deixava molt poc espai útil. */
  .mod-card{padding:14px 12px}
}

@media(max-width:560px){
  .bloc-cap-accions{margin-left:0;width:100%}
  .bloc-cap-accions .bt{flex:1}
}

#contingut-persones{max-width:900px;margin:0 auto;padding:26px 26px 60px}

.pp-intro{background:var(--blau-clar);border:1px solid #cfe2f7;border-radius:var(--radi-petit);padding:12px 16px;font-size:12.5px;color:var(--tinta);margin-bottom:18px;line-height:1.5}

.pp-cerca-fila{margin-bottom:16px}
#cerca-persona{width:100%;max-width:380px;padding:10px 14px;border:1px solid var(--linia-forta);border-radius:20px;background:#fbfcfb;font-size:13px}
#cerca-persona:focus{background:#fff;border-color:var(--teal)}

/* ---------- Grups per departament ---------- */
.dep-grup{margin-bottom:18px}
.dep-grup-titol{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gris);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.dep-grup-n{background:#eef1f0;color:var(--gris);border-radius:20px;min-width:18px;text-align:center;padding:1px 7px;font-size:10.5px;font-weight:700}
.dep-grup-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:9px;align-items:start}
.persona-fila.expandida{grid-column:1 / -1}

/* ---------- Fila compacta de persona ---------- */
.persona-fila{background:var(--card);border:1px solid var(--linia);border-radius:12px;overflow:hidden}
.persona-fila:hover{border-color:var(--linia-forta)}
.persona-fila-destacada{border-color:var(--verd-fort);box-shadow:0 0 0 3px var(--verd-clar);transition:box-shadow .3s ease,border-color .3s ease}
.persona-fila-cap{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer}
.avatar-mini{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:10.5px;flex-shrink:0}
.persona-fila-nom{flex:1;font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pend-mini{background:#eef1f0;color:var(--gris);border-radius:20px;min-width:20px;text-align:center;padding:2px 8px;font-size:11px;font-weight:700}
.pend-mini.te{background:var(--vermell-clar);color:var(--vermell)}
.mini-accio{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:var(--gris)}
.mini-accio:hover{background:var(--teal-clar);color:var(--teal)}
.fletxa-mini{color:var(--gris-clar);font-size:11px;transition:transform .15s;flex-shrink:0}
.persona-fila.obert .fletxa-mini{transform:rotate(180deg)}

.persona-fila-detall{display:none;padding:0 12px 12px;border-top:1px solid var(--linia)}
.persona-fila.obert .persona-fila-detall{display:block;padding-top:10px}

/* ---------- Pestanyes internes ---------- */
.pp-tabs{display:flex;gap:2px;background:#f2f4f3;border-radius:9px;padding:3px}
.pp-tab{flex:1;padding:8px 6px;font-size:11px;font-weight:700;color:var(--gris);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pp-tab .icona-svg{flex-shrink:0}
.pp-tab:hover{color:var(--tinta)}
.pp-tab.on{background:#fff;color:var(--verd-fort);box-shadow:var(--ombra)}
@media(max-width:480px){.pp-tab span{display:none}.pp-tab{gap:0}}

.pp-tab-explica{font-size:11px;color:var(--gris);line-height:1.4;padding:8px 4px 12px;text-align:center}

.buit{font-size:11.5px;color:var(--gris-clar);text-align:center;padding:14px 0;font-style:italic}

/* ---------- Ítems compartits (Per parlar / Acords) ---------- */
.pp-llista{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.pp-item{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border:1px solid var(--linia);border-radius:9px;background:#fbfcfb}
.pp-item.urg{border-color:#f3c6c6;background:var(--vermell-clar)}
.pp-item-cos{flex:1;min-width:0}
.pp-item-text{font-size:12px;font-weight:600;line-height:1.4}
.pp-item-comentari{font-size:11px;color:var(--gris);margin-top:3px;line-height:1.4}
.pp-esborrar{color:var(--gris-clar);font-size:15px;line-height:1;width:20px;height:20px;border-radius:6px;flex-shrink:0}
.pp-esborrar:hover{background:var(--vermell-clar);color:var(--vermell)}

.autor-mini{font-size:9.5px;font-weight:700;color:var(--gris-clar);font-style:italic}

/* Checkbox real, reutilitzant exactament el mateix que Tasques */
.chk{width:19px;height:19px;border:2px solid #c3ccc8;border-radius:6px;flex-shrink:0;margin-top:1px;cursor:pointer;transition:.14s}
.chk:hover{border-color:var(--verd-mig);background:var(--verd-clar)}

.pp-afegir-fila{display:flex;gap:6px}
.pp-afegir-fila input,.pp-nova-peticio input{flex:1;border:1px dashed var(--linia-forta);border-radius:8px;padding:8px 10px;background:transparent;font-size:12px}
.pp-afegir-fila input:focus,.pp-nova-peticio input:focus{border-color:var(--teal);border-style:solid;background:#fff}
.pp-afegir-fila button{background:var(--teal);color:#fff;border-radius:8px;padding:0 14px;font-size:11.5px;font-weight:700}
.pp-afegir-fila button:hover{filter:brightness(1.08)}
.pp-afegir-fila .pp-bt-proposar{background:#fff;color:var(--lila);border:1px solid var(--lila-clar);padding:0 10px;flex:0 0 auto}
.pp-afegir-fila .pp-bt-proposar:hover{background:var(--lila-clar);filter:none}

/* ---------- Pestanya Peticions ---------- */
.pp-peticio{border:1px solid var(--linia);border-radius:9px;background:#fbfcfb;padding:9px 10px;margin-bottom:6px}
.pp-peticio-cap{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pp-peticio-direccio{font-size:10px;color:var(--gris-clar);font-style:italic}
.pp-peticio-titol{font-size:12px;font-weight:600;flex:1;min-width:100%}
.pp-peticio-accions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.pp-bt-accio{font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:7px;border:1px solid var(--linia-forta);background:#fff}
.pp-bt-accio:hover{background:#f5f6f5}
.pp-bt-accio.ok{background:var(--verd-fort);color:#fff;border-color:var(--verd-fort)}
.pp-bt-accio.ok:hover{background:var(--verd-mig)}
.pp-bt-accio.perill{color:var(--vermell);border-color:#f3c6c6}
.pp-bt-accio.perill:hover{background:var(--vermell-clar)}

.pp-nova-peticio{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pp-nova-peticio input[type=date]{flex:0 0 130px;border:1px solid var(--linia-forta);border-radius:8px;padding:8px;background:#fbfcfb;font-size:11.5px}
.pp-nova-peticio button{background:var(--verd-fort);color:#fff;border-radius:8px;padding:0 14px;font-size:11.5px;font-weight:700;flex-shrink:0}
.pp-nova-peticio button:hover{background:var(--verd-mig)}

.pp-nou-acord{margin-top:8px;background:#fbfcfb;border:1px dashed var(--linia-forta);border-radius:9px;padding:10px}
.pp-nou-acord input{width:100%;box-sizing:border-box;border:1px solid var(--linia-forta);border-radius:8px;padding:8px 10px;background:#fff;font-size:12px;margin-bottom:6px}
.pp-nou-acord input:focus{border-color:var(--teal)}
.pp-acord-fila2{display:flex;gap:6px}
.pp-acord-fila2 input{margin-bottom:6px}
.pp-acord-responsable{flex:1}
.pp-acord-data{flex:0 0 140px}
.pp-nou-acord button{width:100%;background:var(--verd-fort);color:#fff;border-radius:8px;padding:8px;font-size:12px;font-weight:700}
.pp-nou-acord button:hover{background:var(--verd-mig)}

.pill.estat-pendent{background:var(--taronja-clar);color:var(--taronja)}
.pill.estat-negociacio{background:var(--lila-clar,#f5eefa);color:var(--lila)}
.pill.estat-en_proces{background:#e6f1fc;color:#0b4f8a}
.pill.estat-finalitzada{background:#eef0f2;color:#5e6f69}
.pill.estat-acceptada{background:var(--verd-clar);color:var(--verd-fort)}
.pill.estat-rebutjada{background:var(--vermell-clar);color:var(--vermell)}
.pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}

.a-est{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:20px;cursor:pointer;border:none;flex-shrink:0;margin-top:1px}
.a-est.obert{background:var(--teal-clar);color:var(--teal)}
.a-est.fet{background:var(--verd-clar);color:var(--verd-fort)}
.a-est.caducat{background:var(--vermell-clar);color:var(--vermell)}
.a-est.recurrent{background:#eef2ff;color:#4338ca;cursor:default}

/* ---- Acords: recurrència, compliment i venciment ---- */
.pp-item.venciment-aviat{border-color:#f5d9a8;background:#fff9ef}
.pp-item.venciment-vencut{border-color:#f3c6c6;background:var(--vermell-clar)}
.pp-avis-vencut{font-size:9.5px;font-weight:700;color:var(--vermell);margin-left:4px}
.pp-badge-recurrent{display:inline-block;font-size:10px;font-weight:700;color:#4338ca;background:#eef2ff;border-radius:20px;padding:2px 8px;margin-right:6px}
.pp-compliment{font-size:10.5px;color:var(--gris);font-weight:600}
.pp-convertir-tasca{align-self:flex-start;flex-shrink:0;font-size:10.5px;font-weight:700;color:var(--verd-fort);background:var(--verd-clar);border-radius:8px;padding:5px 9px;margin-top:1px;white-space:nowrap}
.pp-convertir-tasca:hover{background:#dcf0dd}

/* ---- Formulari nou acord: responsable real + recurrent ---- */
.pp-acord-fila2{display:flex;gap:6px}
.pp-acord-fila2 select,.pp-acord-fila2 input{margin-bottom:0 !important}
.pp-acord-recurrent-check{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--gris);margin:6px 0;cursor:pointer;line-height:1.3}
.pp-acord-recurrent-check input{width:15px;height:15px;flex-shrink:0;margin:0}
.pp-acord-fila-recurrent{display:flex;gap:6px;margin-bottom:6px}
.pp-acord-fila-recurrent select{flex:1;border:1px solid var(--linia-forta);border-radius:8px;padding:8px 10px;background:#fff;font-size:12px}

/* ---- Resum pla de tots els acords oberts ---- */
#pp-acords-resum{margin-bottom:14px}
.pp-resum-acords-tit{font-size:12.5px;font-weight:700;margin-bottom:8px}
.pp-resum-acords-llista{display:flex;flex-direction:column;gap:4px}
.pp-resum-acord-fila{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;padding:7px 10px;border:1px solid var(--linia);border-radius:8px;background:#fbfcfb;font-size:12px;cursor:pointer}
.pp-resum-acord-fila:hover{background:var(--verd-clar)}
.pp-resum-acord-fila.venciment-aviat{border-color:#f5d9a8;background:#fff9ef}
.pp-resum-acord-fila.venciment-vencut{border-color:#f3c6c6;background:var(--vermell-clar)}
.pp-resum-persona{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-resum-text{color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-resum-quan{font-size:11px;color:var(--gris-clar);white-space:nowrap;flex-shrink:0}
@media(max-width:640px){
  .pp-resum-acord-fila{grid-template-columns:1fr;gap:2px}
}

/* ---------- Modal de proposar reunió ---------- */
.camp-reunio{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.camp-reunio label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--gris)}
.camp-reunio input,.camp-reunio select{border:1px solid var(--linia-forta);border-radius:9px;padding:9px 11px;background:#fbfcfb;font-family:inherit;font-size:13px}
.camp-reunio input:focus,.camp-reunio select:focus{background:#fff;border-color:var(--verd-mig)}
.reunio-persona-nom{font-size:13.5px;font-weight:700;padding:8px 11px;background:var(--teal-clar,#e0f2f1);border-radius:9px;color:var(--teal)}
.camp-reunio-fila{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
@media(max-width:520px){.camp-reunio-fila{grid-template-columns:1fr}}

/* ---------- Pestanya Tasques (tasques en marxa amb una persona) ---------- */
.pp-tab-n{font-style:normal;font-size:9.5px;font-weight:800;line-height:1;background:var(--verd-fort);color:#fff;border-radius:20px;min-width:16px;padding:2px 5px;text-align:center}
.pp-tab-n[hidden]{display:none}
.pp-tasques-espera{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--taronja);background:var(--taronja-clar);border-radius:9px;padding:8px 10px;margin-bottom:10px;font-weight:600}
.pp-enllac{font-size:11px;font-weight:700;color:var(--taronja);text-decoration:underline;text-underline-offset:2px}
.pp-seccio-tit{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--gris);margin:12px 0 6px;display:flex;align-items:center;gap:7px}
.pp-tasques-seccio:first-child .pp-seccio-tit{margin-top:2px}
.pp-seccio-n{background:#eef1f0;color:var(--gris);border-radius:20px;min-width:18px;text-align:center;padding:1px 7px;font-size:10.5px;font-weight:700}
.pp-tasques-arxiu{margin-top:12px}
.pp-arxiu-cos{margin-top:8px}