/* TODDASSO HQ — escritório Google-SP em versão painel
   claro, vivo, denso e direto · cor de seção = arquitetura ("pods")
   verde/vermelho/âmbar são EXCLUSIVOS do farol de status               */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("fonts/FragmentMono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ambiente */
  --chao: #f1f3f6;
  --superficie: #ffffff;
  --tinta: #1f2430;
  --tinta-2: #5b6472;
  --linha: #e3e6eb;

  /* pods (arquitetura, nunca dado) */
  --pod-azul: #3d7ff0;
  --pod-rosa: #e8447c;
  --pod-teal: #0fa3b8;
  --pod-roxo: #8b5cf6;

  /* farol — SÓ status */
  --farol-verde: #1e8e4e;
  --farol-amarelo: #c9821b;
  --farol-vermelho: #d23b2a;
  --farol-cinza: #9aa1ab;

  --sans: "Montserrat", system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, monospace;

  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-19: 1.1875rem;

  --raio: 10px;
  --raio-mini: 6px;
  --sombra-1: 0 1px 2px rgba(31, 36, 48, 0.07), 0 2px 8px rgba(31, 36, 48, 0.06);
  --sombra-2: 0 4px 18px rgba(31, 36, 48, 0.13);
}

* { box-sizing: border-box; }

html { scrollbar-color: #c3c9d2 var(--chao); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-15);
  line-height: 1.4;
  color: var(--tinta);
  background:
    radial-gradient(560px 380px at 8% -4%, rgba(61, 127, 240, 0.07), transparent 70%),
    radial-gradient(520px 360px at 96% 12%, rgba(232, 68, 124, 0.055), transparent 70%),
    radial-gradient(620px 420px at 4% 78%, rgba(15, 163, 184, 0.06), transparent 70%),
    radial-gradient(560px 400px at 98% 92%, rgba(139, 92, 246, 0.055), transparent 70%),
    var(--chao);
  background-attachment: fixed;
}

::selection { background: var(--pod-azul); color: #fff; }
:focus-visible { outline: 2px solid var(--pod-azul); outline-offset: 2px; border-radius: 4px; }

a { color: var(--pod-azul); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- entrada ---------- */
.veu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--chao);
  display: grid; place-items: center;
}
.entrada { background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 12px; }
.entrada-logo { font-family: var(--sans); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; color: var(--tinta); }
.entrada-acao {
  font-weight: 700; font-size: var(--t-13);
  color: #fff; background: var(--pod-azul);
  padding: 9px 26px; border-radius: 999px;
  box-shadow: var(--sombra-1);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.entrada:hover .entrada-acao { transform: translateY(-1px); }
.veu.aberto { animation: veu-sai 0.45s cubic-bezier(0.5, 0, 0.15, 1) 0.1s forwards; }
@keyframes veu-sai { to { opacity: 0; visibility: hidden; } }

.com-dobra .desdobra > * { opacity: 0; transform: translateY(14px); }
.com-dobra.aberto-geral .desdobra > * {
  animation: entra 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--dobra, 0) * 55ms + 0.25s);
}
@keyframes entra { to { opacity: 1; transform: none; } }

