/* Identidade visual: docs/DECISOES.md */
:root {
  --marinho: #1D2B4F;
  --azul: #38466A;
  --dourado: #D9B04A;
  --dourado-escuro: #B8860A;
  --dourado-texto: #7A5C1E;
  --fundo: #EDF0F5;
  --borda: #D7DDE7;
  --borda-caixa: #C9D1DD;
  --filete: #E4E8EF;
  --linha: #7C8AA2;
  --texto: #14233B;
  --discreto: #47566E;
  --claro: #EAF0F8;
  --apagado: #C3CDE0;
  --aviso-fundo: #FBF7EE;
  --aviso-texto: #6B5A33;
  --serifa: Tinos, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--fundo);
  color: var(--texto);
  font-family: Arimo, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--dourado-escuro); outline-offset: 2px; }
h1, h2, p { margin: 0; }
.discreto { font-size: 14px; color: var(--discreto); }

/* Marca */
.marca { color: #FFFFFF; }
.marca-linha { display: flex; align-items: flex-start; gap: 6px; }
.marca-a2p { font-family: var(--serifa); font-size: 32px; font-weight: 700; line-height: 1; }
.marca-mfo { padding: 1px 4px; border-radius: 2px; background: var(--dourado); color: var(--marinho); font-size: 10px; font-weight: 700; }
.marca-sub { margin-top: 4px; font-size: 11px; letter-spacing: 0.2em; color: var(--dourado); }

/* Login */
.login { display: grid; place-items: center; padding: 16px; background: var(--marinho); }
.login-caixa { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 24px; }
.login form { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 8px; background: #FFFFFF; }
.login h1 { font-family: var(--serifa); font-size: 26px; line-height: 1.2; margin-bottom: 4px; }
.login label { font-size: 13px; color: var(--discreto); }
.login input { height: 44px; padding: 0 10px; border: 1px solid #B7C2D2; border-radius: 6px; color: var(--texto); background: #FFFFFF; }
.login button { min-height: 44px; border: 0; border-radius: 6px; background: var(--marinho); color: #FFFFFF; font-weight: 600; }
.erro { font-size: 14px; color: #8A2A12; }

/* Barra */
.barra { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 32px; background: var(--marinho); color: var(--claro); }
.barra-logo { font-family: var(--serifa); font-size: 26px; font-weight: 700; color: #FFFFFF; }
.areas { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 420px; }
.area { min-height: 44px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--claro); font-weight: 600; }
.area[aria-current] { background: var(--dourado); color: var(--marinho); }
.visoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.visoes-rotulo { margin-right: 4px; font-size: 13px; color: var(--apagado); }
.visao { min-height: 44px; padding: 0 12px; border: 1px solid #5A6A8C; border-radius: 4px; background: transparent; color: var(--claro); }
.visao[aria-pressed="true"] { background: var(--claro); border-color: var(--claro); color: var(--marinho); font-weight: 700; }
.barra-usuario { font-size: 13px; }
.sair { min-height: 44px; padding: 0 12px; border: 1px solid var(--apagado); border-radius: 4px; background: transparent; color: var(--claro); }
.ficticios { position: relative; padding: 6px 32px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 13px; }
.nota { position: relative; padding: 0 32px 24px; font-size: 14px; color: var(--aviso-texto); }
.nota:empty { display: none; }

/* Marca-d'água do parceiro */
.marca-dagua { position: absolute; inset: 0; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 96px 32px; padding: 160px 32px 32px; pointer-events: none; color: var(--marinho); opacity: 0.07; transform: rotate(-14deg) scale(1.2); }

/* Conteúdo */
.conteudo { position: relative; padding: 24px 32px; display: flex; flex-direction: column; gap: 20px; }
.topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.topo .titulo, .topo-titulo { flex: 1 1 320px; }
.titulo { font-family: var(--serifa); font-size: 34px; line-height: 1.15; }
.topo-pend { color: #8A2A12; font-weight: 600; }
.topo-cliente { max-width: 44rem; display: flex; flex-direction: column; gap: 8px; }
.familias { display: flex; gap: 4px; padding: 4px; border-radius: 4px; background: #E1E6EE; }
.familia { min-height: 44px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: var(--texto); font-weight: 600; }
.familia[aria-pressed="true"] { background: var(--marinho); color: #FFFFFF; }

.cartao { background: #FFFFFF; border: 1px solid var(--borda); border-radius: 4px; }
.colunas { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.colunas > .organograma, .lista { flex: 999 1 640px; min-width: 0; }
.detalhe, .lateral { flex: 1 1 320px; }
.detalhe { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.detalhe-titulo { font-family: var(--serifa); font-size: 22px; }
.lateral { display: flex; flex-direction: column; gap: 16px; }

/* Organograma */
.organograma { padding: 28px 20px; overflow-x: auto; }
.organograma-area { min-width: 900px; }
.organograma-simples { min-width: 720px; display: flex; flex-direction: column; align-items: center; }
.organograma-simples > .tronco, .organograma-simples > .filhos { width: 100%; }

.filhos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.socios { width: 54%; margin: 0 auto; }
.socio-caixa { padding: 0 12px; }
.holding-caixa { padding: 0 64px; }
.bem-caixa { height: 100%; padding: 0 5px; }
.filho { display: flex; flex-direction: column; }
.filho > .bem-caixa { flex: 1 1 auto; }

/* Cada filho desenha a sua parte da barra, então as linhas sempre se encontram. */
.ramo, .tronco { position: relative; height: 22px; flex: none; }
.tronco { height: 16px; }
.tronco-curto { height: 14px; }
.tronco::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--linha); }
.ramo::before { content: ''; position: absolute; inset: 0; border-top: 1px solid var(--linha); }
.filho:first-child > .ramo::before { left: 50%; border-left: 1px solid var(--linha); border-top-left-radius: 6px; }
.filho:last-child > .ramo::before { right: 50%; border-right: 1px solid var(--linha); border-top-right-radius: 6px; }
.filho:only-child > .ramo::before { right: auto; border-top: 0; border-radius: 0; }
.filho:not(:first-child):not(:last-child) > .ramo::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--linha); }
.socios .ramo::before { border-top: 0; border-bottom: 1px solid var(--linha); }
.socios .filho:first-child > .ramo::before { border-top-left-radius: 0; border-bottom-left-radius: 6px; }
.socios .filho:last-child > .ramo::before { border-top-right-radius: 0; border-bottom-right-radius: 6px; }

.socio, .raiz { padding: 10px 12px; border-radius: 3px; background: var(--marinho); color: #FFFFFF; text-align: center; }
.socio { min-height: 62px; }
.socio-nome { display: block; font-weight: 700; }
.socio-papel { display: block; font-size: 13px; color: var(--apagado); }
.raiz { min-width: 300px; padding: 12px 36px; }
.raiz-rotulo { font-size: 14px; color: var(--apagado); }
.raiz-valor { font-family: var(--serifa); font-size: 32px; font-weight: 700; }

.holding { width: 100%; min-height: 76px; padding: 10px 14px; border: 0; border-radius: 3px; background: var(--azul); color: #FFFFFF; text-align: center; }
.holding[aria-pressed="true"] { outline: 2px solid var(--dourado-escuro); outline-offset: 2px; }
.holding-nome { display: block; font-family: var(--serifa); font-size: 18px; font-weight: 700; }
.holding-tipo { display: block; font-size: 13px; color: #DDE3EE; }
.holding-pend { display: block; font-size: 13px; font-weight: 600; color: #F0D48A; }

.bem { width: 100%; height: 100%; min-height: 136px; padding: 0; border: 1px solid var(--borda-caixa); border-radius: 3px; background: #FFFFFF; color: var(--texto); text-align: left; display: flex; flex-direction: column; }
.bem[aria-pressed="true"] { outline: 2px solid var(--dourado-escuro); outline-offset: 1px; }
.bem-corpo { display: block; flex: 1 1 auto; padding: 10px 10px 8px; }
.bem-tipo { display: block; font-size: 12px; color: var(--discreto); }
.bem-nome { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.bem-valor { display: block; margin-top: 2px; font-family: var(--serifa); font-size: 18px; font-weight: 700; color: var(--marinho); }
.bem-valor-grande { font-size: 26px; }
.bem-rodape { display: block; align-self: stretch; padding: 6px 10px; border-top: 1px solid var(--filete); font-size: 12px; color: var(--discreto); }
.bem-aviso { color: var(--dourado-texto); }
.bem-atraso { color: #8A2A12; font-weight: 700; }

/* Listas */
.lista { padding: 4px 20px; }
.tarefa { width: 100%; min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px 0; border: 0; border-top: 1px solid var(--fundo); background: transparent; color: var(--texto); text-align: left; }
.tarefa:first-child { border-top: 0; }
.tarefa[aria-pressed="true"] .tarefa-titulo { color: var(--dourado-texto); }
.tarefa-titulo { display: block; font-weight: 600; }
.tarefa-prazo { display: block; font-size: 13px; color: var(--discreto); }
.chip { padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; background: #E4EAF3; color: #1E3A5F; }
.chip-atraso { background: #FBE4DD; color: #8A2A12; }
.chip-fora { background: var(--aviso-fundo); color: var(--aviso-texto); }
.classificacao { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--borda); font-size: 14px; }
.acao { min-height: 44px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--marinho); color: #FFFFFF; font-weight: 600; }

/* Quadros */
.quadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.quadro { padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.quadro h2 { font-size: 17px; }
.quadro-alerta { border-color: var(--dourado-escuro); }

@media (max-width: 600px) {
  .barra, .conteudo, .ficticios, .nota { padding-left: 16px; padding-right: 16px; }
  .visoes { margin-left: 0; }
}