/* ===========================================================================
   Omega Light — Design System
   Azul petróleo, fundo claro, grid 4px, respiro amplo, sombras suaves.
   Sem gradiente chamativo, sem roxo, laranja, amarelo vibrante ou neon.
   =========================================================================== */

/* --- Jost (SIL Open Font License 1.1), servida localmente ------------------
   A CSP proíbe carregar de fora, e "Futura PT" não existe na máquina de
   ninguém. Sem uma fonte local com acentuação completa, o navegador buscava
   ó, á e ç em fontes de fallback diferentes — daí o desalinhamento visível
   em "portfólio" e "responsáveis". */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fontes/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fontes/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Azul petróleo */
  --petroleo-01: #0F363F;
  --petroleo-02: #144E5B;
  --petroleo-03: #186077;
  --petroleo-04: #1D7192;

  /* Neutros */
  --fundo: #F5F5F5;
  --branco: #FFFFFF;
  --texto: #0C2127;
  --texto-suave: #4A5C63;
  --texto-fraco: #6E7F86;
  --borda: #DCDEDF;
  --borda-forte: #C4C8CA;

  /* Estados — derivados do petróleo para não fugir da paleta */
  --ok: #1F6B4F;
  --ok-fundo: #E8F2ED;
  --alerta: #8A5A1F;
  --alerta-fundo: #F6EFE4;
  --erro: #8C2F2F;
  --erro-fundo: #F6E9E9;
  --info-fundo: #E8F0F3;

  /* Grid 4px */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px; --e16: 64px;

  --raio-card: 16px;
  --raio-input: 8px;
  --raio-pill: 999px;

  --sombra-1: 0 1px 2px rgba(15, 54, 63, .06), 0 2px 8px rgba(15, 54, 63, .05);
  --sombra-2: 0 2px 4px rgba(15, 54, 63, .07), 0 12px 28px rgba(15, 54, 63, .08);

  --largura: 1240px;
  --transicao: 160ms cubic-bezier(.2, .6, .3, 1);

  /* Jost primeiro: é a única que servimos e a única com acentuação garantida.
     "Futura PT" fica antes só para quem tiver a licença instalada. */
  --fonte: "Futura PT", "Jost", system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

/* --- tipografia ---------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.01em; color: var(--texto); }
h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

.display {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.overline {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--texto-fraco);
}

.suave { color: var(--texto-suave); }
.fraco { color: var(--texto-fraco); font-size: 13px; }
.numero { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }

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

/* --- header -------------------------------------------------------------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--petroleo-01);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  /* textura discretíssima inspirada nas linhas do globo Omega */
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(65deg, rgba(255,255,255,.016) 0 1px, transparent 1px 34px);
}

.topo-interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e3) var(--e6);
  display: flex;
  align-items: center;
  gap: var(--e6);
}

.marca { display: flex; align-items: baseline; gap: var(--e2); color: #fff; }
.marca:hover { text-decoration: none; }
.marca-nome { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; }
.marca-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .28em; color: rgba(255,255,255,.62); }

.nav { display: flex; gap: var(--e1); margin-left: var(--e4); flex-wrap: wrap; }
.nav a {
  color: rgba(255, 255, 255, .78);
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-pill);
  font-size: 13px;
  letter-spacing: .02em;
  transition: background var(--transicao), color var(--transicao);
}
.nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }
.nav a.ativo { background: rgba(255, 255, 255, .14); color: #fff; }

.topo-direita { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
.usuario-chip { display: flex; align-items: center; gap: var(--e2); font-size: 13px; color: rgba(255,255,255,.85); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--petroleo-04); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
}

/* --- layout -------------------------------------------------------------- */
.conteudo { max-width: var(--largura); margin: 0 auto; padding: var(--e10) var(--e6) var(--e16); }
.cabecalho-pagina { display: flex; align-items: flex-end; gap: var(--e4); margin-bottom: var(--e8); flex-wrap: wrap; }
.cabecalho-pagina .acoes { margin-left: auto; display: flex; gap: var(--e2); flex-wrap: wrap; }

.grade { display: grid; gap: var(--e4); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-lateral { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }

/* --- cards --------------------------------------------------------------- */
.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-1);
  padding: var(--e6);
}
.card-compacto { padding: var(--e4); }
.card-titulo { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e4); }
.card + .card { margin-top: var(--e4); }

