/* ==================================================================
   Triagem · Pesquisa Clínica — componentes específicos do produto
   Carregar depois de triagem-app.css (tokens + shell herdados)
   ================================================================== */

/* Acessibilidade (RNF-26) */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand-azul); outline-offset: 2px; }
.link { color: var(--brand-azul); font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }
kbd { font: 500 11px/1 'JetBrains Mono', monospace; padding: 2px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--fg-secondary); }

/* Prontuário (REG) — sempre mono */
.reg { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--fg); font-variant-numeric: tabular-nums; }

/* Ciclo de vida da avaliação — 9 status (PRD §5) */
.st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st--aguardando   { background: var(--subtle); color: var(--fg-secondary); border-color: var(--border); }
.st--em-avaliacao { background: var(--info-light); color: var(--brand-azul); border-color: rgba(44,74,140,.18); }
.st--pendencia    { background: var(--warning-light); color: var(--warning-dark); border-color: rgba(224,155,45,.22); }
.st--elegivel     { background: var(--success-light); color: var(--success-dark); border-color: rgba(31,154,94,.18); }
.st--nao-elegivel { background: var(--danger-light); color: var(--danger-dark); border-color: rgba(217,79,106,.22); }
.st--encaminhado  { background: #EEF6F9; color: #1C5C73; border-color: rgba(28,92,115,.18); }
.st--screening    { background: #F1EFFA; color: #46398A; border-color: rgba(70,57,138,.18); }
.st--incluido     { background: var(--success-dark); color: #fff; }
.st--nao-incluido { background: #fff; color: var(--danger-dark); border-color: var(--danger); }

/* Resultado da triagem (RF-14) */
.res { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.res::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.res--avaliar { color: var(--fg-secondary); }
.res--potencial { color: var(--success-dark); }
.res--nao { color: var(--danger-dark); }
.res--pendencia { color: var(--warning-dark); }

/* Sítio tumoral + unidade */
.site { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-xs); background: var(--subtle); border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.unit-tag { font: 600 10.5px 'JetBrains Mono', monospace; letter-spacing: .04em; color: var(--brand-azul); background: var(--info-light); padding: 2px 6px; border-radius: var(--radius-xs); white-space: nowrap; }

/* Seletor de opção clínica (RF-11/RF-13) — radio como segmento, teclado-first (RNF-25) */
.optset { display: flex; flex-wrap: wrap; gap: 6px; border: none; padding: 0; margin: 0; min-width: 0; }
.optset legend { font-size: 12.5px; font-weight: 500; color: var(--fg-secondary); margin-bottom: 6px; padding: 0; }
.optset legend .req { color: var(--danger); margin-left: 2px; }
.optset label { position: relative; }
.optset input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.optset label > span { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; font-size: 13px; color: var(--fg); cursor: pointer; transition: border 120ms, background 120ms, color 120ms; }
.optset label > span:hover { border-color: var(--border-strong); }
.optset input:focus-visible + span { box-shadow: var(--ring-azul); border-color: var(--brand-azul); }
.optset input:checked + span { background: var(--brand-azul); border-color: var(--brand-azul); color: #fff; }
.optset .opt-nf { color: var(--fg-secondary); font-style: italic; }
.optset .opt-na { color: var(--fg-tertiary); }
.optset input:checked + .opt-nf, .optset input:checked + .opt-na { color: #fff; font-style: normal; background: var(--fg-secondary); border-color: var(--fg-secondary); }
.field--error .optset span { border-color: var(--danger); }

/* Seção de formulário numerada */
.form-section { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 24px 20px; border-bottom: 1px solid var(--border); }
.form-section:last-of-type { border-bottom: none; }
.form-section__head .n { font: 600 11px/1 'JetBrains Mono', monospace; color: var(--brand-azul); letter-spacing: .08em; }
.form-section__head h3 { margin: 6px 0 4px; font-size: 15px; font-weight: 600; }
.form-section__head p { margin: 0; font-size: 12.5px; color: var(--fg-secondary); }
@media (max-width: 1023px) { .form-section { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* Sugestão de estudo (RF-15) */
.suggest { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; cursor: pointer; transition: border 120ms, box-shadow 120ms; }
.suggest:hover { border-color: var(--border-strong); }
.suggest.is-selected { border-color: var(--brand-azul); box-shadow: var(--ring-azul); }
.suggest strong { display: block; font-size: 13.5px; }
.suggest small { color: var(--fg-secondary); font-size: 12px; }
.crit { display: flex; flex-wrap: wrap; gap: 4px; }
.suggest .crit { margin-top: 8px; }
.crit-tag { font-size: 11px; padding: 1px 7px; border-radius: var(--radius-full); border: 1px solid var(--border); color: var(--fg-secondary); background: var(--subtler); }
.crit-tag.ok { color: var(--success-dark); border-color: rgba(31,154,94,.25); background: var(--success-light); }
.crit-tag.miss { color: var(--warning-dark); border-color: rgba(224,155,45,.3); background: var(--warning-light); }
.crit-tag.no { color: var(--danger-dark); border-color: rgba(217,79,106,.25); background: var(--danger-light); }
.match { font: 600 12px 'JetBrains Mono', monospace; color: var(--success-dark); text-align: right; white-space: nowrap; }
.match small { display: block; font: 500 10.5px 'Inter', sans-serif; color: var(--fg-tertiary); }

/* Alertas inline */
.notice { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; border: 1px solid; align-items: flex-start; }
.notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.notice--warn { background: var(--warning-light); border-color: rgba(224,155,45,.3); color: var(--warning-dark); }
.notice--danger { background: var(--danger-light); border-color: rgba(217,79,106,.3); color: var(--danger-dark); }
.notice--info { background: var(--info-light); border-color: rgba(44,74,140,.2); color: var(--brand-azul); }
.notice--ok { background: var(--success-light); border-color: rgba(31,154,94,.25); color: var(--success-dark); }
.notice strong { display: block; }
.notice p { margin: 2px 0 0; color: var(--fg); }

/* Barra de ações fixa (formulários longos) */
.sticky-actions { position: sticky; bottom: 0; z-index: 5; background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-top: 1px solid var(--border); padding: 12px 20px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.autosave { font-size: 12px; color: var(--fg-secondary); display: inline-flex; gap: 6px; align-items: center; }
.autosave::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* Drawer + modal */
.overlay { position: fixed; inset: 0; background: rgba(15,30,38,.45); z-index: 60; display: none; }
.overlay.is-open { display: block; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--surface); z-index: 61; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 220ms ease-out; display: flex; flex-direction: column; visibility: hidden; }
.drawer.is-open { transform: none; visibility: visible; }
.drawer__head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.drawer__head h3 { margin: 0; font-size: 16px; }
.drawer__body { padding: 20px; overflow-y: auto; flex: 1; }
.drawer__foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--subtler); flex-wrap: wrap; }
.modal { position: fixed; z-index: 62; top: 50%; left: 50%; transform: translate(-50%, -46%); opacity: 0; visibility: hidden; width: min(440px, calc(100vw - 32px)); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: opacity 160ms, transform 160ms; }
.modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.modal__body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.modal__body h3 { margin: 0; font-size: 17px; }
.modal__body p { margin: 0; font-size: 13px; color: var(--fg-secondary); }
.modal__foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.close-x { background: none; border: 1px solid var(--border); width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--fg-secondary); cursor: pointer; flex-shrink: 0; }
.close-x:hover { color: var(--fg); border-color: var(--border-strong); }
.close-x svg { width: 16px; height: 16px; }

/* Toast */
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 80; background: var(--fg); color: #fff; padding: 12px 16px; border-radius: var(--radius-md); font-size: 13px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: center; transform: translateY(16px); opacity: 0; pointer-events: none; transition: all 200ms; max-width: calc(100vw - 40px); }
.toast.is-on { transform: none; opacity: 1; }
.toast .ok { width: 18px; height: 18px; border-radius: 50%; background: var(--success); display: grid; place-items: center; flex-shrink: 0; }
.toast .ok svg { width: 12px; height: 12px; }

/* Linha do tempo (RF-06) */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl { position: relative; padding: 0 0 20px; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ""; position: absolute; left: -24px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--brand-azul); }
.tl.tl--ok::before { border-color: var(--success); background: var(--success); }
.tl.tl--warn::before { border-color: var(--warning); }
.tl.tl--danger::before { border-color: var(--danger); }
.tl .when { font: 500 11.5px 'JetBrains Mono', monospace; color: var(--fg-tertiary); }
.tl strong { display: block; font-size: 13.5px; margin: 2px 0; }
.tl p { margin: 0; font-size: 12.5px; color: var(--fg-secondary); }

/* Barras horizontais (painéis RF-51) */
.hbar { display: grid; grid-template-columns: 140px 1fr 64px; gap: 12px; align-items: center; padding: 6px 0; font-size: 13px; }
.hbar .track { height: 10px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; }
.hbar .fill { height: 100%; border-radius: inherit; background: var(--brand-azul); transition: width 300ms ease-out; }
.hbar .fill.alt { background: var(--brand-azul-claro); opacity: .5; }
.hbar .v { font: 600 13px 'JetBrains Mono', monospace; text-align: right; }
@media (max-width: 640px) { .hbar { grid-template-columns: 96px 1fr 52px; } }

/* Funil de recrutamento (RF-52) */
.funnel { display: flex; flex-direction: column; gap: 6px; }
.funnel__row { display: grid; grid-template-columns: 170px 1fr 120px; gap: 12px; align-items: center; }
.funnel__lbl { font-size: 13px; font-weight: 500; }
.funnel__bar { height: 30px; background: var(--subtle); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.funnel__bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--brand-azul), var(--brand-azul-claro)); border-radius: var(--radius-sm); transition: width 300ms ease-out; }
.funnel__row.is-final .funnel__bar i { background: linear-gradient(90deg, var(--success-dark), var(--success)); }
.funnel__num { font: 600 14px 'JetBrains Mono', monospace; text-align: right; }
.funnel__num small { font: 500 11px 'Inter', sans-serif; color: var(--fg-tertiary); margin-left: 6px; }
@media (max-width: 640px) { .funnel__row { grid-template-columns: 1fr 90px; } .funnel__bar { grid-column: 1 / -1; grid-row: 2; height: 14px; } }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tabs button { background: none; border: none; padding: 10px 14px; font: 500 13.5px 'Inter', sans-serif; color: var(--fg-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--brand-azul); border-bottom-color: var(--brand-azul); font-weight: 600; }
.tabs .count { font: 600 11px 'JetBrains Mono', monospace; margin-left: 6px; color: var(--fg-tertiary); }
[role="tabpanel"][hidden] { display: none; }

/* Tabela responsiva → cartões no celular */
@media (max-width: 720px) {
  table.data.stackable thead { display: none; }
  table.data.stackable, table.data.stackable tbody, table.data.stackable tr, table.data.stackable td { display: block; width: 100%; }
  table.data.stackable tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  table.data.stackable tbody td { border: none; padding: 3px 0; text-align: left !important; }
  table.data.stackable td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 104px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-tertiary); }
  table.data.stackable td.hide-sm { display: none; }
}

/* Vazio */
.empty { padding: 40px 20px; text-align: center; color: var(--fg-secondary); font-size: 13px; }
.empty strong { display: block; color: var(--fg); font-size: 14px; margin-bottom: 4px; }

/* Grids de página */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.split--wide-side { grid-template-columns: minmax(0, 1fr) 400px; }
@media (max-width: 1180px) { .split, .split--wide-side { grid-template-columns: minmax(0, 1fr); } }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; font-size: 13px; margin: 0; }
.kv dt { color: var(--fg-secondary); }
.kv dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* Wide screens: não deixar o conteúdo esticar demais */
@media (min-width: 1680px) { .main > .wrap { max-width: 1480px; margin: 0 auto; } }

/* Topbar compacta em celulares estreitos */
@media (max-width: 420px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar__actions .topbar__iconbtn[aria-label="Ajuda"] { display: none; }
  .page-header__actions { width: 100%; }
  .page-header__actions .btn { flex: 1; }
}

/* Sem rolagem horizontal: colunas fluidas podem encolher abaixo do conteúdo */
.main, .topbar, .topbar__title { min-width: 0; }
.topbar__title h1, .topbar__title .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .app { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1180px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* Funil responde à largura do cartão, não da janela */
.funnel { container-type: inline-size; }
@container (max-width: 480px) {
  .funnel__row { grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 12px; }
  .funnel__bar { grid-column: 1 / -1; grid-row: 2; height: 12px; }
}