/* RendaOK — Estilo base para paginas autenticadas
   Reutiliza variaveis e fontes da landing page (public/index.html) */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Geist:wght@300..700&family=Geist+Mono:wght@300..600&family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.36.0/dist/tabler-icons.min.css');

/* Tabler Icons — outline only, padrao 14-15px na nav (§28.0 CLAUDE.md) */
.ti { font-size: 14px; line-height: 1; vertical-align: -2px; }
.ti-lg { font-size: 18px; vertical-align: -3px; }
.ti-sm { font-size: 12px; vertical-align: -1px; }

:root {
  --bg: #FAFAF7;
  --white: #FFF;
  --paper: #F3F1EA;
  --cream: #EAE6DA;
  --ink: #1C1C14;
  --ink-2: rgba(28,28,20,.60);
  --ink-3: rgba(28,28,20,.40);
  --ink-4: rgba(28,28,20,.20);
  --line: rgba(28,28,20,.07);
  --line-2: rgba(28,28,20,.13);
  --green: #1B5E37;
  --green-m: #2D7A4F;
  --green-l: #3D9464;
  --green-soft: #EBF5EE;
  --green-deep: #0F3D22;
  --amber: #C2650A;
  --amber-m: #E07B12;
  --amber-soft: #FEF3E2;
  --red: #C0392B;
  --red-soft: #FDEDEB;
  --paid: #16A34A;
  --pending: #D97706;
  --overdue: #DC2626;
  --max: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  --r: 16px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.58;
}
::selection { background: var(--green); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }

.it { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mono { font-family: 'Geist Mono', monospace; }

/* Header app */
.app-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 16px var(--pad);
}
.app-header-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.app-brand {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.app-brand .dot { color: var(--green); }
.app-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.app-nav a {
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.app-nav a:hover, .app-nav a.is-active { background: var(--paper); color: var(--ink); }
.app-nav .logout {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 12px;
}
.app-nav .logout:hover { color: var(--red); }

/* Container */
.app-main { max-width: var(--max); margin: 0 auto; padding: 32px var(--pad) 80px; }

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.1; }
h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
h4 { font-size: 14px; font-weight: 600; }

.muted { color: var(--ink-2); }
.tiny { font-size: 12.5px; color: var(--ink-3); }

/* Card */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
}
.card + .card { margin-top: 16px; }
.card h2 { margin-bottom: 4px; }
.card .lede { color: var(--ink-2); margin-bottom: 16px; }

/* Form */
.field { display: block; margin-bottom: 16px; }
.field label {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(27,94,55,.12);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field { margin-bottom: 0; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .15s, background .15s, box-shadow .15s, opacity .15s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 10px 22px -10px rgba(27,94,55,.45); }
.btn-primary:hover:not(:disabled) { background: var(--green-m); transform: translateY(-1px); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { background: var(--cream); }
.btn-danger { background: var(--red-soft); color: var(--red); border: 1px solid rgba(192,57,43,.18); }
.btn-danger:hover:not(:disabled) { background: #fadcd7; }

/* Status pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.paid { background: #DCFCE7; color: #15803D; }
.pill.pending { background: #FEF3E2; color: #C2650A; }
.pill.overdue { background: #FEE2E2; color: #B91C1C; }
.pill.future { background: #F3F4F6; color: #6B7280; }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.3);
  transition: transform .3s ease, opacity .3s ease, visibility .3s;
  z-index: 1000;
  max-width: calc(100vw - 32px);
}
/* O translateY(120%) sozinho não esconde toasts baixos (sobra um pill a espreitar
   no fundo) — opacity+visibility garantem invisibilidade total quando não há show. */
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.toast.error { background: var(--red); }
.toast.success { background: var(--green); }

/* Centro vertical (paginas curtas como entrar.html) */
.center-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--pad);
}
.center-page .card { max-width: 460px; width: 100%; }

/* =============================================
   DESIGN SYSTEM — Sessão 3 (extensão)
   ============================================= */

/* BRAND — RendaOK */
.brand-mark {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.brand-mark .renda { color: var(--green); }
.brand-mark .ok {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--amber);
  font-size: 1.12em;
}

/* MONEY — €123,45 com € em itálico */
.money {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  letter-spacing: -.025em;
}
.money .euro {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: .62em;
  vertical-align: super;
  color: var(--ink-3);
  margin-right: 1px;
}

/* LABEL MONO */
.label-mono {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* BADGES */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.badge.paid    { background: rgba(22,163,74,.10);  color: var(--paid); }
.badge.pending { background: rgba(217,119,6,.10);  color: var(--pending); }
.badge.overdue { background: rgba(192,57,43,.10);  color: var(--overdue); }
.badge.green   { background: var(--green-soft);    color: var(--green); }
.badge.amber   { background: var(--amber-soft);    color: var(--amber); }
.badge.sage    { background: rgba(90,122,94,.10);  color: #5A7A5E; }
.badge.neutral { background: var(--paper);         color: var(--ink-2); }

/* PILOT PILL — cobrança automática activa (classe mantida por retrocompat) */
.pilot-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--green-soft);
  border: 1px solid rgba(27,94,55,.15);
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
}
.pilot-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}

