/* =============================================================
   PROVEÏDORS I CLIENTS — la llista i la fitxa (P8, 18.12)
   -------------------------------------------------------------
   La barra de dalt, els botons, les pestanyes, el cercador i la
   taula són els de la graella (graella.css): aquí només hi ha el
   que és propi d'aquesta pantalla. Cap color escrit a mà: tot surt
   de tokens.css (sistema OBRIMA).
   ============================================================= */

/* Totes les pàgines generals (Proyectos, Pedidos, els documents, Proveedores, Clientes, Trabajadores, Horas, Empresa,
   la fitxa de l'obra): la barra a dalt i, a sota, el contingut, que ocupa la resta i es desplaça dins seu. Abans, cada
   pàgina ho posava per la seva banda, i a Pedidos i als documents no hi era: no feien scroll (Josep, 10/10/2026). */
main.entitats { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* Les tres pantalles de l'empresa, com a pestanyes: són navegació. */
.ent-nav { display: flex; align-self: stretch; margin-left: auto; }
.ent-nav .flux-tab { text-decoration: none; }

/* A l'esquerra la llista, a la dreta la fitxa; cadascuna amb el seu desplaçament. */
.ent-cos { flex: 1 1 auto; min-height: 0; display: flex; }

.ent-llista {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-card);
  border-right: 1px solid var(--border-strong);
}
.ent-llista__eines { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.ent-llista__eines .cercador { margin-left: 0; max-width: none; flex: 1 1 auto; }
.ent-llista__lot { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-3); color: var(--c-text-dim); font-size: var(--fs-grid); }
.ent-llista__lot select { flex: 1 1 auto; min-width: 0; height: 26px; font: inherit; color: var(--c-text); background: var(--c-paper);
                          border: 1px solid var(--c-rule); border-radius: var(--radius-control); padding: 0 var(--sp-2); }
.ent-llista__inactius { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-3); color: var(--c-text-dim); font-size: var(--fs-grid); }
.ent-llista__cos { flex: 1 1 auto; min-height: 0; overflow: auto; border-top: 1px solid var(--border-soft); }

.ent-taula tbody tr { cursor: pointer; }
.ent-taula tbody tr:hover { background: var(--surface-muted); }
.ent-taula th, .ent-taula td { border-bottom: 1px solid var(--border-soft); padding: 4px var(--sp-3); }
.ent-taula th { font-weight: var(--fw-medium); color: var(--c-text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.ent-taula td { color: var(--c-text-dim); max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.ent-taula__codi { font-family: var(--font-mono); font-size: var(--fs-status); color: var(--ink-muted); width: 1%; }
/* Un deshabilitat es veu apagat i ratllat: dos senyals (invariant 11). */
.ent-taula tr[data-ent-inactiu] th, .ent-taula tr[data-ent-inactiu] td { color: var(--c-val-cancelled); text-decoration: line-through; }

/* Els clients escrits a les obres que encara no tenen fitxa. */
.ent-sense-fitxa { border-top: 1px solid var(--border-soft); padding-bottom: var(--sp-3); background: var(--surface-item); }
.ent-sense-fitxa .compres__titol { padding: var(--sp-3) var(--sp-4); }
.ent-sense-fitxa__llista { list-style: none; margin: 0; padding: 0 var(--sp-4); max-height: 160px; overflow: auto; }
.ent-sense-fitxa__llista li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 3px 0; }
.ent-sense-fitxa__llista small { color: var(--c-text-dim); }

/* ---------- LA FITXA ---------- */
.ent-fitxa { flex: 1 1 auto; min-width: 0; overflow: auto; padding: var(--sp-5) var(--sp-6); }
.ent-form { max-width: 1080px; display: flex; flex-direction: column; gap: var(--sp-4); }
.ent-fitxa__titol { display: flex; align-items: baseline; gap: var(--sp-4); }
.ent-fitxa__titol h1 { margin: 0; font-size: 20px; font-weight: var(--fw-bold); color: var(--ink); }
.ent-fitxa__inactiu { color: var(--c-val-cancelled); text-decoration: line-through; }
.ent-fitxa__lectura { color: var(--c-text-dim); font-size: var(--fs-grid); }
/* Proveïdor nou per revisar (Josep, 25/09/2026): l'avís s'ha de veure bé. Fons i vora d'avís, i el text
   en negreta: dos senyals (invariant 11). */
.ent-avis {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--c-warn-bg); color: var(--c-warn-text);
  border: 1px solid var(--c-warn-text); border-left-width: 4px; border-radius: var(--radius-sm);
}
.ent-avis b { font-size: var(--fs-ui); letter-spacing: .02em; }
.ent-avis span { font-size: var(--fs-grid); }
.ent-nou {
  margin-left: var(--sp-2); padding: 0 6px; font-size: var(--fs-status); font-weight: var(--fw-bold);
  color: var(--c-warn-text); background: var(--c-warn-bg); border: 1px solid var(--c-warn-text); border-radius: var(--radius-sm);
}

/* Una graella de dotze columnes: cada camp diu quantes n'ocupa. */
.ent-graella { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.ent-capcalera { padding: var(--sp-4); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }

.ent-camp { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ent-camp > span { font-size: var(--fs-status); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-camp input, .ent-camp select, .ent-camp textarea, .ent-adreca__cap select {
  font: inherit;
  font-size: var(--fs-grid);
  color: var(--ink);
  height: 28px;
  padding: 0 var(--sp-3);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.ent-camp textarea { height: auto; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: 1.4; }
.ent-camp input.num { text-align: right; font-variant-numeric: tabular-nums; }
.ent-camp input:focus, .ent-camp select:focus, .ent-camp textarea:focus, .ent-adreca__cap select:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; border-color: var(--c-accent); }
.ent-camp input:disabled, .ent-camp select:disabled, .ent-camp textarea:disabled { background: var(--surface-muted); color: var(--c-text-dim); }
.ent-camp input:required:placeholder-shown { background: var(--c-per-omplir); }

.ent-pestanyes { border-bottom: 1px solid var(--border-strong); height: 32px; }
.ent-pestanya { display: flex; flex-direction: column; gap: var(--sp-4); }
.ent-adreces__eines { display: flex; align-items: center; justify-content: space-between; color: var(--c-text-dim); font-size: var(--fs-grid); }
.ent-adreces__eines .boto { height: 32px; padding: 0 var(--sp-5); }

/* Una adreça: una targeta amb el seu tipus. La primera és la principal. */
.ent-adreca { margin: 0; padding: var(--sp-4); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
/* La capçalera de la targeta: a l'esquerra, *Principal* o el tipus; a la dreta, les accions. */
.ent-adreca__cap { display: flex; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-3); min-height: 28px; }
.ent-adreca__titol { font-size: 14px; font-weight: var(--fw-bold); color: var(--ink); align-self: center; }
.ent-adreca__tipus { display: flex; flex-direction: column; gap: 3px; }
.ent-adreca__tipus > span { font-size: var(--fs-status); color: var(--ink-muted); }
.ent-adreca__accions { margin-left: auto; display: flex; gap: var(--sp-3); }
.ent-adreca__cap .boto { height: 28px; }

/* Desar i descartar, a baix, sempre a la vista en baixar. */
.ent-accions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  background: var(--surface-page);
  border-top: 1px solid var(--border-soft);
}
.ent-accions .boto { height: 32px; padding: 0 var(--sp-5); }
.ent-missatge { margin-right: auto; font-size: var(--fs-grid); }
.ent-missatge[data-mena="be"] { color: var(--state-positive); }
.ent-missatge[data-mena="mal"] { color: var(--state-negative); }