/* §10 fila 58 (1-oct-2026): el marc `layout-admin.twig`.

   Es carrega DESPRÉS d'app.css i en fa servir les variables —colors,
   tipografia, mode fosc i el --brand que el marc injecta—: aquí no hi ha cap
   color nou, i el mode fosc arriba sol. Dues cares, que tria la plantilla amb
   la classe del <body>:

   - .marc-targeta: la targeta centrada de les pantalles sense barra (login,
     /e/identify, legals i errors). Són les que veu el CLIENT.
   - .marc-tauler: el back-office de P13, amb la barra a dalt.

   ⚠️ Res d'aquí demana marcatge nou a les taules: AdminTest hi compara
   cadenes literals (`<a href=…>`, `<td>—</td>`), i l'estil va per selectors
   d'element dins de la classe del <body>. Els botons destructius es
   reconeixen pel `confirm()` del seu formulari, que ja hi era. */

/* ─── Comú ─────────────────────────────────────────────────────────── */
.marc-targeta h1,.marc-tauler h1{font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.02em;font-weight:800;line-height:1.1;margin:0 0 10px}
.marc-tauler h2{font-size:1.05rem;font-weight:750;letter-spacing:-.01em;margin:34px 0 12px}
.marc-targeta main p,.marc-tauler p{margin:0 0 12px;color:var(--ink-2)}
.marc-targeta main a,.marc-tauler a{color:var(--red);text-underline-offset:2px}

/* Camps */
.marc-targeta label,.marc-tauler label{display:block;font-size:12.5px;font-weight:650;color:var(--ink-2);margin:14px 0 5px}
.marc-targeta input:not([type=checkbox]):not([type=hidden]),
.marc-tauler input:not([type=checkbox]):not([type=hidden]),
.marc-tauler select,.marc-tauler textarea{
  width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font:inherit;font-size:14.5px}
.marc-tauler input:not([type=checkbox]):not([type=hidden]),.marc-tauler select,.marc-tauler textarea{max-width:440px}
.marc-targeta input:focus,.marc-tauler input:focus,.marc-tauler select:focus,.marc-tauler textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent)}
.marc-targeta ::placeholder,.marc-tauler ::placeholder{color:var(--muted)}

/* Botons: primari amb el color de la marca; destructiu, en contorn */
.marc-targeta main button,.marc-tauler button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;
  background:var(--red);color:var(--on-brand);border:1px solid var(--red);border-radius:9px;
  padding:9px 16px;font-size:14px;font-weight:650;cursor:pointer}
.marc-targeta main button:hover,.marc-tauler button:hover{background:var(--red-deep);border-color:var(--red-deep)}
.marc-tauler form[data-confirm] button{background:var(--surface);color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.marc-tauler form[data-confirm] button:hover{background:var(--red-soft);border-color:var(--red)}
.marc-tauler button:disabled{background:var(--surface-2);color:var(--muted);border-color:var(--line);cursor:not-allowed}

/* Avisos: el que ha anat bé, el que no, i el que s'ha de copiar ara */
.marc-targeta [role=status],.marc-tauler [role=status]{
  background:var(--ok-bg);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);
  border-radius:10px;padding:10px 14px;font-weight:600}
.marc-targeta [role=alert],.marc-tauler [role=alert],.marc-tauler .error{
  background:var(--red-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--red) 35%,transparent);
  border-radius:10px;padding:10px 14px}
/* El text legal pendent (P16a) és un avís, no un error */
.marc-targeta [data-text-pendent]{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.marc-targeta ul[role=alert],.marc-tauler ul[role=alert]{margin:0 0 12px;padding-left:32px}
.marc-tauler .error{margin:6px 0 0;font-size:13px;max-width:440px}
/* P20: el text d'ajuda d'un camp (templates/admin/_components.twig) */
.marc-tauler .ajuda{margin:4px 0 0;font-size:13px;color:var(--muted)}
.marc-tauler [data-enllac-nou]{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 40%,transparent);margin:0 0 16px}
.marc-tauler [data-enllac-nou] p{color:var(--ink)}
.marc-tauler [data-token]{display:block;margin:8px 0 10px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;font-family:var(--mono);font-size:13px;word-break:break-all;user-select:all}

