/* Agenda Micas. Tokens do Livro de Regras (Apêndice A) com a marca violeta da Micas geral. */
:root {
  --neutral-950:#080a0e; --neutral-900:#101216; --neutral-850:#15181d; --neutral-800:#24282e;
  --neutral-700:#3c414a; --neutral-600:#525862; --neutral-500:#676e78; --neutral-400:#8b919b;
  --neutral-300:#b9bec6; --neutral-200:#d9dde2; --neutral-100:#f1f3f7;
  /* Marca: violeta (nem o vermelho da DSG, nem o ciano da Indoor) */
  --brand-300:#c3b9ff; --brand-400:#a08fff; --brand-500:#6a52e8; --brand-600:#5a43d6; --brand-900:#221a57; --brand-950:#140f36;
  /* Estados (papel fixo: 400 texto, 500 sólido, 950 fundo tingido) */
  --ok-400:#4fd69c; --ok-950:#0b241a; --aviso-400:#f2c14e; --aviso-950:#2a2108; --perigo-400:#ff7a7f; --perigo-500:#e5484d; --perigo-950:#2e0f12; --info-400:#7cb4ff; --info-950:#0c1a30;
  color-scheme: dark;
  --bg:#08090a; --bg-subtle:#0c0d0e; --surface:#0e0f11; --surface-hover:#141518; --surface-2:#121316;
  --fill:#ffffff05; --fill-hover:#ffffff0a; --fill-active:#ffffff0f;
  --border:#ffffff0d; --border-hover:#ffffff1a; --border-strong:#ffffff33;
  --text:#f7f8f8; --text-muted:#b4bac4; --text-subtle:#8f95a0; --text-disabled:#62666d;
  --accent:var(--brand-500); --accent-hover:var(--brand-600); --accent-text:var(--brand-400); --accent-soft:#6a52e81f; --accent-line:#a08fff59;
  --focus:var(--brand-400); --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px; --space-64:64px;
  --radius-8:8px; --radius-12:12px; --radius-full:9999px; --card-r:20px; --card-pad:24px; --r-in:8px;
  --control-sm:32px; --control-md:40px; --control-lg:48px;
  --container-max:1120px; --page-margin:40px;
  --font-sans:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-h1:300 48px/52px var(--font-sans); --t-h2:300 32px/40px var(--font-sans); --t-h3:400 24px/32px var(--font-sans); --t-h4:400 20px/28px var(--font-sans);
  --t-lead:400 18px/28px var(--font-sans); --t-body:400 16px/24px var(--font-sans); --t-small:400 14px/20px var(--font-sans);
  --ease:cubic-bezier(.25,.46,.45,.94); --ease-out:cubic-bezier(.165,.84,.44,1); --dur-fast:120ms; --dur:200ms; --dur-slow:800ms;
  --nav-h:64px;
}
@media (max-width:1024px) { :root { --t-h1:300 40px/44px var(--font-sans); --t-h2:300 28px/36px var(--font-sans); --card-r:16px; --page-margin:24px; } }
@media (max-width:640px) { :root { --t-h1:300 32px/40px var(--font-sans); --t-h2:300 24px/32px var(--font-sans); --t-h3:400 20px/28px var(--font-sans); --t-lead:400 16px/24px var(--font-sans);
  --page-margin:16px; --card-pad:16px; --space-48:32px; --space-64:48px; } }

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scrollbar-color: var(--neutral-700) var(--bg); scrollbar-width: thin; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--t-body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; min-height: 100svh; display: flex; flex-direction: column; }
b, strong { font-weight: 500; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--neutral-800); border: 2px solid var(--bg); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-600); }
::selection { background: var(--brand-900); color: var(--text); }
h1, h2, h3, h4, p { margin: 0; text-wrap: pretty; }
h1 { font: var(--t-h1); letter-spacing: -0.02em; }
h2 { font: var(--t-h2); letter-spacing: -0.01em; }
h3 { font: var(--t-h3); }
h4 { font: var(--t-h4); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic-16 { width: 16px; height: 16px; }
.muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .small { font: var(--t-small); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- topo e navegação ---------- */
.topo { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); }
.topo-in { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--page-margin); height: var(--nav-h); display: flex; align-items: center; gap: var(--space-24); }
.marca { display: flex; align-items: center; gap: var(--space-12); font-weight: 500; }
.marca-m { width: 32px; height: 32px; border-radius: var(--radius-8); background: var(--accent); color: #fff; display: grid; place-items: center; }
.marca-m svg { width: 18px; height: 18px; }
.abas { display: flex; gap: var(--space-4); margin-left: var(--space-8); }
.aba { height: var(--control-md); padding: 0 var(--space-16); border-radius: var(--radius-8); display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text-subtle); transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.aba:hover { background: var(--fill-hover); color: var(--text); }
.aba[aria-current="page"] { background: var(--fill-active); color: var(--text); }
.topo-acoes { margin-left: auto; display: flex; gap: var(--space-8); align-items: center; }
@media (max-width:767px) {
  .abas { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 10; justify-content: space-around; background: var(--bg-subtle); border-top: 1px solid var(--border); padding: var(--space-8) var(--space-8) calc(var(--space-8) + env(safe-area-inset-bottom)); }
  .aba { flex-direction: column; gap: 2px; height: 52px; padding: 0 var(--space-12); font: var(--t-small); flex: 1; justify-content: center; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .topo-in { gap: var(--space-12); }
}

/* ---------- página ---------- */
main { flex: 1; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: var(--space-40) var(--page-margin) var(--space-64); }
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-32); }
.cab p { margin-top: var(--space-8); }
.eyebrow { font: var(--t-small); color: var(--accent-text); letter-spacing: .02em; margin-bottom: var(--space-8); display: block; }
.grade { display: grid; gap: var(--space-24); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c-12 { grid-column: span 12; } .c-7 { grid-column: span 7; } .c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; } .c-8 { grid-column: span 8; } .c-4 { grid-column: span 4; }
@media (max-width:1024px) { .c-7, .c-5, .c-6, .c-8, .c-4 { grid-column: span 12; } }
@media (max-width:640px) { .cab { flex-direction: column; align-items: center; text-align: center; } main { padding-top: var(--space-24); } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-r); padding: var(--card-pad); min-width: 0; }
.card-cab { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-16); }
.card-cab h2 { font: var(--t-h4); }
.card-cab .ic { color: var(--accent-text); }
.card-cab .conta { margin-left: auto; }
.faixa-marca { background: linear-gradient(180deg, var(--brand-950), var(--surface) 70%); border-color: var(--accent-line); }

