/* ============================================
   Casa Velázquez LLC — Client Portal
   Premium Navy & Gold Design System
   ============================================ */

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

:root{
  --navy-black:   #050E1F;
  --navy-deep:    #0A1B3A;
  --navy:         #0F2A5C;
  --navy-light:   #16386F;
  --royal:        #1552A8;
  --panel:        #0D2140;
  --panel-light:  #123058;
  --gold:         #D4AF37;
  --gold-bright:  #F3D98B;
  --gold-deep:    #9C7A28;
  --gold-line:    rgba(212,175,55,0.35);
  --ink:          #FFF;
  --ink-soft:     #FFF;
  --ink-faint:    #6E85A8;
  --success:      #3FAE6B;
  --success-soft: rgba(63,174,107,0.14);
  --danger:       #D9695C;
  --danger-soft:  rgba(217,105,92,0.14);
  --paper:        #FFFFFF;
  --cream:        #F7F5F0;
  --line:         rgba(212,175,55,0.16);
  --shadow-gold:  0 10px 40px rgba(0,0,0,0.45);
  --radius:       10px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--navy-black);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:600;
  color:var(--ink);
  margin:0;
  letter-spacing:0.01em;
}

select option {
    background-color: #fff;
    color: #000;
}

.eyebrow{
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}

/* ---------------- background texture ---------------- */
.bg-luxe{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(21,82,168,0.35), transparent 60%),
    radial-gradient(ellipse 700px 500px at 110% 10%, rgba(212,175,55,0.12), transparent 55%),
    radial-gradient(ellipse 900px 700px at 50% 120%, rgba(21,82,168,0.25), transparent 60%),
    linear-gradient(180deg, var(--navy-black), #081428 55%, var(--navy-black));
  /*  background:*/
  /*linear-gradient(180deg, #101D35, #0D1E38);*/
}
.bg-luxe::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(212,175,55,0.035) 0px, rgba(212,175,55,0.035) 1px, transparent 1px, transparent 90px);
  opacity:0.5;
}

/* ---------------- panels ---------------- */
.panel{
  background:linear-gradient(145deg, var(--panel), var(--panel-light));
  border:1px solid var(--line);
  border-radius:var(--radius);
}

