/* Dashboard do wpp-resume. Sem build, sem framework.
   Mobile-first: é onde o resumo vai ser lido de manhã. */

:root {
  --fundo: #fbfaf8;
  --papel: #ffffff;
  --texto: #1c1b19;
  --suave: #6b6862;
  --linha: #e6e2db;
  --realce: #2f6f4e;
  --alerta: #a3402c;
  /* Escala de importância: verde (baixa) → amarelo (alta). Sem vermelho. */
  --p1: #3f8f63;
  --p2: #5f9c4e;
  --p3: #8aa63c;
  --p4: #bda92f;
  --p5: #e0b52a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #16150f;
    --papel: #1e1d17;
    --texto: #ece9e1;
    --suave: #9b968b;
    --linha: #33312a;
    --realce: #6fbf92;
    --alerta: #e08a76;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 5rem; }

a { color: var(--realce); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: .8rem 0 .2rem; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; }
h3 { font-size: 1rem; margin: 0 0 .3rem; }

/* --- topo --- */

.topo {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .7rem 1rem; border-bottom: 1px solid var(--linha); background: var(--papel);
}
.marca { font-weight: 700; color: var(--texto); }
.topo nav { margin-left: auto; display: flex; gap: .9rem; }
.topo nav a, .busca { font-size: .9rem; }
.busca { flex: 1 1 12rem; }
.busca input {
  width: 100%; padding: .4rem .6rem; border: 1px solid var(--linha);
  border-radius: .4rem; background: var(--fundo); color: var(--texto);
}

/* --- listas --- */

.cards, .lista { list-style: none; padding: 0; margin: .6rem 0; }
.cards li, .lista li { margin-bottom: .5rem; }

.card, .lista li > a {
  display: block; padding: .8rem .9rem; background: var(--papel);
  border: 1px solid var(--linha); border-radius: .5rem; color: var(--texto);
}
.card:hover, .lista li > a:hover { border-color: var(--realce); text-decoration: none; }
.lista li.encerrado > a { opacity: .62; }

.meta { display: block; color: var(--suave); font-size: .85rem; }
.nota { color: var(--suave); font-size: .9rem; }
.vazio { color: var(--suave); padding: 1.5rem 0; }
.volta { font-size: .9rem; margin: .4rem 0 0; }

.abas { display: flex; gap: 1rem; margin: .4rem 0 1rem; font-size: .92rem; }
.abas .ativa { font-weight: 600; border-bottom: 2px solid var(--realce); }

/* --- assuntos --- */

.assunto, .episodio, .consolidado, .extras {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: .5rem; padding: .9rem 1rem; margin: .7rem 0;
}
.assunto h2, .consolidado h2 { margin-top: 0; }
.resumo { white-space: pre-wrap; }
.insight {
  margin: .7rem 0 0; padding-left: .7rem; border-left: 3px solid var(--p4);
  color: var(--suave); font-size: .93rem;
}

.peso {
  display: inline-block; width: .62rem; height: .62rem;
  border-radius: 50%; margin-right: .35rem; vertical-align: middle;
}
.p1 { background: var(--p1); } .p2 { background: var(--p2); }
.p3 { background: var(--p3); } .p4 { background: var(--p4); }
.p5 { background: var(--p5); }

.tag {
  display: inline-block; font-size: .74rem; padding: .1rem .45rem;
  border: 1px solid var(--linha); border-radius: .8rem; color: var(--suave);
}
.tag.apagado { opacity: .6; }

/* --- mensagens originais --- */

details summary { cursor: pointer; color: var(--suave); font-size: .88rem; margin-top: .6rem; }
.mensagens { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.mensagens li { margin-bottom: .25rem; }
.mensagens .hora { color: var(--suave); font-variant-numeric: tabular-nums; }
.mensagens .autor { font-weight: 600; }

/* --- busca --- */

.resultados li { background: var(--papel); border: 1px solid var(--linha);
                 border-radius: .5rem; padding: .7rem .9rem; }
.trecho { margin: .2rem 0 .4rem; }
mark { background: var(--p5); color: #1c1b19; padding: 0 .1rem; border-radius: .15rem; }

/* --- tabela de runs --- */

.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linha); }
th { color: var(--suave); font-weight: 600; }
tr.erro td { background: color-mix(in srgb, var(--alerta) 8%, transparent); }
.erro-msg { color: var(--alerta); }
.nowrap { white-space: nowrap; }

/* --- formulários --- */

.upload { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
input[type=file], input[type=date], input[type=password] {
  padding: .45rem .6rem; border: 1px solid var(--linha);
  border-radius: .4rem; background: var(--papel); color: var(--texto);
}
button {
  padding: .45rem 1rem; border: 0; border-radius: .4rem; cursor: pointer;
  background: var(--realce); color: var(--papel); font: inherit; font-size: .9rem;
}
button.secundario { background: transparent; color: var(--suave); border: 1px solid var(--linha); }
button:hover { opacity: .9; }

/* --- login --- */

.login { max-width: 20rem; margin: 18vh auto; text-align: center; }
.login form { flex-direction: column; }
.login input, .login button { width: 100%; }
.alerta {
  color: var(--alerta); font-size: .9rem; text-align: left;
  border: 1px solid var(--alerta); border-radius: .4rem; padding: .6rem .8rem;
}