/* VPS Group: sistema de operação. Linguagem visual dos serviços da Apple
   (iCloud, Business Manager): material translúcido na barra lateral, título grande,
   listas agrupadas sobre fundo cinza, controles segmentados e folhas modais.
   Acento = Azul VPS #020381 (brandbook v1.1). Verde VPS só em elemento gráfico grosso. */

:root {
  --fundo: #f5f5f7;
  --superficie: #ffffff;
  --superficie-2: #fbfbfd;
  --preenchimento: rgba(118, 118, 128, 0.12);
  --preenchimento-2: rgba(118, 118, 128, 0.2);
  --material: rgba(246, 246, 248, 0.78);
  --texto: #1d1d1f;
  --texto-2: #6e6e73;
  --linha: rgba(0, 0, 0, 0.1);
  --linha-forte: rgba(0, 0, 0, 0.16);
  --acento: #020381;
  --acento-suave: rgba(2, 3, 129, 0.08);
  --acento-anel: rgba(2, 3, 129, 0.35);
  --botao: #020381;
  --botao-hover: #1a1c9c;
  --botao-texto: #ffffff;
  --verde-vps: #b7c836;
  --ponto-ok: #34c759;
  --ponto-atencao: #ff9f0a;
  --ponto-critico: #ff3b30;
  --ponto-info: #0a84ff;
  --ponto-neutro: #8e8e93;
  --pilula-ok-fundo: rgba(52, 199, 89, 0.14);
  --pilula-ok-texto: #1b6e32;
  --pilula-atencao-fundo: rgba(255, 159, 10, 0.16);
  --pilula-atencao-texto: #8a4b00;
  --pilula-critico-fundo: rgba(255, 59, 48, 0.12);
  --pilula-critico-texto: #b8141b;
  --pilula-info-fundo: rgba(10, 132, 255, 0.12);
  --pilula-info-texto: #0a50a6;
  --pilula-neutro-fundo: rgba(118, 118, 128, 0.14);
  --pilula-neutro-texto: #48484d;
  --avatar: linear-gradient(180deg, #71767f 0%, #575c64 100%);

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --sombra-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --sombra-xl: 0 24px 64px rgba(0, 0, 0, 0.24), 0 0 0 0.5px rgba(0, 0, 0, 0.1);

  --r-1: 8px;
  --r-2: 12px;
  --r-3: 18px;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-6: 24px;
  --e-8: 32px;
  --e-12: 48px;

  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --lateral: 264px;
  --barra: 52px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #000000;
    --superficie: #1c1c1e;
    --superficie-2: #232325;
    --preenchimento: rgba(118, 118, 128, 0.24);
    --preenchimento-2: rgba(118, 118, 128, 0.36);
    --material: rgba(28, 28, 30, 0.78);
    --texto: #f5f5f7;
    --texto-2: #a1a1a6;
    --linha: rgba(255, 255, 255, 0.12);
    --linha-forte: rgba(255, 255, 255, 0.2);
    --acento: #9da0ff;
    --acento-suave: rgba(157, 160, 255, 0.14);
    --acento-anel: rgba(157, 160, 255, 0.5);
    --botao: #3b3fd8;
    --botao-hover: #4c50e6;
    --pilula-ok-fundo: rgba(48, 209, 88, 0.18);
    --pilula-ok-texto: #6fe08e;
    --pilula-atencao-fundo: rgba(255, 159, 10, 0.2);
    --pilula-atencao-texto: #ffc062;
    --pilula-critico-fundo: rgba(255, 69, 58, 0.2);
    --pilula-critico-texto: #ff8c84;
    --pilula-info-fundo: rgba(10, 132, 255, 0.22);
    --pilula-info-texto: #7cbcff;
    --pilula-neutro-fundo: rgba(142, 142, 147, 0.24);
    --pilula-neutro-texto: #d1d1d6;
    --avatar: linear-gradient(180deg, #6c707a 0%, #4f535b 100%);
    --sombra-sm: 0 0 0 0.5px rgba(255, 255, 255, 0.1);
    --sombra-md: 0 0 0 0.5px rgba(255, 255, 255, 0.1);
    --sombra-lg: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 16px 40px rgba(0, 0, 0, 0.6);
    --sombra-xl: 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 24px 64px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 15px/1.45 var(--fonte);
  letter-spacing: -0.009em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--acento-anel); outline-offset: 2px; border-radius: var(--r-1); }
[hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: var(--e-4); top: -60px; z-index: 100; background: var(--superficie); padding: var(--e-2) var(--e-4); border-radius: var(--r-1); box-shadow: var(--sombra-lg); }
.pular:focus { top: var(--e-4); }
.num { font-variant-numeric: tabular-nums; }

.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 16px; height: 16px; }