/* Foco */
.foco-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-12); counter-reset: foco; }
.foco-item { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-16); align-items: center; padding: var(--space-16); border-radius: calc(var(--card-r) - 8px); background: var(--fill); border: 1px solid var(--border); transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.foco-item:hover { background: var(--fill-hover); border-color: var(--border-hover); }
.foco-n { width: 40px; height: 40px; border-radius: var(--radius-8); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.foco-item h3 { font: var(--t-lead); font-weight: 500; }
.foco-item p { color: var(--text-muted); margin-top: 2px; }
.foco-item .chips { margin-top: var(--space-8); }
.foco-item .seta { color: var(--text-subtle); }
@media (max-width:640px) { .foco-item { grid-template-columns: 32px 1fr; } .foco-n { width: 32px; height: 32px; } .foco-item .seta { display: none; } }

/* Linhas de lista */
.linhas { display: flex; flex-direction: column; }
.linha { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-12) 0; border-top: 1px solid var(--border); min-width: 0; }
.linha:first-child { border-top: 0; padding-top: 0; }
.linha:last-child { padding-bottom: 0; }
.linha .ic { margin-top: 2px; }
.linha-txt { flex: 1; min-width: 0; }
.linha-txt b { font-weight: 500; display: block; overflow-wrap: anywhere; }
.linha-txt span:not(.chip):not(.chips) { color: var(--text-muted); display: block; overflow-wrap: anywhere; }
a.linha-txt:hover b, a.linha:hover b { color: var(--accent-text); }
.linha-fim { flex: none; display: flex; gap: var(--space-8); align-items: center; }
@media (max-width:767px) { .linha:has(> .linha-fim.acoes) { flex-wrap: wrap; } .linha > .linha-fim.acoes { flex: 1 1 100%; padding-left: 32px; } .linha > .linha-fim.acoes .sel { flex: 1; min-width: 0; } }
.vazio { color: var(--text-subtle); display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8) 0; }
.vazio .ic { color: var(--ok-400); }

