/* Portal de Certificados ESPD — identidade visual da ESPD (www.espd.com.br, Instagram @espd.oficial).
   Predomínio de azuis: azul profundo nos fundos e no logo, azul petróleo em títulos e ações,
   azul acinzentado sobre fundos escuros. Fundo creme como no site. O laranja aparece só como
   detalhe (traço sob os títulos), como na comunicação da escola.
   Tipografia: "ESPD" em serifa Didone (Playfair Display), títulos em Noto Serif e texto em Open Sans. */

/* Fontes servidas pelo próprio portal (só o subconjunto latino; licença SIL OFL em /fonts),
   para o navegador do visitante não falar com o Google a cada página. */
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("../fonts/open-sans.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/noto-serif-700.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("../fonts/noto-serif-700-italico.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/playfair-display-700.woff2") format("woff2");
}

:root {
  --azul-profundo: #06243d;
  --azul: #073c59;
  --azul-medio: #24668c;
  --azul-vivo: #1e9bd7;
  --azul-gelo: #afc6d9;
  --azul-nevoa: #e6eef4;
  --laranja: #c9752f;
  --creme: #fff8ee;
  --creme-2: #f4ece0;
  --branco: #ffffff;
  --texto: #14293a;
  --cinza: #5a6b78;
  --borda: #dfe3e6;
  --borda-creme: #eadfce;
  --verde: #1f6b47;
  --verde-fundo: #e3f2e9;
  --vermelho: #b3261e;
  --vermelho-fundo: #fbe9e7;
  --ambar: #845400;
  --ambar-fundo: #fcf0d6;
  --cinza-fundo: #eceef0;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(6, 36, 61, .06), 0 8px 24px rgba(6, 36, 61, .07);
  --didone: "Playfair Display", "Bodoni 72", Didot, Georgia, serif;
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Grade fina, como nos fundos das peças da ESPD */
  --grade: repeating-linear-gradient(90deg, rgba(175, 198, 217, .07) 0 1px, transparent 1px 72px),
           repeating-linear-gradient(0deg, rgba(175, 198, 217, .07) 0 1px, transparent 1px 72px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--creme);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
}
h1, h2, h3 { font-family: var(--serif); color: var(--azul); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.04rem; }
p { margin: 0 0 1em; }
a { color: var(--azul-medio); text-underline-offset: 2px; }
a:hover { color: var(--azul); }
img { max-width: 100%; }
code, .codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }
.codigo { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 2px; }

/* ---------- Marca ---------- */
.marca { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--azul); }
.marca-logo { display: block; height: 1.75rem; width: auto; }
.marca-sub {
  font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--azul-medio);
  padding-left: .75rem; border-left: 1px solid currentColor; line-height: 1.6;
}
.marca.clara { color: var(--branco); }
.marca.clara .marca-sub { color: var(--azul-gelo); }

