/* ===== Estructura de la app: sidebar + área de contenido ===== */
.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: 220px;
  flex: none;
  background: var(--side);
  color: #f7f8fa;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .01em;
  white-space: nowrap;
}

.sidebar-brand::before {
  content: '';
  width: 22px;
  height: 22px;
  background: var(--acc);
  border-radius: 5px;
  flex: none;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sideink);
  white-space: nowrap;
}

.sidebar-nav a:hover {
  background: var(--side2);
  color: var(--sideink);
}

.sidebar-nav a.activo {
  background: var(--side3);
  color: #fff;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  font-size: 11.5px;
  color: var(--sidemut);
}

.sidebar-footer #sidebar-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-salir {
  background: none;
  border: none;
  color: var(--sidemut);
  font-size: 12px;
  padding: 0;
  align-self: flex-start;
  cursor: pointer;
}

.btn-salir:hover {
  color: var(--acc);
}

.content-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Els fills directes de content-area són flex items amb min-width:auto per
   defecte -- si un d'ells conté contingut que no embolica (com .tabs),
   pot fer créixer tota la pàgina en amplada. Forcem que respectin sempre
   l'ample del contenidor; qui necessiti desplaçar-se ho fa amb el seu
   propi overflow-x, no expandint els avantpassats. */
.content-header, .content-body { min-width: 0; }

.content-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  flex-wrap: wrap;
}

.content-header h1 {
  font-size: 17px;
  font-weight: 700;
}

.content-header .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mut);
}

.content-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== Formularios (patrón compartido en toda la app) ===== */
form {
  display: flex;
  gap: 8px;
  margin: 0;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

/* ===== Vista dedicada de crear/editar un esdeveniment (overlay a pantalla completa) ===== */
.vista-editor-overlay:not(.oculto) {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--bg);
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vista-editor-capçalera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: -24px;
  margin: -24px -24px 0;
  padding: 16px 24px 12px;
  background: var(--bg);
  z-index: 1;
}

.etiqueta-mode {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--acclink);
}

#titol-editor-evento {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}

.btn-tancar-vista {
  background: transparent;
  border: none;
  color: var(--mut);
  font-size: 20px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.btn-tancar-vista:hover {
  background: var(--hov);
  color: var(--ink);
}

.form-editor-vista {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
}

.bloc-editor {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 16px;
}

.bloc-editor summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  padding: 14px 0;
  list-style: none;
}

.bloc-editor summary::-webkit-details-marker { display: none; }
.bloc-editor summary::before { content: '▸ '; color: var(--acc); }
.bloc-editor[open] summary::before { content: '▾ '; color: var(--acc); }

.bloc-editor-contingut {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 18px;
}

/* Llistes visibles dins el bloc de material (editable la de l'esdeveniment, només lectura la de tasques) */
.llista-material-bloc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  max-height: 220px;
  overflow-y: auto;
}

.fila-material-editable {
  display: grid;
  grid-template-columns: 2fr 1fr 70px 70px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 13px;
  border-bottom: 1px solid var(--hair);
}

.fila-material-editable input[type="number"] {
  padding: 3px 6px;
  width: 60px;
  text-align: center;
}

input, select, textarea {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--gold);
}

textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
}

label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--mut);
}

/* ===== Camp de formulari amb etiqueta sempre visible (encara que l'input ja tingui contingut) ===== */
.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
}

.campo select, .campo input {
  min-height: 34px;
}

.campo-etiqueta {
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.marca-obligatori {
  color: var(--acc);
}

/* Etiqueta de color per persona ("Qui hi va"), color estable calculat a partir del nom */
.persona-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

button {
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--acc);
  color: var(--accink);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  align-self: flex-start;
  font-family: inherit;
}

button:hover {
  background: var(--accdim);
}

.btn-borrar {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--mut);
  font-size: 13px;
  padding: 6px 10px;
}

.btn-borrar:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: transparent;
}

/* Botó amb aparença d'enllaç (acció en JS, no navegació real) */
.btn-enllac {
  background: none;
  border: none;
  padding: 0;
  color: var(--acclink);
  text-decoration: underline;
  font-weight: 500;
  font-size: inherit;
  align-self: auto;
}

