:root{
  --bg: #ffffff;
  --page: #f6f7fb;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;

  /* Colors per categoria (flat) */
  --sys: #2563eb; /* Sistemes */
  --net: #16a34a; /* Xarxes */
  --sec: #f97316; /* Seguretat */

  --radius: 14px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: var(--page);
  line-height: 1.6;
}

.container{
  width: min(980px, calc(100% - 2rem));
  margin: 0 auto;
}

/* Header */
.site-header{
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 1.75rem 0 1.1rem;
}

.site-header .subtitle{
  margin: .25rem 0 0;
  color: var(--muted);
  max-width: 75ch;
}

h1{
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.2px;
}

/* Grid (1 columna) */
.grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.25rem 0 2rem;
}

/* Card base (flat) */
.card{
  --cat: #334155; /* fallback */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;

  /* accent flat a l’esquerra */
  border-left: 6px solid var(--cat);
}

/* Assignació de categoria */
.card.cat-sistemes{ --cat: var(--sys); }
.card.cat-xarxes{ --cat: var(--net); }
.card.cat-seguretat{ --cat: var(--sec); }

/* details/summary */
details{ padding: 0; }

summary{
  list-style: none;
  cursor: pointer;
  padding: 1rem 1rem .85rem;
  outline: none;
}

summary::-webkit-details-marker{ display:none; }

.summary-top{
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  align-items: baseline;
}

.title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.short{
  margin: .55rem 0 0;
  color: var(--muted);
}

/* Etiquetes (flat) */
.tags{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}

.pill{
  font-size: .85rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--cat);
  color: #fff;
}

.badge{
  font-size: .85rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f9fafb;
  color: #374151;
  white-space: nowrap;
}

/* Interacció (flat) */
summary:hover .title{
  color: var(--cat);
}

details[open] summary{
  border-bottom: 1px solid var(--border);
  background: #fafafa; /* sense gradient */
}

/* Contingut */
.content{
  padding: .95rem 1rem 1.05rem;
}

.lead{
  margin-top: 0;
  color: #374151;
}

h3{
  margin: 1rem 0 .35rem;
  font-size: 1rem;
}

ul{
  margin: .35rem 0 0 1.15rem;
  padding: 0;
  color: #374151;
}

/* Focus accessible (teclat) */
summary:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--cat) 35%, white);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Footer */
.site-footer{
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 1rem 0 2rem;
}

.muted{ opacity: .85; }

/* Print */
@media print{
  body{ background: #fff; }
  .card{ border: 1px solid #ddd; }
  details{ page-break-inside: avoid; }
}