/*!
 * SEMIO MED - Tutor de Anamnese (07/10/2026).
 * Acompanha assets/semiomed-tutor.js: painel de correção legível e aba menos poluída.
 */

.semiomed-tutor-ativo {
  --tutor-ink: #0f1f33;
  --tutor-muted: #5c6e83;
  --tutor-line: #dce5ef;
  --tutor-soft: #f4f8fc;
  --tutor-accent: #1d4f82;
  --tutor-ok: #1b6b4a;
  --tutor-ok-soft: #e6f4ec;
  --tutor-warn: #8a5f12;
  --tutor-warn-soft: #fdf3e0;
  --tutor-bad: #a8472a;
  --tutor-bad-soft: #fdeeea;
}

html.dark.semiomed-tutor-ativo,
html.dark .semiomed-tutor-feedback {
  --tutor-ink: #eef4fb;
  --tutor-muted: #a3b6cc;
  --tutor-line: rgba(148, 177, 211, 0.24);
  --tutor-soft: rgba(30, 58, 92, 0.3);
  --tutor-accent: #7fb5e8;
  --tutor-ok-soft: rgba(27, 107, 74, 0.22);
  --tutor-warn-soft: rgba(138, 95, 18, 0.22);
  --tutor-bad-soft: rgba(168, 71, 42, 0.22);
}

/* ================================================================== */
/* Painel de correção                                                  */
/*                                                                     */
/* A lista do que faltou vinha em text-amber-100 — quase branco — sobre */
/* um fundo amarelo claro. Era a parte mais útil da correção e era a    */
/* única que não dava para ler.                                        */
/* ================================================================== */

html #root .semiomed-tutor-feedback {
  padding: 18px 20px 20px !important;
  border-width: 1px !important;
  border-radius: 18px !important;
}

html #root .semiomed-tutor-feedback[data-situacao="excelente"] {
  border-color: rgba(27, 107, 74, 0.32) !important;
  background: var(--tutor-ok-soft) !important;
}

html #root .semiomed-tutor-feedback[data-situacao="incompleto"] {
  border-color: rgba(176, 116, 28, 0.34) !important;
  background: var(--tutor-warn-soft) !important;
}

html #root .semiomed-tutor-feedback[data-situacao="inadequado"] {
  border-color: rgba(168, 71, 42, 0.32) !important;
  background: var(--tutor-bad-soft) !important;
}

/* Situação: deixa de ser um rótulo genérico e passa a dizer o veredito. */
html #root .semiomed-tutor-feedback > p:first-child {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px !important;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

html #root .semiomed-tutor-feedback[data-situacao="excelente"] > p:first-child {
  background: rgba(27, 107, 74, 0.16);
  color: var(--tutor-ok) !important;
}

html #root .semiomed-tutor-feedback[data-situacao="incompleto"] > p:first-child {
  background: rgba(176, 116, 28, 0.16);
  color: var(--tutor-warn) !important;
}

html #root .semiomed-tutor-feedback[data-situacao="inadequado"] > p:first-child {
  background: rgba(168, 71, 42, 0.16);
  color: var(--tutor-bad) !important;
}

html #root .semiomed-tutor-feedback > p:nth-of-type(2) {
  margin: 0 !important;
  color: var(--tutor-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
}

/* A lista do que falta: era invisível, agora é a parte que mais salta. */
html #root .semiomed-tutor-faltou {
  display: grid !important;
  gap: 7px !important;
  margin-top: 14px !important;
  padding: 0 !important;
  list-style: none !important;
}

html #root .semiomed-tutor-faltou li {
  display: flex !important;
  align-items: flex-start;
  gap: 9px !important;
  padding: 10px 12px;
  border: 1px solid var(--tutor-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--tutor-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45;
}

html.dark #root .semiomed-tutor-faltou li { background: rgba(8, 15, 28, 0.45); }

html #root .semiomed-tutor-faltou li svg {
  width: 16px !important;
  height: 16px !important;
  margin-top: 1px;
  color: var(--tutor-warn) !important;
}

/* Conferência dos atributos da seção */
.semiomed-tutor-atributos {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--tutor-line);
}

