/* ============================================================
   Sarmiento Apartment — Dark Blue
   A Place to Call Your Own

   Ground:  deep navy blue
   Brand:   soft gold accent
   Bills:   water = blue · electricity = yellow · rent = green
            warning / notice = red

   Every colour below is a token. Pages reference these, never raw
   hex, so a palette change happens in this file only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
  /* ── Dark blue surfaces ── */
  --black:       #070C16;   /* deepest — overlays, wells      */
  --charcoal:    #0E1626;   /* cards                          */
  --graphite:    #1A2437;   /* raised surfaces                  */
  --steel:       #243350;   /* strong lines, inactive chips   */
  --grey:        #7C8CA6;   /* muted text                     */
  --silver:      #AEBBD0;   /* secondary text                 */
  --white:       #FFFFFF;

  /* ── Semantic surfaces ── */
  --cream:       #0B1220;   /* page ground                    */
  --cream-2:     #111A2B;   /* banded sections                */
  --cream-3:     #1A2437;   /* table heads, inputs            */
  --surface:     #101A2C;   /* card                           */
  --surface-2:   #162034;   /* inputs, inset wells            */
  --surface-warm:#16203A;   /* warm band → cool navy band     */

  /* ── Ink ── */
  --ink:         #EAF0F9;
  --ink-soft:    #B9C4D6;
  --ink-muted:   #8494AC;
  --ink-faint:   #5E6E88;
  --on-gold:     #0B1220;   /* text on gold                   */

  /* ── Brand gold ── */
  --gold:        #D8A94E;
  --gold-deep:   #B8863A;
  --gold-bright: #F0C977;
  --gold-ink:    #EBC176;
  --gold-soft:   rgba(216, 169, 78, 0.14);
  --gold-soft-2: rgba(216, 169, 78, 0.28);
  --gold-grad:   linear-gradient(135deg, #F0C977 0%, #B8863A 100%);
  --gold-display:#F0C977;
  --soft-gold:   #F0C977;

  /* ── Dark section ground ── */
  --navy:        #070C16;
  --navy-soft:   #0E1626;

  /* ── Lines ── */
  --line:        rgba(174, 187, 208, 0.18);
  --line-soft:   rgba(174, 187, 208, 0.10);
  --line-strong: rgba(174, 187, 208, 0.34);

  /* ── Tints (light-on-dark) ── */
  --tint-01: rgba(255, 255, 255, 0.012);
  --tint-02: rgba(255, 255, 255, 0.022);
  --tint-03: rgba(255, 255, 255, 0.035);
  --tint-04: rgba(255, 255, 255, 0.048);
  --tint-05: rgba(255, 255, 255, 0.065);
  --tint-06: rgba(255, 255, 255, 0.090);
  --tint-08: rgba(255, 255, 255, 0.130);
  --tint-10: rgba(255, 255, 255, 0.175);

  /* ============================================================
     BILL COLOURS — brightened for a dark ground.
     Colour never carries meaning alone: each is always paired
     with the existing icon and a text label.
     ============================================================ */

  /* 💧 Water — blue */
  --bill-water:      #6FA8D6;
  --bill-water-soft: rgba(111, 168, 214, 0.16);
  --bill-water-line: rgba(111, 168, 214, 0.38);

  /* ⚡ Electricity — yellow */
  --bill-elec:       #E3BE4A;
  --bill-elec-soft:  rgba(227, 190, 74, 0.16);
  --bill-elec-line:  rgba(227, 190, 74, 0.38);

  /* 🏠 Rent — green */
  --bill-rent:       #5FB37E;
  --bill-rent-soft:  rgba(95, 179, 126, 0.16);
  --bill-rent-line:  rgba(95, 179, 126, 0.38);

  /* 📋 Other / additional charges — purple grey */
  --bill-other:      #A79CC4;
  --bill-other-soft: rgba(167, 156, 196, 0.16);
  --bill-other-line: rgba(167, 156, 196, 0.38);

  /* ============================================================
     STATUS
     ============================================================ */

  /* 💰 Paid — green + check icon */
  --st-paid:         #4FB37A;
  --st-paid-soft:    rgba(79, 179, 122, 0.16);
  --st-paid-line:    rgba(79, 179, 122, 0.40);

  /* ⏳ Pending / unpaid — orange, distinct from electric yellow */
  --st-pending:      #E08B4A;
  --st-pending-soft: rgba(224, 139, 74, 0.16);
  --st-pending-line: rgba(224, 139, 74, 0.40);

  /* ❌ Warning / overdue / notice — red */
  --st-warn:         #E5655C;
  --st-warn-soft:    rgba(229, 101, 92, 0.16);
  --st-warn-line:    rgba(229, 101, 92, 0.40);
  --st-overdue:      var(--st-warn);
  --st-overdue-soft: var(--st-warn-soft);
  --st-overdue-line: var(--st-warn-line);
  --st-red:          var(--st-warn);
  --st-red-soft:     var(--st-warn-soft);

  /* Aliases the pages already reference */
  --fn-rent:         var(--bill-rent);
  --fn-rent-soft:    var(--bill-rent-soft);
  --fn-elec:         var(--bill-elec);
  --fn-elec-soft:    var(--bill-elec-soft);
  --fn-water:        var(--bill-water);
  --fn-water-soft:   var(--bill-water-soft);
  --fn-penalty:      var(--st-warn);
  --fn-penalty-soft: var(--st-warn-soft);
  --fn-other:        var(--bill-other);
  --fn-other-soft:   var(--bill-other-soft);
  --fn-utility:      #6FA8D6;
  --fn-utility-soft: rgba(111, 168, 214, 0.16);
  --fn-neutral:      #7C8CA6;
  --fn-neutral-soft: rgba(124, 140, 166, 0.16);

  /* Legacy status aliases */
  --green:       var(--st-paid);
  --green-soft:  var(--st-paid-soft);
  --green-soft-2:var(--st-paid-line);
  --amber:       var(--st-pending);
  --amber-soft:  var(--st-pending-soft);
  --amber-soft-2:var(--st-pending-line);
  --red:         var(--st-warn);
  --red-soft:    var(--st-warn-soft);
  --red-soft-2:  var(--st-warn-line);
  --teal:        var(--bill-water);
  --teal-soft:   var(--bill-water-soft);
  --bronze:      var(--bill-elec);
  --bronze-soft: var(--bill-elec-soft);
  --plum:        var(--bill-other);
  --plum-soft:   var(--bill-other-soft);

  /* ── Scrims ── */
  --scrim-4: rgba(4, 7, 13, 0.45);
  --scrim-5: rgba(4, 7, 13, 0.62);
  --scrim-6: rgba(4, 7, 13, 0.76);
  --scrim-7: rgba(4, 7, 13, 0.88);

  /* ── Type ── */
  --font-display: 'Red Hat Display', 'Segoe UI', Tahoma, sans-serif;
  --font-body:    'Red Hat Display', 'Segoe UI', Tahoma, sans-serif;
  --font-mono:    ui-monospace, 'Courier New', monospace;

  /* ── Elevation ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 10px 30px rgba(216, 169, 78, 0.24);

  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
}

/* ── Base reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-body); }

body {
  background: var(--cream);
  color: var(--ink-soft);
  font-weight: 500;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Page ground — `html body` outranks each page's own body{} rule.
   Cool navy with a gold bloom top-left and a blue wash bottom-right. */
html body {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse 62% 50% at 4% 0%,  rgba(216, 169, 78, 0.09) 0%, transparent 62%),
    radial-gradient(ellipse 58% 48% at 99% 100%, rgba(111, 168, 214, 0.10) 0%, transparent 62%);
  background-attachment: fixed, fixed;
}

