/* ============================================================
   FRBT — identidade "linha de prumo"
   Paleta canônica (frbt-advogados/skills/_shared/formatacao.md):
   navy #1D3557 (primária) · dourado #D4AF37 (acento) · grafite #333333
   ============================================================ */
:root {
  --navy: #1D3557;
  --navy-escuro: #14263f;
  --navy-claro: #2a4a78;
  --dourado: #D4AF37;
  --dourado-claro: #e8cd75;
  --grafite: #333333;
  --cinza-texto: #5a6472;
  --fundo: #f7f8fa;
  --branco: #ffffff;
  --borda: #e3e7ee;
  --verde-ok: #2e7d51;
  --vermelho: #b03a3a;
  --fonte-titulo: "Century Gothic", CenturyGothic, "Questrial", "Montserrat",
    "Segoe UI", sans-serif;
  --fonte-corpo: "Segoe UI", system-ui, -apple-system, sans-serif;
  --sombra: 0 1px 3px rgba(29, 53, 87, 0.10), 0 1px 2px rgba(29, 53, 87, 0.06);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--fonte-corpo);
  color: var(--grafite);
  background: var(--fundo);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--navy); }

/* ---------- Barra superior ---------- */
.topo {
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.25rem;
  height: 58px;
  box-shadow: var(--sombra);
}
.topo .logo { display: flex; align-items: center; gap: .6rem; }
.topo .logo img { height: 36px; display: block; }
.topo nav { display: flex; gap: .25rem; flex: 1; }
.topo nav a {
  color: #dfe6f0;
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-size: .95rem;
  padding: .45rem .8rem;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
}
.topo nav a:hover { background: var(--navy-claro); color: #fff; }
.topo nav a.ativo {
  color: #fff;
  border-bottom-color: var(--dourado);
  background: var(--navy-escuro);
}
.topo .usuario { font-size: .85rem; color: #c7d2e2; }
.topo .usuario a { color: var(--dourado-claro); text-decoration: none; margin-left: .5rem; }

/* ---------- Conteúdo ---------- */
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* Título de página no estilo "linha de prumo":
   barra vertical navy + losango dourado + filete dourado */
.titulo-prumo {
  font-family: var(--fonte-titulo);
  color: var(--navy);
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 1.2rem;
  padding-left: .85rem;
  border-left: 4px solid var(--navy);
  position: relative;
  display: inline-block;
  padding-bottom: .35rem;
}
.titulo-prumo::before { content: "◆ "; color: var(--dourado); font-size: .95rem; }
.titulo-prumo::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--dourado);
}
.subtitulo {
  font-family: var(--fonte-titulo);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 1.4rem 0 .6rem;
}

