/* =========================================================
   123 Bolita · Controles globales
   Chat + Cuenta disponibles en todas las pantallas
   ========================================================= */

:root{
  --bg-cuenta:#ffffff;
  --txt-cuenta:#0f2340;
  --muted-cuenta:#68788d;
  --borde-cuenta:#d7e1ec;
  --azul-cuenta:#0b2f63;
  --azul2-cuenta:#1766cf;
}

.bolita-global{
  position:fixed;
  top:14px;
  right:14px;
  z-index:99990;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:Arial,Helvetica,sans-serif;
}

.bolita-global-boton{
  appearance:none;
  border:1px solid rgba(255,255,255,.36);
  background:rgba(11,47,99,.96);
  color:#fff;
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:20px;
  box-shadow:0 8px 22px rgba(11,47,99,.20);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.bolita-global-boton:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(11,47,99,.26);
  background:#134b91;
}

.bolita-global-boton:focus-visible{
  outline:3px solid rgba(23,102,207,.25);
  outline-offset:2px;
}

.bolita-global-cuenta{
  position:relative;
}

.bolita-global-menu{
  position:absolute;
  top:52px;
  right:0;
  width:245px;
  padding:12px;
  background:var(--bg-cuenta);
  color:var(--txt-cuenta);
  border:1px solid var(--borde-cuenta);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(18,37,62,.18);
  display:none;
}

.bolita-global-menu.abierto{
  display:block;
}

.bolita-global-identidad{
  padding:5px 6px 11px;
  border-bottom:1px solid #edf1f5;
  margin-bottom:8px;
}

.bolita-global-identidad strong{
  display:block;
  font-size:15px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bolita-global-identidad small{
  display:block;
  margin-top:4px;
  color:var(--muted-cuenta);
  font-size:12px;
}

.bolita-global-enlace,
.bolita-global-accion{
  width:100%;
  border:0;
  background:transparent;
  color:var(--txt-cuenta);
  text-decoration:none;
  text-align:left;
  padding:11px 10px;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.bolita-global-enlace:hover,
.bolita-global-accion:hover{
  background:#f2f6fb;
}

.bolita-global-salir{
  color:#b3261e;
}

.bolita-global-estado{
  padding:8px 8px 5px;
  color:var(--muted-cuenta);
  font-size:12px;
  line-height:1.4;
}

/* Oculta la campana antigua del Home para evitar duplicados */
.campana{
  display:none !important;
}

@media (max-width:700px){
  .bolita-global{
    top:10px;
    right:10px;
    gap:6px;
  }

  .bolita-global-boton{
    width:40px;
    height:40px;
    font-size:18px;
  }

  .bolita-global-menu{
    top:48px;
    width:min(245px, calc(100vw - 20px));
  }
}

/* Compatibilidad básica con tema oscuro */
body.tema-oscuro .bolita-global-menu,
body.dark .bolita-global-menu,
body[data-theme="dark"] .bolita-global-menu{
  --bg-cuenta:#142238;
  --txt-cuenta:#f5f8fc;
  --muted-cuenta:#aebbd0;
  --borde-cuenta:#2c405d;
}

body.tema-oscuro .bolita-global-identidad,
body.dark .bolita-global-identidad,
body[data-theme="dark"] .bolita-global-identidad{
  border-bottom-color:#263a55;
}

body.tema-oscuro .bolita-global-enlace:hover,
body.tema-oscuro .bolita-global-accion:hover,
body.dark .bolita-global-enlace:hover,
body.dark .bolita-global-accion:hover,
body[data-theme="dark"] .bolita-global-enlace:hover,
body[data-theme="dark"] .bolita-global-accion:hover{
  background:#1d304b;
}