/* ==========================================================
   FacturaPro Móvil - estilos generales tipo app nativa
   ========================================================== */
@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:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background: var(--color-bg, #FAF9F5); color: var(--color-text, #121210);
  font-size:15px; -webkit-font-smoothing:antialiased;
  padding-bottom: 84px; /* espacio para bottom nav */
}
h1,h2,h3{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-weight:600; margin:0 0 8px; letter-spacing:-0.01em; }
a{ color: var(--color-primary,#121210); text-decoration:none; }
p{ margin:0 0 12px; color: var(--color-text-soft,#4A483F); }

.app-topbar{
  position: sticky; top:0; z-index:20;
  background: var(--color-surface,#fff); border-bottom:1px solid var(--color-border,#E6E3DA);
  padding: 16px 20px; display:flex; align-items:center; justify-content:space-between;
}
.app-topbar h1{ font-size:20px; margin:0; }
.app-topbar .avatar{
  width:36px; height:36px; border-radius:50%; background:#FBE6DC; color:#C23D17;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.app-topbar .back{ font-size:20px; color: var(--color-text,#121210); }

.app-body{ padding: 18px 16px 8px; max-width: 560px; margin:0 auto; }

.mobile-hero{
  background: linear-gradient(135deg, #121210, #000000); color:#fff;
  border-radius: 22px; padding: 22px; margin-bottom:18px;
}
.mobile-hero h2{ color:#fff; font-size:22px; }
.mobile-hero p{ color: rgba(255,255,255,.85); margin:0; font-size:13px; }

.stat-row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; margin-bottom:18px; }
.stat-pill{
  flex: 0 0 auto; min-width: 140px; background:#fff; border:1px solid var(--color-border,#E6E3DA);
  border-radius:18px; padding:14px 16px;
}
.stat-pill .label{ font-size:11px; font-weight:700; text-transform:uppercase; color:#9B978B; }
.stat-pill .value{ font-family:'Instrument Serif',serif; font-size:20px; font-weight:600; margin-top:2px; }

.mobile-card{
  background:#fff; border:1px solid var(--color-border,#E6E3DA); border-radius:18px;
  padding:16px; margin-bottom:12px;
}
.list-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff; border:1px solid var(--color-border,#E6E3DA); border-radius:16px;
  padding:14px 16px; margin-bottom:10px;
}
.list-row .who{ font-weight:700; font-size:14.5px; }
.list-row .meta{ font-size:12px; color:#9B978B; margin-top:2px; }
.list-row .amount{ font-weight:700; font-size:15px; text-align:right; }

.chip{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; margin-top:4px; }
.chip.info{ background:#EAEFF8; color:#33518C; }
.chip.success{ background:#E9F3EC; color:#1C7A4E; }
.chip.warning{ background:#FAF1DD; color:#9C6A12; }
.chip.neutral{ background:#F0EEE7; color:#4A483F; }
.chip.danger{ background:#FAEAE6; color:#AE3A2C; }

.fab{
  position: fixed; right:18px; bottom: 92px; z-index: 30;
  width:56px; height:56px; border-radius:50%; background:#E14A1F; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  box-shadow: 0 10px 24px rgba(255,107,74,.4); border:none;
}

.mobile-search{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--color-border,#E6E3DA);
  border-radius:14px; padding: 10px 14px; margin-bottom:16px;
}
.mobile-search input{ border:none; outline:none; flex:1; font-size:14px; }

.tabs{ display:flex; gap:8px; margin-bottom:16px; }
.tab-btn{
  flex:1; text-align:center; padding:10px; border-radius:12px; font-weight:700; font-size:13px;
  background:#fff; border:1.5px solid var(--color-border,#E6E3DA); color:#4A483F; cursor:pointer;
}
.tab-btn.active{ background:#121210; color:#fff; border-color:#121210; }

.empty-state-mobile{ text-align:center; padding: 48px 16px; color:#4A483F; }
.empty-state-mobile .icon{ font-size:38px; margin-bottom:10px; }

/* Formularios móviles */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-weight:600; font-size:13px; margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; font-size:15px; padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--color-border,#E6E3DA); background:#fff;
}
.btn-mobile{
  width:100%; padding:14px; border-radius:14px; border:none; font-weight:700; font-size:15px;
  background:#121210; color:#fff; cursor:pointer;
}
.btn-mobile.outline{ background:#fff; color:#121210; border:1.5px solid var(--color-border,#E6E3DA); }