/* ── Gold hairline across the very top ── */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-grad);
  z-index: 9998;
  pointer-events: none;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: #2A3A57; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3A4E72; }

/* ── Inputs ── */
input, select, textarea {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream-3);
  border: 1px solid var(--line);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
select option { background: var(--charcoal); color: var(--ink); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* ── Buttons ── */
button { font-family: var(--font-body); cursor: pointer; color: var(--ink); }

/* ── Brand lockup ── */
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  background: var(--gold-grad);
  color: var(--on-gold);
  font-size: 18px;
  box-shadow: var(--shadow-gold);
}
.brand-name {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; line-height: 1.1;
  color: var(--ink);
}
.brand-tagline {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* ── Surfaces ── */
.card, .panel, .modal-box, .login-container {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* ── Tables ── */
table { border-collapse: collapse; width: 100%; }
th {
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--cream-3);
  border-bottom: 1px solid var(--line);
  padding: 11px 12px; text-align: left;
}
td { border-bottom: 1px solid var(--line-soft); padding: 10px 12px; color: var(--ink-soft); }
tbody tr:hover { background: var(--tint-03); }

/* ── Badges ── */
.badge { font-weight: 700; letter-spacing: 0.05em; }
.badge-paid    { color: var(--st-paid);    background: var(--st-paid-soft);    border: 1px solid var(--st-paid-line); }
.badge-partial { color: var(--st-pending); background: var(--st-pending-soft); border: 1px solid var(--st-pending-line); }
.badge-unpaid  { color: var(--st-warn);    background: var(--st-warn-soft);    border: 1px solid var(--st-warn-line); }

/* ============================================================
   FUNCTION COLOUR CLASSES
   Apply to a card, chip, row or chart block to tag its purpose.
   ============================================================ */
.fn-rent    { --fn: var(--bill-rent);    --fn-s: var(--bill-rent-soft);    --fn-l: var(--bill-rent-line); }
.fn-elec    { --fn: var(--bill-elec);    --fn-s: var(--bill-elec-soft);    --fn-l: var(--bill-elec-line); }
.fn-water   { --fn: var(--bill-water);   --fn-s: var(--bill-water-soft);   --fn-l: var(--bill-water-line); }
.fn-penalty { --fn: var(--st-warn);      --fn-s: var(--st-warn-soft);      --fn-l: var(--st-warn-line); }
.fn-other   { --fn: var(--bill-other);   --fn-s: var(--bill-other-soft);   --fn-l: var(--bill-other-line); }
.fn-utility { --fn: var(--fn-utility);   --fn-s: var(--fn-utility-soft); }
.fn-neutral { --fn: var(--fn-neutral);   --fn-s: var(--fn-neutral-soft); }
.fn-green   { --fn: var(--st-paid);      --fn-s: var(--st-paid-soft);      --fn-l: var(--st-paid-line); }
.fn-amber   { --fn: var(--st-pending);   --fn-s: var(--st-pending-soft);   --fn-l: var(--st-pending-line); }
.fn-red     { --fn: var(--st-warn);      --fn-s: var(--st-warn-soft);      --fn-l: var(--st-warn-line); }
.fn-gold    { --fn: var(--gold);         --fn-s: var(--gold-soft);         --fn-l: var(--gold-soft-2); }

.fn-card {
  position: relative;
  border-left: 3px solid var(--fn, var(--gold));
  background: var(--surface);
}
.fn-card > .fn-head { color: var(--fn, var(--gold)); }
.fn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fn, var(--gold));
  background: var(--fn-s, var(--gold-soft));
  border: 1px solid var(--fn-l, currentColor);
}
.fn-dot {
  width: 9px; height: 9px; flex: 0 0 9px;
  border-radius: 50%;
  background: var(--fn, var(--gold));
  display: inline-block;
}

