/* Soporte Pro Service — estils propis. Sense Tailwind ni recursos de tercers; la CSP no admet estils en línia.
   Tokens de les maquetes v2.1: dos temes (clar i fosc, segons el sistema de l'usuari). Tot color surt d'aquí. */
:root {
  --bg: #f3f5f7; --surface: #ffffff; --fg: #1d2833; --muted: #5d6b78; --line: #d5dce3; --control-border: #7d8a98;
  --accent: #1f5f8b; --accent-soft: #e2edf5; --ok: #23764a; --ok-soft: #e1f2e8;
  --warn: #9a5b00; --warn-soft: #fbefd9; --err: #a83232; --err-soft: #f8e3e3;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radio: 0.5rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12171c; --surface: #1b232b; --fg: #e4eaf0; --muted: #9aa8b5; --line: #2e3a46; --control-border: #6b7f93;
    --accent: #6fb0de; --accent-soft: #1d3346; --ok: #6fcf98; --ok-soft: #173326;
    --warn: #e7b25c; --warn-soft: #3a2c14; --err: #ef8a8a; --err-soft: #3d1d1d;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 1rem; line-height: 1.5;
}
h1, h2, h3 { line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.5rem; margin: 0 0 1.25rem; }
h2 { font-size: 1.05rem; margin: 0; }
p { margin: 0 0 0.75rem; }
a { color: var(--accent); }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Foco visible a tot arreu (l'accent té ≥3:1 sobre tots els fons) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: 0.75rem 1rem;
  background: var(--accent); color: var(--surface); border-radius: var(--radio); font-weight: 600;
}
.saltar:focus { top: 0.5rem; }

/* Capçalera */
.cabecera { background: var(--surface); border-bottom: 1px solid var(--line); }
.cabecera-interior {
  max-width: 64rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem;
  padding: 0.5rem max(1rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left));
}
.marca { font-weight: 700; color: var(--fg); text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; margin-right: auto; }
.persona { color: var(--muted); font-size: 0.875rem; }
.cabecera form { margin: 0; }

/* Contingut */
.contenido {
  flex: 1; width: 100%; max-width: 64rem; margin: 0 auto;
  padding: 1.5rem max(1rem, env(safe-area-inset-right)) 3rem max(1rem, env(safe-area-inset-left));
}
.migas { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--muted); }
.migas a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Botons i controls (objectius tàctils ≥44 px) */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.5rem 1.1rem;
  border: 1px solid var(--accent); border-radius: 0.4rem; background: var(--accent); color: var(--surface);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn-sec, .cabecera button { background: transparent; color: var(--accent); }
.enlace {
  display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--accent);
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; max-width: 30rem; min-height: 2.75rem; padding: 0.5rem 0.75rem; font: inherit; color: var(--fg);
  background: var(--surface); border: 1px solid var(--control-border); border-radius: 0.4rem;
}
label { font-weight: 600; display: block; margin-bottom: 0.25rem; }
.contenido form > p { margin-bottom: 1rem; }
.contenido form .helptext { display: block; font-size: 0.875rem; color: var(--muted); font-weight: 400; }
input[type="checkbox"], input[type="radio"] { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--accent); }
.contenido form p:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.75rem; min-height: 2.75rem; }
.contenido form p:has(> input[type="checkbox"]) label { margin: 0; }
.contenido form p a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Paràgraf que és només un enllaç (`p.solo-enlace`, p. ex. «Volver a iniciar sesión»; no els enllaços dins d'una frase): objectiu tàctil de ≥44 px, també fora dels formularis */
.contenido > p.solo-enlace > a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.errorlist { list-style: none; margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--err); border-radius: 0.4rem; background: var(--err-soft); color: var(--err); font-size: 0.9rem; }