/* ---------- Casca ---------- */
.casca { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }

.lateral {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--linha);
  padding: var(--e-4) var(--e-3);
  z-index: 30;
}
.marca { display: block; padding: var(--e-2) var(--e-2) var(--e-4); }
.marca img { width: 168px; height: auto; }
.logo-escuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-claro { display: none; }
  :root:not([data-tema="claro"]) .logo-escuro { display: block; }
}

.busca-global { position: relative; margin: 0 0 var(--e-3); }
.busca-global .ic { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--texto-2); width: 16px; height: 16px; }
.campo-busca {
  width: 100%; height: 34px; border: 0; border-radius: var(--r-1);
  background: var(--preenchimento); padding: 0 var(--e-3) 0 32px;
}
.campo-busca::placeholder { color: var(--texto-2); }
.campo-busca:focus-visible { outline-offset: 0; }

.nav { flex: 1; overflow-y: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 36px; padding: var(--e-1) var(--e-3);
  border-radius: var(--r-1); color: var(--texto); font-weight: 500;
}
.nav a .ic { color: var(--acento); }
.nav a:hover { background: var(--preenchimento); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--preenchimento-2); font-weight: 600; }
.nav .contagem { margin-left: auto; font-size: 13px; color: var(--texto-2); font-weight: 500; }

.usuario { position: relative; border-top: 1px solid var(--linha); padding-top: var(--e-3); margin-top: var(--e-3); }
.usuario-botao {
  width: 100%; display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2); border: 0; background: none; border-radius: var(--r-1); text-align: left;
}
.usuario-botao:hover { background: var(--preenchimento); }
.usuario-nome { font-weight: 600; font-size: 14px; display: block; }
.usuario-papel { font-size: 12px; color: var(--texto-2); display: block; }

.menu-flutuante {
  position: absolute; z-index: 60; min-width: 240px;
  background: var(--superficie); border-radius: var(--r-2); box-shadow: var(--sombra-lg);
  padding: var(--e-1);
}
.usuario .menu-flutuante { bottom: calc(100% + var(--e-2)); left: 0; right: 0; }
.menu-flutuante p { font-size: 12px; color: var(--texto-2); padding: var(--e-2) var(--e-3) var(--e-1); }
.menu-flutuante button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  border: 0; background: none; text-align: left; padding: var(--e-2) var(--e-3); border-radius: var(--r-1);
}
.menu-flutuante button:hover, .menu-flutuante button:focus-visible { background: var(--acento-suave); }
.menu-flutuante hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e-1) var(--e-2); }

/* ---------- Área principal ---------- */
.principal { min-width: 0; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 20; height: var(--barra);
  display: flex; align-items: center; gap: var(--e-3);
  padding: 0 var(--e-8);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .2s, border-color .2s;
}
.barra.rolou {
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--linha);
}
.barra-titulo { font-weight: 600; opacity: 0; transition: opacity .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.barra.rolou .barra-titulo { opacity: 1; }
.barra-acoes { margin-left: auto; display: flex; gap: var(--e-2); align-items: center; }
.barra .botao-menu { display: none; }
.voltar {
  display: inline-flex; align-items: center; gap: 2px; color: var(--acento);
  font-weight: 500; white-space: nowrap; min-height: 36px;
}
.voltar .ic { width: 18px; height: 18px; stroke-width: 2.2; }

.conteudo { width: 100%; max-width: 1240px; padding: var(--e-2) var(--e-8) var(--e-12); margin: 0 auto; }
.conteudo:focus { outline: none; }

.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-4); margin-bottom: var(--e-6); }
.cabeca-texto { min-width: 0; flex: 1 1 320px; }
.sobretitulo { font-size: 13px; font-weight: 600; color: var(--texto-2); margin-bottom: var(--e-1); }
.titulo-grande { font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; overflow-wrap: anywhere; }
.subtitulo { color: var(--texto-2); margin-top: var(--e-1); }
.cabeca-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.secao { margin-top: var(--e-8); }
.secao:first-child { margin-top: 0; }
.secao-cabeca { display: flex; align-items: baseline; gap: var(--e-3); margin: 0 0 var(--e-2); padding: 0 var(--e-1); }
.secao-titulo { font-size: 20px; font-weight: 700; letter-spacing: -0.016em; }
.secao-nota { font-size: 13px; color: var(--texto-2); }
.secao-cabeca .acao { margin-left: auto; font-size: 15px; }

