:root{
  --navy-deep:#071D3F;
  --navy-mid:#16305A;
  --gold:#B8894A;
  --gold-soft:#D9B27C;
  --cream:#F7F5F0;
  --paper:#EEF1F6;
  --ink:#071D3F;
  --gray:#5B6472;
  --line:rgba(7,29,63,0.14);
  --white:#FFFFFF;
  --ok:#1E8E5A;
  --ok-bg:#E6F4EC;
  --warn:#B8894A;
  --warn-bg:#FBF1E4;
  --danger:#C0392B;
  --danger-bg:#FBEAE8;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Montserrat', -apple-system, Arial, sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0 0 6px;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
img{max-width:100%;display:block;}

/* ---------- Auth pages ---------- */
.auth-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--navy-deep);
  padding:24px;
}
.auth-card{
  background:var(--white);
  width:100%;
  max-width:400px;
  padding:40px 36px;
  border-top:4px solid var(--gold);
}
.auth-card img{height:52px;margin:0 auto 22px;}
.auth-card h1{font-size:20px;text-align:center;color:var(--navy-deep);}
.auth-card p.sub{text-align:center;color:var(--gray);font-size:14px;margin-bottom:26px;}
.field{margin-bottom:18px;}
.field label{
  display:block;font-size:12px;font-weight:700;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--navy-mid);margin-bottom:7px;
}
.field input, .field select{
  width:100%;border:1px solid var(--line);background:var(--cream);
  padding:12px 13px;font-size:15px;border-radius:2px;font-family:inherit;color:var(--ink);
}
.field input:focus, .field select:focus{outline:none;border-color:var(--gold);background:var(--white);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;font-weight:700;letter-spacing:0.03em;padding:12px 22px;
  border-radius:2px;cursor:pointer;border:1px solid transparent;background:var(--gold);
  color:var(--navy-deep);transition:background .2s ease;
}
.btn:hover{background:var(--gold-soft);}
.btn-block{width:100%;}
.btn-outline{background:transparent;border-color:var(--navy-deep);color:var(--navy-deep);}
.btn-outline:hover{background:var(--navy-deep);color:var(--white);}
.btn-sm{padding:8px 14px;font-size:12.5px;}
.error-box{
  background:var(--danger-bg);color:var(--danger);border-left:3px solid var(--danger);
  padding:12px 14px;font-size:13.5px;margin-bottom:18px;
}
.help-note{margin-top:22px;font-size:12.5px;color:var(--gray);text-align:center;}

/* ---------- App shell (dashboard layout) ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:230px;flex-shrink:0;background:var(--navy-deep);color:var(--white);
  padding:26px 0;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar .brand{padding:0 24px 24px;border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:14px;}
.sidebar .brand img{height:36px;}
.sidebar .company{padding:0 24px 18px;font-size:12px;color:rgba(255,255,255,0.55);}
.sidebar .company strong{display:block;color:var(--white);font-size:14px;margin-top:2px;}
.sidebar nav a{
  display:flex;align-items:center;gap:12px;padding:12px 24px;font-size:13.5px;
  font-weight:600;color:rgba(255,255,255,0.72);border-left:3px solid transparent;
}
.sidebar nav a svg{width:17px;height:17px;flex-shrink:0;}
.sidebar nav a:hover{color:var(--white);background:rgba(255,255,255,0.05);}
.sidebar nav a.active{color:var(--white);border-left-color:var(--gold);background:rgba(255,255,255,0.06);}
.sidebar .logout{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.1);}
.main{flex:1;min-width:0;}
.topbar{
  background:var(--white);border-bottom:1px solid var(--line);
  padding:18px 32px;display:flex;align-items:center;justify-content:space-between;
}
.topbar h1{font-size:19px;color:var(--navy-deep);}
.content{padding:32px;}

/* ---------- Cards / stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:32px;}
.stat-card{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);padding:20px 22px;}
.stat-card .label{font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--gray);}
.stat-card .value{font-size:26px;font-weight:800;color:var(--navy-deep);margin-top:8px;}
.stat-card .sub{font-size:12.5px;color:var(--gray);margin-top:4px;}

.card{background:var(--white);border:1px solid var(--line);padding:26px;margin-bottom:24px;}
.card h2{font-size:16px;color:var(--navy-deep);}

/* ---------- Filters ---------- */
.filters{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-bottom:22px;}
.filters .field{margin-bottom:0;min-width:150px;}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px;}
thead th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--gray);padding:10px 12px;border-bottom:2px solid var(--line);
}
tbody td{padding:13px 12px;border-bottom:1px solid var(--line);color:var(--ink);}
tbody tr:hover{background:var(--paper);}
.text-right{text-align:right;}
.empty-state{padding:40px 20px;text-align:center;color:var(--gray);font-size:14px;}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:5px 11px;font-size:11.5px;font-weight:700;border-radius:2px;letter-spacing:0.03em;}
.badge-venta{background:var(--ok-bg);color:var(--ok);}
.badge-compra{background:var(--paper);color:var(--navy-mid);}
.badge-pagado{background:var(--ok-bg);color:var(--ok);}
.badge-pendiente{background:var(--warn-bg);color:var(--warn);}
.badge-vencido{background:var(--danger-bg);color:var(--danger);}

/* ---------- Chat ---------- */
.chat-shell{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;height:calc(100vh - 180px);min-height:420px;}
.chat-messages{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:12px;}
.msg{max-width:70%;padding:11px 15px;border-radius:3px;font-size:14px;line-height:1.45;}
.msg-client{align-self:flex-end;background:var(--gold);color:var(--navy-deep);}
.msg-admin{align-self:flex-start;background:var(--paper);color:var(--ink);}
.msg .meta{display:block;font-size:10.5px;opacity:0.65;margin-top:5px;}
.chat-input{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--line);}
.chat-input textarea{
  flex:1;resize:none;border:1px solid var(--line);padding:11px 13px;font-family:inherit;
  font-size:14px;border-radius:2px;background:var(--cream);
}
.chat-input textarea:focus{outline:none;border-color:var(--gold);background:var(--white);}
.chat-empty{padding:40px;text-align:center;color:var(--gray);font-size:14px;}
.chat-list-item{display:block;padding:14px 18px;border-bottom:1px solid var(--line);}
.chat-list-item:hover{background:var(--paper);}
.chat-list-item.has-unread{border-left:3px solid var(--gold);}
.chat-list-item .name{font-weight:700;color:var(--navy-deep);font-size:14px;}
.chat-list-item .preview{font-size:12.5px;color:var(--gray);margin-top:3px;}

/* ---------- Document list ---------- */
.doc-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.doc-row .icon{width:42px;height:42px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.doc-row .icon svg{width:20px;height:20px;color:var(--navy-deep);}
.doc-row .info{flex:1;min-width:0;}
.doc-row .info .title{font-weight:700;color:var(--navy-deep);font-size:14.5px;}
.doc-row .info .meta{font-size:12.5px;color:var(--gray);margin-top:2px;}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .app{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:relative;padding:16px 0;}
  .sidebar nav{display:flex;overflow-x:auto;}
  .sidebar nav a{white-space:nowrap;border-left:none;border-bottom:3px solid transparent;}
  .sidebar nav a.active{border-left:none;border-bottom-color:var(--gold);}
  .sidebar .logout{display:none;}
  .content{padding:20px;}
  table{display:block;overflow-x:auto;white-space:nowrap;}
}