.btn-enllac:hover {
  background: none;
  color: var(--ink);
}

.btn-peligro {
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
}

.btn-peligro:hover {
  background: var(--danger);
  filter: brightness(0.92);
}

.filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Capçalera de columnes de la taula d'esdeveniments: mateix grid que les files
   (#lista-eventos .evento-header), amb el filtre de cada columna integrat a la
   pròpia capçalera en lloc d'una barra de filtres separada. */
.evento-header-cols {
  display: grid;
  grid-template-columns: 1.7fr 0.85fr 0.9fr 0.95fr 0.55fr 0.7fr 110px;
  align-items: center;
  justify-items: center;
  gap: 8px;
  padding: 4px 12px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mut);
}

.evento-header-cols > *:first-child {
  justify-self: start;
  text-align: left;
}

.evento-header-cols select {
  width: 100%;
  max-width: 100%;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 4px;
  text-transform: none;
  letter-spacing: normal;
}

.evento-header-cols button {
  padding: 4px 6px;
  font-size: 11px;
  white-space: nowrap;
}

/* ===== Tarjetas de lista (eventos, material, transacciones...) ===== */
.evento-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 8px;
}

.evento-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 12px;
  flex-wrap: wrap;
}

.evento-detalle {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  line-height: 1.7;
  color: var(--mut);
}

.evento-detalle-accions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.evento-detalle-accions button {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-despesa {
  background: var(--danger);
  color: #fff;
}

/* ===== Etiquetas de estado (badges/chips) ===== */
.badge-confirmado, .badge-pagada {
  background: var(--ok);
  color: var(--okink);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-pendiente {
  background: var(--wn);
  color: var(--wnink);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.badge-pagada, .badge-confirmado { cursor: pointer; }

/* ===== Llistat d'Esdeveniments en format dens tipus full de càlcul.
   Nomès afecta #lista-eventos: .evento-card/.evento-header també
   s'utilitzen a Calendari i Socis amb un altre contingut, per això
   no es toquen les regles base, només se sobreescriuen aquí. ===== */
#lista-eventos .evento-card {
  border: none;
  border-left: none;
  border-radius: 0;
  border-bottom: 1px solid var(--hair);
  padding: 0;
  margin-bottom: 0;
}

#lista-eventos .evento-card:nth-child(odd) { background: var(--zebra); }

/* Fila seleccionada amb un sol clic: es manté marcada fins que se'n clica una altra.
   Doble clic obre el detall complet en un modal (#modal-detall-esdeveniment). */
#lista-eventos .evento-card.seleccionada {
  background: var(--gold);
  box-shadow: inset 3px 0 0 var(--acc);
}

#lista-eventos .evento-header {
  display: grid;
  grid-template-columns: 1.7fr 0.85fr 0.9fr 0.95fr 0.55fr 0.7fr 110px;
  align-items: center;
  justify-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 12.5px;
}

#lista-eventos .evento-header > *:first-child {
  justify-self: start;
  text-align: left;
}

#lista-eventos .evento-header button {
  padding: 2px 7px;
  font-size: 11px;
}

#lista-eventos .badge-tipo {
  padding: 2px 7px;
  font-size: 10.5px;
  white-space: nowrap;
}

#lista-eventos .badge-confirmado,
#lista-eventos .badge-pendiente {
  padding: 2px 7px;
  font-size: 10.5px;
}

.badge-cobrat, .badge-no-cobrat {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

.badge-cobrat { background: var(--blue-bg); color: var(--blue); }
.badge-no-cobrat { background: var(--nt); color: var(--ntink); }

.badge-pendent-doc {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--wn);
  color: var(--wnink);
}

/* Documents de facturació vinculats a un esdeveniment: clicables per veure el PDF */
.doc-vinculat-item {
  cursor: pointer;
}

.doc-vinculat-item:hover {
  text-decoration: underline;
}

