/* ==========================================================================
   CADENTA · panell intern
   Manual de marca: interfície fosca, densa, tècnica. Vores d'1px, radis 8–12px,
   sense ombres dramàtiques ni degradats. És una eina de treball.
   ========================================================================== */

:root {
  /* Paleta de marca */
  --tinta:        #011627;
  --azul-profundo:#032B4D;
  --azul-acento:  #2A7FD1;
  --blanco:       #FFFFFF;
  --gris-pizarra: #8CA3B8;
  --borde:        rgba(137,166,190,0.16);
  --rojo:         #E5484D;
  --verde:        #3FB950;
  --ambar:        #E3B341;

  /* Derivats */
  --superficie:      var(--azul-profundo);
  --superficie-suau: rgba(3,43,77,0.55);
  --hover:           rgba(42,127,209,0.10);
  /* Opac equivalent a --superficie-suau sobre --tinta: el necessiten les
     cel·les enganxades, que no poden ser transparents. */
  --fons-taula:       #022139;
  --fons-taula-hover: #052b48;
  --borde-fort:      rgba(137,166,190,0.30);

  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-s: 8px;
  --r-m: 10px;
  --r-l: 12px;
  --lateral: 236px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }

a { color: var(--azul-acento); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(42,127,209,0.35); }

:focus-visible {
  outline: 2px solid var(--azul-acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Barres de desplaçament discretes */
* { scrollbar-width: thin; scrollbar-color: var(--borde-fort) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borde-fort); border-radius: 8px; border: 3px solid var(--tinta); }
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------- tipografia */

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { text-align: right; }

.etiqueta-seccio {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gris-pizarra);
}

.silenciat { color: var(--gris-pizarra); }
.trunca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------- isotip */

.isotip { display: block; flex: 0 0 auto; }

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
}
.marca__text {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.16em;
}
.marca__sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--gris-pizarra);
  text-transform: uppercase;
}

/* ================================================================== LOGIN == */

.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login__caixa {
  width: 100%;
  max-width: 380px;
}

.login__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
}
.login__marca .marca__text { font-size: 20px; }

.login__targeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: 26px 24px 24px;
}

.login__titol { font-size: 17px; margin-bottom: 6px; }
.login__ajuda { color: var(--gris-pizarra); font-size: 13px; margin-bottom: 20px; }
.login__peu {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
}
.login__legal {
  margin-top: 26px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gris-pizarra);
  letter-spacing: 0.04em;
}

.codi-input {
  font-family: var(--mono) !important;
  font-size: 26px !important;
  letter-spacing: 0.5em;
  text-align: center;
  padding-left: 0.5em !important;
}

/* ================================================================= LAYOUT == */

.app { display: flex; min-height: 100dvh; }

.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
}

.lateral__cap {
  padding: 20px 18px;
  border-bottom: 1px solid var(--borde);
}

.lateral__nav {
  flex: 1;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-s);
  color: var(--gris-pizarra);
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.nav-item:hover { background: var(--hover); color: var(--blanco); text-decoration: none; }
.nav-item[aria-current="page"] {
  background: rgba(42,127,209,0.16);
  border-color: rgba(42,127,209,0.38);
  color: var(--blanco);
}
.nav-item svg { color: currentColor; }

.lateral__peu {
  padding: 14px 16px;
  border-top: 1px solid var(--borde);
}
.usuari__nom { font-size: 13px; font-weight: 600; }
.usuari__email {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gris-pizarra);
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.principal {
  flex: 1;
  min-width: 0;
  height: 100dvh;
  overflow-y: auto;
}

.contingut { padding: 24px 28px 60px; max-width: 1560px; }

/* Barra superior només per a mòbil */
.barra-mobil { display: none; }

/* ------------------------------------------------------------- capçaleres */

.pagina__cap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.pagina__titol { font-size: 21px; }
.pagina__desc { color: var(--gris-pizarra); font-size: 13px; margin-top: 4px; }