/* ---------- Cartões e tabelas ---------- */
.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;
}
table.lista { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.lista th {
  text-align: left;
  font-family: var(--fonte-titulo);
  color: var(--navy);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .5rem .6rem;
  border-bottom: 2px solid var(--navy);
}
table.lista td { padding: .55rem .6rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
table.lista tr:hover td { background: #f2f5f9; }
table.lista a.linha { color: var(--navy); font-weight: 600; text-decoration: none; }
table.lista a.linha:hover { text-decoration: underline; }

/* Cabeçalho de dia na agenda */
.dia-cabecalho {
  font-family: var(--fonte-titulo);
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  margin: 1.5rem 0 .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.dia-cabecalho::before { content: "◆"; color: var(--dourado); font-size: .8rem; }
.dia-cabecalho .qtde { color: var(--cinza-texto); font-weight: 400; font-size: .85rem; }
.dia-cabecalho.hoje .marcador-hoje {
  background: var(--dourado);
  color: var(--navy-escuro);
  font-size: .7rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.badge.presencial { background: #e8eef7; color: var(--navy); }
.badge.virtual { background: #e5f3ec; color: var(--verde-ok); }
.badge.hibrida { background: #f3ecdb; color: #7c6414; }
.badge.pericia { background: #f7e9e9; color: var(--vermelho); }
.badge.sustentacao { background: #efe7f7; color: #5b3a86; }
.badge.conciliacao { background: #e7f2f7; color: #22617d; }
.badge.status-AG { background: #e8eef7; color: var(--navy); }
.badge.status-RE { background: #e5f3ec; color: var(--verde-ok); }
.badge.status-AD { background: #fdf3d8; color: #8a6d1a; }
.badge.status-CA { background: #f3f3f3; color: #777; text-decoration: line-through; }
.badge.sem-adv { background: #fdeaea; color: var(--vermelho); }

/* Progresso da preparação */
.progresso { font-size: .8rem; color: var(--cinza-texto); white-space: nowrap; }
.progresso .ok { color: var(--verde-ok); font-weight: 700; }

/* ---------- Filtros ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-bottom: .75rem;
}
.filtros select, .filtros input[type="text"] {
  padding: .4rem .6rem;
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: #fff;
  font-size: .88rem;
  color: var(--grafite);
}
.filtros label.check { font-size: .85rem; color: var(--cinza-texto); display: flex; gap: .3rem; align-items: center; }

/* ---------- Botões ---------- */
.botao, button.botao {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: .9rem;
  padding: .5rem 1rem;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
}
.botao:hover { background: var(--navy-claro); }
.botao.secundario { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.botao.dourado { background: var(--dourado); color: var(--navy-escuro); font-weight: 700; }
.botao.dourado:hover { background: var(--dourado-claro); }
.botao.mini { font-size: .78rem; padding: .3rem .6rem; }

/* ---------- Formulários ---------- */
form.formulario p { margin: 0 0 .9rem; }
form.formulario label {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: .82rem;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: .25rem;
}
form.formulario input, form.formulario select, form.formulario textarea {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--borda);
  border-radius: 7px;
  font-size: .92rem;
  font-family: var(--fonte-corpo);
  color: var(--grafite);
  background: #fff;
}
form.formulario input:focus, form.formulario select:focus, form.formulario textarea:focus {
  outline: 2px solid var(--dourado);
  border-color: var(--dourado);
}
form.formulario .helptext { font-size: .76rem; color: var(--cinza-texto); }
form.formulario .errorlist { color: var(--vermelho); font-size: .82rem; margin: .15rem 0 0; padding-left: 1rem; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 700px) { .grade-2 { grid-template-columns: 1fr; } }

/* ---------- Checklist ---------- */
ul.checklist { list-style: none; margin: 0; padding: 0; }
ul.checklist li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .2rem;
  border-bottom: 1px dashed var(--borda);
  font-size: .93rem;
}
ul.checklist li:last-child { border-bottom: none; }
ul.checklist .caixa {
  width: 1.15rem; height: 1.15rem;
  border: 2px solid var(--navy);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: transparent;
  font-size: .8rem;
  line-height: 1;
}
ul.checklist li.feito .caixa { background: var(--verde-ok); border-color: var(--verde-ok); color: #fff; }
ul.checklist li.feito .texto { text-decoration: line-through; color: var(--cinza-texto); }
ul.checklist .meta { font-size: .74rem; color: var(--cinza-texto); margin-left: auto; white-space: nowrap; }
ul.checklist .remover { color: #b9c0cc; text-decoration: none; font-size: .9rem; }
ul.checklist .remover:hover { color: var(--vermelho); }

/* ---------- Ficha (detalhe) ---------- */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem 1.2rem; }
.ficha .campo .rotulo {
  font-family: var(--fonte-titulo);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cinza-texto);
}
.ficha .campo .valor { font-size: .95rem; }

/* ---------- Rodapé ---------- */
footer {
  border-top: 1px solid var(--navy);
  padding: .8rem 0 1.1rem;
  text-align: center;
  font-size: .75rem;
  color: var(--cinza-texto);
  background: #fff;
}
footer .losangos { color: var(--dourado); letter-spacing: .6em; font-size: .7rem; display: block; margin-bottom: .3rem; }

/* ---------- Login ---------- */
.login-caixa {
  max-width: 380px;
  margin: 8vh auto 0;
  background: var(--navy);
  border-radius: 12px;
  padding: 2rem 2rem 1.6rem;
  color: #fff;
  text-align: center;
  box-shadow: 0 8px 30px rgba(20, 38, 63, .35);
}
.login-caixa img { width: 220px; max-width: 100%; margin-bottom: 1.2rem; }
.login-caixa form input {
  width: 100%;
  padding: .6rem .7rem;
  margin-bottom: .7rem;
  border-radius: 7px;
  border: none;
  font-size: .95rem;
}
.login-caixa .botao { width: 100%; }
.login-caixa .erro { background: #fdeaea; color: var(--vermelho); border-radius: 7px; padding: .5rem; font-size: .85rem; margin-bottom: .7rem; }
.botao.google-entrar {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.botao.google-entrar:hover { background: var(--dourado-claro); }
.login-separador {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
  margin: .9rem 0 .7rem;
}
.login-separador::before, .login-separador::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.vazio { color: var(--cinza-texto); font-style: italic; padding: 1rem 0; }
.acoes-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

/* ---------- Tarefas de preparação (v2, visual compacto) ---------- */
.tarefa { border-bottom: 1px solid var(--borda); background: #fff; }
.tarefa:last-of-type { border-bottom: none; }
.tarefa.atrasada .tarefa-titulo::after { content: ""; }
.tarefa summary {
  display: flex; align-items: center; gap: .55rem;
  padding: .38rem .3rem; cursor: pointer; list-style: none;
  font-size: .9rem;
}
.tarefa summary:hover { background: #f6f8fb; }
.tarefa summary::-webkit-details-marker { display: none; }
.tarefa-titulo { color: var(--grafite); }
.tarefa.feita .tarefa-titulo { color: #9aa3b0; text-decoration: line-through; }
.tarefa-status-selo {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .16rem .5rem; border-radius: 999px; white-space: nowrap;
  border: none; cursor: pointer; font-family: var(--fonte-corpo); width: 6.6rem; text-align: center;
}
.tarefa-status-selo.status-PE { background: #eef1f6; color: var(--cinza-texto); }
.tarefa-status-selo.status-PE:hover { background: #e2e7ef; }
.tarefa-status-selo.status-EX { background: #fdf3d8; color: #8a6d1a; }
.tarefa-status-selo.status-FE { background: #e5f3ec; color: var(--verde-ok); }
.tarefa-meta { margin-left: auto; display: flex; gap: .55rem; align-items: center; }
.tarefa-data { font-size: .76rem; color: var(--cinza-texto); white-space: nowrap; }
.tarefa-data.vencida { color: var(--vermelho); font-weight: 700; }
.tarefa-resp { font-size: .74rem; color: var(--navy); background: #e8eef7; padding: .08rem .45rem; border-radius: 999px; white-space: nowrap; }
.tarefa-mini { font-size: .72rem; color: var(--cinza-texto); }
.tarefa-corpo { padding: .5rem .6rem .8rem 7.6rem; background: #fafbfd; border-top: 1px dashed var(--borda); }
.tarefa-instrucoes { color: var(--cinza-texto); font-size: .84rem; margin: 0 0 .5rem; }
.tarefa-controles { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: .4rem 0; }
.tarefa-controles label, .tarefa-obs label, .tarefa-anexos > label, .tarefa-comentarios > label {
  display: block; font-family: var(--fonte-titulo); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-texto);
  font-weight: 700; margin-bottom: .2rem;
}
.tarefa-controles select {
  padding: .3rem .5rem; border: 1px solid var(--borda); border-radius: 6px; font-size: .84rem; background: #fff;
}
.tarefa-feito-meta { font-size: .78rem; color: var(--verde-ok); margin: 0 0 .4rem; }
.tarefa-remover { color: #b9c0cc; text-decoration: none; font-size: .8rem; margin-left: auto; }
.tarefa-remover:hover { color: var(--vermelho); }
.tarefa-obs { flex: 1; min-width: 260px; }
.tarefa-obs input[type="text"] {
  flex: 1; padding: .35rem .55rem; border: 1px solid var(--borda);
  border-radius: 6px; font-size: .85rem; font-family: var(--fonte-corpo);
}
.tarefa-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: .6rem; }
@media (max-width: 860px) { .tarefa-blocos { grid-template-columns: 1fr; } .tarefa-corpo { padding-left: .6rem; } }
.tarefa-anexos, .tarefa-comentarios { margin-top: 0; }
.anexo-linha { display: flex; gap: .5rem; align-items: center; font-size: .88rem; padding: .25rem 0; }
.anexo-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
.anexo-form input[type="text"], .anexo-form input[type="url"] {
  padding: .35rem .55rem; border: 1px solid var(--borda); border-radius: 6px; font-size: .84rem;
}
.anexo-form input[type="url"] { min-width: 240px; }
.anexo-form .ou { font-size: .76rem; color: var(--cinza-texto); }
.anexo-form input[type="file"] { font-size: .8rem; max-width: 220px; }
/* ---------- Subtarefas (delegações) ---------- */
.tarefa-sub { margin: .8rem 0; }
.sub-linha { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--borda); font-size: .88rem; }
.sub-linha:last-of-type { border-bottom: none; }
.sub-caixa {
  width: 1.05rem; height: 1.05rem; border: 2px solid var(--navy); border-radius: 4px;
  cursor: pointer; flex-shrink: 0; background: #fff; color: transparent;
  font-size: .7rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.sub-linha.cumprida .sub-caixa { background: var(--verde-ok); border-color: var(--verde-ok); color: #fff; }
.sub-linha.cumprida .sub-texto { text-decoration: line-through; color: var(--cinza-texto); }
.sub-meta { margin-left: auto; font-size: .74rem; color: var(--cinza-texto); white-space: nowrap; }
.sub-form { display: flex; gap: .4rem; margin-top: .5rem; }
.sub-form input[type="text"] { flex: 1; padding: .4rem .55rem; border: 1px solid var(--borda); border-radius: 6px; font-size: .85rem; }
.sub-form select { padding: .3rem .4rem; border: 1px solid var(--borda); border-radius: 6px; font-size: .82rem; background: #fff; }
.salvo-ok { color: var(--verde-ok); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: .5rem; }
.tarefa-obs textarea {
  width: 100%; padding: .5rem .65rem; border: 1px solid var(--borda);
  border-radius: 7px; font-size: .9rem; font-family: var(--fonte-corpo);
  margin-bottom: .35rem; line-height: 1.5;
}

/* ---------- Timeline do caso ---------- */
.timeline-filtros { display: flex; gap: .4rem; margin-bottom: .6rem; }
.chip {
  font-size: .78rem; padding: .2rem .7rem; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--cinza-texto); text-decoration: none;
}
.chip.ativo { background: var(--navy); color: #fff; border-color: var(--navy); }
.timeline-form { display: flex; gap: .5rem; margin-bottom: .8rem; }
.timeline-form input { flex: 1; padding: .45rem .65rem; border: 1px solid var(--borda); border-radius: 7px; font-size: .9rem; }
.timeline-linha { border-left: 2px solid var(--borda); padding-left: .9rem; }
.timeline-marco { margin: .55rem 0; font-size: .82rem; }
.marco-selo {
  background: #e8eef7; color: var(--navy); font-size: .68rem; font-weight: 700;
  padding: .1rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.marco-selo::first-letter { color: var(--dourado); }
.marco-texto { color: var(--cinza-texto); }
.timeline-registro { margin: .55rem 0 .8rem; }
.registro-cab { margin: 0; font-size: .82rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.registro-cab span { color: var(--cinza-texto); font-size: .74rem; }
.registro-texto { margin: .1rem 0 0; font-size: .9rem; white-space: pre-wrap; }
.registro-tag {
  font-size: .7rem; background: #eef2f8; color: var(--navy);
  padding: .06rem .5rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.registro-tag:hover { background: #e0e8f3; }
.registro-editado { font-style: italic; }
.registro-apagado { opacity: .6; font-style: italic; }
.registro-sistema { font-size: .76rem; color: var(--cinza-texto); margin: .3rem 0; }
.tarefa-feito-preview { font-size: .76rem; color: var(--verde-ok); font-weight: 700; white-space: nowrap; }
.aviso-permissao {
  background: #fdf3d8; color: #8a6d1a; border: 1px solid #ecd9a0;
  border-radius: 7px; padding: .45rem .7rem; font-size: .85rem; margin: .4rem 0;
}
.registro-acoes { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.pilula {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .72rem; font-family: var(--fonte-corpo);
  padding: .14rem .6rem; border-radius: 999px;
  border: 1px solid var(--borda); background: #fff; color: var(--cinza-texto);
  cursor: pointer; line-height: 1.4;
}
.pilula:hover { border-color: var(--navy); color: var(--navy); background: #f2f5f9; }
.pilula-ativa { background: var(--dourado); border-color: var(--dourado); color: var(--navy-escuro); font-weight: 700; }
.pilula-ativa:hover { background: var(--dourado-claro); border-color: var(--dourado-claro); color: var(--navy-escuro); }
.pilula-perigo:hover { border-color: var(--vermelho); color: var(--vermelho); background: #fdf1f1; }
.registro-form-editar { display: none; gap: .4rem; margin: .35rem 0 0; }
.registro-form-editar.aberto { display: flex; }
.registro-form-editar textarea {
  flex: 1; padding: .4rem .55rem; border: 1px solid var(--borda);
  border-radius: 6px; font-size: .86rem; font-family: var(--fonte-corpo);
}
.registro-form-editar .botao { align-self: flex-end; }

/* ---------- Moldes / novo evento ---------- */
.molde-caixa {
  border: 1px dashed var(--borda); border-radius: 8px;
  padding: .8rem 1rem; margin: .9rem 0; background: #fafbfd;
}
.molde-titulo { font-family: var(--fonte-titulo); font-weight: 700; color: var(--navy); font-size: .88rem; margin: 0 0 .5rem; }
.check-molde { display: block; font-size: .9rem; margin: .25rem 0; font-family: var(--fonte-corpo); font-weight: 400; color: var(--grafite); }
.check-molde input { width: auto; margin-right: .4rem; }
.check-molde .helptext { margin-left: .35rem; }
.relembrete-grupo { display: inline-flex; align-items: center; gap: .3rem; }
.relembrete-rotulo { font-size: .8rem; color: var(--cinza-texto); }

/* ---------- Ata da audiência ---------- */
.ata-caixa {
  margin-top: 1rem; padding: .8rem 1rem;
  border: 1px solid var(--dourado); border-radius: 8px; background: #fdfaf1;
}
.ata-titulo { font-family: var(--fonte-titulo); font-weight: 700; color: var(--navy); font-size: .92rem; margin-bottom: .4rem; }
.ata-titulo::first-letter { color: var(--dourado); }

/* feedback forte de salvamento das observações */
.salvo-ok {
  background: #e5f3ec; color: var(--verde-ok); font-weight: 700;
  padding: .12rem .6rem; border-radius: 999px; font-size: .78rem;
  animation: salvo-pulso 1.2s ease-out;
}
@keyframes salvo-pulso {
  0% { background: var(--verde-ok); color: #fff; }
  100% { background: #e5f3ec; color: var(--verde-ok); }
}

/* ---------- Designação rápida na agenda ---------- */
.designacao { display: inline-flex; align-items: center; gap: .3rem; }
.designacao select {
  padding: .25rem .4rem; border: 1px solid var(--borda); border-radius: 6px;
  font-size: .82rem; background: #fff; max-width: 9.5rem;
}
.designacao select.sem-designacao { border-color: var(--vermelho); color: var(--vermelho); }
.designacao .sino {
  border: none; background: none; cursor: pointer; font-size: .95rem; padding: .1rem .2rem;
}
.designacao .sino:disabled { opacity: .35; cursor: default; }