/* =========================================
   HEADER FIX Z-INDEX (SOLUCIÓN DEFINITIVA)
=========================================== */
header {
    background: #111;
    padding: 10px;
    border-bottom: 1px solid #222;

    position: sticky;
    top: 0;

    z-index: 999999; /* ?? ULTRA ALTO (evita cualquier overlay) */

    transform: translateZ(0); /* ?? crea su propia capa (fix scroll bug) */
}

/* Contenedor interno del header */
.top-row {
    display: flex;
    align-items: center;
    gap: 10px;

    position: relative;
    z-index: 999999;
}

/* Asegura que los filtros estén SIEMPRE arriba */
.filter-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;

    overflow-x: auto;

    position: relative;
    z-index: 999999;

    background: #111; /* ?? tapa lo que pase debajo */
}

/* =========================================
   FIX CONTENEDOR TARJETAS
=========================================== */
.card {
    position: relative;
    overflow: hidden; /* ?? CLAVE */
    z-index: 1;
}

/* ========================================= 
   COLOR DE BOTONES MENU PARTE SUP
=========================================== */
.filter-row{
  display:flex;
  gap:8px;
  padding:10px 12px;
}

.filter-row .chip{
  padding:7px 14px;
  border-radius:18px;
  background:#1f1f1f;
  color:#bbb;
  font-size:13px;
}

.filter-row .chip.active{
  background:#ff2d55;
  color:white;
}

/* ========================================= 
   DISEÑO DE TARJETA DESTACADOS PARTE SUP
=========================================== */
.featured-top-card {
  width: 100%;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(145deg, #111827, #1f2937);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

@media (min-width: 1024px) {
  .featured-top-card {
    padding: 25px 40px;
  }
}

/* Para dejar margen superior tarjeta de usuarios destacados */
.featured-top-card {
  margin-top: 5px;
  padding-top: 22px;
}

.featured-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.featured-top-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #222;
}

.featured-top-sub {
  font-size: 0.9rem;
  color: #666;
  margin-top: 4px;
}

.featured-top-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #007bff; /* azul elegante */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.featured-top-btn:hover {
  background-color: #0056b3;
}

.featured-top-btn svg {
  stroke: #fff;
}

.featured-top-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: start;
}

/* =========================================
   DISEÑO APP PWA PORTADA
=========================================== */
.install-premium-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #ff2d55, #ff6b81);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 45, 85, 0.4);
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.install-premium-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 45, 85, 0.6);
}

.install-premium-btn:active {
  transform: scale(0.95);
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper svg {
  width: 16px;
  height: 16px;
}

.pwa-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

/* =========================================
   DECORACION URL CHAT PUBLICO 
=========================================== */
.msg-text a {
  color: #1e90ff;
  text-decoration: underline;
  word-break: break-word;
}

/* =========================================
   ACTIVAR GPS  
=========================================== */
.gps-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.gps-box{
  background: #111;
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  width: 90%;
  max-width: 320px;
  color: #fff;
}

.gps-box button{
  margin-top: 15px;
  padding: 10px 20px;
  border: none;
  background: #00ff3c;
  color: #000;
  border-radius: 8px;
  font-weight: bold;
}

/* =========================================
   PUNTO VERDE DE ONLINE EN EL BUZON  
=========================================== */
.inbox-avatar{
  position: relative;
  width: 52px;
  height: 52px;
}

.online-dot{
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #00ff3c;
  border-radius: 50%;
  border: 2px solid #111;
  box-shadow: 0 0 6px #00ff3c;
}


/* =========================================
   ONLINE USUARIOS DESTACADOS (FIX PRO)
=========================================== */

/* CONTENEDOR */
.avatar-wrapper{
  position:relative;
  width:45px;
  height:45px;
}

.avatar-wrapper img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  cursor:pointer;
  transition:box-shadow .3s ease;
}

/* PUNTICO BASE */
.online-dot{
  position:absolute;
  bottom:2px;
  right:2px;
  width:10px;
  height:10px;
  border-radius:50%;
  border:2px solid #000;
}

/* ?? ONLINE */
.online-dot.online{
  background:#00ff4c;
  box-shadow:0 0 8px #00ff4c;
  animation:pulseOnline 1.5s infinite;
}

/* ? OFFLINE */
.online-dot.offline{
  background:#666;
  box-shadow:none;
}

/* ANIMACIÓN ONLINE */
@keyframes pulseOnline{
  0%{
    transform:scale(1);
    box-shadow:0 0 6px #00ff4c;
  }
  100%{
    transform:scale(1.2);
    box-shadow:0 0 12px #00ff4c;
  }
}

/* =========================================
   GLOW SOLO SI ESTA ONLINE
=========================================== */

/* SOLO cuando tenga clase .online */
.avatar-wrapper.online img{
  box-shadow:0 0 8px #00ffcc,
             0 0 16px #00ffcc;
  animation:neonPulse 1.5s infinite alternate;
}

/* OFFLINE = sin glow */
.avatar-wrapper.offline img{
  box-shadow:none;
}

/* ANIMACIÓN GLOW */
@keyframes neonPulse{
  from{
    box-shadow:0 0 6px #00ffcc;
  }
  to{
    box-shadow:0 0 18px #00ffcc;
  }
}

/* =========================================
   ESTYLO DE BOTON HISTORIA MENU SUPERIOR 
=========================================== */
.story-card-add{
  cursor: pointer;
}

.story-add-full{
  height: 100%;
  width: 100%;
  border-radius: 18px;
  background: linear-gradient(145deg, #151515, #0e0e0e);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all .35s ease;
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}

/* Hover elegante */
.story-card-add:hover .story-add-full{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,204,0,0.4);
}

/* Botón + */
.story-add-plus{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffcc00, #ffb700);
  color: #000;
  font-size: 30px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(255,204,0,0.35);
  transition: transform .3s ease;
}

/* Animación del + */
.story-card-add:hover .story-add-plus{
  transform: scale(1.12);
}

.story-add-label{
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #e8e8e8;
  letter-spacing: .4px;
}

/* ===== ESTILO DE VISTAS HISTORIA ESTILO MODERNO ===== */

.story-viewer-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:10px;
  transition:background 0.2s ease;
}

.story-viewer-item:hover{
  background:#1e1e1e;
}

.story-viewer-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid #333;
}

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

.story-viewer-info{
  flex:1;
  min-width:0;
}

.story-viewer-name{
  font-size:13px;
  font-weight:600;
  color:#fff;
}

.story-viewer-time{
  font-size:11px;
  color:#888;
}

.story-empty{
  font-size:12px;
  color:#888;
  padding:8px;
}

.story-views-counter{
  font-weight:600;
  color:#fff;
}


/* =====================================================
   VARIABLES GLOBALES
===================================================== */

:root {
    --bg: var(--bg-main);
    --bg-soft: var(--bg-soft);
    --card-bg: var(--bg-card);
    --accent: #ffcc00;
    --text-main: var(--text-main);
    --text-soft: var(--text-soft);
    --danger: #ff3b30;
}

/* MODO CLARO */
body.light-mode {
  --bg-main: #f4f6f9;
  --bg-card: #ffffff;
  --bg-soft: #eef1f5;

  --text-main: #1a1a1a;
  --text-soft: #555;

  --border-color: #e2e6ea;
}

/* ========================================= 
   TARJETA DESTACADOS (VERSIÓN FINAL)
=========================================== */
.featured-top-card{
  position:relative;
  width:100%;
  padding:18px;
  border-radius:18px;
  margin-top:5px;

  background:linear-gradient(145deg,#1a1a22,#111118);

  border:1px solid #000;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 8px 18px rgba(0,0,0,0.45);

  transition:all .25s ease;
}

.featured-top-card:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.8),
    0 12px 25px rgba(0,0,0,0.6);
}

/* =========================================
   HEADER
=========================================== */
.featured-top-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

.featured-top-title{
  font-size:16px;
  font-weight:700;
  color:#fff;
}

.featured-top-sub{
  font-size:13px;
  color:#b3b3b3;
}

/* =========================
   TEXTO
========================= */

.featured-top-title{
  font-size:16px;
  font-weight:700;
  color:#fff;
  letter-spacing:.2px;
}

.featured-top-sub{
  font-size:13px;
  color:#b3b3b3;
  margin-top:2px;
}

/* =========================================
   BOTÓN
=========================================== */
.featured-top-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg,#ffcc00,#ffb800);
  color:#000;
  border:none;
  border-radius:999px;
  padding:8px 16px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(255,204,0,.35);
}

/* =========================================
   AVATARES (SLIDER)
=========================================== */
.featured-top-avatars{
  display:flex;
  flex-wrap: nowrap;      /* ?? IMPORTANTE */
  gap:10px;

  overflow-x:auto;
  overflow-y:hidden;

  padding-bottom:6px;

  scroll-behavior:smooth;
}

.featured-top-avatars{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;

  overflow-x:auto;
  overflow-y:hidden;
}

/* evitar que bajen */
.featured-top-avatars .sfa{
  flex:0 0 auto;
}

.featured-slider-wrapper{
  position: relative;
}

/* Botones */
.slider-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 32px;
  height: 32px;
  border-radius: 50%;

  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 20px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* posiciones */
.slider-btn.left{
  left: 0;
}

.slider-btn.right{
  right: 0;
}

/* ocultar en móvil */
@media (max-width:768px){
  .slider-btn{
    display:none;
  }
}


.featured-top-avatars::-webkit-scrollbar{
  height:6px;
}

.featured-top-avatars::-webkit-scrollbar-track{
  background:transparent;
}

.featured-top-avatars::-webkit-scrollbar-thumb{
  background:#555;
  border-radius:10px;
}

.featured-top-avatars::-webkit-scrollbar-thumb:hover{
  background:#777;
}

/* ========================================== 
   estilo texto portada, term,polit,soport
=========================================== */
.session-link-btn{
  width:100%;
  padding:10px 14px;
  background:none;
  border:none;
  display:flex;
  align-items:center;
  gap:10px;

  /* color gris suave */
  color:#aaa;
  font-size:14px;
  font-weight:400;

  cursor:pointer;
  border-radius:8px;
  transition:background .2s, color .2s;
}

.session-link-btn:hover{
  background:rgba(255,255,255,0.05);
  color:#eaeaea;
}

.icon-wrap{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===============================
   MODAL BUZÓN
================================ */
#inboxModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  display: none;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* ===============================
   CONTENEDOR BUZÓN
================================ */
#inboxList {
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg,#0b0f1a,#070a12);
  border-radius: 20px;
  padding: 10px;
  box-shadow:
    0 0 25px rgba(0,255,255,.15),
    inset 0 0 0 1px rgba(0,255,255,.12);
}

/* ===============================
   ITEM CONVERSACIÓN
================================ */
.inbox-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin: 8px 0;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: all .25s ease;
  position: relative;
}

.inbox-item:hover {
  background: rgba(0,255,255,.08);
  box-shadow: 0 0 12px rgba(0,255,255,.25);
}

/* ===============================
   AVATAR
================================ */
.inbox-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  position: relative;
}

.inbox-avatar img,
.avatar-fallback {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-fallback {
  background: linear-gradient(135deg,#00f0ff,#00ff9d);
  color: #000;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 12px rgba(0,255,255,.6);
}

/* ===============================
   AVATAR BASE
================================ */
.inbox-avatar {
  position: relative;
}

/* ===============================
   ONLINE (??)
================================ */
.inbox-avatar.online::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00ff9d;
  box-shadow: 0 0 6px rgba(0,255,157,.9);
  border: 2px solid #05070d;
}

/* ===============================
   VISTO RECIENTE (?)
================================ */
.inbox-avatar.recent::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffcc00;
  box-shadow: 0 0 6px rgba(255,204,0,.9);
  border: 2px solid #05070d;
}

/* ===============================
   OFFLINE ? NO muestra nada
================================ */
.inbox-avatar.offline::after {
  display: none;
}

/* ===============================
   TEXTO PRINCIPAL
================================ */
.inbox-main {
  flex: 1;
  margin-left: 12px;
  overflow: hidden;
}

.inbox-name {
  font-size: 15px;
  font-weight: 600;
  color: #e6ffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-last {
  font-size: 13px;
  color: #9ff;
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===============================
   META (HORA + UNREAD)
================================ */
.inbox-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 8px;
}

.inbox-meta div:first-child {
  font-size: 11px;
  color: #8ff;
  opacity: .7;
}

/* ===============================
   CONTADOR NO LEÍDOS
================================ */
.inbox-count {
  margin-top: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: linear-gradient(135deg,#ff0080,#ff4fd8);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255,0,128,.6);
}

/* ===============================
   NO LEÍDO DESTACADO
================================ */
.inbox-item.unread {
  background: rgba(0,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,255,255,.25);
}

/* ===============================
   BOTÓN ELIMINAR
================================ */
.inbox-delete-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s;
}

.inbox-delete-btn:hover {
  opacity: 1;
}

/* ===============================
   SCROLL NEÓN
================================ */
#inboxList::-webkit-scrollbar {
  width: 6px;
}

#inboxList::-webkit-scrollbar-thumb {
  background: linear-gradient(#00f0ff,#00ff9d);
  border-radius: 4px;
}


/* ==========================================================
  POSICION DE LA FOTO DE PERFIL DERECHA & IZQUIERDA CHAT PV
========================================================== */
.chat-msg {
  display: flex;
  margin: 10px 0;
  align-items: flex-end;
  max-width: 100%;
}

/* MENSAJES DEL OTRO (IZQUIERDA) */
.chat-msg.other {
  justify-content: flex-start;
  padding-right: 25%;
}

.chat-msg.other .msg-bubble {
  background: #2b2b2b;
  color: #fff;
  border-radius: 16px 16px 16px 4px;
  padding: 10px 14px;
  max-width: 75%;
  word-wrap: break-word;
}

/* MIS MENSAJES (DERECHA) */
.chat-msg.me {
  justify-content: flex-end;
  padding-left: 25%;
}

.chat-msg.me .msg-bubble {
  background: #ffcc00;
  color: #000;
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  max-width: 75%;
  word-wrap: break-word;
}

/* AVATAR */
.msg-avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}


/* ==========================================================
   VARIABLES, BASE, RESET
========================================================== */
:root {
    --bg: #000;
    --bg-soft: #0a0a0a;
    --card-bg: #151515;
    --accent: #ffcc00;
    --text-main: #fff;
    --text-soft: #b5b5b5;
    --danger: #ff3b30;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    background: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    body {
        max-width: 720px;
        margin: 0 auto;
        background: #000;
        overflow-x: hidden;
    }

    html {
        background: #000;
    }
}

/* ==========================================================
   HEADER (FIX Z-INDEX + CAPAS)
========================================================== */
header {
    background: #111;
    padding: 10px;
    border-bottom: 1px solid #222;

    position: sticky;
    top: 0;

    z-index: 5000; /* ?? CLAVE: siempre por encima */
}

/* Contenido interno del header */
.top-row {
    display: flex;
    align-items: center;
    gap: 10px;

    position: relative;
    z-index: 5001; /* ?? asegura prioridad interna */
}

.avatar-round {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #333;
}

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

.loc-input {
    flex: 1;
    background: #1c1c1c;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 13px;
    color: #aaa;
}

.header-actions {
    display: flex;
    gap: 6px;

    position: relative;
    z-index: 5001; /* ?? evita solapamientos */
}

.round-btn {
    background: #1c1c1c;
    color: #fff;
    border: 1px solid #333;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
}

.logout-btn {
    background: #330000;
    border-color: #ff3b30;
    color: #ffb3b3;
}