/* ---------- Cabeçalho ---------- */
.topo { background: var(--azul-profundo); position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 0 rgba(175, 198, 217, .15); }
.topo .marca { color: var(--branco); }
.topo .marca-sub { color: var(--azul-gelo); }
.topo-interno { max-width: 1180px; margin: 0 auto; padding: .8rem 1rem; display: flex; align-items: center; gap: 2rem; }
.menu { display: flex; gap: .2rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a {
  position: relative; white-space: nowrap; text-decoration: none; color: #c6d5e2; font-weight: 600; font-size: .9rem;
  padding: .5rem .8rem; border-radius: 6px;
}
.menu a:hover { color: var(--branco); background: rgba(175, 198, 217, .1); }
.menu a.ativo { color: var(--branco); background: var(--azul); }
.menu a.ativo::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem; height: 2px; background: var(--azul-vivo); border-radius: 2px; }
.contador { display: inline-block; min-width: 1.45em; padding: 0 .4em; margin-left: .35em; border-radius: 99px; background: var(--azul-vivo); color: var(--branco); font-size: .72rem; line-height: 1.45em; text-align: center; }
.usuario { display: flex; align-items: center; gap: .75rem; font-size: .88rem; white-space: nowrap; }
.usuario a { color: var(--azul-gelo); text-decoration: none; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.usuario a:hover { color: var(--branco); }
.usuario form { margin: 0; }
.topo .btn.secundario { background: transparent; color: var(--branco); border-color: rgba(175, 198, 217, .45); }
.topo .btn.secundario:hover { background: rgba(175, 198, 217, .12); border-color: var(--azul-gelo); }
.topo-simples { background: var(--azul-profundo); }

@media (max-width: 760px) {
  .topo-interno { flex-wrap: wrap; gap: .5rem 1rem; }
  .menu { order: 3; flex-basis: 100%; }
  .usuario { margin-left: auto; }
  .usuario a { max-width: 9rem; }
  .marca-logo { height: 1.5rem; }
}

/* ---------- Estrutura ---------- */
.conteudo { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 2.25rem 1rem 3.5rem; }
.conteudo.estreito { max-width: 760px; }
.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina h1::after { content: ""; display: block; width: 56px; height: 3px; margin-top: .55rem; background: var(--laranja); border-radius: 2px; }
.cabecalho-pagina p { margin: .5rem 0 0; color: var(--cinza); }
.sobretitulo { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--azul-medio); margin-bottom: .35rem; }
.voltar-link { display: inline-block; margin-bottom: .75rem; font-size: .88rem; color: var(--cinza); text-decoration: none; }
.voltar-link:hover { color: var(--azul); }

.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.5rem; margin-bottom: 1.5rem; }
.cartao > h2:first-child { margin-top: 0; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; align-items: start; }
.grade-2 > .cartao { margin-bottom: 0; }

/* ---------- Indicadores ---------- */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 2.25rem; }
.indicador { background: var(--branco); border: 1px solid var(--borda); border-top: 3px solid var(--azul); border-radius: var(--raio); padding: 1.1rem 1.25rem; text-decoration: none; color: inherit; box-shadow: var(--sombra); transition: border-color .15s, transform .15s; }
.indicador:hover { border-top-color: var(--azul-vivo); transform: translateY(-1px); color: inherit; }
.indicador strong { display: block; font-family: var(--serif); font-size: 2rem; color: var(--azul); line-height: 1.2; }
.indicador span { color: var(--cinza); font-size: .9rem; }
.indicador.destaque { background-color: var(--azul-profundo); background-image: var(--grade); border-color: var(--azul-profundo); border-top-color: var(--azul-vivo); }
.indicador.destaque strong { color: var(--branco); }
.indicador.destaque span { color: var(--azul-gelo); }

/* ---------- Calendário da visão geral ---------- */
/* Minimalista: sem bordas entre os dias, só o número, pontos de cor e o dia escolhido em destaque. */
/* Calendário (esquerda) e dashboard de certificados (direita) */
.visao-agenda { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; margin-bottom: 2.25rem; }
.agenda { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.25rem 1.1rem; scroll-margin-top: 5rem; }
.agenda-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.agenda-topo h2 { margin: 0; font-size: 1.05rem; }
.agenda-topo h2::first-letter { text-transform: uppercase; }
.agenda-nav { display: flex; align-items: center; gap: .25rem; }
.agenda-nav a { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .5rem; border-radius: 99px; color: var(--azul); text-decoration: none; font-size: 1.15rem; line-height: 1; }
.agenda-nav a.agenda-hoje { font-size: .84rem; font-weight: 600; border: 1px solid var(--borda); }
.agenda-nav a:hover { background: var(--azul-nevoa); }
.agenda-corpo { display: grid; gap: 1rem; }