.badge-tipo {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-tipo-dj { background: var(--violet-bg); color: var(--violet); }
.badge-tipo-tecnico { background: var(--gold); color: var(--goldink); }
.badge-tipo-alquiler { background: var(--blue-bg); color: var(--blue); }
.badge-tipo-sin-tipo { background: var(--nt); color: var(--ntink); }

/* Chip genérico reutilizable (Facturació, Clients, Panell...) */
.chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.chip-ok { background: var(--ok); color: var(--okink); }
.chip-warn { background: var(--wn); color: var(--wnink); }
.chip-acc { background: var(--gold); color: var(--goldink); }
.chip-none { background: var(--nt); color: var(--ntink); }

/* ===== Responsable (Uri / Pol / CCA), consistent a Despeses, Ingressos i Balanç ===== */
.chip-uri { background: var(--violet-bg); color: var(--violet); }
.chip-pol { background: var(--blue-bg); color: var(--blue); }
.chip-cca { background: var(--gold); color: var(--goldink); }

/* ===== Tarjetas de estadística (KPIs, resúmenes de Finances) ===== */
#resumen-finanzas {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 17px;
  flex: 1;
  min-width: 160px;
}

.stat-card p:first-child {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mut);
}

.stat-card .valor {
  font-size: 24px;
  font-weight: 700;
  margin-top: 0;
}

.valor-verde { color: var(--okink); }
.valor-rojo { color: var(--danger); }
.valor-amarillo { color: var(--acclink); }

/* ===== Tarjeta con tabla (Facturas, Clients, Panell...) ===== */
.table-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}

.table-card table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table-card thead tr {
  background: var(--card2);
  text-align: left;
  color: var(--mut);
}

.table-card th {
  padding: 10px 17px;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--hair);
}

.table-card td {
  padding: 9px 17px;
  border-bottom: 1px solid var(--hair);
}

.table-card tbody tr:hover {
  background: var(--hov);
}

/* Pestañas tipo tab (Facturació) */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.tab-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--mut);
}

.tab-btn.activo {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ===== Emmagatzematge del material seleccionat (a nivell d'esdeveniment i de cada tasca) =====
   Aquests contenidors ("checkboxes-material" / "tarea-material") ja no es mostren mai directament:
   són només l'origen de veritat dels inputs .cantidad-material. La UI visible és el botó "Material"
   + els dos modals de sota. */
.lista-material {
  display: none;
}

/* ===== Modal: finestra emergent genèrica (compartida amb calendario.js) ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(22, 24, 29, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

.modal-overlay.visible {
  display: flex;
}

.modal-caja {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 460px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-caja.modal-caja-ampla {
  max-width: 760px;
}

.modal-caja h2 {
  color: var(--ink);
}

.modal-caja p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* ===== Modal selector de material: filtres + taula densa (tipus full de càlcul) ===== */
.filtres-selector-material {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

#taula-selector-material {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  max-height: 50vh;
  overflow-y: auto;
}

.fila-material-modal {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 1fr 2.6fr 60px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--hair);
}

.fila-material-modal:nth-child(even) { background: var(--zebra); }
.fila-material-modal.fila-seleccionada { background: var(--gold); }
.fila-material-modal.oculto { display: none; }

.fila-material-modal .fm-avisos { display: flex; gap: 4px; flex-wrap: wrap; }
.fila-material-modal .fm-qty { width: 54px; padding: 3px 4px; text-align: center; font-size: 12.5px; }

/* ===== Modal detall de material: taula de només lectura + accions (Imprimeix/PDF, Edita) ===== */
.taula-material-cap, .fila-material-detall {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
}

.taula-material-cap {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mut);
  border-bottom: 1px solid var(--line);
}

.fila-material-detall {
  border-bottom: 1px solid var(--hair);
}

.campos-condicionales {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.btn-nuevo-evento { margin: 4px 0 0; }

/* ===== Fila de tasca dins del formulari d'un esdeveniment ===== */
.fila-tarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--card);
  width: 100%;
}

.oculto { display: none; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.toast.mostrar { opacity: 1; }

/* ===== Llistat de Material (taula densa tipus full de càlcul) ===== */
.taula-inventari-cap, .fila-inventari {
  display: grid;
  grid-template-columns: 1.8fr 0.9fr 0.5fr 0.6fr 0.8fr 1.1fr 110px;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.3;
}

.taula-inventari-cap {
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mut);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
}