.semiomed-tutor-atributos h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--tutor-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.semiomed-tutor-atributos h4 span {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(29, 79, 130, 0.12);
  color: var(--tutor-accent);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.semiomed-tutor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.semiomed-tutor-chips li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--tutor-line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.semiomed-tutor-chips li span {
  font-size: 12px;
  font-weight: 900;
}

.semiomed-tutor-chips .is-ok {
  border-color: rgba(27, 107, 74, 0.3);
  background: rgba(27, 107, 74, 0.1);
  color: var(--tutor-ok);
}

.semiomed-tutor-chips .is-falta {
  border-color: rgba(176, 116, 28, 0.34);
  background: rgba(255, 255, 255, 0.72);
  color: var(--tutor-warn);
}

html.dark .semiomed-tutor-chips .is-falta { background: rgba(8, 15, 28, 0.4); }

.semiomed-tutor-nota {
  margin: 10px 0 0;
  color: var(--tutor-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

/* ================================================================== */
/* Topo da aba                                                         */
/*                                                                     */
/* Quatro caixas grandes de número lado a lado com cinco botões. Viram  */
/* uma faixa discreta: o número continua lá, só para de gritar.         */
/* ================================================================== */

html #root .semiomed-tutor-metricas {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

html #root .semiomed-tutor-metrica {
  display: inline-flex !important;
  align-items: baseline;
  gap: 7px;
  min-width: 0 !important;
  padding: 7px 13px !important;
  border: 1px solid var(--tutor-line) !important;
  border-radius: 999px !important;
  background: var(--tutor-soft) !important;
  box-shadow: none !important;
}

html #root .semiomed-tutor-metrica > * {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

html #root .semiomed-tutor-metrica > :first-child {
  color: var(--tutor-accent) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html #root .semiomed-tutor-metrica > :last-child {
  color: var(--tutor-muted) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}

/* Elementos que o tema achatou para branco e sumiram da tela. */
html.semiomed-smooth #root .semiomed-tutor-topo [class*="bg-emerald"],
html.semiomed-smooth #root .semiomed-tutor-topo [class*="bg-rose"] {
  background-color: transparent !important;
  border: 1px solid var(--tutor-line) !important;
}

html.semiomed-smooth #root .semiomed-tutor-topo [class*="text-emerald"] { color: var(--tutor-ok) !important; }
html.semiomed-smooth #root .semiomed-tutor-topo [class*="text-rose"] { color: var(--tutor-bad) !important; }

/* Etiqueta de situação da seção (era amarelo claro sobre amarelo claro). */
html.semiomed-smooth #root .semiomed-tutor-ativo [class*="text-amber"],
html #root .semiomed-tutor-feedback [class*="text-amber"] { color: var(--tutor-warn) !important; }

/* ================================================================== */
/* Lista de seções                                                     */
/*                                                                     */
/* Cada linha repetia quatro vezes a mesma informação: rótulo, barra,   */
/* porcentagem e visto. Fica o rótulo e a barra.                        */
/* ================================================================== */

html #root .semiomed-tutor-nav-item { padding: 11px 13px !important; }

html #root .semiomed-tutor-pct { display: none !important; }

html #root .semiomed-tutor-nav-item svg {
  width: 15px !important;
  height: 15px !important;
  opacity: 0.55;
}

html #root .semiomed-tutor-nav-item[class*="bg-"] svg,
html #root .semiomed-tutor-nav-item:hover svg { opacity: 1; }

@media (max-width: 760px) {
  html #root .semiomed-tutor-metricas { gap: 6px !important; }
  html #root .semiomed-tutor-metrica { padding: 6px 10px !important; }
  .semiomed-tutor-atributos h4 { flex-wrap: wrap; }
}

/* Etiqueta de situação da seção: vinha em amber-100 sobre amber a 10%, contraste de
   1,2 para 1. Ilegível. Cada situação ganha a sua cor, com fundo que a sustenta. */
html #root .semiomed-tutor-etiqueta {
  border-color: transparent !important;
  font-size: 10.5px !important;
}

html #root .semiomed-tutor-etiqueta[data-situacao="ok"] {
  background: rgba(27, 107, 74, 0.14) !important;
  color: var(--tutor-ok) !important;
}

html #root .semiomed-tutor-etiqueta[data-situacao="atencao"] {
  background: rgba(176, 116, 28, 0.16) !important;
  color: var(--tutor-warn) !important;
}

html #root .semiomed-tutor-etiqueta[data-situacao="andamento"] {
  background: rgba(29, 79, 130, 0.13) !important;
  color: var(--tutor-accent) !important;
}

html #root .semiomed-tutor-etiqueta[data-situacao="ruim"] {
  background: rgba(168, 71, 42, 0.14) !important;
  color: var(--tutor-bad) !important;
}

/* Linhas da navegação: a barra de progresso vazia ocupava uma faixa inteira em cada
   uma das nove linhas. Fica fina e só aparece quando há o que mostrar. */
html #root .semiomed-tutor-nav-item [class*="rounded-full"][class*="bg-"] { height: 3px !important; }

/* ================================================================== */
/* Relatório de correção (só depois de compilar)                       */
/*                                                                     */
/* Enquanto o aluno escreve não aparece correção nenhuma — o lugar      */
/* dela é aqui, junto do documento que ele vai entregar.                */
/* ================================================================== */

.semiomed-tutor-oculto { display: none !important; }

.semiomed-tutor-relatorio {
  max-width: 64rem;
  margin: 18px auto 0;
  padding: 22px 24px 24px;
  border: 1px solid var(--tutor-line, #dce5ef);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

html.dark .semiomed-tutor-relatorio {
  border-color: rgba(148, 177, 211, 0.24);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: none;
}

.semiomed-tutor-relatorio[data-estado="carregando"] { opacity: 0.85; }

.semiomed-tutor-relatorio-cabecalho { margin-bottom: 16px; }

.semiomed-tutor-relatorio-cabecalho span {
  display: block;
  color: var(--tutor-accent, #1d4f82);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.semiomed-tutor-relatorio-cabecalho h2 {
  margin: 5px 0 0;
  color: var(--tutor-ink, #0f1f33);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.semiomed-tutor-relatorio-cabecalho p {
  margin: 8px 0 0;
  color: var(--tutor-muted, #5c6e83);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
}

.semiomed-tutor-alerta,
.semiomed-tutor-proximo {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--tutor-accent, #1d4f82);
  border-radius: 0 12px 12px 0;
  background: var(--tutor-soft, #f4f8fc);
}

.semiomed-tutor-alerta {
  border-left-color: #a8472a;
  background: var(--tutor-bad-soft, #fdeeea);
}

.semiomed-tutor-alerta strong,
.semiomed-tutor-proximo strong {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.semiomed-tutor-alerta strong { color: var(--tutor-bad, #a8472a); }
.semiomed-tutor-proximo strong { color: var(--tutor-accent, #1d4f82); }

.semiomed-tutor-alerta p,
.semiomed-tutor-proximo p {
  margin: 0;
  color: var(--tutor-ink, #0f1f33);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
}

.semiomed-tutor-secoes { display: grid; gap: 10px; }

.semiomed-tutor-secao {
  padding: 13px 15px;
  border: 1px solid var(--tutor-line, #dce5ef);
  border-left-width: 3px;
  border-radius: 12px;
}

.semiomed-tutor-secao[data-situacao="excelente"] { border-left-color: #1b6b4a; }
.semiomed-tutor-secao[data-situacao="incompleto"] { border-left-color: #b0741c; }
.semiomed-tutor-secao[data-situacao="inadequado"] { border-left-color: #a8472a; }

.semiomed-tutor-secao header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 5px;
}

.semiomed-tutor-secao h3 {
  margin: 0;
  color: var(--tutor-ink, #0f1f33);
  font-size: 14px;
  font-weight: 800;
}

.semiomed-tutor-secao header span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.semiomed-tutor-secao[data-situacao="excelente"] header span { color: #1b6b4a; }
.semiomed-tutor-secao[data-situacao="incompleto"] header span { color: #8a5f12; }
.semiomed-tutor-secao[data-situacao="inadequado"] header span { color: #a8472a; }

.semiomed-tutor-secao p {
  margin: 0;
  color: var(--tutor-ink, #0f1f33);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.semiomed-tutor-secao ul {
  display: grid;
  gap: 5px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.semiomed-tutor-secao li {
  position: relative;
  padding-left: 17px;
  color: var(--tutor-muted, #5c6e83);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
}

.semiomed-tutor-secao li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--tutor-accent, #1d4f82);
  font-weight: 900;
}

@media (max-width: 760px) {
  .semiomed-tutor-relatorio { padding: 16px 15px 18px; border-radius: 18px; }
  .semiomed-tutor-relatorio-cabecalho h2 { font-size: 17px; }
}