/* Diário Tolini — visual v1.8 aprovado pelo Sandro (navy / azul elétrico / verde vibrante; sidebar com ícones) */
:root{--bg:#071225;--panel:#0c1d35;--panel2:#102743;--line:#24496c;--ink:#eaf2ff;--muted:#9ab0cf;--blue:#1689ff;--blue2:#4da6ff;
  --green:#00df87;--red:#ff6878;--amber:#f5b83d;--glow:0 0 0 1px #1689ff55,0 6px 24px #0007;--r:14px;color-scheme:dark}
:root[data-tema="claro"]{--bg:#eef4fb;--panel:#fff;--panel2:#f4f8fd;--line:#cfdeee;--ink:#0d2038;--muted:#526c87;--blue:#086dd5;
  --blue2:#086dd5;--green:#078c5a;--red:#cb3146;--amber:#a86b00;--glow:0 0 0 1px #086dd533,0 6px 18px #0d203814;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blue2)}
.oculto{display:none!important}
.mut{color:var(--muted)}.pos{color:var(--green)}.neg{color:var(--red)}.amb{color:var(--amber)}
.num{font-variant-numeric:tabular-nums}

/* ---------- login ---------- */
#login{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 30% 110%,#1689ff33,transparent),var(--bg)}
.cartao-login{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 28px;box-shadow:var(--glow)}
.marca{display:flex;align-items:center;gap:12px}
.marca svg{flex:none}
.marca b{font-size:22px;letter-spacing:.5px;display:block;line-height:1}
.marca span{font-size:13px;color:var(--muted)}
.cartao-login .marca{justify-content:center;margin-bottom:6px}
.cartao-login .sub{text-align:center;color:var(--muted);margin:4px 0 22px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label{font-size:13px;color:var(--muted)}
.entrada{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:none}
.entrada:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1689ff33}
.btn{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:9px 14px;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--blue2)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.btn.pri:hover{filter:brightness(1.1)}
.btn.lg{width:100%;justify-content:center;padding:12px}
.btn.peq{padding:5px 10px;font-size:13px}
.btn:disabled{opacity:.45;cursor:default}
.aviso{font-size:13px;margin:10px 0 0;min-height:18px}
.termos{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);margin:4px 0 14px}

/* ---------- casca ---------- */
#app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.lateral{background:linear-gradient(180deg,#0a1a31,#081426);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
:root[data-tema="claro"] .lateral{background:var(--panel)}
.menu{display:flex;flex-direction:column;gap:4px}
.menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:15.5px}
.menu a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.menu a:hover{background:#ffffff0d}
.menu a.on{background:var(--blue);color:#fff;box-shadow:0 4px 18px #1689ff55}
.menu a .badge{margin-left:auto;background:var(--amber);color:#1a1200;border-radius:10px;font-size:11px;padding:0 7px;font-weight:700}
.quem{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;font-size:13px}
.quem b{display:block;font-size:13px;word-break:break-all}
.principal{padding:18px 22px 40px;min-width:0}
.topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.seletor-dia{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px 6px}
.seletor-dia button{background:none;border:0;padding:6px 10px;border-radius:8px;color:var(--ink)}
.seletor-dia button:hover{background:#ffffff12}
.seletor-dia input{background:none;border:0;color:var(--ink);font-weight:600;width:150px;text-align:center}
.topo h1{font-size:19px;margin:0 auto 0 4px;font-weight:600}
.estado-salvo{font-size:12.5px;color:var(--muted)}
.estado-salvo.erro{color:var(--red)}

/* ---------- blocos ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.card .l{font-size:13px;color:var(--muted)}
.card .v{font-size:24px;font-weight:700;margin-top:4px}
.card .v.txt{font-size:16px;font-weight:600;color:var(--muted)}
.card .s{font-size:12px;color:var(--muted);margin-top:4px}
.barra{height:6px;background:#ffffff14;border-radius:4px;overflow:hidden;margin-top:8px}
.barra i{display:block;height:100%;background:var(--green);border-radius:4px}
.painel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.painel h2{font-size:16.5px;margin:0 0 12px;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.painel h2 .acao{margin-left:auto}
.grade2{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.tabela{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabela th{font-size:12.5px;color:var(--muted);font-weight:500;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.tabela td{padding:11px 10px;border-bottom:1px solid #24496c66;white-space:nowrap}
.tabela tr.op{cursor:pointer}
.tabela tr.op:hover td{background:#1689ff12}
.dir{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.selo{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 10px;font-size:12.5px;font-weight:600;white-space:nowrap}
.selo.ok{background:#00df8724;color:var(--green);border:1px solid #00df8755}
.selo.pend{background:#f5b83d26;color:var(--amber);border:1px solid #f5b83d66}
.selo.aberta{background:#1689ff22;color:var(--blue2);border:1px solid #1689ff66}
.lapis{background:var(--panel2);border:1px solid var(--line);border-radius:9px;width:34px;height:30px;display:grid;place-items:center}
.lapis:hover{border-color:var(--blue2);box-shadow:var(--glow)}
.vazio{color:var(--muted);text-align:center;padding:26px 10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--panel2);border-radius:20px;padding:5px 12px;font-size:13.5px}
.chip.on{background:#1689ff2e;border-color:var(--blue);color:var(--ink)}
.chip.err.on{background:#ff687826;border-color:var(--red)}
.pergunta{margin-bottom:12px}.pergunta b{display:block;font-size:14px;margin-bottom:6px;font-weight:500}
.alerta{border:1px solid #f5b83d66;background:#f5b83d14;border-radius:10px;padding:10px 12px;font-size:13.5px}
.texto{width:100%;min-height:70px;resize:vertical;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
.texto:focus{border-color:var(--blue)}
.linha-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.check{display:flex;gap:8px;align-items:center;font-size:14px;margin:6px 0}

/* ---------- Modo Foco ---------- */
#foco{position:fixed;inset:0;background:#030a16cc;backdrop-filter:blur(3px);z-index:20;display:grid;place-items:start center;padding:20px}
.foco{width:min(1180px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--glow);overflow:hidden}
.foco-topo{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.foco-topo h2{margin:0;font-size:18px;font-weight:600}
.selo-foco{border:1px solid #00df8777;color:var(--green);background:#00df871a;border-radius:20px;padding:3px 12px;font-size:13px}
.foco-topo .dir-direita{margin-left:auto;display:flex;gap:8px;align-items:center}
.abas{display:flex;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);overflow-x:auto}
.abas button{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:8px 16px;white-space:nowrap;display:flex;gap:7px;align-items:center}
.abas button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.foco-corpo{padding:16px 18px;overflow:auto;flex:1}
.foco-pe{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.foco-pe .dir-direita{margin-left:auto;display:flex;gap:8px;align-items:center}
.dados-op{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.dado{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.dado .l{font-size:12px;color:var(--muted)}.dado .v{font-size:17px;font-weight:600}
.modo{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.modo button{border:0;background:var(--panel2);padding:6px 12px;font-size:13px}
.modo button.on{background:var(--blue);color:#fff}
.regua{width:100%;height:150px;background:var(--panel2);border:1px solid var(--line);border-radius:12px}
.tipo-grafico{display:inline-flex;gap:4px;font-size:13px;align-items:center}
.tipo-grafico button{border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:4px 10px}
.tipo-grafico button[disabled]{opacity:.45}
.emo{display:flex;gap:4px}.emo button{width:34px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel2)}
.emo button.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- mês ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .sem{font-size:12px;color:var(--muted);text-align:center}
.cal .d{min-height:78px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:12px;display:flex;flex-direction:column;gap:2px}
.cal .d.tem{cursor:pointer}.cal .d.tem:hover{border-color:var(--blue2)}
.cal .d b{font-size:13px}
.cal .d .rs{font-size:14px;font-weight:700}
.cal .d.fora{opacity:.35}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 16px;box-shadow:var(--glow);z-index:30;font-size:14px}

/* ---------- celular ---------- */
.nav-baixo{display:none}
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  .lateral{display:none}
  .principal{padding:14px 14px 90px}
  .grade2{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .card{padding:10px 12px}.card .v{font-size:19px}
  .topo h1{font-size:16px}
  .nav-baixo{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);z-index:15;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .nav-baixo a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);text-decoration:none;padding:4px 8px;border-radius:8px}
  .nav-baixo a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
  .nav-baixo a.on{color:var(--blue2)}
  #foco{padding:0}
  .foco{max-height:100vh;height:100vh;border-radius:0}
  .tabela .some-cel{display:none}
  .painel{overflow-x:auto}
  .cal .d{min-height:56px;font-size:10.5px}
}