/* SenpaiLive – Sala de directo (carga al final, pisa los estilos viejos) */
:root{--sn-p:#5a19a8; --sn-f:#e61973; --sn-y:#eac518; --sn-bg:#14081f; --sn-card:#1f0f33; --sn-line:rgba(190,140,255,.28)}
html body, body.dark-mode{
  font-family:'Poppins',sans-serif !important; color:#fff !important;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(230,25,115,.22), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(90,25,168,.45), transparent 60%),
    #14081f !important;
  background-attachment:fixed !important;
}
body *{font-family:inherit}
.fa-solid,.fa-regular,.fa-brands{font-family:"Font Awesome 6 Free","Font Awesome 6 Brands" !important}
.fa-brands{font-family:"Font Awesome 6 Brands" !important}

/* ===== Cabecera ===== */
body > header{
  background:rgba(20,8,31,.92) !important; border-bottom:1px solid var(--sn-line) !important;
  backdrop-filter:blur(10px); min-height:68px; padding:0 28px !important; border-radius:0 !important;
}
#logo img{height:38px !important; width:auto !important}
.acciones-sesion{gap:12px !important}
.tokens-badge{
  background:rgba(234,197,24,.14) !important; color:var(--sn-y) !important; border:1.5px solid var(--sn-y) !important;
  border-radius:999px !important; padding:7px 16px !important; font-weight:700 !important; box-shadow:none !important;
}
.tokens-badge i{color:var(--sn-y) !important}
.btn-follow{
  background:transparent !important; color:var(--sn-y) !important; border:2px solid var(--sn-y) !important;
  border-radius:12px !important; font-weight:700 !important; box-shadow:none !important; height:42px; padding:0 18px !important;
}
.btn-follow .follow-heart{color:var(--sn-f) !important; filter:none !important}
#loginBtn{
  background:transparent !important; color:#fff !important; border:2px solid #fff !important;
  border-radius:12px !important; font-weight:700 !important; height:42px; padding:0 20px !important; display:inline-flex; align-items:center;
}
#signupBtn{
  background:var(--sn-f) !important; color:#fff !important; border:0 !important; border-radius:12px !important;
  font-weight:700 !important; height:42px; padding:0 20px !important; display:inline-flex; align-items:center;
  box-shadow:0 0 18px rgba(230,25,115,.5) !important;
}
#logoutBtn{background:transparent !important; color:#fff !important; border:2px solid rgba(255,255,255,.5) !important; border-radius:12px !important; height:42px; padding:0 18px; font-weight:700}
#headerUsernameText{color:#e8dcf7 !important; font-weight:600}

/* ===== Escenario ===== */
.box{max-width:1500px !important; padding:18px 24px 10px !important}
.grid-stream{gap:18px !important}

.zona-video{
  background:#07020d !important; border:1.5px solid var(--sn-line) !important; border-radius:22px !important; overflow:hidden;
  box-shadow:0 20px 60px rgba(90,25,168,.35);
  background-image:radial-gradient(600px 300px at 50% 40%, rgba(90,25,168,.28), transparent 70%) !important;
}
.etiqueta-live{
  background:var(--sn-f) !important; color:#fff !important; border-radius:999px !important; padding:6px 14px !important;
  font-weight:700 !important; font-size:12px !important; letter-spacing:.06em !important; top:16px !important; left:16px !important;
  box-shadow:0 0 16px rgba(230,25,115,.7);
}
.offline-badge{
  background:rgba(20,8,31,.85) !important; color:#e8dcf7 !important; border:1px solid var(--sn-line) !important;
  border-radius:999px !important; top:16px !important; left:16px !important; padding:6px 14px !important; font-weight:700; font-size:12px; letter-spacing:.06em;
}
.btn-rojo, .btn-gris, .chat-mode-btn{font-family:inherit !important}
.btn-rojo{background:var(--sn-f) !important; color:#fff !important; border-radius:10px !important; border:0 !important}
.btn-gris{background:transparent !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.4) !important; border-radius:10px !important}

