/* ============================================================
   Identidade De Paula / ~TonY — aplicada ao MeuMoney
   Paleta: azul escuro + dourado De Paula #D4B156
   Fontes: Montserrat (titulos) + Raleway (texto), servidas em
   /static/fonts/*.woff2 via fonts.css
   ============================================================ */
@import url("/static/fonts/fonts.css");

:root{
  --bg:#0f172a;
  --panel:#1e293b;
  --panel2:#243449;
  --panel3:#2c3e57;
  --txt:#e2e8f0;
  --muted:#94a3b8;
  --accent:#D4B156;
  --accent-txt:#0f172a;
  --dourado:#D4B156;
  --dourado-escuro:#A48B4C;
  --marinho:#0B1D45;
  --marca:#C4703F;
  --ok:#22c55e;
  --ok-txt:#86efac;
  --bad:#ef4444;
  --bad-txt:#fca5a5;
  --warn:#f59e0b;
  --warn-txt:#fcd34d;
  --border:#334155;
  --fonte-titulo: Montserrat, system-ui, "Segoe UI", sans-serif;
  --fonte-texto:  Raleway,    system-ui, "Segoe UI", sans-serif;
}

/* ============== reset / base ============== */
html, body { background: var(--bg); color: var(--txt); }
body { font-family: var(--fonte-texto); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, button, .font-titulo { font-family: var(--fonte-titulo); letter-spacing: .01em; }

/* ============== cabecalho De Paula ============== */
header.dp-header{
  display:flex; align-items:center; gap:20px; padding:14px 28px;
  background:linear-gradient(90deg,var(--marinho) 0%, #0c3a5e 55%, #0f172a 100%);
  border-bottom:3px solid var(--dourado);
  box-shadow:0 6px 24px -12px rgba(212,177,86,.35);
  position:sticky; top:0; z-index:40;
}
header.dp-header .logo-depaula{ height:52px; width:auto; display:block; flex:none; }
header.dp-header .divisor{
  width:1px; align-self:stretch; margin:4px 0;
  background:linear-gradient(180deg,transparent,var(--dourado),transparent);
}
header.dp-header .titulo{ flex:1; min-width:0; }
header.dp-header h1{
  margin:0; font-family:var(--fonte-titulo); font-size:19px; font-weight:800;
  letter-spacing:.02em; color:#fff;
}
header.dp-header h1 span{ color:var(--dourado); }
header.dp-header p{ margin:4px 0 0; font-size:12.5px; color:var(--muted); }

header.dp-header nav a{
  padding:6px 12px; border-radius:6px; font-size:13px; color:var(--txt); opacity:.85;
}
header.dp-header nav a:hover{ background:rgba(255,255,255,.06); opacity:1; color:#fff; }
header.dp-header nav a.active{ color:var(--dourado); opacity:1; }

@media(max-width:640px){
  header.dp-header{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px 16px; }
  header.dp-header .divisor{ display:none; }
  header.dp-header .logo-depaula{ height:42px; }
}

/* ============== cartoes / superficies ============== */
.card{
  background:var(--panel); border:1px solid var(--border);
  border-top:2px solid rgba(212,177,86,.55); border-radius:12px; padding:20px;
}
.card h2, .card h3{ color:var(--dourado); margin-top:0; }

/* ============== inputs ============== */
input, select, textarea{
  background:var(--panel2); color:var(--txt); border:1px solid var(--border);
  border-radius:6px; padding:8px 12px; font-family:var(--fonte-texto);
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent;
}
input[type="checkbox"], input[type="radio"]{ accent-color: var(--accent); }
label > span { color: var(--muted); font-size: 12.5px; }

/* ============== botoes ============== */
.btn, button[type="submit"], .btn-primary{
  background:var(--accent); color:var(--accent-txt); border:0; border-radius:7px;
  font-family:var(--fonte-titulo); font-weight:600; padding:9px 18px; cursor:pointer;
  transition:filter .15s;
}
.btn:hover, button[type="submit"]:hover{ filter:brightness(1.12); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-secundario{
  background:var(--panel3); color:var(--txt); border:1px solid var(--border);
  border-radius:7px; padding:8px 16px; font-family:var(--fonte-titulo); font-weight:600;
}
.btn-ok{ background:var(--ok); color:#06240d; }
.btn-bad{ background:var(--bad); color:#2a0808; }

/* ============== texto de estado ============== */
.text-ok{ color: var(--ok-txt); }
.text-bad{ color: var(--bad-txt); }
.text-warn{ color: var(--warn-txt); }
.text-muted{ color: var(--muted); }

/* ============== rodape + assinatura ~TonY ============== */
footer.dp-footer{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 24px 22px; margin-top:16px; border-top:1px solid var(--border);
  color:var(--muted); font-size:12px;
}
footer.dp-footer .assinatura{ display:inline-flex; align-items:center; gap:8px; }
footer.dp-footer .logo-tony{ height:19px; width:auto; display:block; color:var(--txt); opacity:.85; transition:opacity .15s; }
footer.dp-footer .assinatura:hover .logo-tony{ opacity:1; }
@media(max-width:700px){ footer.dp-footer{ justify-content:center; text-align:center; } }

/* ============== nav mobile inferior ============== */
.nav-mobile{
  background: var(--panel); border-top:1px solid var(--border);
}
.nav-mobile a{ color: var(--muted); }
.nav-mobile a.active{ color: var(--dourado); }

details > summary { user-select: none; list-style: none; cursor: pointer; }
details[open] > summary::marker { display: none; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* divide colors coerentes com a paleta */
.divide-y > * + * { border-top-color: var(--border) !important; }

/* chips / badges */
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; }
.badge-ok{  background:rgba(34,197,94,.15); color:var(--ok-txt); }
.badge-bad{ background:rgba(239,68,68,.15); color:var(--bad-txt); }
.badge-warn{background:rgba(245,158,11,.15); color:var(--warn-txt); }
.badge-muted{background:rgba(148,163,184,.15); color:var(--muted); }