/* ------------------------------------------------------------------ botons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 13px;
  border-radius: var(--r-s);
  border: 1px solid var(--borde-fort);
  background: transparent;
  color: var(--blanco);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover:not(:disabled) { background: var(--hover); border-color: var(--azul-acento); }
.btn:disabled { opacity: .42; cursor: not-allowed; }

.btn--primari {
  background: var(--azul-acento);
  border-color: var(--azul-acento);
  color: var(--blanco);
  font-weight: 600;
}
.btn--primari:hover:not(:disabled) { background: #3a8fe0; border-color: #3a8fe0; }

.btn--perill { border-color: rgba(229,72,77,0.45); color: var(--rojo); }
.btn--perill:hover:not(:disabled) { background: rgba(229,72,77,0.12); border-color: var(--rojo); }

.btn--fantasma { border-color: transparent; color: var(--gris-pizarra); padding: 6px 8px; }
.btn--fantasma:hover:not(:disabled) { background: var(--hover); color: var(--blanco); border-color: transparent; }

.btn--xs { font-size: 12px; padding: 5px 9px; }
.btn--bloc { width: 100%; }

/* Estat de càrrega: el text s'amaga i apareix un cercle giratori */
.btn.is-carregant { color: transparent !important; pointer-events: none; }
.btn.is-carregant::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: gira .6s linear infinite;
  color: var(--blanco);
}
.btn--primari.is-carregant::after { color: var(--blanco); }
@keyframes gira { to { transform: rotate(360deg); } }

.btn-grup { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.enllac-boto {
  background: none;
  border: 0;
  padding: 0;
  color: var(--azul-acento);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.enllac-boto:hover { text-decoration: underline; }
.enllac-boto:disabled { color: var(--gris-pizarra); cursor: not-allowed; text-decoration: none; }

/* ----------------------------------------------------------------- camps */

.camp { display: block; margin-bottom: 14px; }
.camp__etiqueta {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gris-pizarra);
  margin-bottom: 6px;
}
.camp__ajuda { font-size: 12px; color: var(--gris-pizarra); margin-top: 6px; }

.input, .select, .textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--blanco);
  background: rgba(1,22,39,0.65);
  border: 1px solid var(--borde-fort);
  border-radius: var(--r-s);
  padding: 9px 11px;
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: rgba(140,163,184,0.65); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--azul-acento);
  box-shadow: 0 0 0 3px rgba(42,127,209,0.18);
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: .5; cursor: not-allowed; }
.input--mono { font-family: var(--mono); }

.select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CA3B8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
}
.select option { background: var(--azul-profundo); color: var(--blanco); }

.input--error { border-color: var(--rojo); }
.camp__error { color: var(--rojo); font-size: 12.5px; margin-top: 6px; }

/* Control lliscant de puntuació */
.rang { display: flex; align-items: center; gap: 14px; }
.rang input[type="range"] {
  flex: 1;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(140,163,184,0.25);
  outline: none;
}
.rang input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--azul-acento);
  border: 2px solid var(--blanco);
  cursor: pointer;
}
.rang input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--azul-acento);
  border: 2px solid var(--blanco);
  cursor: pointer;
}
.rang__valor {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  min-width: 42px;
  text-align: right;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}
input[type="checkbox"] { accent-color: var(--azul-acento); width: 15px; height: 15px; cursor: pointer; }
input[type="date"] { color-scheme: dark; }

/* ---------------------------------------------------------------- etiquetes */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.badge--blau  { color: var(--azul-acento); border-color: rgba(42,127,209,0.42); background: rgba(42,127,209,0.12); }
.badge--gris  { color: var(--gris-pizarra); border-color: var(--borde-fort); background: rgba(140,163,184,0.08); }
.badge--ambre { color: var(--ambar); border-color: rgba(227,179,65,0.42); background: rgba(227,179,65,0.12); }
.badge--verd  { color: var(--verde); border-color: rgba(63,185,80,0.42); background: rgba(63,185,80,0.12); }
.badge--roig  { color: var(--rojo); border-color: rgba(229,72,77,0.45); background: rgba(229,72,77,0.14); }

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 230px;
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: var(--r-s);
  border: 1px solid var(--borde);
  background: rgba(1,22,39,0.5);
  color: var(--gris-pizarra);
  max-width: 100%;
}
.pastilla--activa { color: var(--blanco); border-color: rgba(42,127,209,0.45); background: rgba(42,127,209,0.10); }
.pastilla__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pastilles { display: flex; flex-wrap: wrap; gap: 5px; }