/* Inici: tria de sistema. A l'escriptori, les targetes ocupen la columna ampla i els últims tickets van al costat. */
.inicio { display: grid; gap: 1.25rem 2rem; }
.inicio > h1 { margin: 0; }
.sistemas { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sistema {
  display: grid; align-content: start; gap: 0.125rem; min-height: 2.75rem; height: 100%; padding: 0.75rem;
  background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radio);
  color: var(--fg); font-weight: 600; text-decoration: none;
}
.sistema small { font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.sistema:hover, .sistema:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.ultimos { align-self: start; }
.ultimos-cabecera { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0 0.75rem; }
@media (min-width: 60rem) {
  .inicio { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: 3rem; align-items: start; }
  .inicio > h1 { grid-column: 1 / -1; }
}

/* Llista de tickets: apilada en mòbil (títol, detall i estat), en fila a l'escriptori */
.tickets { list-style: none; margin: 0; padding: 0; }
.ticket-fila { display: grid; gap: 0.125rem 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.tickets li:last-child { border-bottom: 0; }
.ticket-titulo { font-weight: 600; overflow-wrap: anywhere; }
.ticket-meta { color: var(--muted); font-size: 0.8125rem; }
.estado {
  justify-self: start; margin-top: 0.25rem; padding: 0.125rem 0.6rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.estado-recibido { background: var(--warn-soft); color: var(--warn); }
.estado-registrado { background: var(--ok-soft); color: var(--ok); }
@media (min-width: 40rem) {
  .lista .ticket-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .lista .estado { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.lista { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio); padding: 0 1rem; }
.paginador { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem; margin-top: 1rem; color: var(--muted); font-size: 0.875rem; }
.paginador-enlaces { display: flex; gap: 1rem; }

/* Estat buit i missatges */
.vacio { padding: 1.25rem; background: var(--surface); border: 1px dashed var(--control-border); border-radius: var(--radio); }
.vacio p { margin-bottom: 0.75rem; }
.urgencia { margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.aviso { padding: 1rem; background: var(--warn-soft); color: var(--fg); border-left: 4px solid var(--warn); border-radius: var(--radio); }

@media (prefers-reduced-motion: no-preference) {
  .sistema, .btn, button { transition: background-color 0.15s ease, border-color 0.15s ease; }
}

/* Alta de ticket: ràdios en targetes (tot el rectangle és el control), resum d'errors i confirmació */
.alta { display: grid; gap: 1.25rem; max-width: 40rem; }
.alta button[type="submit"] { justify-self: start; }
.alta button[disabled] { opacity: 0.7; cursor: progress; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .campo > label { font-size: 0.9rem; font-weight: 600; padding: 0; margin: 0 0 0.375rem; }
.opciones { display: grid; gap: 0.375rem; }
.opcion {
  display: grid; grid-template-columns: 1.5rem 1fr; align-items: start; gap: 0 0.75rem; min-height: 2.75rem;
  margin: 0; padding: 0.625rem 0.75rem; font-weight: 400; cursor: pointer;
  background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radio);
}
.opcion input { margin-top: 0.125rem; }
.opcion-texto { display: grid; gap: 0.125rem; font-weight: 600; overflow-wrap: anywhere; }
.opcion small { font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.opcion:hover { border-color: var(--accent); }
.opcion:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.con-error .opcion { border-color: var(--err); }
.con-error input:not([type="radio"]), .con-error textarea { border-color: var(--err); }
@media (min-width: 40rem) {
  .opciones-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.campo { display: grid; gap: 0; }
.campo input, .campo textarea { max-width: none; }
.campo textarea { resize: vertical; min-height: 8rem; }
.ayuda { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.error-campo { margin: 0 0 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--err); }
.errores {
  max-width: 40rem; margin: 0 0 1.25rem; padding: 0.75rem 1rem;
  border: 1px solid var(--err); border-radius: var(--radio); background: var(--err-soft); color: var(--err);
}
.errores:focus { outline: 3px solid var(--err); outline-offset: 2px; }
.errores-titulo { margin: 0 0 0.25rem; font-weight: 700; }
.errores ul { margin: 0; padding-left: 1.25rem; }
.errores a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--err); font-weight: 600; }
.enviado { display: grid; gap: 0.5rem; max-width: 36rem; }
.enviado h1 { margin: 0; }
.referencia { margin: 0; font-size: 2rem; font-weight: 700; color: var(--ok); }
.resumen { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0.75rem 0 1rem; }
.resumen dt { color: var(--muted); }
.resumen dd { margin: 0; overflow-wrap: anywhere; }
.enviado .btn { justify-self: start; }