.colunas { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.colunas-iguais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); align-items: start; }
.colunas > .secao, .colunas-iguais > .secao { margin-top: 0; }
.pilha { display: grid; gap: var(--e-8); }

/* ---------- Grupo (lista agrupada) ---------- */
.grupo { background: var(--superficie); border-radius: var(--r-2); overflow: hidden; }
.grupo + .grupo { margin-top: var(--e-4); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { position: relative; }
.lista > li + li::before { content: ""; position: absolute; top: 0; right: 0; left: var(--recuo, 16px); border-top: 1px solid var(--linha); }
.linha {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); min-height: 52px; color: var(--texto); width: 100%;
  background: none; border: 0; text-align: left;
}
a.linha:hover, button.linha:hover { background: var(--superficie-2); text-decoration: none; }
.linha-corpo { min-width: 0; flex: 1; }
.linha-titulo { font-weight: 500; overflow-wrap: anywhere; }
.linha-sub { font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.linha-fim { display: flex; align-items: center; gap: var(--e-2); flex: none; color: var(--texto-2); font-size: 14px; }
.linha .chevron { color: var(--texto-2); opacity: .7; width: 14px; height: 14px; stroke-width: 2.2; }
.linha-icone { color: var(--acento); }
.linha-icone.critico { color: var(--ponto-critico); }
.linha-icone.atencao { color: var(--ponto-atencao); }
.vazio { padding: var(--e-6) var(--e-4); color: var(--texto-2); text-align: center; }

.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ficha > div { padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linha); margin-top: -1px; }
.ficha dt { font-size: 13px; color: var(--texto-2); }
.ficha dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
dl.ficha { margin: 0; }

/* ---------- Tabela ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-2);
  padding: var(--e-3) var(--e-4) var(--e-2); border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.tabela td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela .principal-celula a { color: var(--texto); font-weight: 600; }
.link-botao { background: none; border: 0; padding: 0; text-align: left; color: var(--texto); font-weight: 600; }
.link-botao:hover { text-decoration: underline; }
.tabela .sub { display: block; font-size: 13px; color: var(--texto-2); }
.tabela .direita { text-align: right; }

/* ---------- Resumo numérico ---------- */
.resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.resumo > a {
  display: block; padding: var(--e-4) var(--e-6) var(--e-4) var(--e-4); color: var(--texto);
  border-left: 1px solid var(--linha);
}
.resumo > a:first-child { border-left: 0; }
.resumo > a:hover { background: var(--superficie-2); text-decoration: none; }
.resumo-rotulo { font-size: 13px; color: var(--texto-2); font-weight: 500; }
.resumo-numero { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.resumo-nota { font-size: 13px; color: var(--texto-2); display: flex; align-items: center; gap: 6px; }

/* ---------- Estado, pílula, avatar ---------- */
.estado { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 14px; color: var(--texto); }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ponto-neutro); flex: none; }
.estado.ok::before { background: var(--ponto-ok); }
.estado.atencao::before { background: var(--ponto-atencao); }
.estado.critico::before { background: var(--ponto-critico); }
.estado.info::before { background: var(--ponto-info); }

.pilula {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: 999px;
  background: var(--pilula-neutro-fundo); color: var(--pilula-neutro-texto);
}
.pilula.ok { background: var(--pilula-ok-fundo); color: var(--pilula-ok-texto); }
.pilula.atencao { background: var(--pilula-atencao-fundo); color: var(--pilula-atencao-texto); }
.pilula.critico { background: var(--pilula-critico-fundo); color: var(--pilula-critico-texto); }
.pilula.info { background: var(--pilula-info-fundo); color: var(--pilula-info-texto); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--avatar);
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.avatar.grande { width: 72px; height: 72px; font-size: 26px; }
.avatares { display: inline-flex; }
.avatares .avatar { width: 26px; height: 26px; font-size: 10px; box-shadow: 0 0 0 2px var(--superficie); }
.avatares .avatar + .avatar { margin-left: -6px; }