/* ---------- topo ---------- */
.topo {
  max-width: 1240px; margin: 0 auto;
  padding: 22px 24px 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.topo-marca { display: flex; align-items: center; gap: 12px; }
.topo-nome { margin: 0; font-weight: 800; font-size: 1.625rem; letter-spacing: -0.02em; }
.topo-pontos { display: inline-flex; gap: 5px; }
.topo-pontos i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.topo-pontos i:nth-child(1) { background: var(--pod-azul); }
.topo-pontos i:nth-child(2) { background: var(--pod-rosa); }
.topo-pontos i:nth-child(3) { background: var(--pod-teal); }
.topo-pontos i:nth-child(4) { background: var(--pod-roxo); }
.topo-data { margin: 0; font-family: var(--mono); font-size: var(--t-12); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.topo-data a { color: var(--tinta-2); text-decoration: underline; text-underline-offset: 2px; }
.topo-data a:hover { color: var(--pod-azul); }

/* ---------- estrutura ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 10px 24px 48px; display: grid; gap: 22px; }
.fileira { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 18px; align-items: start; }
.fileira-baixo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.sec { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra-1); padding: 14px 16px 16px; position: relative; overflow: hidden; }
.sec::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
main > .sec::before { background: var(--pod-azul); }
.fileira .sec:nth-child(1)::before { background: var(--pod-rosa); }
.fileira .sec:nth-child(2)::before { background: var(--pod-teal); }
.fileira-baixo .sec:nth-child(1)::before { background: var(--pod-roxo); }
.fileira-baixo .sec:nth-child(2)::before { background: var(--pod-azul); }


/* marca d'água da "sala" de cada seção */
.sec::after {
  content: ""; position: absolute; right: -18px; bottom: -22px;
  width: 150px; height: 150px;
  background-repeat: no-repeat; background-size: contain;
  opacity: 0.09; pointer-events: none;
}
main > .sec::after { /* Projetos: quadro de planejamento */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7ff0' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='1.5'/%3E%3Cpath d='M12 17v3M8.5 20h7'/%3E%3Cpath d='M6.5 13.5v-3M10 13.5V8M13.5 13.5v-4M17 13.5V7'/%3E%3C/svg%3E");
}
.fileira .sec:nth-child(1)::after { /* Tarefas: prancheta */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8447c' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='1.5'/%3E%3Cpath d='M9 4.5V3h6v1.5'/%3E%3Cpath d='M8.5 9.5l1.2 1.2 2-2.4M8.5 14l1.2 1.2 2-2.4'/%3E%3Cpath d='M14 10h2.5M14 14.5h2.5'/%3E%3C/svg%3E");
}
.fileira .sec:nth-child(2)::after { /* Hoje: relógio de parede */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230fa3b8' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
}
.fileira-baixo .sec:nth-child(1)::after { /* Ferramentas: estação */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='3.5' y='9' width='17' height='9' rx='1.5'/%3E%3Cpath d='M9 9V7a3 3 0 0 1 6 0v2M3.5 13.5h17M10.5 13.5v2h3v-2'/%3E%3C/svg%3E");
}
.fileira-baixo .sec:nth-child(2)::after { /* Admin: arquivos */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7ff0' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='1.5'/%3E%3Cpath d='M4 9.3h16M4 14.6h16M10 6.6h4M10 12h4M10 17.3h4'/%3E%3C/svg%3E");
}

.sec-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sec-topo h2 { margin: 0; font-weight: 800; font-size: var(--t-16); letter-spacing: -0.01em; }
.sec-nota { font-family: var(--mono); font-size: var(--t-12); color: var(--tinta-2); }
.sec-acoes { display: inline-flex; gap: 14px; align-items: baseline; }
.sec-acao { font-weight: 700; font-size: var(--t-12); color: var(--pod-azul); background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); }
.sec-acao:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- projetos ---------- */
.projetos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
}
.projeto {
  border: 1px solid var(--linha); border-radius: var(--raio-mini);
  padding: 10px 12px 11px;
  cursor: pointer; background: var(--superficie);
  display: grid; gap: 3px; align-content: start;
  font: inherit; color: inherit; text-align: left; width: 100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.projeto:hover { box-shadow: var(--sombra-1); transform: translateY(-1px); }
.projeto[aria-expanded="true"] { border-color: var(--pod-azul); box-shadow: 0 0 0 1px var(--pod-azul), var(--sombra-1); }
.projeto-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.projeto-nome { font-weight: 700; font-size: var(--t-15); letter-spacing: -0.01em; }
.projeto-farol { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.farol-verde .projeto-farol { background: var(--farol-verde); }
.farol-amarelo .projeto-farol { background: var(--farol-amarelo); }
.farol-vermelho .projeto-farol { background: var(--farol-vermelho); animation: pulsa 1.6s ease-in-out infinite; }
.farol-cinza .projeto-farol { background: var(--farol-cinza); }
@keyframes pulsa { 50% { opacity: 0.4; } }
.farol-cinza .projeto-nome { color: var(--tinta-2); }
.projeto-estado { font-size: var(--t-12); color: var(--tinta-2); line-height: 1.3; min-height: 2.6em; }
.projeto-meta { font-family: var(--mono); font-size: var(--t-11); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.projeto-selo {
  justify-self: start; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--farol-amarelo); border: 1px solid currentColor; border-radius: 3px; padding: 0 5px; margin-top: 2px;
}

.detalhe { margin-top: 10px; border-top: 1px solid var(--linha); padding-top: 12px; }
.detalhe-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.detalhe-nome { margin: 0; font-weight: 800; font-size: var(--t-16); }
.detalhe-mov { font-family: var(--mono); font-size: var(--t-12); color: var(--tinta-2); }
.detalhe-estado { margin: 4px 0 10px; font-size: var(--t-13); color: var(--tinta); }
.detalhe-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.botao-primario {
  display: inline-block; font-weight: 700; font-size: var(--t-13);
  color: #fff; background: var(--pod-azul);
  padding: 7px 14px; border-radius: 999px;
  transition: transform 0.15s ease;
}
.botao-primario:hover { transform: translateY(-1px); text-decoration: none; color: #fff; }
.botao-liso {
  display: inline-block; font-weight: 600; font-size: var(--t-12);
  color: var(--tinta); border: 1px solid var(--linha);
  padding: 6px 12px; border-radius: 999px;
  transition: border-color 0.15s ease;
}
.botao-liso:hover { border-color: var(--tinta-2); text-decoration: none; color: var(--tinta); }

/* ---------- tarefas ---------- */
.grupos { display: grid; gap: 12px; }
.grupo-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 4px; }
.grupo-nome { font-weight: 800; font-size: var(--t-13); }
.grupo-conta { font-family: var(--mono); font-size: var(--t-11); color: var(--tinta-2); }
.grupo-atraso { font-style: normal; color: var(--farol-vermelho); font-weight: 700; }
.grupo ul { list-style: none; margin: 0; padding: 0; }
.tarefa {
  display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px;
  padding: 5px 8px; margin: 0 -8px; border-radius: var(--raio-mini);
  text-decoration: none; color: var(--tinta);
  transition: background 0.12s ease;
}
.tarefa:hover { background: #f3f6fb; text-decoration: none; }
.tarefa-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--farol-cinza); }
.tarefa-atrasada .tarefa-ponto { background: var(--farol-vermelho); }
.tarefa-texto { font-size: var(--t-13); font-weight: 600; line-height: 1.25; }
.tarefa-meta { font-family: var(--mono); font-size: var(--t-11); color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tarefa-atrasada .tarefa-meta { color: var(--farol-vermelho); font-weight: 700; }

/* ---------- hoje ---------- */
.registro { list-style: none; margin: 0; padding: 0; }
.registro li {
  display: grid; grid-template-columns: 52px 1fr; gap: 10px;
  font-size: var(--t-13); line-height: 1.35;
  padding: 6px 0;
  border-bottom: 1px solid var(--linha);
}
.registro li:last-child { border-bottom: 0; }
.reg-hora { font-family: var(--mono); font-size: var(--t-11); color: var(--tinta-2); padding-top: 2px; }

/* ---------- ferramentas ---------- */
.ferramentas { display: grid; gap: 10px; }
.ferr-grupo-titulo { margin: 0 0 5px; font-weight: 800; font-size: var(--t-12); color: var(--tinta-2); text-transform: uppercase; letter-spacing: 0.06em; }
.ferr-fila { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ferramenta {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 999px;
  padding: 5px 12px 5px 6px; min-height: 32px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ferramenta:hover { border-color: var(--pod-roxo); background: #faf8ff; text-decoration: none; color: var(--tinta); }
.ferr-num {
  font-family: var(--mono); font-size: 0.625rem;
  color: #fff; background: var(--pod-roxo);
  border-radius: 999px; padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.ferr-rotulo { font-weight: 600; font-size: var(--t-12); }

/* ---------- admin + delegar ---------- */
.admin-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; }
.aviso { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.aviso a { color: var(--tinta); font-weight: 600; font-size: var(--t-13); }
.aviso a:hover { color: var(--pod-azul); }
.aviso-nota { font-family: var(--mono); font-size: var(--t-11); color: var(--tinta-2); white-space: nowrap; }

.delegar { border-top: 1px solid var(--linha); padding-top: 12px; }
.delegar-titulo { margin: 0 0 6px; font-weight: 800; font-size: var(--t-13); }
.delegar-rotulo { display: block; font-size: var(--t-12); color: var(--tinta-2); margin-bottom: 6px; }
.delegar textarea {
  width: 100%; resize: vertical; min-height: 50px;
  font: 500 var(--t-13)/1.4 var(--sans);
  color: var(--tinta);
  background: var(--chao);
  border: 1px solid var(--linha); border-radius: var(--raio-mini);
  padding: 8px 10px;
  caret-color: var(--pod-azul);
}
.delegar textarea:focus-visible { outline: 2px solid var(--pod-azul); outline-offset: 1px; }
.delegar textarea::placeholder { color: #9aa1ab; }
.delegar-botao {
  margin-top: 8px;
  font: 700 var(--t-13) var(--sans);
  color: #fff; background: var(--pod-azul);
  border: 0; border-radius: 999px;
  padding: 8px 18px; cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: transform 0.15s ease;
}
.delegar-botao:hover { transform: translateY(-1px); }

/* ---------- rodapé ---------- */
.rodape { max-width: 1240px; margin: 0 auto; padding: 0 24px 32px; }
.rodape p { margin: 0; font-family: var(--mono); font-size: var(--t-11); color: var(--tinta-2); }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .fileira, .fileira-baixo { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topo { padding: 16px 14px 4px; }
  main { padding: 8px 14px 40px; gap: 14px; }
  .rodape { padding: 0 14px 28px; }
  .projetos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projeto-estado { min-height: 0; }
  .ferramenta { min-height: 44px; }
  .tarefa { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .desdobra > *,
  .com-dobra .desdobra > * { opacity: 1; transform: none; }
}