/* ==========================================================
  ESTILO DE TITULO, NOMBRE, PEQUEÑA DESCRIPCION PORTADA
========================================================== */
/* ==============================
  ESTILO DE PORTADA LOGIN NEON
============================== */

.session-modal-header {
  position: relative;
  background: linear-gradient(135deg, #0f0f1a 0%, #090912 100%);
  padding: 28px 22px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  text-align: center;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-bottom: 1px solid rgba(0,255,255,0.15);
}

/* Glow decorativo sutil */
.session-modal-header::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle, rgba(0,255,255,0.12) 0%, transparent 60%);
  transform: rotate(25deg);
  pointer-events: none;
}

/* BADGE NEON */
.session-badge {
  display: inline-block;
  background: rgba(0, 255, 255, 0.08);
  border: 1px solid rgba(0,255,255,0.4);
  color: #00f7ff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
  box-shadow: 0 0 12px rgba(0,255,255,0.4);
}

/* TÍTULO */
.modal-title {
  font-size: 30px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

/* Marca con efecto neon */
.modal-title .highlight {
  color: #00f7ff;
  text-shadow:
    0 0 5px #00f7ff,
    0 0 15px #00f7ff,
    0 0 25px rgba(0,255,255,0.6);
}

/* SUBTÍTULO */
.session-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #b8c1ff;
  opacity: 0.9;
  line-height: 1.6;
}

/* ==============================
   BODY DEL LOGIN
============================== */

.session-body {
  padding: 24px;
  background: #0c0c14;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  border-top: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.6),
    inset 0 0 30px rgba(0,255,255,0.03);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ==========================================================
  BOTON DE CAMBIAR CONTRASEÑA
========================================================== */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 10, 0.85);
  backdrop-filter: blur(6px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal{
  background: #111;
  color: #fff;
  width: 92%;
  max-width: 420px;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

/* ==========================================================
  ESTILO DE BOTON DE COMPARTIR
========================================================== */
/* OVERLAY */
div[style*="inset:0"][style*="rgba(0,0,0,.8)"]{
  backdrop-filter: blur(4px);
}

/* CAJA */
div[style*="background:#111"][style*="border-radius:16px"]{
  min-width:260px;
  max-width:300px;
  box-shadow:0 15px 35px rgba(0,0,0,.7);
}

/* TÍTULO */
div[style*="background:#111"] p{
  font-size:16px;
  font-weight:600;
  letter-spacing:.3px;
}

/* LINKS */
div[style*="background:#111"] a{
  display:block;
  padding:12px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  margin:8px 0;
}

/* WHATSAPP */
div[style*="background:#111"] a[href*="wa.me"]{
  background:#25D366;
  color:#000;
}

/* FACEBOOK */
div[style*="background:#111"] a[href*="facebook.com"]{
  background:#1877F2;
  color:#fff;
}

/* BOTÓN CERRAR */
div[style*="background:#111"] button{
  margin-top:14px;
  background:#333;
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:10px;
  font-size:14px;
  cursor:pointer;
}


/* ==========================================================
   CHIPS / FILTROS
========================================================== */
.filter-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
}

.chip {
    background: #111;
    border: 1px solid #333;
    padding: 6px 12px;
    border-radius: 20px;
    color: #aaa;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.chip.active {
    background: var(--accent);
    color: #000;
    font-weight: 700;
}

/* ==========================================================
   COLORES DE ONLINE, RECIENTE Y OFFLINE (FIX COMPLETO)
========================================================== */
.online-dot-card {
  width: 9px;
  height: 9px;
  border-radius: 50%;

  position: absolute;
  top: 6px;
  right: 6px;

  z-index: 2; /* correcto */

  pointer-events: none; /* ?? evita bugs al hacer click */
}

/* ?? Online */
.online-dot-card.p-online {
  background: #00ff66;
  box-shadow: 0 0 8px rgba(0,255,102,.8);
}

/* ?? Reciente */
.online-dot-card.p-recent {
  background: #ffcc00;
  box-shadow: 0 0 6px rgba(255,204,0,.7);
}

/* ? Offline */
.online-dot-card.p-offline {
  background: #666;
  opacity: .85;
}

/* ===============================
   VERIFICADO — CÍRCULO PRO
================================ */
.verified-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 10px;
  height: 10px;
  margin-left: 4px;

  background: linear-gradient(135deg, #3ea6ff, #1e90ff);
  border-radius: 50%;

  box-shadow:
    0 0 6px rgba(62,166,255,.8),
    0 0 12px rgba(62,166,255,.5);

  flex-shrink: 0;
}

.verified-badge svg{
  width: 10px;
  height: 10px;
  stroke: #fff;
  stroke-width: 3;
}



/* ================================
   FONDO MODAL
================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, #0f1020 0%, #050510 70%);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================
   TARJETA PRINCIPAL
================================ */
.session-modal-card {
  width: 92%;
  max-width: 420px;
  background: linear-gradient(180deg, #0c0f1e, #070811);
  border-radius: 20px;
  border: 1px solid rgba(0, 255, 255, 0.25);
  box-shadow:
    0 0 25px rgba(0, 255, 255, 0.15),
    0 0 60px rgba(255, 0, 255, 0.12);
  animation: neonFadeIn 0.5s ease;
}

/* ================================
   CABECERA
================================ */
.session-modal-header {
  padding: 24px 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}

.session-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 10px rgba(0,240,255,0.5);
  margin-bottom: 10px;
}

.modal-title {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(90deg, #00f0ff, #ff00ff, #ffe600);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.session-subtitle {
  font-size: 14px;
  color: #b6c2ff;
  margin-top: 8px;
  line-height: 1.4;
}

/* ================================
   CUERPO
================================ */
.session-body {
  padding: 22px;
}

/* ================================
   CAMPOS
================================ */
.session-field {
  margin-bottom: 16px;
}

.session-field label {
  font-size: 13px;
  font-weight: 600;
  color: #9dfcff;
  margin-bottom: 6px;
  display: block;
}

.input-std {
  width: 100%;
  padding: 14px 14px;
  border-radius: 12px;
  background: #0b1020;
  border: 1px solid rgba(0,255,255,0.25);
  color: #ffffff;
  font-size: 15px;
  outline: none;
  transition: all 0.25s ease;
}

.input-std::placeholder {
  color: #6b7cbf;
}

.input-std:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 0 2px rgba(0,240,255,0.25),
              0 0 14px rgba(0,240,255,0.6);
}

/* ================================
   CONTRASEÑA
================================ */
.pass-wrapper {
  position: relative;
}

.toggle-pass-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
}

.eye-icon {
  width: 22px;
  height: 22px;
  fill: #00f0ff;
  opacity: 0.7;
}

.toggle-pass-btn:hover .eye-icon {
  opacity: 1;
}

/* ================================
   BOTÓN PRINCIPAL
================================ */
.session-main-btn {
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  color: #000;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, #00f0ff, #ff00ff, #ffe600);
  box-shadow:
    0 0 20px rgba(0,240,255,0.7),
    0 0 40px rgba(255,0,255,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.session-main-btn:hover {
  transform: scale(1.03);
  box-shadow:
    0 0 30px rgba(0,240,255,0.9),
    0 0 60px rgba(255,0,255,0.6);
}

/* ================================
   BOTÓN SECUNDARIO
================================ */
.session-secondary-btn {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.session-secondary-btn:hover {
  border-color: #00f0ff;
  box-shadow: 0 0 18px rgba(0,240,255,0.6);
}

/* ================================
   ERRORES
================================ */
.session-error {
  margin-top: 12px;
  font-size: 14px;
  color: #ff4d4d;
  text-align: center;
  text-shadow: 0 0 10px rgba(255,77,77,0.6);
}

/* ================================
   ANIMACIÓN
================================ */
@keyframes neonFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================
   GRID DE USUARIOS 
========================================================== */

main {
    flex: 1;
    padding: 6px;
    padding-bottom: 120px;
    /* espacio por la barra inferior */
}

/* GRID DE USUARIOS */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:8px;
    width:100%;
}

@media (min-width:768px){
    .grid{
        grid-template-columns:repeat(5,1fr);
    }
}

/* TARJETA BASE */
.card {
    background: #151515;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* FOTO  aspecto cuadrado */
.card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

/* USUARIO DESTACADO */
.card-featured {
    border: 2px solid #ffcc00;
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.6);
}

.card-featured-pill {
    font-size: 10px;
    padding: 2px 6px;
    background: linear-gradient(135deg, #ffcc00, #ff9f1c);
    border-radius: 999px;
    position: absolute;
    bottom: 23px;
    left: 4px;
    color: #000;
}

/* PUNTO VERDE */
.online-dot-card {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #000;
    background: #00ff5a;
}

.online-dot-card.offline {
    background: #777;
}

/* ICONO CHAT */
.chat-icon-wrap {
    position: absolute;
    top: 6px;
    right: 6px;
}

.chat-icon-btn {
    background: rgba(0, 0, 0, 0.6);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chat-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: red;
    color: white;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 999px;
    display: none;
}

/* CAPA DE TEXTO */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

/* ==========================================================
   FILA NOMBRE (IZQ) + DISTANCIA (DER)
========================================================== */

.card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 4px;
}

/* Nombre de usuario + edad (lado izquierdo) */
.card-name{
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0; /* clave para ellipsis */
}

.card-name-text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* ?? AJUSTE DE TAMAÑO */
  font-size: 10px;      /* puedes probar 11px si lo quieres aún más chico */
  font-weight: 600;
  line-height: 1.1;
}

/* Distancia (lado derecho) */
.card-dist {
    font-size: 11px;
    color: #ccc;
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
    text-align: right;
}

/* ==========================================================
   CLASES ANTIGUAS (META/BIO)  DESACTIVADAS
========================================================== */

/* Por si an se llega a crear .card-meta/.meta-dist desde algn JS viejo */
.card-meta {
    display: none;
    /* ocultamos fila antigua */
}

.meta-dist {
    display: none;
}

/* Bio eliminada */
.meta-bio {
    display: none !important;
}


/* ==========================================================
   NAV INFERIOR
========================================================== */
/* ====== BOTTOM NAV ====== */
.bottom-nav {
    position: fixed;
    bottom: calc(var(--banner-height) + var(--nav-spacing));
    left: 16px;
    right: 16px;

    height: var(--nav-height);

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

    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(15px);

    border-radius: 20px;

    border: 1px solid rgba(255, 0, 150, 0.4);

    box-shadow:
        0 0 10px rgba(255, 0, 150, 0.4),
        0 0 20px rgba(255, 0, 150, 0.3),
        0 0 40px rgba(255, 0, 150, 0.2);

    z-index: 1000;
}

.bottom-nav i,
.bottom-nav svg {
    color: #ff0096;
    font-size: 22px;
    transition: 0.3s;
}

.bottom-nav i:hover,
.bottom-nav svg:hover {
    color: #fff;
    text-shadow:
        0 0 5px #ff0096,
        0 0 10px #ff0096,
        0 0 20px #ff0096;
}

/* ====== ITEMS ====== */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: #aaa;
    position: relative; /* necesario para badge */
}

.nav-item.active {
    color: var(--accent);
}

/* ====== ICONOS ====== */
.ni-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #1c1c1c;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item.active .ni-icon {
    background: var(--accent);
    color: #000;
}

/* ====== BADGE ====== */
.nav-badge {
    position: absolute;
    top: 0;
    right: 12px;
    background: red;
    color: white;
    padding: 2px 5px;
    font-size: 10px;
    border-radius: 10px;
    display: none;
}

/* ==========================================================
   BOTÓN FLOTANTE
========================================================== */
.floating-edit {
    position: fixed;
    right: 16px;
    bottom: 70px;
    background: var(--accent);
    color: #000;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .7);
    cursor: pointer;
    z-index: 2000;
}

/* ==========================================================
   ESTILO HISTORIAS (miniaturas + modal + viewer)
========================================================== */
#storiesWrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 12px 0;
    background: #000;

    /* Altura fija que evita cortes */
    height: 110px;
    min-height: 110px;
    max-height: 110px;
}

.storyItem {
    text-align: center;
    cursor: pointer;
}

.storyAvatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    overflow: hidden;
    background: #111;
}

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

.storyName {
    font-size: 12px;
    margin-top: 4px;
    color: #ddd;
}

/* Historias grandes */
.stories-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
}

.story-card-big {
    position: relative;
    flex: 0 0 calc(50% - 6px);
    height: 220px;
    border-radius: 18px;
    overflow: hidden;
    background: #111;
    cursor: pointer;
}

.story-avatar-circle {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    overflow: hidden;
}

.story-footer {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    padding-top: 40px;
}

.story-video-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0, 0, 0, 0.7);
    padding: 3px 7px;
    border-radius: 999px;
    color: #ffcc00;
}

.story-progress-fill {
    background: var(--accent);
    height: 100%;
    width: 0%;
}

/* FORZAR HISTORIAS CUADRADAS */
.storyAvatar,
.story-avatar-circle {
    border-radius: 12px !important;
}

/* ==========================================================
   MODALES BASE
========================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.modal {
    width: 100%;
    max-width: 480px;
    background: #101010;
    border-radius: 18px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 16px;
}

/* ==========================================================
   LOGIN MODAL
========================================================== */
#sessionOverlay .session-modal-card {
    max-width: 380px;
    background: radial-gradient(circle at top left, #252525, #050505 60%, #000);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.9);
}

.session-field label {
    font-size: 12px;
    color: #ccc;
}

.pass-wrapper {
    display: flex;
    border-radius: 10px;
    border: 1px solid #333;
    background: #121212;
    padding-right: 4px;
}

.toggle-pass-btn {
    background: none;
    border: none;
    cursor: pointer;
}

/* ==========================================================
   CHAT PRIVADO / CHAT PUBLICO
========================================================== */
.chat-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .75);
    z-index: 4000;
}

.chat-window {
    width: 100%;
    max-width: 480px;
    height: 100%;
    background: #050505;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
}

.chat-header {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #111;
}

/* ==========================================================
   PERFIL / VIEWPROFILE / PRIVATE PHOTOS
========================================================== */
.profile-avatar-big {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    overflow: hidden;
}

.profile-section {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #222;
}

.profile-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

.profile-bio {
    font-size: 13px;
    color: #ddd;
}

.profile-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.private-locked-box {
    background: #151515;
    padding: 10px;
    margin-top: 10px;
    border-radius: 10px;
    display: none;
}

/* ==========================================================
   SIDE MENU
========================================================== */
#sideMenu {
    position: fixed;
    top: 0;
    left: -270px;
    width: 260px;
    bottom: 0;
    background: #050505;
    transition: left .25s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, .7);
    z-index: 5000;
}

.side-featured-card {
    background: linear-gradient(135deg, #ffcc00, #ff9f1c);
    padding: 14px;
    border-radius: 14px;
    margin: 14px;
}

.side-featured-avatars {
    display: flex;
    gap: 10px;
}

/* ==========================================================
   PWA BANNER
========================================================== */
.pwa-banner {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 70px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
}

/* ==========================================================
   PERFIL — ESTRUCTURA DEL MODAL
========================================================== */

.profile-sheet-header {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
}

.profile-main-info {
    flex: 1;
    min-width: 0;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.profile-age-pill {
    background: #1c1c1c;
    color: #ccc;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 12px;
}

.profile-status-line {
    margin-top: 4px;
    font-size: 13px;
    color: #ccc;
}

/* Foto grande */
.profile-avatar-big {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    overflow: hidden;
    background: #222;
    position: relative;
}

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

/* Botón para cambiar foto */
.avatar-edit-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Secciones */
.profile-section {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #222;
}

.profile-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 6px;
}

/* Inputs */
.input-std {
    width: 100%;
    background: #181818;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: #fff;
    margin-top: 4px;
    margin-bottom: 10px;
}

/* Boton Guardar */
.btn-primary {
    width: 100%;
    background: var(--accent);
    color: #000;
    font-weight: 700;
    border: none;
    padding: 10px;
    margin-top: 10px;
    border-radius: 12px;
    cursor: pointer;
}

/* Zona peligrosa */
.danger-zone {
    background: #190000;
    border: 1px solid #ff3b30;
    padding: 12px;
    border-radius: 12px;
}

.profile-section-text {
    font-size: 13px;
    color: #ffb3b3;
}

/* Botón eliminar */
.btn-danger {
    width: 100%;
    background: #330000;
    border: 1px solid #ff3b30;
    padding: 10px;
    color: #ffb3b3;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
}

.chat-img {
    max-width: 70%;
    border-radius: 10px;
    display: block;
    margin-top: 5px;
}

/* VISOR DE IMAGEN GLOBAL */
#imgViewerOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.95) !important;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999999 !important;
}