.tile { display: flex; flex-direction: column; gap: var(--e2); }
.tile .overline { margin-bottom: var(--e1); }

/* Cartões de indicador do painel.

   São <button>: o clique abre um modal, não navega. Por isso precisam desfazer
   o estilo que o navegador dá a botão — fundo, borda, alinhamento e fonte.
   Compactos de propósito: os quatro cabem numa faixa sem sobrar vazio. */
.kpi {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e4) var(--e5);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.kpi:hover { border-color: var(--petroleo-04); box-shadow: var(--sombra-2); }
.kpi:focus-visible { outline: 2px solid var(--petroleo-04); outline-offset: 2px; }
.kpi-topo { display: flex; align-items: center; gap: var(--e2); }
.kpi-topo .overline { margin: 0; }
.kpi-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--raio-input); flex: 0 0 auto;
}
.kpi-valor { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.kpi .fraco { margin-top: auto; }

/* O tom pinta o ícone e o número juntos: a cor carrega o significado, e o
   rótulo em texto continua dizendo o mesmo para quem não distingue matiz. */
.kpi-info .kpi-icone { background: var(--info-fundo); color: var(--petroleo-04); }
.kpi-info .kpi-valor { color: var(--petroleo-02); }
.kpi-erro .kpi-icone { background: var(--erro-fundo); color: var(--erro); }
.kpi-erro .kpi-valor { color: var(--erro); }
.kpi-alerta .kpi-icone { background: var(--alerta-fundo); color: var(--alerta); }
.kpi-alerta .kpi-valor { color: var(--alerta); }
.kpi-ok .kpi-icone { background: var(--ok-fundo); color: var(--ok); }
.kpi-ok .kpi-valor { color: var(--ok); }

/* O modal do painel rola conteúdo em vez de embutir iframe. */
.modal-corpo-rolagem { overflow-y: auto; background: var(--branco); padding: var(--e4); }

/* --- botões -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border-radius: var(--raio-pill);
  padding: 10px var(--e5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--petroleo-04); outline-offset: 2px; }

.btn-primario { background: var(--petroleo-01); color: #fff; }
.btn-primario:hover { background: var(--petroleo-02); }

.btn-secundario { background: transparent; color: var(--petroleo-01); border-color: var(--petroleo-01); }
.btn-secundario:hover { background: rgba(15, 54, 63, .06); }

.btn-ghost { background: transparent; color: var(--petroleo-03); padding: 10px var(--e3); }
.btn-ghost:hover { background: rgba(24, 96, 119, .08); }

.btn-perigo { background: transparent; color: var(--erro); border-color: rgba(140, 47, 47, .4); }
.btn-perigo:hover { background: var(--erro-fundo); }

.btn-pequeno { padding: 6px var(--e3); font-size: 11px; }

/* --- formulários --------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
.campo label, .rotulo {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--texto-suave);
}

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], input[type=tel], select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-input);
  padding: 10px var(--e3);
  width: 100%;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--petroleo-04);
  box-shadow: 0 0 0 3px rgba(29, 113, 146, .12);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
select[multiple] { min-height: 150px; padding: var(--e2); }

.ajuda { font-size: 12px; color: var(--texto-fraco); }

.linha-campos { display: grid; gap: var(--e4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linha-campos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.checkbox { display: flex; align-items: center; gap: var(--e2); font-size: 14px; }
.checkbox input { width: auto; }

/* Plano de ação: a primeira coisa da home, então ganha destaque de borda em
   vez de cor de fundo — o cartão continua legível no tema impresso. */
.card-plano { border-left: 3px solid var(--petroleo-04); }
.plano-lista { list-style: none; display: flex; flex-direction: column; gap: var(--e3); }
.plano-lista li { display: flex; gap: var(--e3); align-items: flex-start; }
.plano-posicao {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--info-fundo); color: var(--petroleo-02);
  font-size: 13px; font-weight: 700;
}
.plano-corpo { min-width: 0; }

