/* SolverONE — aparência
   Cores em variáveis: o tema claro/escuro só troca as variáveis.
   Tamanhos em rem para o texto crescer junto com o ajuste do aparelho. */

:root {
  --fundo: #0b1220;
  --fundo-2: #111a2e;
  --cartao: #152037;
  --borda: #26324a;
  --texto: #e6edf7;
  --texto-2: #9fb0c8;
  --cor: #2dd4bf;          /* destaque (verde-água) */
  --cor-texto: #04201c;    /* texto sobre o destaque */
  --perigo: #f87171;
  --ok: #4ade80;
  --raio: 14px;
  --topo-app: 3.5rem;
  color-scheme: dark;
}

/* tema claro: escolhido nas Configurações, ou "igual ao aparelho" com o aparelho claro */
html[data-tema="light"] {
  --fundo: #f5f7fb; --fundo-2: #eef2f8; --cartao: #ffffff; --borda: #d5dce8;
  --texto: #0f1a2b; --texto-2: #4a5a73; --cor: #0f766e; --cor-texto: #ffffff;
  --perigo: #b91c1c; --ok: #15803d;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html[data-tema="system"] {
    --fundo: #f5f7fb; --fundo-2: #eef2f8; --cartao: #ffffff; --borda: #d5dce8;
    --texto: #0f1a2b; --texto-2: #4a5a73; --cor: #0f766e; --cor-texto: #ffffff;
    --perigo: #b91c1c; --ok: #15803d;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html {
  /* a faixa do topo (módulo) e o cabeçalho ficam fixos: o foco do teclado não pode ficar escondido atrás deles */
  scroll-padding-top: calc(var(--dgo-topo, 0px) + var(--topo-app) + 0.5rem);
}
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
a { color: var(--cor); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pular { position: absolute; left: -999px; top: 0; }
.pular:focus { left: 1rem; top: calc(var(--dgo-topo, 0px) + 0.5rem); z-index: 50; background: var(--cor); color: var(--cor-texto); padding: 0.5rem 0.8rem; border-radius: 8px; }

:focus-visible { outline: 3px solid var(--cor); outline-offset: 2px; }

/* ---------- cabeçalho ---------- */
.topo {
  position: sticky;
  top: var(--dgo-topo, 0px);
  z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  min-height: var(--topo-app);
  padding: 0.25rem 0.5rem;
  padding-left: max(0.5rem, env(safe-area-inset-left));
  padding-right: max(0.5rem, env(safe-area-inset-right));
  background: var(--fundo-2);
  border-bottom: 1px solid var(--borda);
}
.topo-esq, .topo-dir { display: flex; align-items: center; gap: 0.15rem; min-width: 0; }
.marca { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; border-radius: 10px; cursor: pointer; font-weight: 800; letter-spacing: 0.01em; min-width: 0; }
.marca img { border-radius: 7px; flex: 0 0 auto; }
.marca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca:hover { background: rgba(127, 127, 127, 0.12); }

.ic {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--texto);
  font-size: 1.2rem; cursor: pointer;
}
.ic:hover { background: rgba(127, 127, 127, 0.15); }
.ic[aria-current="page"] { background: rgba(45, 212, 191, 0.18); }
#bt-idioma { font-size: 0.8rem; font-weight: 800; }
/* o botão PT/EN do app só aparece se o módulo comum não carregar (a faixa do módulo já tem o PT/EN) */
html.dgo-presente .so-dgo-ausente { display: none !important; }

/* celular bem estreito: esconde primeiro o que já existe em outro lugar (menu ☰) */
@media (max-width: 360px) {
  .marca span { display: none; }
  .ic { width: 40px; height: 40px; }
}

