/* páginas da plataforma (login, painel, admin) — a app das despesas usa o seu próprio CSS */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--plano); color: var(--ink-1);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45;
}
.conteudo-plataforma { max-width: 1180px; margin: 0 auto; padding: 20px clamp(12px, 3vw, 32px) 60px; }
button, input, select { font: inherit; }
.primario, .fantasma {
  border-radius: 8px; padding: 7px 14px; cursor: pointer; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--ink-1);
}
.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.fantasma { background: transparent; border-color: transparent; color: var(--ink-2); }
.fantasma:hover { border-color: var(--borda); color: var(--ink-1); }
input[type="text"], input[type="email"] {
  color: var(--ink-1); background: transparent; border: 1px solid var(--borda); border-radius: 8px; padding: 7px 10px;
}
:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* tile "Atualizar": só na PWA instalada (no browser há o refresh do próprio browser) */
.ios-celula-atualizar { display: none; }
body.em-pwa .ios-celula-atualizar { display: block; }
/* tile "Atualizar": um botão com o aspeto de uma app; as setas rodam enquanto recarrega */
.ios-app-botao { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.ios-app-botao .ios-icone { transition: transform 0.2s; }
.ios-app-botao.a-rodar .ios-icone svg { animation: atualizar-rodar 0.6s linear infinite; }
@keyframes atualizar-rodar { to { transform: rotate(360deg); } }
/* enquanto recarrega: o cinza vai ganhando azul, cada vez mais sólido, até rebentar no "boom" (depois volta ao cinza) */
.ios-app-botao.a-rodar .ios-icone {
  animation: atualizar-encher 0.85s ease-in forwards;
}
@keyframes atualizar-encher {
  0% { color: #5b6572; box-shadow: 0 0 0 0 transparent; }
  35% { color: color-mix(in oklab, var(--acento) 45%, #5b6572); }
  100% { color: var(--acento); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 35%, transparent), 0 10px 26px -10px color-mix(in oklab, var(--acento) 60%, transparent); }
}

/* "boom" suave depois do refresh: anel a expandir + partículas + chip "Atualizado ✓" (nada disto recebe toques) */
.boom-cap { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.boom-anel {
  position: absolute; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  border: 2.5px solid var(--acento); opacity: 0;
  animation: boom-anel 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes boom-anel { 0% { transform: scale(0.25); opacity: 0.9; } 100% { transform: scale(2.3); opacity: 0; } }
.boom-part {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; opacity: 0;
  animation: boom-part 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes boom-part {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -50px)) scale(0.25); opacity: 0; }
}
.boom-chip {
  position: absolute; transform: translate(-50%, 0); display: inline-flex; align-items: center; gap: 6px;
  background: var(--acento); color: #fff; font-size: 13px; font-weight: 650; letter-spacing: 0.01em;
  padding: 7px 13px; border-radius: 999px; box-shadow: 0 10px 26px -10px color-mix(in oklab, var(--acento) 75%, transparent);
  animation: boom-chip 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes boom-chip {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.6); }
  14% { opacity: 1; transform: translate(-50%, -4px) scale(1.06); }
  22% { transform: translate(-50%, -2px) scale(1); }
  72% { opacity: 1; transform: translate(-50%, -2px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .boom-anel, .boom-part { display: none; }
  .boom-chip { animation: boom-chip-suave 1.6s ease both; }
  @keyframes boom-chip-suave { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
}

/* login — ecrã completo, centrado, pensado para o telemóvel */
.ecra-login .conteudo-plataforma { max-width: none; padding: 0; }
.ecra-login .flash { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 20; max-width: 480px; margin: 0 auto; }
.login-ecra {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box;
}
.login-caixa {
  width: 100%; max-width: 380px; text-align: center;
  background: color-mix(in oklab, var(--superficie) 88%, transparent);
  border: 1px solid var(--borda); border-radius: 22px; padding: 40px 26px 30px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.45);
  animation: login-entrar 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes login-entrar { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.login-marca {
  width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 20px;
  background: var(--acento); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--acento) 70%, transparent);
}
.login-marca svg { width: 34px; height: 34px; }
.login-caixa h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: 0.04em; }
.login-sub { color: var(--ink-2); margin: 0 0 26px; font-size: 13px; }
.btn-google {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 18px; border-radius: 14px; box-sizing: border-box;
  background: var(--ink-1); color: var(--plano); text-decoration: none; font-weight: 600; font-size: 15px;
  transition: opacity 0.15s, transform 0.1s;
}
.btn-google svg { background: #fff; border-radius: 50%; padding: 2px; flex: none; }
.btn-google:hover { opacity: 0.92; }
.btn-google:active { transform: scale(0.985); }
/* estado "a ligar ao Google": spinner no lugar do logótipo, sem duplo toque */
.g-spinner { display: none; width: 17px; height: 17px; flex: none; border: 2px solid color-mix(in oklab, var(--plano) 35%, transparent); border-top-color: var(--plano); border-radius: 50%; animation: g-girar 0.8s linear infinite; }
@keyframes g-girar { to { transform: rotate(360deg); } }
.btn-google.a-ligar { pointer-events: none; opacity: 0.85; }
.btn-google.a-ligar svg { display: none; }
.btn-google.a-ligar .g-spinner { display: inline-block; }
.login-dev { margin: 20px 0 0; font-size: 12px; }
.login-dev a { color: var(--ink-3); }
/* telemóvel: sem cartão — marca grande centrada no ecrã, botão ancorado em baixo (zona do polegar), como uma app nativa */
@media (max-width: 640px) {
  /* ecrã inicial: sem folgas a empurrar para lá do ecrã (nada de scroll morto) */
  body.ecra-inicial .conteudo-plataforma { padding-bottom: 16px; }
  body.ecra-inicial .ecra { padding-bottom: 12px; }
  .login-ecra { padding: 0; align-items: stretch; }
  .login-caixa {
    max-width: none; min-height: 100dvh; display: flex; flex-direction: column;
    background: none; border: none; box-shadow: none; border-radius: 0;
    padding: calc(20px + env(safe-area-inset-top)) 22px calc(48px + env(safe-area-inset-bottom));
  }
  .login-topo { flex: 1; display: grid; place-content: center; justify-items: center; animation: login-entrar 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .login-marca { width: 88px; height: 88px; border-radius: 26px; margin-bottom: 22px; }
  .login-marca svg { width: 44px; height: 44px; }
  .login-caixa h1 { font-size: 34px; letter-spacing: 0.06em; margin-bottom: 8px; }
  .login-sub { font-size: 14px; margin: 0; }
  .login-acoes { animation: login-entrar 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
  .btn-google { min-height: 54px; border-radius: 16px; font-size: 16px; }
  .login-dev { text-align: center; }
}

/* ---------- ecrã inicial e login (estilo telemóvel) ---------- */
body.ecra-inicial, body.ecra-login {
  /* 100dvh: altura real visível no telemóvel (o 100vh do iOS inclui a barra de URL recolhida e criava scroll morto) */
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--plano);
  /* manchas grandes, fracas e com desvanecimento longo — cor ambiente difusa, sem "círculos" visíveis */
  background-image:
    radial-gradient(120% 95% at 8% 0%,  color-mix(in oklab, #c9573b 26%, var(--plano)) 0%, transparent 75%),
    radial-gradient(110% 110% at 100% 25%, color-mix(in oklab, #7fa1c9 20%, var(--plano)) 0%, transparent 78%),
    radial-gradient(130% 100% at 45% 100%, color-mix(in oklab, #1f5f6e 28%, var(--plano)) 0%, transparent 80%),
    linear-gradient(160deg, color-mix(in oklab, #3a1f2a 26%, var(--plano)), var(--plano) 45%, color-mix(in oklab, #0f2f3a 34%, var(--plano)));
  background-attachment: fixed;
}
:root:not([data-theme="dark"]) body.ecra-inicial, :root:not([data-theme="dark"]) body.ecra-login {
  background-image:
    radial-gradient(120% 95% at 8% 0%,  color-mix(in oklab, #f6cfc3 55%, #f4f4f2) 0%, transparent 75%),
    radial-gradient(110% 110% at 100% 25%, color-mix(in oklab, #d7e3f3 50%, #f4f4f2) 0%, transparent 78%),
    radial-gradient(130% 100% at 45% 100%, color-mix(in oklab, #cfe6ea 55%, #f4f4f2) 0%, transparent 80%),
    linear-gradient(160deg, #f3e6e6, #f4f4f2 45%, #e6eef0);
}
.ecra { max-width: 760px; margin: 0 auto; padding: 14px 8px 40px; }

/* cartão "hoje": largo, horas grandes + dia + tempo em Lisboa (se disponível) */
.widget {
  border-radius: 24px; padding: 18px 22px;
  display: flex; align-items: center; gap: 22px; text-decoration: none; color: var(--ink-1);
  background: color-mix(in oklab, var(--superficie) 72%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink-1) 10%, transparent);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.35);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  margin: 0 0 30px; max-width: 560px;
}
.widget-hora { font-size: 52px; font-weight: 650; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.widget-data { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.widget-dia-semana { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.widget-dia-mes { font-size: 17px; font-weight: 600; color: var(--ink-1); }
.widget-mes { color: var(--ink-2); font-weight: 500; }
.widget-tempo { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ink-1); }
.widget-tempo-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--ink-2); }
.widget-tempo-icone svg { width: 36px; height: 36px; }
.widget-tempo-temp { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .widget { padding: 14px 16px; gap: 14px; }
  .widget-hora { font-size: 40px; }
  .widget-dia-mes { font-size: 15px; }
  .widget-tempo-temp { font-size: 20px; }
  .widget-tempo-icone svg { width: 30px; height: 30px; }
}

/* grelha de ícones */
.ios-grelha {
  display: grid;
  grid-template-columns: repeat(4, 62px);   /* como no iPhone: 4 por linha */
  justify-content: space-between; row-gap: 26px;
  max-width: 360px; padding: 0 4px;
}
@media (min-width: 720px) { .ios-grelha { grid-template-columns: repeat(auto-fill, 72px); justify-content: start; gap: 30px 34px; max-width: none; padding: 0; } }
.ios-app {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 100%; text-decoration: none; color: var(--ink-1);
  -webkit-tap-highlight-color: transparent;
}
/* ícone "tintado", como o modo escuro do iOS: vidro escuro com o símbolo na cor da app */
.ios-icone {
  --c: #2a78d6;
  width: 62px; height: 62px; border-radius: 22.5%;
  display: grid; place-items: center; flex: none;
  color: var(--c);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)),
    #2b2b2f;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.10) inset;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
:root:not([data-theme="dark"]) .ios-icone {
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.8) inset;
}
@media (min-width: 720px) { .ios-icone { width: 72px; height: 72px; } }
.ios-icone.svg svg { width: 54%; height: 54%; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
.ios-icone.glifo { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.ios-icone.emoji { font-size: 32px; line-height: 1; }
.ios-app:hover .ios-icone, .ios-app:focus-visible .ios-icone { transform: translateY(-3px) scale(1.04); }
.ios-app:active .ios-icone { transform: scale(0.95); }
.ios-nome {
  font-size: 11.5px; font-weight: 500; text-align: center; line-height: 1.2; letter-spacing: 0.01em;
  max-width: 100%; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root[data-theme="dark"] .ios-nome { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.dica-vazia { color: var(--ink-3); }

/* ================= admin (mobile-first) ================= */
.admin .card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 16px 16px 18px; margin-bottom: 14px; }
.admin h2 { font-size: 16px; margin: 0 0 2px; letter-spacing: -0.01em; }
.card-sub { color: var(--ink-3); font-size: 12.5px; margin: 0 0 14px; }
code { font-size: 12px; background: var(--plano); padding: 1px 5px; border-radius: 4px; }
.mudo { color: var(--ink-3); font-size: 12.5px; }
.tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); border: 1px solid var(--borda); border-radius: 999px; padding: 2px 8px; }
.tag-admin { color: var(--acento); border-color: color-mix(in oklab, var(--acento) 45%, var(--borda)); }
.acoes { display: flex; justify-content: flex-end; margin-top: 14px; }
.oculto { display: none; }
.app-mini-icone { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--c); flex: none; }
.app-mini-icone svg { width: 18px; height: 18px; }

/* botão pequeno consistente para as ações dos cartões */
.btn-mini { font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: transparent; border: 1px solid var(--borda); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.btn-mini:hover { border-color: var(--ink-3); color: var(--ink-1); }
.btn-mini.perigo-sub { color: var(--st-critical); border-color: color-mix(in oklab, var(--st-critical) 30%, var(--borda)); }
.btn-mini.perigo-sub:hover { border-color: var(--st-critical); background: color-mix(in oklab, var(--st-critical) 8%, transparent); }

/* adicionar pessoa */
.add-pessoa { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--grelha); }
.add-pessoa input { width: 100%; }
.add-pessoa .primario { justify-self: end; }
@media (min-width: 620px) {
  .add-pessoa { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; }
  .add-pessoa .primario { grid-column: 1 / -1; justify-self: end; }
}

/* cada pessoa = mini-cartão */
.pessoas-lista { display: flex; flex-direction: column; gap: 14px; }
.pessoa-card { border: 1px solid var(--grelha); border-radius: 12px; padding: 12px 14px; background: var(--bloco-fundo, transparent); }
.pessoa-topo { display: flex; align-items: center; gap: 10px; }
.pessoa-card .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; }
.avatar-vazio { display: grid; place-items: center; background: var(--plano); color: var(--ink-2); font-weight: 700; font-size: 14px; }
.pessoa-nome-form { flex: 1; min-width: 0; margin: 0; }
.pessoa-nome { width: 100%; font-weight: 650; font-size: 15px; }
.pessoa-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 8px 0 0 44px; }
.pessoa-email { font-size: 13px; color: var(--ink-2); word-break: break-all; }
.pessoa-estado { font-size: 12px; color: var(--ink-2); }
.pessoa-estado.mudo { color: var(--ink-3); }
.pessoa-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 44px; }
@media (max-width: 420px) { .pessoa-meta, .pessoa-acoes { margin-left: 0; } }

/* cada app = mini-cartão */
.apps-lista { display: flex; flex-direction: column; gap: 10px; }
.app-card { border: 1px solid var(--grelha); border-radius: 12px; padding: 12px 14px; background: var(--bloco-fundo, transparent); }
.app-card.inativa { opacity: 0.72; }
.app-topo { display: flex; align-items: center; gap: 10px; }
.app-id { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.app-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.app-nome strong { font-size: 14.5px; }
.app-nome .mudo { font-size: 11.5px; }
.app-toggle { margin-left: auto; flex: none; }
.app-pessoas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-1); cursor: pointer; border: 1px solid var(--borda); border-radius: 999px; padding: 6px 12px; transition: border-color 0.15s, background 0.15s; }
.chip-check:has(input:checked) { border-color: var(--acento); background: color-mix(in oklab, var(--acento) 12%, transparent); }
.chip-check input { accent-color: var(--acento); margin: 0; width: 15px; height: 15px; }

/* IA */
.ia-form { display: block; }
.ia-modelos { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .ia-modelos { grid-template-columns: 1fr 1fr; } }
.ia-campo { display: flex; flex-direction: column; gap: 6px; }
.ia-rot { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.ia-rot .mudo { font-weight: 400; }
.ia-form select {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-1); width: 100%;
  background-color: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px 36px 10px 12px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.ia-form select:hover { border-color: var(--eixo); }
.ia-form select:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.aviso-ia { font-size: 12px; color: var(--st-warning, #c98500); }
.ia-gasto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ia-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--grelha); border-radius: 12px; background: var(--bloco-fundo, transparent); }
.ia-kpi strong { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.ia-kpi .mudo { font-size: 11.5px; }
.ia-nota { margin-top: 12px; font-size: 12px; }
.ia-nota a { color: var(--ink-2); }

/* registo de acessos: lista de blocos (sem tabela que não cabe em mobile) */
.log-acessos { display: flex; flex-direction: column; }
.log-acesso { padding: 10px 0; border-bottom: 1px solid var(--grelha); }
.log-acesso:last-child { border-bottom: none; }
.log-l1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.log-evento { font-size: 12px; }
.log-quando { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-l2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; }
.log-quem { font-size: 13px; color: var(--ink-1); word-break: break-all; }
.log-ip { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-det { font-size: 12px; margin-top: 3px; word-break: break-word; }