/* ============================================================
   WaystoSecure — full d'estil
   Editorial-tech, blancs purs, accents de color forts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* --- TEMA CLAR (per defecte) — blanc pur, grisos freds, RES de beix --- */
:root, [data-tema="clar"] {
  --fons:           #FFFFFF;
  --fons-alt:       #F4F6FB;
  --fons-capcalera: #FFFFFF;
  --fons-targeta:   #FFFFFF;
  --fons-marca:     #F4F6FB;
  --fons-grid:      rgba(13,27,46,0.04);

  --text:           #0A1020;
  --text-fort:      #000010;
  --text-suau:      #5A6B82;
  --text-mut:       #8895A8;

  --cta:            #0E3A6B;
  --cta-text:       #FFFFFF;
  --vora:           rgba(13,27,46,0.10);
  --vora-fosca:     rgba(13,27,46,0.18);

  --rosa:    #E84C8A;
  --blau:    #1668B0;
  --cian:    #19B0C4;
  --groc:    #F5C518;
  --blau-fosc: #0E3A6B;
}

/* --- TEMA FOSC --- */
[data-tema="fosc"] {
  --fons:           #050A14;
  --fons-alt:       #0A1224;
  --fons-capcalera: #050A14;
  --fons-targeta:   #0D1626;
  --fons-marca:     #0A1224;
  --fons-grid:      rgba(255,255,255,0.04);

  --text:           #F0F2F7;
  --text-fort:      #FFFFFF;
  --text-suau:      #8A97AA;
  --text-mut:       #5A6B82;

  --cta:            #E84C8A;
  --cta-text:       #FFFFFF;
  --vora:           rgba(255,255,255,0.10);
  --vora-fosca:     rgba(255,255,255,0.20);
}

/* --- BASE --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fons);
  color: var(--text);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s, color 0.25s;
  overflow-x: hidden;
}
.contenidor { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.centrat { text-align: center; }

/* --- TIPOGRAFIA --- */
h1 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
  color: var(--text-fort);
}
h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 36px;
  color: var(--text-fort);
  line-height: 1.15;
}
h3 { font-family: 'Manrope', sans-serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; color: var(--text-fort); }
h4 { font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--text-fort); }
p  { color: var(--text-suau); }

/* Estil mono — usat per a etiquetes tipus consola */
.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "ss01" on;
  letter-spacing: 0.02em;
}

/* --- CAPÇALERA --- */
.capcalera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  background: var(--fons-capcalera);
  border-bottom: 1px solid var(--vora);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text-fort); }
/* Canvi 11: el logo nou té molt detall (cercle multicolor + guions) i a 38px
   quedava massa pesat al costat del text. El baixem a 30 px d'alçada i
   donem una mica més de cos a la tipografia del costat perquè la marca
   queda visualment equilibrada. */
.marca-icona {
  display: block;
  width: 30px; height: 30px;
  object-fit: contain;
}
.marca span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.navegacio { display: flex; align-items: center; gap: 26px; }
.navegacio a {
  text-decoration: none;
  color: var(--text-suau);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  transition: color 0.15s;
  padding: 4px 0;
}
.navegacio a:hover { color: var(--text-fort); }
.navegacio a.actiu { color: var(--text-fort); font-weight: 700; }
.navegacio a.actiu::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--rosa), var(--blau), var(--cian));
}
.boto-tema {
  background: var(--fons);
  border: 1px solid var(--vora);
  color: var(--text);
  width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; font-size: 0.95rem;
  transition: border-color 0.15s, transform 0.15s;
}
.boto-tema:hover { border-color: var(--cian); transform: rotate(180deg); }

/* --- BOTONS --- */
.boto-cta {
  background: var(--cta);
  color: var(--cta-text) !important;
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 18px rgba(14,58,107,0.18), 0 0 0 0 var(--cta);
  position: relative;
  border: none;
  cursor: pointer;
}
/* Canvi 11: la fletxa només apareix als botons d'acció (no a Portal).
   En lloc d'aplicar content:none en una regla posterior — que podia
   quedar tapada per problemes d'especificitat o caché — fem que la
   regla original ja exclogui els botons marcats com a "sense-fletxa".
   Així no hi ha cap ::after generat en aquests botons. */
.boto-cta:not(.sense-fletxa)::after {
  content: '→'; transition: transform 0.2s;
}
.boto-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,58,107,0.28); }
.boto-cta:not(.sense-fletxa):hover::after { transform: translateX(4px); }

/* Variant del boto-cta sense fletxa, usada al botó "Portal" del menú.
   No té cap regla ::after — la fletxa no es genera mai per a aquesta variant. */
.boto-cta.sense-fletxa { gap: 0; }

.boto-secundari {
  background: transparent;
  color: var(--text-fort) !important;
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  border: 1.5px solid var(--vora-fosca);
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.boto-secundari:hover { border-color: var(--cian); transform: translateY(-2px); }

/* --- HERO --- */
.hero {
  position: relative;
  padding: 96px 0 96px;
  overflow: hidden;
  border-bottom: 1px solid var(--vora);
}
/* Patró de punts subtil al fons */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--fons-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
}
.hero-graella {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
.hero-visual {
  position: relative;
  height: 380px;
  display: flex; align-items: center; justify-content: center;
}
.hero-visual svg.gran {
  width: 100%; height: 100%;
  animation: gir-lent 60s linear infinite;
}
/* Canvi 2: en tema clar, cercles a plena intensitat (com la resta del disseny).
   En tema fosc, mantenim el degradat suau d'opacitats que ja anava perfecte. */
.hero-visual svg.gran circle { opacity: 1; }
[data-tema="fosc"] .hero-visual svg.gran circle:nth-child(1) { opacity: 0.4; }
[data-tema="fosc"] .hero-visual svg.gran circle:nth-child(2) { opacity: 0.7; }
[data-tema="fosc"] .hero-visual svg.gran circle:nth-child(3) { opacity: 0.6; }
[data-tema="fosc"] .hero-visual svg.gran circle:nth-child(4) { opacity: 0.5; }
[data-tema="fosc"] .hero-visual svg.gran circle:nth-child(5) { opacity: 0.3; }
.hero-visual .badge-flotant {
  position: absolute;
  background: var(--fons-targeta);
  border: 1px solid var(--vora);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(13,27,46,0.08);
  display: flex; align-items: center; gap: 8px;
  animation: surar 6s ease-in-out infinite;
}
.hero-visual .badge-flotant .punt {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.hero-visual .b-rosa  { top: 20px;    left: -10px; color: var(--rosa); }
.hero-visual .b-rosa  .punt { background: var(--rosa); }
.hero-visual .b-cian  { top: 50%;     right: -20px; color: var(--cian); animation-delay: -2s; }
.hero-visual .b-cian  .punt { background: var(--cian); }
.hero-visual .b-groc  { bottom: 30px; left: 30px;   color: #B07B00; animation-delay: -4s; }
[data-tema="fosc"] .hero-visual .b-groc { color: var(--groc); }

/* --- SECCIÓ IMATGE (sobre nosaltres) ---
   Canvi 11: la imatge funciona com a banner d'introducció.
   Edge-to-edge (sense padding lateral), alçada reduïda, sense
   cantonades arrodonides ni vora — així queda com una franja
   horitzontal a la part de dalt de la pàgina. */
.seccio-imatge {
  padding: 0;
}
.imatge-aeria {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.imatge-aeria img {
  display: block;
  width: 100%;
  height: clamp(160px, 22vw, 280px);
  object-fit: cover;
  object-position: center 38%; /* mostra millor la franja Eixample + horitzó */
  border-radius: 0;
  border: none;
  box-shadow: 0 12px 30px rgba(13,27,46,0.10);
}
/* La llegenda decorativa s'ha retirat del banner per deixar-lo net.
   El CSS es conserva per si la volem recuperar més endavant en una
   altra ubicació. */
.imatge-llegenda {
  display: none;
}
.hero-visual .b-groc  .punt { background: var(--groc); }
@keyframes surar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes gir-lent { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Kicker prominent — substitueix la vella etiqueta petita */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-fort);
  text-transform: uppercase;
}
.kicker .corxet { color: var(--rosa); font-weight: 700; font-size: 1.1rem; }
.kicker .corxet.dret { color: var(--cian); }
.kicker .punt-sep { color: var(--text-mut); }

/* Subratllat decoratiu sota l'H1 */
.subratllat-marca {
  display: flex;
  gap: 6px;
  margin: -8px 0 26px;
  align-items: center;
}
.subratllat-marca span {
  height: 5px;
  border-radius: 3px;
  display: block;
}
.subratllat-marca .l1 { width: 68px; background: var(--rosa); box-shadow: 0 0 12px rgba(232,76,138,0.45); }
.subratllat-marca .l2 { width: 32px; background: var(--blau); }
.subratllat-marca .l3 { width: 18px; background: var(--cian); box-shadow: 0 0 10px rgba(25,176,196,0.5); }
.subratllat-marca .l4 { width: 10px; background: var(--groc); }

.hero .intro {
  max-width: 560px;
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 32px;
  color: var(--text-suau);
}
.botons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* --- SECCIONS GENERAL --- */
.seccio { padding: 96px 0; position: relative; }
.seccio-alterna {
  background: var(--fons-alt);
  border-top: 1px solid var(--vora);
  border-bottom: 1px solid var(--vora);
}
.seccio-cta {
  background: var(--fons);
  position: relative;
  overflow: hidden;
}

/* Etiqueta de secció: 01 — ÀREES, etc */
.etiqueta-seccio {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mut);
}
.etiqueta-seccio .num { color: var(--rosa); font-weight: 700; }
.etiqueta-seccio .linia {
  height: 1px; width: 50px;
  background: var(--vora-fosca);
}
.seccio-titol { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.seccio-titol h2 { margin-bottom: 14px; }
.seccio-titol p { font-size: 1.02rem; max-width: 580px; margin: 0 auto; }

/* --- TARGETES D'ÀREES --- */
.graella-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.targeta {
  background: var(--fons-targeta);
  border: 1px solid var(--vora);
  border-radius: 16px;
  padding: 32px 28px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  position: relative;
  overflow: hidden;
}
/* Corxets decoratius als angles */
.targeta::before, .targeta::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid transparent;
  transition: border-color 0.25s;
  pointer-events: none;
}
.targeta::before {
  top: 12px; left: 12px;
  border-top-color: var(--vora-fosca);
  border-left-color: var(--vora-fosca);
  border-top-left-radius: 4px;
}
.targeta::after {
  bottom: 12px; right: 12px;
  border-bottom-color: var(--vora-fosca);
  border-right-color: var(--vora-fosca);
  border-bottom-right-radius: 4px;
}
.targeta:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,46,0.08);
  border-color: var(--vora-fosca);
}
.targeta:nth-child(1):hover::before { border-color: var(--rosa); }
.targeta:nth-child(1):hover::after  { border-color: var(--rosa); }
.targeta:nth-child(2):hover::before { border-color: var(--blau); }
.targeta:nth-child(2):hover::after  { border-color: var(--blau); }
.targeta:nth-child(3):hover::before { border-color: var(--cian); }
.targeta:nth-child(3):hover::after  { border-color: var(--cian); }
.targeta h3 { margin-bottom: 12px; }
.targeta p { font-size: 0.95rem; margin-bottom: 18px; }
.targeta .enllac {
  color: var(--text-fort);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.targeta:nth-child(1) .enllac:hover { border-bottom-color: var(--rosa); }
.targeta:nth-child(2) .enllac:hover { border-bottom-color: var(--blau); }
.targeta:nth-child(3) .enllac:hover { border-bottom-color: var(--cian); }

/* Icones de servei amb fons de color suau */
.icona-servei {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  position: relative;
}
.targeta:nth-child(1) .icona-servei { background: rgba(232,76,138,0.10); }
.targeta:nth-child(2) .icona-servei { background: rgba(22,104,176,0.10); }
.targeta:nth-child(3) .icona-servei { background: rgba(25,176,196,0.12); }
.targeta:nth-child(1) .icona-servei svg { stroke: var(--rosa); }
.targeta:nth-child(2) .icona-servei svg { stroke: var(--blau); }
.targeta:nth-child(3) .icona-servei svg { stroke: var(--cian); }
.icona-servei svg { width: 26px; height: 26px; fill: none; stroke-width: 1.8; }

/* --- "PER QUÈ" GRID — sempre 2x2 (mai 3+1) --- */
.graella-perque {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
}
.punt-perque {
  background: var(--fons-targeta);
  border: 1px solid var(--vora);
  border-radius: 14px;
  padding: 28px 24px;
  /* Canvi 28: centrat directe sense !important. La solució real és
     embolcallar la secció amb <div class="bloc-area"> que ja centra
     el text per herència. */
  text-align: center;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.punt-perque:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(13,27,46,0.07); }
.punt-perque .num-perque {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
  /* Canvi 26: centrem el flex (era display: flex sense justify-content,
     que deixava la marca-color + número alineats a l'esquerra). */
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.punt-perque .num-perque .marca-color {
  display: inline-block;
  width: 24px; height: 4px; border-radius: 2px;
}
.punt-perque:nth-child(1) .marca-color { background: var(--rosa); box-shadow: 0 0 8px rgba(232,76,138,0.4); }
.punt-perque:nth-child(2) .marca-color { background: var(--blau); }
.punt-perque:nth-child(3) .marca-color { background: var(--cian); box-shadow: 0 0 8px rgba(25,176,196,0.4); }
.punt-perque:nth-child(4) .marca-color { background: var(--groc); }
.punt-perque h4 { margin-bottom: 8px; font-size: 1.05rem; }
.punt-perque p { font-size: 0.92rem; line-height: 1.6; }

/* --- SECCIÓ CTA / PROCÉS --- */
.seccio-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--fons-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}
.seccio-cta .contenidor { position: relative; }
.passos-acollit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 48px auto 40px;
  max-width: 1000px;
}
.pas {
  background: var(--fons-targeta);
  border: 1px solid var(--vora);
  border-radius: 16px;
  padding: 32px 26px;
  /* Canvi 28: centrat directe sense !important (vegeu .punt-perque). */
  text-align: center;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
  overflow: hidden;
}
.pas::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 4px;
}
.pas:nth-child(1)::before { background: linear-gradient(90deg, var(--rosa), transparent); }
.pas:nth-child(2)::before { background: linear-gradient(90deg, var(--cian), transparent); }
.pas:nth-child(3)::before { background: linear-gradient(90deg, var(--groc), transparent); }
.pas:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(13,27,46,0.08); }
.pas-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: -0.04em;
}
.pas:nth-child(1) .pas-num { color: var(--rosa); }
.pas:nth-child(2) .pas-num { color: var(--cian); }
.pas:nth-child(3) .pas-num { color: #B07B00; }
[data-tema="fosc"] .pas:nth-child(3) .pas-num { color: var(--groc); }
.pas-etiqueta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-bottom: 8px;
  display: block;
}
.pas h4 { font-size: 1.1rem; margin-bottom: 10px; }
.pas p { font-size: 0.92rem; }