/* ---------- Botões e controles ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 var(--e-4); border-radius: 999px; border: 0;
  font-weight: 500; font-size: 14px; white-space: nowrap; text-decoration: none;
  background: var(--botao); color: var(--botao-texto);
}
.botao:hover { background: var(--botao-hover); text-decoration: none; }
.botao.tingido { background: var(--acento-suave); color: var(--acento); }
.botao.tingido:hover { background: var(--preenchimento-2); }
.botao.simples { background: none; color: var(--acento); padding: 0 var(--e-2); }
.botao.simples:hover { background: var(--acento-suave); }
.botao.perigo { background: var(--pilula-critico-fundo); color: var(--pilula-critico-texto); }
.botao.icone { width: 36px; padding: 0; background: var(--preenchimento); color: var(--texto); }
.botao.icone:hover { background: var(--preenchimento-2); }
.botao[disabled] { opacity: .45; cursor: not-allowed; }

.segmentado {
  display: inline-flex; background: var(--preenchimento); border-radius: var(--r-1); padding: 2px; gap: 2px; max-width: 100%; overflow-x: auto;
}
.segmentado button {
  border: 0; background: none; border-radius: 6px; padding: 5px var(--e-4); font-size: 13px; font-weight: 500; white-space: nowrap; min-height: 28px;
}
.segmentado button[aria-pressed="true"], .segmentado button[aria-selected="true"] { background: var(--superficie); box-shadow: var(--sombra-sm); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .segmentado button[aria-pressed="true"],
  :root:not([data-tema="claro"]) .segmentado button[aria-selected="true"] { background: #636366; }
}

.ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.ferramentas .busca-local { position: relative; flex: 1 1 260px; max-width: 360px; }
.ferramentas .busca-local .ic { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--texto-2); width: 16px; height: 16px; }
.ferramentas .fim { margin-left: auto; display: flex; gap: var(--e-2); }

.abas { margin-bottom: var(--e-6); }

/* ---------- Cadeia de relação (cliente > contrato > serviço > PT) ---------- */
.cadeia { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--e-2); margin-bottom: var(--e-8); }
.elo {
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
  padding: var(--e-2) var(--e-4); border-radius: var(--r-2); background: var(--superficie); color: var(--texto);
}
a.elo:hover { text-decoration: none; box-shadow: var(--sombra-md); }
.elo small { font-size: 12px; color: var(--texto-2); font-weight: 500; }
.elo strong { font-weight: 600; overflow-wrap: anywhere; }
.elo.atual { background: var(--botao); color: var(--botao-texto); }
.elo.atual small { color: rgba(255, 255, 255, 0.78); }
.elo-seta { display: flex; align-items: center; color: var(--texto-2); }
.elo-seta .ic { width: 14px; height: 14px; stroke-width: 2.2; }

/* ---------- Aptidão da equipe ---------- */
.barra-aptidao { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--preenchimento); margin: var(--e-2) 0 var(--e-1); }
.barra-aptidao span { display: block; height: 100%; }
.barra-aptidao .ok { background: var(--verde-vps); }
.barra-aptidao .atencao { background: var(--ponto-atencao); }
.barra-aptidao .critico { background: var(--ponto-critico); }
.legenda { display: flex; flex-wrap: wrap; gap: var(--e-4); font-size: 13px; color: var(--texto-2); }

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

/* ---------- Linha do tempo (registros de execução) ---------- */
.tempo { list-style: none; margin: 0; padding: var(--e-2) var(--e-4) var(--e-4); }
.tempo li { position: relative; padding: var(--e-2) 0 var(--e-2) var(--e-6); }
.tempo li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--acento); }
.tempo li + li::after { content: ""; position: absolute; left: 8px; top: -8px; height: 22px; border-left: 1px solid var(--linha-forte); }
.tempo time { font-size: 13px; color: var(--texto-2); }