.fila-inventari {
  border-bottom: 1px solid var(--hair);
}

.fila-inventari:nth-child(even) { background: var(--zebra); }

.fila-inventari button {
  padding: 2px 7px;
  font-size: 11px;
}

.fila-inventari .chip {
  font-size: 10px;
  padding: 1px 7px;
}

/* ===== Formulari de Client dins del modal: el modal-caja ja fa de targeta, el <form> no en necessita una altra ===== */
#form-cliente {
  border: none;
  padding: 0;
  background: transparent;
}

/* ===== Llistat de Clients (taula densa tipus full de càlcul) ===== */
.taula-clients-cap, .fila-client {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.8fr 1.1fr 1.2fr 0.8fr 1.3fr 1.3fr 130px;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.3;
}

.taula-clients-cap {
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mut);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
}

.fila-client {
  border-bottom: 1px solid var(--hair);
}

.fila-client:nth-child(even) { background: var(--zebra); }

.fila-client button {
  padding: 2px 7px;
  font-size: 11px;
}

/* ===== Llistat de Despeses (taula densa tipus full de càlcul) ===== */
.taula-despeses-cap, .fila-despesa {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.9fr 1.2fr 1fr 0.8fr 0.9fr 0.9fr 0.85fr 130px;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.3;
}

.taula-despeses-cap {
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mut);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
}

.fila-despesa { border-bottom: 1px solid var(--hair); }
.fila-despesa:nth-child(even) { background: var(--zebra); }
.fila-despesa button { padding: 2px 7px; font-size: 11px; }
.fila-despesa .chip { font-size: 10px; padding: 1px 7px; }

/* ===== Llistat d'Ingressos (taula densa tipus full de càlcul) ===== */
.taula-ingressos-cap, .fila-ingres {
  display: grid;
  grid-template-columns: 2fr 0.85fr 0.85fr 0.8fr 0.9fr 130px;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.3;
}

.taula-ingressos-cap {
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mut);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
}

.fila-ingres { border-bottom: 1px solid var(--hair); }
.fila-ingres:nth-child(even) { background: var(--zebra); }
.fila-ingres button { padding: 2px 7px; font-size: 11px; }
.fila-ingres .chip { font-size: 10px; padding: 1px 7px; }

/* ===== Deutes entre socis (taula densa tipus full de càlcul) ===== */
.taula-deutes-cap, .fila-deute {
  display: grid;
  grid-template-columns: 0.85fr 1.8fr 0.75fr 0.9fr 1.1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.3;
}

.taula-deutes-cap {
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mut);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
}

.fila-deute { border-bottom: 1px solid var(--hair); }
.fila-deute:nth-child(even) { background: var(--zebra); }

/* ===== Interacció comuna a totes les taules denses (Esdeveniments, Material, Clients, Despeses,
   Ingressos): un sol clic selecciona la fila (es manté marcada fins que se'n clica una altra) i
   doble clic obre el detall complet en un modal -- per això les cel·les de text lliure no han
   d'ocupar mai més d'una línia, el detall sencer és a un doble clic de distància. ===== */
.fila-inventari > span,
.fila-client > span,
.fila-despesa > span,
.fila-ingres > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Excepció: la darrera columna (Accions) sempre porta botons, mai text lliure -- ha de poder
   embolicar-se en diverses línies si cal, no truncar-se. */
