/* =========================================================
   ARKLOS FINCAS — Design System
   Paleta Arklos: negro / blanco / #f0be15
   Tipografía: DM Sans (UI) + DM Serif Display (títulos editoriales)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

:root{
  --af-black: #14120f;
  --af-black-soft: #232019;
  --af-white: #ffffff;
  --af-cream: #faf8f4;
  --af-yellow: #f0be15;
  --af-yellow-dark: #caa10f;
  --af-line: #e7e2d8;
  --af-ink-60: rgba(20,18,15,.60);
  --af-ink-40: rgba(20,18,15,.40);
  --af-green: #2f6d4f;
  --af-green-bg: #eaf3ec;
  --af-red: #b23a2e;
  --af-red-bg: #fbeae8;
  --af-amber: #a06a0a;
  --af-amber-bg: #fbf1dd;
  --af-blue: #2c5a8c;
  --af-blue-bg: #eaf1f8;

  --af-radius: 4px;
  --af-radius-lg: 10px;
  --af-font-ui: 'DM Sans', system-ui, sans-serif;
  --af-font-display: 'DM Serif Display', Georgia, serif;
  --af-sidebar-w: 248px;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

.af-app{
  font-family: var(--af-font-ui);
  color: var(--af-black);
  background: var(--af-cream);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.af-app h1,.af-app h2,.af-app h3{ font-family: var(--af-font-display); font-weight: 400; margin: 0; letter-spacing: -0.01em; }
.af-app p{ margin:0; }
.af-app a{ color: inherit; text-decoration: none; }
.af-app button{ font-family: inherit; }

/* ---------- Layout shell ---------- */
.af-shell{ display:flex; min-height:100vh; }

.af-sidebar{
  width: var(--af-sidebar-w);
  flex: 0 0 var(--af-sidebar-w);
  background: var(--af-black);
  color: var(--af-white);
  display:flex;
  flex-direction: column;
  position: sticky;
  top:0;
  height:100vh;
}
.af-brand{
  display:flex; align-items:center; gap:10px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.af-brand-mark{
  width:34px; height:34px; border-radius: 8px;
  background: var(--af-yellow);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--af-font-display); font-size: 19px; color:var(--af-black);
  flex: none;
}
.af-brand-text{ line-height:1.15; }
.af-brand-text strong{ display:block; font-size:15px; font-weight:600; }
.af-brand-text span{ display:block; font-size:11px; color: rgba(255,255,255,.5); letter-spacing:.03em; }

.af-nav{ padding: 14px 12px; flex:1; overflow-y:auto; }
.af-nav-group{ margin-bottom: 18px; }
.af-nav-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.35); padding: 0 10px 6px; }
.af-nav a{
  display:flex; align-items:center; gap:10px;
  padding: 9px 10px; border-radius: 7px;
  font-size: 13.5px; color: rgba(255,255,255,.72);
  margin-bottom: 2px;
}
.af-nav a:hover{ background: rgba(255,255,255,.06); color: var(--af-white); }
.af-nav a.active{ background: var(--af-yellow); color: var(--af-black); font-weight:600; }
.af-nav a .af-ico{ width:16px; text-align:center; opacity:.9; font-size:14px; }
.af-nav a .af-badge{ margin-left:auto; background: var(--af-red); color:#fff; font-size:10.5px; font-weight:700; border-radius:20px; padding:1px 6px; }
.af-nav a.active .af-badge{ background: var(--af-black); color: var(--af-yellow); }

.af-sidebar-foot{
  padding: 14px 18px 18px; border-top: 1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; gap:10px;
}
.af-avatar{
  width:32px;height:32px;border-radius:50%;
  background: var(--af-yellow); color:var(--af-black);
  display:flex;align-items:center;justify-content:center;
  font-weight:700; font-size:13px; flex:none;
}
.af-sidebar-foot .who{ line-height:1.2; }
.af-sidebar-foot .who strong{ display:block; font-size:12.5px; }
.af-sidebar-foot .who span{ display:block; font-size:11px; color: rgba(255,255,255,.45); }

/* ---------- Main column ---------- */
.af-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.af-topbar{
  display:flex; align-items:center; gap:16px;
  padding: 16px 28px;
  background: var(--af-white);
  border-bottom: 1px solid var(--af-line);
  position: sticky; top:0; z-index:5;
}
.af-topbar h1{ font-size: 21px; }
.af-topbar .af-crumb{ font-size:12px; color:var(--af-ink-40); margin-bottom:2px; }
.af-search{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background: var(--af-cream); border:1px solid var(--af-line);
  border-radius: 8px; padding: 8px 12px; font-size:13px; color:var(--af-ink-60);
  width: 260px;
}
.af-topbar-actions{ display:flex; align-items:center; gap:10px; }
.af-icon-btn{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--af-line);
  background:#fff; display:flex;align-items:center;justify-content:center;
  cursor:pointer; font-size:15px; position:relative;
}
.af-icon-btn .dot{ position:absolute; top:6px; right:7px; width:7px;height:7px;border-radius:50%; background:var(--af-red); }

.af-content{ padding: 26px 28px 60px; flex:1; }

