/* Copiado de arquivoLegado/assets/css/styles.css */
/* RPB static view styles */
:root {
  --rpb-50: #DCECE6;
  --rpb-100: #CEF2EF;
  --rpb-200: #B8D973;
  --rpb-300: #8CBF3F;
  --rpb-400: #70BF4B;
  --rpb-500: #3CC4CC;
  --rpb-600: #18AD9F;

  --neutral-25: #f8fafc;
  --neutral-50: #f1f5f9;
  --neutral-100: #e2e8f0;
  --neutral-200: #cbd5e1;
  --neutral-300: #94a3b8;
  --neutral-400: #64748b;
  --neutral-500: #475569;
  --neutral-600: #334155;
  --neutral-700: #1e293b;
  --neutral-800: #0f172a;
  --danger: #dc2626;
  --success: #15803d;

  --background: linear-gradient(135deg, var(--rpb-50) 0%, #ffffff 60%);
  --background-alt: var(--neutral-25);
  --surface: #ffffff;
  --surface-alt: #fdfdfd;
  --text: var(--neutral-700);
  --muted-text: var(--neutral-500);
  --border: rgba(15, 23, 32, 0.12);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--background);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); }
.page-area { padding: var(--space-8) var(--space-7); }

h1, h2, h3 { margin: 0; }
h1 { font-weight: 700; letter-spacing: -0.02em; }
h2 { font-weight: 600; letter-spacing: -0.01em; }
h3 { font-weight: 600; }
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.12), 0 2px 6px -2px rgba(0,0,0,0.08);
}

/* Buttons */
.btn { 
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: var(--radius-md); font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer; transition: all .2s ease; text-decoration: none;
}
.btn.block { width: 100%; }
.btn-primary { background: var(--rpb-600); color: #fff; border-color: var(--rpb-600); }
.btn-primary:hover { filter: brightness(0.96); box-shadow: 0 4px 10px rgba(0,0,0,0.12); }
.btn-outline { background: transparent; color: var(--rpb-600); border-color: var(--rpb-600); }
.btn-ghost { background: transparent; color: var(--text); }

/* Forms */
label { font-size: 0.9rem; color: var(--muted-text); }
input, select { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; outline: none; }
input:focus, select:focus { border-color: var(--rpb-500); box-shadow: 0 0 0 4px rgba(60, 196, 204, 0.15); }
.error { color: var(--danger); font-size: .85rem; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--neutral-50); color: var(--neutral-600); border: 1px solid var(--neutral-100); font-size: .85rem; }
.badge.success { background: #ecfdf5; color: var(--success); border-color: #d1fae5; }

/* Sidebar */
.sidebar { position: sticky; top: 0; height: 100vh; width: 94px; background: var(--surface); border-right: 1px solid var(--border); display: grid; grid-template-rows: auto 1fr auto; padding: var(--space-4) var(--space-3); }
.logo-slot { display: flex; justify-content: center; padding: var(--space-2) 0; }
.menu-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); }
.icon-item { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); color: var(--muted-text); border: 1px solid transparent; background: transparent; cursor: pointer; position: relative; }
.icon-item:hover { background: var(--neutral-50); }
.icon-item.active { background: var(--rpb-100); color: #0f1720; border-color: var(--border); }
.bottom-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding-bottom: var(--space-2); }
.icon-item[data-tooltip]:hover:before { content: attr(data-tooltip); position: absolute; left: 100%; top: 50%; transform: translateY(-50%) translateX(8px); background: var(--neutral-800); color: #fff; padding: 6px 10px; font-size: 0.7rem; border-radius: var(--radius-md); white-space: nowrap; box-shadow: 0 6px 18px -4px rgba(0,0,0,0.12); }

/* Login & Signup */
.hero { min-height: 100vh; display: grid; place-items: center; padding: var(--space-7) var(--space-4); background: linear-gradient(145deg, #ffffff 0%, var(--rpb-50) 45%, var(--rpb-100) 100%); }
.auth-container { width: 100%; max-width: 460px; }
.auth-card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.center { text-align: center; }
.hint { margin-top: 4px; font-size: .8rem; color: var(--muted-text); }

/* Content grids */
.accounts-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.loans-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.contract-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-alt); }

/* Dark mode */
.dark { --background: linear-gradient(145deg, var(--neutral-800) 0%, var(--neutral-700) 60%); --background-alt: var(--neutral-700); --surface: var(--neutral-800); --surface-alt: var(--neutral-700); --text: #f1f5f9; --muted-text: var(--neutral-300); --border: rgba(255,255,255,0.08); }
.dark .icon-item[data-tooltip]:hover:before { background: var(--neutral-700); }