/* ============================================================
   PARLAMALAMENT · tràmits (001 autolegitimació · 002 propostes · 003 vinculació)
   Estètica "seu electrònica / Agència Tributària / BOE": panell blanc sobri,
   assistent per passos, formularis, animació de verificació i certificat/justificant.
   Carrega: base.css + chrome.css + components.css + tramit.css.
   ============================================================ */

/* L'atribut [hidden] ha de guanyar sempre: algunes seccions tenen display
   propi (p. ex. .tramit-animacio { display:grid }) que, en ser estil d'autor,
   anul·laria el display:none del navegador. Amb !important queda garantit. */
[hidden] { display: none !important; }

/* Honeypot anti-spam: fora de pantalla, invisible i no enfocable */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Panell blanc (paper) sobre el fons de marca, com les pàgines de guia */
.tramit {
  counter-reset: fg;
  background: var(--paper);
  box-shadow: var(--shadow);
  max-width: 820px;
  margin: 24px auto 40px;
  padding: 0 0 32px;
  position: relative;
  z-index: 1;
}
.tramit > * { padding-inline: clamp(20px, 5vw, 48px); }

/* Capçalera institucional del tràmit (banda superior) */
.tramit-masthead {
  background: var(--red); color: #fff;
  padding-block: 18px 16px; margin-bottom: 0;
}
.tramit-masthead .seu { font-size: .82rem; letter-spacing: .02em; opacity: .92; }
.tramit-masthead h1 { margin: 4px 0 0; font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 300; }
.tramit-masthead .codi {
  display: inline-block; margin-top: 8px; font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; background: rgba(0,0,0,.18); padding: 3px 9px;
}

/* ---------- Portada ---------- */
.tramit-portada { padding-top: 26px; }
.tramit-portada .lead { font-size: 1.05rem; max-width: 60ch; margin: 0 0 14px; }
.tramit-portada ul { max-width: 60ch; margin: 0 0 22px; padding-left: 20px; }
.tramit-portada li { margin: 6px 0; }
.tramit-portada .start-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tramit-disclaimer { font-size: .9rem; color: var(--ink-soft); border-left: 3px solid var(--line); padding-left: 12px; margin: 18px 0; max-width: 62ch; }

/* ---------- Barra de progrés ---------- */
.tramit-progress { padding-top: 22px; }
.tramit-progress .bar { height: 8px; background: var(--gray-bg); overflow: hidden; }
.tramit-progress .bar > span { display: block; height: 100%; width: 0; background: var(--red); transition: width .3s ease; }
.tramit-progress .step-label { margin: 8px 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; }

/* ---------- Pas / preguntes ---------- */
.step-head { margin: 18px 0 18px; }
.step-head .step-sigla {
  display: inline-block; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; padding: 3px 9px; margin-bottom: 8px;
}
.step-head h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--red); }
.step-head .step-intro { margin: 8px 0 0; color: var(--ink-soft); max-width: 60ch; }

.q { border: 0; margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.q legend, .q-text > label { font-weight: 600; font-size: 1.02rem; padding: 0; margin-bottom: 10px; display: block; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opts-choice { flex-direction: column; }

/* Opció com a targeta seleccionable (amaguem el radio natiu) */
.opt {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line); background: #fff;
  padding: 10px 16px; cursor: pointer; font-size: 1rem;
  transition: border-color .12s ease, background .12s ease;
  flex: 0 1 auto;
}
.opts-yesno .opt { min-width: 120px; justify-content: center; }
.opt:hover { border-color: var(--red); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt span { line-height: 1.3; }
.opt.sel { border-color: var(--red); background: var(--red-tint); color: var(--red); font-weight: 600; }
.opt:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Camp de text (annex i formularis llargs) */
.q-text textarea, .field textarea, .field input, .field select {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  border: 1.5px solid var(--line); background: #fff; padding: 10px 12px;
}
.q-text textarea { resize: vertical; }
.q-text textarea:focus-visible,
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--red); }

/* ---------- Navegació de l'assistent ---------- */
.tramit-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 2px solid var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: var(--gray-bg); }
.btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.tramit-error { color: var(--red-dark); font-weight: 600; margin: 12px 0 0; min-height: 1.2em; }

/* ---------- Formularis 002/003 ---------- */
.field { margin: 0 0 16px; }
.field > label, .field .sublabel { display: block; font-weight: 600; margin: 0 0 6px; }
.field .req { color: var(--red); }
.field .hint { font-size: .85rem; color: var(--ink-soft); margin: 4px 0 0; }
/* Cada bloc del formulari és un panell numerat (estil tràmit de seu electrònica) */
.field-group {
  counter-increment: fg;
  position: relative;   /* àncora del segell numerat de la cantonada */
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper-soft);
  padding: 16px 20px 20px; margin: 0 0 16px;
  display: flow-root;   /* conté el legend flotant (títol sempre dins del panell) */
}
/* Segell numerat "enganxat" a la cantonada superior esquerra del panell (toc de
   seu electrònica paròdica): sobresurt una mica i va lleugerament girat. */