/* Rótulo que só o leitor de tela enxerga: o seletor de situação fica ao lado
   do título e um <label> visível ali atrapalharia a leitura. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.select-situacao {
  width: auto; min-width: 170px;
  padding-top: 6px; padding-bottom: 6px; font-size: 13px;
}

/* Aviso discreto enquanto os filtros se aplicam sozinhos. O htmx liga a classe
   `htmx-request` no próprio elemento apontado por hx-indicator. */
.indicador-filtro {
  margin-left: var(--e2); font-size: 12px; color: var(--texto-suave);
  opacity: 0; transition: opacity var(--transicao);
}
.indicador-filtro.htmx-request { opacity: 1; }

/* Autocomplete de @menção. O invólucro é o que dá referência ao absolute:
   sem ele a lista se posicionaria pela página e desgrudaria do campo. */
.mencoes-inv { position: relative; }
.mencoes-sugestoes {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin-top: var(--e1); padding: var(--e1); list-style: none;
  max-height: 240px; overflow-y: auto;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio-card); box-shadow: var(--sombra-2);
}
.mencoes-sugestoes li {
  display: flex; align-items: baseline; gap: var(--e2);
  padding: var(--e2) var(--e3); border-radius: var(--raio-input);
  cursor: pointer; font-size: 14px;
}
.mencoes-sugestoes li.ativo { background: var(--info-fundo); }
.mencoes-sugestoes strong { color: var(--petroleo-04); }
.mencoes-sugestoes span { color: var(--texto-suave); font-size: 13px; }

/* Campo com botões ao lado (gerar/mostrar senha). `min-width: 0` impede o
   input de estourar a linha, que é o padrão dele dentro de um flex. */
.campo-com-botao { display: flex; align-items: center; gap: var(--e2); }
.campo-com-botao input { flex: 1 1 auto; min-width: 0; }
.campo-com-botao .btn { flex: 0 0 auto; white-space: nowrap; }

