/* Pàgina "Tràmits" — iniciar tràmits a Canal Empresa i seguir-ne l'estat.
   Base d'estils compartida amb index/fv/lga (paleta oti.cat) + blocs propis. */
:root {
  --bg:          #f0f2f5;
  --card:        #ffffff;
  --border:      #dde1e8;
  --border-warm: rgba(212,130,10,0.22);
  --acc:         #d4820a;
  --acc2:        #b06d08;
  --signal:      #52b4bc;
  --text:        #1a2035;
  --muted:       rgba(26,32,53,0.6);
  --tint:        #fdf6ec;
  --red:         #e74c3c;
  --green:       #2e7d32;
  --r:           8px;
  --sh:          0 2px 8px rgba(0,0,0,.08);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }

/* ── Capçalera i navegació (idèntiques a la resta de pàgines) ── */
header { background:#fff; color:var(--text); padding:0; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.hdr-top { display:flex; justify-content:space-between; align-items:center; padding:12px 24px 10px; gap:16px; flex-wrap:wrap; }
.hdr-actions { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.hdr-brand-wrap { display:flex; align-items:center; gap:16px; }
.logo { display:flex; flex-direction:column; line-height:1; }
.logo-main { font-size:22px; font-weight:900; color:var(--acc); letter-spacing:0; }
.logo-sub-wrap { width:0; overflow:visible; white-space:nowrap; margin-top:-4px; }
.logo-sub { display:inline-block; font-size:10px; color:var(--muted); letter-spacing:-.2px; transform:scale(.55); transform-origin:left top; }
.header-divider { width:1px; height:24px; background:var(--border-warm); }
.header-label { font-size:9px; font-weight:700; color:var(--muted); letter-spacing:3px; text-transform:uppercase; }
.hdr-info { background:#f4f6f9; border-bottom:1px solid var(--border); padding:8px 24px; font-size:11px; line-height:1.6; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.hdr-info-text { flex:1; }
.hdr-info a { color:var(--acc); font-weight:700; text-decoration:underline; }
.hdr-info strong { color:var(--text); }
.hdr-info .wa-link { display:flex; align-items:center; flex-shrink:0; }
.hdr-info .wa-link img { height:20px; width:auto; display:block; }
.hdr-nav { background:#fff; border-bottom:1px solid var(--border); padding:10px 24px; }
.nav-toggle { display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; max-width:900px; margin:0 auto; }
.nav-toggle a, .nav-toggle span { flex:1 1 auto; padding:9px 12px; text-align:center;
  font-size:13px; font-weight:600; line-height:1.35; text-decoration:none;
  border-right:1px solid var(--border); transition:background .15s, color .15s; }
.nav-toggle a:last-child, .nav-toggle span:last-child { border-right:none; }
.nav-toggle .active { background:var(--acc); color:#fff; cursor:default; }
.nav-toggle a { background:var(--tint); color:var(--acc); }
.nav-toggle a:hover { background:#f6e8cf; }
@media (max-width:700px) {
  .hdr-nav { padding:10px 12px; }
  .nav-toggle { flex-direction:column; max-width:none; }
  .nav-toggle a, .nav-toggle span { border-right:none; border-bottom:1px solid var(--border); }
  .nav-toggle a:last-child, .nav-toggle span:last-child { border-bottom:none; }
  .hdr-info { padding:8px 12px; }
}

main { max-width: 960px; margin: 20px auto; padding: 0 14px 40px;
       display: flex; flex-direction: column; gap: 14px; }

.card { background: var(--card); border: 1px solid var(--border);
        border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.card-hdr { background: var(--acc); border-bottom: 1px solid var(--acc2); padding: 9px 16px; }
.card-hdr h2 { font-size: 11px; font-weight: 700; text-transform: uppercase;
               letter-spacing: .6px; color: #fff; }
.card-body { padding: 16px; }

.row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.row:last-child { margin-bottom: 0; }
.f   { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 140px; }
.f.w { min-width: 240px; }
.f.n { min-width: 110px; max-width: 180px; }
.f.full { flex: 1 1 100%; }
.lbl { font-size: 10px; font-weight: 700; text-transform: uppercase;
       letter-spacing: .4px; color: var(--muted); }
.hint { font-size: 10px; color: var(--muted); margin-top: 2px; }
.req  { color: var(--red); }
.hidden { display: none !important; }
/* Amaga sense treure de la maqueta: així els filtres no es desplacen */
.invisible { visibility: hidden !important; }

input[type=text], input[type=search], select {
  background: #f8f9fb; border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 9px; font-size: 13px; color: var(--text); width: 100%;
  font-family: inherit; transition: border-color .15s; }
input:focus, select:focus { outline: none; border-color: var(--acc); background: #fff; }
input::placeholder { color: #bbb; }
input.invalid { border-color: var(--red); background: #fff5f5; }
input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .5px; }

.info-box { background: #e8f6f7; border: 1px solid #b8e0e3; border-radius: 6px;
            padding: 8px 12px; font-size: 11.5px; color: #2c7a80; }
.warn-box { background: #fff3e0; border: 1px solid #ffcc80; border-radius: 6px;
            padding: 8px 12px; font-size: 11.5px; color: #e65100; }

.btn-dl { background: var(--acc); color: #fff; border: none; border-radius: 7px;
          padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer;
          transition: background .15s; white-space: nowrap; }
.btn-dl:hover { background: var(--acc2); }
.btn-dl:disabled { opacity: .55; cursor: default; }
.btn-file, .btn-sec { display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--text);
            border:1px solid var(--border); border-radius:7px; padding:8px 14px;
            font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; transition:all .15s; }
.btn-file:hover, .btn-sec:hover { border-color:var(--acc); color:var(--acc); background:var(--tint); }
.btn-sm { padding:5px 10px; font-size:11.5px; border-radius:6px; }
.btn-del { background: none; border: none; cursor: pointer; color: #bbb;
           font-size: 15px; padding: 2px 6px; border-radius: 3px; line-height: 1; }
.btn-del:hover { color: var(--red); background: #fef2f2; }

/* Zona de compte (xip + menú) */
.acct { position:relative; }
.acct-login { display:inline-flex; align-items:center; gap:6px; background:var(--acc); color:#fff;
              border:none; border-radius:20px; padding:6px 14px; font-size:12px; font-weight:700;
              text-decoration:none; transition:background .15s; }
.acct-login:hover { background:var(--acc2); }
.acct-chip { display:inline-flex; align-items:center; gap:6px; background:#fff;
             color:var(--text); border:1px solid var(--border); border-radius:20px;
             padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.acct-chip:hover { border-color:var(--acc); color:var(--acc); background:var(--tint); }
.acct-caret { font-size:10px; opacity:.85; }
.acct-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:220px;
             background:#fff; color:var(--text); border:1px solid var(--border);
             border-radius:8px; box-shadow:var(--sh); padding:6px; z-index:1000; display:none; text-align:left; }
.acct-menu.open { display:block; }
.acct-menu-name { font-weight:700; font-size:13px; padding:6px 10px 0; }
.acct-menu-sub { font-size:11px; color:var(--muted); padding:0 10px 6px; }
.acct-menu-sep { height:1px; background:var(--border); margin:4px 0; }
.acct-menu a { display:block; padding:8px 10px; border-radius:6px; font-size:13px;
               color:var(--text); text-decoration:none; }
.acct-menu a:hover { background:var(--tint); color:var(--acc); }

/* ════════════════════════════════════════════════════════════════ */
/*  Segmented control: Iniciar | Seguiment                            */
/* ════════════════════════════════════════════════════════════════ */
.seg { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;
       max-width:520px; margin:0 auto; background:#fff; box-shadow:var(--sh); }
.seg button { flex:1; padding:10px 14px; border:none; border-right:1px solid var(--border);
              background:var(--tint); color:var(--acc); font-size:13px; font-weight:700;
              font-family:inherit; cursor:pointer; transition:background .15s, color .15s; }
.seg button:last-child { border-right:none; }
.seg button.on { background:var(--acc); color:#fff; cursor:default; }

/* ── Bloc A: tiles agrupades per registre (RITSIC · RAC · genèrica) ── */
.tiles-grup { margin-top: 16px; }
.tiles-grup:first-child { margin-top: 0; }
.tiles-grup-hdr { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  color:var(--text); padding-bottom:6px; border-bottom:1px solid var(--border-warm);
  margin-bottom:8px; flex-wrap:wrap; }
/* ── Bloc A: graella de tiles per iniciar tràmits ── */
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:10px; }
.tile { border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#fff;
        display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s; }
.tile:hover { border-color:var(--acc); box-shadow:var(--sh); }
.tile-hdr { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--tint);
            border-bottom:1px solid var(--border-warm); }
.tile-doc { font-size:9px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
            color:#fff; background:var(--signal); border-radius:3px; padding:2px 6px; }
.tile-doc.ritsic { background:var(--acc); }
.tile-doc.generica { background:#7a8a9e; }
.tile-titol { font-size:12.5px; font-weight:700; line-height:1.3; }
.tile-body { padding:10px 12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tile-sub { font-size:11px; color:var(--muted); line-height:1.45; flex:1; }
.tile-id { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; color:var(--muted); }
.tile-acc { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tile-req { font-size:10.5px; color:#e65100; background:#fff3e0; border:1px solid #ffcc80;
            border-radius:5px; padding:4px 7px; }

/* Panell de preparació dins la tile: codi personal per al formulari OVT */
.tile-prep { border-top:1px solid var(--border); margin-top:8px; padding-top:8px; }
.prep-hdr { font-size:11.5px; color:var(--muted); line-height:1.45; margin-bottom:6px; }
.codi-box { background:var(--tint); border:1px solid var(--border-warm); border-radius:6px; padding:9px 10px; }
.codi-lbl { font-size:10.5px; color:var(--muted); line-height:1.4; }
.codi-val { display:flex; align-items:center; gap:8px; margin-top:5px; }
.codi-val code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:16px;
                 font-weight:800; letter-spacing:1px; color:var(--acc2); }

/* ── Bloc B: llista de seguiment ── */
.tr-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px;
              flex-wrap:wrap; margin-bottom:10px; }
.tr-filtre { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
/* Segments de filtre (Oberts|Tancats · RITSIC|RAC|Genèrica): el mateix llenguatge
   visual que `.seg`, en petit i alineat a la barra d'eines. */
.seg-sm { display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden;
          background:#fff; }
.seg-sm button { padding:6px 11px; border:none; border-right:1px solid var(--border);
                 background:var(--tint); color:var(--acc); font-size:11.5px; font-weight:700;
                 font-family:inherit; cursor:pointer; transition:background .15s, color .15s; }
.seg-sm button:last-child { border-right:none; }
.seg-sm button:hover { background:#f6e8cf; }
.seg-sm button.on { background:var(--acc); color:#fff; }
.seg-sm button.on:hover { background:var(--acc2); }
.tr-cerca { display:flex; align-items:center; gap:6px; }
.tr-cerca input { border:1px solid var(--border); border-radius:6px; padding:6px 9px;
                  font-size:12px; font-family:inherit; width:150px; background:#fff; }
.tr-cerca input:focus { outline:none; border-color:var(--acc); }
/* Paginació de la llista (15 per pàgina) */
.tr-pag { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px;
          font-size:11.5px; color:var(--muted); }
.tr-pag button { border:1px solid var(--border); border-radius:6px; background:#fff;
                 color:var(--acc); font-size:11.5px; font-weight:700; font-family:inherit;
                 padding:5px 10px; cursor:pointer; }
.tr-pag button:hover:not(:disabled) { background:var(--tint); }
.tr-pag button:disabled { color:var(--muted); cursor:default; opacity:.5; }
.tr-list { display:flex; flex-direction:column; gap:8px; }
.tr { border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#fff; }
.tr-main { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer;
           flex-wrap:wrap; }
.tr-main:hover { background:#fafbfd; }
.tr-codi { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:700;
           font-size:13px; letter-spacing:.5px; min-width:92px; }
/* Data de presentació: columna pròpia i en negreta (ordre i cerca hi van) */
.tr-data { font-size:12px; font-weight:800; white-space:nowrap; min-width:82px; }
/* Encara no consultat: la data que es veu és la d'alta de la fila, no la de gencat */
.tr-data.prov { font-weight:600; color:var(--muted); }
.tr-txt { flex:1; min-width:180px; display:flex; flex-direction:column; gap:1px; }
.tr-titol { font-size:12.5px; font-weight:600; line-height:1.3; }
.tr-meta { font-size:10.5px; color:var(--muted); }
.tr-caret { color:var(--muted); font-size:11px; }
.bdg { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10.5px;
       font-weight:700; white-space:nowrap; }
.bdg-doc { background:#e8f6f7; color:#2c7a80; border:1px solid #b8e0e3; }
.bdg-obert { background:#fdf6ec; color:var(--acc2); border:1px solid var(--border-warm); }
.bdg-tancat { background:#e7f4ea; color:var(--green); border:1px solid #b6ddc0; }
.bdg-desconegut { background:#f1f3f6; color:#5a6478; border:1px solid #d8dde5; }
/* Tràmit importat en fred: sense el JSON del formulari (no es pot regenerar) */
.bdg-nodades { background:#fff; color:var(--muted); border:1px dashed var(--border); font-weight:600; }
.tr-detail { border-top:1px solid var(--border); padding:12px; background:#fafbfd;
             display:flex; flex-direction:column; gap:12px; }
.tr-detail h3 { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
                color:var(--acc); margin-bottom:5px; }
.tr-acc { display:flex; gap:8px; flex-wrap:wrap; }
.tl { display:flex; flex-direction:column; gap:0; border-left:2px solid var(--border-warm);
      padding-left:10px; margin-left:3px; }
.tl-it { font-size:11.5px; padding:3px 0; }
.tl-it b { color:var(--text); }
.tl-it .tl-d { color:var(--muted); font-size:10.5px; }
.doc-list { display:flex; flex-direction:column; gap:5px; }
.doc-it { display:flex; align-items:center; gap:8px; font-size:12px; }
.doc-it .doc-grp { font-size:10px; color:var(--muted); }
/* Selector de sol·licituds de l'historial per adjuntar-ne el JSON */
.pick-list { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.pick-it { display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%; text-align:left;
           background:#fff; border:1px solid var(--border); border-radius:6px; padding:7px 9px;
           font-family:inherit; font-size:12px; color:var(--text); cursor:pointer; transition:all .15s; }
.pick-it:hover { border-color:var(--acc); background:var(--tint); }
.pick-txt { flex:1; min-width:160px; display:flex; flex-direction:column; gap:1px; }
.pick-vin { font-size:10.5px; color:var(--acc2); background:var(--tint);
            border:1px solid var(--border-warm); border-radius:10px; padding:1px 7px; }

/* Resposta de l'Administració: el document final (RITSIC/RAC) destacat a dalt
   del tràmit obert — és el que l'instal·lador ve a buscar. */
.resp-box { background:var(--tint); border:1px solid var(--acc); border-left:4px solid var(--acc);
            border-radius:var(--r); padding:10px 12px; box-shadow:var(--sh); }
.resp-box h3 { color:var(--acc2); }
.resp-txt { font-size:12px; color:var(--text); margin-bottom:8px; }
.resp-dl { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.resp-nom { font-size:10px; color:var(--muted); word-break:break-all; flex:1; min-width:120px; }
.resp-nota { font-size:11px; color:var(--acc2); font-weight:600; margin-top:4px; }

.req-it { font-size:11.5px; padding:6px 8px; border-radius:5px; background:#fff3e0;
          border:1px solid #ffcc80; color:#8a4b00; }
.req-it.ok { background:#e7f4ea; border-color:#b6ddc0; color:#1f5c23; }
/* Els documents del requeriment van DINS la seva fila: hi estan lligats per
   l'API (mateix objecte) i és on es llegeixen amb sentit. */
.req-it > div + div { margin-top:5px; }
.req-txt { font-size:11px; opacity:.85; }
.req-docs { display:flex; gap:6px; flex-wrap:wrap; }
.req-lim { font-size:10.5px; opacity:.75; font-style:italic; }
/* El text d'una petició genèrica: es llegeix com el que és, un escrit. */
.pet-txt { font-size:11.5px; white-space:pre-wrap; background:#fff; border:1px solid var(--border);
           border-radius:6px; padding:8px 10px; margin-top:5px; line-height:1.45; }

.buit { font-size:12px; color:var(--muted); font-style:italic; padding:10px 0; text-align:center; }
.buit a { color:var(--acc); font-weight:700; text-decoration:underline; cursor:pointer; }