/* =========================
   ALADIN SYSTEM CORE
   QWIPLUS DARK PREMIUM THEME
========================= */

:root{

  /* ============ FONDOS ============ */
  --bg: #0B0F14;              /* Azul marino profundo */
  --bg-soft: #12161D;         /* Gris oscuro suave */
  --card: #161B24;            /* Card oscura */
  --card-bg: #161B24;         /* Alias */

  /* ============ TEXTO ============ */
  --text: #F5F7FA;            /* Blanco suave */
  --text-main: #F5F7FA;
  --text-soft: #94A3B8;       /* Gris azulado */
  --muted: #94A3B8;

  /* ============ ACENTOS ============ */
  --accent: #2563EB;          /* Azul eléctrico */
  --accent1: #2563EB;
  --accent2: #F5B942;         /* Dorado premium */
  --accent-light: #38BDF8;    /* Azul claro */

  /* ============ BORDES ============ */
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.05);

  /* ============ MISC ============ */
  --radius: 18px;
  --radius-soft: 16px;
  --radius-pill: 999px;
  --radius-main: 16px;

  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.3);

}

/* =========================
   RESET
========================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* =========================
   ANDROID APP CONTAINER
========================= */

#app{
  width:100%;
  max-width:1200px;
  margin:auto;
  min-height:100vh;
  background:var(--bg);
  position:relative;
}

/* =========================
   PAGE
========================= */

.page{
  padding:16px;
  padding-bottom:120px;
  background:var(--bg);
  color:var(--text);
}

/* =========================
   HOME SECTION
========================= */

.home-section{
  padding:16px;
}

/* =========================
   GRID SYSTEM
========================= */

.ads-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* =========================
   MARKETPLACE CARD SYSTEM
========================= */

/* CARD */

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition:.18s ease;
}

.card:active{
  transform:scale(.97);
}

/* IMAGE */

.card-image{
  position:relative;
  aspect-ratio:1/1;
  background: #1a1f2e;
}

.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* FAVORITE FLOAT */

.fav-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border-radius:50%;
  background: rgba(22, 27, 36, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #F5F7FA;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
  z-index: 10;           
  pointer-events: all;   
  cursor: pointer;       
}


/* INFO */

.card-info{
  padding:10px;
}

/* TITLE */

.card-title{
  font-size:13px;
  font-weight:500;
  color: var(--text);
  line-height:1.2;
  margin-bottom:4px;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* PRICE */

.price{
  font-size:16px;
  font-weight:700;
  color: var(--accent2);
  margin-bottom:6px;
}

/* SELLER */

.card-seller{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color: var(--muted);
}

/* =========================
   BOTTOM NAV SYSTEM
========================= */

.bottom-nav{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;

  background: linear-gradient(90deg, #2563EB, #38BDF8);

  display: flex;
  justify-content: space-around;
  align-items: center;

  z-index: 100;
}

.nav-item{
  background:none;
  border:none;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:20px;
}

.nav-item small{
  font-size:11px;
}

/* =========================
   AVATAR SYSTEM
========================= */

.avatar{
  border-radius:50%;
  overflow:hidden;
  background: #1a1f2e;
  border: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* tamaños mobile reales */

.avatar-sm{
  width:26px;
  height:26px;
}

.avatar-md{
  width:40px;
  height:40px;
}

.avatar-lg{
  width:40px;
  height:40px;
}

.avatar-placeholder{
  font-size:13px;
  color: var(--muted);
}