/* --- tabelas ------------------------------------------------------------- */
.tabela-wrap { overflow-x: auto; border-radius: var(--raio-card); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabela th {
  text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-fraco);
  padding: var(--e3) var(--e3);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
table.tabela td { padding: var(--e3); border-bottom: 1px solid var(--borda); vertical-align: top; }
table.tabela tbody tr { transition: background var(--transicao); }
table.tabela tbody tr:hover { background: #FAFBFB; }
table.tabela td.principal { font-weight: 500; }

/* --- selos --------------------------------------------------------------- */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--raio-pill);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.selo-neutro { background: var(--info-fundo); color: var(--petroleo-02); border-color: rgba(24,96,119,.16); }
.selo-ok { background: var(--ok-fundo); color: var(--ok); border-color: rgba(31,107,79,.18); }
.selo-alerta { background: var(--alerta-fundo); color: var(--alerta); border-color: rgba(138,90,31,.2); }
.selo-erro { background: var(--erro-fundo); color: var(--erro); border-color: rgba(140,47,47,.2); }
.selo-suave { background: #EFF1F1; color: var(--texto-suave); border-color: var(--borda); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- avisos -------------------------------------------------------------- */
.aviso {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-input);
  border: 1px solid var(--borda);
  background: var(--info-fundo);
  font-size: 14px;
  margin-bottom: var(--e4);
}
.aviso-ok { background: var(--ok-fundo); border-color: rgba(31,107,79,.2); color: var(--ok); }
.aviso-erro { background: var(--erro-fundo); border-color: rgba(140,47,47,.2); color: var(--erro); }
.aviso-alerta { background: var(--alerta-fundo); border-color: rgba(138,90,31,.22); color: var(--alerta); }

/* --- barra de progresso simples ------------------------------------------ */
.barra { height: 6px; background: #E7EAEB; border-radius: var(--raio-pill); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--petroleo-04); border-radius: var(--raio-pill); }

.lista-metrica { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.lista-metrica li { display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e3); align-items: center; }
.lista-metrica .barra { grid-column: 1 / -1; }

/* --- linha do tempo (atualizações) --------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--e5); border-left: 2px solid var(--borda); }
.timeline li { position: relative; padding: 0 0 var(--e6) var(--e5); }
.timeline li::before {
  content: ""; position: absolute; left: calc(-1 * var(--e5) - 6px); top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--branco); border: 2px solid var(--petroleo-04);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline .data { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--petroleo-03); }
.timeline .texto { margin-top: var(--e1); white-space: pre-wrap; }

/* --- login --------------------------------------------------------------- */
.tela-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--fundo);
}
.login-arte {
  background: var(--petroleo-01);
  color: #fff;
  padding: var(--e16) var(--e12);
  display: flex; flex-direction: column; justify-content: space-between;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(65deg, rgba(255,255,255,.022) 0 1px, transparent 1px 36px);
}
.login-arte h1 {
  color: #fff; font-size: 40px; font-weight: 500;
  letter-spacing: -.02em; line-height: 1.15; max-width: 15ch;
}
.login-arte p { color: rgba(255,255,255,.72); max-width: 42ch; }
.login-form { display: grid; place-items: center; padding: var(--e12) var(--e8); }
.login-form .card { width: 100%; max-width: 420px; padding: var(--e10); }

/* --- paginação ----------------------------------------------------------- */
.paginacao { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e6); }
.paginacao .info { font-size: 13px; color: var(--texto-fraco); margin-right: auto; }

/* --- filtros ------------------------------------------------------------- */
.filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); align-items: end; }
.filtros .campo { margin-bottom: 0; }
.filtros-acoes { display: flex; gap: var(--e2); grid-column: 1 / -1; }

/* --- vazio --------------------------------------------------------------- */
.vazio { text-align: center; padding: var(--e16) var(--e6); color: var(--texto-fraco); }
.vazio h3 { color: var(--texto-suave); margin-bottom: var(--e2); }

/* --- rodapé -------------------------------------------------------------- */
.rodape {
  border-top: 1px solid var(--borda);
  padding: var(--e6);
  text-align: center;
  font-size: 12px;
  color: var(--texto-fraco);
  letter-spacing: .04em;
}

