/* ===========================================================================
   Compartilhado por TODOS os temas: rodapé institucional (logos LaTec + UDESC)
   e a logo do header. Carregado por cada base.html DEPOIS do css do tema, para
   que o rodapé institucional fique consistente em qualquer pele.
   =========================================================================== */

/* Logo do LaTec no cabeçalho (cada tema escolhe a versão verde/branca no <img>) */
.brand-logo { height: 34px; width: auto; display: block; }
@media (max-width: 600px) { .brand-logo { height: 28px; } }

/* Selos de tipo de pesquisa adicionais (pós-doutorado e artigo) — herdam o
   estilo base .selo de cada tema e vestem as cores do tema via variaveis.
   Mestrado reusa .selo-dissertacao e doutorado reusa .selo-tese (ja definidos
   em cada tema), entao nao e preciso tocar os 41 css dos temas. */
.selo-pos    { background: var(--surface-2, rgba(128,128,128,.10)); color: var(--accent, var(--primary)); border-color: var(--border); }
.selo-artigo { background: var(--surface-2, rgba(128,128,128,.10)); color: var(--primary); border-color: var(--border); }

/* Rodapé institucional — INTEGRA-SE às cores de cada tema: usa as variaveis do
   tema (o _shared.css e carregado DEPOIS do css do tema, herdando --primary,
   --surface, --muted...). A logo do LaTec alterna verde/branca; a da UDESC nao muda. */
