/* Libras Vox no navegador (versão de teste). O app.css é cópia sem mudanças de static/app.css;
   aqui fica só o que a página web tem a mais e as cores do site (layout D: claro D1 por padrão, escuro "D1 à noite").
   Marca: marca/MANUAL-DA-MARCA.md. Vermelho, laranja, amarelo e verde ficam só para os alertas. */

/* letras da marca, da pasta fontes/ do site (nada vai para o Google Fonts) */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fontes/atkinson-hyperlegible-next-latin-wght-normal.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: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fontes/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fontes/atkinson-hyperlegible-mono-latin-wght-normal.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: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fontes/atkinson-hyperlegible-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- cores do site (D1)
   O index.html marca data-tema="claro" (ou "escuro"): assim o tema automático do app.css não entra,
   e vale a escolha do botão "Modo escuro" do site (librasvox-modo). */
:root[data-tema="claro"] {
  --fundo: #F5F8FE; --superficie: #FFFFFF; --superficie-2: #F5F8FE; --tinta: #0D1830; --tinta-suave: #3B4763;
  --linha: #D3DDF3; --azul: #1F56C9; --azul-forte: #17419A; --sobre-azul: #FFFFFF; --azul-claro: #DFE8FB;
  --ciano: #139BD0; --parcial: #3B4763;
  --botao: #1F56C9; --botao-texto: #FFFFFF; --botao-hover: #17419A;
  --faixa-fundo: #DFE8FB; --faixa-texto: #0D1830; --faixa-borda: #A9C0EE;
  --logo-libras: #0D1830; --logo-vox: #1F56C9;
  --sombra: 0 1px 2px rgba(13, 24, 48, .06), 0 8px 24px rgba(13, 24, 48, .07);
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --fundo: #0D1830; --superficie: #0A1430; --superficie-2: #16294F; --tinta: #EEF3FC; --tinta-suave: #C5D1EA;
  --linha: #2E4372; --azul: #8DB0F7; --azul-forte: #B9CEFB; --sobre-azul: #FFFFFF; --azul-claro: #1D3260;
  --ciano: #8FE3FF; --parcial: #C5D1EA;
  --botao: #2B63D7; --botao-texto: #FFFFFF; --botao-hover: #1F56C9;
  --faixa-fundo: #1D3260; --faixa-texto: #EEF3FC; --faixa-borda: #5F86D6;
  --logo-libras: #FFFFFF; --logo-vox: #8FE3FF;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* botões cheios como os do site: Azul Setembro com texto branco (no escuro, um azul um pouco mais claro) */
.ouvir, .falar, .msg.digitado { background: var(--botao); color: var(--botao-texto); }
.ouvir:hover, .falar:hover { background: var(--botao-hover); }
.botao-topo.flutuante[aria-pressed="true"] { background: var(--botao); border-color: var(--botao); color: var(--botao-texto); }

/* ---------------------------------------------------------------- faixa de teste, no alto */
.app { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.faixa-teste { grid-row: 1; }
.topo { grid-row: 2; }
.aviso { grid-row: 3; }
.corpo { grid-row: 4; }
.painel { grid-row: 5; }
.faixa-teste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: var(--faixa-fundo); color: var(--faixa-texto); border-bottom: 1px solid var(--faixa-borda);
  font-size: 15px; line-height: 1.4; text-align: center;
}
.faixa-teste p { margin: 0; max-width: 62rem; }
.faixa-curta { display: none; }
/* o programa para Windows é o extra: botão de contorno, não cheio (o principal é usar aqui) */
.faixa-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px;
  border: 2px solid var(--azul); color: var(--azul); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.faixa-link:hover { background: var(--superficie); }
.topo { padding-top: 10px; } /* a faixa já cuida da área do entalhe do celular */

/* ---------------------------------------------------------------- topo: o logo do site (quadrado azul) */
.marca { border-radius: 8px; text-decoration: none; }
.marca .logo { display: block; width: auto; height: 30px; aspect-ratio: 609 / 120; }
.logo .lv-quadrado { fill: #1F56C9; }
.logo .lv-libras { fill: var(--logo-libras); }
.logo .lv-vox { fill: var(--logo-vox); }
.botao-topo svg.icone-sol { display: none; }
:root[data-tema="escuro"] .botao-topo svg.icone-lua { display: none; }
:root[data-tema="escuro"] .botao-topo svg.icone-sol { display: inline; }

/* estados com as cores da marca, não com as cores de alerta */
.ponto { background: var(--tinta-suave); }
.status[data-estado="ok"] .ponto { background: var(--azul); }
.status[data-estado="carregando"] .ponto { background: var(--azul); animation: piscar 1s infinite alternate; }
.status[data-estado="erro"] .ponto { background: transparent; box-shadow: inset 0 0 0 2px var(--tinta); }
/* o estado do Whisper no topo é um botão: abre os Ajustes em "Transcrição (Whisper)" */
button.status { font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; }
button.status:hover { border-color: var(--azul); color: var(--tinta); }
button.status:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
/* o modelo e o motor, nos Ajustes */
.motor-ajustes { margin: 10px 0 6px; }
/* os estados no painel (computador ligado, celulares, YouTube): a caixa some quando nenhum aparece */
.estados-painel:not(:has(> :not([hidden]))) { display: none; }
.aviso { background: var(--azul-claro); border-left: 6px solid var(--azul); }
.ouvir .anel { border-color: var(--ciano); }
.ouvir[data-estado="ouvindo"], .ouvir[data-estado="ouvindo"]:hover { background: var(--tinta); color: var(--superficie); }
.fonte { flex-basis: 200px; }

/* download do modelo */
.carga { display: flex; align-items: center; gap: 12px; }
.carga-barra { flex: 1; height: 10px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha); overflow: hidden; }
.carga-barra span { display: block; height: 100%; width: 0; background: var(--botao); transition: width .2s; }
.carga-texto { font-family: var(--mono); font-size: 13px; color: var(--tinta-suave); white-space: nowrap; }

/* medida de tempo (só em teste: ?medir=1 ou no PC de quem desenvolve): discreta, centralizada */
.msg.medida { align-self: center; align-items: center; text-align: center; }
.msg.medida .texto { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--tinta-suave); line-height: 1.5; }
.vazio .nota-vazio { font-size: 16px; }