/* --- utilidades ---------------------------------------------------------- */
.icone { width: 24px; height: 24px; stroke-width: 2; stroke: currentColor; fill: none;
         stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icone-16 { width: 16px; height: 16px; }
.icone-18 { width: 18px; height: 18px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.pilha { display: flex; flex-direction: column; gap: var(--e2); }
.linha { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.mt-4 { margin-top: var(--e4); } .mt-6 { margin-top: var(--e6); } .mt-8 { margin-top: var(--e8); }
.mb-4 { margin-bottom: var(--e4); } .mb-6 { margin-bottom: var(--e6); }
.direita { text-align: right; } .centro { text-align: center; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }
.quebra { word-break: break-word; }
.codigo-bloco {
  background: #F0F2F3; border: 1px solid var(--borda); border-radius: var(--raio-input);
  padding: var(--e3); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: .06em;
}
.mencao { color: var(--petroleo-04); font-weight: 600; }

/* --- animação discreta --------------------------------------------------- */
@keyframes surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card, .aviso { animation: surge 200ms cubic-bezier(.2, .6, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- responsivo ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-lateral { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .tela-login { grid-template-columns: minmax(0, 1fr); }
  .login-arte { display: none; }
  .conteudo { padding: var(--e6) var(--e4) var(--e12); }
  .grade-2, .grade-3, .grade-4 { grid-template-columns: minmax(0, 1fr); }
  .linha-campos, .linha-campos-3, .filtros { grid-template-columns: minmax(0, 1fr); }
  .topo-interno { flex-wrap: wrap; gap: var(--e3); padding: var(--e3) var(--e4); }
  .nav { margin-left: 0; order: 3; width: 100%; overflow-x: auto; }
}

/* ===========================================================================
   Marca
   =========================================================================== */
.marca-logo { height: 26px; width: auto; display: block; }
.login-arte .marca-logo { height: 34px; }
/* Só aparece no celular, onde a arte azul do login some. */
.marca-movel { display: none; text-align: center; margin-bottom: var(--e6); }
.marca-movel img { height: 30px; width: auto; }

/* ===========================================================================
   Celular — o sistema vai ser usado no chão de fábrica, na mão
   =========================================================================== */
@media (max-width: 860px) {
  .marca-movel { display: block; }

  /* Alvos de toque: 44px é o mínimo confortável com o dedo. */
  .btn { padding: 12px var(--e5); min-height: 44px; }
  .btn-pequeno { padding: 9px var(--e4); min-height: 38px; }
  input, select, textarea {
    /* 16px evita o zoom automático do iOS ao focar um campo. */
    font-size: 16px;
    padding: 12px var(--e3);
  }
  .nav a { padding: 10px var(--e3); }

  /* Navegação vira uma faixa rolável, sem quebrar em várias linhas. */
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--e1);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }

  .topo-direita .usuario-chip span:not(.avatar) { display: none; }

  h1 { font-size: 23px; }
  .numero { font-size: 28px; }
  .card { padding: var(--e4); border-radius: 12px; }
  .conteudo { padding: var(--e6) var(--e3) var(--e12); }
  .cabecalho-pagina { margin-bottom: var(--e6); }
  .cabecalho-pagina .acoes { width: 100%; }
  .cabecalho-pagina .acoes .btn { flex: 1; justify-content: center; }

  /* Tabela larga: rolagem horizontal com pista visível. */
  .tabela-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--e2));
    padding: 0 var(--e2);
  }
  table.tabela { font-size: 13px; }
  table.tabela th, table.tabela td { padding: var(--e2); }

  .paginacao { flex-wrap: wrap; }
  .paginacao .info { width: 100%; margin-bottom: var(--e2); }

  .timeline { padding-left: var(--e4); }
  .timeline li { padding-left: var(--e4); }

  /* Formulário de anexo não pode estourar a largura da tela. */
  input[type=file] { max-width: 100%; }
  .linha > input, .linha > select { min-width: 0; flex: 1; }
}

@media (max-width: 480px) {
  .marca-logo { height: 22px; }
  .login-form .card { padding: var(--e6); }
  .grade { gap: var(--e3); }
  .btn { font-size: 11px; letter-spacing: .06em; }
}

/* Instalado como app: respeita o recorte da tela (notch) e a barra inferior. */
@media (display-mode: standalone) {
  .topo { padding-top: env(safe-area-inset-top); }
  .conteudo { padding-bottom: calc(var(--e16) + env(safe-area-inset-bottom)); }
  .rodape { padding-bottom: calc(var(--e6) + env(safe-area-inset-bottom)); }
}

/* ===========================================================================
   Quadro (kanban)
   =========================================================================== */
.quadro {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--e4);
  align-items: start;
  overflow-x: auto;
  padding-bottom: var(--e4);
}

.coluna {
  background: #EFF1F1;
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.coluna-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  background: #EFF1F1;
  border-radius: var(--raio-card) var(--raio-card) 0 0;
  z-index: 1;
}
.coluna-titulo {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--texto-suave);
}