.field-group::before {
  content: counter(fg);
  position: absolute; top: -12px; left: -12px; z-index: 2;
  width: 2em; height: 2em;
  display: grid; place-items: center;
  background: var(--red); color: #fff; border-radius: 50%;
  font-size: .95rem; font-weight: 700;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  transform: rotate(-8deg);
}
/* El <legend> nadiu se situa SOBRE la vora superior del panell; en fer wrap a
   dues línies (mòbil) la 2a línia xocava amb la vora. El tornem un bloc normal
   (float + width:100%) perquè segui net DINS del panell i la vora es dibuixi
   sencera per damunt. El segell numerat sobresurt per la cantonada, així que el
   títol pot anar alineat a l'esquerra sense xocar-hi. */
.field-group > legend {
  float: left; width: 100%;
  font-weight: 700; color: var(--red); font-size: 1.1rem; padding: 0; margin-bottom: 14px;
}
.field-group > legend + * { clear: both; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; }
.check {
  display: flex; align-items: flex-start; gap: 8px; font-size: .98rem; cursor: pointer;
  padding: 6px 8px; border: 1px solid transparent;
}
.check:hover { border-color: var(--line); background: var(--paper-hover); }
.check input { margin-top: 3px; accent-color: var(--red); width: 16px; height: 16px; flex: none; }
.check.sel { color: var(--red); }

/* ---------- Animació de verificació ---------- */
.tramit-animacio { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.anim-card { max-width: 460px; }
.anim-spinner {
  width: 46px; height: 46px; margin: 0 auto 22px; border-radius: 50%;
  border: 4px solid var(--gray-bg); border-top-color: var(--red);
  animation: tramit-spin .9s linear infinite;
}
@keyframes tramit-spin { to { transform: rotate(360deg); } }
.anim-msg { font-size: 1.15rem; color: var(--ink); min-height: 1.6em; margin: 0 0 18px; }
.anim-bar { height: 8px; background: var(--gray-bg); overflow: hidden; max-width: 340px; margin: 0 auto; }
.anim-bar > span { display: block; height: 100%; width: 0; background: var(--red); transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .anim-spinner { animation: none; } }

/* ---------- Certificat / Justificant ---------- */
.tramit-certificat, .tramit-justificant { padding-top: 26px; }
.cert, .justif {
  border: 2px solid var(--red); padding: 0 0 26px; background: #fff;
}
.cert > *, .justif > * { padding-inline: clamp(18px, 4vw, 34px); }
.cert-band, .justif-band {
  background: var(--red); color: #fff; padding: 10px clamp(18px, 4vw, 34px);
  font-size: .8rem; letter-spacing: .04em; font-weight: 600;
}
.cert-title, .justif-title { color: var(--red); font-weight: 300; font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 18px 0 6px; }
.cert-result, .justif-state { font-size: 1.1rem; margin: 0 0 16px; }
.cert-result strong, .justif-state strong { color: var(--green-text); letter-spacing: .04em; }
.justif-state strong { color: var(--red); }

.cert-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; margin: 0 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 14px; }
.cert-meta > div { display: flex; flex-direction: column; gap: 2px; }
.cert-meta dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.cert-meta dd { margin: 0; font-weight: 600; }
.cert-body { max-width: 64ch; }
.cert-obs, .cert-annex { margin: 16px 0 0; }
.cert-obs h3, .cert-annex h3 { color: var(--red); font-size: 1rem; margin: 0 0 6px; }
.cert-annex p { margin: 0 0 10px; font-size: .96rem; }
.cert-foot { font-size: .85rem; color: var(--ink-soft); font-style: italic; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
.cert-actions, .justif-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 20px; }

.justif-msg { max-width: 64ch; margin: 0 0 8px; }
.justif-final { font-style: italic; color: var(--ink-soft); margin: 14px 0 0; }

/* Tornar */
.tramit-back { display: inline-block; margin: 18px 0 0; color: var(--red); font-weight: 600; text-decoration: none; }
.tramit-back:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .tramit { margin: 0 auto; box-shadow: none; }
  .grid-2, .cert-meta { grid-template-columns: 1fr; }
  .tramit-nav { flex-direction: row; }
}
/* Mòbils molt estrets: els botons de l'assistent s'apilen (evita desbordament) */
@media (max-width: 380px) {
  .tramit-nav { flex-direction: column-reverse; }
  .tramit-nav .btn { width: 100%; }
}