/* ============================================================
   STATISTICAL COMPONENTS
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.kpi {
  background: var(--surface);
  padding: 16px 18px 15px;
  position: relative;
  overflow: hidden;
  transition: background .2s;
}
.kpi:hover { background: var(--cream-2); }
.kpi::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--fn, var(--gold));
}
.kpi-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 7px;
  display: flex; align-items: center; gap: 7px;
}
.kpi-value {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi-sub { margin-top: 6px; font-size: 12px; color: var(--ink-muted); }
.kpi-sub b { color: var(--fn, var(--gold)); font-weight: 700; }

.meter {
  height: 7px;
  background: var(--cream-3);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 9px;
}
.meter > i {
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: var(--fn, var(--gold));
  transition: width 1s cubic-bezier(.16, 1, .3, 1);
}
.meter-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 12px; color: var(--ink-soft); padding: 6px 0;
}
.meter-row .m-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }

.dist { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--cream-3); }
.dist > span { display: block; height: 100%; transition: width .9s cubic-bezier(.16,1,.3,1); }
.dist .d-paid    { background: var(--st-paid); }
.dist .d-partial { background: var(--st-pending); }
.dist .d-unpaid  { background: var(--st-warn); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
}
.stat-block { border-top: 2px solid var(--gold-soft-2); padding-top: 16px; }
.stat-block .n {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-block .t {
  margin-top: 9px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
}
.stat-block .d { margin-top: 7px; font-size: 13px; color: var(--ink-soft); }

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .preloader { display: none !important; }
  .meter > i, .dist > span { transition: none !important; }
}

[data-reveal] {
  opacity: 0;
  transition:
    opacity .75s cubic-bezier(.16, 1, .3, 1),
    transform .75s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translate3d(0, 44px, 0); }
[data-reveal="left"]  { transform: translate3d(-52px, 0, 0); }
[data-reveal="right"] { transform: translate3d(52px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(.92); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="d1"] { transition-delay: .10s; }
[data-reveal="d2"] { transition-delay: .20s; }
[data-reveal="d3"] { transition-delay: .30s; }
[data-reveal="d4"] { transition-delay: .40s; }
[data-reveal="d5"] { transition-delay: .50s; }
[data-reveal="d6"] { transition-delay: .60s; }

.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--navy);
  transition: opacity .5s ease, visibility .5s ease;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader .loader-ring {
  width: 54px; height: 54px;
  border: 2px solid rgba(240, 201, 119, 0.22);
  border-top-color: var(--soft-gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.site-header { transition: padding .3s ease, box-shadow .3s ease, background .3s ease; }
.site-header.is-stuck {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.scroll-top {
  position: fixed; right: 26px; bottom: 26px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: none;
  background: var(--gold-grad);
  color: var(--on-gold);
  font-size: 16px;
  box-shadow: var(--shadow-gold);
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
  z-index: 900;
}
.scroll-top.show { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { filter: brightness(1.08); transform: translateY(-3px); }

.count-up { font-variant-numeric: tabular-nums; }

.subtitle {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 12px;
}
.hatch {
  height: 6px;
  background: repeating-linear-gradient(135deg,
    var(--gold) 0 9px,
    rgba(216, 169, 78, 0.10) 9px 18px);
  opacity: .5;
  border-block: 1px solid var(--line-soft);
}

@keyframes fadeUp  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes popIn   { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: none; } }
@keyframes pulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }