:root{
  --primary:#0ABAB5;
  --primary-100:#cef1f0;
  --text:#000;
  --muted:#6b7280;
  --border:#e5e7eb;
  --bg:#f8ffff;
}
*{box-sizing:border-box}
body{margin:24px;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.h1{font-size:28px;margin:0 0 12px}
.h2{font-size:20px;margin:0 0 8px}
.h3{font-size:16px;margin:0 0 8px}
.container{max-width:1200px;margin:0 auto}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px}
.card.flat{padding:0}
.grid{display:grid;gap:12px}
.layout{display:grid;grid-template-columns: minmax(0,1fr) 300px;gap:16px}
.col-main{min-width:0}
.col-aside{position:relative}
.legend{position:sticky;top:16px;background:var(--primary-100)}
.legend ul{margin:8px 0 0 18px;padding:0}
.legend li{margin:6px 0}

.row{display:grid;grid-template-columns: 1fr auto;gap:12px;padding:10px 16px;border-top:1px solid var(--border)}
.row:first-child{border-top:0}
.scale{display:grid;grid-auto-flow:column;gap:10px;justify-content:end;align-items:center}
.q{padding-right:8px}

.f{display:grid;gap:6px}
.choices{display:flex;gap:10px;align-items:center}
.choices.wrap{flex-wrap:wrap}
.input, select{padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:#fff}
.input:focus, select:focus{outline:2px solid var(--primary-100);border-color:var(--primary)}

.btn{background:var(--primary);color:#fff;border:0;padding:10px 16px;border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(0.95)}
.sticky-actions{position:sticky;bottom:0;background:#fff;padding:12px 0;border-top:1px solid var(--border)}
.muted{color:var(--muted);font-size:12px}

/* TOOLTIP */
.tooltip{position:fixed;z-index:50;padding:6px 8px;background:#111;color:#fff;border-radius:8px;font-size:12px;pointer-events:none;opacity:0;transform:translate(-50%,-8px);transition:opacity .12s}
.tooltip.show{opacity:1}

/* Responsivo */
@media (max-width: 980px){
  .eval-layout{
    grid-template-columns: 1fr;   /* uma coluna */
  }
  .eval-layout .legend{
    order: -1;                    /* traz a legenda para cima do card de avaliação */
    position: sticky;
    top: 0;                       /* gruda no topo ao rolar */
  }
}

/* Grid somente para o bloco de avaliação */
.eval-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:16px;
  align-items:start;
}

/* A legenda só fica sticky dentro do bloco de avaliação */
.eval-layout .legend{
  position:sticky;
  top:16px;
  background:var(--primary-100);
}

/* Responsivo */
@media (max-width: 980px){
  .eval-layout{ grid-template-columns: 1fr; }
  .eval-layout .legend{ position:sticky; top:0; }
}

/* botão visualmente desabilitado */
.btn.is-disabled{opacity:.6; cursor:not-allowed; filter:saturate(.7)}
.btn.is-disabled:hover{filter:saturate(.7)}

/* realce de inválidos e dicas */
.invalid{position:relative}
.invalid .input, .invalid select,
.invalid input[type="date"], .invalid input[type="number"],
.invalid input[type="email"], .invalid input[type="text"]{
  border-color:#ef4444; outline:2px solid rgba(239,68,68,.15)
}
.invalid.row{border-left:4px solid #ef4444; background:#fff4f4}
.hint{margin-top:4px; font-size:12px; color:#b91c1c}

/* Center login card */
.center-screen{min-height:100svh; display:grid; place-items:center}

/* Menu (dashboard) */
.menu-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.menu-list a{
  display:block; padding:12px 14px; border-radius:12px;
  text-decoration:none; color:inherit; background:#fff;
  border:1px solid #e6f1f0;
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease;
}
.menu-list a:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08); background:#f2fbfb}

/* Tabelas responsivas e ações no rodapé (voltar à direita) */
.table-wrap{border:1px solid #e6f1f0; border-radius:12px; padding:6px}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table th,.table td{padding:12px 14px; text-align:left; vertical-align:top}
.table thead th{background:#f7ffff; position:sticky; top:0}
.actions{display:flex; justify-content:flex-end; gap:8px; padding:12px 6px 6px}

/* Grid de informações no topo do detalhe */
.info-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 900px){
  .info-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 640px){
  .info-grid{grid-template-columns: 1fr}
  .table th,.table td{padding:10px}
}

/* Lista de itens por fator */
.factor-block{margin-bottom:10px}
.factor-list{margin:8px 0 0 0; padding-left:18px}
.muted{color:#5b6870; font-size:.95em}

/* separador entre linhas da tabela */
.table tbody tr + tr td { border-top: 1px solid #e6f1f0; }

/* bloco visual do componente tabela + barra de ações embaixo */
.table-card{border:1px solid #e6f1f0; border-radius:12px; overflow:hidden; background:#fff}
.table-card .table{margin:0}
.table-card .actions{border-top:1px solid #e6f1f0; padding:10px; display:flex; justify-content:flex-end}

/* espaçamento vertical entre blocos (5px) */
.stack-5 > * + * { margin-top: 5px; }

/* grupo input + botão embutido */
.input-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border, #e6f2f1);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.input-group input {
  border: 0;
  outline: none;
  padding: 10px 12px;
  min-width: 240px;
}
.input-group .btn {
  border: 0;
  border-left: 1px solid var(--border, #e6f2f1);
  border-radius: 0;
  padding: 10px 14px;
}

/* rodapé da tabela (alinha botões à direita) */
.table-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* linha de ações no detalhe (Voltar + Gerar PDF) */
.actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Container vertical com espaçamento de 5px entre blocos */
.stack-5 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Linha de ações inferior */
.actions-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Lista de itens por fator */
.factor-block {
  margin: 6px 0;
}
.factor-list {
  margin: 8px 0 0 0;
  padding-left: 18px;
}
.factor-list .muted {
  opacity: .7;
}

/* Tabela responsiva com separador de linhas */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table thead th {
  text-align: left;
  padding: 10px 12px;
}
.table tbody td {
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,.08); /* separador entre linhas */
}

/* Em telas menores, deixa a tabela com scroll horizontal suave */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}