.coluna-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e3);
  min-height: 120px;
  transition: background var(--transicao);
}
.coluna-corpo.alvo {
  background: var(--info-fundo);
  box-shadow: inset 0 0 0 2px var(--petroleo-04);
  border-radius: 0 0 var(--raio-card) var(--raio-card);
}
.coluna-vazia { color: var(--texto-fraco); font-size: 13px; text-align: center; padding: var(--e6) 0; margin: 0; }

.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--petroleo-04);
  border-radius: 10px;
  padding: var(--e3);
  box-shadow: var(--sombra-1);
  cursor: grab;
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.cartao:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.cartao.arrastando { opacity: .45; cursor: grabbing; }
.cartao-atrasado { border-left-color: var(--erro); }

.cartao-titulo { display: block; font-weight: 500; color: var(--texto); line-height: 1.35; }
.cartao-titulo:hover { color: var(--petroleo-04); }
.cartao-projeto { margin: var(--e1) 0 0; font-size: 12px; color: var(--texto-fraco); }
.cartao-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--e3); }
.avatar-pequeno { width: 22px; height: 22px; font-size: 10px; }

/* O seletor só existe para toque; no desktop arrasta-se. */
.cartao-mover { display: none; margin-top: var(--e3); }
.cartao-mover .rotulo { display: block; margin-bottom: var(--e1); }
.cartao-mover select { font-size: 13px; padding: 8px var(--e2); }

.quadro-aviso {
  position: fixed;
  left: 50%;
  bottom: var(--e6);
  transform: translateX(-50%) translateY(12px);
  padding: var(--e3) var(--e5);
  border-radius: var(--raio-pill);
  font-size: 13px;
  box-shadow: var(--sombra-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao), transform var(--transicao);
  z-index: 60;
}
.quadro-aviso.visivel { opacity: 1; transform: translateX(-50%) translateY(0); }
.quadro-aviso-ok { background: var(--petroleo-01); color: #fff; }
.quadro-aviso-erro { background: var(--erro-fundo); color: var(--erro); border: 1px solid rgba(140,47,47,.3); }

@media (max-width: 860px) {
  /* Uma coluna por vez, deslizando na horizontal — o padrão de quadro no
     celular. Arrastar cartão fica desligado; o seletor assume. */
  .quadro {
    grid-auto-columns: 86vw;
    gap: var(--e3);
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--e3));
    padding: 0 var(--e3) var(--e4);
  }
  .coluna { scroll-snap-align: start; }
  .cartao { cursor: default; }
  .cartao-mover { display: block; }
}

/* --- anexos: soltar arquivo e ler no modal -------------------------------- */
/* A área inteira é alvo do drop; o input fica escondido mas continua sendo o
   que envia o arquivo, para o formulário funcionar sem JavaScript. */
.area-solta {
  border: 1px dashed var(--borda); border-radius: var(--raio-card);
  padding: var(--e6); text-align: center; color: var(--texto-suave);
  transition: border-color var(--transicao), background var(--transicao);
}
.area-solta.sobre { border-color: var(--petroleo-04); background: var(--info-fundo); }
.area-solta .icone { color: var(--petroleo-04); margin-bottom: var(--e2); }
.area-solta p { margin-bottom: var(--e1); }
.link-falso { color: var(--petroleo-04); cursor: pointer; text-decoration: underline; }
.area-solta input[type="file"] { margin: var(--e3) auto 0; max-width: 320px; }