.fila-inventari > span:last-child,
.fila-client > span:last-child,
.fila-despesa > span:last-child,
.fila-ingres > span:last-child {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Excepció: columnes que porten un o més "chips" (Estat del material, Compartida d'una despesa,
   Origen d'un ingrés) -- els chips ja controlen el seu propi ample, no cal (ni convé) truncar-los. */
.fila-inventari > span:nth-child(6),
.fila-despesa > span:nth-child(7),
.fila-ingres > span:nth-child(3) {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.fila-inventari,
.fila-client,
.fila-despesa,
.fila-ingres {
  cursor: pointer;
}

.fila-inventari.seleccionada,
.fila-client.seleccionada,
.fila-despesa.seleccionada,
.fila-ingres.seleccionada {
  background: var(--gold);
  box-shadow: inset 3px 0 0 var(--acc);
}

/* ===== Bloc d'incidències dins l'editor de material (mateixa densitat que la taula d'inventari) ===== */
.taula-incidencies-cap, .fila-incidencia {
  display: grid;
  grid-template-columns: 1fr 0.6fr 2fr 1.3fr 150px;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.3;
  border-bottom: 1px solid var(--hair);
}

.taula-incidencies-cap {
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mut);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
}

.fila-incidencia:nth-child(even) { background: var(--zebra); }

.fila-incidencia button {
  padding: 2px 7px;
  font-size: 11px;
}

.btn-resoldre-incidencia {
  background: var(--okink);
  color: var(--ok);
}

.btn-resoldre-incidencia:hover {
  background: var(--okink);
  filter: brightness(1.15);
}

/* ============================================================
   Facturació: Pressupostos/Factures/Ingressos/Despeses/Balanç
   ============================================================ */
.doc-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.fila-irpf {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.fila-irpf input[type="number"] { width: 80px; }
.fila-irpf input[type="text"], .fila-irpf input[type="number"] { background: var(--card); }

/* Calculadora d'import objectiu (Net/Total) del document: separada del resum de totals de
   sota perquè no sembli (com abans) un límit opcional dins del mateix "Net" de lectura. */
.calc-objectiu-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-top: 8px;
}
.calc-objectiu-doc input[type="number"] { width: 110px; background: var(--card); }
.calc-objectiu-doc select { background: var(--card); }
#doc-objectiu-ajuda.ajuda-objectiu-error { color: var(--danger); font-weight: 600; }

/* Un cop hi ha un objectiu net escrit, mana ell: es marca en vermell tant el concepte que
   per si sol el supera com el Net final, si la suma de tots plegats se'l passa. */
.linea-preu.valor-excedit {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}
#doc-total-neto.valor-excedit { color: var(--danger); }

.resum-totals-doc {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  padding: 8px 4px 0;
  flex-wrap: wrap;
}

/* Chip d'origen a Ingressos (Factura / Esdeveniment / Manual) */
.chip-origen-factura { background: var(--gold); color: var(--goldink); }
.chip-origen-esdeveniment { background: var(--violet-bg); color: var(--violet); }
.chip-origen-manual { background: var(--nt); color: var(--ntink); }

/* Balanç: graella de targetes + gràfics */
.balanc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
}

.balanc-grid.balanc-grid-ampla {
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
}

.grafic-caixa {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.grafic-caixa h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ink);
}

/* ===== Subpestanyes del Balanç (General/Uri/Pol/CCA), estil "pestanyes de
   carpeta" tipus navegador: la pestanya activa queda enganxada al
   contingut de sota (mateix color, sense la línia divisòria per sota). ===== */
.subtabs-balanc {
  display: flex;
  gap: 3px;
  margin: 16px 0 0;
  border-bottom: 1px solid var(--line);
  padding-left: 2px;
}

.subtab-balanc-btn {
  background: var(--zebra);
  color: var(--mut);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
}

.subtab-balanc-btn:hover:not(.activo) {
  background: var(--hov);
  color: var(--ink);
}

.subtab-balanc-btn.activo {
  background: var(--card);
  color: var(--ink);
  border-bottom: 1px solid var(--card);
}

.subtab-balanc-contingut {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.grafic-caixa canvas { max-height: 280px; }

.aging-vencuda { color: var(--danger); font-weight: 700; }

/* Botons d'accions del detall d'un pressupost/factura: prou petits i sense
   salt de línia perquè "No confirmat"/"No pagada" càpiguen en una sola línia. */
#accions-detall-document button {
  padding: 6px 6px;
  font-size: 12px;
  white-space: nowrap;
}

/* Llista de conceptes del document (Pressupost/Factura/Abonament), tipus full de càlcul */
.taula-linies-cap, .fila-linia-doc {
  display: grid;
  grid-template-columns: 1.8fr 1.6fr 0.9fr 0.7fr 1fr 34px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12.5px;
}

.fila-linia-doc .linea-subtotal {
  background: var(--hair);
  color: var(--mut);
  font-weight: 600;
}