/* arrastar um arquivo para a página */
.conversa.soltar { outline: 3px dashed var(--azul); outline-offset: -10px; }

/* celular: "Escutar" e a fonte na mesma linha; o modelo fica nos Ajustes e o estado do motor aparece no topo */
@media (max-width: 560px) {
  /* celular: a faixa vira um parágrafo só, com o link no fim, para sobrar tela para a conversa */
  .faixa-teste { display: block; font-size: 14px; text-align: left; }
  .faixa-teste p.faixa-curta { display: inline; }
  .faixa-teste p.faixa-longa { display: none; }
  .faixa-link {
    display: inline; min-height: 0; padding: 0; margin-left: 4px; border: 0; border-radius: 0;
    text-decoration: underline; white-space: normal;
  }
  .faixa-link:hover { background: none; }
  .marca .logo { height: 24px; } /* 122 px de largura: o mínimo do manual é 120 */
  .linha-ouvir { gap: 8px 10px; }
  .linha-ouvir .fonte { flex: 1 1 150px; }
  .linha-ouvir .motor-info { display: none; }
}
@media (max-width: 420px) {
  .botao-topo.flutuante { display: none; } /* a janela flutuante não existe no celular */
  .botao-topo { min-width: 38px; } /* cabem A−, A+, modo e Ajustes ao lado do logo em 360 px */
}

/* "Lendo o vídeo do YouTube no Chrome" (Conector), com o botão Desligar ao lado */
.janela-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* "Transcrever sem tocar o som neste PC" (só com o som de uma aba, no Chrome e no Edge) */
.fonte-opcao { display: flex; align-items: center; gap: 8px; align-self: end; min-height: 44px; font-weight: 700; font-size: 15px; cursor: pointer; }
.fonte-opcao input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--azul); }
.janela-estado .mini { height: 28px; padding: 0 10px; font-size: 13px; }