/* --- LÍNIA DE COLORS ESTÀTICA AMB DEGRADAT (separador superior) --- */
.linia-colors {
  display: block; height: 4px; width: 100%;
  background: linear-gradient(90deg,
    var(--rosa) 0%,
    var(--blau) 38%,
    var(--cian) 68%,
    var(--groc) 100%);
}
.linia-colors span { display: none; }

/* --- PEU --- */
.peu {
  background: var(--fons-alt);
  border-top: 1px solid var(--vora);
  padding: 56px 32px 28px;
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
}
.peu-marca { max-width: 280px; }
.peu-marca strong {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 10px;
  color: var(--text-fort);
}
.peu-marca p { font-size: 0.85rem; }
.peu-columnes { display: flex; gap: 56px; flex-wrap: wrap; }
.peu-columnes h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-mut);
  font-weight: 600; margin-bottom: 12px;
}
.peu-columnes a {
  display: block;
  color: var(--text-suau);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 2;
  transition: color 0.15s;
}
.peu-columnes a:hover { color: var(--text-fort); }
.peu-final {
  width: 100%; border-top: 1px solid var(--vora);
  padding-top: 18px; margin-top: 16px;
  font-size: 0.78rem; color: var(--text-mut);
  font-family: 'JetBrains Mono', monospace;
}

/* --- RESPONSIU --- */
@media (max-width: 880px) {
  .hero-graella { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { height: 280px; order: -1; }
  .passos-acollit { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .seccio { padding: 64px 0; }
  .hero { padding: 56px 0 64px; }
  .contenidor { padding: 0 20px; }
  .capcalera { flex-direction: column; gap: 14px; padding: 14px 18px; }
  .navegacio { flex-wrap: wrap; justify-content: center; gap: 12px 18px; font-size: 0.85rem; }
  .botons { justify-content: flex-start; }
  .formulari, .avis { max-width: 100%; }
  .pas-num { font-size: 1.9rem; }
}

/* --- PÀGINES D'ÀREA --- */
.graella-serveis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}
.servei {
  background: var(--fons-targeta);
  border: 1px solid var(--vora);
  border-radius: 14px;
  padding: 28px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.servei:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(13,27,46,0.07); border-color: var(--vora-fosca); }
.servei h3 { margin-bottom: 10px; }
.servei .enllac {
  color: var(--text-fort);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  border-bottom: 2px solid var(--cian);
  padding-bottom: 2px;
}

/* --- FORMULARI --- */
.formulari { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.formulari label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 0.85rem; font-weight: 600; color: var(--text-fort);
}
.formulari input, .formulari select, .formulari textarea {
  font: inherit; font-family: 'Manrope', sans-serif;
  padding: 12px 14px;
  border: 1.5px solid var(--vora);
  border-radius: 10px;
  background: var(--fons);
  color: var(--text);
  transition: border-color 0.15s;
}
.formulari input:focus, .formulari select:focus, .formulari textarea:focus {
  outline: none; border-color: var(--cian);
}
.formulari .consentiment { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--text-suau); }
.formulari .consentiment input { width: auto; margin-top: 3px; }
.formulari .nota { font-size: 0.8rem; color: var(--text-suau); }

/* --- AVISOS --- */
.avis { max-width: 600px; margin: 0 auto; border-radius: 14px; padding: 24px; border: 1px solid var(--vora); background: var(--fons-targeta); }
.avis-ok { border-left: 4px solid var(--cian); }
.avis-error { border-left: 4px solid var(--rosa); margin-bottom: 22px; }
.avis h2, .avis h3 { margin-bottom: 8px; }

/* --- BANNER COOKIES --- */
/* Canvi 8: si l'usuari ja ha decidit, l'amaguem ABANS de pintar (via atribut a <html>)
   per evitar el "flash" del banner aparèixer i desaparèixer cada cop. */
html[data-cookies="decidit"] .banner-cookies { display: none !important; }

.banner-cookies {
  position: fixed; bottom: 20px; left: 20px; right: 20px;
  max-width: 760px; margin: 0 auto;
  z-index: 999;
  background: var(--fons-targeta);
  border: 1px solid var(--vora-fosca);
  border-radius: 16px;
  padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  box-shadow: 0 16px 48px rgba(13,27,46,0.18);
  transform: translateY(0); transition: transform 0.35s ease, opacity 0.35s;
}
.banner-cookies::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px;
  height: 3px;
  background: linear-gradient(90deg, var(--rosa), var(--blau), var(--cian), var(--groc));
  border-radius: 0 0 3px 3px;
}
.banner-cookies.amagat { transform: translateY(160%); opacity: 0; pointer-events: none; }
.banner-cookies .contingut-cookies { flex: 1; min-width: 240px; }
.banner-cookies h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--text-fort);
  display: flex; align-items: center; gap: 8px;
}
.banner-cookies h5::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cian); box-shadow: 0 0 8px var(--cian);
}
.banner-cookies p { font-size: 0.88rem; line-height: 1.55; }
.banner-cookies p a { color: var(--text-fort); text-decoration: underline; font-weight: 600; }
.banner-cookies-botons { display: flex; gap: 10px; flex-shrink: 0; }
.banner-cookies-botons .boto-rebutjar {
  background: transparent;
  color: var(--text-suau);
  font: inherit; font-family: 'Manrope', sans-serif;
  font-size: 0.88rem; font-weight: 600;
  border: 1.5px solid var(--vora);
  border-radius: 8px; padding: 10px 18px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.banner-cookies-botons .boto-rebutjar:hover { border-color: var(--text-suau); color: var(--text-fort); }
.banner-cookies-botons .boto-acceptar {
  background: var(--cta);
  color: white;
  font: inherit; font-family: 'Manrope', sans-serif;
  font-size: 0.88rem; font-weight: 700;
  border: none;
  border-radius: 8px; padding: 10px 22px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(14,58,107,0.2);
}
.banner-cookies-botons .boto-acceptar:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,58,107,0.3); }

@media (max-width: 600px) {
  .banner-cookies { left: 12px; right: 12px; bottom: 12px; padding: 18px 20px; }
  .banner-cookies-botons { width: 100%; }
  .banner-cookies-botons button { flex: 1; }
}

