/* Styles for every page (lib/site.mjs). Mobile-first: base rules are for phones, wider screens add columns.
   Deliberately plain: white panels on a warm off-white, one teal accent, thin borders, no heavy shadows. */
:root {
  --bg: #f6f6f3; --panel: #ffffff; --panel-2: #fafaf8; --ink: #1b1d20; --ink-2: #454a50; --muted: #6e737a;
  --line: #e5e3dd; --line-2: #d9d6cf; --accent: #0d6b5b; --accent-ink: #ffffff; --accent-soft: #e6f2ee; --accent-2: #0a5548;
  --good: #1f7a4d; --good-soft: #e5f3ea; --warn: #9a5a00; --warn-soft: #fbf1df; --bad: #b42a2a; --bad-soft: #f9e5e5;
  --slate: #5b626c; --slate-soft: #eff0f2; --radius: 14px; --radius-s: 10px;
  --m-EFA: #1d5b8c; --m-FM: #6f4aa6; --m-CET: #9c4410; --m-CA: #2b7a3d; --m-PLA: #a1265b; --m-FCB: #5b626c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111314; --panel: #191b1d; --panel-2: #1e2022; --ink: #ecebe7; --ink-2: #c7c5c0; --muted: #91939a;
    --line: #2a2d30; --line-2: #34383b; --accent: #5cc4ae; --accent-ink: #07201b; --accent-soft: #14302a; --accent-2: #7fd6c3;
    --good: #5cc98f; --good-soft: #17291f; --warn: #e8a64a; --warn-soft: #2d2415; --bad: #ef7d7d; --bad-soft: #2f1a1a;
    --slate: #a9b0bb; --slate-soft: #24272b;
    --m-EFA: #7db6e3; --m-FM: #bfa0e6; --m-CET: #eda070; --m-CA: #82cf93; --m-PLA: #ec8fb6; --m-FCB: #a9b0bb;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.fine { font-size: 13px; color: var(--muted); line-height: 1.5; }
h1 { font-size: 27px; line-height: 1.18; margin: 4px 0 10px; letter-spacing: -.02em; font-weight: 750; }
.h1sub { font-weight: 500; color: var(--ink-2); }
h2 { font-size: 19px; margin: 32px 0 12px; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; }
h3 { font-size: 16px; }
.lead { font-size: 16.5px; color: var(--ink-2); max-width: 760px; margin: 0 0 14px; }
section { scroll-margin-top: 70px; }

/* header / footer */
.top { background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.brand .logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); }
.brand .logo svg { width: 19px; height: 19px; }
.brand b { display: block; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.brand small { display: none; font-size: 12px; color: var(--muted); }
.top nav { display: flex; gap: 16px; font-size: 15px; white-space: nowrap; }
@media (max-width: 560px) { .hide-xs { display: none; } }
.top nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.top nav a:hover { color: var(--accent); }
.top nav { align-items: center; }
@media (max-width: 420px) { .top nav { gap: 12px; font-size: 14.5px; } }
/* "Guía de Cursos Gratuitos" is longer than the template's name: on phones (up to 420px; at 375px it ran into the nav)
   it wraps onto two lines instead of running under the nav */
@media (max-width: 420px) { .brand b { white-space: normal; line-height: 1.1; font-size: 15px; } }
/* a source URL shown as text ("Fuente: sefapps.carm.es/sefApps/html5/index.html#!/…") may break anywhere */
.fine a { overflow-wrap: anywhere; }
/* two cards a row on a 360px phone leave ~80px for "Informática y tecnología": hyphenate long Spanish words */
.places a b { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
/* nav with accounts: icon + label; Favoritos in the heart's red. Narrow screens stack the icon over a small label. */
.top nav.nav-icons a { display: inline-flex; align-items: center; gap: 6px; }
.top nav.nav-icons .ni { display: inline-flex; color: var(--muted); }
.top nav.nav-icons a:hover .ni { color: var(--accent); }
.top nav.nav-icons .nav-fav .ni { color: var(--bad); }
@media (max-width: 760px) {
  .top nav.nav-icons { gap: 14px; }
  .top nav.nav-icons a { flex-direction: column; gap: 2px; font-size: 11.5px; line-height: 1.1; }
  .top nav.nav-icons .ni svg { width: 20px; height: 20px; }
}
@media (max-width: 560px) { .top nav.nav-icons a.hide-xs { display: none; } }
/* "Criar alerta" button on wide screens; on narrow ones it gives way to the bell (in the accent colour) */
.top nav .nav-cta { padding: 8px 14px; font-size: 14.5px; color: var(--accent-ink); }
.top nav .nav-cta:hover { color: var(--accent-ink); }
.top nav.nav-icons .nav-alert { display: none; }
@media (max-width: 760px) {
  .top nav.nav-icons a.nav-cta { display: none; }
  .top nav.nav-icons .nav-alert { display: inline-flex; }
  .top nav.nav-icons .nav-alert .ni { color: var(--accent); }
}
.foot { margin-top: 56px; background: var(--panel); border-top: 1px solid var(--line); padding: 26px 0 34px; font-size: 14px; }
.foot .wrap { display: grid; gap: 4px; }
.foot h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.foot .links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.foot .links a { color: var(--ink-2); text-decoration: none; }
.foot .links a:hover { color: var(--accent); }

/* navigation pieces */
.crumbs { font-size: 13px; color: var(--muted); margin: 16px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs .sep { opacity: .5; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 10px; margin: 4px -16px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 14px; text-decoration: none; color: var(--ink-2); white-space: nowrap; transition: border-color .15s, color .15s; }
.chips a:has(b) { padding-right: 6px; }
.chips a:hover { border-color: var(--accent); color: var(--accent); }
/* the count as a small badge */
.chips a b { padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.wrapchips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
/* labelled rows of links on list pages ("Áreas", "Distritos", "Concelhos", "Tipo de curso"…); on phones each row is one
   swipeable line that fades out at the right edge */
.navgroup { margin: 12px 0 2px; }
.navlabel { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.navgroup .chips, .navgroup .areanav { margin-top: 0; margin-bottom: 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 16px; border-radius: var(--radius-s); border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font-family: inherit; font-weight: 650; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); }
.btn.big { width: 100%; padding: 14px 18px; font-size: 16.5px; }
.btn.wa { color: #128c4b; }
.btn.fb { color: #1877f2; }
@media (prefers-color-scheme: dark) { .btn.wa { color: #4fd18b; } .btn.fb { color: #6aa8ff; } }
/* share bar (lib/site.mjs shareBar): on phones with a share sheet, "Partilhar" is the main, full-width button */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 18px; }
.share-l { flex: 1 0 100%; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.share .btn { padding: 9px 13px; font-size: 14.5px; }
.share .btn[hidden] { display: none; }
.share-ok { font-size: 14px; font-weight: 600; color: var(--good); }
.share.coarse .share-native { flex: 1 0 100%; } /* touch screens: "Partilhar" first, full width */
.btn.sm { padding: 5px 9px; font-size: 13px; }
.btn.danger { color: var(--bad); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.actions .btn { flex: 1 1 auto; }
.more { margin: 12px 0 0; font-weight: 600; font-size: 15px; }
.more a { text-decoration: none; }
.more a:hover { text-decoration: underline; }

/* home */
.hero { margin: 14px 0 6px; padding: 18px 16px 16px; border-radius: 18px; background: linear-gradient(160deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 35%, var(--panel))); border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); }
.hero h1 { font-size: 28px; margin: 6px 0 8px; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 650; color: var(--accent); letter-spacing: .01em; }
.finder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.finder .btn { grid-column: 1 / -1; }
.finder .fld { display: grid; gap: 4px; font-size: 13px; font-weight: 650; color: var(--ink-2); min-width: 0; }
.finder select { font-family: inherit; font-size: 16px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 11px 10px; width: 100%; min-width: 0; }
.finder .btn { padding: 13px 18px; font-size: 16px; }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 14.5px; font-weight: 600; }
.hero-links a { text-decoration: none; }
.hero-links a::after { content: " →"; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 12px; }
.sec-head h2 { margin: 0; }
.sec-head a { font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.howto { margin-top: 10px; }

/* tiles (places, areas, course types) */
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.places a { display: flex; align-items: center; gap: 10px; padding: 12px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.places a:hover { border-color: var(--accent); }
.places a .t { display: flex; flex-direction: column; min-width: 0; }
.places a b { font-size: 15.5px; line-height: 1.25; }
.places a small, .places a > span:not(.ic):not(.t) { font-size: 13px; color: var(--muted); }
.places a:not(:has(.t)) { flex-direction: column; align-items: flex-start; gap: 2px; }
.places.small a { padding: 10px 12px; }
/* "Cómo funciona en cada comunidad": every comunidad, A–Z; the ones not gathered yet are dashed and muted */
.sec-lead { margin: -4px 0 12px; color: var(--ink-2); font-size: 15px; max-width: 68ch; }
.svc-h { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.places.svc > a, .places.svc > .off { justify-content: space-between; align-items: center; gap: 10px; }
.places.svc b { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
/* a phone reads it as one list (two columns broke "Cantabria" mid-word and wrapped services on three lines) */
@media (max-width: 520px) { .places.svc { grid-template-columns: 1fr; gap: 6px; } .places.svc > a, .places.svc > .off { padding: 9px 12px; } }
.places.svc .t small { overflow-wrap: anywhere; line-height: 1.35; }
.places.svc > * > .n { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.places.svc > * > .n small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.places .off { display: flex; padding: 10px 12px; min-width: 0; background: transparent; border: 1px dashed var(--line-2);
  border-radius: 12px; color: var(--muted); text-decoration: none; }
.places .off .t { display: flex; flex-direction: column; min-width: 0; }
.places .off b { font-size: 15.5px; line-height: 1.25; font-weight: 650; }
.places .off small { font-size: 13px; color: var(--muted); }
.places.svc > .off > .n small { max-width: 64px; font-size: 11.5px; line-height: 1.25; }
.places a.off:hover { border-color: var(--accent); color: var(--ink-2); }
.ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex: none; }
.places.areas a { padding: 12px; }

/* course cards */
.grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.card:hover { border-color: var(--accent); color: var(--ink); }
.cb { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 6px; }
.cb h3 { font-size: 17px; margin: 2px 0 0; line-height: 1.3; letter-spacing: -.005em; }
.cb .prov { font-size: 14px; color: var(--ink-2); }
.meta { display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--muted); }
.meta span { display: flex; align-items: center; gap: 6px; }
.meta .when { color: var(--ink); font-weight: 600; }
.meta svg, .okline svg { flex: none; }
.cb .unit { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); padding: 6px 9px; border-radius: 8px; background: var(--accent-soft); }
.specs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.specs span { font-size: 12.5px; background: var(--slate-soft); color: var(--slate); border-radius: 6px; padding: 2px 8px; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; background: var(--accent-soft); color: var(--accent); }
.tag.soft { background: var(--slate-soft); color: var(--slate); font-weight: 600; }
.tag.good { background: var(--good-soft); color: var(--good); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.cat { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.m-EFA { color: var(--m-EFA); background: color-mix(in srgb, var(--m-EFA) 11%, transparent); }
.m-FM { color: var(--m-FM); background: color-mix(in srgb, var(--m-FM) 11%, transparent); }
.m-CET { color: var(--m-CET); background: color-mix(in srgb, var(--m-CET) 11%, transparent); }
.m-CA { color: var(--m-CA); background: color-mix(in srgb, var(--m-CA) 11%, transparent); }
.m-PLA { color: var(--m-PLA); background: color-mix(in srgb, var(--m-PLA) 11%, transparent); }
.m-FCB { color: var(--m-FCB); background: color-mix(in srgb, var(--m-FCB) 11%, transparent); }

/* area menu + sections on listing pages */
.areanav { display: flex; gap: 8px; overflow-x: auto; margin: 6px -16px 4px; padding: 2px 16px 10px; scrollbar-width: none; }
.areanav::-webkit-scrollbar { display: none; }
/* area tiles: icon square, name, "N cursos" */
.areanav a { flex: none; display: flex; align-items: center; gap: 10px; min-width: 160px; padding: 8px 14px 8px 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.areanav a:hover { border-color: var(--accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.areanav .ic { width: 34px; height: 34px; border-radius: 9px; }
.areanav .t { display: flex; flex-direction: column; min-width: 0; }
.areanav .t b { font-size: 14px; font-weight: 650; line-height: 1.25; color: var(--ink); white-space: nowrap; }
.areanav .t small { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.area-sec { scroll-margin-top: 70px; }
.area-sec h2 { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.area-sec h2 .ic { width: 34px; height: 34px; }
.area-sec h2 small { color: var(--muted); font-weight: 500; font-size: 15px; }
.area-grid { display: grid; gap: 10px; }
.area-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.area-head { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.area-head b { display: block; font-size: 17px; }
.area-head small { color: var(--muted); }
.area-card .muted { margin: 8px 0 0; font-size: 14.5px; }
.area-card .sub { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0 0; font-size: 14px; }
.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.rows a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; text-decoration: none; color: var(--ink); }
.rows a:hover { border-color: var(--accent); }
.rows a span { font-size: 13.5px; color: var(--muted); }
.bymod { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bymod li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.bymod li b { flex: 1 0 100%; font-size: 15px; }
.bymod a { font-size: 14.5px; font-weight: 600; text-decoration: none; }
.bymod a:hover { text-decoration: underline; }
.bymod a small { color: var(--muted); font-weight: 500; }
.entchips a { white-space: normal; max-width: 100%; }

/* offer page */
.offer h1 { margin-top: 10px; }
.prov-line { margin: -4px 0 12px; font-weight: 600; }
.okline, .warnline { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius-s); font-size: 15px; }
.okline { background: var(--good-soft); color: var(--good); font-weight: 600; }
.warnline { background: var(--warn-soft); color: var(--warn); }
.keyfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.keyfacts div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.keyfacts small { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.keyfacts b { font-size: 17px; }
.summary { font-size: 16px; color: var(--ink-2); }
.facts { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts th, .facts td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: top; }
.facts th { width: 38%; color: var(--muted); font-weight: 500; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }

/* course programme: the UFCD modules (--mc = the modality's colour) */
.program { margin: 26px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px 12px; }
.program h2 { margin: 16px 0 2px; }
.program .sub { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.program .fine { margin: 10px 0 0; }
.units { list-style: none; margin: 0; padding: 0; }
.units li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 7px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.program > .units li:first-child { border-top: 0; }
.units .n { grid-row: span 2; align-self: start; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--mc); background: color-mix(in srgb, var(--mc) 13%, var(--panel)); }
.units .nm { font-size: 15px; font-weight: 600; line-height: 1.35; }
.units .h { align-self: start; font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.units .bar { grid-column: 2 / 4; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--mc) 9%, var(--line)); overflow: hidden; }
.units .bar i { display: block; height: 100%; background: var(--mc); border-radius: 4px; opacity: .8; }
.more-units summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14.5px; padding: 11px 0 3px; border-top: 1px solid var(--line); list-style: none; }
.more-units summary::-webkit-details-marker { display: none; }
.more-units summary::after { content: " ▾"; }
.more-units[open] summary { display: none; }

/* click-to-open boxes for general text repeated on many pages (fold() in lib/site.mjs: modality info, apoios) */
.folds { margin: 26px 0; }
.fold { margin: 10px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; font-weight: 650; font-size: 15.5px; color: var(--ink); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 2px 0 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.fold[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.fold > summary:hover { color: var(--accent); }
.fold-body { padding: 0 16px 4px; }
.fold-body > :first-child { margin-top: 0; }

/* "Depois do curso": public figures for the course type and profession group */
.after { margin: 26px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px 14px; }
.after h2 { margin: 16px 0 2px; }
.after .sub { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.stats { display: grid; gap: 10px; }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat small { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stat b { display: block; font-size: 28px; line-height: 1.15; margin: 4px 0; color: var(--accent); letter-spacing: -.02em; font-weight: 750; }
.stat p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.after .tip { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); }
.after .tip svg { flex: none; margin-top: 2px; color: var(--accent); }
.after .fine { margin: 10px 0 0; }
/* TVDE "Depois do curso": numbered steps, operator checklist, Lei 59/2026 box */
.tvde-after h3 { font-size: 16.5px; margin: 22px 0 6px; }
.tvde-after > p { color: var(--ink-2); font-size: 15px; margin: 0 0 8px; }
.steps { list-style: none; counter-reset: step; margin: 4px 0 0; padding: 4px 16px; display: grid; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.steps li { counter-increment: step; position: relative; padding: 12px 0 12px 42px; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.steps li b { display: block; font-size: 15px; line-height: 1.35; margin-top: 3px; }
.steps li p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.step-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 8px 0 0; font-size: 14.5px; font-weight: 600; }
.checks { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.checks b { color: var(--ink); }
.lawbox { margin: 18px 0 0; background: var(--accent-soft); border-radius: 12px; padding: 4px 14px 12px; }
.lawbox h3 { margin: 12px 0 2px; }
.lawbox .fine { margin: 0 0 6px; }
.lawbox ul { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 14.5px; color: var(--ink-2); }
/* "Perguntas frequentes" on the head pages: a compact card above the course list; each question opens on tap (chevron
   turns), the rest behind "Ver mais N perguntas" */
.faq { max-width: 860px; margin: 6px 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: linear-gradient(160deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 30%, var(--panel))); border-bottom: 1px solid var(--line); }
.faq-head h2 { margin: 0; font-size: 16.5px; }
.faq-head .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--panel); }
.faq-item + .faq-item, .faq-more { border-top: 1px solid var(--line); }
.faq-item > summary, .faq-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; list-style: none; cursor: pointer; }
.faq-item > summary::-webkit-details-marker, .faq-more > summary::-webkit-details-marker { display: none; }
.faq-item > summary { font-size: 15px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.faq-item > summary:hover { color: var(--accent); }
.faq-item > summary::after, .faq-more > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.faq-item > summary::after { color: var(--muted); }
.faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-item[open] > summary { color: var(--accent); }
.faq-a { padding: 0 16px 14px; }
.faq-a p { margin: 0; padding-left: 12px; border-left: 3px solid var(--accent-soft); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.faq-more > summary { font-size: 14.5px; font-weight: 650; color: var(--accent); background: var(--panel-2); }
.faq-more[open] > summary { display: none; }
.faq-more > .faq-item:first-of-type { border-top: 0; }
@media (min-width: 760px) { .faq-head, .faq-item > summary, .faq-more > summary { padding-left: 20px; padding-right: 20px; } .faq-a { padding: 0 20px 16px; } }
/* /curso-empilhador: hero with three figures, the answer box, three route cards, the price table */
.fk-hero { margin: 4px 0 0; padding: 18px 16px; border-radius: 18px; background: linear-gradient(160deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 35%, var(--panel))); border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); }
.fk-hero .eyebrow { display: flex; align-items: center; gap: 6px; }
.fk-hero h1 { margin: 6px 0 8px; }
.fk-hero .lead { margin: 0; }
.fk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.fk-facts a { display: flex; flex-direction: column; gap: 3px; padding: 10px 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink-2); min-width: 0; }
.fk-facts a:hover { border-color: var(--accent); color: var(--ink-2); }
.fk-facts b { font-size: clamp(14px, 4.4vw, 19px); line-height: 1.15; color: var(--accent); letter-spacing: -.01em; white-space: nowrap; }
.fk-facts span { font-size: 12.5px; line-height: 1.3; }
.fk-answer { margin: 22px 0 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 16px 14px; }
.fk-answer h2 { margin: 16px 0 6px; }
.fk-verdict { margin: 0 0 14px; font-size: 16px; color: var(--ink-2); }
.fk-verdict b { display: inline-block; margin-right: 4px; padding: 0 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.fk-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fk-points li { display: flex; gap: 12px; align-items: flex-start; }
.fk-points .ic { width: 36px; height: 36px; }
.fk-points b { display: block; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.fk-points p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.fk-answer .fine { margin: 14px 0 0; }
.fk-routes { display: grid; gap: 10px; }
.fk-route { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.fk-route h3 { margin: 0 0 10px; font-size: 16.5px; }
.fk-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.fk-keys div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.fk-keys dt { font-size: 18px; font-weight: 750; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.fk-keys dd { margin: 1px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.fk-route p { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.fk-go { margin-top: 10px; font-size: 14.5px; font-weight: 650; }
#cursos h2 small { margin-left: 4px; font-size: 15px; font-weight: 600; color: var(--muted); }
.fk-answer .fk-sub { margin: 0 0 12px; }
.hc-steps { list-style: none; counter-reset: hc; margin: 0; padding: 0; display: grid; gap: 10px; }
.hc-steps li { counter-increment: hc; display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.hc-steps li::before { content: counter(hc); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 750; font-size: 14px; }
.fk-sub { max-width: 760px; margin: -4px 0 12px; font-size: 14.5px; color: var(--muted); }
.fk-prices { max-width: 860px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fk-row { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.fk-row:first-child { border-top: 0; }
.fk-who a { font-size: 15.5px; font-weight: 700; }
.fk-who > span { display: block; font-size: 14px; color: var(--ink-2); }
.fk-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.fk-where { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.fk-where svg { flex: none; }
.fk-price b { font-size: 18px; color: var(--ink); white-space: nowrap; }
.fk-price small { display: block; font-size: 12.5px; color: var(--muted); }
.fk-online { display: flex; align-items: center; gap: 8px; margin: 24px 0 8px; font-size: 16.5px; }
.fk-online svg { color: var(--accent); }
.fk-warn { max-width: 860px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 14px; }
@media (min-width: 640px) {
  .fk-row { grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
  .fk-price { text-align: right; }
}
@media (min-width: 760px) {
  .fk-hero { padding: 26px 28px 24px; }
  .fk-hero h1 { font-size: 34px; }
  .fk-hero .lead { max-width: 680px; }
  .fk-facts { max-width: 720px; gap: 12px; }
  .fk-facts a { padding: 12px 14px; }
  .fk-facts b { font-size: 26px; }
  .fk-facts span { font-size: 13.5px; }
  .fk-answer { padding: 4px 24px 18px; }
  .fk-points { grid-template-columns: 1fr 1fr; gap: 18px 32px; }
  .fk-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
/* "O mercado de emprego este mês" (INE/IEFP, national): the 13-month line under each number */
.jobmkt .spark { display: block; width: 100%; max-width: 220px; height: auto; margin-top: 8px; color: var(--accent); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* accounts: favourites, alerts, /conta (lib/account.mjs; same design as concursosabertos) */
.fav-btn svg { color: var(--bad); flex: none; transition: transform .15s; }
.fav-btn.on { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.fav-btn.on svg { fill: currentColor; transform: scale(1.08); }
.fav-see-wrap { margin: 4px 0 0; }
.fav-see { font-size: 14px; font-weight: 600; }
.alert-cta { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; font-weight: 600; font-size: 15px; }
.alert-cta svg { flex: none; color: var(--accent); }
/* "Receber por email os cursos novos…" (alertCta): a tinted banner, the whole of it the link */
.alert-go { display: flex; align-items: center; gap: 12px; max-width: 600px; margin: 12px 0 16px; padding: 10px 14px 10px 10px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.alert-go:hover { border-color: var(--accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 15%, transparent); color: var(--ink); }
.alert-go .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); }
.alert-go .t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.alert-go b { font-size: 15px; line-height: 1.3; color: var(--accent-2); }
.alert-go small { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.alert-go .go { flex: none; font-size: 18px; font-weight: 700; color: var(--accent); transition: transform .15s; }
.alert-go:hover .go { transform: translateX(3px); }
/* alert sign-up: the home box (alertBox) and the form on distrito/concelho pages (inlineAlertForm, also .form) */
.alertbox { margin: 30px 0; padding: 16px 18px; background: var(--accent-soft); border-radius: var(--radius); scroll-margin-top: 70px; }
.alertbox h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 18px; }
.alertbox h2 svg { flex: none; color: var(--accent); }
.alertbox p { margin: 0; color: var(--ink-2); max-width: 680px; }
.alertbox .alertbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.alertbox .btn:not(.primary) { background: var(--panel); }
.inline-alert.form { gap: 10px; }
.inline-alert input, .inline-alert select { background: var(--panel); }
.inline-alert .fine { margin: 0; }
.acct { max-width: 760px; margin-top: 18px; }
.acct h2 { margin-top: 28px; }
.notice { padding: 12px 14px; border-radius: 12px; background: var(--good-soft); color: var(--good); font-weight: 500; }
.notice.bad { background: var(--bad-soft); color: var(--bad); }
.acct-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; max-width: 640px; }
.acct-card fieldset.freq { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.acct-card fieldset.freq legend { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.acct-card .fine { margin: 0; }
.hp { position: absolute; left: -9999px; }
.signin { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; max-width: 640px; }
.signin h2 { margin: 0; font-size: 18px; }
.signin label.check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-size: 14px; color: var(--ink-2); }
.signin label.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.signin-in { display: grid; gap: 10px; }
.signin-lead { margin: 0; font-size: 14px; color: var(--ink-2); }
.devlogin { display: flex; gap: 8px; flex-wrap: wrap; }
.devlogin input { flex: 1 1 200px; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--panel-2); color: var(--ink); }
.or { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--muted); font-size: 13.5px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.alertform h2.step { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; font-size: 17px; }
.alertform h2.step span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 14px; }
.alertform h2.step ~ h2.step { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.alert-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.alert-list li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.alert-list li.empty { color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.acct-links { display: flex; flex-wrap: wrap; gap: 8px; }
.fav-item { display: grid; gap: 6px; }
.fav-item form { justify-self: end; }
.favs-gone { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.favs-gone li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--ink-2); }
.prose h3 { margin: 18px 0 4px; }
.history { padding-left: 18px; }
.history li { margin: 4px 0; }
.claim { margin-top: 28px; padding: 4px 16px 12px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--panel-2); }

/* entity lists (TVDE, INEM) */
.ents { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ent { display: flex; flex-direction: column; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ent small { color: var(--muted); font-size: 12.5px; }
.ent span { display: flex; flex-wrap: wrap; gap: 5px; font-size: 14px; }
/* INEM pages: the entities of INEM's last list as cards in a grid, the courses each gives as coloured badges; the
   Escola Nacional de Bombeiros highlighted first on the ambulance page */
#entidades h2 small, #escolas h2 small, .ent-h small { margin-left: 4px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.ent-h { margin: 22px 0 10px; font-size: 16.5px; }
.ent-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ent-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.ent-card b { font-size: 15px; line-height: 1.3; color: var(--ink); }
.ent-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.vtag { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1.5; background: var(--slate-soft); color: var(--slate); }
.vtag.tat { background: var(--accent-soft); color: var(--accent); }
.vtag.tas { background: var(--bad-soft); color: var(--bad); }
.vtag.sbv { background: var(--good-soft); color: var(--good); }
.vtag.meth { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.ent-feature { margin: 4px 0 6px; max-width: 640px; background: linear-gradient(160deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 30%, var(--panel))); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.ent-feature small { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
/* a card's place, its courses one per line (badge, then hours · price as published), and the notes under them */
.ent-place { display: flex; align-items: center; gap: 5px; margin-top: -4px; font-size: 13.5px; color: var(--muted); }
.ent-place svg { flex: none; }
.ent-courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ent-courses li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.ent-courses .vtag { flex: none; }
.ent-card small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
/* TVDE cards: the school's phones from the IMT list, at the foot of the card */
.ent-tel { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; }
.ent-tel a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; text-decoration: none; }
/* TVDE chart colours: theory and practice, and the price dots. Checked with the dataviz palette validator (lightness,
   chroma, colour-blind and normal-vision separation, contrast) on the light and the dark surface. --viz-ink: the
   label printed inside a block. */
:root { --viz-1: #008a70; --viz-2: #b06200; --viz-ink: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --viz-1: #2f9a84; --viz-2: #c27f1e; --viz-ink: #0c1714; } }
/* the programme: one card with a tall segmented bar (each block's width = its hours), its key, the subjects in block
   order (the bar's legend and table view) */
.tv-prog { margin: 14px 0 0; padding: 14px 16px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.tv-prog-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 12px; }
.tv-prog-head h3 { margin: 0; font-size: 16.5px; }
.tv-prog-head p { margin: 0; font-size: 14px; color: var(--muted); }
.tv-prog-head p b { color: var(--ink); }
.tv-bar { display: flex; gap: 2px; height: 28px; }
.tv-bar span { display: flex; align-items: center; min-width: 0; padding: 0 6px; border-radius: 4px; background: var(--viz-1); color: var(--viz-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.tv-bar span.p { background: var(--viz-2); }
.tv-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 6px; font-size: 13px; color: var(--ink-2); }
.tv-key span { display: inline-flex; align-items: center; gap: 6px; }
.tv-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--viz-1); }
.tv-key i.p { background: var(--viz-2); }
.tv-mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); column-gap: 22px; }
.tv-mods li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.tv-mods .n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--viz-1); color: var(--viz-ink); font-size: 12px; font-weight: 750; }
.tv-mods li.p .n { background: var(--viz-2); }
.tv-mods .x { flex: 1; min-width: 0; }
.tv-mods .h { flex: none; font-size: 13.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tv-prog .fine { margin: 8px 0 0; }
/* who can take it: three requirement cards, then the exception in a quieter dashed box */
.tv-reqs, .tv-ask { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tv-reqs li, .tv-ask li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.tv-reqs .ic, .tv-ask .ic, .tv-exempt .ic { width: 36px; height: 36px; }
.tv-reqs b, .tv-ask b { display: block; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.tv-reqs p, .tv-ask p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tv-new { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 11.5px; font-weight: 750; vertical-align: 2px; white-space: nowrap; }
.tv-exempt { display: flex; gap: 12px; align-items: center; margin: 8px 0 0; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--radius); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.tv-exempt .ic { background: var(--slate-soft); color: var(--slate); }
.tv-exempt b { color: var(--ink); }
/* the price: two figures, the published prices as a ranked dot plot (name, dot on a shared € scale, price), what
   changes the price, and the IMT fee that comes on top */
.tv-price { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.tv-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tv-figs div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; }
.tv-figs span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.tv-figs b { font-size: 28px; line-height: 1.15; font-weight: 750; color: var(--ink); letter-spacing: -.01em; }
.tv-figs small { font-size: 12.5px; color: var(--muted); }
.tv-price h3 { margin: 18px 0 6px; font-size: 15.5px; }
.tv-dots { max-width: 760px; }
.tv-dots ol { list-style: none; margin: 0; padding: 0; }
.tv-dots li, .tv-axis { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr) 3.4em; align-items: center; gap: 12px; }
.tv-dots li { padding: 7px 0; border-top: 1px solid var(--line); }
.tv-dots .who { display: flex; flex-direction: column; min-width: 0; }
.tv-dots .who b, .tv-dots .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-dots .who b { font-size: 14px; line-height: 1.3; color: var(--ink); }
.tv-dots .who small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.tv-dots .trk, .tv-axis .trk { position: relative; height: 20px; }
.tv-dots .trk i { position: absolute; top: 2px; bottom: 2px; width: 1px; background: var(--line); }
.tv-dots .trk em { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--viz-1); box-shadow: 0 0 0 2px var(--panel); transition: transform .12s; }
.tv-dots li:hover em { transform: scale(1.3); }
.tv-dots .eur { text-align: right; font-size: 14.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tv-axis { margin: 0; padding-top: 4px; border-top: 1px solid var(--line); }
.tv-axis .trk span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
@media (min-width: 640px) { .tv-dots li, .tv-axis { grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 3.4em; } }
.tv-varies { margin: 16px 0 0; }
.tv-varies b { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ink); }
.tv-varies ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tv-varies li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }
.tv-varies svg { flex: none; color: var(--accent); }
.tv-fee { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tv-fee svg { flex: none; margin-top: 2px; color: var(--accent); }
/* entity lists: what the course badges mean, and the links under the list */
.ent-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -4px 0 12px; font-size: 13px; color: var(--muted); }
.ent-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ent-more { margin: 14px 0 0; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.fk-range { margin-top: 10px !important; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 14px; }
.fk-range b { color: var(--ink); }
/* paged lists (PAGER_JS): one page of cards, then page buttons; hidden cards really hidden despite display: flex */
.pager { scroll-margin-top: 80px; }
.ent-card[hidden] { display: none; }
.pager-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 4px; }
.pager-nav[hidden] { display: none; }
.pager-nav button { min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pager-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pager-nav button[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pager-nav button:disabled { opacity: .45; cursor: default; }
/* the filter row above a paged list: Local and Ordenar side by side, the count under them */
.ent-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.ent-filters[hidden] { display: none; }
.ent-filters label { display: grid; gap: 4px; flex: 1 1 200px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ent-filters select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--panel); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; }
.ent-count { flex: 1 0 100%; margin: 0; font-size: 13.5px; color: var(--muted); }
@media (min-width: 640px) { .ent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .ent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* /cursos-financiados: the course types (cards: who it is for, what it gives, the count and typical length; PLA as a
   dashed row), the course list's five filters, short page buttons, the distritos as bars */
.hub-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 560px) { .hub-types, #apoios .tv-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hub-types, #apoios .tv-reqs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hub-types li > a, .hub-types li > div { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.hub-types li > a:hover { border-color: var(--accent); color: var(--ink); }
.hub-types .tag, .hub-pla .tag { align-self: flex-start; flex: none; font-size: 13px; }
.hub-types dl { margin: 0; display: grid; gap: 8px; }
.hub-types dt { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.hub-types dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.ht-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.ht-foot b, .hub-pla small b { color: var(--ink); font-weight: 650; }
.ht-foot small { display: block; margin-top: 1px; font-size: 13px; }
.hub-types .go, .hub-pla .go { flex: none; color: var(--accent); font-weight: 700; }
.hub-pla { display: flex; gap: 12px; align-items: center; margin: 8px 0 0; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--radius); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-decoration: none; transition: border-color .15s; }
.hub-pla:hover { border-color: var(--accent); color: var(--ink-2); }
.hub-pla .x { flex: 1; min-width: 0; }
.hub-pla .x > b { color: var(--ink); }
.hub-pla small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.hub-pla small small { display: inline; margin: 0; }
.hub-pla small small::before { content: " · "; }
#apoios .tv-fee { margin-top: 10px; }
.hub-list { scroll-margin-top: 80px; }
.hub-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-filters label:last-of-type { grid-column: 1 / -1; }
@media (min-width: 640px) { .hub-filters { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); } .hub-filters label:last-of-type { grid-column: auto; } }
.hub-filters .ent-count { grid-column: 1 / -1; }
.hub-empty { margin: 4px 0 0; padding: 16px; border: 1px dashed var(--line-2); border-radius: 12px; text-align: center; color: var(--ink-2); }
.hub-empty[hidden] { display: none; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 650; cursor: pointer; text-decoration: underline; }
.pager-nav .gap { align-self: center; padding: 0 2px; color: var(--muted); }
@media (max-width: 479px) { .pager-nav .lbl { display: none; } }
.hub-fold { margin-top: 18px; }
.hub-fold .rows { margin-bottom: 12px; }
.hub-bars { list-style: none; margin: 0; padding: 6px 16px; columns: 2 300px; column-gap: 32px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.hub-bars li:first-child > * { border-top: 0; }
.hub-bars li { break-inside: avoid; }
.hub-bars a { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 2.8em; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14.5px; }
.hub-bars a:hover .nm { color: var(--accent); text-decoration: underline; }
.hub-bars .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-bars .bar { height: 10px; }
.hub-bars i { display: block; height: 100%; min-width: 3px; border-radius: 0 4px 4px 0; background: var(--viz-1); }
.hub-bars b { text-align: right; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hub-places .ent-more { margin-top: 16px; }
/* /formacao-modular: the four steps from a unit to a qualification (numbered cards, an arrow between them on wide
   screens), the rules as key figures, the schooling ladder (a level pill per row) */
.fm-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 560px) { .fm-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .fm-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .fm-flow li:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -12px; transform: translateY(-50%); color: var(--accent); font-weight: 700; } }
.fm-flow li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.fm-flow .fm-n { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 4px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 750; }
.fm-flow .fm-k, .fm-rules .fm-k { font-size: 20px; line-height: 1.15; font-weight: 750; color: var(--accent); letter-spacing: -.01em; }
.fm-flow b:not(.fm-k) { font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.fm-flow p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.fm-rules { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 560px) { .fm-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fm-rules li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; }
.fm-rules .fm-k { flex: none; min-width: 3.6em; }
.fm-rules b:not(.fm-k) { display: block; font-size: 15px; line-height: 1.3; color: var(--ink); }
.fm-rules p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.fm-ladder { list-style: none; margin: 0; padding: 4px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.fm-ladder li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.fm-ladder li:first-child { border-top: 0; }
.fm-lv { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 750; white-space: nowrap; }
.fm-ladder b { display: block; font-size: 15px; line-height: 1.3; color: var(--ink); }
.fm-ladder p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 479px) { .fm-ladder li { grid-template-columns: minmax(0, 1fr); } }
.hub-filters.even label:last-of-type { grid-column: auto; }
.one-type .card .tags > .tag:first-child { display: none; } /* every card is that type: its tag says nothing */
.hub-bars .nolink { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 2.8em; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
/* /cursos-financiados-para-desempregados: goal cards (a question, the course type, one line, count and length), the
   employment bars (one series on a 0–100 % track, direct labels), the sign-up steps with the questions as pills */
.ue-goals .ue-q { font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.ue-goals .ue-x { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
#subsidio .fk-verdict b { margin-right: 6px; }
@media (min-width: 760px) { #subsidio .fk-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.ue-rates { padding: 14px 16px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.ue-rates-h { margin: 0 0 10px; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.ue-rates ol { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.ue-rates li { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em; grid-template-areas: "nm v" "bar bar"; align-items: center; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.ue-rates .nm { grid-area: nm; display: flex; flex-direction: column; min-width: 0; }
.ue-rates .nm b { font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.ue-rates .nm small { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.ue-rates .bar { grid-area: bar; height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; }
.ue-rates .bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-1); }
.ue-rates .v { grid-area: v; text-align: right; font-size: 16px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .ue-rates li { grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 4.2em; grid-template-areas: "nm bar v"; } }
.ue-rates .fine { margin: 10px 0 0; }
.ue-steps li > div { flex: 1; min-width: 0; }
.ue-steps b { display: block; margin-top: 3px; color: var(--ink); }
.ue-sx { margin-top: 2px; font-size: 14.5px; line-height: 1.5; }
.ue-ask { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hc-steps .ue-ask li { counter-increment: none; display: block; gap: 0; }
.hc-steps .ue-ask li::before { content: none; display: none; }
.ue-ask li { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
#inscricao .hc-steps { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

/* forms */
.leadbox { margin: 28px 0; background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 0 0 4px var(--accent-soft); border-radius: 16px; padding: 4px 16px 16px; scroll-margin-top: 70px; }
.leadbox h2 { margin-top: 16px; }
.form { display: grid; gap: 12px; }
.form.narrow { max-width: 560px; }
.form label { display: grid; gap: 5px; font-size: 14.5px; font-weight: 600; }
.form input, .form select, .form textarea { font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 11px 12px; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus, .finder select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form .row2 { display: grid; gap: 12px; }
.form .hint { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--ink-2); }
.form .check input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--accent); }
.form .consent { background: var(--accent-soft); border-radius: var(--radius-s); padding: 10px; }
.pick { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 12px; max-height: 340px; overflow: auto; display: grid; gap: 8px; }
.pick legend { font-weight: 700; font-size: 14.5px; padding: 0 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.errors { background: var(--bad-soft); color: var(--bad); border-radius: 12px; padding: 6px 14px; }
.notice { max-width: 640px; margin: 30px auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 6px 20px 18px; }

/* eligibility checker */
.elig-out { display: grid; gap: 8px; margin: 18px 0; max-width: 640px; scroll-margin-top: 70px; }
.res { border-radius: 12px; padding: 10px 14px; border: 1px solid var(--line); background: var(--panel); }
.res.ok { border-color: var(--good); }
.res.ok b { color: var(--good); }
.res.no b { color: var(--muted); }
.res p { margin: 4px 0; color: var(--ink-2); font-size: 14.5px; }
.note { background: var(--warn-soft); color: var(--ink-2); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; }

/* admin */
.admin h1 { margin-top: 20px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.kpi small { display: block; color: var(--muted); font-size: 12px; }
.kpi b { font-size: 22px; }
.kpi span { display: block; color: var(--muted); font-size: 12px; }
.scroll { overflow-x: auto; }
.admin .facts th { width: auto; }
.inline { display: inline-flex; gap: 4px; margin: 2px 0; }
.inline select { font: inherit; font-size: 13px; padding: 4px; }
.two { display: grid; gap: 16px; }

@media (min-width: 640px) {
  h1 { font-size: 32px; }
  .hero { padding: 30px 28px 24px; }
  .hero h1 { font-size: 36px; max-width: 760px; }
  .finder { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .finder .btn { grid-column: auto; }
  .places { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .places.areas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .keyfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form .row2 { grid-template-columns: 1fr 1fr; }
  .actions .btn { flex: 0 0 auto; }
  .btn.big { width: auto; }
  .chips, .areanav { flex-wrap: wrap; overflow: visible; margin: 4px 0 6px; padding: 2px 0 10px; }
  .navgroup .chips, .navgroup .areanav { -webkit-mask-image: none; mask-image: none; padding-bottom: 4px; }
  .areanav { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
  .brand small { display: block; }
  .kpis { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .ents { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .area-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .rows { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
@media (min-width: 900px) {
  .foot .wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
  .two { grid-template-columns: 1fr 1fr; }
}

/* provider contacts (shown instead of the lead form while LEADS is off) */
.contactbox { margin: 26px 0; background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 16px; padding: 4px 16px 14px; scroll-margin-top: 70px; }
.contactbox h2 { margin-top: 16px; }
.contacts { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.contacts li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.contacts li svg { color: var(--accent); flex: none; }
.contacts a { font-weight: 600; text-decoration: none; }
.ent span a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; margin-right: 10px; }

/* course widget for providers' sites: the configurator at /para-entidades/widget and the link on entity pages */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wg-cta { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 8px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--accent-soft); color: var(--ink-2); font-size: 14.5px; }
.wg-cta .ic { color: var(--accent); flex: none; display: inline-flex; margin-top: 1px; }
.wg-cta a { font-weight: 650; }
.wg-hero { max-width: 780px; }
.wg-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 11px; }
.wg-hero h1 { font-size: 30px; }
.wg-perks { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wg-perks li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.wg-perks .ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); margin-bottom: 8px; }
.wg-perks b { display: block; font-size: 15.5px; }
.wg-perks p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.wg-n { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 9px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 750; vertical-align: 2px; }
.wg-builder { display: grid; gap: 20px; margin: 22px 0 8px; }
.wg-controls { display: grid; gap: 12px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 16px 16px; }
.wg-controls h2 { margin: 16px 0 0; font-size: 17px; }
.wg-controls label { display: grid; gap: 5px; font-size: 14px; font-weight: 600; }
.wg-controls input:not([type=radio]):not([type=color]), .wg-controls select { font: inherit; font-size: 16px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 10px 12px; width: 100%; }
.wg-controls input:focus, .wg-controls select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.wg-controls .fine { margin: 0; font-weight: 400; }
.wg-ent input { font-size: 17px !important; padding: 13px 14px !important; }
.wg-seg { border: 0; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.wg-seg legend { font-size: 14px; font-weight: 600; margin-bottom: 5px; padding: 0; }
.wg-seg label { display: block; }
.wg-seg input { position: absolute; opacity: 0; }
.wg-seg span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; background: var(--panel-2); }
.wg-seg input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.wg-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.wg-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
.wg-colors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wg-colors input[type=color] { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); cursor: pointer; }
.wg-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line-2); background: var(--c); cursor: pointer; padding: 0; }
.wg-sw:hover { box-shadow: 0 0 0 2px var(--c); }
.wg-controls.is-selo .wg-list-only { display: none; }
.wg-preview { min-width: 0; }
.wg-browser { border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: 0 10px 30px rgba(20, 30, 28, .08); }
.wg-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.wg-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.wg-bar span { flex: 1; margin-left: 8px; font-size: 12.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-page { padding: 18px; background: #fff; color: #1b1d20; transition: background .2s; }
.wg-page.dark { background: #121315; }
.wg-fake { margin-bottom: 16px; }
.wg-fake b, .wg-fake i { display: block; height: 12px; border-radius: 6px; background: #ecebe6; margin-bottom: 8px; }
.wg-fake b { width: 42%; height: 18px; background: #dfddd6; }
.wg-fake i:last-child { width: 72%; }
.wg-page.dark .wg-fake b { background: #2c2f33; }
.wg-page.dark .wg-fake i { background: #222528; }
.wg-demo { margin: 8px 2px 0; }
.wg-code { background: #14211e; border-radius: var(--radius); padding: 14px; color: #d8efe8; }
.wg-code pre { margin: 0 0 12px; white-space: pre-wrap; word-break: break-all; font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wg-code-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wg-ok { font-size: 14px; color: #8fe0c6; font-weight: 600; }
.wg-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 30px 0 8px; padding: 6px 18px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--panel-2); }
.wg-help h2 { margin-top: 12px; }
.wg-help p { margin: 0; max-width: 620px; color: var(--ink-2); }
@media (min-width: 560px) { .wg-row { grid-template-columns: auto 1fr 1fr; align-items: end; } }
@media (min-width: 980px) {
  .wg-builder { grid-template-columns: 380px 1fr; align-items: start; }
  .wg-preview { position: sticky; top: 74px; }
  .wg-row { grid-template-columns: 1fr 1fr; }
  .wg-row label:first-child { grid-column: 1 / -1; }
}

/* articles for other sites (/para-sites/artigo/…): the article as a blog would show it, then the copy steps */
.ar-opts { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: end; margin: 6px 0 14px; }
.ar-opts label { display: grid; gap: 5px; font-size: 14px; font-weight: 600; }
.ar-opts select { font: inherit; font-size: 15px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 7px 10px; }
.ar-page { padding: 26px 18px 30px; }
.ar-post { max-width: 700px; margin: 0 auto; font: 17px/1.7 Georgia, "Times New Roman", serif; color: #23262b; }
.ar-post h1, .ar-post h2, .ar-post h3, .ar-post table { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #15171a; }
.ar-post h1 { font-size: 30px; line-height: 1.25; margin: 0 0 18px; letter-spacing: -.01em; }
.ar-post h2 { font-size: 22px; line-height: 1.3; margin: 34px 0 10px; }
.ar-post h3 { font-size: 18px; line-height: 1.35; margin: 22px 0 6px; }
.ar-post p, .ar-post ul { margin: 0 0 14px; }
.ar-post a { color: #1d5b8c; }
.ar-post table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 15px; line-height: 1.4; }
.ar-post th, .ar-post td { padding: 7px 10px; border-bottom: 1px solid #e6e3dc; text-align: left; }
.ar-post th { background: #f4f3ef; font-weight: 650; }
.ar-post td + td, .ar-post th + th { text-align: right; white-space: nowrap; }
.ar-post small { font-size: 13px; color: #6e737a; }
.ar-post .guiadaformacao { margin: 8px 0 18px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.ar-steps { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 12px; }
.ar-steps > li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.ar-steps > li > b { font-size: 16.5px; }
.ar-steps p { margin: 4px 0 10px; color: var(--ink-2); font-size: 14.5px; }
.ar-ok { min-height: 1.5em; margin: 8px 2px; font-weight: 650; color: var(--accent); }
.ar-editor { display: grid; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.ar-editor[hidden] { display: none; }
.ar-editor label { display: grid; gap: 5px; font-size: 14px; font-weight: 600; }
.ar-editor input { font: inherit; font-size: 16px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 9px 12px; }
.ar-editor textarea { font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-height: 540px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: #14211e; color: #d8efe8; resize: vertical; tab-size: 2; white-space: pre-wrap; }
.ar-editor textarea:focus, .ar-editor input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ar-editor .fine { margin: 0; }
.ar-editor .fine .btn { margin-left: 6px; }
@media (max-width: 560px) { .ar-page { padding: 18px 12px 22px; } .ar-post { font-size: 16px; } .ar-post h1 { font-size: 24px; } .ar-post th, .ar-post td { padding: 6px; } }
.ar-post ol { margin: 0 0 14px; padding-left: 1.4em; }
.ar-post li { margin: 0 0 6px; }
.ar-post figure { margin: 20px 0 22px; }
.ar-post figure img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid #e6e3dc; }
.ar-post figcaption { margin-top: 7px; font: 13.5px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: #6e737a; }
.ar-opts [hidden], .ar-steps > li[hidden] { display: none; }
.ar-imgs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ar-imgs li { display: grid; grid-template-columns: 160px 1fr auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel-2); }
.ar-imgs img { display: block; width: 160px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.ar-imgs b { font-size: 14px; overflow-wrap: anywhere; }
.ar-imgs p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 560px) { .ar-imgs li { grid-template-columns: 96px 1fr; } .ar-imgs img { width: 96px; height: 54px; } .ar-imgs .btn { grid-column: 1 / -1; } }

/* /admin/email: write to a provider from the site's address (lib/provider-mail.mjs) */
.mail-form { max-width: 820px; display: grid; gap: 12px; }
.mail-form textarea { font: 14.5px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
.warn-txt { color: var(--bad); }
.ok-txt { color: var(--good); }
.mail-events { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.mail-log td { font-size: 13.5px; }
.mail-log th { width: auto; }
.mail-body { white-space: pre-wrap; font: 13px/1.5 system-ui, sans-serif; margin: 8px 0 0; color: var(--ink-2); }
.mail-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; max-width: 820px; }
.mail-list > li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; }
.mail-list > li.mail-in { border-left: 4px solid var(--accent); }
.mail-list > li.mail-out { border-left: 4px solid var(--line-2); background: var(--panel-2); }
.mail-list > li.spam { opacity: .6; }
.mail-meta { font-size: 13px; color: var(--muted); }
.mail-subj { font-weight: 650; margin: 2px 0 4px; }
.mail-snip { margin: 0 0 6px; color: var(--ink-2); font-size: 14.5px; }

/* ===== Guia da Formação Brasil: additions on top of guiadaformacao.pt's stylesheet ===== */
:root { --m-senac: #1d5b8c; --m-senai: #b42a2a; --m-etec: #6f4aa6; }
@media (prefers-color-scheme: dark) { :root { --m-senac: #7db6e3; --m-senai: #ef8f8f; --m-etec: #bfa0e6; } }
.m-senac { color: var(--m-senac); background: color-mix(in srgb, var(--m-senac) 11%, transparent); }
.m-senai { color: var(--m-senai); background: color-mix(in srgb, var(--m-senai) 11%, transparent); }
.m-etec { color: var(--m-etec); background: color-mix(in srgb, var(--m-etec) 11%, transparent); }
.cat a { color: inherit; text-decoration: none; }
.meta .when.soon { color: var(--bad); }

/* hero search: "curso ou área" + "cidade" are text inputs (with suggestions), styled like the selects */
.finder input { font-family: inherit; font-size: 16px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 11px 12px; width: 100%; min-width: 0; }
.finder input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
main > .finder { max-width: 820px; margin: 10px 0 18px; }

/* status lines */
.okline.warn { background: var(--warn-soft); color: var(--warn); }
.okline.urgent { background: var(--bad-soft); color: var(--bad); }
.okline a { color: inherit; }
.okline span { min-width: 0; }

/* the course page's editions (lib/site.mjs edRows): a month strip, then per place one list with a row per centre */
.months { display: flex; gap: 8px; overflow-x: auto; margin: 8px 0 10px; padding: 2px 0 4px; scrollbar-width: none; }
.months::-webkit-scrollbar { display: none; }
.mo { flex: 1 0 78px; max-width: 150px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 11px 9px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s; }
.mo:hover { border-color: var(--line-2); }
.mo small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.mo b { display: block; font-size: 19px; font-weight: 750; line-height: 1.25; }
.mo i { display: block; position: relative; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--accent-soft); }
.mo i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 2px; background: var(--accent); }
.mo.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.city-h { display: flex; align-items: center; gap: 7px; margin: 24px 0 8px; font-size: 16px; }
.city-h svg { flex: none; color: var(--accent); }
.city-h small { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.eds { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ed-row { border-top: 1px solid var(--line); padding: 14px 16px; transition: opacity .15s; }
.ed-row:first-child { border-top: 0; }
.ed-row.dim { opacity: .35; }
.ed-run { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; }
.ed-run[hidden] { display: none; }
.ed-tile { align-self: start; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; text-align: center; line-height: 1.1; background: var(--panel); }
.ed-tile small { display: block; padding: 3px 0; background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.ed-tile b { display: block; padding-top: 5px; font-size: 21px; font-weight: 750; }
.ed-tile em { display: block; padding: 1px 2px 5px; font-style: normal; font-size: 11.5px; color: var(--muted); }
.ed-body { min-width: 0; }
.ed-c { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.ed-addr { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-span { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ed-track { flex: 1; max-width: 150px; min-width: 50px; position: relative; height: 6px; border-radius: 3px; background: var(--slate-soft); }
.ed-track i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); opacity: .6; }
.ed-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.ed-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ed-meta svg { color: var(--muted); }
.ed-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.ed-note a { color: var(--accent); }
.ed-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ed-side .btn { padding: 8px 13px; font-size: 14px; white-space: nowrap; }
.ed-pill { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ed-pill.urgent { background: var(--bad-soft); color: var(--bad); }
.ed-pill.soon { background: var(--warn-soft); color: var(--warn); }
.ed-pill.open { background: var(--good-soft); color: var(--good); }
.ed-pill.none { background: var(--slate-soft); color: var(--slate); }
.ed-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0 70px; }
.ed-dates span { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.ed-dates a { padding: 4px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 13px; text-decoration: none; transition: border-color .15s, opacity .15s; }
.ed-dates a:hover { border-color: var(--accent); }
.ed-dates a.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.ed-dates a.dim { opacity: .4; }
@media (max-width: 599px) {
  .ed-row { padding: 12px 13px; }
  .ed-run { grid-template-columns: 48px minmax(0, 1fr); gap: 10px 12px; }
  .ed-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .ed-dates { margin-left: 0; }
  .ed-track { max-width: 90px; }
}
.obs { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 12px; margin: 8px 0; font-size: 14px; color: var(--ink-2); }
.obs b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; }
.obs p { margin: 0; }
.checklist { list-style: none; margin: 0; display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.checklist svg { flex: none; color: var(--good); margin-top: 1px; }
@media (min-width: 760px) { .checklist { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.panel p { margin: 6px 0; color: var(--ink-2); }

/* list pages without JS: plain page links */
.pager-nav a, .pager-nav .cur { min-width: 38px; height: 38px; padding: 0 10px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink-2); text-decoration: none; font-size: 14px; }
.pager-nav .cur { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hub-list h2 small { color: var(--muted); font-weight: 500; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.sub small { color: var(--muted); }
.fold > summary .fine { margin-left: auto; margin-right: 10px; }
details.fold .rows { margin: 6px 0 10px; }

/* the alert box's form */
.alert-inline input[type=email] { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--panel); color: var(--ink); }
.consent-line { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; font-size: 13.5px; color: var(--ink-2); max-width: 680px; }
.consent-line input { margin-top: 2px; accent-color: var(--accent); }
.alertbox .fine { margin: 6px 0 0; }
label.sr, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the alert pages (/alertas, gerenciar, cancelar) */
.alert-form { max-width: 640px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.alert-form .field { display: block; margin: 0 0 12px; font-weight: 650; font-size: 14px; border: 0; padding: 0; color: var(--ink-2); }
.alert-form .field input, .alert-form .field select { display: block; width: 100%; margin-top: 4px; font: inherit; font-weight: 400; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--panel-2); color: var(--ink); }
.alert-form .check, .check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 400; margin: 8px 0; color: var(--ink-2); }
.alert-form .btn { border: 0; }
.small { font-size: 13.5px; color: var(--muted); }
.closed { background: var(--bad-soft); color: var(--bad); border-radius: var(--radius-s); padding: 10px 12px; }
.note { background: var(--accent-soft); border-radius: var(--radius-s); padding: 10px 12px; }
.empty { color: var(--muted); }
.alert-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.alert-row { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.alert-row small { color: var(--muted); }
form.inline { display: inline; }
button.link { background: none; border: 0; padding: 0; margin-right: 12px; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; }
button.danger { background: none; border: 1px solid var(--bad); color: var(--bad); border-radius: var(--radius-s); padding: 8px 12px; font: inherit; cursor: pointer; }
.more-opts { margin: 0; }
.more-opts .linkbtn { font-size: 13px; }

/* search suggestions (site.js): our own list under the field instead of the browser's datalist */
.sug-field { position: relative; display: block; }
.sug { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; min-width: 260px; padding: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-s); box-shadow: 0 14px 34px rgb(0 0 0 / .13), 0 2px 6px rgb(0 0 0 / .06); max-height: min(380px, 58vh); overflow-y: auto; overscroll-behavior: contain; font-size: 15px; font-weight: 400; color: var(--ink); text-align: left; }
.sug[hidden] { display: none; }
.finder .fld + .fld .sug { left: auto; right: 0; } /* the right-hand field's list opens leftwards, inside the screen */
.sug .sg { margin: 0; padding: 8px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sug .sg ~ .sg { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.sug [role=option] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.sug [role=option] .ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--slate-soft); color: var(--slate); }
.sug [role=option] .t { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.sug [role=option] small { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.sug [role=option][aria-selected=true] { background: var(--accent-soft); }
.sug [role=option][aria-selected=true] .ic { background: var(--panel); color: var(--accent); }
.sug mark { background: none; color: inherit; font-weight: 700; }
.sug .none { margin: 0; padding: 10px; font-size: 14px; color: var(--muted); }
.alert-form .field label { display: block; }


/* documents for the Senac matrícula: small cards */
.docs { display: grid; gap: 12px; }
@media (min-width: 760px) { .docs { grid-template-columns: 1fr 1fr; } }
.doc-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.doc-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 16px; }
.doc-card h3 .ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.doc-card p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink); }
.doc-list svg { flex: none; color: var(--good); margin-top: 2px; }

/* /cursos: the filter form (worked out on the server: a choice reloads the page, site.js), the filters on as pills
   with an ×, page links (also the no-JS pages of the other lists), the areas under the list */
.list-filters { margin: 6px 0 10px; }
.list-filters label.on select { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.list-filters .apply { grid-column: 1 / -1; justify-self: start; }
.list-filters .apply[hidden] { display: none; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; font-size: 14px; }
.active-filters .x { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 650; text-decoration: none; }
.active-filters .x span { font-size: 17px; line-height: 1; }
.active-filters .x:hover { background: var(--accent); color: var(--accent-ink); }
.list-head { margin-top: 16px; }
.list-head h2 { font-size: 17px; }
.pager-nav a, .pager-nav .cur { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.pager-nav a:hover { border-color: var(--accent); color: var(--accent); }
.pager-nav .cur { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#areas .navlabel { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
#areas .navlabel a { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
#areas .navlabel a:hover { color: var(--accent); }
.list-head { align-items: center; flex-wrap: wrap; row-gap: 6px; }
.list-head h2 small { font-size: 14px; font-weight: 500; color: var(--muted); }
.list-head .sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.list-head .sort select { padding: 7px 8px; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; }
@media (min-width: 820px) { .stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.after h3 { margin: 16px 0 8px; font-size: 16px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14.5px; }
.tbl th, .tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--panel-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; }
.tbl td.num { white-space: nowrap; }
.tbl td.num b { color: var(--accent); }
@media (max-width: 699px) { .tbl .hide-sm { display: none; } .tbl th, .tbl td { padding: 8px 9px; } .tbl { font-size: 14px; } }