/* "Onde você está agora?": o visual fica em lugar.css; aqui só o topo da versão web em 360 px */
@media (max-width: 420px) {
  /* para o lugar caber em 360 px: o ponto de estado sai do topo (continua para os leitores de tela; o "Escutar" mostra
     "Abrindo…" e a barra mostra o download) */
  .acoes-topo { gap: 4px; }
  .topo .status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* conta: no celular só o ícone; na tela bem estreita, só dentro de Ajustes */
.botao-topo.conta { text-decoration: none; color: inherit; }
.ajustes a.secundario { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
@media (max-width: 560px) { .botao-topo.conta span { display: none; } }
@media (max-width: 420px) { .botao-topo.conta { display: none; } }

/* ---------------------------------------------------------------- Ajustes > Meus dados */
.resumo-dados { margin: 0; font-weight: 700; }
.levar-dados, .confirmar-dados { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--linha); }
.confirmar-dados { background: var(--azul-claro); }
.confirmar-dados p { margin: 0; }
#avisoDados:empty { display: none; }
.ajustes .secundario[data-confirmar] { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }

/* ---------------------------------------------------------------- Ajustes > Em breve no navegador */
.em-breve { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.em-breve li { padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linha); line-height: 1.4; }

/* ---------------------------------------------------------------- Ajustes > Ligar ao Libras Vox do computador */
.pc-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pc-link .nota { flex-basis: 100%; margin: 0; }
.pc-link input { flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie-2); font-size: 16px; }
.pc-link input:focus { border-color: var(--azul); outline: none; }
.pc-opcao { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.pc-opcao input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--azul); }
#btnQRCelular { justify-self: start; }
.qr-celular { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 14px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--linha); }
.qr-imagem { width: 196px; height: 196px; flex: none; border-radius: 10px; overflow: hidden; background: #FFFFFF; }
.qr-imagem svg { display: block; width: 100%; height: 100%; }
.qr-texto { display: grid; gap: 10px; flex: 1 1 200px; min-width: 0; }
.qr-texto .nota { margin: 0; }
.qr-link { margin: 0; font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; color: var(--tinta-suave); }
.celulares { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.celulares:empty { display: none; }
.celulares li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linha); }
.celulares .ligado { color: var(--azul); font-weight: 700; }

/* pergunta antes do primeiro download do modelo */
.confirmar-baixar { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--azul-claro); border: 1px solid var(--linha); }
.confirmar-baixar p { margin: 0; font-weight: 600; }
/* a escolha do modelo na primeira vez: tamanho, recomendado, e os que não servem neste aparelho */
.escolha-modelos { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.escolha-modelo { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linha); cursor: pointer; }
.escolha-modelo input { grid-row: span 2; width: 20px; height: 20px; margin: 0; accent-color: var(--azul); }
.escolha-modelo .tamanho { font-weight: 700; color: var(--tinta-suave); white-space: nowrap; }
.escolha-modelo small { grid-column: 2; color: var(--tinta-suave); font-size: 14px; }
.escolha-modelo small:empty { display: none; }
.escolha-modelo.recomendado { border-color: var(--azul); }
.escolha-modelo.recomendado small { color: var(--azul); font-weight: 700; }
.escolha-modelo.bloqueado { opacity: .55; cursor: not-allowed; }

/* a tela de entrada pelo QR do computador: "Ligar este celular ao computador?" */
.entrada-pc { width: min(460px, calc(100vw - 32px)); padding: 24px 22px; border: 0; border-radius: 20px; background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); text-align: center; }
.entrada-pc::backdrop { background: rgb(5 10 20 / .6); }
.entrada-pc h2 { margin: 6px 0 10px; font-size: 24px; line-height: 1.2; }
.entrada-pc p { margin: 0 0 14px; line-height: 1.45; }
.entrada-icone { font-size: 34px; }
.entrada-estado { padding: 12px; border-radius: 12px; background: var(--azul-claro); font-weight: 700; }
.entrada-botoes { display: grid; gap: 10px; margin-top: 6px; }
.entrada-botoes .secundario { justify-self: center; }
.entrada-sim { min-height: 56px; border: 0; border-radius: 14px; background: var(--botao); color: var(--botao-texto); font-size: 20px; font-weight: 800; }
.entrada-sim:hover { background: var(--botao-hover); }
.entrada-sim:disabled { opacity: .6; }