@import url("../styles.css");

/* ---------- VIDEO ---------- */
.video-section{margin-bottom:40px;}

.video-frame{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
}
.video-frame iframe{width:100%;height:100%;border:0;display:block;}
.video-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:var(--ink-faint);
  font-size:14.5px;
}
.play-icon{width:52px;height:52px;color:var(--line-strong);}

/* ---------- SEARCH (clear button needs extra right padding) ---------- */
#searchInput{padding-right:40px;}

/* ---------- SUGGESTIONS ---------- */
.suggestions{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; z-index:30;
}
.suggestion-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; cursor:pointer; border-bottom:1px solid var(--line);
}
.suggestion-item:last-child{border-bottom:none;}
.suggestion-item:hover, .suggestion-item.active{background:var(--surface-2);}
.suggestion-name{font-weight:600; font-size:14px;}
.suggestion-name mark{background:var(--accent-2-soft); color:inherit; border-radius:3px;}

/* ---------- RESULT MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,14,10,.6);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay[hidden]{display:none;}
.modal-dialog{
  position:relative;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:30px 26px 26px;
  max-width:640px; width:100%; max-height:85vh; overflow-y:auto;
}
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px;
  border-radius:50%; border:1px solid var(--line-strong); background:var(--surface-2);
  color:var(--ink-soft); font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{background:var(--line); color:var(--ink);}
.result-area{}
.result-card{}
.result-card.not-found{text-align:center; color:var(--ink-soft);}
.result-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-right:28px;}
.result-title{font-family:var(--font-display); font-size:1.5rem; font-weight:700; margin:0; color:var(--ink);}
.result-sub{margin:4px 0 0; color:var(--ink-soft); font-size:0.9rem;}
.result-message{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); font-size:1rem;}
.result-message strong{color:var(--accent);}
.result-grid{margin-top:16px; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px;}
.result-field{background:var(--surface-2); border-radius:var(--radius); padding:10px 14px;}
.result-field .label{display:block; font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:3px;}
.result-field .value{font-weight:600;}
.result-links{margin-top:16px; display:flex; gap:12px; flex-wrap:wrap;}
.result-links a{
  font-size:0.85rem; font-weight:600; color:var(--accent); text-decoration:none;
  padding:8px 14px; border:1px solid var(--line-strong); border-radius:100px;
}
.result-links a:hover{border-color:var(--accent); background:var(--accent-2-soft);}

/* ---------- BADGES ---------- */
.badge{
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:100px;
  font-size:0.78rem; font-weight:700; white-space:nowrap;
  font-family:var(--font-mono); letter-spacing:.02em;
}
.badge-mantida{ color:var(--accent-ink); background:var(--accent); }
.badge-renomeada{ color:#fff; background:var(--sec-cyan); }
.badge-unificada{ color:#fff; background:var(--sec-purple); }
.badge-descontinuada{ color:#fff; background:var(--sec-orange); }
.badge-adicionada{ color:#fff; background:var(--sec-gold); }

/* ---------- LEGEND ---------- */
.legend{margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:0.88rem;}
.legend-title{color:var(--ink-faint); margin-right:2px; font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;}

/* ---------- TABLE / CATALOG ---------- */
.list-section{margin-top:8px;}
.table-wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); max-height:620px; overflow:auto;
}
table{width:100%; border-collapse:collapse; font-size:0.9rem;}
thead th{
  text-align:left; background:var(--surface-2); color:var(--ink-soft);
  padding:12px 16px; font-weight:700; font-size:0.72rem; text-transform:uppercase;
  letter-spacing:.05em; font-family:var(--font-mono); position:sticky; top:0;
  border-bottom:1px solid var(--line);
}
tbody tr{border-bottom:1px solid var(--line); cursor:pointer;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
td{padding:10px 16px; vertical-align:middle; color:var(--ink);}
td.muted{color:var(--ink-faint);}

/* ---------- CTA BAND (attribution note with icon, not the subscribe CTA) ---------- */
.cta-band{
  padding:36px 32px; gap:14px; justify-content:flex-start;
}
:root[data-theme="dark"] .cta-band{border:1px solid var(--line);}
@media (prefers-color-scheme: dark){ .cta-band{border:1px solid var(--line);} }
.cta-band svg{flex:none; width:34px; height:34px; opacity:.9;}
.cta-band p{color:color-mix(in srgb, var(--on-dark) 78%, transparent);}
.cta-band a{color:var(--sec-gold); text-decoration:none; font-weight:600;}
.cta-band a:hover{text-decoration:underline;}

@media (max-width:760px){
  table{font-size:0.82rem;}
  th, td{padding:9px 10px;}
}

/* ---------- EQUIVALENCE (result card enrichment) ---------- */
.result-equivalencia{margin-top:16px; padding-top:16px; border-top:1px dashed var(--line);}
.result-equivalencia h3{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); margin:0 0 10px;
}
.equiv-item{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:8px 12px; background:var(--surface-2); border-radius:var(--radius); margin-bottom:6px;
}
.equiv-item .ramo-tag{
  font-family:var(--font-mono); font-size:0.68rem; font-weight:700; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent); padding:2px 8px; border-radius:100px; flex:none;
}
.equiv-item .equiv-text{font-size:0.88rem; color:var(--ink);}
.equiv-item .equiv-text strong{color:var(--ink);}

/* ---------- EQUIVALENCE PAGE ---------- */
.back-link{margin:14px 0 0;}
.back-link a{color:var(--accent-2); text-decoration:none; font-size:0.9rem; font-weight:600;}
.back-link a:hover{text-decoration:underline;}

.etapas-section{margin-top:28px;}
.etapas-title{font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin:0 0 12px; color:var(--ink);}
.etapas-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px;}
.etapa-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 16px;
}
.etapa-card .etapa-nome{font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--accent);}
.etapa-card .etapa-faixa{display:block; margin-top:4px; font-size:0.82rem; color:var(--ink-soft);}

.eixo-group{margin-top:40px;}
.eixo-heading{
  font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--ink);
  margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid var(--accent);
}
.blocos-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:18px;}
.bloco-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:20px 22px; display:flex; flex-direction:column; gap:12px;
}
.bloco-card.is-match{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-2-soft), var(--shadow);}
.bloco-title{font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--ink); margin:0;}
.bloco-field .label{
  display:block; font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-faint); margin-bottom:4px;
}
.bloco-field .value{font-size:0.9rem; color:var(--ink); line-height:1.5;}
.bloco-field ul{margin:0; padding-left:18px;}
.bloco-field li{margin-bottom:4px;}
.bloco-codes{font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-soft); background:var(--surface-2); border-radius:6px; padding:6px 10px; margin-bottom:4px;}
.bloco-codes .nivel-tag{color:var(--accent-2); font-weight:700; margin-right:6px;}
.especialidade-pills{display:flex; flex-wrap:wrap; gap:6px;}
.especialidade-pill{
  font-size:0.78rem; font-weight:600; padding:4px 10px; border-radius:100px;
  background:var(--accent-2-soft); color:var(--accent-2);
}
.especialidade-pill.is-highlight{background:var(--accent); color:var(--accent-ink);}
.especialidade-pill.is-insignia{background:var(--surface-2); color:var(--ink-faint);}
.bloco-modalidades{font-size:0.8rem; color:var(--ink-faint); font-style:italic;}