/* ---------------- gold hairline + ornament ---------------- */
.hairline{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
}
.flourish{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--gold);
  margin:16px 0;
}
.flourish::before,.flourish::after{ content:""; width:46px; height:1px; background:linear-gradient(90deg, transparent, var(--gold)); }
.flourish::after{ background:linear-gradient(90deg, var(--gold), transparent); }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px;
  font-size:0.82rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  border-radius:6px; border:1px solid var(--gold-line);
  color:var(--gold-bright); background:transparent; cursor:pointer;
  transition:all .25s ease;
}
.btn:hover{ border-color:var(--gold); background:rgba(212,175,55,0.08); }
.btn-gold{
  background:linear-gradient(135deg, #E7C665, var(--gold) 45%, #B4881F);
  color:#1B1203; border:none; box-shadow:0 8px 24px rgba(212,175,55,0.25);
}
.btn-gold:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn-ghost{ border-color:rgba(255,255,255,0.14); color:var(--ink-soft); }
.btn-ghost:hover{ border-color:var(--ink-soft); color:var(--ink); background:rgba(255,255,255,0.04); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 16px; font-size:0.72rem; }
.btn-danger{ border-color:rgba(217,105,92,0.4); color:#F1A99E; }
.btn-danger:hover{ background:rgba(217,105,92,0.1); border-color:var(--danger); }
.btn-success{ border-color:rgba(63,174,107,0.4); color:#7FD4A0; }
.btn-success:hover{ background:rgba(63,174,107,0.1); border-color:var(--success); }

/* ---------------- form elements ---------------- */
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:0.76rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px;
}
.field input,
.field select,
.field textarea{
  width:100%; padding:13px 15px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  color:var(--ink);
  font-family:'Inter',sans-serif; font-size:0.94rem;
  outline:none; transition:border-color .2s ease, background .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold); background:rgba(212,175,55,0.05);
}
.field textarea{ resize:vertical; min-height:96px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }

.file-drop{
  border:1.5px dashed rgba(212,175,55,0.4);
  border-radius:8px; padding:26px; text-align:center;
  cursor:pointer; transition:all .2s ease;
}
.file-drop:hover{ border-color:var(--gold); background:rgba(212,175,55,0.04); }

/* ---------------- badges ---------------- */
.badge{
  display:inline-block; padding:4px 12px;
  font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  border-radius:20px;
}
.badge-paid{ background:var(--success-soft); color:var(--success); }
.badge-active{ background:rgba(212,175,55,0.14); color:var(--gold-bright); }
.badge-pending{ background:rgba(212,175,55,0.14); color:var(--gold-bright); }
.badge-overdue{ background:var(--danger-soft); color:var(--danger); }
.badge-unread{ background:var(--royal); color:#fff; }

/* ---------------- alerts ---------------- */
.alert{
  padding:14px 18px; border-radius:8px; margin-bottom:18px;
  font-size:0.88rem; display:flex; align-items:center; gap:10px;
}
.alert-success{ background:var(--success-soft); color:var(--success); border:1px solid rgba(63,174,107,0.3); }
.alert-danger{ background:var(--danger-soft); color:var(--danger); border:1px solid rgba(217,105,92,0.3); }
.alert-info{ background:rgba(21,82,168,0.15); color:var(--royal); border:1px solid rgba(21,82,168,0.3); }

/* ---------------- LOGIN SHELL ---------------- */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
.login-card{
  width:100%; max-width:420px; padding:44px 38px; text-align:center;
}
.login-card .crest{ width:62px; margin:0 auto 14px; border-radius:8px; }
.login-card h1{ font-size:1.65rem; margin-bottom:6px; }
.login-card .tag{ color:var(--ink-soft); font-size:0.88rem; margin-top:8px; }
.divider-word{
  display:flex; align-items:center; gap:16px; margin:28px 0 22px;
  color:var(--ink-faint); font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase;
}
.divider-word::before,.divider-word::after{ content:""; flex:1; height:1px; background:var(--line); }
.form-area{ text-align:left; }
.remember-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.82rem; color:var(--ink-soft); margin-bottom:24px;
}
.remember-row a{ color:var(--gold-bright); font-size:0.82rem; }
.remember-row a:hover{ text-decoration:underline; }
.footnote{ font-size:0.78rem; color:var(--ink-faint); margin-top:28px; line-height:1.6; }
.footnote a{ color:var(--gold); text-decoration:underline; }
.demo-note{
  margin-top:18px; padding:12px 16px; border-radius:6px;
  background:rgba(212,175,55,0.06); border:1px solid var(--gold-line);
  font-size:0.78rem; color:var(--ink-soft);
}

/* ---------------- DASHBOARD SHELL ---------------- */
.shell{ display:flex; min-height:100vh; }

/* ---------------- sidebar ---------------- */
.sidebar{
  width:264px; flex-shrink:0; 
  background:linear-gradient(180deg, #101D35, #0D1E38);
  border-right:1px solid var(--line); padding:30px 22px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
}
.sb-brand{ display:flex; align-items:center; gap:12px; padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.sb-brand img{ width:46px; }
.sb-brand .name{ font-family:'Playfair Display',serif; font-size:1.02rem; line-height:1.2; }
.sb-brand .sub{ font-size:0.6rem; letter-spacing:0.18em; color:var(--gold); text-transform:uppercase; }
.sb-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.sb-nav a{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:12px 14px; border-radius:7px; border:none; background:none; color:var(--ink-soft);
  font-size:0.9rem; cursor:pointer; transition:all .2s ease; text-decoration:none;
}
.sb-nav a svg{ opacity:0.85; flex-shrink:0; }
.sb-nav a:hover{ background:rgba(255,255,255,0.04); color:var(--ink); }
.sb-nav a.active{ background:linear-gradient(90deg, rgba(212,175,55,0.16), rgba(212,175,55,0.02)); color:var(--gold-bright); border-left:2px solid var(--gold); padding-left:12px; }
.sb-foot{ border-top:1px solid var(--line); padding-top:18px; }
.sb-foot a{ width:100%; display:block; text-align:center; }

/* ---------------- main ---------------- */
.main{ flex:1; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 40px; border-bottom:1px solid var(--line);
  background:rgba(10,27,58,0.4); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10;
}
.topbar h2{ font-size:1.3rem; }
.topbar .welcome{ color:var(--ink-soft); font-size:0.85rem; margin-top:4px; }
.user-chip{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#E7C665,var(--gold));
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#1B1203; font-family:'Playfair Display',serif;
}
.content{ padding:40px; }

/* ---------------- overview cards ---------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:36px; }
.stat-card{ padding:24px; }
.stat-card .lbl{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }
.stat-card .val{ font-family:'Playfair Display',serif; font-size:1.9rem; margin-top:10px; color:var(--ink); }
.stat-card .val.gold{ color:var(--gold-bright); }
.section-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.section-title h3{ font-size:1.15rem; }

/* ---------------- tables ---------------- */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; }
th{ text-align:left; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); padding:14px 18px; border-bottom:1px solid var(--line); }
td{ padding:16px 18px; border-bottom:1px solid rgba(255,255,255,0.05); font-size:0.9rem; }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:rgba(255,255,255,0.015); }
.dl-link{ color:var(--gold-bright); font-size:0.82rem; display:inline-flex; align-items:center; gap:6px; }
.dl-link:hover{ text-decoration:underline; }