/* ---------- menu lateral ---------- */
.fundo-gaveta {
  position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.5);
  animation: aparecer 0.2s ease-out;
}
.gaveta {
  position: fixed; z-index: 41; top: 0; bottom: 0; left: 0;
  width: min(20rem, 86vw);
  padding-top: calc(var(--dgo-topo, 0px) + 0.5rem);
  background: var(--fundo-2); border-right: 1px solid var(--borda);
  overflow-y: auto; /* rola com a barra visível quando não cabe */
  scrollbar-width: thin;
  animation: deslizar 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gaveta-cab { display: flex; align-items: center; justify-content: space-between; padding: 0 0.5rem 0.5rem 1rem; }
.gaveta-lista { list-style: none; margin: 0; padding: 0.25rem 0.5rem 1rem; }
.gaveta-lista button, .gaveta-lista a {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 48px;
  padding: 0.6rem 0.8rem; border: 0; border-radius: 10px; background: transparent;
  color: var(--texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.gaveta-lista button:hover, .gaveta-lista a:hover { background: rgba(127, 127, 127, 0.15); }
@keyframes deslizar { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- telas ---------- */
main { padding: 1rem; padding-bottom: 3rem; max-width: 60rem; margin: 0 auto; outline: none; }
.tela { animation: aparecer 0.18s ease-out; }
.titulo { font-size: 1.5rem; margin: 0.5rem 0 0.25rem; }
h1 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 0.5rem; }
.sub { color: var(--texto-2); margin: 0 0 1rem; }
.dica { color: var(--texto-2); font-size: 0.875rem; margin: 0.4rem 0 0; }

.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.25rem; margin: 0 0 1rem;
}
.estreito { max-width: 28rem; margin: 1rem auto; }

.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; background: var(--fundo-2); padding: 0.25rem; border-radius: 12px; margin: 0.5rem 0 1rem; }
.abas button { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--texto-2); font: inherit; font-weight: 700; cursor: pointer; }
.abas button[aria-selected="true"] { background: var(--cartao); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

.form { display: flex; flex-direction: column; gap: 0.35rem; }
.form label { font-weight: 600; margin-top: 0.5rem; }
input, select {
  width: 100%; min-height: 48px; padding: 0.6rem 0.8rem;
  border: 1px solid var(--borda); border-radius: 10px;
  background: var(--fundo); color: var(--texto); font: inherit; font-size: 1rem;
}
.senha { display: flex; gap: 0.4rem; }
.senha input { flex: 1 1 auto; min-width: 0; }
.mostrar { flex: 0 0 auto; min-width: 5.5rem; border: 1px solid var(--borda); border-radius: 10px; background: transparent; color: var(--texto-2); font: inherit; font-size: 0.875rem; cursor: pointer; }

.bt {
  min-height: 48px; padding: 0.7rem 1.1rem; margin-top: 0.75rem;
  border: 1px solid var(--borda); border-radius: 12px; background: transparent;
  color: var(--texto); font: inherit; font-weight: 700; cursor: pointer;
}
.bt:hover { background: rgba(127, 127, 127, 0.12); }
.bt.principal { background: var(--cor); border-color: var(--cor); color: var(--cor-texto); }
.bt.principal:hover { filter: brightness(1.07); }
.bt[disabled] { opacity: 0.6; cursor: wait; }
.bt.google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0; }
.bt.google .g { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }

.ou { display: flex; align-items: center; gap: 0.75rem; color: var(--texto-2); margin: 1.25rem 0 0.75rem; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

/* quadros do Início: cada um é um botão que leva à tela */
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.quadro {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; text-align: left;
  padding: 1.1rem; border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--cartao); color: var(--texto); font: inherit; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.quadro:hover { border-color: var(--cor); transform: translateY(-1px); }
.quadro span:last-child { color: var(--texto-2); font-size: 0.9rem; }
.quadro-ic { font-size: 1.5rem; }

.dados { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 0 0 0.5rem; }
.dados dt { color: var(--texto-2); }
.dados dd { margin: 0; word-break: break-word; }
@media (max-width: 480px) { .dados { grid-template-columns: 1fr; gap: 0.1rem; } .dados dd { margin-bottom: 0.6rem; } }

.mais summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
#cfg-modulo { margin-top: 0.75rem; }

/* ---------- busca ---------- */
.janela-fundo {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(var(--dgo-topo, 0px) + 1rem) 1rem 1rem;
  animation: aparecer 0.18s ease-out;
}
.janela {
  width: min(34rem, 100%); max-height: 80vh; overflow: auto;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1rem; animation: subir 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.janela-cab { display: flex; align-items: center; justify-content: space-between; }
.janela-cab h2 { margin: 0; font-size: 1.15rem; }
.busca-lista { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.busca-lista button { width: 100%; text-align: left; min-height: 48px; padding: 0.6rem 0.8rem; border: 0; border-radius: 10px; background: transparent; color: var(--texto); font: inherit; cursor: pointer; }
.busca-lista button:hover, .busca-lista button:focus-visible { background: rgba(127, 127, 127, 0.15); }
.busca-lista .nada { color: var(--texto-2); padding: 0.5rem 0.8rem; }

/* ---------- aviso rápido ---------- */
.aviso {
  position: fixed; z-index: 70; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  max-width: min(32rem, calc(100vw - 2rem));
  background: var(--texto); color: var(--fundo);
  padding: 0.75rem 1rem; border-radius: 12px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: subir 0.2s ease-out;
}
.aviso.erro { background: var(--perigo); color: #fff; }

/* destaque rápido ao chegar por uma busca */
.destaque { animation: pisca 1.2s ease-out; }
@keyframes pisca { 0% { box-shadow: 0 0 0 4px var(--cor); } 100% { box-shadow: 0 0 0 0 transparent; } }

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

@media print {
  .topo, .gaveta, .fundo-gaveta, .aviso, .dgo-faixa { display: none !important; }
  body { background: #fff; color: #000; }
  .cartao { border-color: #999; }
}