/* Contenedor interno */
#imgViewerInner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Imagen centrada y escalada correctamente */
.img-viewer-img {
    max-width: 95vw !important;
    max-height: 95vh !important;
    object-fit: contain !important;
    display: block;
}

/* Boton X */
.img-viewer-close {
    position: absolute !important;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6) !important;
    border: none !important;
    color: white !important;
    font-size: 22px !important;
    border-radius: 50% !important;
    padding: 8px !important;
    cursor: pointer !important;
    z-index: 100000000 !important;
}

/* ==========================================================
   MODO CLARO AJUSTES EXTRA
========================================================== */

body.light-mode {
    background: var(--bg-main) !important;
}

body.light-mode header,
body.light-mode .card,
body.light-mode .modal,
body.light-mode .chat-window,
body.light-mode .bottom-nav {
    background: var(--bg-card) !important;
    color: var(--text-main);
}

body.light-mode .loc-input,
body.light-mode .round-btn,
body.light-mode .chip {
    background: var(--bg-soft);
    color: var(--text-main);
    border-color: var(--border-color);
}

/* ==========================================================
   MODO NEÓN BRILLANTE
========================================================== */

body.light-mode {

  --bg-main: #050510;
  --bg-card: #0c0f1e;
  --bg-soft: #111428;

  --text-main: #e6ffff;
  --text-soft: #9dfcff;

  --border-color: rgba(0,255,255,0.4);

  background: radial-gradient(circle at top, #0f1025 0%, #050510 70%);
  color: var(--text-main);
}

/* HEADER */
body.light-mode header {
  background: #0b0f1a;
  border-bottom: 1px solid rgba(0,255,255,0.3);
  box-shadow: 0 0 20px rgba(0,255,255,0.15);
}

/* CARDS */
body.light-mode .card {
  background: #0c0f1e;
  border: 1px solid rgba(0,255,255,0.25);
  box-shadow: 0 0 12px rgba(0,255,255,0.15);
}

/* BOTONES */
body.light-mode .round-btn,
body.light-mode .chip {
  background: #111428;
  border: 1px solid rgba(0,255,255,0.4);
  color: #00f0ff;
  box-shadow: 0 0 8px rgba(0,255,255,0.3);
}

/* BOTÓN ACTIVO */
body.light-mode .chip.active {
  background: linear-gradient(90deg,#00f0ff,#ff00ff,#ffe600);
  color: #000;
  box-shadow:
    0 0 12px rgba(0,240,255,0.8),
    0 0 20px rgba(255,0,255,0.6);
}

/* NAV INFERIOR */
body.light-mode .bottom-nav {
  background: #0b0f1a;
  border-top: 1px solid rgba(0,255,255,0.3);
}

/* ICONO ACTIVO */
body.light-mode .nav-item.active {
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0,240,255,0.8);
}

body.light-mode .nav-item.active .ni-icon {
  background: linear-gradient(135deg,#00f0ff,#ff00ff);
  box-shadow: 0 0 12px rgba(0,240,255,0.8);
}

/* INPUTS */
body.light-mode .input-std {
  background: #0b1020;
  border: 1px solid rgba(0,255,255,0.4);
  color: #fff;
  box-shadow: 0 0 6px rgba(0,255,255,0.2);
}

body.light-mode .input-std:focus {
  box-shadow:
    0 0 0 2px rgba(0,240,255,0.4),
    0 0 20px rgba(0,240,255,0.6);
}

/* EFECTO GENERAL NEÓN */
body.light-mode .card:hover {
  box-shadow:
    0 0 15px rgba(0,255,255,0.4),
    0 0 30px rgba(255,0,255,0.2);
  transform: scale(1.02);
  transition: 0.2s ease;
}

/* ==========================================================
   SIDE MENU – MODO NEÓN
========================================================== */

body.light-mode #sideMenu {
    background: linear-gradient(180deg,#0b0f1a,#070a12);
    border-right: 1px solid rgba(0,255,255,0.3);
    box-shadow:
        0 0 25px rgba(0,255,255,.25),
        inset -1px 0 0 rgba(0,255,255,.2);
}

/* Links del menú */
body.light-mode #sideMenu button,
body.light-mode #sideMenu a {
    color: #9dfcff;
    transition: left .35s cubic-bezier(.4,0,.2,1);
}

/* Hover */
body.light-mode #sideMenu button:hover,
body.light-mode #sideMenu a:hover {
    background: rgba(0,255,255,.08);
    color: #00f0ff;
    box-shadow: inset 0 0 10px rgba(0,255,255,.3);
}

