/* =============================================================================
   Personal AI OS — Portal
   =============================================================================
   Mobile primeiro. O produto existe para ser usado LONGE do computador, então
   o celular é o caso principal — não o adaptado.

   Regras do CLAUDE.md que este arquivo cumpre:
     · área de toque mínima 44×44px
     · texto mínimo 16px nos campos (evita o zoom automático do iOS)
     · contraste mínimo 4.5:1
     · foco sempre visível
     · espaçamento em múltiplos de 4px
   ============================================================================= */

:root {
  --fundo: #0f1115;
  --superficie: #171a21;
  --superficie-alta: #1f232c;
  --borda: #2b303b;
  --texto: #e8eaed;
  --texto-fraco: #9aa3af; /* 4.6:1 sobre --fundo */
  --acento: #4f9cf9;
  --acento-texto: #0b1220;
  --perigo: #ff6b6b;
  --sucesso: #4ade80;
  --alerta: #fbbf24;

  --raio: 10px;
  --toque: 44px;
}

@media (prefers-color-scheme: light) {
  :root {
    --fundo: #f7f8fa;
    --superficie: #ffffff;
    --superficie-alta: #eef1f5;
    --borda: #d7dce4;
    --texto: #12151a;
    --texto-fraco: #59616e; /* 5.9:1 sobre --fundo */
    --acento: #1668d6;
    --acento-texto: #ffffff;
    --perigo: #c0342b;
    --sucesso: #17803d;
    --alerta: #92610a;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Foco visível SEMPRE. Nunca remover sem pôr outra coisa no lugar. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Estrutura ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

header h1 {
  font-size: 17px;
  margin: 0;
  flex: 1;
  font-weight: 600;
}

main {
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 88px; /* espaço para a barra de navegação */
}

h2 {
  font-size: 20px;
  margin: 0 0 4px;
}

.ajuda {
  color: var(--texto-fraco);
  font-size: 14px;
  margin: 0 0 20px;
}

/* ---------- Navegação: barra inferior no celular ---------- */

nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  /* Respeita a área do gesto do iPhone. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

nav button {
  flex: 1;
  min-height: var(--toque);
  padding: 10px 4px;
  background: none;
  border: none;
  color: var(--texto-fraco);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

nav button .icone {
  font-size: 20px;
  line-height: 1;
}

nav button[aria-current="page"] {
  color: var(--acento);
  font-weight: 600;
}

@media (min-width: 768px) {
  nav {
    position: static;
    border-top: none;
    border-bottom: 1px solid var(--borda);
    max-width: 720px;
    margin: 0 auto;
  }
  nav button {
    flex-direction: row;
    font-size: 14px;
    gap: 8px;
  }
  main {
    padding-bottom: 32px;
  }
}

/* ---------- Formulários ---------- */

label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--toque);
  padding: 10px 12px;
  /* 16px NÃO é estética: abaixo disso o iOS dá zoom ao focar o campo. */
  font-size: 16px;
  font-family: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

input:disabled {
  opacity: 0.6;
}

.campo {
  margin-bottom: 16px;
}

.dica {
  font-size: 13px;
  color: var(--texto-fraco);
  margin-top: 6px;
}

/* ---------- Botões ---------- */

button {
  font-family: inherit;
  font-size: 16px;
}

.botao {
  width: 100%;
  min-height: var(--toque);
  padding: 12px 16px;
  border: none;
  border-radius: var(--raio);
  background: var(--acento);
  color: var(--acento-texto);
  font-weight: 600;
  cursor: pointer;
}

.botao:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.botao.secundario {
  background: var(--superficie-alta);
  color: var(--texto);
  border: 1px solid var(--borda);
}

.botao.perigo {
  background: none;
  color: var(--perigo);
  border: 1px solid var(--perigo);
}

.botao-texto {
  background: none;
  border: none;
  color: var(--acento);
  cursor: pointer;
  padding: 12px 4px;
  min-height: var(--toque);
  font-size: 15px;
}

/* ---------- Avisos ---------- */

.aviso {
  padding: 12px 14px;
  border-radius: var(--raio);
  margin-bottom: 16px;
  font-size: 15px;
  border: 1px solid;
}

.aviso.erro {
  color: var(--perigo);
  border-color: var(--perigo);
  background: color-mix(in srgb, var(--perigo) 10%, transparent);
}

.aviso.ok {
  color: var(--sucesso);
  border-color: var(--sucesso);
  background: color-mix(in srgb, var(--sucesso) 10%, transparent);
}

.aviso.atencao {
  color: var(--alerta);
  border-color: var(--alerta);
  background: color-mix(in srgb, var(--alerta) 10%, transparent);
}

/* ---------- Listas ---------- */

.lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.item .corpo {
  flex: 1;
  min-width: 0;
}

.item .titulo {
  font-size: 15px;
  word-break: break-word;
}

.item.feito .titulo {
  text-decoration: line-through;
  color: var(--texto-fraco);
}

.item .meta {
  font-size: 13px;
  color: var(--texto-fraco);
  margin-top: 3px;
}

/* Caixa de marcar: área de toque cheia, mesmo com o desenho pequeno. */
.marcar {
  min-width: var(--toque);
  min-height: var(--toque);
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--texto-fraco);
  padding: 0;
  margin: -4px 0 0 -8px;
}

.marcar[aria-pressed="true"] {
  color: var(--sucesso);
}

/* ---------- Estados ---------- */

.vazio,
.carregando {
  text-align: center;
  padding: 40px 20px;
  color: var(--texto-fraco);
}

.vazio .emoji {
  font-size: 40px;
  display: block;
  margin-bottom: 10px;
}

/* ---------- Etiquetas de status ---------- */

.etiqueta {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
}

.etiqueta.online {
  color: var(--sucesso);
  border-color: var(--sucesso);
}

.etiqueta.offline {
  color: var(--alerta);
  border-color: var(--alerta);
}

.etiqueta.revogado {
  color: var(--perigo);
  border-color: var(--perigo);
}

/* ---------- Código de pareamento ---------- */

.codigo {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 30px;
  letter-spacing: 3px;
  text-align: center;
  padding: 20px 8px;
  background: var(--superficie-alta);
  border-radius: var(--raio);
  margin: 12px 0;
  user-select: all; /* um toque seleciona tudo, para copiar */
  word-break: break-all;
}

.codigos-recuperacao {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 2;
  background: var(--superficie-alta);
  padding: 14px;
  border-radius: var(--raio);
  user-select: all;
}

.oculto {
  display: none !important;
}