.etiqueta-tria {
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--borde-fort);
  background: transparent;
  color: var(--gris-pizarra);
  cursor: pointer;
  font-family: var(--sans);
}
.etiqueta-tria[aria-pressed="true"] {
  background: rgba(42,127,209,0.16);
  border-color: var(--azul-acento);
  color: var(--blanco);
}

.punt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.punt--verd { background: var(--verde); }
.punt--roig { background: var(--rojo); }
.punt--ambre { background: var(--ambar); }
.punt--gris { background: var(--gris-pizarra); }

/* ------------------------------------------------------------------ pestanyes */

.pestanyes {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanyes::-webkit-scrollbar { display: none; }

.pestanya {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--gris-pizarra);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
}
.pestanya:hover { color: var(--blanco); }
.pestanya[aria-selected="true"] { color: var(--blanco); border-bottom-color: var(--azul-acento); }
.pestanya__comptador {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(140,163,184,0.14);
  color: var(--gris-pizarra);
}
.pestanya[aria-selected="true"] .pestanya__comptador { background: rgba(42,127,209,0.22); color: var(--azul-acento); }

/* -------------------------------------------------------------------- filtres */

.filtres {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.filtres__cerca { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 340px; }
.filtres__cerca .input { padding-left: 34px; }
.filtres__lupa {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--gris-pizarra);
  pointer-events: none;
}
.filtres .select { width: auto; min-width: 150px; }
.filtres__dreta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.filtres__tecla {
  font-family: var(--mono);
  font-size: 10px;
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--gris-pizarra);
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ------------------------------------------------------------------- taules */

.taula-caixa {
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  background: var(--superficie-suau);
  overflow: auto;
  max-height: calc(100dvh - 260px);
}

.taula { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

.taula thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--azul-profundo);
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-pizarra);
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.taula thead th.num { text-align: right; }

.taula tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}
.taula tbody tr:last-child td { border-bottom: 0; }
.taula tbody tr:hover { background: var(--hover); }
.taula tbody tr.is-clicable { cursor: pointer; }
.taula tbody tr.is-ocupada { opacity: .5; pointer-events: none; }
.taula tbody tr.is-seleccionada { background: rgba(42,127,209,0.12); }

.taula td.num, .taula td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.taula td.num { text-align: right; }
.taula td.accions { text-align: right; white-space: nowrap; }

/* La columna d'accions queda enganxada a la dreta: en taules amples, els
   botons de la fila sempre són a l'abast sense desplaçar-se. */
.taula td.accions, .taula th.accions-cap {
  position: sticky;
  right: 0;
  background: var(--fons-taula);
  border-left: 1px solid var(--borde);
}
.taula th.accions-cap { z-index: 3; }
.taula td.accions { z-index: 1; }
.taula tbody tr:hover td.accions { background: var(--fons-taula-hover); }
.taula .cel-nom { font-weight: 500; }
.taula .cel-estreta { width: 1%; white-space: nowrap; }
.taula .cel-contactes { max-width: 260px; }
.taula .cel-nom { min-width: 130px; }

.taula__peu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 18px 0 4px;
}
.taula__total {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--gris-pizarra);
  padding: 10px 2px 0;
}

.barra-seleccio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(42,127,209,0.4);
  background: rgba(42,127,209,0.12);
  border-radius: var(--r-m);
  font-size: 13px;
}

/* --------------------------------------------------------- esquelets i buits */