/* Chips de estado (ícone + fundo tingido + texto na cor) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.chip { height: 28px; padding: 0 var(--space-12) 0 var(--space-8); border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 6px; font: var(--t-small); background: var(--fill-active); color: var(--text-muted); white-space: nowrap; }
.chip .ic { width: 14px; height: 14px; }
.chip.marca { background: var(--accent-soft); color: var(--accent-text); }
.chip.ok { background: var(--ok-950); color: var(--ok-400); }
.chip.aviso { background: var(--aviso-950); color: var(--aviso-400); }
.chip.perigo { background: var(--perigo-950); color: var(--perigo-400); }
.chip.info { background: var(--info-950); color: var(--info-400); }
.n-perigo { color: var(--perigo-400); } .n-aviso { color: var(--aviso-400); } .n-ok { color: var(--ok-400); }

/* Botões e campos: alturas 32 / 40 / 48 */
.btn { height: var(--control-md); padding: 0 var(--space-16); border-radius: var(--radius-8); border: 1px solid var(--border-hover); background: var(--fill); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); cursor: pointer; white-space: nowrap; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.btn:hover { background: var(--fill-hover); border-color: var(--border-strong); }
.btn:active { background: var(--fill-active); }
.btn[disabled] { color: var(--text-disabled); cursor: not-allowed; background: var(--fill); border-color: var(--border); }
.btn-p { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-p:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-p:active { background: var(--brand-600); }
.btn-perigo { color: var(--perigo-400); border-color: #e5484d55; }
.btn-perigo:hover { background: var(--perigo-950); border-color: var(--perigo-500); }
.btn-sm { height: var(--control-sm); padding: 0 var(--space-12); font: var(--t-small); }
.btn-lg { height: var(--control-lg); padding: 0 var(--space-24); }
.btn-ic { width: var(--control-md); padding: 0; }
.btn-sm.btn-ic { width: var(--control-sm); }
.btn-txt { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-txt:hover { background: var(--fill-hover); border-color: transparent; color: var(--text); }
.btn .giro { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: giro .7s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.acoes { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; }
@media (max-width:640px) { .acoes.empilha { flex-direction: column; align-items: stretch; } .acoes.empilha .btn { width: 100%; } }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, .rotulo { font: var(--t-small); color: var(--text-muted); }
.inp { height: var(--control-md); width: 100%; padding: 0 var(--space-12); border-radius: var(--radius-8); border: 1px solid var(--border-hover); background: var(--bg-subtle); color: var(--text); font-size: 16px; transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.inp:hover { border-color: var(--border-strong); }
.inp:focus { border-color: var(--focus); outline: none; }
.inp[aria-invalid="true"] { border-color: var(--perigo-500); }
textarea.inp { height: auto; min-height: 88px; padding: var(--space-8) var(--space-12); resize: vertical; line-height: 24px; }
.erro-campo { color: var(--perigo-400); font: var(--t-small); display: flex; gap: 6px; align-items: center; }
.erro-campo:empty { display: none; }
.form-linha { display: flex; gap: var(--space-8); align-items: flex-end; flex-wrap: wrap; }
.form-linha .campo { flex: 1 1 220px; }
@media (max-width:640px) { .form-linha .btn { width: 100%; } }

/* Select próprio: seta desenhada, cores do tema; lista aberta com base-select onde houver suporte */
.sel { appearance: none; -webkit-appearance: none; height: var(--control-md); padding: 0 40px 0 var(--space-12); border-radius: var(--radius-8); border: 1px solid var(--border-hover); background-color: var(--bg-subtle);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b4bac4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; color: var(--text); font-size: 16px; cursor: pointer; min-width: 0; transition: border-color var(--dur) var(--ease-out); }
.sel:hover { border-color: var(--border-strong); }
.sel option { background: var(--surface); color: var(--text); }
@supports (appearance: base-select) {
  .sel, .sel::picker(select) { appearance: base-select; }
  .sel { background-image: none; display: inline-flex; align-items: center; position: relative; }
  .sel::picker-icon { content: ''; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b4bac4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center; position: absolute; right: 12px; }
  .sel::picker(select) { background: var(--surface-2); border: 1px solid var(--border-hover); border-radius: var(--radius-12); padding: var(--space-4); margin-top: var(--space-4); color: var(--text); }
  .sel option { min-height: var(--control-md); padding: 0 var(--space-12); border-radius: var(--radius-8); background: transparent; display: flex; align-items: center; gap: var(--space-8); transition: background-color var(--dur-fast) var(--ease-out); }
  .sel option:hover, .sel option:focus-visible { background: var(--fill-hover); }
  .sel option:checked { background: var(--accent-soft); color: var(--accent-text); }
  .sel option::checkmark { display: none; }
}

/* Lista de projetos */
.filtros { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-24); }
.filtros .inp { flex: 1 1 220px; width: auto; }
.proj { display: grid; grid-template-columns: minmax(0, 1fr) 132px 120px 24px; gap: var(--space-24); align-items: center; padding: var(--space-16) var(--space-24); border-radius: calc(var(--card-r) - 8px); border: 1px solid var(--border); background: var(--surface); transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.proj + .proj { margin-top: var(--space-8); }
.proj:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.proj h3 { font: var(--t-body); font-weight: 500; display: flex; align-items: center; gap: var(--space-8); overflow-wrap: anywhere; }
.proj p { color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.proj .chips { margin-top: var(--space-8); }
.proj .quando { color: var(--text-subtle); font: var(--t-small); text-align: right; }
.proj .seta { color: var(--text-subtle); }
.pino { color: var(--accent-text); }
@media (max-width:767px) { .proj { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); padding: var(--space-16); } .proj .barras { grid-column: 1 / -1; grid-row: 2; } .proj .seta { display: none; } }
.barras { display: flex; align-items: flex-end; gap: 4px; height: 32px; }
.barras i { flex: 1; min-width: 6px; height: max(3px, calc(var(--h) * 1%)); background: var(--neutral-700); border-radius: 3px; }
.barras i.rec { background: var(--accent); }
.barras i.zero { background: var(--neutral-800); }

/* Projeto */
.det-cab { display: flex; gap: var(--space-16); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--space-32); }
.det-cab .chips { margin-top: var(--space-12); }
.voltar { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text-subtle); margin-bottom: var(--space-16); height: var(--control-sm); }
.voltar:hover { color: var(--text); }
.tarefa { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-12) 0; border-top: 1px solid var(--border); }
.tarefa:first-child { border-top: 0; padding-top: 0; }
.marcar { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--border-strong); background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; margin-top: 0; padding: 0; color: transparent; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.marcar:hover { border-color: var(--accent-text); }
.marcar.feita { background: var(--accent); border-color: var(--accent); color: #fff; }
.tarefa .linha-txt b { font-weight: 400; }
.tarefa.feita .linha-txt b { color: var(--text-subtle); text-decoration: line-through; }
.lista-simples { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-8); }
.lista-simples li { display: flex; gap: var(--space-8); color: var(--text-muted); }
.lista-simples li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); margin-top: 9px; flex: none; }
.cmd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-8); padding: 4px 8px; overflow-wrap: anywhere; }
.hist { display: grid; gap: var(--space-8); }
.hist div { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-12); color: var(--text-muted); }
.hist time { color: var(--text-subtle); font: var(--t-small); padding-top: 2px; }

