/* ===========================
   F27 Group Portal — Dark Premium
   Areguá Forest Management
   =========================== */

:root {
  --bg:           #0a0a0a;
  --card:         #111111;
  --card-inner:   #0d0d0d;
  --card-hi:      #161616;
  --border:       #222222;
  --border-sub:   #1a1a1a;
  --border-str:   #2a2a2a;
  --text:         #ffffff;
  --text-sec:     #cccccc;
  --muted:        #888888;
  --dim:          #555555;
  --hint:         #444444;
  --ghost:        #333333;
  --neon:         #34d399;   /* esmeralda — Areguá Forest */
  --neon-dim:     rgba(52,211,153,.1);
  --danger:       #ff3366;
  --blue:         #276ef1;
  --green:        #05a660;
  --orange:       #f5a623;
  --red:          #e11d48;
  --surface:      #111111;
  --nav-h:        54px;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; height: 100%; overflow-x: hidden; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  height: 100%; overflow: hidden; overscroll-behavior: none;
}

/* ── Animaciones ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin   { to { transform:rotate(360deg); } }
@keyframes neonPulse {
  0%,100% { text-shadow: 0 0 8px rgba(52,211,153,.4), 0 0 20px rgba(52,211,153,.15); }
  50%      { text-shadow: 0 0 16px rgba(52,211,153,.7), 0 0 40px rgba(52,211,153,.3); }
}
@keyframes skeletonShimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
@keyframes shake {
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
@keyframes introImgIn {
  0%   { opacity:0; transform:scale(.88); filter:brightness(0) invert(1) blur(8px); }
  50%  { filter:brightness(0) invert(1) blur(0); }
  100% { opacity:1; transform:scale(1); filter:brightness(0) invert(1) blur(0); }
}
@keyframes pulseDot {
  0%,80%,100%{transform:scale(0);opacity:.4;}
  40%{transform:scale(1);opacity:1;}
}

/* ── Intro splash ── */
.intro-screen {
  position:fixed;inset:0;z-index:9999;background:#0a0a0a;
  display:flex;align-items:center;justify-content:center;
}
.intro-logo { display:flex;align-items:center;justify-content:center; }
.intro-logo-img {
  width:min(52vw,220px);height:min(52vw,220px);object-fit:contain;
  filter:brightness(0) invert(1);
  animation:introImgIn .45s cubic-bezier(.16,1,.3,1) both;
}
.intro-wordmark {
  display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:18px;
}
.intro-wm-name { font-size:22px;font-weight:900;letter-spacing:-.5px;color:#fff; }
.intro-wm-sub  { font-size:12px;color:var(--muted); }

/* ── Login ── */
.login-screen {
  position:fixed;inset:0;z-index:9000;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.login-inner {
  width:100%;max-width:340px;
  display:flex;flex-direction:column;align-items:center;gap:0;
  animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;
}
.login-logo { width:52px;height:52px;object-fit:contain;filter:brightness(0) invert(1);margin-bottom:22px; }
.login-brand {
  font-size:20px;font-weight:900;letter-spacing:-.5px;margin-bottom:4px;
  animation:neonPulse 3s ease-in-out infinite;
}
.login-sub { font-size:12px;color:var(--muted);margin-bottom:28px; }
.login-form { width:100%; }
.login-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:7px; }
.login-name-wrap { margin-bottom:20px; }
.login-name-input {
  width:100%;padding:14px 16px;background:var(--card);border:0.5px solid var(--border-str);
  border-radius:12px;font-size:15px;font-family:inherit;color:var(--text);outline:none;
  transition:border-color .2s;
}
.login-name-input::placeholder { color:var(--hint); }
.login-name-input:focus { border-color:var(--neon); }
.login-name-input.input-error { border-color:var(--danger); }
.pin-squares {
  display:flex;gap:10px;justify-content:center;margin:20px 0 16px;
}
.pin-squares.shake { animation:shake .4s ease; }
.pin-sq {
  width:52px;height:52px;border-radius:14px;
  background:var(--card);border:0.5px solid var(--border-str);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s;
}
.pin-sq.filled { border-color:var(--neon);background:var(--neon-dim); }
.pin-dot { width:10px;height:10px;border-radius:50%;background:var(--neon); }
.pin-error { font-size:12px;color:var(--danger);text-align:center;min-height:16px;margin-bottom:8px; }
.numpad {
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px;
}
.numpad-btn {
  height:52px;border-radius:12px;font-size:20px;font-weight:600;
  background:var(--card);border:0.5px solid var(--border);color:var(--text);
  font-family:inherit;cursor:pointer;transition:background .1s,transform .1s;
  -webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;
}
.numpad-btn:active { background:var(--card-hi);transform:scale(.95); }
.numpad-btn.del { font-size:14px; }
.numpad-btn:disabled { opacity:.4; }
.login-loading { display:none;text-align:center;margin-top:8px; }
.login-loading::after {
  content:'';display:inline-block;width:16px;height:16px;
  border:2px solid var(--border);border-top-color:var(--neon);
  border-radius:50%;animation:spin .7s linear infinite;
}

/* ── Welcome screen ── */
.welcome-screen {
  position:fixed;inset:0;z-index:8000;background:var(--bg);
  display:none;align-items:center;justify-content:center;
}
.welcome-text {
  text-align:center;
  opacity:0;transform:translateY(10px);
  transition:opacity .35s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.welcome-text.in { opacity:1;transform:translateY(0); }
.welcome-greeting { font-size:13px;color:var(--muted);margin-bottom:6px; }
.welcome-name { font-size:28px;font-weight:900;color:var(--neon);letter-spacing:-.8px;animation:neonPulse 2s ease-in-out infinite; }

/* ── App Shell ── */
.app { display:flex;flex-direction:column;height:100%;height:100dvh;background:var(--bg);opacity:0; }

/* Topbar */
.topbar {
  flex-shrink:0;z-index:200;
  background:rgba(10,10,10,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:0.5px solid var(--border-sub);
  height:calc(var(--nav-h) + env(safe-area-inset-top));
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 20px 10px 20px;padding-top:env(safe-area-inset-top);
}
.topbar-left { display:flex;align-items:center;gap:10px; }
.topbar-mark {
  width:32px;height:32px;background:var(--neon-dim);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--neon);flex-shrink:0;
}
.topbar-title { font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.3px;animation:neonPulse 3s ease-in-out infinite; }
.topbar-sub   { font-size:11px;color:var(--muted);font-weight:400;margin-top:1px; }
.topbar-right { display:flex;align-items:center;gap:8px; }
.avatar {
  width:34px;height:34px;border-radius:50%;
  background:var(--card);border:0.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--neon);flex-shrink:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.topbar-name { font-size:12px;color:var(--muted);font-weight:500; }

/* Avatar menu */
.av-menu {
  position:absolute;top:calc(100% + 8px);right:0;z-index:300;
  background:var(--card);border:0.5px solid var(--border-str);border-radius:12px;
  padding:4px;display:none;flex-direction:column;gap:2px;min-width:44px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.av-menu.open { display:flex; }
.av-menu-btn {
  padding:10px;background:none;border:none;color:var(--muted);cursor:pointer;
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:background .1s,color .1s;
}
.av-menu-btn:hover { background:var(--card-hi);color:var(--text); }

/* View container */
#view { flex:1;overflow:hidden;display:flex;flex-direction:column; }

/* Page */
.page {
  flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:20px 20px calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
  max-width:600px;margin:0 auto;width:100%;
}

/* Bottom nav */
.bnav {
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(10,10,10,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:0.5px solid #1e1e1e;display:flex;padding:8px 0;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
.bnav-item {
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:8px 4px;text-decoration:none;color:#383838;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border:none;background:none;cursor:pointer;font-family:inherit;
  transition:color .15s;position:relative;-webkit-tap-highlight-color:transparent;
}
.bnav-item.active { color:var(--text); }
.bnav-item.active .bnav-icon-wrap::before {
  content:'';position:absolute;inset:-4px -8px;
  background:rgba(52,211,153,.08);border-radius:10px;
}
.bnav-item:hover { color:var(--text-sec); }
.bnav-icon-wrap {
  position:relative;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
}
svg { display:block;flex-shrink:0; }

/* ── Skeleton ── */
.skeleton-row {
  height:68px;margin-bottom:2px;border-radius:12px;
  background:linear-gradient(90deg,var(--card) 0%,var(--card-hi) 50%,var(--card) 100%);
  background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;
}

/* ── Empty / Error ── */
.empty-msg,.error-msg {
  display:flex;align-items:center;gap:8px;
  padding:24px 20px;font-size:13px;color:var(--muted);
  justify-content:center;
}
.error-msg { color:var(--danger); }

/* ── Badges ── */
.badge {
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;
  font-size:10px;font-weight:700;letter-spacing:.04em;
}
.badge::before { content:'';width:4px;height:4px;border-radius:50%; }
.badge-green  { background:rgba(52,211,153,.12); color:var(--neon); }
.badge-green::before  { background:var(--neon); }
.badge-blue   { background:rgba(39,110,241,.12); color:var(--blue); }
.badge-blue::before   { background:var(--blue); }
.badge-orange { background:rgba(245,166,35,.12); color:var(--orange); }
.badge-orange::before { background:var(--orange); }
.badge-red    { background:rgba(255,51,102,.12); color:var(--danger); }
.badge-red::before    { background:var(--danger); }
.badge-dim    { background:var(--card-hi);color:var(--muted); }
.badge-dim::before    { background:var(--muted); }

/* ── Dashboard ── */
.db-page {}
.db-section-label {
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--dim);margin-bottom:10px;
}
.db-stats { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px; }
.db-stat-card {
  background:var(--card);border-radius:14px;border:0.5px solid var(--border);
  padding:16px 14px;display:flex;align-items:flex-start;gap:12px;
  animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;
}
.db-stat-card:nth-child(2){animation-delay:.04s;}
.db-stat-card:nth-child(3){animation-delay:.08s;}
.db-stat-card:nth-child(4){animation-delay:.12s;}
.db-stat-icon {
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.acc-neon   { background:var(--neon-dim);color:var(--neon); }
.acc-green  { background:rgba(5,166,96,.1);color:#05a660; }
.acc-blue   { background:rgba(39,110,241,.12);color:var(--blue); }
.acc-red    { background:rgba(255,51,102,.1);color:var(--danger); }
.db-stat-val   { font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1; }
.db-stat-label { font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-top:4px; }
.db-stat-sub   { font-size:11px;color:var(--neon);margin-top:3px; }

.db-recent-list {
  background:var(--card);border-radius:14px;border:0.5px solid var(--border);overflow:hidden;
}
.db-recent-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:0.5px solid var(--border-sub);gap:12px;
}
.db-recent-row:last-child { border-bottom:none; }
.db-recent-name  { font-size:13px;font-weight:600;color:var(--text); }
.db-recent-meta  { font-size:11px;color:var(--muted);margin-top:2px; }
.db-recent-right { text-align:right;flex-shrink:0; }
.db-recent-date  { font-size:11px;color:var(--dim);margin-top:4px; }

/* ── Lotes view ── */
.lotes-page { padding-top:14px; }
.lotes-filters { margin-bottom:16px; }
.fil-group { margin-bottom:12px; }
.fil-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin-bottom:8px; }
.fil-chips {
  display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
}
.fil-chips::-webkit-scrollbar { display:none; }
.fil-chip {
  white-space:nowrap;padding:6px 13px;border-radius:20px;
  font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;
  border:0.5px solid var(--border);background:var(--card);color:var(--muted);
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.fil-chip.active { background:var(--neon);border-color:var(--neon);color:#0a0a0a; }

.lotes-list {
  background:var(--card);border-radius:14px;border:0.5px solid var(--border);
  overflow:hidden;
}

/* Lote row */
.lote {
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:0.5px solid var(--border-sub);
  cursor:pointer;transition:background .1s;-webkit-tap-highlight-color:transparent;
}
.lote:last-child { border-bottom:none; }
.lote:active,.lote.active { background:var(--card-hi); }
.lote-num {
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--neon-dim);color:var(--neon);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:-.02em;
}
.lote-body { flex:1;min-width:0; }
.lote-name {
  font-size:14px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lote-meta { font-size:11px;color:var(--muted);margin-top:2px; }
.lote-right { text-align:right;flex-shrink:0; }
.lote-price { font-size:14px;font-weight:700;color:var(--neon);letter-spacing:-.02em; }
.lote-chevron {
  color:var(--ghost);margin-left:4px;
  transition:transform .2s;flex-shrink:0;
  display:flex;align-items:center;
}
.lote.active .lote-chevron { transform:rotate(90deg); }

/* Lote detail */
.lote-detail { display:none;background:var(--card-inner);border-bottom:0.5px solid var(--border-sub); }
.lote-detail.open { display:block; }
.lote-detail-inner { padding:16px; }
.det-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;
}
.det-item {}
.det-label { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--dim); }
.det-val   { font-size:13px;font-weight:600;color:var(--text-sec);margin-top:3px; }
.det-edit  { border-top:0.5px solid var(--border-sub);padding-top:14px; }
.det-edit-row { margin-bottom:11px; }
.det-edit-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);display:block;margin-bottom:6px; }
.det-select,.det-input {
  width:100%;padding:10px 12px;background:var(--card);border:0.5px solid var(--border);
  border-radius:10px;font-size:13px;font-family:inherit;color:var(--text);outline:none;
  transition:border-color .2s;
}
.det-select:focus,.det-input:focus { border-color:var(--neon); }
.det-select option { background:var(--card); }
.det-actions { display:flex;align-items:center;gap:12px;margin-top:14px; }
.det-btn-save {
  display:flex;align-items:center;gap:6px;
  padding:9px 16px;background:var(--neon);border:none;border-radius:10px;
  font-size:12px;font-weight:700;color:#0a0a0a;font-family:inherit;
  cursor:pointer;transition:opacity .15s;
}
.det-btn-save:hover { opacity:.85; }
.det-btn-save:disabled { opacity:.5;cursor:not-allowed; }
.det-save-msg { font-size:12px; }
.det-save-msg.ok  { color:var(--neon); }
.det-save-msg.err { color:var(--danger); }

/* ── Analytics ── */
.an-page { padding-top:14px;display:flex;flex-direction:column;gap:12px; }
.an-row  { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.an-card {
  background:var(--card);border-radius:14px;border:0.5px solid var(--border);
  padding:16px 14px;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;
}
.an-card.an-card-wide { grid-column:1/-1; }
.an-card-title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin-bottom:14px; }

/* Revenue list */
.an-revenue-list { display:flex;flex-direction:column;gap:10px; }
.rev-row { display:flex;align-items:center;gap:8px; }
.rev-dot  { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.rev-label { font-size:12px;color:var(--muted);flex:1; }
.rev-val   { font-size:13px;font-weight:700;color:var(--text); }
.rev-total {
  display:flex;justify-content:space-between;padding-top:10px;
  border-top:0.5px solid var(--border-sub);
  font-size:13px;font-weight:700;color:var(--neon);margin-top:4px;
}

/* ── Spinner / Loader ── */
.spinner {
  display:inline-block;width:14px;height:14px;
  border:1.5px solid var(--border);border-top-color:var(--neon);
  border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:middle;margin-right:6px;
}