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

:root {
  --bg: #0d0d14;
  --surface: #16161f;
  --surface2: #1e1e2a;
  --border: #2a2a3a;
  --accent: #e8366f;
  --accent2: #a855f7;
  --accent-grad: linear-gradient(135deg, #e8366f, #a855f7);
  --text: #f0f0f8;
  --text-muted: #7a7a9a;
  --success: #22c55e;
  --radius: 14px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --nav-h: 60px;
  --bottom-h: 60px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: 'Syne', sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ── NAVBAR (desktop) ── */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(13,13,20,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  height: var(--nav-h);
  display: flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 1.4rem;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-links { display:flex; gap:6px; align-items:center; }
.nav-links a {
  padding: 8px 12px; border-radius:8px;
  font-size:.875rem; color: var(--text-muted);
  transition: all .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--surface2); }
.nav-links a.btn-accent {
  background: var(--accent-grad); color:#fff; font-weight:600;
  padding: 8px 16px;
}

/* ── BOTTOM NAV (mobile) ── */
.bottom-nav {
  display: none;
  position: fixed; bottom:0; left:0; right:0; z-index:100;
  background: rgba(13,13,20,0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  height: var(--bottom-h);
  padding: 0 8px;
  align-items: center;
  justify-content: space-around;
}
.bottom-nav a {
  display: flex; flex-direction:column; align-items:center;
  gap: 3px; padding: 8px 12px; border-radius: 10px;
  color: var(--text-muted); font-size: .6rem;
  transition: .2s; min-width: 48px; text-align:center;
}
.bottom-nav a .icon { font-size: 1.3rem; line-height:1; }
.bottom-nav a.active, .bottom-nav a:hover { color: var(--accent); }
.bottom-nav a.active .icon { filter: drop-shadow(0 0 4px var(--accent)); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 24px; border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size:.875rem; font-weight:500;
  border: none; cursor:pointer; transition: all .2s;
  touch-action: manipulation;
}
.btn-primary { background: var(--accent-grad); color:#fff; }
.btn-primary:active { opacity:.85; transform:scale(.98); }
.btn-outline { background:transparent; color:var(--text); border: 1px solid var(--border); }
.btn-outline:active { background: var(--surface2); }
.btn-ghost { background:transparent; color:var(--text-muted); }
.btn-lg { padding:14px 32px; font-size:1rem; }
.btn-sm { padding:8px 16px; font-size:.8rem; }
.btn-block { width:100%; }
.btn-danger { background:#dc2626; color:#fff; }
.btn-success { background:var(--success); color:#fff; }

/* ── FORMS ── */
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; margin-bottom:6px;
  font-size:.8rem; font-weight:500; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.05em;
}
.form-control {
  width:100%; padding:13px 16px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius:10px; color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:1rem; /* 16px evita zoom en iOS */
  transition: border .2s; -webkit-appearance: none;
}
.form-control:focus { outline:none; border-color:var(--accent); }
.form-control::placeholder { color:var(--text-muted); }
select.form-control option { background:var(--surface2); }

.checkbox-group { display:flex; flex-wrap:wrap; gap:8px; }
.checkbox-pill input { display:none; }
.checkbox-pill label {
  padding:9px 16px; border-radius:20px;
  border:1px solid var(--border); font-size:.82rem;
  cursor:pointer; transition:all .2s;
  color: var(--text-muted); user-select:none;
}
.checkbox-pill input:checked + label {
  background: var(--accent-grad); border-color:transparent; color:#fff;
}

/* ── CARDS ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

/* ── PROFILE CARD (swipe) ── */
.profile-card {
  position:relative; border-radius:20px; overflow:hidden;
  aspect-ratio: 3/4; max-width:380px; margin:0 auto;
  box-shadow: var(--shadow);
  cursor:grab; transition: transform .3s;
  user-select: none;
}
.profile-card img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.profile-card-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:24px 20px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.profile-card-info h3 { font-size:1.4rem; font-weight:700; }
.profile-card-info p { font-size:.85rem; color:rgba(255,255,255,.75); margin-top:4px; }
.profile-card-badge {
  display:inline-block; padding:4px 12px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  border-radius:20px; font-size:.75rem; margin-top:8px;
}

.swipe-actions {
  display:flex; justify-content:center; gap:20px; margin-top:20px;
}
.swipe-btn {
  width:64px; height:64px; border-radius:50%;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; transition:all .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  touch-action: manipulation;
}
.swipe-btn.dislike { background:#1e1e2a; color:#ff4757; }
.swipe-btn.like { background: var(--accent-grad); color:#fff; }
.swipe-btn.super { background:#a855f7; color:#fff; }
.swipe-btn:active { transform:scale(.92); }

/* ── MATCH GRID ── */
.matches-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
.match-item {
  position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:3/4; cursor:pointer; transition:transform .2s;
}
.match-item img { width:100%; height:100%; object-fit:cover; }
.match-item-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:12px 10px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.8));
  font-size:.8rem;
}
.match-item-info .name { font-weight:600; }
.match-item .unread-badge {
  position:absolute; top:8px; right:8px;
  background:var(--accent); color:#fff;
  border-radius:50%; width:20px; height:20px;
  font-size:.7rem; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}

/* ── CHAT ── */
.chat-layout {
  display:grid;
  grid-template-columns:300px 1fr;
  height:calc(100vh - var(--nav-h));
}
.chat-list {
  border-right:1px solid var(--border);
  overflow-y:auto; background:var(--surface);
}
.chat-list-item {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .15s;
}
.chat-list-item:hover, .chat-list-item.active { background:var(--surface2); }
.chat-list-item img {
  width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.chat-list-item .info { flex:1; overflow:hidden; }
.chat-list-item .name { font-size:.9rem; font-weight:600; }
.chat-list-item .preview {
  font-size:.78rem; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-window { display:flex; flex-direction:column; background:var(--bg); }
.chat-header {
  padding:12px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
  background:var(--surface);
}
.chat-header img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.chat-messages {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.message {
  max-width:78%; padding:10px 14px;
  border-radius:16px; font-size:.875rem; line-height:1.5;
  word-break: break-word;
}
.message.sent {
  align-self:flex-end;
  background:var(--accent-grad); color:#fff;
  border-bottom-right-radius:4px;
}
.message.received {
  align-self:flex-start;
  background:var(--surface2);
  border-bottom-left-radius:4px;
}
.message .time { font-size:.68rem; opacity:.6; margin-top:4px; }
.chat-input {
  padding:10px 12px; border-top:1px solid var(--border);
  display:flex; gap:8px; background:var(--surface);
  align-items:center;
}
.chat-input input {
  flex:1; padding:11px 16px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:24px; color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:1rem;
}
.chat-input input:focus { outline:none; border-color:var(--accent); }

/* ── PROFILE PAGE ── */
.profile-header {
  position:relative; height:260px; border-radius:var(--radius); overflow:hidden;
}
.profile-header img { width:100%; height:100%; object-fit:cover; }
.profile-header-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:20px; background:linear-gradient(transparent, rgba(0,0,0,.8));
}
.gender-badge {
  display:inline-block; padding:5px 14px; border-radius:20px; font-size:.78rem;
  background:rgba(168,85,247,.2); color:#c084fc; border:1px solid rgba(168,85,247,.3);
}
.couple-badge { background:rgba(232,54,111,.2); color:#f472b6; border-color:rgba(232,54,111,.3); }

/* ── LANDING ── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding:80px 0 40px;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse at 70% 50%, rgba(232,54,111,.15) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(168,85,247,.12) 0%, transparent 50%);
}
.hero-content { position:relative; z-index:1; max-width:600px; }
.hero-content h1 {
  font-size: clamp(2rem, 8vw, 4.5rem);
  line-height:1.1; font-weight:800;
}
.hero-content h1 span {
  background:var(--accent-grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-content p {
  font-size:1rem; color:var(--text-muted);
  margin:16px 0 28px; line-height:1.7;
}
.hero-stats { display:flex; gap:24px; margin-top:40px; flex-wrap:wrap; }
.hero-stat .num {
  font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:800;
  background:var(--accent-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-stat .label { font-size:.75rem; color:var(--text-muted); margin-top:2px; }

/* ── LAYOUT ── */
.container { max-width:1100px; margin:0 auto; padding:0 16px; }
.page { padding-top:76px; min-height:100vh; }
.mt-4 { margin-top:1rem; }
.mt-8 { margin-top:2rem; }
.mb-4 { margin-bottom:1rem; }
.text-muted { color:var(--text-muted); }
.text-center { text-align:center; }
.flex { display:flex; }
.items-center { align-items:center; }
.gap-2 { gap:.5rem; }
.gap-4 { gap:1rem; }
.justify-between { justify-content:space-between; }

/* ── PREMIUM BADGE ── */
.premium-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  font-size:.72rem; font-weight:700; color:#fff;
}

/* ── TABS ── */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:24px; overflow-x:auto; }
.tab {
  padding:10px 16px; font-size:.875rem; font-weight:500; white-space:nowrap;
  color:var(--text-muted); border:none; background:transparent;
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:.2s;
}
.tab.active { color:var(--text); border-bottom-color:var(--accent); }

/* ── ALERTS ── */
.alert { padding:12px 16px; border-radius:10px; font-size:.875rem; margin-bottom:16px; }
.alert-error { background:rgba(220,38,38,.15); border:1px solid rgba(220,38,38,.3); color:#fca5a5; }
.alert-success { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3); color:#86efac; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

/* ════════════════════════════════
   MOBILE — max 768px
   ════════════════════════════════ */
@media (max-width: 768px) {

  /* Navbar: solo logo en mobile, nav abajo */
  .navbar { padding:0 16px; }
  .nav-links a:not(.btn-accent):not([href="/profile.php"]) { display:none; }
  .nav-links a[href="/profile.php"] { display:flex; }

  /* Bottom nav visible */
  .bottom-nav { display:flex; }

  /* Page: padding bottom para bottom nav */
  .page { padding-bottom: calc(var(--bottom-h) + 12px); }

  /* Hero mobile */
  .hero { padding: 80px 0 60px; text-align:center; }
  .hero-content { max-width:100%; }
  .hero-stats { justify-content:center; }
  .hero-content .flex { justify-content:center; }

  /* Cards */
  .card { padding:16px; }

  /* Dashboard swipe */
  .profile-card { max-width:100%; }
  .swipe-btn { width:58px; height:58px; font-size:1.3rem; }

  /* Matches grid más chico */
  .matches-grid { grid-template-columns: repeat(3, 1fr); gap:8px; }

  /* CHAT mobile: pantalla completa */
  .chat-layout {
    grid-template-columns: 1fr;
    height: calc(100vh - var(--nav-h) - var(--bottom-h));
    position: relative;
  }
  .chat-list {
    position:fixed; inset:var(--nav-h) 0 var(--bottom-h) 0;
    z-index:50; transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1); border-right:none;
  }
  .chat-list.open { transform:translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.5); }
  .chat-window { height:100%; }
  .chat-header { padding:10px 12px; }
  .chat-messages { padding:12px; }
  .chat-input { padding:8px 10px; }
  .message { max-width:86%; font-size:.875rem; }

  /* Profile */
  .profile-header { height:220px; border-radius:0; }

  /* Search filtros */
  .search-grid { grid-template-columns:1fr 1fr !important; }

  /* Premium page 2 cols → 1 col */
  .premium-cols { grid-template-columns:1fr !important; }
  .plan-grid { grid-template-columns:1fr 1fr !important; }

  /* Register grid 2col → 1col */
  .register-grid { grid-template-columns:1fr !important; }

  /* Ocultar labels largos en navbar */
  .nav-links .nav-label { display:none; }

  /* Botones más grandes para touch */
  .btn { min-height:44px; }
  .btn-sm { min-height:36px; }
}

@media (max-width: 380px) {
  .matches-grid { grid-template-columns: repeat(2, 1fr); }
  .swipe-btn { width:52px; height:52px; font-size:1.2rem; }
  .plan-grid { grid-template-columns:1fr !important; }
}

.online-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;display:inline-block;position:absolute;}
.offline-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;display:inline-block;position:absolute;}