.esquelet {
  display: block;
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(140,163,184,0.10) 25%, rgba(140,163,184,0.20) 37%, rgba(140,163,184,0.10) 63%);
  background-size: 400% 100%;
  animation: onada 1.3s ease infinite;
}
@keyframes onada { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.esquelet--curt { width: 45%; }
.esquelet--mig  { width: 70%; }

.buit {
  text-align: center;
  padding: 54px 24px;
  color: var(--gris-pizarra);
}
.buit__titol { font-size: 15px; color: var(--blanco); margin-bottom: 6px; }
.buit__text { font-size: 13px; max-width: 420px; margin: 0 auto 16px; }
.buit__icona { color: var(--borde-fort); margin-bottom: 14px; }

.error-caixa {
  border: 1px solid rgba(229,72,77,0.45);
  background: rgba(229,72,77,0.10);
  border-radius: var(--r-m);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.error-caixa__text { flex: 1; min-width: 200px; font-size: 13px; }
.error-caixa__titol { font-weight: 600; margin-bottom: 3px; }

.avis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--r-m);
  padding: 11px 14px;
  font-size: 13px;
  margin-bottom: 18px;
  border: 1px solid;
}
.avis--ambre { border-color: rgba(227,179,65,0.42); background: rgba(227,179,65,0.10); color: var(--ambar); }
.avis--roig  { border-color: rgba(229,72,77,0.45); background: rgba(229,72,77,0.10); color: var(--rojo); }
.avis--blau  { border-color: rgba(42,127,209,0.4); background: rgba(42,127,209,0.10); color: var(--azul-acento); }
.avis strong { color: var(--blanco); }

/* --------------------------------------------------------------- targetes */

.graella-xifres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.xifra {
  border: 1px solid var(--borde);
  background: var(--superficie);
  border-radius: var(--r-l);
  padding: 15px 17px;
}
.xifra__etiqueta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-pizarra);
  margin-bottom: 8px;
}
.xifra__valor { font-family: var(--mono); font-size: 25px; font-weight: 600; line-height: 1.1; }
.xifra__peu { font-size: 12px; color: var(--gris-pizarra); margin-top: 5px; }

.targeta {
  border: 1px solid var(--borde);
  background: var(--superficie);
  border-radius: var(--r-l);
  padding: 16px 18px;
}
.targeta__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.targeta__titol { font-size: 14px; font-weight: 600; }

.graella-serveis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.servei__nom { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.servei__meta { font-family: var(--mono); font-size: 11px; color: var(--gris-pizarra); margin-top: 8px; }

/* ---------------------------------------------------------- modals i panells */

.rerefons {
  position: fixed;
  inset: 0;
  background: rgba(1,10,18,0.72);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: apareix .12s ease;
}
@keyframes apareix { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--azul-profundo);
  border: 1px solid var(--borde-fort);
  border-radius: var(--r-l);
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
}
.modal--ample { max-width: 720px; }

.modal__cap, .panell__cap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--borde);
}
.modal__titol { font-size: 16px; }
.modal__subtitol { font-size: 12.5px; color: var(--gris-pizarra); margin-top: 3px; }
.modal__cos, .panell__cos { padding: 20px; overflow-y: auto; flex: 1; }
.modal__peu, .panell__peu {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 15px 20px;
  border-top: 1px solid var(--borde);
  flex-wrap: wrap;
}

.tanca {
  background: none;
  border: 0;
  color: var(--gris-pizarra);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  line-height: 0;
  flex: 0 0 auto;
}
.tanca:hover { color: var(--blanco); background: var(--hover); }

.panell-rerefons { justify-content: flex-end; padding: 0; }
.panell {
  background: var(--azul-profundo);
  border-left: 1px solid var(--borde-fort);
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  animation: entra .16s ease;
}
@keyframes entra { from { transform: translateX(22px); opacity: .4; } to { transform: none; opacity: 1; } }