/* ─── La targeta ───────────────────────────────────────────────────── */
body.marc-targeta{min-height:100vh;display:flex;flex-direction:column;padding:0}
.marc-targeta main{width:calc(100% - 32px);max-width:440px;margin:auto;padding:30px 28px 26px;background:var(--surface);
  border:1px solid var(--line);border-top:4px solid var(--red);border-radius:16px;box-shadow:var(--shadow)}
.marc-targeta.marc-ampla main{max-width:720px}
.marc-targeta form button[type=submit]{width:100%;padding:11px 16px;font-size:15px;margin-top:22px}
/* La casella del consentiment: al costat del text, no a sobre. Posicionada
   i no amb flex: amb flex, el text i l'enllaç eren peces separades i hi
   sortien espais de més («Accepto la  política  .»). */
.marc-targeta label:has(input[type=checkbox]){position:relative;padding-left:27px;font-size:13.5px;font-weight:500;line-height:1.45;margin-top:18px}
.marc-targeta input[type=checkbox]{position:absolute;left:0;top:1px;width:17px;height:17px;margin:0;accent-color:var(--red)}

/* La targeta va entre la capçalera i el peu de l'APLICACIÓ: el cos és una columna i la targeta, amb els
   marges automàtics, es queda al centre del que sobra; els 24px són l'aire mínim quan la finestra és baixa. */
.marc-targeta .topbar{margin-bottom:24px}
.marc-targeta footer{width:100%;margin-top:24px}
/* Sense controls a la barra hi ha lloc per al nom també en mòbil (app.css l'amaga per fer-los lloc). */
.marc-targeta .pa-brand .txt{display:block}

/* La targeta amb el marc de la PORTADA (`layout-portada.twig`: el login, §10 fila 71). La capçalera i el peu són els
   de landing.css, tal com són; la targeta hi pren l'accent de la portada —el blau d'Artyplan— en lloc del vermell
   de marca, perquè aquestes pantalles són d'Artyplan i no d'un client. Les variables van al <body>, que és on
   landing.css declara `--lp-accent`, i el mode fosc arriba sol. */
body.marc-targeta.lp{--red:var(--lp-accent);--red-deep:color-mix(in srgb,var(--lp-accent) 82%,black);
  --red-soft:color-mix(in srgb,var(--lp-accent) 12%,var(--surface));--on-brand:var(--lp-accent-ink)}
.marc-targeta .lp-top{margin-bottom:24px}
.marc-targeta .lp-peu{margin-top:24px}

/* ─── El tauler ────────────────────────────────────────────────────── */
.marc-tauler main{max-width:1180px;padding:26px 20px 70px}