/* ---------------- documents grid ---------------- */
.doc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.doc-card{ padding:22px; display:flex; flex-direction:column; gap:14px; }
.doc-icon{ width:44px; height:44px; border-radius:8px; background:rgba(212,175,55,0.12); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.doc-card .fname{ font-weight:600; font-size:0.94rem; }
.doc-card .fmeta{ font-size:0.78rem; color:var(--ink-faint); }
.doc-card .foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }

/* ---------------- payment ---------------- */
.pay-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:flex-start; }
.method-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:28px; }
.method-btn{
  border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:18px; text-align:left; cursor:pointer;
  background:rgba(255,255,255,0.02); transition:all .2s ease; display:flex; gap:12px; align-items:center;
}
.method-btn svg{ color:var(--ink-faint); flex-shrink:0; }
.method-btn .t{ font-weight:600; font-size:0.94rem;color:#FFF; }
.method-btn .s{ font-size:0.78rem; color:var(--ink-faint); margin-top:2px; }
.method-btn.active{ border-color:var(--gold); background:rgba(212,175,55,0.07); }
.method-btn.active svg{ color:var(--gold); }
.pay-section{ display:none; }
.pay-section.active{ display:block; }
.qr-box{ text-align:center; padding:26px; }
.qr-code{ width:190px; height:190px; margin:0 auto 16px; border-radius:8px; overflow:hidden; border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center; background:var(--paper); }
.qr-label{ font-family:'Playfair Display',serif; font-size:1rem; color:var(--gold-bright); }
.qr-sub{ font-size:0.78rem; color:var(--ink-faint); margin-top:4px; }
.disclaimer{ font-size:0.82rem; color:var(--ink-soft); background:rgba(212,175,55,0.06); border:1px solid var(--gold-line); border-radius:6px; padding:14px 16px; margin-top:6px; }
.summary-box{ padding:26px; position:sticky; top:100px; }
.summary-box h4{ font-size:1rem; margin-bottom:16px; }
.summary-row{ display:flex; justify-content:space-between; font-size:0.88rem; padding:9px 0; border-bottom:1px dashed rgba(255,255,255,0.08); color:var(--ink-soft); }
.summary-row.total{ color:var(--ink); font-weight:700; border-bottom:none; padding-top:14px; font-size:1rem; }
.summary-row.total span:last-child{ color:var(--gold-bright); }

/* ---------------- messages ---------------- */
.msg-list{ display:flex; flex-direction:column; gap:2px; }
.msg-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  padding:18px 22px; border-radius:8px; cursor:pointer; transition:all .2s ease;
}
.msg-item:hover{ background:rgba(255,255,255,0.03); }
.msg-item.unread{ background:rgba(21,82,168,0.1); border-left:3px solid var(--royal); }
.msg-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); }
.msg-dot.read{ background:var(--ink-faint); }
.msg-body .msg-from{ font-weight:600; font-size:0.94rem; }
.msg-body .msg-subject{ font-size:0.88rem; color:var(--ink-soft); margin-top:2px; }
.msg-body .msg-preview{ font-size:0.82rem; color:var(--ink-faint); margin-top:4px; }
.msg-time{ font-size:0.75rem; color:var(--ink-faint); white-space:nowrap; }
.msg-compose{ margin-top:24px; }

/* ---------------- profile ---------------- */
.profile-grid{ display:grid; grid-template-columns:1fr 2fr; gap:30px; }
.profile-avatar{
  width:100px; height:100px; border-radius:50%; background:linear-gradient(135deg,#E7C665,var(--gold));
  display:flex; align-items:center; justify-content:center; font-size:2.2rem; font-weight:700; color:#1B1203; font-family:'Playfair Display',serif;
  margin:0 auto 20px;
}

/* ---------------- animations ---------------- */
.fade-in{ animation:fade .4s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ---------------- responsive ---------------- */
@media(max-width:1100px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .doc-grid{ grid-template-columns:repeat(2,1fr); }
  .pay-grid{ grid-template-columns:1fr; }
  .profile-grid{ grid-template-columns:1fr; }
}
@media(max-width:800px){
  .sidebar{ display:none; }
  .content{ padding:24px; }
  .topbar{ padding:18px 24px; }
  .row-2, .row-3{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .doc-grid{ grid-template-columns:1fr; }
  .method-toggle{ grid-template-columns:1fr; }
}