/* ---------- Agenda (semana) ---------- */
.agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--e-6); align-items: start; }
.semana-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); }
.semana-cabeca h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.016em; margin-right: auto; }
.semana { display: grid; grid-template-columns: 52px repeat(var(--dias, 7), minmax(0, 1fr)); position: relative; }
.semana-dia { text-align: center; padding: var(--e-2) 0; border-left: 1px solid var(--linha); border-bottom: 1px solid var(--linha); font-size: 12px; color: var(--texto-2); }
.semana-dia b { display: block; font-size: 20px; font-weight: 500; color: var(--texto); line-height: 1.3; }
.semana-dia.hoje b { color: #fff; background: #d70015; border-radius: 50%; width: 32px; height: 32px; line-height: 32px; margin: 0 auto; font-size: 17px; }
.semana-horas { position: relative; }
.semana-hora { height: 52px; font-size: 11px; color: var(--texto-2); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.semana-coluna { position: relative; border-left: 1px solid var(--linha); background-image: linear-gradient(var(--linha) 1px, transparent 1px); background-size: 100% 52px; }
.semana-coluna.hoje { background-color: var(--acento-suave); }
.evento {
  position: absolute; left: 3px; right: 3px; overflow: hidden; text-align: left;
  border: 0; border-left: 3px solid var(--cor, var(--ponto-info)); border-radius: 6px;
  background: color-mix(in srgb, var(--cor, var(--ponto-info)) 16%, var(--superficie));
  padding: 3px 6px; font-size: 12px; line-height: 1.3; color: var(--texto);
}
.evento:hover { box-shadow: var(--sombra-md); }
.evento strong { display: block; font-weight: 600; }
.evento span { color: var(--texto-2); }
.agora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--ponto-critico); z-index: 2; pointer-events: none; }
.agora::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ponto-critico); }
.tipos { display: flex; flex-wrap: wrap; gap: var(--e-4); font-size: 13px; color: var(--texto-2); padding: var(--e-2) var(--e-4); border-bottom: 1px solid var(--linha); }
.tipos span { display: inline-flex; align-items: center; gap: 6px; }
.tipos i { width: 10px; height: 10px; border-radius: 3px; background: var(--cor); }
.dias-lista { display: none; }

.tarefa { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4); }
.marcar {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--linha-forte); background: none; flex: none;
  display: grid; place-items: center; margin-top: 1px; color: #fff; padding: 0;
}
.marcar[aria-checked="true"] { background: var(--botao); border-color: var(--botao); }
.marcar .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.tarefa.feita .linha-titulo { color: var(--texto-2); text-decoration: line-through; }

/* ---------- Folha modal (dialog) ---------- */
dialog.folha {
  border: 0; padding: 0; border-radius: var(--r-3); background: var(--fundo); color: var(--texto);
  width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 860px); box-shadow: var(--sombra-xl);
  display: flex; flex-direction: column; overflow: hidden;
}
dialog.folha:not([open]) { display: none; }
dialog.folha::backdrop { background: rgba(0, 0, 0, 0.32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.folha.larga { width: min(720px, calc(100vw - 32px)); }
.folha-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); background: var(--material); }
.folha-topo h2 { font-size: 16px; font-weight: 600; text-align: center; }
.folha-topo .botao.simples:first-child { justify-self: start; }
.folha-topo .botao:last-child { justify-self: end; }
.folha-corpo { padding: var(--e-4); overflow-y: auto; }
.folha-corpo .grupo + .grupo, .grupo-form + .grupo-form { margin-top: var(--e-6); }
.folha-erro { color: var(--pilula-critico-texto); font-size: 14px; padding: 0 var(--e-1) var(--e-3); }

.grupo-form { display: grid; gap: var(--e-4); background: var(--superficie); border-radius: var(--r-2); padding: var(--e-4); }
.grupo-form h3 { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label, .campo .rotulo { font-size: 13px; font-weight: 500; }
.campo .dica { font-size: 12px; color: var(--texto-2); }
.campo input:not([type="checkbox"]), .campo select, .campo textarea {
  width: 100%; min-height: 38px; border: 1px solid var(--linha-forte); border-radius: var(--r-1);
  background: var(--superficie); padding: var(--e-2) var(--e-3);
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline-offset: 0; border-color: var(--acento); }
.campo [aria-invalid="true"] { border-color: var(--ponto-critico); }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.marcadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-1) var(--e-4); max-height: 220px; overflow-y: auto; padding: 2px; }
.marcadores label, .campo-check { display: flex; align-items: center; gap: var(--e-2); font-size: 14px; font-weight: 400; min-height: 32px; }
.marcadores input, .campo-check input { width: 18px; height: 18px; accent-color: var(--botao); flex: none; }