.modal-fundo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 54, 63, .55);
  display: flex; align-items: center; justify-content: center; padding: var(--e4);
}
.modal-fundo[hidden] { display: none; }
.modal {
  background: var(--branco); border-radius: var(--raio-card);
  box-shadow: var(--sombra-2);
  width: min(1100px, 100%); height: min(88vh, 100%);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borda);
}
.modal-topo h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-corpo { flex: 1 1 auto; min-height: 0; background: #F4F6F6; }
.modal-corpo iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Trava a rolagem do fundo enquanto o modal está aberto. */
.sem-rolagem { overflow: hidden; }

/* Linhas das listas do painel: cada nome abre as tarefas daquele recorte.
   Botão desfazendo o visual de botão — precisa parecer o texto que era antes,
   com a dica de clique só no hover e no foco. */
.metrica-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.metrica-link:hover { color: var(--petroleo-04); text-decoration: underline; }
.metrica-link:focus-visible {
  outline: 2px solid var(--petroleo-04); outline-offset: 2px; border-radius: 2px;
}

/* --- tema escuro -----------------------------------------------------------
   Só as fichas mudam; nenhuma regra abaixo precisa saber que existe tema.

   Três blocos porque há três estados: escolha explícita clara, escolha
   explícita escura, e "seguir o sistema" — que não carimba nada no HTML e só
   se distingue por `prefers-color-scheme`. Sem o `:not([data-tema="claro"])`,
   quem escolhesse claro num sistema escuro continuaria no escuro.

   O petróleo do topo não muda: é a marca, e ela é a mesma nos dois temas. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0E1417;
    --branco: #161E22;
    --texto: #E7ECEE;
    --texto-suave: #A9B7BD;
    --texto-fraco: #8497A0;
    --borda: #26333A;
    --borda-forte: #33434B;

    --petroleo-04: #4FA8CC;
    --petroleo-02: #8FCBE2;

    --ok: #6FCFA5;      --ok-fundo: #142A22;
    --alerta: #E0B071;  --alerta-fundo: #2B2115;
    --erro: #E58A8A;    --erro-fundo: #2C1919;
    --info-fundo: #14262E;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .28);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .38), 0 12px 28px rgba(0, 0, 0, .34);
  }
}

:root[data-tema="escuro"] {
  --fundo: #0E1417;
  --branco: #161E22;
  --texto: #E7ECEE;
  --texto-suave: #A9B7BD;
  --texto-fraco: #8497A0;
  --borda: #26333A;
  --borda-forte: #33434B;

  --petroleo-04: #4FA8CC;
  --petroleo-02: #8FCBE2;

  --ok: #6FCFA5;      --ok-fundo: #142A22;
  --alerta: #E0B071;  --alerta-fundo: #2B2115;
  --erro: #E58A8A;    --erro-fundo: #2C1919;
  --info-fundo: #14262E;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .28);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, .38), 0 12px 28px rgba(0, 0, 0, .34);
}

/* Alguns lugares fixavam branco ou cinza claro direto, de quando só havia um
   tema. No escuro isso vira texto preto sobre fundo preto. */
:root[data-tema="escuro"] .modal-corpo,
:root:not([data-tema="claro"]) .modal-corpo { background: var(--fundo); }
:root[data-tema="escuro"] .selo-suave,
:root:not([data-tema="claro"]) .selo-suave {
  background: #1E282D; color: var(--texto-suave); border-color: var(--borda);
}

/* Botão de tema no cabeçalho: mesma linguagem dos outros itens do topo. */
.btn-tema {
  background: none; border: 0; cursor: pointer; padding: var(--e2);
  border-radius: var(--raio-pill); color: rgba(255, 255, 255, .78);
  display: inline-flex; align-items: center;
  transition: background var(--transicao), color var(--transicao);
}
.btn-tema:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.btn-tema:focus-visible { outline: 2px solid rgba(255, 255, 255, .6); outline-offset: 2px; }

/* ===========================================================================
   Subtarefas — a linha precisa ser lida de relance: feito, quem, quando
   =========================================================================== */
.sub-tabela td { vertical-align: middle; }
.sub-tabela .principal { min-width: 220px; }

/* Caixa de marcar. É um botão de formulário, não um checkbox de verdade:
   marcar precisa passar pelo servidor para virar auditoria e aviso. */
.check {
  width: 22px; height: 22px;
  border: 2px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--branco);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
  color: #fff;
  transition: border-color var(--transicao), background var(--transicao);
}
.check:hover { border-color: var(--petroleo-04); }
.check:focus-visible { outline: 2px solid var(--petroleo-04); outline-offset: 2px; }
.check-feito { background: var(--ok); border-color: var(--ok); }
.check-feito .icone { width: 15px; height: 15px; }