/* Ajustes */
.ajuste { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) 0; border-top: 1px solid var(--border); }
.ajuste:first-of-type { border-top: 0; }
.ajuste .linha-txt span { font: var(--t-small); }
.troca { position: relative; width: 44px; height: 24px; border-radius: 12px; background: var(--neutral-700); border: 0; cursor: pointer; flex: none; padding: 0; transition: background-color var(--dur) var(--ease-out); }
.troca::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: translate var(--dur) var(--ease-out); }
.troca[aria-checked="true"] { background: var(--accent); }
.troca[aria-checked="true"]::after { translate: 20px 0; }
.segredo { display: flex; gap: var(--space-8); align-items: center; padding: var(--space-12); border-radius: var(--radius-12); background: var(--brand-950); border: 1px solid var(--accent-line); margin-top: var(--space-12); }
.segredo .cmd { flex: 1; background: transparent; border: 0; padding: 0; color: var(--text); }
.codigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); margin: var(--space-12) 0; }
.codigos code { font-family: ui-monospace, Consolas, monospace; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-8); padding: 6px 10px; text-align: center; }
.qr { width: 200px; height: 200px; border-radius: var(--radius-12); background: #fff; padding: 8px; display: block; }

/* Aviso passageiro (só confirmação, com Desfazer) */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); translate: -50% 12px; opacity: 0; z-index: 30; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-12); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16); display: flex; align-items: center; gap: var(--space-12); transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; translate: -50% 0; pointer-events: auto; }
@media (max-width:767px) { .toast { bottom: calc(88px + env(safe-area-inset-bottom)); } }
.alerta { display: flex; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--radius-12); background: var(--perigo-950); color: var(--perigo-400); border: 1px solid #e5484d40; margin-bottom: var(--space-16); }
.alerta.info { background: var(--info-950); color: var(--info-400); border-color: #7cb4ff40; }

/* Diálogo */
dialog { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--card-r); padding: var(--card-pad); width: min(520px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: auto; }
dialog::backdrop { background: #000000b3; }
dialog h2 { font: var(--t-h4); margin-bottom: var(--space-16); }
dialog form { display: grid; gap: var(--space-16); }
dialog .acoes { justify-content: flex-end; margin-top: var(--space-8); }
body:has(dialog[open]) { overflow: hidden; }

/* Carregando e esqueleto */
.carregando { display: grid; gap: var(--space-12); }
.carregando i { height: 72px; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--border); }

/* Rodapé com o crédito da Micas */
.rodape { border-top: 1px solid var(--border); }
.rodape-in { max-width: var(--container-max); margin: 0 auto; padding: var(--space-24) var(--page-margin); display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; color: var(--text-subtle); font: var(--t-small); }
.credito { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text-subtle); transition: color var(--dur) var(--ease-out); }
.credito:hover { color: var(--text); }
.credito-m { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border-hover); border-radius: var(--radius-8); }
.credito-m svg { width: 18px; height: 18px; }
@media (max-width:640px) { .rodape-in { flex-direction: column; text-align: center; } }

/* Modo foco: só o foco do dia fica na tela */
body.modo-foco [data-fora-do-foco] { display: none; }
body.modo-foco .foco-card { grid-column: span 12; }

/* Movimento: um padrão só. Entrada: sobe 12px e aparece, em cascata. */
.rv { opacity: 0; translate: 0 12px; transition: opacity var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.rv.in { opacity: 1; translate: 0 0; }
/* Cursor próprio (só com ponteiro fino; some em link, botão e campo, onde fica o cursor do sistema) */
.cursor { position: fixed; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1.5px solid var(--accent-text); pointer-events: none; z-index: 50; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.cursor::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--accent-text); }
.cursor.on { opacity: 1; }
@media (pointer: fine) { html.cursor-proprio, html.cursor-proprio body { cursor: none; } html.cursor-proprio :is(a, button, input, select, textarea, label, [role="switch"], summary) { cursor: pointer; } html.cursor-proprio :is(input, textarea) { cursor: text; } }
@media (pointer: coarse) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rv { opacity: 1; translate: none; }
  .cursor { display: none; }
}