/* --- ACCESSIBILITAT: respectar prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
 *  Canvi 4 — "El meu espai" del client
 *
 *  Estils per a la pantalla d'inici del rol client i la pàgina
 *  de placeholder dels aplicatius. Tot ben aïllat amb prefixos
 *  propis (`.espai-`, `.aplicatiu-`, `.dades-`, `.estat-buit`)
 *  per no col·lidir amb cap classe del web públic.
 *
 *  Les targetes són la peça forta: color de fons sòlid segons
 *  tipus d'aplicatiu, emoji visible, tipografia clara. La paleta
 *  s'inspira en els colors de marca però amb saturació suficient
 *  per donar contrast amb text blanc.
 * ============================================================ */

/* Capçalera de pantalla del client (no Hero del web públic). */
.espai-capcalera {
  padding: 64px 0 32px;
  background: var(--fons-alt);
}
.espai-capcalera h1 {
  margin: 12px 0 0;
}
.espai-capcalera .etiqueta {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-suau);
  background: var(--fons-targeta);
  border-radius: 999px;
  border: 1px solid var(--fons-grid);
}
.espai-capcalera .intro {
  margin-top: 16px;
  max-width: 640px;
  color: var(--text-suau);
}

/* Títols dins el contingut del PORTAL intern.
   Canvi 29: renombrat de `.seccio-titol` a `.titol-portal` perquè
   col·lidia amb el `.seccio-titol` de la web pública (línia 373).
   La regla del portal venia després al CSS, així que sobreescrivia
   el `margin: 0 auto 56px` per `margin: 0 0 24px` (sense `auto`!)
   i feia que els títols de la web pública perdessin el centrat
   horitzontal. Diagnòstic del propi usuari via DevTools. */
.titol-portal {
  font-family: 'Manrope', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-fort);
  margin: 0 0 24px;
}
.titol-portal-petit {
  font-size: 1.2rem;
  margin-bottom: 16px;
}

/* ===== Grid d'aplicatius ===== */

/* Canvi 18: contenidor d'un grup d'aplicatius (categoria). Espaiat
   entre grups perquè es vegin separats visualment, però sense
   border ni fons per no afegir soroll. */
.grup-aplicatius {
  margin-bottom: 2.5rem;
}
.grup-aplicatius:last-child {
  margin-bottom: 0;
}
.grup-aplicatius-titol {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gris-fosc, #4a5568);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vora, #e5e7eb);
}
[data-tema="fosc"] .grup-aplicatius-titol {
  color: #a0aec0;
  border-bottom-color: #2d3748;
}

.graella-aplicatius {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* Targeta de cada aplicatiu. Color sòlid de fons (segons tipus),
   text blanc, sense ombres dures — estètica plana i clara. */
.aplicatiu-card {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 24px;
  border-radius: 14px;
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: #15558C; /* fallback; cada tipus el sobreescriu */
}
.aplicatiu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
[data-tema="fosc"] .aplicatiu-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* Colors per tipus. Tons sòlids, contrast bo amb text blanc. */
.aplicatiu-card.tipus-ciberseguretat { background: #15558C; }  /* blau marí */
.aplicatiu-card.tipus-ia              { background: #B83D6F; }  /* rosa fosc */
.aplicatiu-card.tipus-formacio        { background: #C77A1A; }  /* taronja terra */
.aplicatiu-card.tipus-compliment      { background: #2D7A4F; }  /* verd terra */
/* Canvi 18: tipus "configuracio" — colocat al panell d'admin per
   a coses de configuració del sistema (tokens API, en el futur:
   integracions, paràmetres globals...). Color verd-blau oliva
   per diferenciar de gestió (gris) i ciberseguretat (blau). */
.aplicatiu-card.tipus-configuracio    { background: #5B6A4F; }  /* oliva fosc */

.aplicatiu-emoji {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 16px;
}
.aplicatiu-tipus {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: #FFFFFF;
  margin-bottom: 12px;
  width: fit-content;
}
.aplicatiu-nom {
  font-family: 'Manrope', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #FFFFFF;
}
.aplicatiu-desc {
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  margin: 0;
}

/* Badge d'estat (només quan no és 'actiu'). */
.aplicatiu-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  color: #FFFFFF;
}
.aplicatiu-badge.badge-pendent { background: rgba(245,197,24,0.95); color: #3D2B00; }
.aplicatiu-badge.badge-completat { background: rgba(255,255,255,0.32); color: #FFFFFF; }

/* ===== Estat buit ===== */
.estat-buit {
  padding: 48px 24px;
  text-align: center;
  background: var(--fons-targeta);
  border: 1px dashed var(--fons-grid);
  border-radius: 14px;
}
.estat-buit-titol {
  font-family: 'Manrope', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-fort);
  margin: 0 0 8px;
}
.estat-buit-text {
  color: var(--text-suau);
  margin: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Dades del client (definition list) ===== */
.dades-client {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 32px;
  row-gap: 10px;
  max-width: 720px;
  margin: 0;
}
.dades-client dt {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-suau);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dades-client dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-fort);
}

/* Responsive: en mòbil, definition list en columnes apilades. */
@media (max-width: 600px) {
  .dades-client {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .dades-client dt {
    margin-top: 12px;
  }
  .dades-client dt:first-child {
    margin-top: 0;
  }
}

/* ============================================================
 *  Canvi 5 — Edició de dades, click al logo, selector de tema
 * ============================================================ */

/* Marca: ara són dos elements clicables independents. Mantenim
   l'aparença visual idèntica a la d'abans (logo + text alineats
   amb un gap), però són dos elements diferents. */
.marca {
  display: flex;
  align-items: center;
  gap: 11px;
}
.marca-logo-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.marca-logo-boto {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s ease;
}
.marca-logo-boto:hover { opacity: 0.7; }
.marca-logo-link {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s ease;
}
.marca-logo-link:hover { opacity: 0.7; }
.marca-text {
  text-decoration: none;
  color: var(--text-fort);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.marca-text:hover { color: var(--text); }

/* Botó d'acció al panell "Les meves dades" (anar a editar). */
.accio-dades {
  margin-top: 24px;
}

/* Avisos al formulari d'edició (PRG). */
.avis {
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}
.avis-ok {
  background: rgba(45,122,79,0.12);
  border: 1px solid rgba(45,122,79,0.35);
  color: #1F5638;
}
[data-tema="fosc"] .avis-ok {
  color: #6FCB94;
}
.avis-err {
  background: rgba(184,61,111,0.10);
  border: 1px solid rgba(184,61,111,0.35);
  color: #8C2A50;
}
[data-tema="fosc"] .avis-err {
  color: #EE96B5;
}

/* Formulari d'edició de dades. */
.formulari-dades {
  max-width: 640px;
}
.formulari-dades .camp {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}
.formulari-dades label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-suau);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.formulari-dades input {
  font-family: inherit;
  font-size: 1rem;
  padding: 11px 14px;
  background: var(--fons-targeta);
  color: var(--text);
  border: 1px solid var(--fons-grid);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}
.formulari-dades input:focus {
  outline: none;
  border-color: var(--cian);
}
[data-tema="fosc"] .formulari-dades input {
  border-color: rgba(255,255,255,0.10);
}

/* Camps NO editables, mostrats al formulari per donar context. */
.dades-lectura {
  background: var(--fons-alt);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 28px;
}
.camp-lectura {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
.camp-lectura-etiqueta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-suau);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.camp-lectura-valor {
  font-size: 1rem;
  color: var(--text-fort);
  font-weight: 500;
}
.nota-no-editables {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--text-mut);
  font-style: italic;
}

/* Botons d'acció al peu del formulari. */
.accions-formulari {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.boto-primari {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px 22px;
  background: var(--text-fort);
  color: var(--fons);
  border: 1px solid var(--text-fort);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.boto-primari:hover {
  transform: translateY(-2px);
}

/* ============================================================
 *  Canvi 6 — Panell intern del treballador
 *
 *  Estils complementaris als del Canvi 4 (que ja defineixen el
 *  grid d'aplicatius). Aquí afegim:
 *   · El tipus visual 'gestio' per a aplicatius interns.
 *   · La taula de gestió (per al llistat de clients i altres
 *     que vinguin).
 *   · Detalls de formularis més rics (textarea, ajudes, marcador
 *     d'obligatori).
 * ============================================================ */

/* Targeta d'aplicatiu intern: gris-blau fosc, contrast bo amb blanc. */
.aplicatiu-card.tipus-gestio { background: #3F4D5C; }

/* Barra superior d'accions a les pantalles de llistat. */
.barra-accions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* Taula de gestió (clients i futurs llistats). */
.taula-marc {
  background: var(--fons-targeta);
  border-radius: 12px;
  border: 1px solid var(--fons-grid);
  overflow-x: auto;
}
.taula-gestio {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.taula-gestio thead th {
  text-align: left;
  padding: 14px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-suau);
  background: var(--fons-alt);
  border-bottom: 1px solid var(--fons-grid);
}
.taula-gestio tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--fons-grid);
  color: var(--text);
  vertical-align: middle;
}
.taula-gestio tbody tr:last-child td {
  border-bottom: none;
}
.taula-gestio tbody tr:hover {
  background: var(--fons-alt);
}
.taula-gestio code {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.88rem;
  color: var(--text-suau);
}

/* Badges d'estat dins la taula. */
.badge-estat {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge-actiu {
  background: rgba(45,122,79,0.15);
  color: #1F5638;
}
[data-tema="fosc"] .badge-actiu {
  background: rgba(111,203,148,0.18);
  color: #8FE0AF;
}
.badge-baixa {
  background: rgba(120,120,120,0.18);
  color: var(--text-suau);
}

/* Marcador "Obligatori" a les etiquetes de camp. */
.obligatori {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-mut);
  text-transform: none;
  letter-spacing: 0;
}

/* Textarea: heretem estil de l'input però amb min-height. */
.formulari-dades textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 11px 14px;
  background: var(--fons-targeta);
  color: var(--text);
  border: 1px solid var(--fons-grid);
  border-radius: 8px;
  resize: vertical;
  min-height: 96px;
  transition: border-color 0.15s ease;
}
.formulari-dades textarea:focus {
  outline: none;
  border-color: var(--cian);
}
[data-tema="fosc"] .formulari-dades textarea {
  border-color: rgba(255,255,255,0.10);
}

/* Text d'ajuda a sota d'un camp. */
.ajuda-camp {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--text-mut);
  font-style: italic;
}

/* ============================================================
 *  Canvi 8 — Fitxa de client (panell intern)
 * ============================================================ */

/* Files clicables del llistat. */
.fila-clicable { cursor: pointer; }

/* Bloc de notes internes a la fitxa: estil de "Post-it" discret. */
.bloc-notes {
  background: rgba(245,197,24,0.10);
  border-left: 3px solid var(--groc);
  padding: 14px 18px;
  border-radius: 6px;
  white-space: pre-wrap;
  font-size: 0.95rem;
  color: var(--text);
}

/* Capçalera de secció amb un títol i un botó alineat a la dreta. */
.capcalera-seccio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.capcalera-seccio .titol-portal-petit { margin: 0; }

/* Llistat de aplicatius assignats: una fila per aplicatiu, format
   horitzontal amb emoji + text + acció de desassignar. */
.llista-assignats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fila-assignat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--fons-targeta);
  border: 1px solid var(--fons-grid);
  border-left-width: 4px;
}
.fila-assignat.tipus-ciberseguretat { border-left-color: #15558C; }
.fila-assignat.tipus-ia              { border-left-color: #B83D6F; }
.fila-assignat.tipus-formacio        { border-left-color: #C77A1A; }
.fila-assignat.tipus-compliment      { border-left-color: #2D7A4F; }
.fila-assignat .aplicatiu-emoji {
  font-size: 1.6rem;
  margin: 0;
}
.fila-assignat-text {
  flex: 1;
  min-width: 0;
}
.fila-assignat-text strong {
  display: block;
  color: var(--text-fort);
  font-family: 'Manrope', sans-serif;
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.fila-assignat-text p {
  margin: 0;
  color: var(--text-suau);
  font-size: 0.88rem;
}

/* Formulari d'assignar (select + botó en línia). */
.formulari-assignar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: 720px;
}
.formulari-assignar .camp {
  flex: 1;
  margin-bottom: 0;
}
.formulari-dades select {
  font-family: inherit;
  font-size: 1rem;
  padding: 11px 14px;
  background: var(--fons-targeta);
  color: var(--text);
  border: 1px solid var(--fons-grid);
  border-radius: 8px;
  width: 100%;
}
.formulari-dades select:focus {
  outline: none;
  border-color: var(--cian);
}
[data-tema="fosc"] .formulari-dades select {
  border-color: rgba(255,255,255,0.10);
}

/* Responsive: en mòbil, formulari d'assignar passa a vertical. */
@media (max-width: 600px) {
  .formulari-assignar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   Canvi 9 — Soft-delete i zona de perill
   ============================================================ */

/* Zona de perill: bloc al peu de fitxes destructives (esborrar
   client, esborrar intern). Visualment clarament separat per
   evitar errors per inèrcia. */
.zona-perill {
    border: 1px solid rgba(180, 35, 50, 0.35);
    background: rgba(180, 35, 50, 0.05);
    border-radius: 8px;
    padding: 20px 24px;
}

.zona-perill h3 {
    color: #B42332;
    margin: 0 0 10px;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Canvi 16-fix-admin: si la zona-perill és un <details>, el
   <summary> agafa el rol de capçalera amb el mateix estil que h3.
   Així permetem amagar la zona per defecte (col·lapsable) i obrir-la
   conscientment només quan realment vols esborrar. */
.zona-perill summary {
    color: #B42332;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
}
.zona-perill summary:hover { opacity: 0.85; }

.zona-perill p {
    color: var(--text);
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Botó de perill: estèticament hostil per fer notar que és
   destructiu. Reservat per esborrats definitius. */
.boto-perill {
    background: #B42332;
    color: #fff;
    border: 0;
    padding: 10px 22px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.15s ease;
}

.boto-perill:hover {
    background: #8E1B27;
}

.boto-perill:focus-visible {
    outline: 2px solid #B42332;
    outline-offset: 3px;
}

/* Cel·la d'accions a les taules de gestió: posa botons-icona
   discrets en línia. */
.accions-cel-la {
    white-space: nowrap;
    text-align: right;
    padding-right: 12px;
}

.accions-cel-la > * {
    margin-left: 6px;
}

/* Botó que aparenta enllaç (per icones dins taules). */
.boto-enllac {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.1rem;
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--text-suau);
    transition: background 0.12s ease, color 0.12s ease;
}

.boto-enllac:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text);
}

.boto-enllac-perill:hover {
    background: rgba(180, 35, 50, 0.10);
    color: #B42332;
}

/* Enllaç d'acció amb icona (per al reset, etc.). */
.enllac-accio {
    display: inline-block;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--text-suau);
    transition: background 0.12s ease, color 0.12s ease;
}

.enllac-accio:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text);
    text-decoration: none;
}

/* ============================================================
   Canvi 11 — Filtres, paginació, registre d'activitat
   ============================================================ */

/* Barra de filtres tipus "pills". */
.filtres-barra {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--fons-secundari, rgba(0,0,0,0.02));
    border-radius: 8px;
    flex-wrap: wrap;
}

.filtres-etiqueta {
    font-size: 0.85rem;
    color: var(--text-suau);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}

.filtre-pill {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 16px;
    text-decoration: none;
    font-size: 0.88rem;
    color: var(--text-suau);
    background: transparent;
    border: 1px solid var(--text-molt-suau, rgba(0,0,0,0.12));
    transition: background 0.12s ease, color 0.12s ease;
}

.filtre-pill:hover {
    background: rgba(0,0,0,0.04);
    color: var(--text);
}

.filtre-actiu {
    background: var(--accent, #15558C);
    color: #fff;
    border-color: var(--accent, #15558C);
}

.filtre-actiu:hover {
    background: var(--accent, #15558C);
    color: #fff;
}

/* Paginació al peu d'un llistat. */
.paginacio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    padding: 12px;
}

.paginacio-info {
    font-size: 0.9rem;
    color: var(--text-suau);
    min-width: 120px;
    text-align: center;
}

.boto-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Taula del registre d'activitat — més compacta. */
.taula-registre td {
    padding: 8px 10px;
    vertical-align: top;
}

/* Canvi 12 — Formulari de filtres del registre d'activitat */
.filtres-form {
    background: var(--fons-secundari, rgba(0,0,0,0.025));
    border-radius: 10px;
    padding: 20px;
    margin: 16px 0;
}

.filtres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
}

.filtre-camp label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-suau);
    margin-bottom: 4px;
}

.filtre-camp input,
.filtre-camp select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--text-molt-suau, rgba(0,0,0,0.12));
    border-radius: 6px;
    background: var(--fons);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
}

