/* SenpaiLive – panel de la cosplayer (perfil, ganancias, ajustes) */
.pn{max-width:1100px; margin:0 auto; padding-top:8px}

/* Cabecera del panel */
.pn-hero{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:24px; padding:26px 30px; border-radius:26px;
  background:linear-gradient(135deg,#2d1250,#1a0b2e 70%); border:1.5px solid rgba(230,25,115,.4); box-shadow:0 0 30px rgba(90,25,168,.35);
}
.pn-hero::before{content:''; position:absolute; top:-90px; right:-60px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(230,25,115,.32),transparent 70%); pointer-events:none}
.pn-ava{position:relative; width:112px; height:112px; flex:0 0 112px}
.pn-ava img{width:100%; height:100%; object-fit:cover; border-radius:50%; border:4px solid #eac518; background:#2b0a52; display:block}
.pn-ava .cam{position:absolute; right:-2px; bottom:2px; width:34px; height:34px; border-radius:50%; background:#e61973; border:3px solid #1a0b2e; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; text-decoration:none}
.pn-id{flex:1; min-width:0; position:relative}
.pn-id h1{font-size:26px; font-weight:800; margin:0 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pn-id .st{font-size:13px; color:#cdb8e6; margin:0 0 14px}
.pn-id .st #estadoFoto{display:inline; color:#cdb8e6!important}
.pn-stats{display:flex; gap:12px; flex-wrap:wrap}
.pn-stat{min-width:130px; padding:10px 16px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(190,140,255,.28)}
.pn-stat b{display:block; font-size:22px; font-weight:800; line-height:1.15}
.pn-stat b i{font-size:15px; color:#eac518; margin-right:6px}
.pn-stat small{display:block; font-size:12px; color:#cdb8e6; margin-top:2px}
.pn-go{position:relative; align-self:flex-start; white-space:nowrap}

/* Pestañas */
.tab-menu{display:flex; gap:8px; margin:22px 0 18px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.tab-menu::-webkit-scrollbar{display:none}
.tab-button{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:999px; cursor:pointer;
  font-size:14px; font-weight:600; color:#e8dcf7; background:rgba(255,255,255,.06); border:1.5px solid rgba(190,140,255,.35); font-family:inherit; transition:.15s;
}
.tab-button:hover{border-color:#e61973; color:#fff}
.tab-button.active{background:linear-gradient(135deg,#e61973,#ff3d95); border-color:#e61973; color:#fff; box-shadow:0 0 18px rgba(230,25,115,.5)}
.tab-button .bd, #dmTabBadge{background:#eac518!important; color:#1a0b2e!important; border-radius:999px; padding:1px 8px!important; font-size:11px!important; font-weight:800}
.tab-content{display:none}
.tab-content.active{display:block}
.tab-content > h2{font-size:22px; font-weight:800; margin:0 0 14px}

/* Tarjetas y secciones */
.pn-card{padding:24px 26px; border-radius:22px; background:linear-gradient(180deg,#27103f,#1a0b2e); border:1.5px solid rgba(190,140,255,.25); margin-bottom:18px}
.pn-card h3{font-size:17px; font-weight:700; margin:0 0 4px}
.pn-card > p.hint, .hint{font-size:13px; color:#a98bd6; line-height:1.5; margin:0 0 14px}
.section-title{font-size:17px; font-weight:700; margin:28px 0 12px; padding-bottom:8px; border-bottom:1px solid rgba(190,140,255,.25)}
.section-title:first-child{margin-top:0}
.pn-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px}
.pn-grid .wide{grid-column:1/-1}
.field{margin-bottom:14px}
.pn label, .field label, .settings-grid label, .dual-select label{display:block; font-size:12.5px; font-weight:600; color:#cdb8e6; margin-bottom:6px; letter-spacing:.2px}
.pn input[type=text], .pn input[type=number], .pn input:not([type]), .pn textarea, .pn select{
  width:100%; padding:12px 14px; border-radius:12px; font-size:14px; color:#fff; font-family:inherit;
  background:rgba(255,255,255,.07); border:1.5px solid rgba(190,140,255,.35); outline:0; transition:.15s;
}
.pn textarea{resize:vertical; min-height:110px; line-height:1.5}
.pn input:focus, .pn textarea:focus, .pn select:focus{border-color:#e61973; box-shadow:0 0 0 3px rgba(230,25,115,.25)}
.pn input[readonly], .pn input:disabled{opacity:.65; cursor:not-allowed}
.pn select option{background:#1a0b2e; color:#fff}
.pn select[multiple]{min-height:200px; padding:6px}
.pn input[type=file]{width:100%; padding:10px; border-radius:12px; border:1.5px dashed rgba(190,140,255,.45); background:rgba(255,255,255,.04); color:#cdb8e6; font-size:13px}
.pn input[type=checkbox]{width:20px; height:20px; accent-color:#e61973; flex:0 0 auto; cursor:pointer}
.pn input[type=range]{accent-color:#e61973; padding:0}
.row2{display:flex; gap:10px}
.field > span{display:inline-block; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.05); font-size:14px}

/* Etiquetas */
.tag-list{display:flex; flex-wrap:wrap; gap:8px}
.tag-option{display:inline-flex!important; margin:0!important; cursor:pointer}
.tag-option input{position:absolute; opacity:0; pointer-events:none}
.tag-option span{display:inline-block; padding:7px 16px; border-radius:999px; font-size:13px; color:#fff; border:1.5px solid rgba(190,140,255,.45); background:rgba(255,255,255,.05); transition:.15s}
.tag-option:hover span{border-color:#e61973}
.tag-option input:checked + span{background:linear-gradient(135deg,#e61973,#ff3d95); border-color:#e61973; box-shadow:0 0 12px rgba(230,25,115,.45)}

/* Botones */
.btn-rojo, .btn-gris{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 22px; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; text-decoration:none; color:#fff; transition:.15s; white-space:nowrap;
}
.btn-rojo{border:0; background:linear-gradient(135deg,#e61973,#ff3d95); box-shadow:0 0 18px rgba(230,25,115,.45)}
.btn-rojo:hover{filter:brightness(1.1)}
.btn-gris{background:transparent; border:2px solid rgba(255,255,255,.4)}
.btn-gris:hover{background:rgba(255,255,255,.1)}
.btn-rojo:disabled{opacity:.5; cursor:not-allowed; box-shadow:none}
.acciones{margin-top:22px; display:flex; justify-content:flex-end}
.pn-card .acciones .btn-rojo{min-width:200px}

/* Tablas */
.pn table{width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; border-radius:14px; overflow:hidden; border:1px solid rgba(190,140,255,.25)}
.pn th{background:rgba(255,255,255,.08); text-align:left; font-weight:600; color:#e8dcf7; padding:11px 14px; font-size:12.5px}
.pn td{padding:11px 14px; border-top:1px solid rgba(190,140,255,.15); color:#fff}
.pn tbody tr:hover td{background:rgba(230,25,115,.06)}
.pn td .btn-gris, .pn td .btn-rojo{height:34px; padding:0 14px; font-size:12.5px}

/* Ajustes */
.settings-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px 18px; margin-bottom:6px}
.notification-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px; margin-bottom:10px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(190,140,255,.2); font-size:14px}
.notification-row select{width:auto; min-width:150px}
.notification-row span{flex:1}
.change-email{color:#ff7ab8; font-size:13px}
.dual-select{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pn-note{margin:8px 0 16px; padding:14px 16px; border-radius:14px; background:rgba(234,197,24,.1); border:1px solid rgba(234,197,24,.45); font-size:13.5px; line-height:1.55; color:#f3e7b0}
.pn-note b{color:#eac518; display:block; margin-bottom:2px}
.premium-referral-wrap{display:none; margin-bottom:16px}
.info-box{padding:16px 18px; border-radius:16px; background:rgba(90,25,168,.25); border:1px solid rgba(190,140,255,.35); display:grid; gap:10px}
.info-box strong{font-size:15px}
.premium-referral-hint{font-size:13px; color:#cdb8e6}
.pn .btn-copy-link{width:max-content}

/* Ganancias (bloques que escribe el JS con estilos en línea) */
#fichas > .btn-rojo{margin-bottom:6px}
#fichas [style*="rgba(255,0,0"], #fichas [style*="border:1px solid red"], #fichas [style*="rgba(255,215,0"]{
  border:1.5px solid rgba(190,140,255,.3)!important; border-radius:18px!important; background:linear-gradient(180deg,#27103f,#1a0b2e)!important; padding:16px 18px!important;
}
#fichas [style*="rgba(255,215,0"]{border-color:rgba(234,197,24,.55)!important}
#fichas [style*="width:"][style*="background:rgba(255,0,0,.75)"]{background:linear-gradient(90deg,#e61973,#eac518)!important}
#fichas [style*="height:10px"]{border-color:rgba(190,140,255,.4)!important}
#fichas tr[style*="rgba(255,0,0,.15)"]{background:rgba(230,25,115,.22)!important}
#fichas [style*="#ffb3b3"]{color:#ff7ab8!important}
#fichas [style*="#a5ffb0"], #fichas td span[style*="a5ffb0"]{color:#7be3a4!important}
#cycleFilterBar{align-items:center!important}
#cycleSelect{width:auto!important}
#cycleFilterBar label{margin:0!important; display:flex!important}
#totalUsdCycle{font-size:22px; color:#eac518}
#walletActivityBlock h3{font-size:18px}

/* Notificaciones */
.notification-card{padding:16px 18px; border-radius:16px; margin-bottom:12px; background:linear-gradient(180deg,#27103f,#1a0b2e); border:1px solid rgba(190,140,255,.28)}
.notification-card p{margin:0 0 6px; line-height:1.5; font-size:14.5px}
.notification-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.notification-actions .btn-rojo, .notification-actions .btn-gris{height:36px; font-size:13px; padding:0 16px}
#notificationsContainer p{color:#cdb8e6}

/* Herramientas (bots) */
.bot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.bot-card{position:relative; display:flex; gap:16px; padding:22px; border-radius:22px; background:linear-gradient(180deg,#27103f,#1a0b2e); border:1.5px solid rgba(190,140,255,.28); transition:.15s}
.bot-card:hover{border-color:#e61973; box-shadow:0 0 22px rgba(230,25,115,.3)}
.bot-icon{width:54px; height:54px; flex:0 0 54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; background:linear-gradient(135deg,#e61973,#5a19a8)}
.bot-main{flex:1; min-width:0}
.bot-title{font-size:17px; font-weight:700; margin-bottom:4px}
.bot-desc{font-size:13.5px; color:#cdb8e6; line-height:1.5; margin-bottom:14px}
.bot-actions{display:flex; align-items:center; justify-content:space-between; gap:12px}
.bot-settings-btn{display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:12px; border:2px solid rgba(255,255,255,.4); background:transparent; color:#fff; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; font-family:inherit}
.bot-settings-btn:hover{background:rgba(255,255,255,.1)}
.bot-status{margin-top:10px; font-size:12.5px; color:#a98bd6}
.bot-badge{position:absolute; top:14px; right:14px; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:#eac518; color:#1a0b2e; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center}
.switch{position:relative; width:50px; height:28px; flex:0 0 50px; display:inline-block; margin:0!important}
.switch input{opacity:0; width:0; height:0; position:absolute}
.slider{position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.18); border:1.5px solid rgba(190,140,255,.4); cursor:pointer; transition:.2s}
.slider::before{content:''; position:absolute; left:3px; top:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:.2s}
.switch input:checked + .slider{background:#e61973; border-color:#e61973}
.switch input:checked + .slider::before{transform:translateX(22px)}

/* Mensajes directos */
.perfil-dm-wrap{display:grid; grid-template-columns:300px 1fr; gap:16px; min-height:480px}
.perfil-dm-inbox, .perfil-dm-chat{border-radius:20px; background:linear-gradient(180deg,#27103f,#1a0b2e); border:1.5px solid rgba(190,140,255,.25); padding:16px; display:flex; flex-direction:column}
.perfil-dm-inbox-title{font-weight:700; margin-bottom:12px; font-size:15px}
#dmInboxList{overflow:auto; flex:1}
#dmInboxList button{background:rgba(255,255,255,.06)!important; color:#fff!important; border:1px solid rgba(190,140,255,.3)!important; border-radius:14px!important}
#dmInboxList button:hover{border-color:#e61973!important}
#dmInboxList [style*="ff2600"]{background:#e61973!important}
.perfil-dm-chat-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(190,140,255,.2)}
.perfil-dm-title{font-weight:700}
.perfil-dm-sub{font-size:12.5px; color:#a98bd6}
.perfil-dm-mute{height:34px; padding:0 14px; border-radius:10px; border:1.5px solid rgba(255,255,255,.4); background:transparent; color:#fff; font-size:12.5px; cursor:pointer; font-family:inherit}
.perfil-dm-box{flex:1; min-height:300px; max-height:420px; overflow:auto; padding:14px 2px}
.perfil-dm-box [style*="rgb(233, 233, 233)"]{background:rgba(255,255,255,.12)!important; color:#fff!important}
.perfil-dm-box [style*="rgb(255, 38, 0)"]{background:linear-gradient(135deg,#e61973,#ff3d95)!important}
.perfil-dm-compose{display:flex; gap:10px; padding-top:12px; border-top:1px solid rgba(190,140,255,.2)}
.perfil-dm-compose input{flex:1}
.perfil-dm-compose button{height:46px; padding:0 22px; border-radius:12px; border:0; background:linear-gradient(135deg,#e61973,#ff3d95); color:#fff; font-weight:700; cursor:pointer; font-family:inherit}

/* Foto */
.pn-photo{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.pn-photo .prev img{width:130px; height:130px; object-fit:cover; border-radius:20px; border:3px solid #eac518; display:block}
.pn-photo form{flex:1; min-width:240px; display:grid; gap:10px}
#cropModalOverlay{background:rgba(10,3,20,.8)!important; backdrop-filter:blur(5px)}
#cropModalOverlay > div{background:linear-gradient(180deg,#27103f,#1a0b2e)!important; border:1.5px solid rgba(230,25,115,.5)!important; border-radius:22px!important; padding:22px!important}
#cropModalOverlay h3{font-size:20px; font-weight:700}

/* Contrato del gremio */
#contractModal{display:none; position:fixed; inset:0; z-index:9998; align-items:center; justify-content:center; padding:16px; background:rgba(10,3,20,.8); backdrop-filter:blur(5px)}
#contractModal .modal-content{width:100%; max-width:620px; max-height:88vh; overflow:auto; padding:28px 26px; border-radius:24px; background:linear-gradient(180deg,#27103f,#1a0b2e); border:1.5px solid rgba(230,25,115,.5)}
#contractModal .policy-title{font-size:22px; font-weight:800; margin:0 0 12px}
#contractModal .section-heading{font-size:15px; margin:0 0 8px; color:#eac518}
#contractModal .section-text{font-size:13.5px; color:#cdb8e6; line-height:1.6; margin-bottom:18px}
#contractModal ol{padding-left:20px; display:grid; gap:8px; margin:8px 0}

/* Avisos */
.toast-host{position:fixed; top:84px; right:18px; z-index:10000; display:grid; gap:10px; width:min(360px,calc(100vw - 36px))}
.toast{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:16px; background:#27103f; border:1.5px solid rgba(190,140,255,.4); box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; transform:translateY(-8px); transition:.2s}
.toast.show{opacity:1; transform:none}
.toast-icon{width:28px; height:28px; flex:0 0 28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; background:#5a19a8}
.toast--success{border-color:#25b866}.toast--success .toast-icon{background:#25b866}
.toast--error{border-color:#e61973}.toast--error .toast-icon{background:#e61973}
.toast--warning{border-color:#eac518}.toast--warning .toast-icon{background:#eac518; color:#1a0b2e}
.toast-body{flex:1; min-width:0}
.toast-title{font-weight:700; font-size:14px}
.toast-message{font-size:13px; color:#cdb8e6; margin-top:2px; word-break:break-word}
.toast-close{background:none; border:0; color:#cdb8e6; font-size:20px; cursor:pointer; line-height:1}

.pn-hidden{display:none!important}

@media(max-width:820px){
  .pn-hero{flex-direction:column; align-items:center; text-align:center; padding:24px 18px; gap:16px}
  .pn-id{width:100%}
  .pn-id h1{font-size:22px}
  .pn-stats{justify-content:center}
  .pn-stat{flex:1 1 120px; min-width:0}
  .pn-go{align-self:stretch; width:100%}
  .pn-grid, .dual-select, .perfil-dm-wrap{grid-template-columns:1fr}
  .pn-card{padding:20px 16px}
  .acciones{justify-content:stretch}
  .pn-card .acciones .btn-rojo, .acciones .btn-rojo{width:100%}
  .pn table{display:block; overflow-x:auto; white-space:nowrap}
  .notification-row{flex-wrap:wrap}
  .pn-photo{justify-content:center}
  .tab-menu{margin-inline:-4px; padding-inline:4px}
  .toast-host{top:76px; right:12px}
}

/* La foto de perfil solo se ve en la pestaña "Mi perfil" */
#photoBox{display:none}
.pn:has(#formBio.active) #photoBox{display:block}

/* Bloques de ganancias */
#payoutBanner, #cycleFilterBar, #cycleSummary, #payoutLevels{
  border:1.5px solid rgba(190,140,255,.3); border-radius:18px; background:linear-gradient(180deg,#27103f,#1a0b2e); padding:16px 18px!important;
}
#payoutBanner [style*="height:10px"]{background:rgba(255,255,255,.12)!important}
#payoutLevels table td, #payoutLevels table th{border-color:rgba(190,140,255,.2)!important}
#payoutLevels table th{background:rgba(255,255,255,.08)!important}
#fichas > p{margin:16px 0 4px}
#saldoTokens{color:#eac518; font-weight:800}