/* OXIRA Cliente — estilos exclusivos del portal del abonado BESTV. */

body.oxira-cliente { background: var(--bc-gris); }

.bc-auth { min-height: calc(100vh - 76px); }
.bc-auth-lateral {
  background: linear-gradient(160deg, var(--bc-azul) 0%, var(--bc-navy-2) 100%);
  color: #fff; border-radius: 1rem; position: relative; overflow: hidden;
}
.bc-auth-lateral::before {
  content: ''; position: absolute; left: -60px; bottom: -60px; width: 240px; height: 240px;
  border-radius: 50%; background: radial-gradient(circle, rgba(188,210,0,.25), transparent 65%);
}
.bc-auth-lateral .bloque-lima { width: 3.5rem; height: .8rem; background: var(--bc-lima); border-radius: 2px; }
.bc-auth-lateral .bloque-celeste { width: 5rem; height: .8rem; background: #7FB3D5; border-radius: 2px; }

.bc-paso { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #8296A5; }
.bc-paso .num {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid #C6D2DA;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
}
.bc-paso.activo { color: var(--bc-azul); }
.bc-paso.activo .num { background: var(--bc-azul); border-color: var(--bc-azul); color: #fff; }

/* Panel del cliente */
.bc-cli-nav { background: #fff; border: 1px solid #E3E9ED; border-radius: 1rem; overflow: hidden; }
.bc-cli-nav a {
  display: flex; align-items: center; gap: .7rem; padding: .85rem 1.2rem;
  color: var(--bc-texto); text-decoration: none; font-weight: 700; border-left: 4px solid transparent;
}
.bc-cli-nav a:hover { background: var(--bc-gris); }
.bc-cli-nav a.activo { border-left-color: var(--bc-lima); color: var(--bc-azul); background: var(--bc-celeste); }
.bc-stat { background: #fff; border: 1px solid #E3E9ED; border-radius: 1rem; padding: 1.4rem; height: 100%; }
.bc-stat .icono {
  width: 52px; height: 52px; border-radius: .8rem; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff; background: var(--bc-azul);
}

/* ---------- Tipo app (mobile-first) ---------- */
/* Pestañas inferiores: la navegación vive abajo en móvil, como cualquier app.
   El posicionamiento lo pone Bootstrap (fixed-bottom d-lg-none); aquí solo el look. */
.bc-cli-tabbar {
  background: #fff; border-top: 1px solid #E3E9ED;
  box-shadow: 0 -6px 18px rgba(13, 34, 51, .07);
  min-height: 58px;
  bottom: calc(var(--bc-visual-bottom, 0px) + max(.75rem, env(safe-area-inset-bottom, 0px)));
  padding-bottom: env(safe-area-inset-bottom, 0px); /* barrita de gestos */
}
.bc-cli-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  justify-content: center; padding: .45rem .15rem .4rem; text-decoration: none; color: #6E8496;
  font-size: .68rem; font-weight: 700; border-top: 3px solid transparent;
}
.bc-cli-tabbar a i { font-size: 1.25rem; line-height: 1; }
.bc-cli-tabbar a.activo { color: var(--bc-azul); border-top-color: var(--bc-lima); }

/* El contenido no debe quedar tapado por la barra inferior (57px + respiro).
   El <main> lleva pt-4 y NO py-4: así ninguna utilidad !important de Bootstrap
   pelea con este padding inferior. En lg+ vuelve al 1.5rem de siempre. */
main.con-tabbar { padding-bottom: 96px; }
@media (min-width: 992px) { main.con-tabbar { padding-bottom: 1.5rem; } }

/* ---------- Chat de soporte del cliente (burbujas estilo app) ---------- */
.bc-chat-hilo { display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; }
.bc-burbuja { max-width: 82%; border-radius: .9rem; padding: .55rem .85rem; font-size: .92rem; }
.bc-burbuja.mia { background: #EAF3DE; align-self: flex-end; border-bottom-right-radius: .25rem; }
.bc-burbuja.staff { background: #fff; border: 1px solid #E3E9ED; align-self: flex-start; border-bottom-left-radius: .25rem; }
.bc-burbuja .meta { font-size: .72rem; color: #7A8B98; margin-top: .15rem; }
/* Compositor siempre visible (acompaña al sticky-bottom de Bootstrap) */
.bc-chat-compositor { padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 991px) {
  /* En móvil el compositor se pega ENCIMA de la tab bar, no del borde */
  .bc-chat-compositor.sticky-bottom {
    bottom: calc(70px + var(--bc-visual-bottom, 0px) + max(.75rem, env(safe-area-inset-bottom, 0px)));
  }
}