/* ---------- Aviso e toast ---------- */
.aviso-demo {
  display: flex; gap: var(--e-2); align-items: center; font-size: 13px; color: var(--texto-2);
  padding: var(--e-2) var(--e-3); border-radius: var(--r-1); background: var(--preenchimento); margin-bottom: var(--e-6);
}
.toast {
  position: fixed; left: 50%; bottom: var(--e-6); transform: translate(-50%, 16px); opacity: 0; z-index: 90;
  background: var(--texto); color: var(--fundo); padding: var(--e-2) var(--e-4); border-radius: 999px;
  font-size: 14px; font-weight: 500; box-shadow: var(--sombra-lg); transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }

.resultados-busca { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 60vh; overflow-y: auto; }
.resultados-busca .linha { min-height: 44px; padding: var(--e-2) var(--e-3); border-radius: var(--r-1); }
.resultados-busca .grupo-rotulo { font-size: 12px; font-weight: 600; color: var(--texto-2); padding: var(--e-2) var(--e-3) 2px; }

.fundo-menu { display: none; }

/* ---------- Links de arquivo ---------- */
.link-arquivo, .campo-link a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; margin-top: 2px; }
.campo-link { margin: 0; }

/* ---------- Entrada e senha ---------- */
.tela-entrada { min-height: 100vh; display: grid; place-items: center; padding: var(--e-6) var(--e-4); }
.entrada { width: 100%; max-width: 400px; }
.entrada-marca { margin: 0 0 var(--e-8); }
.entrada-marca img { width: 200px; height: auto; }
.entrada h1 { font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; }
.entrada .subtitulo { margin-bottom: var(--e-6); }
.entrada .grupo-form { margin-bottom: var(--e-4); }
.campo-senha { display: flex; gap: var(--e-2); align-items: center; }
.campo-senha input { flex: 1; min-width: 0; }
.botao-largo { width: 100%; min-height: 44px; font-size: 15px; }
.esqueci { color: var(--texto-2); font-size: 14px; padding: 0 var(--e-1); }
.esqueci summary { cursor: pointer; color: var(--acento); font-weight: 500; min-height: 32px; display: flex; align-items: center; }
.esqueci p { margin-top: var(--e-1); }
.entrada-dica { padding: 0 var(--e-1); }

/* ---------- Link de convite ---------- */
.convite { display: grid; gap: var(--e-2); }
.convite input { width: 100%; min-height: 38px; border: 1px solid var(--linha-forte); border-radius: var(--r-1); background: var(--superficie-2); padding: var(--e-2) var(--e-3); font-size: 13px; }

/* ---------- Telas menores ---------- */
@media (max-width: 1100px) {
  .colunas, .agenda-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumo > a:nth-child(3) { border-left: 0; }
  .resumo > a:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .colunas-iguais { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw);
    transform: translateX(-102%); transition: transform .25s ease; background: var(--superficie);
    box-shadow: var(--sombra-xl);
  }
  .casca.menu-aberto .lateral { transform: none; }
  .casca.menu-aberto .fundo-menu { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 25; border: 0; }
  .barra .botao-menu { display: inline-flex; }
  .barra { padding: 0 var(--e-4); }
  .conteudo { padding: var(--e-2) var(--e-4) var(--e-12); }
  .titulo-grande { font-size: 28px; }

  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e-3); }
  .tabela tr:last-child { border-bottom: 0; }
  .tabela td { padding: 0; border: 0; }
  .tabela td.principal-celula { grid-column: 1; grid-row: 1; }
  .tabela td:not(.principal-celula):not(.estado-celula) { grid-column: 1 / -1; }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--texto-2); font-size: 13px; }
  .tabela td.estado-celula { grid-column: 2; grid-row: 1; justify-self: end; }
  .tabela td.estado-celula::before { content: none; }
  .tabela td.opcional { display: none; }
  .tabela .direita { text-align: left; }

  .semana-grade { display: none; }
  .dias-lista { display: block; }
}
@media (max-width: 520px) {
  .campos-2 { grid-template-columns: minmax(0, 1fr); }
  .semana-cabeca h2 { font-size: 17px; }
  .resumo-numero { font-size: 26px; }
  .resumo > a { padding: var(--e-3); }
  .cabeca-acoes { width: 100%; }
  .cadeia { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--e-4)) var(--e-6); padding: 0 var(--e-4) var(--e-1); }
  .elo { flex: none; padding: 6px var(--e-3); }
  dialog.folha { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-3) var(--r-3) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}