.taula-linies-cap {
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mut);
  border-bottom: 1px solid var(--line);
}

.fila-linia-doc { border-bottom: 1px solid var(--hair); }
.fila-linia-doc:nth-child(even) { background: var(--zebra); }
.fila-linia-doc input { padding: 5px 8px; font-size: 12.5px; }
.fila-linia-doc .btn-quitar-linea { padding: 3px 7px; font-size: 12px; }

#taula-linies-doc {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* ===== Plantilla imprimible (Pressupostos/Factures): oculta en pantalla,
   visible només dins del diàleg d'impressió via @media print. ===== */
#printable-area { display: none; }

.pdf-page {
  background: #fff;
  color: #2a2a2a;
  font-family: Manrope, system-ui, sans-serif;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  page-break-after: always;
  position: relative;
}

.pdf-banner {
  background: #141414;
  color: #f5ecc8;
  display: flex;
  align-items: center;
  padding: 18px 28px;
}

.pdf-banner-top {
  justify-content: space-between;
  border-radius: 0 0 26px 26px;
}

.pdf-logo { height: 46px; }

.pdf-titol {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #f5ecc8;
  margin: 0;
}

.pdf-banner-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 6px 18px;
  border-radius: 26px 26px 0 0;
  font-size: 11.5px;
}

.pdf-cos { padding: 24px 32px 55px; }
.pdf-cos p { font-size: 13.5px; margin: 2px 0; }
.pdf-etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8a8a8a; margin: 0 0 2px; }
.pdf-valor-gran { font-size: 17px; font-weight: 700; margin: 0; }
.pdf-detall { font-size: 11.5px; color: #8a8a8a; }
.pdf-nota { font-size: 12.5px; color: #555; }

.pdf-factura-cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 18px;
}

.pdf-factura-meta p { text-align: right; }

.pdf-taula-linies {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 12.5px;
  table-layout: fixed;
}

.pdf-taula-linies th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #666;
  border-bottom: 1.5px solid #2a2a2a;
  padding: 6px 8px;
}

/* Totes les columnes numèriques (tot excepte "Concepte") alineades a la
   dreta també a la capçalera, perquè quedin sota el número que titulen. */
.pdf-taula-linies th:not(:first-child) { text-align: right; }

.pdf-taula-linies td {
  border-bottom: 1px solid #ddd;
  padding: 5px 8px;
  overflow-wrap: break-word;
}

/* Evita que una fila (de la taula de conceptes o de la de totals) es talli entre dues
   pàgines quan el document és llarg -- millor que salti sencera a la pàgina següent. */
.pdf-taula-linies tr,
.pdf-taula-totals tr,
.pdf-factura-cap {
  break-inside: avoid;
  page-break-inside: avoid;
}

.pdf-taula-linies th:first-child, .pdf-taula-linies td:first-child { width: 40%; }

.pdf-num { text-align: right; white-space: nowrap; }

.pdf-taula-totals {
  margin: 16px 0 0 auto;
  width: 260px;
  border-collapse: collapse;
  font-size: 13px;
}

