/* ==========================================================
   FacturaPro - Estilos globales (v2)
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
h1{ font-size: 36px; } h2{ font-size: 27px; } h3{ font-size: 19px; font-family: var(--font-body); font-weight: 700; }
p{ margin: 0 0 var(--space-3); color: var(--color-text-soft); }
a{ color: var(--color-ink); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover{ border-bottom-color: currentColor; }
ul{ list-style: none; margin:0; padding:0; }
img{ max-width: 100%; display:block; }
code{ font-family: var(--font-mono); font-size: 0.9em; background: var(--color-primary-light); padding: 1px 6px; border-radius: 5px; }
.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- Layout general con sidebar ---------- */
.app-shell{ display:flex; min-height: 100vh; }
.app-main{ flex: 1; margin-left: var(--sidebar-width); display:flex; flex-direction: column; min-width: 0; }
.app-content{ padding: var(--space-6); max-width: 1200px; width: 100%; margin: 0 auto; }

.topbar{
  height: var(--topbar-height);
  display:flex; align-items:center; justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1{ font-size: 22px; margin:0; }
.topbar-actions{ display:flex; align-items:center; gap: var(--space-3); }

/* ---------- Botones: rectangulares y precisos, no "pastilla" ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  padding: 11px 20px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  text-decoration:none;
}
a.btn:hover{ border-bottom-color: transparent; }
.btn:active{ transform: scale(0.98); }
.btn-primary{ background: var(--color-ink); color:#fff; }
.btn-primary:hover{ background: #000; }
.btn-accent{ background: var(--color-accent); color:#fff; }
.btn-accent:hover{ background: var(--color-accent-dark); }
.btn-outline{ background: transparent; border-color: var(--color-border-strong); color: var(--color-text); }
.btn-outline:hover{ border-color: var(--color-ink); }
.btn-ghost{ background: transparent; color: var(--color-text-soft); }
.btn-ghost:hover{ background: var(--color-primary-light); }
.btn-danger{ background: var(--color-danger); color:#fff; }
.btn-sm{ padding: 7px 14px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-icon{ width: 36px; height:36px; padding:0; border-radius: var(--radius-sm); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Cards: bordes finos, sombra solo si hace falta ---------- */
.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--space-5);
}
.card-hover:hover{ border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); transition: all .18s ease; }
.card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-4); }
.card-header h3{ letter-spacing: -0.01em; }

.stat-card{
  background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display:flex; flex-direction:column; gap:6px;
}
.stat-card .stat-label{ color:var(--color-text-faint); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.stat-card .stat-value{ font-family: var(--font-mono); font-size: 28px; font-weight:500; letter-spacing:-0.02em; }
.stat-card .stat-trend{ font-size:13px; font-weight:500; color: var(--color-text-faint); }
.stat-trend.up{ color: var(--color-success); }
.stat-trend.down{ color: var(--color-danger); }

/* ---------- Formularios ---------- */
.form-group{ margin-bottom: var(--space-4); }
label{ display:block; font-weight:600; font-size:12.5px; margin-bottom:6px; color: var(--color-ink-soft); text-transform:uppercase; letter-spacing:.03em; }
input, select, textarea{
  width:100%; font-family: var(--font-body); font-size:14.5px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border); background:#fff; color: var(--color-text);
  transition: border-color .12s ease;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--color-ink); }
textarea{ resize: vertical; min-height: 90px; }
.form-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--space-4); }
.form-hint{ font-size:12px; color: var(--color-text-faint); margin-top:4px; }

/* ---------- Badges (siguen en pill: son etiquetas pequeñas) ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; padding: 4px 11px; border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing:.02em;
}
.badge-success{ background: var(--color-success-bg); color: var(--color-success); }
.badge-warning{ background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger{ background: var(--color-danger-bg); color: var(--color-danger); }
.badge-info{ background: var(--color-info-bg); color: var(--color-info); }
.badge-neutral{ background: #F0EEE7; color: var(--color-text-soft); }

/* ---------- Utilidades ---------- */
.grid{ display:grid; gap: var(--space-5); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-2{ gap: var(--space-2); }
.gap-3{ gap: var(--space-3); }
.gap-4{ gap: var(--space-4); }
.mt-2{margin-top:var(--space-2);} .mt-4{margin-top:var(--space-4);} .mt-6{margin-top:var(--space-6);}
.mb-2{margin-bottom:var(--space-2);} .mb-4{margin-bottom:var(--space-4);} .mb-6{margin-bottom:var(--space-6);}
.text-soft{ color: var(--color-text-soft); }
.text-faint{ color: var(--color-text-faint); }
.text-right{ text-align:right; }
.text-center{ text-align:center; }
.w-full{ width:100%; }

/* ---------- Modal ---------- */
.modal-overlay{
  position: fixed; inset:0; background: rgba(18,18,16,0.5);
  display:none; align-items:center; justify-content:center; z-index: 100; padding: var(--space-4);
}
.modal-overlay.active{ display:flex; }
.modal{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 620px; max-height: 90vh; overflow-y:auto;
  padding: var(--space-6); border: 1px solid var(--color-border);
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-5); }
.modal-close{ cursor:pointer; background:none; border:none; font-size:20px; color: var(--color-text-soft); }

/* ---------- Toast ---------- */
.toast{
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  background: var(--color-ink); color:#fff; padding: 14px 20px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); font-size:14px; font-weight:600;
  opacity:0; transform: translateY(10px); transition: all .2s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform: translateY(0); }
.toast.success{ background: var(--color-success); }
.toast.error{ background: var(--color-danger); }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding: var(--space-8) var(--space-4); color: var(--color-text-soft); }
.empty-state .icon{ font-size: 38px; margin-bottom: var(--space-3); opacity:.7; }

@media (max-width: 900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .app-main{ margin-left:0; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; }
  .app-content{ padding: var(--space-4); }
}