/* Design system da AyoAyo — fonte única.
 *
 * Antes estas regras viviam duplicadas em templates/hub.html e
 * ayo_read/templates/index.html, e o README pedia "ao mudar num, replique
 * no outro". Só entra aqui o que era idêntico nos dois arquivos; o CSS
 * específico de cada página continua no bloco {% block estilo %} dela.
 *
 * Contraste medido contra WCAG 2.2: corpo em AAA, demais em AA.
 */

:root {
  --tinta: #e9efec;
  --texto-medio: #98a9a2;
  --texto-fraco: #93a49d;
  --papel: #0e1512;
  --cartao: #16201c;
  --destaque: #10ac84;
  --destaque-claro: #1dd1a1;
  --destaque2: #00d2d3;
  --linha: #24352f;
  --linha-forte: #5f7f74;
  --fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "JetBrains Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

::selection { background: var(--destaque); color: #06231b; }

b, strong { font-weight: 600; }

html { scrollbar-width: thin; scrollbar-color: var(--linha-forte) var(--papel); }

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track { background: var(--papel); }

::-webkit-scrollbar-thumb { background: var(--linha); border: 2px solid var(--papel); }

::-webkit-scrollbar-thumb:hover { background: var(--linha-forte); }

.selo {
    font-family: var(--fonte-mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: 3.5px; text-transform: uppercase;
    color: var(--destaque); margin-bottom: 10px;
  }

.selo::before {
    content: ""; display: inline-block; width: 18px; height: 1px;
    background: var(--destaque); margin-right: 9px; vertical-align: 4px;
  }

p.sub { margin: 0 0 28px; color: var(--texto-medio); font-size: 15px; }

.rodape { margin-top: 22px; font-size: 12px; color: var(--texto-fraco); font-family: var(--fonte-mono); }

.autor { margin-top: 10px; font-size: 13px; font-family: var(--fonte-mono); }

.autor a { color: var(--destaque); text-decoration: none; border-bottom: 1px solid var(--linha); }

.autor a:hover { border-color: var(--destaque); }

::view-transition-group(cartao) {
    animation-duration: .45s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  }

::view-transition-old(cartao), ::view-transition-new(cartao) {
    height: 100%; width: 100%; object-fit: cover;
  }

::view-transition-old(cartao) { animation: vtSome .2s ease both; }

::view-transition-new(cartao) { animation: vtSurge .3s ease .12s both; }

@keyframes vtSome  { to   { opacity: 0; } }

@keyframes vtSurge { from { opacity: 0; } }

::view-transition-old(root) { animation: vtSaiRoot .26s ease both; }

::view-transition-new(root) { animation: vtEntraRoot .4s ease both; }

@keyframes vtSaiRoot   { to   { opacity: 0; transform: translateY(-10px); } }

@keyframes vtEntraRoot { from { opacity: 0; transform: translateY(12px); } }

/* Ícones -------------------------------------------------------------------
 * `currentColor` no SVG e `vertical-align` aqui: o ícone acompanha a cor e a
 * linha de base do texto ao lado, inclusive no hover e no foco. Sem o
 * alinhamento, cada ícone senta uns 3 px abaixo da palavra.
 */
.icone { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }

/* Esconde do olho, NAO do leitor de tela. É a mesma técnica do campo de
 * arquivo dos subprojetos, e pelo mesmo motivo: `display: none` tira o
 * elemento da árvore de acessibilidade. Num botão que ficou só com ícone — e
 * ícone é `aria-hidden` — isso deixaria o botão SEM NOME nenhum para quem usa
 * leitor de tela (WCAG 4.1.2). */
.so-leitor {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }

.ilustra { display: block; color: var(--destaque); }

/* Barra de identidade ------------------------------------------------------
 * Aparece no hub e nas telas de conta. Antes dela, /empresas não tinha link em
 * lugar nenhum — só se chegava digitando a URL.
 */
.barra {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 10px 20px; margin-bottom: 26px;
    background: var(--cartao); border: 1px solid var(--linha);
  }

.barra .marca {
    font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px;
    color: var(--tinta); text-decoration: none; letter-spacing: -.02em;
  }

.barra .marca .alt { color: var(--destaque); }

.barra-empresa { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.barra-rotulo {
    font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--texto-medio);
  }

.barra-valor {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: var(--tinta);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

.barra-pendente {
    display: flex; align-items: center; gap: 6px;
    font-size: 13.5px; color: var(--destaque); text-decoration: none;
    border-bottom: 1px dashed var(--destaque); padding-block: 4px;
  }

.barra-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.barra-acoes form { margin: 0; }

.barra-quem {
    font-family: var(--fonte-mono); font-size: 12px; color: var(--texto-medio);
    max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

/* padding-block de 8px: a auditoria mediu a.hub-link em 63 x 18,8 e reprovou
 * pelo WCAG 2.5.8, que pede 24 x 24. Aqui o alvo nasce com 34 de altura. */
.botao-barra {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; cursor: pointer;
    font-family: var(--fonte-corpo); font-size: 13px; font-weight: 500;
    color: var(--texto-medio); background: none;
    border: 1px solid var(--linha-forte); text-decoration: none;
  }

.botao-barra:hover { color: var(--destaque); border-color: var(--destaque); }

.botao-barra:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; }

.botao-barra.destaque { color: var(--destaque); border-color: var(--destaque); }

/* Abaixo de 560 px o nome de quem entrou some antes da empresa ativa: saber em
 * que empresa se está mexendo importa mais do que ler o próprio nome. */
@media (max-width: 560px) {
  .barra { gap: 12px; padding: 10px 14px; }
  .barra-quem { display: none; }
  /* O rótulo sai da tela mas continua no nome acessível do botão. */
  .botao-barra span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .botao-barra { padding: 8px 10px; position: relative; }
}