.pdf-taula-totals td { padding: 5px 8px; border-bottom: 1px solid #e2e2e2; }
.pdf-taula-totals .pdf-total-final td { font-weight: 800; font-size: 15px; border-bottom: none; border-top: 2px solid #2a2a2a; }

.pdf-condicions-titol { font-size: 15px; font-weight: 800; margin: 22px 0 10px; }

.pdf-condicions-llista {
  font-size: 10.8px;
  line-height: 1.55;
  padding-left: 18px;
  margin: 0;
}

.pdf-condicions-llista li { margin-bottom: 6px; }

@media print {
  body * { visibility: hidden; }
  #printable-area, #printable-area * { visibility: visible; }
  #printable-area {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  @page { size: A4; margin: 0; }
}

/* ============================================================
   Pantalla de bloqueig (Face ID / Touch ID)
   Nomès es mostra quan <html> porta la classe cca-bloquejat, afegida per
   l'script del <head> de cada pàgina (abans de pintar) i treta per nav.js
   en desbloquejar -- vegeu-los per al flux complet.
   ============================================================ */
.pantalla-bloqueig {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: var(--bg);
  align-items: center;
  justify-content: center;
}

html.cca-bloquejat .pantalla-bloqueig { display: flex; }
html.cca-bloquejat .app-shell { display: none !important; }

.pantalla-bloqueig-contingut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  max-width: 320px;
}

.pantalla-bloqueig-marca {
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -.01em;
}

.pantalla-bloqueig-text {
  color: var(--mut);
  font-size: 13.5px;
  margin: 0;
}

.btn-desbloquejar {
  padding: 14px 26px;
  font-size: 15px;
}

.pantalla-bloqueig-error {
  color: var(--danger);
  font-size: 12.5px;
  min-height: 16px;
  margin: 0;
}

/* ============================================================
   Mòbil / pantalles estretes
   ============================================================ */

/* Botó de menú (☰) injectat per nav.js a la capçalera: només es veu per
   sota del breakpoint, quan el sidebar deixa de ser-hi fix a la pantalla. */
.btn-menu-mobil {
  display: none;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  margin-right: 2px;
  order: -1;
}

/* Rerefons fosc darrere el calaix del menú, també injectat per nav.js */
.rerefons-sidebar {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(22, 24, 29, 0.5);
  z-index: 2500;
}

.rerefons-sidebar.visible { display: block; }

/* Contenidors de taules denses que necessiten desplaçament horitzontal a
   mòbil enlloc d'aixafar-se: cadascun porta el propi ample mínim, segons
   el nombre de columnes que té la seva graella. */
.taula-scroll-mobil { display: contents; }

@media (max-width: 860px) {
  .btn-menu-mobil { display: inline-flex; align-items: center; justify-content: center; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3000;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }

  .sidebar.oberta {
    transform: translateX(0);
    box-shadow: 8px 0 24px rgba(0,0,0,.25);
  }

  .content-header { padding: 12px 14px; gap: 10px; }
  .content-body { padding: 14px; gap: 14px; }

  /* Cap fill directe de content-body (flex en columna) no ha d'imposar el
     seu ample de contingut a la pàgina -- qui necessiti desplaçar-se ho fa
     amb el seu propi overflow-x (vegeu .tabs, .subtabs-balanc i les
     taules denses de sota), no fent créixer tota la pantalla. */
  .content-body > * { min-width: 0; }

  form { padding: 12px; }

  /* Els dos grids de 2 columnes del Panell i de Balanç no caben en una
     pantalla de mòbil amb el seu ample mínim de desktop: a partir d'aquí
     s'apilen en una sola columna. */
  .grid-2col-420,
  .balanc-grid,
  .balanc-grid-ampla,
  .balanc-grid.balanc-grid-ampla {
    grid-template-columns: 1fr !important;
  }

  .taula-scroll-mobil {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* L'ample mínim va a les FILLES (les files/capçalera que genera JS dins),
     mai al contenidor amb overflow-x:auto -- si no, seria el contenidor
     mateix qui s'eixamplés i s'endugués la pàgina sencera amb ell. */
  #columnes-eventos, #lista-eventos { min-width: 720px; }
  #taula-material > * { min-width: 660px; }
  #taula-clients > * { min-width: 820px; }
  #taula-ingressos > * { min-width: 600px; }
  #taula-despeses > * { min-width: 860px; }
  #taula-deutes-socis > * { min-width: 540px; }
  #taula-linies-doc > * { min-width: 560px; }
  #taula-selector-material > * { min-width: 560px; }
  #taula-incidencies-material-modal > * { min-width: 560px; }

  #taula-material, #taula-clients, #taula-ingressos, #taula-despeses,
  #taula-deutes-socis, #taula-linies-doc, #taula-selector-material,
  #taula-incidencies-material-modal {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }

  /* Pestanyes (Facturació / Balanç): en lloc d'aixafar-se o fer créixer
     la pàgina, es desplacen elles soles en horitzontal. min-width:0 és
     necessari perquè, sent items flex de content-body, per defecte no es
     deixarien encongir per sota del seu contingut. */
  .tabs, .subtabs-balanc {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }

  .tab-btn, .subtab-balanc-btn { flex: none; }
}