/* DOTS de estado */
.dot-state {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-state.paid    { background: var(--paid);    box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.dot-state.pending { background: var(--pending); box-shadow: 0 0 0 3px rgba(217,119,6,.12);
                     animation: pulse 2.5s infinite; }
.dot-state.overdue { background: var(--overdue); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.dot-state.vacant  { background: var(--cream); }
.dot-state.works   { background: var(--amber); }
.dot-state.own_use { background: #5A7A5E; }

/* SM button */
.btn-sm {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-sm:hover { border-color: var(--green); color: var(--green); background: var(--green-soft); }

/* CARD com linha de cor no topo (accent) */
.card-accent {
  position: relative;
  overflow: hidden;
}
.card-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent, var(--line-2));
}
.card-accent.accent-green::before  { background: var(--green); }
.card-accent.accent-amber::before  { background: var(--amber); }
.card-accent.accent-red::before    { background: var(--red); }
.card-accent.accent-sage::before   { background: #5A7A5E; }

/* TABS — navegação entre vistas */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 16px;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-weight: 500;
}
.tab:hover { color: var(--ink-2); }
.tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--green);
  font-weight: 600;
}

/* ANIMAÇÕES partilhadas */
@keyframes pulse  { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes float  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* TIMELINE — Vida do Imóvel */
.timeline {
  display: flex;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  position: relative;
  background: var(--paper);
}
.timeline-period {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  border-right: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  transition: filter .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
}
.timeline-period:hover { filter: brightness(1.1); z-index: 2; }
.timeline-period:last-child { border-right: 0; }
.timeline-period.rented   { background: var(--green); }
.timeline-period.vacant   { background: #9CA3AF; color: var(--ink); }
.timeline-period.works    { background: var(--amber); }
.timeline-period.own_use  { background: #5A7A5E; }
.timeline-period.other    { background: #6B7280; }

/* TOOLTIP simples */
.tooltip {
  position: absolute;
  background: var(--ink);
  color: #fff;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.3);
}
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.timeline-period:hover .tooltip { opacity: 1; }

/* STAT pills (estatísticas rápidas em Vida do Imóvel) */
.stat-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.stat-pill {
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
}
.stat-pill strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--ink);
  font-weight: 600;
  margin-right: 4px;
}

/* MODAL simples */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28,28,20,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.modal-overlay.show { display: flex; }
.modal {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px -10px rgba(0,0,0,.4);
  animation: fadeIn .25s ease;
}
.modal h3 { margin-bottom: 18px; }

/* GRID de tipos de activo (ícones grandes) */
.asset-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.asset-type-grid label {
  cursor: pointer;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  background: #fff;
  transition: all .15s;
}
.asset-type-grid input { display: none; }
.asset-type-grid .icon { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.asset-type-grid .name { font-size: 12px; color: var(--ink-2); }
.asset-type-grid label:hover { border-color: var(--green); }
.asset-type-grid input:checked + .icon ~ .name,
.asset-type-grid label:has(input:checked) {
  border-color: var(--green);
  background: var(--green-soft);
}
.asset-type-grid label:has(input:checked) .name { color: var(--green); font-weight: 600; }