.filtre-accions {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

/* ============================================================
 *  Canvi 16-fix: estils del motor d'execució
 * ============================================================ */

/* Textarea ample per al formulari de registre del pas. La
   amplada per defecte d'un textarea és molt estreta i incòmoda
   per redactar troballes una mica llargues. */
.camp-ample textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 5rem;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid var(--vora);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}
.camp-ample input[type="text"],
.camp-ample input[type="email"],
.camp-ample select {
  width: 100%;
  box-sizing: border-box;
}
.camp-ample {
  display: block;
  margin-bottom: 1rem;
}
.camp-ample > label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Badge de severitat amb colors per visualitzar resultats
   d'un cop d'ull a la taula del bloc. */
.sev-cella {
  text-align: center;
}
.sev-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sev-baixa   { background: #d1fae5; color: #065f46; }
.sev-mitja   { background: #fef3c7; color: #92400e; }
.sev-alta    { background: #fed7aa; color: #9a3412; }
.sev-critica { background: #fecaca; color: #991b1b; }

/* Bloc de comanda: monoespaiat, fons fosc, per distingir-lo
   visualment del text descriptiu. */
.bloc-comanda {
  background: #1a1a1a;
  color: #e5e7eb;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* Canvi 17b: caixa per al botó "Executar al sandbox" — visualment
   cridanera (verda) perquè el tècnic entengui que té automatització
   disponible per a aquest pas. Apareix just sota la `bloc-comanda`. */
.bloc-comanda-exec {
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 0.75rem 0 1.5rem;
}
.bloc-comanda-exec p {
  margin: 0 0 0.75rem;
  color: #065f46;
  font-size: 0.95rem;
}
.bloc-comanda-exec p strong {
  color: #064e3b;
}
.bloc-comanda-exec button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Canvi 17c-fix: spinner animat per al botó "Executar al sandbox"
   mentre es processa al servidor. Sense això el clic donava la
   sensació que no passava res — les comandes triguen 10s-2min,
   l'usuari necessita feedback visual immediat. */
.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ws-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 0.5em;
}
@keyframes ws-spin {
  to { transform: rotate(360deg); }
}
/* Variant més gran per a casos puntuals (panells de càrrega de
   pàgina sencera, no botons). */
.spinner-gran {
  width: 2em;
  height: 2em;
  border-width: 3px;
}

/* Layout de dues columnes per a la vista del pas:
   esquerra la feina (formulari + evidències), dreta el
   bloc de notes persistent del job. */
.layout-dues-cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}

/* Canvi 17c-fix: la columna dreta (notes + info contenidor) ha
   de baixar amb l'usuari quan deslliça la pàgina. Wrapper sticky
   que envolta TOTS els elements de la dreta. Així es mantenen
   junts i sempre visibles.
   max-height: calc(100vh - 2rem) permet scroll intern si el
   contingut combinat (notes + sandbox) creix més que la finestra.

   El `top` ha de tenir en compte l'alçada de la capçalera sticky
   (vegeu .capcalera al començament del fitxer): si fem servir
   només 1rem, la part superior del bloc de notes queda amagada
   darrere el menú. Donem una mica de marge: 72px del header +
   1rem d'espai visual. */
.columna-dreta-sticky {
  position: sticky;
  top: calc(72px + 1rem);
  max-height: calc(100vh - 72px - 2rem);
  overflow-y: auto;
  /* Petit padding-right perquè la scrollbar quan apareix no quedi
     enganxada al límit visual del panell. */
  padding-right: 0.25rem;
  /* Espai entre notes i info-sandbox si tots dos hi són. */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 900px) {
  .layout-dues-cols {
    grid-template-columns: 1fr;
  }
  /* En mòbil/pantalla petita no té sentit sticky — el contingut
     apareix en flux normal, un element rere l'altre. */
  .columna-dreta-sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
}

/* Notes del job: textarea fixa a la dreta, estil "block-notes". */
.notes-job {
  background: #fef9c3;
  border: 1px solid #eab308;
  border-radius: 8px;
  padding: 1rem;
}
.notes-job h3 {
  margin-top: 0;
  font-size: 0.95rem;
  color: #713f12;
}
.notes-job textarea {
  width: 100%;
  min-height: 18rem;
  border: none;
  background: transparent;
  resize: vertical;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.85rem;
  padding: 0.5rem;
  box-sizing: border-box;
}
.notes-job textarea:focus {
  outline: 1px solid #eab308;
  background: white;
}
.notes-job .meta-desat {
  font-size: 0.75rem;
  color: #713f12;
  margin-top: 0.5rem;
}

/* Canvi 17b-fix: panell del contenidor sandbox sota el bloc de
   notes. Estil semblant però amb to més fred (cian) per
   diferenciar-lo del groc de notes. */
.info-sandbox {
  background: #ecfeff;
  border: 1px solid #06b6d4;
  border-radius: 8px;
  padding: 1rem;
}
.info-sandbox h3 {
  margin-top: 0;
  font-size: 0.95rem;
  color: #155e75;
}
.info-sandbox .dades-compacte {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0.5rem 0;
  font-size: 0.85rem;
}
.info-sandbox .dades-compacte dt {
  color: #155e75;
  font-weight: 600;
}
.info-sandbox .dades-compacte dd {
  margin: 0;
  color: var(--text);
}
.info-sandbox .dades-compacte code {
  font-size: 0.75rem;
  background: rgba(6, 182, 212, 0.1);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}
.info-sandbox .boto-compacte {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}
.info-sandbox .ajuda-camp {
  font-size: 0.75rem;
  color: #155e75;
  margin-bottom: 0;
}

/* Badges per als estats del contenidor */
.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  background: #e5e7eb;
  color: #374151;
}
.badge-ok {
  background: #d1fae5;
  color: #065f46;
}
/* Canvi 18: badge d'avís (quota propera al límit). */
.badge-avis {
  background: #fef3c7;
  color: #92400e;
}
/* Canvi 18: badge d'error per a verificacions fallades. */
.badge-err {
  background: #fee2e2;
  color: #991b1b;
}

/* ============================================================
   Canvi 18 — Pàgina admin de tokens API
   Disseny tipus acordió compacte:
   - Cada provider és un <details> tancat per defecte
   - Marc esquerre de color segons estat:
       VERD   → configurat i última verificació OK (o sense token)
       BLAU   → configurat però encara no verificat
       VERMELL → última verificació KO
       BLANC  → no configurat
   - Botó d'ull a l'input de token per veure/amagar temporalment
   ============================================================ */

/* Banner d'advertència quan no hi ha API_MASTER_KEY al sistema */
.api-banner-clau-absent {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  color: #78350f;
}
.api-banner-clau-absent-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.api-banner-clau-absent strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.api-banner-clau-absent p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.api-banner-clau-absent code {
  background: rgba(0,0,0,0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.85em;
}

/* ===== Llista d'acordions ===== */
.api-tokens-llista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2rem;
}

/* === Bloc accordió per provider === */
.api-block {
  border: 1px solid var(--vora, #e5e7eb);
  border-left: 4px solid #d1d5db;  /* per defecte: pendent (blanc) */
  border-radius: 8px;
  background: var(--fons-card, #fff);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.api-block:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.api-block[open] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-tema="fosc"] .api-block {
  background: #1f2937;
  border-color: #374151;
}

/* Variants de marc segons estat */
.api-block-ok                    { border-left-color: #10b981; }  /* verd */
.api-block-configurat_no_verificat { border-left-color: #3b82f6; }  /* blau */
.api-block-error                 { border-left-color: #ef4444; }  /* vermell */
.api-block-pendent               { border-left-color: #d1d5db; }  /* blanc/gris */

/* Indicador rodó (puntet de color) al costat del nom */
.api-block-indicador {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  flex-shrink: 0;
}
.api-block-ok .api-block-indicador                    { background: #10b981; }
.api-block-configurat_no_verificat .api-block-indicador { background: #3b82f6; }
.api-block-error .api-block-indicador                 { background: #ef4444; }
.api-block-pendent .api-block-indicador               { background: #d1d5db; }

/* === Summary clicable === */
.api-block-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  gap: 1rem;
}
.api-block-summary::-webkit-details-marker { display: none; }
.api-block-summary:hover {
  background: var(--fons-suau, #f9fafb);
}
[data-tema="fosc"] .api-block-summary:hover { background: #111827; }

.api-block-summary-esquerra {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}
.api-block-summary-dreta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.api-block-nom {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.api-block-quota-mini {
  font-size: 0.8rem;
  color: var(--text-secundari, #6b7280);
  font-variant-numeric: tabular-nums;
}

.api-block-caret {
  font-size: 0.8rem;
  color: var(--text-secundari, #9ca3af);
  transition: transform 0.2s;
}
.api-block[open] .api-block-caret { transform: rotate(180deg); }

/* Mini-badges */
.api-block-mini-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.api-block-mini-badge.petit {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  margin-left: 0.35rem;
  vertical-align: 1px;
}
.api-block-mini-badge.verd     { background: #d1fae5; color: #065f46; }
.api-block-mini-badge.blau     { background: #dbeafe; color: #1e40af; }
.api-block-mini-badge.vermell  { background: #fee2e2; color: #991b1b; }
.api-block-mini-badge.gris     { background: #f3f4f6; color: #6b7280; }
[data-tema="fosc"] .api-block-mini-badge.verd    { background: #064e3b; color: #6ee7b7; }
[data-tema="fosc"] .api-block-mini-badge.blau    { background: #1e3a8a; color: #bfdbfe; }
[data-tema="fosc"] .api-block-mini-badge.vermell { background: #7f1d1d; color: #fecaca; }
[data-tema="fosc"] .api-block-mini-badge.gris    { background: #374151; color: #9ca3af; }

/* === Contingut desplegable === */
.api-block-contingut {
  padding: 0 1.25rem 1.25rem 1.25rem;
  border-top: 1px solid var(--vora, #e5e7eb);
  padding-top: 1.25rem;
}
[data-tema="fosc"] .api-block-contingut { border-top-color: #374151; }

.api-block-meta {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--vora, #e5e7eb);
}
[data-tema="fosc"] .api-block-meta { border-bottom-color: #374151; }

.api-block-enllac-extern {
  font-size: 0.85rem;
  color: var(--accent, #15558c);
  text-decoration: none;
  font-weight: 500;
  align-self: flex-start;
}
.api-block-enllac-extern:hover { text-decoration: underline; }

.api-block-quota-completa { /* contenidor de la barra de quota */
}
.api-block-quota-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}
.api-block-quota-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secundari, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.api-block-quota-valor {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.api-block-detalls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.85rem;
  color: var(--text);
}
.api-block-detall-label {
  font-weight: 600;
  color: var(--text-secundari, #6b7280);
  margin-right: 0.3rem;
}

/* Barra de progrés de quota */
.api-quota-barra {
  height: 4px;
  background: #f3f4f6;
  border-radius: 2px;
  overflow: hidden;
}
[data-tema="fosc"] .api-quota-barra { background: #374151; }
.api-quota-barra-fill {
  height: 100%;
  background: #10b981;
  transition: width 0.3s ease;
  border-radius: 2px;
}
.api-quota-barra-fill.avis { background: #f59e0b; }

/* === Formulari de token === */
.api-block-form { margin-bottom: 1rem; }
.api-block-form .camp { margin-bottom: 1rem; }
.api-block-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

/* Input amb botó d'ull integrat */
.input-amb-ull {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-amb-ull input {
  flex: 1;
  padding: 0.7rem 3rem 0.7rem 0.85rem;  /* padding-right per al botó */
  border: 1px solid var(--vora, #d1d5db);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: #fff;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-tema="fosc"] .input-amb-ull input {
  background: #111827;
  border-color: #4b5563;
  color: #f3f4f6;
}
.input-amb-ull input:focus {
  outline: none;
  border-color: var(--accent, #15558c);
  box-shadow: 0 0 0 3px rgba(21, 85, 140, 0.12);
}
.boto-ull {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.1rem;
  color: var(--text-secundari, #6b7280);
  transition: background 0.15s;
}
.boto-ull:hover {
  background: var(--fons-suau, #f3f4f6);
}
[data-tema="fosc"] .boto-ull:hover { background: #374151; }

/* Inputs normals dins el form (notes) */
.api-block-form input[type="text"]:not(.input-amb-ull input) {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--vora, #d1d5db);
  border-radius: 6px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--text);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-tema="fosc"] .api-block-form input[type="text"]:not(.input-amb-ull input) {
  background: #111827;
  border-color: #4b5563;
  color: #f3f4f6;
}
.api-block-form input[type="text"]:focus:not(.input-amb-ull input) {
  outline: none;
  border-color: var(--accent, #15558c);
  box-shadow: 0 0 0 3px rgba(21, 85, 140, 0.12);
}

.api-block-form .ajuda-camp {
  margin: 0.4rem 0 0 0;
  font-size: 0.8rem;
  color: var(--text-secundari, #6b7280);
}

.api-block-form-accions {
  margin-top: 0.5rem;
}

/* Accions peu (provar, eliminar) */
.api-block-accions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--vora, #e5e7eb);
}
[data-tema="fosc"] .api-block-accions { border-top-color: #374151; }


/* Caixa groga d'avís a la fitxa d'un pas Osint quan el token no
   està configurat. Mateix patró que `.bloc-comanda-exec` però
   en groc per diferenciar "necessita configuració" de "llest". */
.bloc-osint-sense-token {
  background: #fefce8;
  border: 1px solid #ca8a04;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
}
.bloc-osint-sense-token strong {
  color: #854d0e;
}
.bloc-osint-sense-token a {
  color: var(--accent);
}

/* Variant "pas Osint disponible" (token configurat). Color cian
   per diferenciar de Comanda (verd). */
.bloc-osint-disponible {
  background: #ecfeff;
  border: 1px solid #0891b2;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
}

/* Zona drag-and-drop per a evidències. Indica visualment que
   pots arrossegar fitxers a sobre. El label per defecte és
   inline; cal forçar block + width 100% perquè la caixa abraci
   tot el contingut intern. L'input file usa la tècnica
   "visually hidden" (no `display:none`, que en alguns navegadors
   trencaria la submissió del fitxer associat). */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  border: 3px dashed #94a3b8;
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  margin-bottom: 1rem;
  min-height: 180px;
  position: relative;
}
.dropzone:hover,
.dropzone.dropzone-actiu {
  border-color: var(--cian);
  background: #ecfeff;
  transform: scale(1.005);
}
.dropzone p {
  margin: 0.35rem 0;
  color: var(--text-suau);
  font-size: 1rem;
}
.dropzone p strong {
  color: var(--text-fort);
  font-size: 1.05rem;
}
.dropzone .dropzone-icona {
  font-size: 3rem;
  opacity: 0.75;
  margin-bottom: 0.5rem;
  line-height: 1;
}
.dropzone input[type="file"] {
  /* visually-hidden: l'input no ocupa espai però segueix
     accessible per al teclat (focus + Enter obre el diàleg). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dropzone-nom-fitxer {
  font-weight: 600;
  color: #065f46;
  margin-top: 0.75rem;
  padding: 0.4rem 0.8rem;
  background: #d1fae5;
  border-radius: 4px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropzone-nom-fitxer:empty {
  display: none;
}

/* ============================================================
   Canvi 18 v47 — Scroll-to-pas amb highlight
   Quan l'usuari torna al bloc des d'un pas amb fragment URL
   `#pas-XXX`, el navegador fa scroll a la fila i la pinta
   suaument groga durant uns segons perquè es vegi on havíem
   estat treballant.
   ============================================================ */
tr[id^="pas-"]:target {
  animation: highlight-pas 2.5s ease-out;
}
@keyframes highlight-pas {
  0%   { background-color: #fef9c3; }
  60%  { background-color: #fef9c3; }
  100% { background-color: transparent; }
}
[data-tema="fosc"] tr[id^="pas-"]:target {
  animation: highlight-pas-fosc 2.5s ease-out;
}
@keyframes highlight-pas-fosc {
  0%   { background-color: #4d3a16; }
  60%  { background-color: #4d3a16; }
  100% { background-color: transparent; }
}

/* ============================================================
   Canvi 20 — /ciberseguretat redissenyada
   Estils nous per a:
    · .targeta-familia: variant de .targeta amb llista de
      serveis dins. Es comporta com una .targeta normal però
      amb la <ul.llista-serveis> compacta a sota del paràgraf.
    · .bloc-primer-pas: capsa centrada de la secció 02 amb el
      text de presentació de la Diagnosi Inicial i el CTA.
    · .text-despres: paràgraf central de la secció 03 ("I
      després?") — prosa en lloc de targetes.
   ============================================================ */

/* Variant de targeta per a famílies de servei.
   No canviem .targeta directament perquè la fem servir també
   a /home i /sobre per a contingut més curt; aquí cal espai
   per a títol + descripció + llista. */
.targeta-familia { padding-bottom: 26px; }
.targeta-familia .icona-servei { margin-bottom: 14px; }
.targeta-familia h3 { font-size: 1.18rem; margin-bottom: 10px; }
.targeta-familia p { margin-bottom: 18px; }

/* Llista de serveis dins la targeta de família.
   Disseny: minimalista, alineada a l'esquerra, sense bullets
   pesats, amb un guió-de-marca al davant de cada element en
   color d'accent. Tipografia lleugerament més petita per
   diferenciar-la del paràgraf descriptiu. */
.targeta-familia .llista-serveis {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--vora);
  padding-top: 16px;
}
.targeta-familia .llista-serveis li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-suau);
  margin-bottom: 6px;
}
.targeta-familia .llista-serveis li:last-child { margin-bottom: 0; }
.targeta-familia .llista-serveis li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 2px;
  background: var(--blau);
  border-radius: 2px;
}

/* Bloc central de la secció 02 — Per on comencem.
   Centrat, text gran, CTA destacat. Visualment equivalent a
   un "minicard" de venda dins la pàgina. */
.bloc-primer-pas {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: var(--fons-targeta);
  border: 1px solid var(--vora);
  border-radius: 16px;
  padding: 44px 36px;
}
.bloc-primer-pas p {
  font-size: 1.08rem;
  line-height: 1.65;
  margin-bottom: 28px;
}

/* Secció 03 — I després? Paràgraf central en prosa, sense
   targetes ni graelles. Manté el ritme de la pàgina però
   transmet menor "estructura" — és deliberat, perquè aquesta
   secció és més oberta i menys empaquetada. */
.text-despres {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: center;
}

/* ============================================================
   Canvi 21 — /ciberseguretat redissenyada (sobreescriu Canvi 20)
   Les classes .targeta-familia, .llista-serveis, .bloc-primer-pas
   i .text-despres del Canvi 20 queden orfes (no s'usen a la
   nova plantilla). Les deixem al CSS per si tornem a usar-les
   en una altra pàgina; no fan mal allà on són.

   Estils nous:
    · .bloc-context: graella horitzontal de 3 afirmacions
      reconeixibles per al client. Disseny voluntàriament
      lleuger (sense fons, sense vora) per contrastar amb les
      targetes denses d'altres seccions.
    · .punt-context: cada afirmació individual. Barra de color
      de marca al davant del text (reutilitza l'idioma visual
      del .subratllat-marca de la home).
   ============================================================ */

.bloc-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 8px;
}

.punt-context {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}

/* Barra de color curta al davant — al·lusió al subratllat de
   marca de la home, però en mode minimal. Alternem el color
   amb :nth-child per donar ritme visual sense ser estrident. */
.punt-context .marca-context {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--blau);
}
.punt-context:nth-child(2) .marca-context { background: var(--rosa); }
.punt-context:nth-child(3) .marca-context { background: var(--cian); }

.punt-context p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
}

/* ============================================================
   Canvi 22 — Hero centrat + Blocs grans d'àrea + ajustos
   ----------------------------------------------------------
    · .hero-centrat: aplica text-align center i centra elements
      flex (subratllat-marca) per a pàgines d'àrea sense visual.
    · .bloc-area: contenidor d'una secció completa per àrea a
      la home. Inclou subtítol, llista de 4 punts amb check i
      botó "Conèixer àrea".
    · .graella-punts-area / .punt-area: la llista de 4 punts
      en graella 2x2 amb icona check al davant.
   ============================================================ */

/* Hero centrat per a pàgines d'àrea i /sobre */
.hero.hero-centrat { text-align: center; }
.hero.hero-centrat .subratllat-marca { justify-content: center; }
.hero.hero-centrat .intro { margin-left: auto; margin-right: auto; }
.hero.hero-centrat .kicker { justify-content: center; }

/* Bloc gran per àrea (3 a la home, un per cada eix) */
.bloc-area {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.bloc-area > .etiqueta-seccio { margin-bottom: 18px; }
.bloc-area h2 { margin-bottom: 18px; }
.bloc-area .subtitol-area {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text-suau);
  max-width: 680px;
  margin: 0 auto 40px;
}

/* Graella de 4 punts en 2x2 (responsive: 1 columna en mòbil) */
.graella-punts-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
  max-width: 740px;
  margin: 0 auto 44px;
  text-align: left;
}
@media (max-width: 720px) {
  .graella-punts-area { grid-template-columns: 1fr; }
}

.punt-area {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.punt-area p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}
.punt-area .check-area {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--blau);
}
[data-tema="fosc"] .punt-area .check-area { color: var(--cian); }

.cta-area { margin-top: 12px; }

/* ============================================================
   Canvi 23 — Polits visuals: feedback v52
    1) Reforç de .hero-centrat per al .subratllat-marca
    2) Mini-targetes per als 4 punts d'àrea (substitueix
       el "text amb tic" sense pes visual)
    3) Coloració dels blocs d'àrea (.bloc-rosa/blau/cian)
    4) Centrat dels punts del "Per què" i passos del "Procés"
    5) Colors a icones nth-child(4-6) a /ciberseguretat
   ============================================================ */

/* 1) Centrat real del subratllat-marca quan el hero és centrat.
   El justify-content centrava els spans dins d'un container flex
   d'amplada completa — visualment funcionava però només per
   sort. Ara el container s'ajusta al seu contingut amb auto-margin. */
.hero.hero-centrat .subratllat-marca {
  justify-content: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* 2) Mini-targetes per als punts d'àrea. El disseny anterior
   ("check + text" sense marc) no transmetia pes visual. Ara
   cada punt és un bloc amb fons subtil del color del seu bloc
   pare (configurat des de .bloc-rosa/blau/cian a la regla 3). */
.punt-area {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--vora);
  border-radius: 12px;
  background: var(--fons-targeta);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.punt-area:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13,27,46,0.06);
}
.punt-area p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text);
}
.punt-area .check-area {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--blau);  /* base; el sobreescrivim per cada bloc */
}

/* 3) Variants de bloc segons àrea. Cada bloc d'àrea de la home
   té un color de marca dominant: ciber=rosa, IA=blau, formació=cian.
   El color s'aplica a:
    · El fons subtil dels punts
    · La vora dels punts en hover
    · L'icona de check
   La identitat visual queda clara sense saturar. */

.bloc-rosa .punt-area {
  background: linear-gradient(180deg, rgba(232,76,138,0.06), rgba(232,76,138,0.02));
  border-color: rgba(232,76,138,0.18);
}
.bloc-rosa .punt-area:hover { border-color: var(--rosa); }
.bloc-rosa .punt-area .check-area { color: var(--rosa); }

.bloc-blau .punt-area {
  background: linear-gradient(180deg, rgba(22,104,176,0.06), rgba(22,104,176,0.02));
  border-color: rgba(22,104,176,0.18);
}
.bloc-blau .punt-area:hover { border-color: var(--blau); }
.bloc-blau .punt-area .check-area { color: var(--blau); }

.bloc-cian .punt-area {
  background: linear-gradient(180deg, rgba(25,176,196,0.07), rgba(25,176,196,0.02));
  border-color: rgba(25,176,196,0.20);
}
.bloc-cian .punt-area:hover { border-color: var(--cian); }
.bloc-cian .punt-area .check-area { color: var(--cian); }

/* En tema fosc els fons subtils s'ajusten lleugerament */
[data-tema="fosc"] .bloc-rosa .punt-area {
  background: linear-gradient(180deg, rgba(232,76,138,0.12), rgba(232,76,138,0.04));
}
[data-tema="fosc"] .bloc-blau .punt-area {
  background: linear-gradient(180deg, rgba(22,104,176,0.15), rgba(22,104,176,0.05));
}
[data-tema="fosc"] .bloc-cian .punt-area {
  background: linear-gradient(180deg, rgba(25,176,196,0.14), rgba(25,176,196,0.04));
}

/* 4) Centrar el contingut intern de les targetes del "Per què" i
   "Procés" a la home, per coherència visual amb els blocs d'àrea
   1-3 (que ja eren centrats per .bloc-area). Així tots els
   continguts de la home tenen el mateix sentit visual. */
.graella-perque .punt-perque { text-align: center; }
.graella-perque .punt-perque .num-perque { justify-content: center; }
.passos-acollit .pas { text-align: center; }
.passos-acollit .pas .pas-etiqueta {
  display: block;
  text-align: center;
}

/* 5) Colors a .icona-servei per a les targetes 4-6 (calia per
   /ciberseguretat que té 6 targetes — els 3 últims es veien
   sense color al canvi 22). Cicle de marca: rosa-blau-cian-groc. */
.targeta:nth-child(4) .icona-servei { background: rgba(245,197,24,0.14); }
.targeta:nth-child(5) .icona-servei { background: rgba(232,76,138,0.10); }
.targeta:nth-child(6) .icona-servei { background: rgba(22,104,176,0.10); }
.targeta:nth-child(4) .icona-servei svg { stroke: var(--groc); }
.targeta:nth-child(5) .icona-servei svg { stroke: var(--rosa); }
.targeta:nth-child(6) .icona-servei svg { stroke: var(--blau); }

/* Vora del hover en targetes 4-6 (l'havíem deixat només per 1-3) */
.targeta:nth-child(4):hover::before { border-color: var(--groc); }
.targeta:nth-child(4):hover::after  { border-color: var(--groc); }
.targeta:nth-child(5):hover::before { border-color: var(--rosa); }
.targeta:nth-child(5):hover::after  { border-color: var(--rosa); }
.targeta:nth-child(6):hover::before { border-color: var(--blau); }
.targeta:nth-child(6):hover::after  { border-color: var(--blau); }

/* ============================================================
   Canvi 24 — Pàgina /serveis: catàleg complet per àrea.
    · .area-ciber/ia/formacio: cada àrea té un color de marca
      coherent per a TOTES les seves famílies. Sobreescriuen
      el cicle nth-child genèric perquè dins de /serveis cada
      secció té identitat única.
    · .cta-area dins de /serveis: el botó "Conèixer àrea" ha
      d'estar centrat amb marge superior generós després de la
      graella.
   ============================================================ */

/* AREA-CIBER: totes les famílies amb to rosa (color del bloc
   d'àrea ciberseguretat de la home — coherència visual). */
.area-ciber .targeta-familia:hover { border-color: rgba(232,76,138,0.40); }
.area-ciber .targeta:nth-child(n) .icona-servei {
  background: rgba(232,76,138,0.10);
}
.area-ciber .targeta:nth-child(n) .icona-servei svg { stroke: var(--rosa); }
.area-ciber .targeta:nth-child(n):hover::before { border-color: var(--rosa); }
.area-ciber .targeta:nth-child(n):hover::after  { border-color: var(--rosa); }
.area-ciber .targeta-familia .llista-serveis li::before { background: var(--rosa); }

/* AREA-IA: totes les famílies amb to blau (color del bloc IA). */
.area-ia .targeta-familia:hover { border-color: rgba(22,104,176,0.40); }
.area-ia .targeta:nth-child(n) .icona-servei {
  background: rgba(22,104,176,0.10);
}
.area-ia .targeta:nth-child(n) .icona-servei svg { stroke: var(--blau); }
.area-ia .targeta:nth-child(n):hover::before { border-color: var(--blau); }
.area-ia .targeta:nth-child(n):hover::after  { border-color: var(--blau); }
.area-ia .targeta-familia .llista-serveis li::before { background: var(--blau); }

/* AREA-FORMACIO: totes les famílies amb to cian (color del bloc
   formació). */
.area-formacio .targeta-familia:hover { border-color: rgba(25,176,196,0.45); }
.area-formacio .targeta:nth-child(n) .icona-servei {
  background: rgba(25,176,196,0.12);
}
.area-formacio .targeta:nth-child(n) .icona-servei svg { stroke: var(--cian); }
.area-formacio .targeta:nth-child(n):hover::before { border-color: var(--cian); }
.area-formacio .targeta:nth-child(n):hover::after  { border-color: var(--cian); }
.area-formacio .targeta-familia .llista-serveis li::before { background: var(--cian); }

/* CTA-AREA dins de /serveis: separador visual entre la graella
   i el botó "Conèixer àrea". Centrat amb marge generós. */
.area-ciber .cta-area,
.area-ia .cta-area,
.area-formacio .cta-area {
  margin-top: 48px;
  text-align: center;
}

/* ============================================================
   Canvi 25 — Centrat reforçat dels punts 4 i 5 de la home.
   Les regles del Canvi 23 (.graella-perque .punt-perque,
   .passos-acollit .pas) en teoria tenen prou especificitat
   (0,2,0) per guanyar a .pas/.punt-perque (0,1,0), però en
   pràctica seguien sortint a l'esquerra. Reforcem-ho amb:
    a) selectors de 3 classes (.seccio davant)
    b) cobertura explícita de cada fill (h4, p, num)
    c) num-perque centrat com a flex
   Així el centrat passa a (0,3,0) i (0,3,1) sobre fills.
   ============================================================ */

.seccio .graella-perque .punt-perque,
.seccio .graella-perque .punt-perque h4,
.seccio .graella-perque .punt-perque p {
  text-align: center;
}
.seccio .graella-perque .punt-perque .num-perque {
  justify-content: center;
}

.seccio .passos-acollit .pas,
.seccio .passos-acollit .pas h4,
.seccio .passos-acollit .pas p {
  text-align: center;
}
.seccio .passos-acollit .pas .pas-num {
  text-align: center;
}
.seccio .passos-acollit .pas .pas-etiqueta {
  display: block;
  text-align: center;
}

/* ============================================================
   Canvi 28 — Solució estructural definitiva al centrat.
   En lloc de barallar-nos amb !important (que el Canvi 27 va
   intentar sense èxit visible per culpa del caché), la solució
   neta és la que ja teníem als blocs 01-03 de la home: un
   <div class="bloc-area"> com a wrapper de tota la secció.
   El wrapper té text-align: center que s'hereta a tots els
   descendents per defecte.

   Afegim un modifier `.bloc-area--ample` perquè algunes
   graelles necessiten més espai del default (880px). Per
   exemple, .passos-acollit té max-width 1000, no hi cap.

   Ús:
     <section class="seccio">
       <div class="contenidor">
         <div class="bloc-area">           ← centrat estret (880)
           ...contingut...
         </div>
       </div>
     </section>

     <section class="seccio">
       <div class="contenidor">
         <div class="bloc-area bloc-area--ample">   ← centrat ample (1180)
           ...contingut amb graella gran...
         </div>
       </div>
     </section>
   ============================================================ */

.bloc-area.bloc-area--ample { max-width: 1180px; }


/* ============================================================
   Canvi 27 — Suport visual per a la nova secció "El nostre àmbit"
   de /ciberseguretat.
    · .graella-ambit: més respiració entre files (gap més gran)
      perquè 8 famílies en graella s'aprecien.
    · .copy-tancament: paràgraf de tancament centrat, amb pes
      visual per ser el resum final de la secció.
    · .punt-context: centrar el text per coherència amb la resta
      de pàgina /ciberseguretat.
   ============================================================ */

.graella-ambit { gap: 28px; }

.copy-tancament {
  max-width: 760px;
  margin: 56px auto 0;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  font-style: italic;
  padding: 26px 30px;
  border-left: 3px solid var(--rosa);
  border-right: 3px solid var(--cian);
  background: var(--fons-targeta);
  border-radius: 4px;
}

/* Centrar .punt-context (a /ciberseguretat secció "Com es troba avui").
   Canvi 28: ja no cal !important — el wrapper .bloc-area centra per
   herència. Aquí ens limitem a centrar la marca-context que és block. */
.punt-context .marca-context { margin-left: auto; margin-right: auto; }

/* ============================================================
 * Canvi 31 — Botó copiar dins el bloc-comanda + variants visuals
 * ============================================================ */
.bloc-comanda {
  position: relative;     /* per al botó copiar absolute */
  padding-right: 5.5rem;  /* deixa espai al botó */
}
.bloc-comanda pre {
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}
.boto-copia {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Amagat per defecte, apareix només al hover/focus del bloc.
     Estil Docker docs. */
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  z-index: 5;
}
.bloc-comanda:hover .boto-copia,
.bloc-comanda:focus-within .boto-copia,
.boto-copia:focus {
  opacity: 1;
}
.boto-copia:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.boto-copia-ok {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
  opacity: 1 !important;
}
.boto-copia-err {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* ============================================================
 * Canvi 31 — Formulari d'edició d'abast (PRE-01 fusionat)
 * Layout vertical net: labels a SOBRE, inputs ample complet,
 * agrupació en 2 columnes per als camps curts.
 * ============================================================ */
.panell-abast {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
}
.panell-abast h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.35rem;
}
.panell-abast .ajuda-panell {
  color: #6b7280;
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.form-edita-abast {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-edita-abast .camp-form {
  display: flex;
  flex-direction: column;
}
.form-edita-abast .camp-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #111827;
}
.form-edita-abast .camp-form textarea,
.form-edita-abast .camp-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-edita-abast .camp-form textarea:focus,
.form-edita-abast .camp-form input[type="text"]:focus {
  outline: none;
  border-color: #15558C;
  box-shadow: 0 0 0 3px rgba(21, 85, 140, 0.15);
}
.form-edita-abast .camp-form .ajuda {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0.4rem 0 0 0;
}
/* Files de 2 columnes per a camps curts (finestra, contacte, IP) */
.form-edita-abast .fila-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 640px) {
  .form-edita-abast .fila-2col { grid-template-columns: 1fr; }
}
.form-edita-abast .accions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e5e7eb;
}
[data-tema="fosc"] .panell-abast {
  background: #1f2937;
  border-color: #374151;
}
[data-tema="fosc"] .form-edita-abast .camp-form label {
  color: #f3f4f6;
}
[data-tema="fosc"] .form-edita-abast .camp-form textarea,
[data-tema="fosc"] .form-edita-abast .camp-form input[type="text"] {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
[data-tema="fosc"] .form-edita-abast .camp-form .ajuda { color: #9ca3af; }
[data-tema="fosc"] .panell-abast .ajuda-panell { color: #9ca3af; }
[data-tema="fosc"] .form-edita-abast .accions { border-top-color: #374151; }

/* ============================================================
 * Canvi 31 — Graella de selecció de blocs (PRE-05)
 * ============================================================ */
.graella-blocs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.targeta-bloc {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
}
.targeta-bloc:hover { border-color: #15558C; }
.targeta-bloc input[type="checkbox"] { margin-right: 0.5rem; }
.targeta-bloc.marcat {
  border-color: #15558C;
  background: #eff6ff;
}
.targeta-bloc .codi-bloc {
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  color: #6b7280;
}
.targeta-bloc .nom-bloc {
  font-weight: 600;
  margin: 0.25rem 0;
}
.targeta-bloc .desc-bloc {
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.4;
}
.presets-blocs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
[data-tema="fosc"] .targeta-bloc {
  background: #1f2937; border-color: #374151;
}
[data-tema="fosc"] .targeta-bloc.marcat {
  background: #1e3a5f; border-color: #3b82f6;
}
[data-tema="fosc"] .targeta-bloc .desc-bloc { color: #9ca3af; }
[data-tema="fosc"] .targeta-bloc .codi-bloc { color: #9ca3af; }

/* ============================================================
 * Canvi 31 — Taula d'actius (ACT-01)
 * ============================================================ */
.panell-actius {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
}
.panell-actius h2 { margin-top: 0; margin-bottom: 0.5rem; }
.taula-actius-wrap {
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
}
.taula-actius {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.taula-actius th {
  background: #f3f4f6;
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid #e5e7eb;
}
.taula-actius td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.taula-actius tbody tr:hover { background: #f9fafb; }
.select-inline, .input-inline {
  padding: 0.25rem 0.4rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.85rem;
  background: #fff;
  font-family: inherit;
}
.input-inline { min-width: 8rem; }
.cel-resultat { max-width: 12rem; }
.cel-resultat pre.resultat-mini {
  font-size: 0.75rem;
  background: #f9fafb;
  padding: 0.4rem;
  border-radius: 4px;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  margin: 0.25rem 0 0 0;
}
.accions-fila { white-space: nowrap; }
.boto-mini {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  background: #fff;
}
.boto-mini.boto-primari { background: #15558C; color: #fff; }
.boto-mini.boto-perill { background: #ef4444; color: #fff; }
.boto-mini:hover { opacity: 0.85; }
.badge-prop-propi      { background: #d1fae5; color: #065f46; }
.badge-prop-tercer     { background: #fee2e2; color: #991b1b; }
.badge-prop-compartit  { background: #fef3c7; color: #92400e; }
.badge-prop-desconegut { background: #e5e7eb; color: #374151; }
.form-afegir-actiu {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr auto;
  gap: 0.5rem;
  align-items: center;
}
.form-afegir-actiu input, .form-afegir-actiu select {
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.9rem;
}
@media (max-width: 760px) {
  .form-afegir-actiu { grid-template-columns: 1fr; }
}

/* ============================================================
 * Canvi 31 — Wizard de propietat (ACT-04)
 * ============================================================ */
.panell-wizard {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 2rem 1.75rem;
  margin: 1.5rem 0;
  text-align: center;
}
.panell-wizard h2 {
  margin: 0.5rem 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.4rem;
  word-break: break-all;
}
.wizard-progres {
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.wizard-botons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}
@media (max-width: 640px) { .wizard-botons { grid-template-columns: 1fr 1fr; } }
.boto-wizard {
  padding: 1rem 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.boto-wizard-propi      { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.boto-wizard-tercer     { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.boto-wizard-compartit  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.boto-wizard-desconegut { background: #e5e7eb; color: #374151; border-color: #9ca3af; }
.boto-wizard:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.wizard-navegacio {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
[data-tema="fosc"] .panell-actius,
[data-tema="fosc"] .panell-wizard {
  background: #1f2937; border-color: #374151;
}
[data-tema="fosc"] .taula-actius-wrap { background: #111827; border-color: #374151; }
[data-tema="fosc"] .taula-actius th { background: #1f2937; border-bottom-color: #374151; }
[data-tema="fosc"] .taula-actius td { border-bottom-color: #1f2937; color: #e5e7eb; }
[data-tema="fosc"] .taula-actius tbody tr:hover { background: #1f2937; }
[data-tema="fosc"] .select-inline, [data-tema="fosc"] .input-inline,
[data-tema="fosc"] .form-afegir-actiu input, [data-tema="fosc"] .form-afegir-actiu select {
  background: #111827; border-color: #374151; color: #f3f4f6;
}
[data-tema="fosc"] .cel-resultat pre.resultat-mini { background: #111827; color: #e5e7eb; }

/* ============================================================
 * Canvi 31 v65 — Bullet de validesa de l'actiu
 * ============================================================ */
.bullet-ok, .bullet-err {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.bullet-ok  { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.15); }
.bullet-err { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }

/* ============================================================
 * Canvi 31 v65 — Modal flotant per resultats per actiu
 * ============================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 2rem;
  overflow-y: auto;
}
.modal-overlay.obert { display: flex; }
.modal-finestra {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 880px;
  padding: 1.75rem 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-tanca {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  color: #6b7280;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
}
.modal-tanca:hover { background: #f3f4f6; color: #111827; }
.modal-finestra h3 {
  margin: 0 0 1rem 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.2rem;
  word-break: break-all;
  padding-right: 2.5rem;
}
.modal-pestanyes {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.modal-pestanyes .tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 1rem;
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}
.modal-pestanyes .tab-btn:hover { color: #111827; }
.modal-pestanyes .tab-btn.actiu {
  color: #15558C;
  border-bottom-color: #15558C;
}
.modal-contingut .tab-content {
  display: none;
  background: #1e1e1e;
  color: #e5e7eb;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 60vh;
  overflow: auto;
}
.modal-contingut .tab-content.actiu { display: block; }

/* Acció "marcar completat" al peu dels panells especials */
.form-completa-pas {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
  text-align: right;
}

[data-tema="fosc"] .modal-finestra { background: #1f2937; color: #f3f4f6; }
[data-tema="fosc"] .modal-tanca { color: #9ca3af; }
[data-tema="fosc"] .modal-tanca:hover { background: #374151; color: #f3f4f6; }
[data-tema="fosc"] .modal-pestanyes { border-bottom-color: #374151; }
[data-tema="fosc"] .modal-pestanyes .tab-btn { color: #9ca3af; }
[data-tema="fosc"] .modal-pestanyes .tab-btn:hover { color: #f3f4f6; }
[data-tema="fosc"] .modal-pestanyes .tab-btn.actiu { color: #3b82f6; border-bottom-color: #3b82f6; }
[data-tema="fosc"] .form-completa-pas { border-top-color: #374151; }

/* ============================================================
 * Canvi 31 v68 — Capçalera ACT-01 + badges passos per actiu
 * ============================================================ */
.capcalera-panell-actius {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.cel-passos {
  max-width: 14rem;
}
.badge-pas {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  margin: 0.1rem 0.2rem 0.1rem 0;
  background: #dbeafe;
  color: #1e40af;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  border-radius: 3px;
  border: 1px solid #bfdbfe;
}
[data-tema="fosc"] .badge-pas {
  background: rgba(30, 64, 175, 0.3);
  color: #93c5fd;
  border-color: #1e40af;
}

/* ============================================================
 * Canvi 31 v69 — Panell resultats per actiu (peu del pas)
 * ============================================================ */
.panell-resultats-pas {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.panell-resultats-pas h2 {
  margin-top: 0;
  color: #075985;
}
.resultat-mini-pre {
  font-size: 0.78rem;
  background: #f9fafb;
  padding: 0.5rem;
  border-radius: 4px;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #374151;
}
[data-tema="fosc"] .panell-resultats-pas {
  background: rgba(7, 89, 133, 0.15);
  border-color: #075985;
}
[data-tema="fosc"] .panell-resultats-pas h2 { color: #7dd3fc; }
[data-tema="fosc"] .resultat-mini-pre {
  background: #111827;
  color: #e5e7eb;
}

/* ============================================================
   Canvi 31 v70 — Panells OUT/QA
   ============================================================ */
.panell-pas-especial {
  background: #ffffff;
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin: 1.5rem 0;
}
.severitat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.severitat-grid .sev {
  padding: 1rem 0.5rem;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
}
.severitat-grid .sev .n { display: block; font-size: 1.6rem; line-height: 1; }
.severitat-grid .sev .l { display: block; font-size: 0.75rem; margin-top: 0.3rem; opacity: 0.85; }
.sev-critic  { background: #fee2e2; color: #991b1b; }
.sev-alt     { background: #fef3c7; color: #92400e; }
.sev-mitja   { background: #dbeafe; color: #1e40af; }
.sev-baix    { background: #e5e7eb; color: #374151; }
.sev-info    { background: #f3f4f6; color: #6b7280; }
.sev-sense   { background: #fef9c3; color: #713f12; }

.taula-informes, .taula-revisar-client, .taula-derivacions {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
}
.taula-informes th, .taula-informes td,
.taula-revisar-client th, .taula-revisar-client td,
.taula-derivacions th, .taula-derivacions td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
  font-size: 0.9rem;
}
.taula-informes th, .taula-revisar-client th, .taula-derivacions th {
  background: #f3f4f6;
  font-weight: 600;
}

.checklist-publicar { list-style: none; padding: 0; }
.checklist-publicar li {
  padding: 0.55rem 0.75rem;
  margin: 0.4rem 0;
  border-radius: 4px;
  font-size: 0.95rem;
}
.checklist-publicar li.ok { background: #dcfce7; color: #14532d; }
.checklist-publicar li.ko { background: #fee2e2; color: #991b1b; }

.qa-item {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.85rem;
  margin: 0.75rem 0;
  background: #f9fafb;
}
.qa-item.qa-revisat { background: #f0fdf4; border-color: #86efac; }
.qa-item-header { font-weight: 600; margin-bottom: 0.5rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.qa-item pre {
  background: #ffffff;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  max-height: 150px;
  overflow: auto;
  margin: 0.5rem 0;
  white-space: pre-wrap;
}
.qa-form { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.boto-petit {
  padding: 0.35rem 0.7rem;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.boto-petit:hover { background: #f3f4f6; }

.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-ok { background: #dcfce7; color: #14532d; }
.badge-pendent { background: #fef3c7; color: #92400e; }
.badge-acceptat { background: #dbeafe; color: #1e40af; }
.badge-rebutjat { background: #fee2e2; color: #991b1b; }
.badge-consumit { background: #e5e7eb; color: #374151; }
.badge-sev-critic { background: #fee2e2; color: #991b1b; }
.badge-sev-alt    { background: #fef3c7; color: #92400e; }
.badge-sev-mitja  { background: #dbeafe; color: #1e40af; }
.badge-sev-baix   { background: #e5e7eb; color: #374151; }
.badge-sev-info   { background: #f3f4f6; color: #6b7280; }

.alerta { background: #fef3c7; color: #92400e; padding: 0.75rem 1rem; border-radius: 4px; border-left: 3px solid #f59e0b; }
.alerta-ok { background: #dcfce7; color: #14532d; padding: 0.75rem 1rem; border-radius: 4px; border-left: 3px solid #22c55e; }