/* La barra, com la .topbar del portal */
.marc-tauler [data-nav-admin]{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:10px 20px;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.marc-tauler .marc-nom{font-weight:800;letter-spacing:-.02em;margin-right:14px;padding-left:12px;border-left:4px solid var(--red);line-height:1.2}
.marc-tauler [data-nav-admin] a{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:600;padding:7px 11px;border-radius:9px}
.marc-tauler [data-nav-admin] a:hover{background:var(--surface-2);color:var(--ink)}
.marc-tauler [data-nav-admin] .nav-compte{margin-left:auto;display:flex;align-items:center;gap:4px}
.marc-tauler [data-nav-admin] form{margin:0}
.marc-tauler [data-nav-admin] button{margin:0;background:var(--surface);color:var(--ink-2);border-color:var(--line);font-size:13px;padding:6px 12px}
.marc-tauler [data-nav-admin] button:hover{background:var(--surface-2);border-color:var(--red);color:var(--ink)}

/* Taules */
.marc-tauler table{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 8px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);font-size:14px}
.marc-tauler th,.marc-tauler td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.marc-tauler thead th{background:var(--surface-2);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.marc-tauler tbody tr:last-child>*{border-bottom:0}
.marc-tauler tbody tr:hover{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.marc-tauler tbody th{font-weight:600}
/* Els comptes per estat de l'inici: dues columnes, no tota l'amplada */
.marc-tauler table:has(tbody th[data-estat]){width:auto;min-width:320px}
.marc-tauler td a{font-weight:650}
.marc-tauler td ul{margin:0;padding:0;list-style:none}
.marc-tauler td li+li{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.marc-tauler [data-cost]{color:var(--muted);font-size:13px}

/* Formularis dins d'una cel·la o en una fila (PVP, revocar, filtres,
   enllaç nou): en línia, no en columna */
.marc-tauler td form,.marc-tauler form[method=get],.marc-tauler form[action$="/links"]{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.marc-tauler td form label,.marc-tauler form[method=get] label,.marc-tauler form[action$="/links"] label{margin:0}
/* Amb els dos :not() de la regla general, o aquesta perd per especificitat */
.marc-tauler td form input:not([type=checkbox]):not([type=hidden]){width:auto;max-width:140px;padding:6px 10px;font-size:13.5px}
.marc-tauler form[method=get] input:not([type=checkbox]):not([type=hidden]),
.marc-tauler form[action$="/links"] input:not([type=checkbox]):not([type=hidden]){width:auto;flex:1 1 220px}
.marc-tauler form[method=get] select{width:auto;flex:0 1 200px}
.marc-tauler form[action$="/links"]{max-width:640px}
.marc-tauler td form button,.marc-tauler form[method=get] button,.marc-tauler form[action$="/links"] button{margin:0}
.marc-tauler td form button{padding:6px 12px;font-size:13px}
.marc-tauler td form .error{flex-basis:100%;max-width:none;margin:0}
.marc-tauler form[method=get]{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 14px}

/* Les transicions d'estat: un botó per formulari, en fila */
.marc-tauler form[data-transicio]{display:inline-block;vertical-align:top;margin:0 10px 10px 0}
.marc-tauler form[data-transicio] label{margin-top:0}
.marc-tauler form[data-transicio] button{margin-top:8px}
.marc-tauler form[data-transicio]:has(textarea){display:block;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}

/* La fitxa de l'esdeveniment: el formulari com a targeta */
.marc-tauler form[action^="/admin/events/"]:not([action$="/links"]){background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-sm);padding:6px 20px 20px;max-width:520px}

/* El detall de la sol·licitud */
.marc-tauler dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0 0 8px;padding:16px 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;max-width:720px}
.marc-tauler dt{color:var(--muted);font-size:13px;font-weight:600}
.marc-tauler dd{margin:0}
.marc-tauler [data-estat]{font-family:var(--mono);font-size:12.5px}
.marc-tauler [data-total]{font-weight:700;color:var(--ink);margin-top:14px}

/* La paginació */
.marc-tauler [data-paginacio]{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:14px}
.marc-tauler [data-paginacio] a{padding:6px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);text-decoration:none}

/* Mòbil: les taules es desplacen soles, i la pàgina no */
@media (max-width:760px){
  .marc-tauler main{padding:18px 16px 60px}
  .marc-tauler [data-nav-admin]{padding:8px 12px}
  .marc-tauler .marc-nom{width:100%;margin:0 0 4px}
  .marc-tauler table{display:block;overflow-x:auto;white-space:nowrap}
  .marc-tauler td form{white-space:normal}
  .marc-tauler dl{grid-template-columns:1fr;gap:2px}
  .marc-tauler dd{margin-bottom:8px}
  .marc-targeta main{padding:24px 20px 22px}
}

/* §10 fila 13 (22-oct-2026): la consulta d'una sol·licitud, a la targeta ampla del client. */
.consulta-context{font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.consulta-estat{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:650;margin:0 0 18px}
.consulta-estat[data-estat=aceptada]{background:var(--ok-bg);color:var(--ok)}
.consulta-estat[data-estat=borrador],.consulta-estat[data-estat=rechazada]{background:var(--warn-bg);color:var(--ink)}
.consulta-dades{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 18px}
.consulta-dades dt{color:var(--ink-2);font-size:14px}
.consulta-dades dd{margin:0;font-weight:600}
.consulta-iva{font-weight:400;color:var(--ink-2);font-size:13px}
.consulta-avis{padding:10px 14px;border-radius:10px;background:var(--warn-bg)}
.consulta h2{font-size:16px;margin:22px 0 10px}
.consulta-linies{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 18px}
.consulta-linies th,.consulta-linies td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.consulta-linies th{font-size:12.5px;color:var(--ink-2);font-weight:650}
.consulta-linies .num{text-align:right;white-space:nowrap}
.consulta-peu{font-size:14px}

/* D-35 (26-oct-2026): el tauler d'admin_artyplan i la marca on treballa. */
.marca-activa{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:650}
.marc-tauler table tr[aria-current] th,.marc-tauler table tr[aria-current] td{background:var(--red-soft)}
.marca-hi-ets{font-size:13px;font-weight:650;color:var(--ink-2)}