/* Tarjeta destacada lateral */
body.light-mode .side-featured-card {
    background: linear-gradient(135deg,#00f0ff,#ff00ff);
    box-shadow:
        0 0 20px rgba(0,240,255,.6),
        0 0 40px rgba(255,0,255,.4);
    color: #000;
}


/* ==========================================
   FOTOS FLOTANTE DE TODOS LOS USUARIOS 
========================================== */

.floating-users {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.floating-users img {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.15;
  filter: blur(1px);
  animation: floatMove linear infinite;
}

@keyframes floatMove {
  0% {
    transform: translateY(110vh);
  }
  100% {
    transform: translateY(-10vh);
  }
}






/* =========================================
   BILLETERA MATCHBOY
=========================================== */
.wallet-modal-box{
  width:min(460px,94vw);
  max-width:460px;
  max-height:90vh;
  overflow:hidden;
  padding:0!important;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,#10141f,#07090f)!important;
  color:#fff;
}

.wallet-modal-header{
  padding:13px 15px!important;
  margin:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:#0b0d14!important;
}

.wallet-body{
  padding:15px;
  overflow-y:auto;
  max-height:calc(90vh - 54px);
}

.wallet-hero{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:18px;
  border-radius:20px;
  background:radial-gradient(circle at top left,rgba(0,224,164,.24),transparent 45%),linear-gradient(135deg,#101d1a,#111827);
  border:1px solid rgba(0,224,164,.22);
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  margin-bottom:12px;
}

.wallet-label{font-size:12px;color:#aeb7c8;margin-bottom:5px;}
.wallet-balance{font-size:30px;font-weight:900;color:#00e0a4;letter-spacing:-.04em;}
.wallet-small{font-size:12px;color:#bcc6d8;margin-top:4px;line-height:1.35;}
.wallet-icon{font-size:36px;filter:drop-shadow(0 8px 18px rgba(0,224,164,.25));}

.wallet-grid-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.wallet-stat-card{background:#0d111b;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:13px;}
.wallet-stat-card strong{display:block;font-size:20px;color:#ffcc00;margin:3px 0;}
.wallet-stat-card small{display:block;font-size:11px;color:#8f9ab0;line-height:1.3;}

.wallet-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px;}
.wallet-actions .wallet-btn-ghost{grid-column:1 / -1;}
.wallet-btn{border:0;border-radius:13px;padding:11px 12px;font-weight:800;cursor:pointer;color:#fff;}
.wallet-btn-primary{background:linear-gradient(135deg,#00b884,#00e0a4);color:#04110d;}
.wallet-btn-secondary{background:linear-gradient(135deg,#ffcc00,#ffb300);color:#111;}
.wallet-btn-ghost{background:#151b29;color:#dfe7f7;border:1px solid rgba(255,255,255,.08);}

.wallet-recharge-box{background:#0d111b;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:13px;margin-bottom:12px;}
.wallet-section-title{font-size:14px;font-weight:800;color:#fff;margin-bottom:9px;}
.wallet-input{width:100%;box-sizing:border-box;margin-bottom:8px;border-radius:12px;border:1px solid #283247;background:#090d16;color:#fff;padding:11px 12px;outline:none;}
.wallet-input:focus{border-color:#00e0a4;box-shadow:0 0 0 2px rgba(0,224,164,.16);}
.wallet-pay-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.wallet-pay-btn{border:0;border-radius:12px;padding:10px 12px;background:#20283a;color:#fff;font-weight:800;cursor:pointer;}
.wallet-note{font-size:11px;color:#8f9ab0;line-height:1.35;margin-top:8px;}
.wallet-section-head{display:flex;justify-content:space-between;align-items:center;margin-top:4px;}
.wallet-transactions{display:grid;gap:8px;}
.wallet-empty{font-size:13px;color:#9ba6ba;text-align:center;padding:14px;border:1px dashed #283247;border-radius:14px;background:#0b0f18;}
.wallet-move{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#0d111b;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:11px;}
.wallet-move-left{display:flex;flex-direction:column;gap:3px;min-width:0;}
.wallet-move-left strong{font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px;}
.wallet-move-left span{font-size:11px;color:#8390a5;}
.wallet-move-amount{font-size:13px;font-weight:900;white-space:nowrap;}
.wallet-move-amount.positive{color:#00e0a4;}
.wallet-move-amount.negative{color:#ff6b8a;}

@media(max-width:480px){
  .wallet-grid-mini,.wallet-actions,.wallet-pay-row{grid-template-columns:1fr;}
  .wallet-balance{font-size:26px;}
}

/* =========================================
   TARJETA DE BENEFICIOS USUARIO DESTACADO
   Solo se muestra dentro del modal de compra
=========================================== */

/* Si por error queda una tarjeta fuera del modal, se oculta para evitar iconos gigantes */
body > .featured-benefits-card,
main > .featured-benefits-card,
#userGrid > .featured-benefits-card,
.featured-top-card + .featured-benefits-card,
.featured-benefits-card:not(.in-featured-modal){
  display:none !important;
}

.featured-benefits-card.in-featured-modal{
  display:block !important;
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:420px;
  margin:8px auto 14px;
  padding:14px;
  border-radius:18px;
  background:
    radial-gradient(circle at top left, rgba(255,204,0,.20), transparent 38%),
    radial-gradient(circle at top right, rgba(255,45,85,.15), transparent 34%),
    linear-gradient(180deg,#17121f,#0b0d14);
  border:1px solid rgba(255,204,0,.22);
  box-shadow:
    0 12px 34px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
  color:#fff;
  box-sizing:border-box;
}

.featured-benefits-card.in-featured-modal .fb-glow{
  position:absolute;
  right:-55px;
  top:-55px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:rgba(255,43,214,.22);
  filter:blur(28px);
  pointer-events:none;
}

.featured-benefits-card.in-featured-modal .fb-header{
  position:relative;
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}

.featured-benefits-card.in-featured-modal .fb-crown{
  width:42px;
  height:42px;
  min-width:42px;
  max-width:42px;
  border-radius:15px;
  background:linear-gradient(135deg,#ffcc00,#ff8a00);
  color:#101010;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(255,204,0,.25);
}

.featured-benefits-card.in-featured-modal .fb-crown svg{
  width:24px !important;
  height:24px !important;
  max-width:24px !important;
  max-height:24px !important;
  display:block;
}

.featured-benefits-card.in-featured-modal .fb-title-wrap{
  min-width:0;
}

.featured-benefits-card.in-featured-modal .fb-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-bottom:4px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,204,0,.14);
  border:1px solid rgba(255,204,0,.22);
  color:#ffcc00;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.45px;
}

.featured-benefits-card.in-featured-modal h3{
  margin:0;
  font-size:17px;
  line-height:1.15;
  color:#fff;
}

.featured-benefits-card.in-featured-modal p{
  margin:4px 0 0;
  color:#cbd5e1;
  font-size:12px;
  line-height:1.38;
}

.featured-benefits-card.in-featured-modal .fb-benefits-grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.featured-benefits-card.in-featured-modal .fb-benefit{
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:9px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  box-sizing:border-box;
}

.featured-benefits-card.in-featured-modal .fb-benefit span{
  width:30px;
  height:30px;
  min-width:30px;
  max-width:30px;
  border-radius:11px;
  background:rgba(255,204,0,.12);
  color:#ffcc00;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}

.featured-benefits-card.in-featured-modal .fb-benefit svg{
  width:17px !important;
  height:17px !important;
  max-width:17px !important;
  max-height:17px !important;
  display:block;
}

.featured-benefits-card.in-featured-modal .fb-benefit strong{
  display:block;
  font-size:12px;
  color:#fff;
  margin-bottom:2px;
}

.featured-benefits-card.in-featured-modal .fb-benefit small{
  display:block;
  color:#aeb4c7;
  font-size:10.5px;
  line-height:1.35;
}

.featured-benefits-card.in-featured-modal .fb-prices{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:11px;
}

.featured-benefits-card.in-featured-modal .fb-prices span{
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,204,0,.12);
  border:1px solid rgba(255,204,0,.20);
  color:#ffdf6b;
  font-size:11px;
  font-weight:800;
}

@media(max-width:520px){
  .featured-benefits-card.in-featured-modal{
    padding:13px;
    border-radius:16px;
    margin-top:6px;
  }

  .featured-benefits-card.in-featured-modal .fb-header{
    align-items:flex-start;
  }

  .featured-benefits-card.in-featured-modal .fb-crown{
    width:38px;
    height:38px;
    min-width:38px;
    max-width:38px;
    border-radius:14px;
  }

  .featured-benefits-card.in-featured-modal .fb-crown svg{
    width:22px !important;
    height:22px !important;
  }

  .featured-benefits-card.in-featured-modal h3{
    font-size:16px;
  }
}



/* ==========================================================
   FIX ELEGANTE: HEADER/FILTROS NO ENCIMA DE MODALES
   Corrige:
   - Cercanos/Conectados/Nuevos encima de todo.
   - Menu lateral cortado.
   - Feed cortado arriba.
   - Chat privado/publico sin parte superior.
   ========================================================== */

/* Header normal, bonito, pero sin tapar modales */
body.mb-logged-in header{
  z-index:900 !important;
}

/* Filtros dentro del header, nunca encima de paneles */
body.mb-logged-in .filter-row{
  z-index:901 !important;
}

/* Cuando hay cualquier modal/panel abierto, el header queda debajo */
body:has(.modal-backdrop[style*="display: flex"]) header,
body:has(.modal-backdrop[style*="display:flex"]) header,
body:has(.modal-backdrop.active) header,
body:has(.modal-backdrop.is-open) header,
body:has(.chat-modal[style*="display: flex"]) header,
body:has(.chat-modal[style*="display:flex"]) header,
body:has(#feedPanel[style*="display: flex"]) header,
body:has(#feedPanel[style*="display:flex"]) header,
body:has(#feedModal[style*="display: flex"]) header,
body:has(#feedModal[style*="display:flex"]) header{
  z-index:1 !important;
}

/* Modales siempre por encima del header */
.modal-backdrop,
#profileModal,
#inboxModal,
#privateRequestsModal,
#walletModal,
#storyViewer,
#imgViewer,
#sessionOverlay,
#legalOverlay{
  z-index:1000000 !important;
}

/* Chat privado y publico por encima del header */
.chat-modal,
#privateChatModal,
#publicChatModal,
#chatModal,
#publicChatOverlay,
.private-chat-modal,
.public-chat-modal{
  z-index:1000001 !important;
}

/* Feed por encima del header */
#feedPanel,
#feedModal,
.feed-panel,
.feed-modal{
  z-index:1000001 !important;
}

/* Menu lateral por encima del header y completo */
#sideMenu,
.side-menu,
.sidebar,
#leftMenu,
#drawerMenu,
.drawer-menu{
  z-index:1000002 !important;
  top:0 !important;
  height:100vh !important;
  max-height:100vh !important;
  overflow-y:auto !important;
  padding-top:18px !important;
  padding-bottom:26px !important;
  -webkit-overflow-scrolling:touch !important;
}

/* Si el menu lateral tiene backdrop, tambien encima */
#sideMenuBackdrop,
.side-menu-backdrop,
.drawer-backdrop{
  z-index:1000001 !important;
}

/* Evita que el header sticky tape el menu lateral */
body:has(#sideMenu[style*="display: block"]) header,
body:has(#sideMenu[style*="display:block"]) header,
body:has(.side-menu.open) header,
body:has(.sidebar.open) header,
body:has(#leftMenu.open) header,
body:has(#drawerMenu.open) header{
  z-index:1 !important;
}

/* Feed completo en movil */
#feedPanel,
#feedModal,
.feed-panel,
.feed-modal{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-height:100vh !important;
  overflow:hidden !important;
  padding-top:0 !important;
}

#feedPanel .modal,
#feedModal .modal,
.feed-panel .modal,
.feed-modal .modal,
#feedPanel .feed-box,
#feedModal .feed-box,
.feed-panel .feed-box,
.feed-modal .feed-box{
  max-height:100vh !important;
  height:100vh !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

/* Chat completo en movil */
.chat-modal,
#privateChatModal,
#publicChatModal,
#publicChatOverlay{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-height:100vh !important;
  padding:0 !important;
}

.chat-window,
.private-chat-window,
.public-chat-window,
#privateChatModal .modal,
#publicChatModal .modal,
#publicChatOverlay .modal{
  height:100vh !important;
  max-height:100vh !important;
  border-radius:0 !important;
  overflow:hidden !important;
}

/* Cabecera del chat visible arriba */
.chat-header,
.private-chat-header,
.public-chat-header{
  position:relative !important;
  top:0 !important;
  z-index:5 !important;
  min-height:56px !important;
  flex-shrink:0 !important;
}

/* Perfil y modales con scroll completo */
#profileModal,
#inboxModal,
#privateRequestsModal,
#walletModal{
  overflow-y:auto !important;
  align-items:flex-start !important;
  padding-top:10px !important;
  -webkit-overflow-scrolling:touch !important;
}

#profileModal .modal,
#inboxModal .modal,
#privateRequestsModal .modal,
#walletModal .modal{
  margin:0 auto 90px !important;
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
}

/* Menu lateral: boton cerrar y contenido no tapado */
.side-menu .close-btn,
.sidebar .close-btn,
#sideMenu .close-btn,
#leftMenu .close-btn{
  position:sticky !important;
  top:0 !important;
  z-index:10 !important;
}

/* En pantallas pequeñas, asegurar margen inferior por nav */
@media(max-width:700px){
  body.mb-logged-in header{
    border-radius:0 0 22px 22px !important;
  }

  #sideMenu,
  .side-menu,
  .sidebar,
  #leftMenu,
  #drawerMenu{
    width:min(82vw,360px) !important;
  }

  .chat-window,
  .private-chat-window,
  .public-chat-window{
    width:100vw !important;
    max-width:100vw !important;
  }
}

/* Fallback para navegadores sin :has:
   al menos los paneles quedan por encima del header */
.modal-backdrop,
.chat-modal,
#feedPanel,
#feedModal,
.side-menu,
.sidebar,
#sideMenu{
  isolation:isolate !important;
}

/* Corrige que el header quede pegado encima visualmente cuando el usuario desplaza dentro de feed */
#feedPanel header,
#feedModal header,
.feed-panel header,
.feed-modal header,
.chat-modal header{
  position:relative !important;
  z-index:auto !important;
}

/* Mantener el diseno elegante anterior */
body.mb-logged-in .bottom-nav{
  z-index:950 !important;
}

/* Cuando chat/feed/menu esta abierto, el nav inferior no debe tapar contenido */
body:has(.chat-modal[style*="display: flex"]) .bottom-nav,
body:has(.chat-modal[style*="display:flex"]) .bottom-nav,
body:has(#feedPanel[style*="display: flex"]) .bottom-nav,
body:has(#feedPanel[style*="display:flex"]) .bottom-nav,
body:has(#feedModal[style*="display: flex"]) .bottom-nav,
body:has(#feedModal[style*="display:flex"]) .bottom-nav,
body:has(#sideMenu[style*="display: block"]) .bottom-nav,
body:has(#sideMenu[style*="display:block"]) .bottom-nav{
  z-index:1 !important;
}



/* ==========================================================
   MATCHBOY PREMIUM MENU + DESTACADOS V2
   ========================================================== */
#sideMenu.side-menu-premium{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  bottom:0 !important;
  width:min(86vw,380px) !important;
  background:linear-gradient(180deg,#05060b,#020207) !important;
  z-index:1000002 !important;
  transform:translateX(-100%);
  transition:transform .25s ease;
  display:flex !important;
  flex-direction:column !important;
  border-right:1px solid rgba(0,255,220,.12);
  box-shadow:28px 0 70px rgba(0,0,0,.75);
  overflow:hidden !important;
}
.side-premium-head{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;position:relative;background:radial-gradient(circle at 0 0,rgba(124,60,255,.24),transparent 45%)}
.side-profile-card{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.side-avatar-premium{width:58px;height:58px;border-radius:20px;padding:2px;background:linear-gradient(135deg,#25a7ff,#7c3cff,#ff2bd6);position:relative;flex-shrink:0;box-shadow:0 12px 28px rgba(124,60,255,.32)}
.side-avatar-premium img{width:100%;height:100%;border-radius:17px;object-fit:cover;display:block;border:2px solid #05060b}
.side-online-dot{position:absolute;right:2px;bottom:2px;width:13px;height:13px;border-radius:50%;background:#22e76b;border:2px solid #05060b;box-shadow:0 0 10px #22e76b}
.side-profile-info{min-width:0}.side-profile-title{font-size:18px;font-weight:950;color:#fff;line-height:1.1}.side-profile-sub{font-size:12px;color:#aeb4c7;margin-top:3px}.side-profile-pills{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}.side-profile-pills span{font-size:10px;font-weight:900;color:#dffcff;background:rgba(0,255,220,.10);border:1px solid rgba(0,255,220,.16);padding:4px 7px;border-radius:999px}
.side-close-premium{width:38px;height:38px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:#fff;font-weight:900;font-size:16px;cursor:pointer;flex-shrink:0}
.side-download-pro{margin:14px 16px 10px;padding:13px;border-radius:20px;border:1px solid rgba(255,204,0,.28);background:radial-gradient(circle at 20% 0,rgba(255,204,0,.28),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035));display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.38)}
.side-download-play{width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,#ffcc00,#ff8a00);color:#000;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 24px rgba(255,204,0,.28)}
.side-download-play svg{width:24px;height:24px}.side-download-pro small{display:block;color:#bfc4d8;font-size:11px}.side-download-pro strong{display:block;color:#fff;font-size:15px;margin-top:1px}.side-download-pro>span{margin-left:auto;background:#fff;color:#05060b;font-weight:950;font-size:11px;border-radius:999px;padding:7px 9px}
.side-banner-premium{width:calc(100% - 32px);height:58px;margin:0 auto 12px;position:relative;overflow:hidden;border-radius:18px;background:#0c0e18;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.side-banner-premium img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer;transition:opacity .5s ease}
.side-menu-scroll{flex:1;overflow-y:auto;padding:6px 10px 12px;-webkit-overflow-scrolling:touch}.side-menu-scroll::-webkit-scrollbar{width:4px}.side-menu-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
.side-menu-premium .side-menu-btn{width:100%;padding:12px 12px;margin:4px 0;border:none;border-radius:16px;background:transparent;display:flex;align-items:center;gap:12px;color:#eafcff;font-size:16px;font-weight:750;cursor:pointer;transition:background .18s ease,transform .18s ease}.side-menu-premium .side-menu-btn:hover{background:rgba(255,255,255,.06)}.side-menu-premium .side-menu-btn:active{transform:scale(.98)}
.side-menu-premium .side-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.side-menu-premium .side-icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.side-yellow{color:#ffcc00}.side-green{color:#00e0a4}.side-blue{color:#40a9ff}.side-red{color:#ff4d5f}.side-orange{color:#ff7a18}
.side-menu-ad-btn{background:linear-gradient(90deg,rgba(255,204,0,.13),rgba(255,138,0,.07)) !important;border:1px solid rgba(255,204,0,.16) !important}.side-menu-ad-btn small{margin-left:auto;color:#ffcc00;font-size:11px;font-weight:900;background:rgba(255,204,0,.10);padding:5px 7px;border-radius:999px}
.side-legal-card{margin:12px 6px 6px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))}.side-legal-toggle{width:100%;background:none;border:none;color:#fff;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:15px;font-weight:950;padding:6px}.side-legal-menu{display:none;margin-top:8px}.side-legal-menu.is-open{display:block}.side-sub-btn{width:100%;padding:10px 12px;margin-top:5px;border:none;border-radius:12px;background:rgba(255,255,255,.045);color:#cbd5e1;text-align:left;font-size:13px;font-weight:750;cursor:pointer}.side-sub-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.side-premium-footer{padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.42))}.side-logout-pro{width:100%;padding:13px;border:none;border-radius:16px;background:linear-gradient(135deg,rgba(255,59,95,.24),rgba(120,0,0,.5));color:#ffd6df;display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:900;cursor:pointer}.side-logout-pro svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.featured-top-card{overflow:hidden}.featured-cta-pro{min-width:152px !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:0 !important;padding:10px 16px !important;border-radius:999px !important;background:linear-gradient(135deg,#ffcc00,#ff8a00,#ffcc00) !important;color:#05060b !important;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 14px 30px rgba(255,204,0,.36),0 0 28px rgba(255,204,0,.20) !important;animation:featuredCtaPulse 1.8s infinite ease-in-out}.featured-cta-main{font-size:13px;font-weight:950;letter-spacing:.2px}.featured-cta-sub{font-size:10px;font-weight:850;opacity:.78;margin-top:2px}@keyframes featuredCtaPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.03)}}
.featured-benefits-mini{width:min(720px,94vw);margin:10px auto 14px;padding:13px;border-radius:20px;border:1px solid rgba(0,231,255,.18);background:linear-gradient(135deg,rgba(0,231,255,.08),rgba(124,60,255,.08),rgba(255,43,214,.06));display:flex;align-items:center;gap:12px;color:#fff;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,.30)}.fbm-icon{width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,#ffcc00,#ff8a00);color:#05060b;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fbm-icon svg{width:24px;height:24px}.fbm-text{min-width:0;flex:1}.fbm-text strong{display:block;font-size:15px;font-weight:950}.fbm-text span{display:block;font-size:12px;color:#cbd5e1;margin-top:3px;line-height:1.35}.fbm-action{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;color:#fff;flex-shrink:0}
.featured-benefits-info-modal{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(8px);z-index:1000004;display:none;align-items:center;justify-content:center;padding:16px}.featured-benefits-info-box{width:min(440px,94vw);max-height:88vh;overflow-y:auto;border-radius:24px;background:linear-gradient(180deg,#151724,#070811);border:1px solid rgba(255,255,255,.10);box-shadow:0 26px 90px rgba(0,0,0,.78);padding:16px;color:#fff}.featured-benefits-info-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.featured-benefits-info-head span{display:inline-flex;background:rgba(255,204,0,.12);color:#ffcc00;border:1px solid rgba(255,204,0,.20);font-size:11px;font-weight:950;border-radius:999px;padding:5px 8px;text-transform:uppercase}.featured-benefits-info-head h3{margin:8px 0 0;font-size:22px;line-height:1.05}.featured-benefits-info-head button{width:36px;height:36px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#fff;font-weight:950;cursor:pointer}.featured-benefits-info-list{display:grid;gap:9px}.benefit-info-item{padding:12px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.benefit-info-item b{display:block;font-size:14px}.benefit-info-item small{display:block;margin-top:4px;color:#aeb4c7;line-height:1.35}.featured-benefits-info-prices{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.featured-benefits-info-prices span{background:rgba(255,204,0,.11);border:1px solid rgba(255,204,0,.18);color:#ffcc00;font-weight:900;font-size:12px;border-radius:999px;padding:7px 9px}.featured-benefits-info-cta{width:100%;border:none;border-radius:16px;padding:13px;background:linear-gradient(135deg,#ffcc00,#ff8a00);color:#05060b;font-weight:950;cursor:pointer}
/* Oculta la tarjeta antigua dentro del modal de pago si quedo guardada en cache */
.featured-benefits-card.in-featured-modal{display:none !important}
@media(max-width:640px){.featured-top-header{align-items:center}.featured-cta-pro{min-width:138px !important;padding:9px 12px !important}.featured-cta-main{font-size:12px}.featured-cta-sub{font-size:9px}.featured-benefits-mini{margin-top:8px}.side-profile-title{font-size:16px}}



/* =====================================================
   HEADER FIX V2 - GPS REAL Y BOTONES MISMO ESTILO
===================================================== */

/* GPS igual al resto de botones superiores */
.gps-status-mini{
  position:relative;
  width:auto !important;
  min-width:72px !important;
  height:38px !important;
  padding:0 11px !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  color:#d1d5db !important;
  background:#1f1f1f !important;
  border:1px solid #333 !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.gps-status-mini .gps-mini-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
  background:#ff3b5c;
  box-shadow:0 0 8px rgba(255,59,92,.75);
}

.gps-status-mini .gps-mini-text{
  font-size:12px;
  font-weight:900;
  color:inherit;
}

.gps-status-mini.gps-off{
  color:#ffb7c3 !important;
  border-color:rgba(255,59,92,.36) !important;
}

.gps-status-mini.gps-checking{
  color:#ffcc00 !important;
  border-color:rgba(255,204,0,.42) !important;
}

.gps-status-mini.gps-checking .gps-mini-dot{
  background:#ffcc00;
  box-shadow:0 0 10px rgba(255,204,0,.85);
  animation:gpsMiniPulse .85s infinite alternate;
}

.gps-status-mini.gps-on{
  color:#92ffc8 !important;
  border-color:rgba(34,231,107,.42) !important;
}

.gps-status-mini.gps-on .gps-mini-dot{
  background:#22e76b;
  box-shadow:0 0 9px rgba(34,231,107,.85);
}

@keyframes gpsMiniPulse{
  from{opacity:.55;transform:scale(.9)}
  to{opacity:1;transform:scale(1.22)}
}

/* Boton salir compacto, mismo tamaño que los demas */
.logout-mini-pro{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  padding:0 !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#ffb7c3 !important;
  background:#1f1f1f !important;
  border:1px solid rgba(255,59,92,.40) !important;
  box-shadow:none !important;
}

.logout-mini-pro svg{
  width:19px !important;
  height:19px !important;
  stroke:currentColor !important;
}

.logout-mini-pro:hover{
  color:#fff !important;
  background:rgba(255,59,92,.16) !important;
}

/* En pantallas pequenas queda solo el icono GPS con punto */
@media(max-width:420px){
  .gps-status-mini{
    min-width:44px !important;
    width:44px !important;
    padding:0 !important;
  }

  .gps-status-mini .gps-mini-text{
    display:none !important;
  }
}