/* ========================= RESET & BASE ========================= */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:Arial,Helvetica,sans-serif;          /* tipografia padrão */
  background:#f0f4ff;                              /* azul clarinho de fundo */
  color:#1b1e23;                                   /* cinza‑azulado */
  line-height:1.4;
}

/* ========================= VARIÁVEIS =========================== */
:root{
  --bg:#f3f5f7;
  --card:#fff;
  --border:#d1d5db;
  --primary:#0d47a1;   --primary-h:#104fba;
  --danger:#c62828;    --danger-h:#d83b3b;  --danger-light:#ffebee;
  --success:#2e7d32;   --success-light:#d6f5d8;
  --muted:#6c757d;
  --r:6px;            --sh:0 2px 6px rgba(0,0,0,.08);
}

/* ========================= CONTAINER =========================== */
.box{
  max-width:700px;
  margin:24px auto;
  background:var(--card);
  padding:24px;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.box h1{text-align:center;margin-bottom:18px;color:#0d6efd;}

/* ======================  FORMULÁRIO ============================ */
form{display:grid;gap:12px;}
form label{font-weight:600;display:flex;flex-direction:column;}
form input{
  padding:8px 10px;
  border:1px solid #c7d4ff;
  border-radius:4px;
  transition:border-color .2s;
}
form input:focus{outline:none;border-color:#0d6efd;}
form button{
  padding:10px;background:#0d6efd;color:#fff;font-weight:700;border:0;border-radius:4px;cursor:pointer;transition:filter .2s;
}
form button:hover{filter:brightness(.92);}         /* leve escurecido */

/* ========================= RESUMO ============================== */
h2{margin:28px 0 12px;text-align:center;color:#102a52;}
ul.resumo{list-style:none;padding:0;display:grid;gap:6px;}
ul.resumo li{
  background:#e6f2ff;
  padding:8px 12px;
  border-radius:6px;
  display:flex;justify-content:space-between;align-items:center;
}
/* folga destacada */
ul.resumo .folga.ok{background:var(--success-light);color:var(--success);font-weight:700;animation:blink 1s linear infinite;}
ul.resumo .folga.none{background:var(--danger-light);color:var(--danger);font-weight:600;}

@keyframes blink{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ========================= HISTÓRICO =========================== */
/* ========================= HISTÓRICO =========================== */
ul.hist{
  list-style:none;
  padding:0;
  margin-top:0;
  font-size:.9rem;
}

ul.hist li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  padding:4px 8px;
  border-radius:4px;
  background:#e9f2ff;                 /* azul clarinho padrão  */
  border:1px solid #d7e5ff;
}

/* linha abaixo da meta diária */
ul.hist li.below{
  background:#ffe9e9;                 /* rosa clarinho          */
  border-color:#f5caca;
}

/* ⬤ bolinha de meta: verde ou vermelha */
.dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--success);
  flex-shrink:0;
}
.below .dot{background:var(--danger);}

/* bloco “data – valor” não quebra */
.info{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;                            /* ocupa o espaço restante */
}

/* ícone 🔴 / 💰 (depósito) alinhado */
.status{
  font-size:.9rem;
  flex-shrink:0;
  margin-right:4px;
}

/* grupo de botões compacto */
.actions{
  display:flex;
  gap:4px;
  flex-shrink:0;
}

.btn{
  padding:3px 6px;
  border-radius:3px;
  font-size:.75rem;
}

/* ========================= GRÁFICO ============================= */
.grafico-container{position:relative;width:100%;height:260px;margin-top:10px;}
canvas{width:100%!important;height:100%!important;}

/* ======================== RESPONSIVO =========================== */
@media(max-width:480px){
  .box{padding:18px;}
  ul.hist li{font-size:.85rem;}
  .btn{padding:4px 6px;}
}

/* folga “amarela” (opcional) */
ul.resumo .folga.info{
  background:#fff9e6;   /* amarelo claro */
  color:#856404;
  font-weight:600;
}