/* ============================================================================
 * shared/css/app.css — a aparência inteira do ME LEMBRA.
 * ----------------------------------------------------------------------------
 * Um arquivo só, organizado de fora para dentro: variáveis → casca → calendário
 * → cartões → botões → conversa → formulários.
 *
 * Quatro decisões que explicam quase todo o resto:
 *
 *  1. TEMA ESCURO por padrão. O app é aberto de manhã cedo, à noite e no meio da
 *     rua — e a maior parte das aberturas vem de uma notificação, com a tela já
 *     no brilho baixo.
 *  2. ALVOS GRANDES. Todo botão de resposta tem no mínimo 48px de altura. O uso
 *     típico é com uma mão só, andando, respondendo a uma cobrança.
 *  3. `env(safe-area-inset-*)` em tudo que encosta na borda. Instalado no iPhone
 *     não existe barra do navegador para proteger do notch e da barra inferior.
 *  4. NADA PODE TRANSBORDAR NA HORIZONTAL. Numa página que rola de lado, o
 *     `1fr` do calendário passa a medir a largura do conteúdo transbordado, não
 *     a da tela — e a grade sai do visor. Por isso os cortes de segurança da
 *     seção logo abaixo: eles não são enfeite, são o que mantém o app dentro do
 *     iPhone.
 *
 * Tipografia: Montserrat em tudo, um peso por função (400 corpo, 500 rótulo,
 * 600 título, 700 número). Carregada no index.html.
 * ========================================================================== */

:root {
  --fundo:        #0e1117;
  --superficie:   #161b25;
  --superficie-2: #1e2530;
  --borda:        #2a3240;
  --borda-suave:  #212936;
  --texto:        #e8edf5;
  --texto-fraco:  #97a3b6;
  --acento:       #2f9bff;   /* azul dos balõezinhos do calendário */
  --acento-fraco: rgba(47, 155, 255, .12);
  --ok:           #2fd07a;
  --alerta:       #ffb020;
  --perigo:       #ff5f56;
  --raio:         14px;
  --sombra:       0 6px 24px rgba(0, 0, 0, .35);
  --fonte:        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  width: 100%; max-width: 100%; overflow-x: hidden;   /* corte de segurança 1 */
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px; line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Corte de segurança 2: um texto longo sem espaço (um link, um e-mail, um id)
   é o que mais empurra a página para o lado. Ele quebra, sempre. */
p, span, div, li, h1, h2, h3, td { overflow-wrap: anywhere; }

/* Corte de segurança 3: filho de grid/flex tem min-width automático igual ao
   conteúdo. Zerar isso é o que permite a célula encolher junto com a tela. */
.cal-grade > *, .botoes > *, .cartao > *, #rodape > * { min-width: 0; }

img, svg, pre, textarea, video { max-width: 100%; }

/* ── Casca ───────────────────────────────────────────────────────────────── */

#topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14, 17, 23, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda-suave);
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  display: flex; align-items: center; gap: 12px;
}
#topo h1 {
  font-size: 15px; margin: 0; font-weight: 700;
  letter-spacing: 1.2px; flex: 1; line-height: 1.3;
}
#topo .sub {
  font-size: 12px; color: var(--texto-fraco);
  font-weight: 500; letter-spacing: .2px;
}

#tela {
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 100px);
}

#rodape {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  background: rgba(14, 17, 23, .95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--borda-suave);
  padding: 6px 4px calc(env(safe-area-inset-bottom) + 6px);
  display: flex;
}
#rodape button {
  flex: 1 1 0; background: none; border: 0; color: var(--texto-fraco);
  font-family: var(--fonte); font-size: 10.5px; font-weight: 500; letter-spacing: .2px;
  padding: 6px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: color .15s;
}
#rodape button .ic { display: flex; align-items: center; justify-content: center; }
#rodape button .ic svg { width: 22px; height: 22px; display: block; }
#rodape button .rot { white-space: nowrap; }
#rodape button.ativo { color: var(--acento); }