/* Llistes de dades dins de fitxes i panells */
.dades { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 9px 16px; font-size: 13px; }
.dades dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris-pizarra);
  padding-top: 1px;
}
.dades dd { margin: 0; overflow-wrap: anywhere; }

.bloc { margin-bottom: 22px; }
.bloc__titol {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gris-pizarra);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--borde);
}

/* Historial cronològic invers */
.historial { display: flex; flex-direction: column; gap: 0; }
.fita { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.fita:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px; top: 14px; bottom: 0;
  width: 1px;
  background: var(--borde);
}
.fita__punt {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  margin-top: 3px;
  flex: 0 0 auto;
  z-index: 1;
}
.fita__cos { flex: 1; min-width: 0; }
.fita__titol { font-size: 13px; font-weight: 500; }
.fita__data { font-family: var(--mono); font-size: 11px; color: var(--gris-pizarra); }
.fita__detall { font-size: 12.5px; color: var(--gris-pizarra); margin-top: 4px; overflow-wrap: anywhere; }

.esborrany {
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: rgba(1,22,39,0.55);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 46vh;
  overflow-y: auto;
}

/* ------------------------------------------------------------------- avisos */

.toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: min(380px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--azul-profundo);
  border: 1px solid var(--borde-fort);
  border-left: 3px solid var(--azul-acento);
  border-radius: var(--r-m);
  padding: 11px 14px;
  font-size: 13px;
  cursor: pointer;
  animation: puja .16s ease;
}
@keyframes puja { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast--ok { border-left-color: var(--verde); }
.toast--error { border-left-color: var(--rojo); }
.toast--avis { border-left-color: var(--ambar); }

/* =============================================================== RESPONSIVE */

@media (max-width: 900px) {
  .lateral {
    position: fixed;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 0 0 0 100vmax rgba(1,10,18,0);
  }
  .lateral.is-oberta { transform: none; box-shadow: 0 0 0 100vmax rgba(1,10,18,0.6); }

  .barra-mobil {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borde);
    background: var(--superficie);
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .principal { height: auto; overflow: visible; }
  .contingut { padding: 18px 16px 48px; }

  .taula-caixa {
    border: 0;
    background: none;
    overflow: visible;
    max-height: none;
    border-radius: 0;
  }
  .taula thead { display: none; }
  .taula, .taula tbody, .taula tr, .taula td { display: block; width: 100%; }
  .taula tr {
    border: 1px solid var(--borde);
    border-radius: var(--r-m);
    background: var(--superficie);
    padding: 6px 14px;
    margin-bottom: 10px;
  }
  .taula tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--borde);
    text-align: left;
  }
  .taula tbody tr td:last-child { border-bottom: 0; }
  .taula td.num, .taula td.accions { text-align: left; }
  .taula td.accions { position: static; background: none; border-left: 0; }
  .taula td::before {
    content: attr(data-etiqueta);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gris-pizarra);
    flex: 0 0 auto;
  }
  .taula td.sense-etiqueta::before { content: none; }
  /* Els continguts de la cel·la han de poder encongir dins de la targeta */
  .taula td > * { min-width: 0; max-width: 100%; }
  .taula td .pastilles, .taula td .btn-grup { justify-content: flex-end; }
  .taula .cel-contactes { max-width: none; }
  .taula .cel-estreta { width: auto; }

  .panell { max-width: 100%; }
  .filtres__dreta { margin-left: 0; width: 100%; }
  .filtres__cerca { max-width: none; }
  .toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Data de propera acció ja vençuda */
.input--vencuda { border-color: rgba(227,179,65,0.65); color: var(--ambar); }
.camp__ajuda.vencuda { color: var(--ambar); }

/* Àrea auxiliar per a la còpia de reserva: fora de vista però seleccionable */
.fora-vista {
  position: fixed;
  top: -1000px;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Controls dins de les taules: prou amples per llegir-ne el contingut */
.taula td .select { min-width: 132px; }
.taula td .input { min-width: 150px; }
.taula td .input[type="date"] { min-width: 138px; }