/* Concluída fica visível como concluída, sem sumir da lista. */
.sub-feita .sub-titulo { text-decoration: line-through; color: var(--texto-fraco); }
.sub-feita td { opacity: .72; }

.sub-datas input[type=date] { width: 148px; padding: 6px var(--e2); font-size: 13px; }
.campo-atrasado { border-color: var(--erro); color: var(--erro); }

.sub-nova select, .sub-nova input[type=date] { max-width: 190px; }

.sub-rastro td { padding-top: 0; border-bottom: 1px solid var(--borda); }
.sub-rastro summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--texto-fraco);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: var(--e1) 0;
}
.sub-rastro summary:hover { color: var(--petroleo-04); }

@media (max-width: 860px) {
  .sub-datas { flex-wrap: wrap; }
  .sub-datas input[type=date] { width: 100%; }
  .sub-nova { flex-direction: column; align-items: stretch; }
  .sub-nova select, .sub-nova input[type=date] { max-width: none; }
}

/* Coluna de ID: número pequeno, tabular, para bater o olho e conferir. */
.col-id { width: 68px; text-align: right; white-space: nowrap; }
.id-tarefa {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--texto-fraco);
  text-decoration: none;
}
.id-tarefa::before { content: "#"; opacity: .55; }
.id-tarefa:hover { color: var(--petroleo-04); }

@media (max-width: 700px) {
  .col-id { width: 52px; }
}

/* Quebra automática: proposta com nota e motivo à vista. */
.dica-quebra {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--petroleo-suave, #EDF3F5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
}
.dica-quebra p { margin: 2px 0 0; font-size: 13px; }
.dica-quebra .btn { margin-left: auto; flex-shrink: 0; }
.dica-quebra .icone { color: var(--petroleo-04); flex-shrink: 0; }

.proposta {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo, 10px);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.proposta:hover { border-color: var(--petroleo-04); }
.proposta input { margin-top: 3px; flex-shrink: 0; }
.proposta-titulo { font-weight: 500; margin-bottom: 2px; }
/* Nota baixa entra apagada: quem revisa vê que é palpite fraco antes de ler. */
.proposta-fraca { opacity: .68; }
.proposta-fraca:hover { opacity: 1; }

@media (max-width: 700px) {
  .dica-quebra { flex-wrap: wrap; }
  .dica-quebra .btn { margin-left: 0; width: 100%; }
}

/* Painel: tarefas quebradas em passos. Cada item é título + andamento + barra. */
.lista-quebrada { list-style: none; margin: 0; padding: 0; }
.lista-quebrada li { padding: var(--e2) 0; border-bottom: 1px solid var(--borda); }
.lista-quebrada li:last-child { border-bottom: 0; }
.lista-quebrada a { font-size: 14px; }
.lista-quebrada .barra { display: block; margin-top: 6px; }
.lista-quebrada .suave { font-variant-numeric: tabular-nums; font-size: 13px; }

/* Coluna de passos no modal do painel: contador + barra fina, sem roubar
   largura da coluna da tarefa. */
.col-passos { width: 118px; white-space: nowrap; }
.col-passos .passos { display: block; text-decoration: none; }
.col-passos .barra { height: 4px; margin-top: 5px; }
.col-passos .selo { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .col-passos { width: 92px; }
  .col-passos .barra { display: none; }
}