/* Páginas de projeto da AI Solutions. Desenho de base: a página que o Santiago fez como artefacto
   (proposta estrutura-cliente, commit 959abd7), servida aqui com fontes locais e sem estilos inline (CSP). */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 800; font-stretch: 62% 125%; font-display: swap; src: url(/estatico/fontes/archivo.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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/estatico/fontes/plex-mono-400.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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/estatico/fontes/plex-mono-500.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; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/estatico/fontes/source-sans-3.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 {
  --bg: #f3f4f1; --surface: #ffffff; --ink: #19212e; --muted: #586172; --line: #d8dbd3; --quiet: #e9ebe6;
  --accent: #2a44b0; --accent-soft: #e4e8f8; --ok: #2c7548; --ok-soft: #e0efe5; --warn: #95590a; --warn-soft: #f8ecd4;
  --crit: #ad2c22; --crit-soft: #f9e3df;
  --font-display: "Archivo", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --step--1: 0.8125rem; --step-0: 1rem; --step-1: 1.125rem; --step-2: 1.5rem; --step-3: 2.25rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11151b; --surface: #181d25; --ink: #e6e9ee; --muted: #9aa3b2; --line: #2a313c; --quiet: #222832;
    --accent: #93a6ff; --accent-soft: #1d2650; --ok: #6fc391; --ok-soft: #15301f; --warn: #e6b05a; --warn-soft: #382a12;
    --crit: #f28b80; --crit-soft: #3b1b18; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11151b; --surface: #181d25; --ink: #e6e9ee; --muted: #9aa3b2; --line: #2a313c; --quiet: #222832;
  --accent: #93a6ff; --accent-soft: #1d2650; --ok: #6fc391; --ok-soft: #15301f; --warn: #e6b05a; --warn-soft: #382a12;
  --crit: #f28b80; --crit-soft: #3b1b18; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.5; }
p, ul, ol, dl, dd, h1, h2, h3 { margin: 0; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
code { font-family: var(--font-data); font-size: 0.9em; background: var(--quiet); padding: 0 0.3em; border-radius: 3px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 60rem; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Barra de topo */
.barra { border-bottom: 1px solid var(--line); background: var(--surface); }
.barra-in { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.1rem; }
.marca { font-family: var(--font-display); font-weight: 750; font-stretch: 87.5%; font-size: 1.05rem; color: var(--ink); text-decoration: none; letter-spacing: -0.005em; white-space: nowrap; }
.marca span { color: var(--muted); font-weight: 600; margin-left: 0.25rem; }
.barra-dir { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.barra-dir form { margin: 0; }
.quem { font-size: var(--step--1); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.sair, .tema { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: var(--step--1); padding: 0.2rem 0.65rem; border-radius: 999px; cursor: pointer; }
.sair:hover, .tema:hover { border-color: var(--accent); color: var(--accent); }

.vista { display: flex; flex-direction: column; gap: 2.25rem; padding-block: 1.75rem 0; }
.carga { color: var(--muted); padding-block: 2rem; }

.sec { min-width: 0; }
.sec-tit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin-bottom: 0.85rem; }
.sec-tit .n { font-family: var(--font-data); font-weight: 500; letter-spacing: 0; text-transform: none; }
.sec-tit .n .crit { color: var(--crit); }
.sec-tit .n .warn { color: var(--warn); }
.vazio { color: var(--muted); }
.por-definir { color: var(--muted); font-style: italic; }

.pill { display: inline-flex; align-items: center; padding: 0.05rem 0.55rem; border-radius: 999px; font-size: var(--step--1); font-weight: 600; line-height: 1.55; white-space: nowrap; background: var(--quiet); color: var(--ink); text-decoration: none; }
.pill.t-accent { background: var(--accent-soft); color: var(--accent); }
.pill.t-ok { background: var(--ok-soft); color: var(--ok); }
.pill.t-warn { background: var(--warn-soft); color: var(--warn); }
.pill.t-crit { background: var(--crit-soft); color: var(--crit); }

/* Aviso de leitura não confirmada */
.faixa { border: 1px solid var(--warn); background: var(--warn-soft); color: var(--ink); border-radius: 10px; padding: 0.75rem 1rem; }
.faixa strong { color: var(--warn); }

/* Cabeçalho */
.cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1.25rem 2rem; align-items: start; }
.cab-id { min-width: 0; }
.eyebrow { font-family: var(--font-data); font-size: var(--step--1); color: var(--muted); margin-bottom: 0.35rem; overflow-wrap: anywhere; }
h1 { font-family: var(--font-display); font-stretch: 87.5%; font-weight: 750; font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; margin-bottom: 1rem; }
.meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.meta > div { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.meta dt { font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.meta dd { font-weight: 600; }
.meta dd.data { font-family: var(--font-data); font-weight: 500; font-variant-numeric: tabular-nums; }
.cab-marco { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.95rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cab-marco .rot { font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.cab-marco .dias { font-family: var(--font-display); font-stretch: 87.5%; font-weight: 750; font-size: var(--step-2); line-height: 1.1; }
.cab-marco .dias.atraso { color: var(--crit); }
.cab-marco .titulo { font-weight: 600; overflow-wrap: anywhere; }
.cab-marco .titulo .mid { font-family: var(--font-data); font-weight: 500; font-size: var(--step--1); color: var(--muted); margin-right: 0.35rem; }
.cab-marco .data { font-family: var(--font-data); font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.cab-marco .m-prog { max-width: none; margin-top: 0.2rem; }
.cab-evento { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--muted); overflow-wrap: anywhere; }
.cab-evento .mid { font-family: var(--font-data); margin-right: 0.3rem; }
.cab-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.cab-pills .pill { white-space: normal; }

/* Listas */
.situacao { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; max-width: 46rem; font-size: var(--step-1); line-height: 1.45; }
.situacao li { position: relative; padding-left: 1.05rem; overflow-wrap: anywhere; }
.situacao li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.42rem; height: 0.42rem; border-radius: 1px; background: var(--accent); }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2.5rem; }
.lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; max-width: 34rem; }
.lista li { position: relative; padding-left: 1.05rem; overflow-wrap: anywhere; }
.lista li::before { content: ""; position: absolute; left: 0.05rem; top: 0.72em; width: 0.45rem; height: 2px; background: var(--muted); }
ol.lista { counter-reset: passo; }
ol.lista li { counter-increment: passo; padding-left: 1.7rem; }
ol.lista li::before { content: counter(passo); top: 0.1em; width: auto; height: auto; background: none; font-family: var(--font-data); font-size: var(--step--1); color: var(--muted); }

/* À espera de */
.espera { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.dono { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; }
.dono h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-family: var(--font-display); font-size: var(--step-0); font-weight: 700; }
.dono h3 .conta { font-family: var(--font-data); font-weight: 500; color: var(--muted); }
.dono ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.dono li { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.65rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.dono li:first-child { border-top: 0; padding-top: 0; }
.dono .ha { font-family: var(--font-data); font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.dono .nada { color: var(--muted); }
.etq { display: inline-block; margin-left: 0.4rem; padding: 0 0.3rem; border: 1px solid var(--line); border-radius: 4px; font-family: var(--font-data); font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--muted); vertical-align: 0.1em; }
.ninguem { color: var(--muted); font-size: var(--step-1); }

/* Entregas com percentagem */
.entregas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.6rem; }
.entregas li { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.entregas .e-topo { display: flex; gap: 0.45rem; align-items: baseline; min-width: 0; }
.entregas .e-id { font-family: var(--font-data); font-size: var(--step--1); color: var(--muted); flex: none; }
.entregas .e-tit { font-weight: 600; overflow-wrap: anywhere; font-size: 0.9375rem; }

/* Marcos em linha temporal */
.linha { --cd: 6.2rem; position: relative; list-style: none; padding: 0; }
.linha::before { content: ""; position: absolute; left: calc(var(--cd) + 1.5rem - 1px); top: 1rem; bottom: 1rem; width: 2px; background: var(--line); }
.marco, .hoje { display: grid; grid-template-columns: var(--cd) 1.5rem minmax(0, 1fr); column-gap: 0.75rem; }
.marco { padding-block: 0.3rem; }
.m-data { padding-top: 0.75rem; text-align: right; font-family: var(--font-data); font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.m-no { position: relative; z-index: 1; display: block; width: 0.95rem; height: 0.95rem; margin: 0.85rem auto 0; border-radius: 50%; background: var(--bg); border: 2px solid var(--muted); }
.m-corpo { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.85rem; border-radius: 8px; }
.m-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.55rem; }
.m-id { font-family: var(--font-data); font-size: var(--step--1); color: var(--muted); }
.m-titulo { font-weight: 600; overflow-wrap: anywhere; }
.m-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: var(--step--1); color: var(--muted); }
.m-prog { display: flex; align-items: center; gap: 0.6rem; max-width: 28rem; }
.barra-p { flex: 1; height: 6px; border-radius: 3px; background: var(--quiet); overflow: hidden; }
.barra-p > span { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.m-pct { min-width: 2.6rem; text-align: right; font-family: var(--font-data); font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.m-fonte { font-family: var(--font-data); font-size: 0.6875rem; color: var(--muted); white-space: nowrap; }
.marco.evento { padding-block: 0.05rem; }
.marco.evento .m-data { padding-top: 0.3rem; }
.marco.evento .m-no { width: 0.6rem; height: 0.6rem; margin-top: 0.55rem; border-radius: 1px; border-width: 2px; transform: rotate(45deg); }
.marco.evento .m-corpo { padding-block: 0.3rem; background: transparent; }
.marco.evento .m-topo { display: block; font-size: 0.9375rem; }
.marco.evento .m-id { margin-right: 0.45rem; }
.marco.evento .m-topo > :last-child:not(.m-titulo) { margin-left: 0.5rem; }
.marco.evento .m-titulo { font-weight: 400; }
.ev-nota { font-size: var(--step--1); color: var(--muted); }
.marco.e-concluido .m-no { background: var(--ok); border-color: var(--ok); }
.marco.e-concluido .barra-p > span, .entregas .e-concluido .barra-p > span { background: var(--ok); }
.marco.e-em_curso .m-no { background: var(--accent); border-color: var(--accent); }
.marco.e-em_curso .barra-p > span, .entregas .e-em_curso .barra-p > span { background: var(--accent); }
.marco.e-em_teste .m-no { background: var(--warn); border-color: var(--warn); }
.marco.e-em_teste .barra-p > span, .entregas .e-em_teste .barra-p > span { background: var(--warn); }
.marco.e-bloqueado .m-no { background: var(--crit); border-color: var(--crit); border-radius: 2px; }
.marco.e-bloqueado .barra-p > span { background: var(--crit); }
.marco.e-cancelado .m-no { border-color: var(--line); }
.marco.e-cancelado .m-titulo { text-decoration: line-through; color: var(--muted); }
.marco.atrasado .m-corpo { background: var(--crit-soft); }
.marco.atrasado .m-data { color: var(--crit); font-weight: 500; }
.marco.atrasado .m-atraso { color: var(--crit); font-weight: 600; }
.marco.aguarda .m-corpo { background: var(--warn-soft); }
.marco.aguarda .m-data { color: var(--warn); font-weight: 500; }
.marco.aguarda .m-espera { color: var(--warn); font-weight: 600; }
.marco.evento .m-atraso, .marco.evento .m-espera { font-size: var(--step--1); }
.marco.evento.atrasado .m-corpo, .marco.evento.aguarda .m-corpo { background: transparent; }
.marco.evento.atrasado .m-no { background: var(--crit); border-color: var(--crit); }
.marco.evento.aguarda .m-no { background: var(--warn); border-color: var(--warn); }
.hoje { align-items: center; padding-block: 0.35rem; }
.h-data { text-align: right; font-family: var(--font-data); font-size: var(--step--1); font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.h-no { position: relative; z-index: 1; display: block; width: 0.6rem; height: 0.6rem; margin: 0 auto; background: var(--accent); transform: rotate(45deg); }
.h-linha { display: flex; align-items: center; gap: 0.6rem; padding-left: 0.85rem; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); }
.h-linha::after { content: ""; flex: 1; border-top: 2px dashed var(--accent); opacity: 0.6; }

/* Ligações */
.links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.links li { min-width: 0; max-width: 100%; }
.links a { display: flex; flex-direction: column; gap: 0.05rem; padding: 0.55rem 0.85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-decoration: none; color: var(--ink); }
.links a:hover { border-color: var(--accent); }
.links .nome { font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
.links .host { font-family: var(--font-data); font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; }

/* Rodapé */
.rodape { display: flex; flex-direction: column; gap: 0.35rem; padding-block: 1.25rem 2.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--1); }
.rodape a { color: inherit; }
.avisos { list-style: none; padding: 0; margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; }
.avisos li { overflow-wrap: anywhere; }
.avisos .ar { font-weight: 600; }

/* Índice */
.ind-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.75rem 1.5rem; }
.ind-cab h1 { margin-bottom: 0.3rem; }
.ind-cab .sub { color: var(--muted); }
.filtro { appearance: none; width: min(100%, 18rem); font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem 0.7rem; }
.cartoes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 0.9rem; }
.cartao { display: flex; flex-direction: column; gap: 0.55rem; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); min-width: 0; }
a.cartao:hover { border-color: var(--accent); }
.cartao .c-topo { display: flex; justify-content: space-between; align-items: start; gap: 0.6rem; }
.cartao .c-nome { font-family: var(--font-display); font-stretch: 87.5%; font-weight: 750; font-size: 1.3rem; line-height: 1.15; overflow-wrap: anywhere; }
.cartao .c-slug { font-family: var(--font-data); font-size: 0.75rem; color: var(--muted); }
.cartao .c-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: var(--step--1); color: var(--muted); }
.cartao .c-prox { border-top: 1px solid var(--line); padding-top: 0.55rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9375rem; }
.cartao .c-prox .rot { font-family: var(--font-display); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.cartao .c-prox .mid { font-family: var(--font-data); font-size: var(--step--1); color: var(--muted); margin-right: 0.3rem; }
.cartao .c-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; }
.cartao.sem { color: var(--muted); }

/* Entrar e erros */
.entrar { display: flex; justify-content: center; padding-block: 12vh 4rem; }
.entrar-caixa { max-width: 27rem; display: flex; flex-direction: column; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.75rem 1.6rem; }
.entrar-caixa h1 { margin: 0; }
.entrar-caixa p { color: var(--muted); }
.entrar-erro { color: var(--crit) !important; font-weight: 600; }
.botao { display: inline-flex; justify-content: center; align-items: center; text-align: center; padding: 0.7rem 1rem; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
:root[data-theme="dark"] .botao { color: #0d1430; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .botao { color: #0d1430; } }
.botao:hover { filter: brightness(1.08); }
.erro { max-width: 40rem; margin-block: 2rem; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--crit); border-radius: 10px; display: flex; flex-direction: column; gap: 0.5rem; }
.erro h1 { font-size: var(--step-2); margin: 0; color: var(--crit); }

@media (max-width: 760px) { .espera { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .cab { grid-template-columns: minmax(0, 1fr); }
  .duas { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 1.9rem; }
  .quem { display: none; }
}
@media (max-width: 480px) {
  .linha { --cd: 5.1rem; }
  .marco, .hoje { column-gap: 0.5rem; }
  .linha::before { left: calc(var(--cd) + 1.25rem - 1px); }
  .m-corpo { padding: 0.55rem 0.65rem; }
  .vista { gap: 1.9rem; }
}