/* ===== Chat ===== */
.chat{
  background:linear-gradient(180deg,#27103f,#1a0b2e) !important; border:1.5px solid var(--sn-line) !important;
  border-radius:22px !important; box-shadow:0 16px 44px rgba(0,0,0,.4);
}
.chat-header{border-bottom:1px solid var(--sn-line) !important; padding:14px 16px !important}
.chat-mode-btn{
  background:rgba(255,255,255,.07) !important; color:#e8dcf7 !important; border:1px solid var(--sn-line) !important;
  border-radius:999px !important; padding:7px 14px !important; font-size:13px !important; font-weight:600 !important;
}
.chat-mode-btn.is-active{background:var(--sn-f) !important; color:#fff !important; border-color:var(--sn-f) !important; box-shadow:0 0 14px rgba(230,25,115,.5)}
.chat-box{background:transparent !important; color:#fff !important}
.chat-box .msg, .chat-box p, .chat-box div{color:#f1e8ff}
.input-chat{border-top:1px solid var(--sn-line) !important; background:rgba(20,8,31,.55) !important; padding:12px 14px !important}
.input-wrap input, #mensajeInput{
  background:rgba(255,255,255,.08) !important; border:1.5px solid var(--sn-line) !important; border-radius:12px !important;
  color:#fff !important; padding:12px 14px !important; font-size:14px !important;
}
#mensajeInput::placeholder{color:#b9a3d6 !important}
#mensajeInput:focus{outline:none; border-color:var(--sn-f) !important}
.btn-send{background:var(--sn-f) !important; color:#fff !important; border-radius:12px !important; border:0 !important; width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; font-size:16px !important}
.tip-btn{background:rgba(234,197,24,.14) !important; color:var(--sn-y) !important; border:1.5px solid var(--sn-y) !important; border-radius:12px !important}
.tip-stats{background:rgba(234,197,24,.1) !important; border:1px solid rgba(234,197,24,.45) !important; border-radius:12px !important; color:#fff !important}
.tip-stats .label.highlight{color:var(--sn-y) !important}
.tip-stats-toggle{background:rgba(234,197,24,.15) !important; color:var(--sn-y) !important; border:1px solid var(--sn-y) !important; border-radius:999px !important}
.chat-lock__card{background:#27103f !important; border:1.5px solid var(--sn-f) !important; border-radius:16px !important}

/* ===== Saldo y acciones ===== */
.tokens-panel{
  background:linear-gradient(180deg,#27103f,#1a0b2e) !important; border:1.5px solid var(--sn-line) !important;
  border-radius:20px !important; padding:16px !important; box-shadow:0 12px 34px rgba(0,0,0,.35);
}
.tokens-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.tokens-row strong{font-size:15px; font-weight:700; color:#fff; display:inline-flex; align-items:center; gap:6px}
.tokens-row strong i{color:var(--sn-y)}
.buy-more-btn{
  background:var(--sn-y) !important; color:#2a0a4a !important; border:0 !important; border-radius:999px !important;
  padding:7px 16px !important; font-weight:700 !important; font-size:13px !important; cursor:pointer;
}
.tokens-actions{display:flex; gap:10px; flex-wrap:wrap}
.red-btn{
  background:linear-gradient(135deg,#e61973,#ff3d95) !important; color:#fff !important; border:0 !important;
  border-radius:12px !important; font-weight:700 !important; font-size:14px !important; padding:11px 16px !important;
  flex:1 1 auto; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 0 16px rgba(230,25,115,.4);
}
.red-btn.red-btn-secondary{background:rgba(255,255,255,.08) !important; border:1.5px solid rgba(255,255,255,.4) !important; box-shadow:none}
#abrirPropina{background:linear-gradient(135deg,#eac518,#ffd84d) !important; color:#2a0a4a !important; box-shadow:0 0 16px rgba(234,197,24,.4)}

/* ===== Info de la cosplayer ===== */
.info-modelo{
  background:linear-gradient(180deg,#27103f,#1a0b2e) !important; border:1.5px solid var(--sn-line) !important;
  border-radius:20px !important; padding:18px 22px !important; color:#eadcff !important; font-size:15px; line-height:1.6;
}
.bio-model-profile-btn{
  background:linear-gradient(135deg,#e61973,#ff3d95) !important; color:#fff !important; border-radius:999px !important;
  padding:6px 18px !important; font-weight:700 !important; text-decoration:none !important; display:inline-block; margin-bottom:8px;
  box-shadow:0 0 16px rgba(230,25,115,.45);
}

/* ===== Modales ===== */
.modal-contenido, .modal-content, .bottom-sheet, .stream-offline-card, .chat-auth-card{
  background:linear-gradient(180deg,#27103f,#1a0b2e) !important; color:#fff !important;
  border:1.5px solid rgba(230,25,115,.45) !important; border-radius:20px !important; font-family:'Poppins',sans-serif !important;
}
.modal, .stream-offline-modal, .chat-auth-modal{backdrop-filter:blur(6px)}
.modal-propina-compacto input, .modal-propina-compacto textarea{
  background:rgba(255,255,255,.08) !important; border:1.5px solid var(--sn-line) !important; color:#fff !important; border-radius:12px !important;
}
.link-comprar{color:var(--sn-y) !important; background:transparent !important; border:0 !important; font-weight:700; cursor:pointer}
.gold-btn, .btn-offline.primary{background:var(--sn-y) !important; color:#2a0a4a !important; border-radius:12px !important; font-weight:700 !important; border:0 !important}
.chat-auth-btn.primary{background:var(--sn-f) !important; color:#fff !important; border-radius:12px !important}
.chat-auth-btn.ghost{background:transparent !important; border:2px solid #fff !important; color:#fff !important; border-radius:12px !important}
.btn-offline{background:var(--sn-f) !important; color:#fff !important; border-radius:12px !important; border:0 !important}
.tipmenu-head{color:var(--sn-y) !important}

/* ===== Pie ===== */
.pie-pagina{background:transparent !important; border-top:1px solid var(--sn-line) !important; color:#b9a3d6 !important; padding:18px 24px !important; text-align:center}
.pie-pagina a{color:#e8dcf7 !important; text-decoration:none}
.pie-pagina a:hover{color:#fff !important; text-decoration:underline}

/* ===== Móvil ===== */
.mobile-tabs{background:rgba(20,8,31,.9) !important; border-bottom:1px solid var(--sn-line) !important}
.tab-btn{color:#cdb8e6 !important; font-weight:600 !important}
.tab-btn.active{color:#fff !important; border-bottom:3px solid var(--sn-f) !important}
.mobile-menu{background:#1a0b2e !important; color:#fff !important}
.mobile-menu .cta-btn{background:var(--sn-f) !important; color:#fff !important; border-radius:12px !important; border:0 !important}
.mobile-menu .category-btn{background:rgba(255,255,255,.08) !important; color:#fff !important; border:1px solid var(--sn-line) !important; border-radius:999px !important}
@media(max-width:768px){
  body > header{padding:0 12px !important; min-height:58px}
  #logo img{height:30px !important}
  .box{padding:0 0 8px !important}
  .zona-video{border-radius:0 !important; border-left:0 !important; border-right:0 !important}
  .chat{border-radius:0 !important}
  .tokens-panel{border-radius:16px !important; margin:10px 12px !important}
  .info-modelo{margin:10px 12px !important}
  #loginBtn,#signupBtn{height:38px; padding:0 14px !important; font-size:13px}
}

/* ===== Correcciones v2 ===== */
@media(min-width:769px){
  body > header{display:flex !important; align-items:center !important; justify-content:space-between !important; height:70px; padding:0 28px !important}
  #logo{position:static !important; transform:none !important; max-width:none !important; left:auto !important}
  #logo img{height:40px !important; max-width:none !important; width:auto !important}
  .acciones-sesion{position:static !important}
  .acciones-sesion > *{align-self:center}
  #loginBtn,#signupBtn{line-height:1 !important; padding:0 22px !important; height:42px !important}
}
.offline-badge{background:rgba(20,8,31,.88) !important; border:1.5px solid var(--sn-line) !important}
.offline-badge .txt{color:#e8dcf7 !important}
.offline-badge .dot{background:var(--sn-f) !important; box-shadow:0 0 0 3px rgba(230,25,115,.25) !important}
#btnEnviar.btn-send{background:var(--sn-f) !important; color:#fff !important; border-radius:10px !important}
.tokens-panel .red-btn, button.red-btn{background:linear-gradient(135deg,#e61973,#ff3d95) !important; color:#fff !important; border:0 !important; border-radius:12px !important; padding:10px 14px !important}
.tokens-panel .red-btn.red-btn-secondary{background:rgba(255,255,255,.08) !important; border:1.5px solid rgba(255,255,255,.4) !important}
.tokens-panel #abrirPropina{background:linear-gradient(135deg,#eac518,#ffd84d) !important; color:#2a0a4a !important}
.chat-mode-btn.is-active, #btnChatModePublic.is-active{background:var(--sn-f) !important; color:#fff !important}
.chat-mode-btn{background:rgba(255,255,255,.07) !important; color:#e8dcf7 !important}
.btn-rojo.chat-mode-btn{box-shadow:none !important}

/* ===== Correcciones v3 ===== */
#logo img{display:block !important}
#logo a{display:flex !important; align-items:center}
#logo .logo-text,#logo .logo-dot{display:none !important}
#btnPrivateShow.red-btn,#btnTipMobile{background:linear-gradient(135deg,#e61973,#ff3d95) !important; color:#fff !important}
#abrirTipMenu, #abrirTipMenu.red-btn-secondary{background:rgba(255,255,255,.08) !important; border:1.5px solid rgba(255,255,255,.4) !important; border-radius:12px !important}
#abrirPropina{background:linear-gradient(135deg,#eac518,#ffd84d) !important; color:#2a0a4a !important; border-radius:12px !important}
#btnTipMobile{background:rgba(234,197,24,.14) !important; color:var(--sn-y) !important; border:1.5px solid var(--sn-y) !important}
.tokens-actions{display:grid !important; grid-template-columns:1fr 1fr; gap:10px}
.tokens-actions #abrirPropina{grid-column:1 / -1}
.tokens-row{justify-content:center !important}
.acciones-sesion a,.acciones-sesion button{line-height:1 !important}
#loginBtn,#signupBtn{align-items:center !important; justify-content:center !important}
.zona-video{aspect-ratio:16/9 !important; height:auto !important}
.zona-video video, #video{width:100% !important; height:100% !important; max-height:none !important; border:0 !important; border-radius:0 !important; object-fit:contain}
.video-js{width:100% !important; height:100% !important}
.box{width:100% !important}

/* ===== Correcciones v4 ===== */
html body{padding:0 !important; margin:0 !important}
body > header{width:100% !important; margin:0 !important; border-radius:0 !important}
#loginBtn,#signupBtn,#followBtn,#logoutBtn{display:inline-flex !important; align-items:center !important; justify-content:center !important; padding-top:0 !important; padding-bottom:0 !important; height:42px !important; line-height:1 !important; box-sizing:border-box !important}
html.logged-in #loginBtn, html.logged-in #signupBtn{display:none !important}
#logoutBtn{display:none !important}
html.logged-in #logoutBtn{display:inline-flex !important}
#followBtn[style*="display: none"]{display:none !important}
.grid-stream{align-items:start !important}
.chat{height:100% !important}

/* ===== Correcciones v5 ===== */
.tokens-actions .red-btn, .tokens-actions #btnPrivateShow, .tokens-actions #abrirTipMenu{grid-row:auto !important; grid-column:auto !important; align-self:stretch !important; width:100%}
.tokens-actions #abrirPropina{grid-column:1 / -1 !important; grid-row:auto !important}
.grid-stream{align-items:stretch !important}
.zona-video{align-self:start !important}
.tokens-panel{align-self:start !important}
.chat{min-height:0 !important; height:auto !important}

/* ===== Móvil v6 ===== */
@media(max-width:768px){
  #loginBtn,#signupBtn,#logoutBtn,html.logged-in #logoutBtn{display:none !important}
  #followBtn{height:36px !important; padding:0 12px !important}
  #followBtn #followBtnText{display:none}
  #headerUsernameText{max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  #mobileMenuBtn::before,#mobileMenuBtn::after,#mobileMenuBtn span{background:var(--sn-f) !important}
  .tab-btn.active{background:var(--sn-f) !important; color:#fff !important; border-radius:999px !important; border-bottom:0 !important}
  .mobile-tabs .tab-btn-tipmenu{color:var(--sn-y) !important}
  .tip-btn{background:rgba(234,197,24,.14) !important; color:var(--sn-y) !important; border:1.5px solid var(--sn-y) !important}
}

/* ===== Herramientas de administrador en la sala ===== */
.admin-history-bar{padding:8px 0 !important; background:transparent !important; border:0 !important; display:flex !important; justify-content:flex-end}
.admin-history-bar[style*="display:none"]{display:none !important}
.btn-admin-history{
  background:rgba(255,255,255,.09) !important; color:#fff !important; border:1.5px solid rgba(190,140,255,.4) !important;
  border-radius:10px !important; height:34px; padding:0 14px !important; font:600 12.5px 'Poppins',sans-serif !important; cursor:pointer;
}
.btn-admin-history:hover{background:#e61973 !important; border-color:#e61973 !important}


/* ───── Pase mensual: insignia, barra y modo exclusivo ───── */
.chat-sub-badge{display:inline-flex;align-items:center;gap:4px;margin-right:6px;padding:1px 7px;border-radius:999px;background:linear-gradient(135deg,#eac518,#e61973);color:#1a0b2e;font:700 10.5px/1.5 'Poppins',sans-serif;vertical-align:middle}
.chat-sub-badge i{font-size:9px}
.pase-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;box-sizing:border-box;max-width:100%;min-width:0;margin:8px 0;padding:8px 12px;border-radius:12px;border:1px solid rgba(234,197,24,.45);background:rgba(234,197,24,.08);font:600 12.5px 'Poppins',sans-serif;color:#f6e9a8}
.pase-bar i{color:#eac518}
.pase-bar>span,.pase-bar>div{flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
.pase-link{flex:0 1 auto;max-width:100%}
.pase-btn{flex:1 1 auto;max-width:100%;white-space:normal;text-align:center;border:0;cursor:pointer;padding:7px 14px;border-radius:10px;background:#e61973;color:#fff;font:700 12.5px 'Poppins',sans-serif}
.pase-btn:hover{filter:brightness(1.1)} .pase-btn:disabled{opacity:.6;cursor:wait}
.mode-banner{margin:8px 0;padding:7px 12px;border-radius:10px;background:rgba(90,25,168,.35);border:1px solid #5a19a8;color:#e9dcff;font:600 12.5px 'Poppins',sans-serif;text-align:center}
@media (max-width:640px){.pase-bar{flex-direction:column;align-items:stretch;text-align:center}}

/* ───── Contenido exclusivo (modal) ───── */
.cx-ov{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(10,4,24,.78)}
.cx-ov.open{display:flex}
.cx-box{width:min(720px,100%);max-height:88vh;overflow:auto;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:#1a0b2e;color:#f1e9ff;font-family:'Poppins',sans-serif;padding:18px}
.cx-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cx-head h3{margin:0;font-size:16px}
.cx-x{border:0;background:transparent;color:#cbbbe6;font-size:20px;cursor:pointer}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.cx-it{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.cx-it img,.cx-it video{display:block;width:100%;height:150px;object-fit:cover;background:#000}
.cx-lock{height:150px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#eac518;background:rgba(90,25,168,.3)}
.cx-meta{padding:8px 10px;font-size:12.5px}
.cx-meta b{display:block;font-size:13px;margin-bottom:2px}
.cx-meta small{color:#b9a7d6}
.cx-empty{padding:26px 8px;text-align:center;color:#b9a7d6;font-size:13px}
.cx-form{display:grid;gap:10px;margin-bottom:14px}
.cx-form input[type=text]{padding:9px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:500 13px 'Poppins',sans-serif}
.cx-btn{border:0;cursor:pointer;padding:9px 16px;border-radius:10px;background:#e61973;color:#fff;font:700 13px 'Poppins',sans-serif}
.cx-btn:disabled{opacity:.6;cursor:wait}
.cx-del{border:0;background:transparent;color:#ff8aa8;cursor:pointer;font-size:12px;padding:0 10px 8px}
.cx-msg{font-size:12.5px;min-height:18px}
.pase-link{background:transparent;border:1px solid rgba(234,197,24,.6);color:#f6e9a8;cursor:pointer;padding:6px 12px;border-radius:10px;font:700 12px 'Poppins',sans-serif}