/* ── Calendário ──────────────────────────────────────────────────────────── */

.cal-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 14px;
}
.cal-topo .mes {
  font-size: 16px; font-weight: 600; text-transform: capitalize;
  letter-spacing: .2px; text-align: center; flex: 1;
}
.cal-topo button {
  flex: 0 0 auto;
  background: var(--superficie); border: 1px solid var(--borda); color: var(--texto);
  width: 38px; height: 38px; border-radius: 10px;
  font-family: var(--fonte); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cal-topo button svg { width: 18px; height: 18px; }

.cal-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));   /* minmax(0,…) = corte 4 */
  gap: 5px; width: 100%;
}
.cal-cab {
  text-align: center; font-size: 10px; color: var(--texto-fraco);
  font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  padding-bottom: 4px; overflow: hidden;
}
.cal-dia {
  position: relative; aspect-ratio: 1; overflow: visible;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cal-dia.vazio { background: transparent; border-color: transparent; cursor: default; }
.cal-dia.passado { color: var(--texto-fraco); }
.cal-dia.hoje { border-color: var(--acento); border-width: 2px; font-weight: 700; }
.cal-dia.escolhido { background: var(--acento); color: #fff; font-weight: 700; }
/* O balãozinho do canto: quantos compromissos o dia tem. Fica DENTRO da célula
   (antes vazava 5px para fora e era ele quem empurrava a página para o lado). */
.cal-dia .bolha {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--acento); color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.cal-dia .bolha.tudo-feito { background: var(--ok); }

/* ── Cartões de compromisso ──────────────────────────────────────────────── */

.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--borda);
  border-radius: var(--raio); padding: 14px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.cartao.p1 { border-left-color: var(--perigo); }
.cartao.p2 { border-left-color: var(--alerta); }
.cartao.p3 { border-left-color: var(--acento); }
.cartao.feito { opacity: .5; }
.cartao.feito .titulo { text-decoration: line-through; }
.cartao .linha { display: flex; align-items: baseline; gap: 8px; }
.cartao .hora {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px;
  flex: 0 0 auto;
}
.cartao .titulo { flex: 1; font-size: 15px; font-weight: 500; }
.cartao .meta {
  margin-top: 6px; font-size: 12px; color: var(--texto-fraco);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
/* Os ícones de categoria dentro do texto: alinham com a linha de base. */
.ico-cat { display: inline-flex; vertical-align: -3px; margin-right: 5px; }
.ico-cat svg { width: 15px; height: 15px; }

.selo {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--superficie-2); color: var(--texto-fraco);
  white-space: nowrap;
}
.selo.atrasado { background: rgba(255, 95, 86, .16); color: var(--perigo); }
.selo.feito    { background: rgba(47, 208, 122, .16); color: var(--ok); }
.selo.risco    { background: rgba(255, 176, 32, .16); color: var(--alerta); }

/* ── Botões ──────────────────────────────────────────────────────────────── */

.botao {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 16px;
  background: var(--superficie-2); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 12px;
  font-family: var(--fonte); font-size: 15px; font-weight: 600;
  letter-spacing: .1px; cursor: pointer; width: 100%;
  transition: transform .08s, background .12s;
}
.botao svg { width: 18px; height: 18px; flex: 0 0 auto; }
.botao:active { transform: scale(.985); }
.botao.principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.botao.bom       { background: rgba(47, 208, 122, .14); border-color: var(--ok); color: var(--ok); }
.botao.aviso     { background: rgba(255, 176, 32, .14); border-color: var(--alerta); color: var(--alerta); }
.botao.perigo    { background: rgba(255, 95, 86, .12); border-color: var(--perigo); color: var(--perigo); }
.botao.fantasma  { background: transparent; }
.botao[disabled] { opacity: .5; pointer-events: none; }
.botoes { display: grid; gap: 8px; margin: 12px 0; }
.botoes.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Barra de anotação (texto + microfone do teclado) ─────────────────────── */

.anotar {
  display: flex; gap: 8px; align-items: flex-end;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 8px; margin-bottom: 16px;
}
.anotar textarea {
  flex: 1; min-width: 0;
  background: transparent; border: 0; color: var(--texto);
  font-family: var(--fonte); font-size: 16px;   /* 16px evita o zoom do iOS */
  font-weight: 400; line-height: 1.45;
  resize: none; outline: none; max-height: 120px; padding: 8px;
}
.anotar button {
  width: 44px; height: 44px; border-radius: 10px; border: 0;
  background: var(--acento); color: #fff; cursor: pointer; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.anotar button svg { width: 19px; height: 19px; }
.dica-mic { font-size: 12px; color: var(--texto-fraco); margin: -10px 4px 16px; }

/* ── Conversa com a IA ───────────────────────────────────────────────────── */

.conversa { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.balao {
  max-width: 85%; padding: 10px 14px; border-radius: 16px;
  font-size: 15px; font-weight: 400; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.balao.ia      { background: var(--superficie); border: 1px solid var(--borda); align-self: flex-start; border-bottom-left-radius: 4px; }
.balao.usuario { background: var(--acento); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.balao.sistema {
  align-self: center; background: transparent; color: var(--texto-fraco);
  font-size: 12px; padding: 2px; text-align: center; max-width: 100%;
}

/* A proposta de alteração: o que a IA quer mudar, e o botão de aplicar. */
.proposta {
  background: var(--acento-fraco); border: 1px solid var(--acento);
  border-radius: 12px; padding: 12px; margin: 8px 0;
}
.proposta .resumo { font-size: 14px; margin-bottom: 10px; }

/* ── Formulários e diversos ──────────────────────────────────────────────── */

label {
  display: block; font-size: 12px; color: var(--texto-fraco);
  font-weight: 600; letter-spacing: .3px; margin: 14px 0 5px;
}
/* 16px em TODO campo de digitação, sem exceção: abaixo disso o Safari do iPhone
   dá zoom sozinho ao focar e o layout inteiro sai do lugar. */
input, select, textarea, button, [contenteditable] {
  font-family: var(--fonte);
  font-size: 16px;
}
input, select, textarea {
  width: 100%; padding: 12px; font-weight: 400;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 10px; outline: none;
  transition: border-color .12s;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397a3b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 38px;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); }
input::placeholder, textarea::placeholder { color: var(--texto-fraco); opacity: .8; }

.secao {
  margin: 24px 0 10px; font-size: 11px; color: var(--texto-fraco);
  font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}
.vazio { text-align: center; color: var(--texto-fraco); padding: 40px 20px; font-size: 15px; }
.painel {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px; margin-bottom: 12px;
}
.painel.destaque { border-color: var(--acento); }
.painel.alerta   { border-color: var(--alerta); }

.recado {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 88px); z-index: 60;
  background: var(--superficie-2); border: 1px solid var(--borda);
  box-shadow: var(--sombra); border-radius: 12px;
  padding: 12px 18px; font-size: 14px; font-weight: 500;
  max-width: 90vw; text-align: center;
  animation: sobe .18s ease-out;
}
.recado.erro { border-color: var(--perigo); }
.recado.bom  { border-color: var(--ok); }
@keyframes sobe { from { opacity: 0; transform: translate(-50%, 10px); } }

.carregando { text-align: center; color: var(--texto-fraco); padding: 30px; }
.rodape-nota { font-size: 12px; color: var(--texto-fraco); text-align: center; margin-top: 24px; }
pre.rascunho {
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px; white-space: pre-wrap; word-break: break-word;
  font-family: var(--fonte); font-size: 14px; margin: 8px 0;
}

/* ── Telas estreitas de verdade (iPhone SE e afins) ──────────────────────── */

@media (max-width: 360px) {
  #tela { padding-left: 12px; padding-right: 12px; }
  .cal-grade { gap: 4px; }
  .cal-dia { font-size: 13px; border-radius: 8px; }
  #rodape button { font-size: 10px; }
  #rodape button .ic svg { width: 20px; height: 20px; }
}