.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cabecalho span { padding: 0 .3rem .3rem; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.cal-dia { display: flex; flex-direction: column; gap: 1px; min-height: 3.9rem; padding: .2rem .25rem .25rem; border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); text-decoration: none; color: var(--texto); overflow: hidden; }
.cal-dia:first-child { border-left: 1px solid var(--borda); }
.cal-cabecalho + .cal-semana .cal-dia { border-top: 1px solid var(--borda); }
.cal-cabecalho + .cal-semana .cal-dia:first-child { border-top-left-radius: 8px; }
.cal-cabecalho + .cal-semana .cal-dia:last-child { border-top-right-radius: 8px; }
.cal-semana:last-child .cal-dia:first-child { border-bottom-left-radius: 8px; }
.cal-semana:last-child .cal-dia:last-child { border-bottom-right-radius: 8px; }
.cal-dia.fora { background: #fafbfc; }
.cal-dia:hover { background: #f5f8fa; color: var(--texto); }
.cal-numero { align-self: flex-start; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-size: .76rem; font-weight: 600; }
.cal-dia.fora .cal-numero { color: #b2bcc4; }
.cal-dia.fora .cal-item { opacity: .55; }
.cal-dia.hoje .cal-numero { background: var(--azul); color: var(--branco); }
.cal-dia.selecionado { background: var(--azul-nevoa); }
.cal-dia.selecionado:not(.hoje) .cal-numero { color: var(--azul); box-shadow: inset 0 0 0 1.5px var(--azul); }
.cal-item { display: block; font-size: .68rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: .7rem; position: relative; color: var(--texto); }
.cal-item::before { content: ""; position: absolute; left: .1rem; top: .4em; width: 6px; height: 6px; border-radius: 50%; background: var(--cor, var(--azul-vivo)); }
.cal-item b { font-weight: 600; color: var(--cinza); margin-right: .15rem; }
.cal-mais { font-size: .66rem; color: var(--cinza); padding-left: .7rem; }

.agenda-painel { border-top: 1px solid var(--borda); padding-top: 1rem; }
.agenda-painel h3 { margin: .1rem 0 .8rem; font-size: .95rem; }
.agenda-painel h3::first-letter { text-transform: uppercase; }
.agenda-lista { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.agenda-lista li { display: grid; grid-template-columns: 3.6rem 1fr; gap: .6rem; font-size: .9rem; padding-left: .6rem; border-left: 3px solid var(--cor, var(--azul-vivo)); }
.agenda-lista li.evento { border-left-color: var(--laranja); }
.agenda-lista li.editando { background: var(--azul-nevoa); border-radius: 0 6px 6px 0; }
.agenda-lista p { margin: .1rem 0 0; color: var(--cinza); font-size: .86rem; white-space: pre-line; }
.agenda-lista .sub { display: block; color: var(--cinza); font-size: .78rem; }
.agenda-lista .acoes { gap: .9rem; margin-top: .2rem; }
.agenda-lista .btn.link { font-size: .8rem; }
.agenda-hora { font-size: .78rem; font-weight: 600; color: var(--cinza); padding-top: .1rem; }
.agenda-vazio { color: var(--cinza); font-size: .88rem; margin-bottom: 1rem; }
.btn.link.perigo-link { color: var(--vermelho); }
.agenda-novo { padding-top: .9rem; border-top: 1px solid var(--borda); }
.agenda-novo > summary { list-style: none; cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-medio); }
.agenda-novo > summary::-webkit-details-marker { display: none; }
.agenda-novo > summary:hover { color: var(--azul); }
.agenda-form { gap: .6rem; margin-top: .75rem; }
.agenda-form label, .agenda-form input { min-width: 0; }
.agenda-form .campos-2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .5rem; }
.agenda-form input, .agenda-form textarea { padding: .45rem .55rem; font-size: .88rem; }
.agenda-form textarea { min-height: 3.5rem; }
/* Paleta de cores do compromisso: bolinhas; a escolhida ganha um anel. */
.agenda-cores { display: flex; flex-wrap: wrap; gap: .45rem; border: 0; padding: 0; }
.agenda-cores label { display: block; cursor: pointer; }
.agenda-cores input { position: absolute; opacity: 0; pointer-events: none; }
.agenda-cores span:not(.oculto-visual) { display: block; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--cor); transition: box-shadow .15s; }
.agenda-cores input:checked + span { box-shadow: 0 0 0 2px var(--branco), 0 0 0 4px var(--cor); }
.agenda-cores input:focus-visible + span { outline: 2px solid var(--azul-vivo); outline-offset: 4px; }

/* Dashboard de certificados */
.painel-cert { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.25rem 1.25rem; }
.painel-cert h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
.painel-cert h3 { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); margin: 1.25rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.painel-cert h3 span { letter-spacing: .06em; }
.pc-total strong { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1.1; color: var(--azul); }
.pc-total span { font-size: .84rem; color: var(--cinza); }
.pc-aprovado { --cor: #2e9e6b; }
.pc-pendente { --cor: #e0a400; }
.pc-recusado { --cor: #d64545; }
.pc-revogado { --cor: #a7b1ba; }
.pc-barra { display: flex; gap: 2px; height: 10px; margin: .8rem 0 .6rem; }
.pc-barra span { flex-basis: 0; min-width: 4px; background: var(--cor); }
.pc-barra span:first-child { border-radius: 5px 0 0 5px; }
.pc-barra span:last-child { border-radius: 0 5px 5px 0; }
.pc-barra span:only-child { border-radius: 5px; }
.pc-legenda { list-style: none; margin: 0; padding: 0; display: grid; }
.pc-legenda a { display: grid; grid-template-columns: .6rem 1fr auto 2.6rem; align-items: center; gap: .55rem; padding: .38rem .3rem; border-radius: 6px; text-decoration: none; color: var(--texto); font-size: .88rem; }
.pc-legenda a:hover { background: #f5f8fa; color: var(--texto); }
.pc-legenda i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--cor); }
.pc-legenda strong { font-variant-numeric: tabular-nums; }
.pc-legenda small { text-align: right; color: var(--cinza); font-variant-numeric: tabular-nums; }
.pc-mes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pc-mes div { background: var(--azul-nevoa); border-radius: 8px; padding: .55rem .7rem; }
.pc-mes strong { display: block; font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; color: var(--azul); }
.pc-mes span { font-size: .8rem; color: var(--cinza); }
.pc-grafico { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; height: 7.5rem; }
.pc-coluna { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; outline-offset: 2px; border-radius: 4px; }
.pc-trilho { flex: 1; width: 100%; max-width: 1.6rem; display: flex; align-items: flex-end; }
.pc-valor { display: block; width: 100%; min-height: 2px; background: var(--azul-gelo); border-radius: 4px 4px 0 0; }
.pc-coluna.atual .pc-valor { background: var(--azul); }
.pc-rotulo { font-size: .7rem; color: var(--cinza); }
.pc-coluna.atual .pc-rotulo { color: var(--azul); font-weight: 700; }
/* Valor da barra: sempre no mês aberto; nos outros, ao passar o mouse ou focar */
.pc-dica { font-size: .72rem; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; visibility: hidden; }
.pc-coluna.atual .pc-dica, .pc-coluna:hover .pc-dica, .pc-coluna:focus-visible .pc-dica { visibility: visible; }

@media (max-width: 1000px) {
  .visao-agenda { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .agenda { padding: 1rem .6rem; }
  .cal-dia { min-height: 2.8rem; align-items: center; }
  .cal-item { width: 6px; height: 6px; padding: 0; font-size: 0; border-radius: 50%; background: var(--cor, var(--azul-vivo)); }
  .cal-item::before, .cal-mais { display: none; }
  .cal-dia { flex-direction: column; }
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid transparent; border-radius: 8px; padding: .62rem 1.15rem;
  font: 600 .93rem/1.2 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn.primario { background: var(--azul); color: var(--branco); }
.btn.primario:hover { background: var(--azul-profundo); color: var(--branco); }
.btn.escuro { background: var(--azul-profundo); color: var(--branco); }
.btn.escuro:hover { background: var(--azul); color: var(--branco); }
.btn.secundario { background: var(--branco); color: var(--azul); border-color: #c9d4dd; }
.btn.secundario:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-nevoa); }
.btn.perigo { background: var(--branco); color: var(--vermelho); border-color: #e9b8b3; }
.btn.perigo:hover { background: var(--vermelho-fundo); color: var(--vermelho); }
.btn.link { background: none; border: 0; padding: 0; color: var(--azul-medio); font-weight: 600; }
.btn.link:hover { color: var(--azul); text-decoration: underline; }
.btn.pequeno { padding: .36rem .72rem; font-size: .84rem; }
.btn.largo { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.acoes form { margin: 0; }

/* ---------- Formulários ---------- */
.form { display: grid; gap: 1rem; }
.form label, .campo { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--azul); }
.label-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.label-linha a { font-weight: 400; font-size: .86rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search],
select, textarea {
  width: 100%; padding: .64rem .8rem; border: 1px solid #c6d1da; border-radius: 8px; background: var(--branco);
  font: 400 .98rem/1.4 var(--sans); color: var(--texto);
}
textarea { min-height: 5.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(30, 155, 215, .22); border-color: var(--azul-medio); }
input[type=file] { font: inherit; font-size: .9rem; }
.checkbox { display: flex !important; align-items: flex-start; gap: .55rem; font-weight: 400 !important; color: var(--texto) !important; }
.checkbox input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--azul); }
.dica { font-weight: 400; font-size: .84rem; color: var(--cinza); }
.erro-campo { font-weight: 400; font-size: .84rem; color: var(--vermelho); }
.regras-senha { display: grid; gap: .1rem; font-weight: 400; font-size: .84rem; color: var(--cinza); }
.regras-senha span::before { content: "○"; display: inline-block; width: 1.2em; }
.regras-senha span.ok { color: var(--verde); }
.regras-senha span.ok::before { content: "✓"; font-weight: 700; }
.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: start; }
.campos-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.25rem 1.25rem; margin: 0; }
legend { font-family: var(--serif); font-weight: 700; color: var(--azul); padding: 0 .4rem; }

.filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.filtros > * { flex: 1 1 180px; }
.filtros .btn { flex: 0 0 auto; }

/* ---------- Alertas ---------- */
.alerta { border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid; font-size: .94rem; }
.alerta.ok { background: var(--verde-fundo); border-color: #b5dac4; color: #17543a; }
.alerta.erro { background: var(--vermelho-fundo); border-color: #f0c4bf; color: #8c1d17; }
.alerta.aviso { background: var(--ambar-fundo); border-color: #efd59b; color: #6a4400; }
.alerta.info { background: var(--azul-nevoa); border-color: #c7d7e4; color: var(--azul); }
.alerta ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---------- Selos de status ---------- */
.selo { display: inline-block; padding: .14rem .62rem; border-radius: 99px; font-size: .76rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.st-pendente { background: var(--ambar-fundo); color: var(--ambar); }
.st-aprovado { background: var(--verde-fundo); color: var(--verde); }
.st-recusado { background: var(--vermelho-fundo); color: var(--vermelho); }
.st-revogado { background: var(--cinza-fundo); color: var(--cinza); }
.selo.neutro { background: var(--azul-nevoa); color: var(--azul); }

/* ---------- Tabelas ---------- */
.tabela-container { overflow-x: auto; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-gelo); background: var(--azul-profundo); font-weight: 700; }
th, td { padding: .72rem .9rem; border-bottom: 1px solid #edf0f2; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f7fafc; }
td .sub { display: block; color: var(--cinza); font-size: .84rem; }
td.acoes-celula { white-space: nowrap; }
/* Texto digitado por pessoas (título, nome, e-mail, observação): uma palavra sem espaços, como um link
   enorme, quebra em qualquer ponto em vez de alargar a tabela e empurrar os botões de ação para fora. */
td.texto-livre { overflow-wrap: anywhere; min-width: 10rem; }
/* Texto longo limitado a poucas linhas; o completo aparece ao passar o mouse (atributo title). */
.limite-2, .limite-3, td .sub.limite-2, td .sub.limite-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.limite-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.limite-3 { -webkit-line-clamp: 3; line-clamp: 3; }
th input[type=checkbox] { accent-color: var(--azul-vivo); }
.col-check { width: 2.2rem; }
.vazio { padding: 2.5rem 1rem; text-align: center; color: var(--cinza); }

details.inline { display: inline-block; }
details.inline > summary { list-style: none; cursor: pointer; }
details.inline > summary::-webkit-details-marker { display: none; }
details.inline[open] { display: block; flex-basis: 100%; }
details.inline[open] > form { margin-top: .4rem; width: 260px; max-width: 100%; background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; padding: .8rem; box-shadow: var(--sombra); display: grid; gap: .5rem; }

.barra-lote { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; background-color: var(--azul-profundo); background-image: var(--grade); color: var(--branco); padding: .7rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; }
.barra-lote input[type=text] { flex: 1 1 220px; width: auto; padding: .45rem .65rem; }
.barra-lote .rotulo { font-weight: 600; margin-right: .25rem; color: var(--azul-gelo); }
.barra-lote .btn.primario { background: var(--azul-vivo); }
.barra-lote .btn.primario:hover { background: #1786bd; }

.paginacao { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.25rem; font-size: .9rem; color: var(--cinza); }
.paginacao a { font-weight: 600; text-decoration: none; }

/* ---------- Cartões de evento e certificados ---------- */
.lista-eventos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.evento-card { display: flex; flex-direction: column; gap: .5rem; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.25rem; text-decoration: none; color: inherit; box-shadow: var(--sombra); border-top: 4px solid var(--azul); transition: transform .15s, border-color .15s; }
.evento-card:hover { transform: translateY(-2px); border-top-color: var(--azul-vivo); color: inherit; }
.evento-card h3 { margin: 0; }
.evento-card .meta { color: var(--cinza); font-size: .88rem; }
.evento-card .rodape-card { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: .5rem; font-size: .88rem; font-weight: 700; color: var(--azul-medio); }

.certificados { display: grid; gap: .75rem; }
.certificado-item { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.5rem; align-items: center; background: var(--branco); border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.25rem; box-shadow: var(--sombra); }
.certificado-item.aprovado { border-left-color: var(--azul); }
.certificado-item.pendente { border-left-color: var(--azul-gelo); }
.certificado-item.recusado { border-left-color: var(--vermelho); }
.certificado-item h3 { margin: 0 0 .2rem; }
.certificado-item .meta { color: var(--cinza); font-size: .88rem; }
.certificado-item .motivo { grid-column: 1 / -1; font-size: .9rem; margin: 0; }
@media (max-width: 640px) { .certificado-item { grid-template-columns: 1fr; } }

/* Faixa de boas-vindas: azul profundo com o "ESPD" grande e recortado, como nas peças da escola */
.boas-vindas {
  background-color: var(--azul-profundo); background-image: var(--grade); color: var(--branco); border-radius: var(--raio);
  padding: 2rem 1.75rem; margin-bottom: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 1rem; position: relative; overflow: hidden;
}
.boas-vindas::after {
  content: "ESPD"; position: absolute; right: -1.5rem; bottom: -3.2rem; font-family: var(--didone); font-weight: 700;
  font-size: 10rem; line-height: 1; letter-spacing: .02em; color: rgba(175, 198, 217, .08); pointer-events: none;
}
.boas-vindas > * { position: relative; z-index: 1; }
.boas-vindas h1 { color: var(--branco); margin: 0 0 .25rem; }
.boas-vindas p { margin: 0; color: var(--azul-gelo); }
.boas-vindas .btn.primario { background: var(--branco); color: var(--azul); }
.boas-vindas .btn.primario:hover { background: var(--azul-nevoa); }

.detalhes { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 0; }
.detalhes dt { color: var(--cinza); font-size: .88rem; }
.detalhes dd { margin: 0; font-weight: 600; }

.miniatura { display: block; width: 100%; max-width: 260px; aspect-ratio: 1.414; object-fit: cover; border: 1px solid var(--borda); border-radius: 6px; background: var(--azul-nevoa); }
input[type=color] { height: 2.6rem; padding: .2rem; cursor: pointer; }
/* Escolha do modelo do certificado: cartões com miniatura; o rádio fica escondido e o cartão marcado ganha borda */
.modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; margin-top: .75rem; }
.modelo-opcao { position: relative; display: grid; gap: .45rem; padding: .5rem; border: 2px solid var(--borda); border-radius: var(--raio); background: var(--branco); cursor: pointer; transition: border-color .15s; }
.modelo-opcao:hover { border-color: var(--azul-gelo); }
.modelo-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.modelo-opcao:has(input:checked) { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(30, 155, 215, .18); }
.modelo-opcao:has(input:focus-visible) { outline: 2px solid var(--azul-vivo); outline-offset: 2px; }
.modelo-opcao img, .modelo-vazio { display: block; width: 100%; aspect-ratio: 900 / 650; object-fit: cover; border-radius: 5px; }
.modelo-vazio { display: grid; place-items: center; padding: .5rem; text-align: center; border: 1px dashed #c6d1da; background: var(--azul-nevoa); color: var(--cinza); font-size: .84rem; }
.modelo-nome { font-weight: 600; font-size: .9rem; color: var(--azul); }
.modelo-opcao:has(input:checked) .modelo-nome::after { content: " ✓"; color: var(--azul-vivo); }
/* Amostra das cores do certificado sobre a arte da frente (sem arte: o creme da moldura padrão) */
.amostra-certificado {
  aspect-ratio: 1.414; max-width: 360px; width: 100%; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--creme) center / 100% 100% no-repeat; display: flex; flex-direction: column; align-items: center;
  /* Texto a partir de ~37% da altura, como no PDF, abaixo do título das artes prontas */
  justify-content: flex-start; gap: .3rem; text-align: center; font-family: "Times New Roman", Times, serif;
  container-type: inline-size;
}
/* Medidas em cqi (largura da própria amostra): % seria calculado sobre a coluna inteira */
.amostra-certificado > * { max-width: 70cqi; }
.amostra-certificado > :first-child { margin-top: 25cqi; }
.amostra-certificado span { font-size: clamp(.55rem, 3.4cqi, .8rem); }
.amostra-certificado strong { font-size: clamp(.8rem, 5.6cqi, 1.3rem); line-height: 1.15; }
.link-copia { display: flex; gap: .5rem; }
.link-copia input { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }

/* ---------- Páginas públicas (login, cadastro, validação) ---------- */
.auth-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; }
.auth-marca {
  background-color: var(--azul-profundo); background-image: var(--grade); color: var(--branco); padding: 2.5rem 3rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; position: relative; overflow: hidden;
}
.auth-marca::after {
  content: "ESPD"; position: absolute; left: -.5rem; bottom: -4.5rem; font-family: var(--didone); font-weight: 700;
  font-size: clamp(9rem, 17vw, 15rem); line-height: 1; color: rgba(175, 198, 217, .06); pointer-events: none;
}
.auth-marca > * { position: relative; z-index: 1; }
.auth-centro { display: grid; gap: 1.75rem; max-width: 30rem; }
.logo-completo { display: block; width: 220px; height: auto; }
.auth-chamada h1 { color: var(--branco); font-size: clamp(1.6rem, 2.7vw, 2.3rem); margin: 0; }
.auth-chamada h1 em { font-style: italic; color: var(--azul-gelo); }
.auth-chamada::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 1rem; background: var(--laranja); border-radius: 2px; }
.auth-marca .passos { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; color: #d7e3ed; font-size: .95rem; }
.auth-marca .passos li { display: flex; gap: .85rem; align-items: baseline; }
.auth-marca .passos b {
  flex: 0 0 1.8rem; height: 1.8rem; display: inline-grid; place-items: center; border: 1px solid rgba(175, 198, 217, .5);
  border-radius: 50%; font-family: var(--serif); font-size: .85rem; color: var(--branco);
}
.auth-marca small { color: #8fa9bf; }
.auth-painel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.auth-card { width: 100%; max-width: 430px; }
.auth-card h1 { font-size: 1.65rem; }
.auth-card .sub { color: var(--cinza); margin-bottom: 1.5rem; }
.rodape-card { text-align: center; margin: 1.25rem 0 0; font-size: .94rem; }
.separador { display: flex; align-items: center; gap: .75rem; color: var(--cinza); font-size: .84rem; margin: 1.25rem 0; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borda-creme); }

@media (max-width: 860px) {
  .auth-grid { grid-template-columns: 1fr; min-height: 0; }
  .auth-marca { padding: 1.5rem 1.25rem; gap: 1.25rem; }
  .auth-marca::after { font-size: 7rem; bottom: -2.5rem; }
  .logo-completo, .auth-marca .passos, .auth-marca .marca-rodape { display: none; }
  .auth-painel { padding: 2rem 1rem; }
}

.resultado-validacao { border-radius: var(--raio); padding: 1.25rem; margin-top: 1.5rem; border: 1px solid; }
.resultado-validacao.valido { background: var(--verde-fundo); border-color: #b5dac4; }
.resultado-validacao.invalido { background: var(--vermelho-fundo); border-color: #f0c4bf; }
.resultado-validacao.revogado { background: var(--cinza-fundo); border-color: #d5d9dd; }
.resultado-validacao h2 { margin-bottom: .75rem; }
.resultado-validacao.valido h2 { color: var(--verde); }
.resultado-validacao.invalido h2 { color: var(--vermelho); }

.documento { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 2rem; }
.documento h2 { margin-top: 1.5rem; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--azul-profundo); color: var(--azul-gelo); font-size: .86rem; border-top: 3px solid var(--azul); }
.rodape-interno { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.rodape a { color: var(--branco); text-decoration-color: rgba(175, 198, 217, .5); }
.rodape a:hover { color: var(--azul-gelo); }
.rodape-logo { height: 1.1rem; width: auto; vertical-align: -.1rem; }

.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Celular ----------
   A maioria dos alunos acessa pelo celular. Tudo aqui vale só para telas estreitas; no computador nada muda. */
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 1.6rem; }
  /* No celular o cabeçalho tem três faixas; fixo no topo ele tomaria quase um quinto da tela */
  .topo { position: static; }
  .conteudo { padding: 1.5rem 1rem 2.5rem; }
  .cabecalho-pagina { margin-bottom: 1.25rem; }
  .cartao { padding: 1.15rem; }

  /* Campos com menos de 16px fazem o iPhone dar zoom ao tocar neles */
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search],
  select, textarea { font-size: 16px; padding: .7rem .8rem; }
  .form label, .campo { font-size: .95rem; }
  .dica, .erro-campo, .regras-senha, td .sub, .voltar-link { font-size: .9rem; }
  .selo { font-size: .82rem; padding: .2rem .7rem; }
  .checkbox input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; }

  /* Botões maiores para o dedo; texto longo quebra em vez de vazar da tela */
  .btn { white-space: normal; text-align: center; padding: .75rem 1.15rem; }
  .btn.pequeno { padding: .55rem .9rem; font-size: .9rem; }
  .btn.link { padding: .35rem 0; }
  .menu a { font-size: .95rem; padding: .6rem .85rem; }
  .filtros > * { flex-basis: 100%; }
  .modelos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .filtros .btn { flex: 1 1 auto; }

  /* Tabelas viram cartões: cada linha um bloco, cada célula com o nome da coluna ao lado.
     O espd.js marca a tabela com .empilhada depois de copiar os títulos; sem JavaScript ela só rola para o lado. */
  table.empilhada, table.empilhada tbody, table.empilhada tr, table.empilhada td { display: block; width: 100%; }
  table.empilhada thead tr { display: flex; }
  table.empilhada thead th { display: none; }
  table.empilhada thead th.col-check { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem 1rem; }
  table.empilhada thead th.col-check::after { content: "Selecionar todas"; letter-spacing: .06em; }
  table.empilhada tbody tr { padding: .85rem 1rem; border-bottom: 1px solid var(--borda); }
  table.empilhada tbody tr:last-child { border-bottom: 0; }
  table.empilhada td { border: 0; padding: .3rem 0; min-width: 0; }
  /* Nome da coluna à esquerda; o conteúdo (que pode ter várias linhas) fica todo na coluna da direita */
  table.empilhada td[data-rotulo] { position: relative; padding-left: 6.75rem; }
  table.empilhada td[data-rotulo]::before {
    content: attr(data-rotulo); position: absolute; left: 0; top: .45rem; width: 6rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza);
  }
  table.empilhada td.acoes-celula { white-space: normal; padding-top: .65rem; }
  table.empilhada input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
  details.inline[open] > form { width: 100%; }
}