/* ---------- Buttons ---------- */
.af-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 16px; border-radius: 7px; border: 1px solid var(--af-black);
  background: var(--af-black); color: var(--af-white);
  font-size: 13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.af-btn:hover{ background:#000; }
.af-btn.af-btn-yellow{ background: var(--af-yellow); border-color: var(--af-yellow); color: var(--af-black); }
.af-btn.af-btn-ghost{ background: transparent; color: var(--af-black); }
.af-btn.af-btn-line{ background: #fff; color: var(--af-black); border-color: var(--af-line); }
.af-btn.af-btn-sm{ padding: 6px 11px; font-size: 12.5px; }
.af-btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------- Cards / KPIs ---------- */
.af-grid{ display:grid; gap: 18px; }
.af-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
.af-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.af-grid.cols-2{ grid-template-columns: repeat(2,1fr); }

.af-card{
  background: var(--af-white); border: 1px solid var(--af-line);
  border-radius: var(--af-radius-lg); padding: 20px;
}
.af-card h3{ font-size: 15px; font-family: var(--af-font-ui); font-weight:600; margin-bottom: 14px; }

.af-kpi{ background:#fff; border:1px solid var(--af-line); border-radius: var(--af-radius-lg); padding:18px 20px; position:relative; overflow:hidden; }
.af-kpi .label{ font-size:12px; color:var(--af-ink-60); margin-bottom:8px; }
.af-kpi .value{ font-family: var(--af-font-display); font-size: 30px; line-height:1; }
.af-kpi .delta{ font-size:11.5px; margin-top:8px; display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:20px; }
.af-kpi .delta.up{ color: var(--af-green); background: var(--af-green-bg); }
.af-kpi .delta.down{ color: var(--af-red); background: var(--af-red-bg); }
.af-kpi .accent{ position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--af-yellow); }

/* ---------- Tables ---------- */
.af-table-wrap{ background:#fff; border:1px solid var(--af-line); border-radius: var(--af-radius-lg); overflow:hidden; }
table.af-table{ width:100%; border-collapse: collapse; font-size: 13.5px; }
table.af-table thead th{
  text-align:left; font-size: 11px; text-transform:uppercase; letter-spacing:.05em;
  color: var(--af-ink-40); font-weight:600; padding: 12px 16px; border-bottom:1px solid var(--af-line);
  background: var(--af-cream);
}
table.af-table td{ padding: 13px 16px; border-bottom:1px solid var(--af-line); vertical-align:middle; }
table.af-table tbody tr:last-child td{ border-bottom:none; }
table.af-table tbody tr:hover{ background: #fbfaf7; }
table.af-table .num{ text-align:right; font-variant-numeric: tabular-nums; }

/* ---------- Tags / status ---------- */
.af-tag{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; }
.af-tag.green{ background: var(--af-green-bg); color: var(--af-green); }
.af-tag.red{ background: var(--af-red-bg); color: var(--af-red); }
.af-tag.amber{ background: var(--af-amber-bg); color: var(--af-amber); }
.af-tag.blue{ background: var(--af-blue-bg); color: var(--af-blue); }
.af-tag.grey{ background:#eee; color:#555; }
.af-tag .dot{ width:6px;height:6px;border-radius:50%; background:currentColor; }

/* ---------- Tabs ---------- */
.af-tabs{ display:flex; gap: 4px; border-bottom: 1px solid var(--af-line); margin-bottom: 20px; }
.af-tabs a{ padding: 11px 4px; margin-right: 22px; font-size:13.5px; color: var(--af-ink-60); border-bottom: 2px solid transparent; }
.af-tabs a.active{ color: var(--af-black); border-color: var(--af-yellow); font-weight:600; }

/* ---------- Forms ---------- */
.af-field{ margin-bottom: 16px; }
.af-field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; }
.af-field .hint{ font-size:11.5px; color:var(--af-ink-40); margin-top:5px; }
.af-field input, .af-field select, .af-field textarea{
  width:100%; padding: 10px 12px; border:1px solid var(--af-line); border-radius:7px;
  font-family: var(--af-font-ui); font-size:13.5px; background:#fff; color: var(--af-black);
}
.af-field input:focus, .af-field select:focus, .af-field textarea:focus{ outline: 2px solid var(--af-yellow); outline-offset:1px; border-color: var(--af-yellow-dark); }
.af-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---------- Misc ---------- */
.af-empty{ text-align:center; padding: 60px 20px; color: var(--af-ink-40); }
.af-empty .glyph{ font-size:34px; margin-bottom:14px; }
.af-divider{ height:1px; background:var(--af-line); margin: 22px 0; }
.af-muted{ color: var(--af-ink-60); }
.af-small{ font-size: 12px; }
.af-flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.af-progress{ height:6px; border-radius:20px; background:var(--af-line); overflow:hidden; }
.af-progress > span{ display:block; height:100%; background: var(--af-yellow); }
.af-list-plain{ list-style:none; margin:0; padding:0; }
.af-avatar-sm{ width:26px;height:26px;border-radius:50%; background:var(--af-black); color:var(--af-yellow); display:inline-flex; align-items:center;justify-content:center; font-size:11px; font-weight:700; }

@media (max-width: 980px){
  .af-grid.cols-4,.af-grid.cols-3{ grid-template-columns: repeat(2,1fr); }
  .af-field-row{ grid-template-columns: 1fr; }
}