.site-footer {
  background: var(--surface-2, var(--surface, #f6f6f3));
  border-top: 2px solid var(--primary, #15795f);
  color: var(--muted, #6b7280);
  padding: 34px 16px 28px;
  text-align: center;
  line-height: 1.55;
  font-size: .8rem;
  font-family: var(--font, 'Inter', system-ui, -apple-system, sans-serif);
}
.site-footer .sf-logos { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; margin-bottom: 16px; }
.site-footer .sf-logo-udesc { height: 60px; width: auto; }
.site-footer .sf-logo-latec { height: 42px; width: auto; }
.site-footer .sf-lab { color: var(--primary, #0f5a46); font-weight: 700; font-size: 1.05rem; margin-bottom: 1px; }
.site-footer .sf-lab .pre, .site-footer .sf-lab .copy { font-weight: 400; color: var(--muted, #6b7280); font-size: .82rem; }
.site-footer .sf-coord { font-size: .78rem; color: var(--muted, #6b7280); }
.site-footer .sf-dev { font-size: .82rem; color: var(--muted, #6b7280); font-weight: 500; margin-bottom: 10px; }

/* Logo do LaTec: verde nos temas claros, BRANCA nos temas escuros.
   Lista de temas ESCUROS centralizada via :is() (claros = todos os demais). */
.site-footer .sf-latec-branca { display: none; }
:is([data-tema="aurora"],[data-tema="midnight"],[data-tema="cyber"],[data-tema="terminal"],[data-tema="floresta"],[data-tema="sunset"],[data-tema="carbon"],[data-tema="boreal"],[data-tema="mint"],[data-tema="petroleo"],[data-tema="esmeralda"],[data-tema="oceano"],[data-tema="ametista"],[data-tema="magma"],[data-tema="blueprint"],[data-tema="retrowave"],[data-tema="cereja"]) .site-footer .sf-latec-verde { display: none; }
:is([data-tema="aurora"],[data-tema="midnight"],[data-tema="cyber"],[data-tema="terminal"],[data-tema="floresta"],[data-tema="sunset"],[data-tema="carbon"],[data-tema="boreal"],[data-tema="mint"],[data-tema="petroleo"],[data-tema="esmeralda"],[data-tema="oceano"],[data-tema="ametista"],[data-tema="magma"],[data-tema="blueprint"],[data-tema="retrowave"],[data-tema="cereja"]) .site-footer .sf-latec-branca { display: inline; }

/* A logo da UDESC nao muda; nos temas escuros ganha um selo claro p/ continuar legivel */
:is([data-tema="aurora"],[data-tema="midnight"],[data-tema="cyber"],[data-tema="terminal"],[data-tema="floresta"],[data-tema="sunset"],[data-tema="carbon"],[data-tema="boreal"],[data-tema="mint"],[data-tema="petroleo"],[data-tema="esmeralda"],[data-tema="oceano"],[data-tema="ametista"],[data-tema="magma"],[data-tema="blueprint"],[data-tema="retrowave"],[data-tema="cereja"]) .site-footer .sf-logo-udesc { background: #fff; padding: 7px 12px; border-radius: 10px; }

/* Seletor de tema: botao flutuante + popover em grade (escala p/ muitos temas) */
.tema-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; }
.tema-fab-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #15795f; color: #fff; border: none; border-radius: 999px;
  padding: 11px 18px; font-size: .9rem; font-weight: 600;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
}
.tema-fab-btn:hover { background: #0f5a46; }
.tema-pop {
  position: absolute; right: 0; bottom: 56px; width: min(92vw, 380px);
  background: #fff; border: 1px solid #d8d6cf; border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
  padding: 12px; display: none; max-height: 72vh; overflow: auto;
}
.tema-pop.open { display: block; }
.tema-pop-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #6b7280; font-weight: 700; padding: 4px 6px 10px; }
.tema-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tema-opt { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border: 1px solid #e6e4dd; border-radius: 11px; text-decoration: none; color: #1f2937; background: #fff; }
.tema-opt:hover { border-color: #15795f; background: #f6faf8; text-decoration: none; color: #1f2937; }
.tema-opt.on { border-color: #15795f; background: #15795f; color: #fff; }
.tema-opt i { font-size: 1.1rem; }
.tema-opt .tn { font-weight: 700; font-size: .92rem; }
.tema-opt .td { font-size: .72rem; opacity: .82; line-height: 1.25; }
@media (max-width: 480px) { .tema-pop-grid { grid-template-columns: 1fr; } }

/* O acesso ao painel e direto por /painel (os admins ja sabem) — o botao
   "Painel" nao aparece no site publico, em nenhum tema. */
a[href="/admin/"], a[href="/admin"] { display: none !important; }

/* ===========================================================================
   DISPOSIÇÃO DO MENU (eixo combinavel com o tema, via data-menu no <html>)
   Atua sobre a estrutura comum do cabecalho de todos os temas:
   body > nav|header > .container-l > [a.brand, button.toggle, LINKS(:last-child)]
   data-menu="topo" = padrao (sem alteracao).
   =========================================================================== */

/* Centralizado: logo + menu centralizados numa linha */
[data-menu="centro"] body > nav > .container-l,
[data-menu="centro"] body > header > .container-l { justify-content: center; gap: 22px; }
[data-menu="centro"] body > nav > .container-l > :last-child,
[data-menu="centro"] body > header > .container-l > :last-child { margin-left: 0; }

/* Empilhado: logo em cima, menu embaixo (centralizado) */
[data-menu="empilhado"] body > nav > .container-l,
[data-menu="empilhado"] body > header > .container-l { flex-direction: column; height: auto !important; min-height: 0 !important; padding-top: 14px; padding-bottom: 14px; gap: 10px; }
[data-menu="empilhado"] body > nav > .container-l > :last-child,
[data-menu="empilhado"] body > header > .container-l > :last-child { margin-left: 0; justify-content: center; flex-wrap: wrap; }

/* Compacto: cabecalho fino e fontes menores */
[data-menu="compacto"] body > nav > .container-l,
[data-menu="compacto"] body > header > .container-l { height: 50px !important; min-height: 50px !important; }
[data-menu="compacto"] .brand-logo { height: 25px; }
[data-menu="compacto"] body > nav > .container-l > :last-child a,
[data-menu="compacto"] body > header > .container-l > :last-child a { font-size: .82rem; padding-top: 5px; padding-bottom: 5px; }

/* Lateral: barra de menu fixa a esquerda (desktop); no mobile volta ao normal */
@media (min-width: 992px) {
  [data-menu="lateral"] body > nav,
  [data-menu="lateral"] body > header { position: fixed; left: 0; top: 0; bottom: 0; width: 232px; height: 100vh; z-index: 55; overflow-y: auto; }
  [data-menu="lateral"] body > nav > .container-l,
  [data-menu="lateral"] body > header > .container-l { flex-direction: column; height: auto !important; min-height: 100% !important; align-items: stretch; justify-content: flex-start; padding: 22px 14px; gap: 14px; max-width: none; }
  [data-menu="lateral"] body > nav > .container-l > :last-child,
  [data-menu="lateral"] body > header > .container-l > :last-child { flex-direction: column; align-items: stretch; margin-left: 0; gap: 4px; width: 100%; }
  [data-menu="lateral"] main,
  [data-menu="lateral"] .site-footer { margin-left: 232px; }
}

/* Direita: logo a direita, menu a esquerda */
[data-menu="direita"] body > nav > .container-l,
[data-menu="direita"] body > header > .container-l { flex-direction: row-reverse; }
[data-menu="direita"] body > nav > .container-l > :last-child,
[data-menu="direita"] body > header > .container-l > :last-child { margin-left: 0 !important; margin-right: auto; }

/* Agrupado: logo e menu juntos a esquerda (sem empurrar pra direita) */
[data-menu="agrupado"] body > nav > .container-l > :last-child,
[data-menu="agrupado"] body > header > .container-l > :last-child { margin-left: 20px !important; margin-right: auto; }

/* Justificado: menu espalhado preenchendo a largura */
[data-menu="justificado"] body > nav > .container-l > :last-child,
[data-menu="justificado"] body > header > .container-l > :last-child { flex: 1; justify-content: space-between; margin-left: 24px; }

/* Largura total: menu space-around ocupando tudo */
[data-menu="largura"] body > nav > .container-l > :last-child,
[data-menu="largura"] body > header > .container-l > :last-child { flex: 1; justify-content: space-around; margin-left: 0; }

/* Flutuante: cabecalho como barra flutuante com margem */
[data-menu="flutuante"] body > nav,
[data-menu="flutuante"] body > header { margin: 12px; border-radius: 16px; box-shadow: 0 12px 32px -10px rgba(0,0,0,.3); overflow: hidden; }

/* Cartao: cabecalho como cartao centralizado */
[data-menu="cartao"] body > nav,
[data-menu="cartao"] body > header { margin: 14px auto; max-width: 1120px; border-radius: 18px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.32); }

/* Moldura: cabecalho emoldurado pela cor do tema */
[data-menu="moldura"] body > nav,
[data-menu="moldura"] body > header { border: 3px solid var(--primary, #15795f); margin: 10px; border-radius: 8px; }

/* Pilula: links agrupados numa pilula */
[data-menu="pilula"] body > nav > .container-l > :last-child,
[data-menu="pilula"] body > header > .container-l > :last-child { background: rgba(128,128,128,.14); border-radius: 999px; padding: 5px 10px; }

/* Gigante: cabecalho alto, logo e menu grandes */
[data-menu="gigante"] body > nav > .container-l,
[data-menu="gigante"] body > header > .container-l { height: 94px !important; min-height: 94px !important; }
[data-menu="gigante"] .brand-logo { height: 46px; }
[data-menu="gigante"] body > nav > .container-l > :last-child a,
[data-menu="gigante"] body > header > .container-l > :last-child a { font-size: 1.05rem; }

/* Mini: cabecalho minusculo */
[data-menu="mini"] body > nav > .container-l,
[data-menu="mini"] body > header > .container-l { height: 44px !important; min-height: 44px !important; }
[data-menu="mini"] .brand-logo { height: 21px; }
[data-menu="mini"] body > nav > .container-l > :last-child a,
[data-menu="mini"] body > header > .container-l > :last-child a { font-size: .78rem; padding: 3px 7px; }

/* Duas linhas: logo em cima, menu embaixo, alinhados a esquerda */
[data-menu="duas_linhas"] body > nav > .container-l,
[data-menu="duas_linhas"] body > header > .container-l { flex-direction: column; align-items: flex-start; height: auto !important; min-height: 0 !important; padding: 12px 0; gap: 8px; }
[data-menu="duas_linhas"] body > nav > .container-l > :last-child,
[data-menu="duas_linhas"] body > header > .container-l > :last-child { margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }

/* Zen: centralizado, alto e espacado */
[data-menu="zen"] body > nav > .container-l,
[data-menu="zen"] body > header > .container-l { flex-direction: column; height: auto !important; min-height: 0 !important; padding: 26px 0; gap: 16px; justify-content: center; }
[data-menu="zen"] body > nav > .container-l > :last-child,
[data-menu="zen"] body > header > .container-l > :last-child { margin-left: 0; justify-content: center; gap: 22px; flex-wrap: wrap; }
[data-menu="zen"] body > nav > .container-l > :last-child a,
[data-menu="zen"] body > header > .container-l > :last-child a { font-size: 1.04rem; letter-spacing: .04em; }
[data-menu="zen"] .brand-logo { height: 44px; }

@media (min-width: 992px) {
  /* Dock: menu fixo na base (estilo app) */
  [data-menu="dock"] body > nav,
  [data-menu="dock"] body > header { position: fixed; bottom: 0; left: 0; right: 0; top: auto; z-index: 55; box-shadow: 0 -8px 24px -8px rgba(0,0,0,.3); }
  [data-menu="dock"] main { padding-bottom: 84px; }

  /* Lateral direita: barra de menu fixa a direita */
  [data-menu="lateral_dir"] body > nav,
  [data-menu="lateral_dir"] body > header { position: fixed; right: 0; top: 0; bottom: 0; width: 232px; height: 100vh; z-index: 55; overflow-y: auto; }
  [data-menu="lateral_dir"] body > nav > .container-l,
  [data-menu="lateral_dir"] body > header > .container-l { flex-direction: column; height: auto !important; min-height: 100% !important; align-items: stretch; justify-content: flex-start; padding: 22px 14px; gap: 14px; max-width: none; }
  [data-menu="lateral_dir"] body > nav > .container-l > :last-child,
  [data-menu="lateral_dir"] body > header > .container-l > :last-child { flex-direction: column; align-items: stretch; margin-left: 0; gap: 4px; width: 100%; }
  [data-menu="lateral_dir"] main,
  [data-menu="lateral_dir"] .site-footer { margin-right: 232px; }

  /* Rail: barra lateral estreita a esquerda */
  [data-menu="rail"] body > nav,
  [data-menu="rail"] body > header { position: fixed; left: 0; top: 0; bottom: 0; width: 98px; height: 100vh; z-index: 55; overflow-y: auto; }
  [data-menu="rail"] body > nav > .container-l,
  [data-menu="rail"] body > header > .container-l { flex-direction: column; height: auto !important; min-height: 100% !important; align-items: center; justify-content: flex-start; padding: 16px 4px; gap: 10px; max-width: none; }
  [data-menu="rail"] body > nav > .container-l > :last-child,
  [data-menu="rail"] body > header > .container-l > :last-child { flex-direction: column; align-items: center; margin-left: 0; gap: 6px; width: 100%; }
  [data-menu="rail"] body > nav > .container-l > :last-child a,
  [data-menu="rail"] body > header > .container-l > :last-child a { font-size: .66rem; text-align: center; }
  [data-menu="rail"] .brand-logo { height: 22px; }
  [data-menu="rail"] main,
  [data-menu="rail"] .site-footer { margin-left: 98px; }
}

/* Lightbox para fotos de exemplo / galeria (qualquer <a data-foto>) */
.latec-lightbox { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.86); padding: 24px; cursor: zoom-out; }
.latec-lightbox.open { display: flex; }
.latec-lightbox img { max-width: 95%; max-height: 92%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.latec-lightbox .ll-close { position: absolute; top: 16px; right: 24px; background: none; border: none; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; }

/* ===========================================================================
   MINI-SITE de projeto de EXTENSAO (abas + formularios + noticias + egressas).
   Usa as variaveis de cada tema (--primary/--surface/--border/--text/--muted)
   para "vestir" qualquer pele. Carregado depois do css do tema.
   =========================================================================== */
.proj-hero-img { width: 100%; max-height: 380px; object-fit: cover; border-radius: 16px; margin: 18px 0 6px; border: 1px solid var(--border, #e5e7eb); }
.proj-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border, #e5e7eb); margin: 26px 0 22px; }
.proj-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted, #6b7280); font: inherit; font-weight: 600; padding: 11px 16px; cursor: pointer; border-radius: 10px 10px 0 0; transition: .18s; }
.proj-tab:hover { color: var(--text, #111); background: var(--surface, rgba(128,128,128,.06)); }
.proj-tab.is-on { color: var(--primary, #15795f); border-bottom-color: var(--primary, #15795f); }
.proj-sec { display: none; }
.proj-sec.is-on { display: block; animation: projfade .28s ease; }
@keyframes projfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Formularios (inscricao / contato) */
.proj-form { max-width: 680px; }
.pf-grid { display: grid; gap: 16px; }
.pf-campo { display: flex; flex-direction: column; gap: 6px; }
.pf-campo > label { font-weight: 600; font-size: .92rem; color: var(--text, #111); }
.pf-campo .req { color: #ef4444; }
.proj-form input, .proj-form select, .proj-form textarea {
  width: 100%; padding: 11px 13px; border-radius: 11px; font: inherit;
  background: var(--surface, rgba(128,128,128,.06));
  border: 1px solid var(--border, #d8d6cf); color: var(--text, #111); }
.proj-form input:focus, .proj-form select:focus, .proj-form textarea:focus {
  outline: none; border-color: var(--primary, #15795f); box-shadow: 0 0 0 3px rgba(33,212,163,.18); }
.proj-form select option { color: #111; }
.pf-check { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border, #d8d6cf); border-radius: 12px; background: var(--surface, rgba(128,128,128,.05)); }
.pf-check input { width: auto; margin-top: 3px; flex: none; }
.pf-check label { font-weight: 400; font-size: .9rem; color: var(--muted, #6b7280); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Avisos (encerradas / sucesso / erro) */
.proj-aviso { padding: 15px 18px; border-radius: 13px; border: 1px solid var(--border, #e5e7eb); background: var(--surface, rgba(128,128,128,.06)); margin-bottom: 18px; color: var(--text, #111); }
.proj-aviso.ok { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.12); }
.proj-aviso.err { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.12); }
.proj-prereq { border-left: 3px solid var(--primary, #15795f); padding: 14px 18px; border-radius: 0 12px 12px 0; background: var(--surface, rgba(128,128,128,.06)); margin-bottom: 22px; }
.proj-prereq ol { margin: 8px 0 0; padding-left: 20px; color: var(--muted, #6b7280); }

/* Noticias do projeto */
.pn-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.pn-item:last-child { border-bottom: 0; }
.pn-thumb { width: 124px; height: 86px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border, #e5e7eb); flex: none; }
.pn-data { font-size: .76rem; color: var(--primary, #15795f); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pn-titulo { font-weight: 600; font-size: 1.08rem; margin: 3px 0 4px; }
.pn-corpo { color: var(--muted, #6b7280); font-size: .94rem; }

/* Egressas */
.pe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pe-card { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--border, #e5e7eb); border-radius: 14px; background: var(--surface, rgba(128,128,128,.04)); }
.pe-foto { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border, #e5e7eb); flex: none; }
.pe-foto.ph { display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--primary, #15795f); }
.pe-nome { font-weight: 700; }
.pe-papel { color: var(--primary, #15795f); font-size: .82rem; font-weight: 600; }
.pe-dep { color: var(--muted, #6b7280); font-size: .92rem; margin-top: 5px; font-style: italic; }
@media (max-width: 680px) { .pe-grid { grid-template-columns: 1fr; } .pn-thumb { width: 88px; height: 66px; } }
.pn-cat { font-weight: 700; color: var(--primary, #15795f); text-transform: uppercase; letter-spacing: .03em; }
.pn-titulo a { color: var(--text, #111); }
.pn-titulo a:hover { color: var(--primary, #15795f); }

/* Tabela de selecionadas/suplentes (exibida quando inscrições encerradas) */
.proj-sel-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; }
.proj-sel-table th, .proj-sel-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border, #e5e7eb); font-size: .92rem; }
.proj-sel-table th { color: var(--muted, #6b7280); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.proj-sel-table td:first-child { width: 52px; color: var(--muted, #6b7280); }

/* Link de privacidade no rodapé */
.site-footer .sf-privacidade { display: inline-block; margin-top: 12px; color: var(--muted, #6b7280); font-size: .78rem; text-decoration: underline; }
.site-footer .sf-privacidade:hover { color: var(--primary, #15795f); }

/* ===========================================================================
   Banner de consentimento de cookies (LGPD) — veste o tema, some após escolha
   =========================================================================== */
.cookie-banner {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 85;
  width: min(960px, calc(100vw - 24px)); display: none; gap: 14px 18px; align-items: center;
  flex-wrap: wrap; justify-content: space-between; padding: 16px 20px; border-radius: 14px;
  background: var(--surface-2, #ffffff); border: 1px solid var(--border, #d8d6cf);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.55); color: var(--text, #111);
  font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: .9rem; }
.cookie-banner.show { display: flex; }
.cookie-banner .cb-text { flex: 1 1 360px; line-height: 1.5; }
.cookie-banner .cb-text a { color: var(--primary, #15795f); text-decoration: underline; }
.cookie-banner .cb-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner button { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border, #d8d6cf); transition: .18s; }
.cookie-banner .cb-aceitar { background: var(--primary, #15795f); color: #fff; border-color: var(--primary, #15795f); }
.cookie-banner .cb-aceitar:hover { filter: brightness(1.08); }
.cookie-banner .cb-ess { background: transparent; color: var(--text, #111); }
.cookie-banner .cb-ess:hover { background: var(--surface, rgba(128,128,128,.08)); }
@media (max-width: 560px) { .cookie-banner { bottom: 8px; padding: 14px; } .cookie-banner .cb-acoes { width: 100%; } .cookie-banner .cb-acoes button { flex: 1; } }