/* Natto — base: cores e variáveis, entrada (login), topo, conteúdo, categorias, mapa do ano, KPIs e layouts */
:root{
  --bg:#0e1014;--card:#1a1d24;--card-solido:#1a1d24;--texto:#eef1f6;--texto2:#9aa3b2;--destaque:#5fb3d9;--detalhe:#94a3b8;--brilho:#5fb3d9;--extra:#64748b;
  --borda:rgba(61,123,255,.35);--glow:none;--grad:linear-gradient(135deg,#22d3ee,#3d7bff,#7c5cff);--suave:rgba(255,255,255,.1);
  --raio:22px;font-family:Inter,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--bg);color:var(--texto);-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(1100px 560px at 50% -12%,color-mix(in srgb,var(--brilho) 22%,var(--bg)),var(--bg));background-attachment:fixed;overscroll-behavior:none}
html[data-textura="colmeia"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='none' stroke='%2322c55e' stroke-opacity='.08' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E"),radial-gradient(1100px 560px at 50% -12%,color-mix(in srgb,var(--brilho) 18%,var(--bg)),var(--bg))}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
.tela{min-height:100vh}

/* LOGIN */
#tela-login{display:flex;justify-content:center;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 36px) 24px calc(env(safe-area-inset-bottom) + 24px)}
#tela-login .login-box{margin:auto 0}
.login-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;margin-top:6px;font-size:13px}.login-links span{color:var(--texto2);opacity:.6}
.login-box{width:100%;max-width:400px;text-align:center;display:flex;flex-direction:column;gap:14px}
.login-logo{width:104px;height:104px;border-radius:26px;margin:0 auto 6px;box-shadow:0 0 48px color-mix(in srgb,var(--brilho) 55%,transparent)}
.login-titulo{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.025em;font-size:30px;line-height:1.15;margin-bottom:8px}
.login-ou{display:flex;align-items:center;gap:10px;color:var(--texto2);font-size:13px}
.login-ou:before,.login-ou:after{content:"";flex:1;height:1px;background:var(--borda)}
.login-email{display:flex;flex-direction:column;gap:10px}
.login-msg{color:var(--texto2);font-size:14px;min-height:20px}
.link-priv{color:var(--texto2);font-size:12px}
.aviso{background:var(--card);border-radius:14px;padding:12px;font-size:14px;box-shadow:var(--glow)}
input[type=text],input[type=email],input[type=date],input[type=password],input:not([type]),select{width:100%;padding:13px 15px;border-radius:14px;border:1px solid var(--borda);background:color-mix(in srgb,var(--card-solido) 70%,var(--bg));font-size:16px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 18px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--destaque),var(--brilho));color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.btn-branco{background:#fff;color:#1f1f1f}
.btn-sec{background:transparent;color:var(--texto);box-shadow:0 0 0 1px var(--borda) inset}
.btn-wpp{background:#1fae5b}
.btn-sair{background:transparent;color:#ff6b8b;box-shadow:none}
.btn:active{transform:scale(.98)}
a.btn{text-decoration:none}
html,body,a,button,input,select,textarea,label,.card{touch-action:manipulation}
.selo{font-size:11px;letter-spacing:.14em;color:var(--detalhe);font-weight:600;text-transform:uppercase}

/* TOPO */
.topo{position:sticky;top:0;z-index:5;display:flex;align-items:flex-start;gap:12px;padding:calc(env(safe-area-inset-top) + 10px) 16px 12px;background:var(--bg);box-shadow:0 10px 16px -6px var(--bg)}
.topo-txt{flex:1;min-width:0}
.titulo{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.025em;font-size:26px;line-height:1.12;margin-top:4px;overflow-wrap:anywhere}
.sub0{color:var(--texto2);font-size:13px;margin-top:2px}
.sub0 b{color:var(--texto)}
.topo-ctl{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.linha-ctl{display:flex;gap:8px}
#sel-mes{width:auto;padding:9px 12px;font-size:14px;max-width:180px}
.icone-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--borda);background:color-mix(in srgb,var(--card-solido) 70%,var(--bg));display:grid;place-items:center;flex:none;cursor:pointer}
.icone-btn.on{background:var(--destaque);color:#fff}
.pill{padding:6px 12px;border-radius:999px;border:1px solid var(--borda);background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.pill.on{background:var(--destaque);border-color:transparent;color:#fff}

/* CONTEÚDO */
main{padding:2px 16px calc(170px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto}
.pagina{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.pagina>*{grid-column:1/-1}
.pagina>.meia{grid-column:span 1}
.card{background:var(--card);border-radius:var(--raio);padding:16px;box-shadow:var(--glow);min-width:0;position:relative}
html[data-estilo="vidro"] .card{backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--borda)}
html[data-degrade="1"] .card.cor{background:linear-gradient(135deg,var(--destaque),var(--detalhe))}
html[data-degrade="1"] .card.cor:nth-of-type(3n){background:linear-gradient(135deg,var(--brilho),var(--extra))}
.card h3{font-size:16px;font-weight:600;margin-bottom:10px}
.card .dir{position:absolute;right:16px;top:17px;color:var(--texto2);font-size:12px}
.card-data{background:linear-gradient(140deg,var(--detalhe),var(--destaque) 55%,var(--brilho));color:#fff;overflow:hidden;display:flex;flex-direction:column;min-height:170px}
.card-data:after{content:"";position:absolute;right:-8px;top:0;bottom:0;width:48%;background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);background-size:20px 20px;opacity:.55;pointer-events:none}
.data-dia{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;font-size:27px;line-height:1.05;position:relative;z-index:1}
.data-sem{opacity:.92;margin-top:3px;position:relative;z-index:1}
.data-falta{margin-top:auto;border:1.5px solid rgba(255,255,255,.75);border-radius:12px;padding:7px 11px;align-self:flex-start;position:relative;z-index:1;font-size:12px;display:flex;flex-direction:column}
.data-falta b{font-size:18px}
.grande{font-size:30px;font-weight:800;letter-spacing:-.02em}
.grande.pos{color:#3be3a0}
.sub{color:var(--texto2);font-size:13px;margin-top:4px}
.legenda{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;margin-top:10px;color:var(--texto2)}
.legenda i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.centro{display:grid;place-items:center}
.graf svg{width:100%;height:auto;display:block}
.lista{list-style:none;display:flex;flex-direction:column}
.lista li{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--suave)}
.lista li:first-child{border-top:0}
.li-txt{flex:1;min-width:0}
.li-txt b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-txt small{color:var(--texto2);font-size:12px}
.li-val{font-weight:700;white-space:nowrap}
.li-val.pos{color:#3be3a0}
.li-acoes{display:flex}
.li-acoes button{background:none;border:0;padding:6px;border-radius:10px;cursor:pointer;color:var(--texto2)}
.li-acoes svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.vazio{color:var(--texto2);font-size:14px;padding:6px 0}
/* tiles de categoria */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.tile{display:flex;gap:10px;align-items:flex-start;min-width:0}
.tile .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px var(--borda) inset;color:var(--texto)}
.tile .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile b{display:block;font-size:14px;font-weight:600;line-height:1.2}
.tile small{color:var(--texto2);font-size:12px}
.barra-cat{margin:9px 0}
.barra-cat .bc-top{display:flex;justify-content:space-between;gap:8px;font-size:14px;margin-bottom:5px}
.barra-cat .bc-fundo{height:9px;border-radius:6px;background:var(--suave);overflow:hidden}
.barra-cat .bc-fill{height:100%;background:linear-gradient(90deg,var(--destaque),var(--brilho));border-radius:6px}
/* mapa do ano (pontinhos) */
.mapa{display:grid;grid-template-columns:14px repeat(31,1fr);gap:3px;align-items:center;font-size:9px;color:var(--texto2)}
.mapa i{display:block;aspect-ratio:1;border-radius:50%;background:var(--suave)}
.mapa i.n1{background:color-mix(in srgb,var(--destaque) 45%,transparent)}
.mapa i.n2{background:color-mix(in srgb,var(--destaque) 75%,transparent)}
.mapa i.n3{background:var(--destaque);box-shadow:0 0 6px var(--destaque)}
.mapa i.hoje{outline:2px solid var(--detalhe);outline-offset:1px}
.mapa i.fora{visibility:hidden}
.rodape{display:flex;justify-content:space-between;color:var(--texto2);font-size:12px;margin-top:10px}
.rodape b{color:var(--texto)}
/* KPIs */
.kpi{display:flex;flex-direction:column;gap:4px;min-height:96px}
.kpi span{color:var(--texto2);font-size:12px}
.kpi b{font-size:24px;font-weight:800;letter-spacing:-.02em}
.kpi.forte{background:linear-gradient(135deg,var(--destaque),var(--brilho));color:#fff}
.kpi.forte span{color:rgba(255,255,255,.85)}
.tabela{width:100%;border-collapse:collapse;font-size:13px}
.tabela th{color:var(--texto2);font-weight:500;text-align:left;padding:6px 4px;border-bottom:1px solid var(--suave)}
.tabela td{padding:8px 4px;border-bottom:1px solid var(--suave)}
.tabela .n{text-align:right}
.dica{padding:12px;border-radius:14px;background:var(--suave);margin-top:10px}
.dica b{color:var(--detalhe);display:block;margin-bottom:4px;font-size:14px}
.dica p{font-size:13px;color:var(--texto2);line-height:1.45}
.frase-mes{font-size:15px;line-height:1.5}
/* layouts */
html[data-layout="blocos"] .pagina[data-pag="inicio"] .card{border-radius:16px}
html[data-layout="relatorio"] .pagina[data-pag="inicio"] .card{border-radius:12px}
html[data-layout="purpura"] .pagina[data-pag="inicio"] .kpi:nth-child(3n+1){background:var(--destaque);color:#fff}
html[data-layout="purpura"] .pagina[data-pag="inicio"] .kpi:nth-child(3n+2){background:var(--detalhe);color:#111}
html[data-layout="purpura"] .pagina[data-pag="inicio"] .kpi:nth-child(3n){background:var(--extra);color:#111}
html[data-layout="purpura"] .pagina[data-pag="inicio"] .kpi span{color:inherit;opacity:.8}