/* DramaBox 2026 — identidad visual basada en el icono oficial */
:root{--db-pink:#F40065;--db-magenta:#FF0046;--db-orange:#FF871F;--db-deep:#12030D;--db-deep2:#230611;--db-card:#1D0713;--db-card2:#2A0A19;--db-white:#FFF9FA;--db-muted:#D9BFC9}
body{--db-primary:var(--db-pink);--db-secondary:var(--db-orange)}
body:not(.premiumyt-theme):not(.youtube-reseller){background:radial-gradient(circle at 8% 12%,rgba(244,0,101,.16),transparent 28%),radial-gradient(circle at 92% 20%,rgba(255,135,31,.12),transparent 26%),linear-gradient(145deg,#10030b,#17040f 48%,#0b0208) !important}
#sidebar-wrapper{background:linear-gradient(180deg,#16030d,#230611 52%,#11030a) !important;border-right:1px solid rgba(244,0,101,.30) !important}
.sidebar-logo img,.brand-logo{border-radius:14px !important;object-fit:cover !important;box-shadow:0 10px 30px rgba(244,0,101,.30),0 0 26px rgba(255,135,31,.12) !important}
.list-group-item{color:#ffeef3 !important;border-color:rgba(255,255,255,.05) !important;background:transparent !important}
.list-group-item:hover{background:rgba(244,0,101,.13) !important;color:#fff !important}
.list-group-item.menu-activo{background:linear-gradient(90deg,#c80052,#7b0734) !important;border-left:4px solid #ff871f !important;color:#fff !important}
.list-group-item.menu-activo i{color:#fff !important}
.btn-primary,.btn-info,.btn-success,.btn-warning,button.bg-primary,button.bg-info,button.bg-success,a.bg-primary,a.bg-info,a.bg-success{background:linear-gradient(135deg,#f40065,#ff871f) !important;border-color:transparent !important;color:#fff !important}
.btn-danger{background:linear-gradient(135deg,#b8003e,#f40065) !important;border-color:transparent !important}
.card,.panel,.modal-content{border-color:rgba(244,0,101,.28) !important}
.card-header{background:linear-gradient(90deg,#b9004d,#f40065 60%,#ff871f) !important;color:#fff !important}
.text-info,.text-primary,.text-success{color:#ff7ba8 !important}
.badge-primary,.badge-info{background:linear-gradient(135deg,#f40065,#ff871f) !important;color:#fff !important}
.form-control:focus,.custom-select:focus,select:focus,input:focus,textarea:focus{border-color:#f40065 !important;box-shadow:0 0 0 .2rem rgba(244,0,101,.16) !important}
body.bg-gray-50{background:radial-gradient(circle at 12% 15%,rgba(244,0,101,.20),transparent 25%),radial-gradient(circle at 90% 85%,rgba(255,135,31,.16),transparent 28%),linear-gradient(145deg,#10030b,#230611,#0c0208) !important}
body.premiumyt-theme,body.youtube-reseller{--x-blue:#F40065;--x-blue2:#C80052;--x-violet:#FF0046;--x-violet2:#FF871F;--x-bg:#10030B;--x-card:#210713;--x-card2:#2D0A1A;--x-text:#FFF9FA;--x-muted:#D9BFC9;background:radial-gradient(circle at 8% 15%,rgba(244,0,101,.20),transparent 28rem),radial-gradient(circle at 92% 30%,rgba(255,135,31,.15),transparent 28rem),linear-gradient(145deg,#10030B,#1D0611 50%,#090207) !important;color:var(--x-text) !important}
.premiumyt-theme header,.youtube-reseller header{background:linear-gradient(180deg,rgba(18,2,11,.98),rgba(37,5,18,.96)) !important;border-bottom:1px solid rgba(244,0,101,.28) !important}
.premiumyt-theme .brand-name,.youtube-reseller .brand-name{color:#fff !important}.premiumyt-theme .brand-youtube{color:#ff7aa9 !important}
.premiumyt-theme .brand-logo,.youtube-reseller .brand-logo{box-shadow:0 0 26px rgba(244,0,101,.30),0 0 12px rgba(255,135,31,.18) !important}
.premiumyt-theme header a:hover,.youtube-reseller header a:hover{border-color:rgba(244,0,101,.55) !important;background:rgba(244,0,101,.10) !important}
.premiumyt-theme .bg-red-500,.premiumyt-theme .bg-red-600,.premiumyt-theme .bg-red-700,.youtube-reseller .bg-green-500,.youtube-reseller .bg-green-600,.youtube-reseller .hero-primary,.premiumyt-theme #btnGen,.premiumyt-theme .download-apk-button{background:linear-gradient(135deg,#f40065,#ff871f) !important;color:#fff !important;border-color:transparent !important}
.premiumyt-theme .text-red-500,.premiumyt-theme .text-red-600,.youtube-reseller .text-green-500,.youtube-reseller .brand-youtube{color:#ff7ba8 !important}
.premiumyt-theme [class*="border-red-"],.youtube-reseller [class*="border-green-"]{border-color:rgba(244,0,101,.52) !important}
.premiumyt-theme main>section:first-child,.premiumyt-theme main>section.grid>div,.premiumyt-theme .download-card,.youtube-reseller [class*="rounded-3xl"],.youtube-reseller .pricing-card{background:linear-gradient(145deg,#2a0a19,#18050f) !important;border-color:rgba(244,0,101,.24) !important;box-shadow:0 18px 50px rgba(0,0,0,.28) !important}
.premiumyt-theme main>section.grid>div:hover,.youtube-reseller .pricing-card:hover{border-color:rgba(255,135,31,.58) !important;box-shadow:0 22px 55px rgba(244,0,101,.14) !important}
.premiumyt-theme #download{background:linear-gradient(145deg,#2b0718,#10030b) !important;border-color:rgba(244,0,101,.28) !important}
.premiumyt-theme footer,.youtube-reseller footer{background:#0a0207 !important;border-top-color:rgba(244,0,101,.22) !important}
.premiumyt-theme .animate-float,.youtube-reseller .hero-primary,.youtube-reseller .how-cta,.youtube-reseller .unlimited-cta{background:linear-gradient(135deg,#f40065,#ff871f) !important;box-shadow:0 14px 35px rgba(244,0,101,.25) !important}
.youtube-reseller .monthly-price .amount,.youtube-reseller .unlimited-price-box .amount,.youtube-reseller .value-green{color:#ff7ba8 !important}
.youtube-reseller .step-number,.youtube-reseller .faq-q-icon,.youtube-reseller .panel-float-icon{background:rgba(244,0,101,.13) !important;color:#ff7ba8 !important}
.youtube-reseller .faq-item:hover,.youtube-reseller .faq-item.open{border-color:rgba(244,0,101,.42) !important}
.youtube-reseller .currency-switch{background:#1b0610 !important;border-color:rgba(244,0,101,.32) !important}
.youtube-reseller .currency-switch button[aria-pressed="true"]{background:linear-gradient(135deg,#f40065,#ff871f) !important;color:#fff !important}
#dramabox-download-only{max-width:760px;margin:0 auto;padding:52px 24px;border:1px solid rgba(244,0,101,.35);border-radius:28px;background:radial-gradient(circle at 20% 10%,rgba(244,0,101,.20),transparent 30%),radial-gradient(circle at 85% 80%,rgba(255,135,31,.16),transparent 28%),linear-gradient(145deg,#280817,#11030b);box-shadow:0 25px 70px rgba(0,0,0,.38);text-align:center}
#dramabox-download-only img{width:120px;height:120px;object-fit:cover;border-radius:26px;margin:0 auto 26px;display:block;box-shadow:0 15px 40px rgba(244,0,101,.35)}
#dramabox-download-only .download-apk-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:230px;padding:15px 26px;border-radius:14px;font-weight:800;text-decoration:none;background:linear-gradient(135deg,#f40065,#ff871f) !important;color:#fff !important;box-shadow:0 12px 30px rgba(244,0,101,.28)}


/* =========================================================
   DRAMABOX FINAL OVERRIDE — PALETA OFICIAL EN TODO EL SISTEMA
   Este bloque se carga al final para neutralizar cualquier
   tema Xuper/azul/violeta heredado sin tocar lógica PHP/BD/JS.
   ========================================================= */
:root{
  --db-pink:#F40065;
  --db-red:#FF004C;
  --db-orange:#FF871F;
  --db-pink2:#FF2F78;
  --db-wine:#26000F;
  --db-wine2:#3A061B;
  --db-dark:#0B0208;
  --db-dark2:#14030D;
  --db-panel:#1E0612;
  --db-panel2:#280817;
  --db-line:rgba(244,0,101,.34);
  --db-text:#FFF7FA;
  --db-muted:#D7B7C4;
}

html,html body,
body,body.dramabox-panel,body.dramabox-panel,
body.premiumyt-theme,body.youtube-reseller{
  background:#0B0208!important;
  color:var(--db-text)!important;
}

/* Fondo global: destellos magenta/naranja como el icono DramaBox */
body.dramabox-panel,
body.dramabox-panel,
body:not(.premiumyt-theme):not(.youtube-reseller){
  background-color:#0B0208!important;
  background-image:
    radial-gradient(ellipse 42% 34% at 7% 8%,rgba(244,0,101,.34) 0%,rgba(244,0,101,.16) 32%,transparent 72%),
    radial-gradient(ellipse 38% 32% at 94% 13%,rgba(255,135,31,.30) 0%,rgba(255,135,31,.13) 34%,transparent 72%),
    radial-gradient(ellipse 46% 38% at 70% 92%,rgba(255,0,76,.24) 0%,rgba(244,0,101,.09) 35%,transparent 74%),
    radial-gradient(ellipse 32% 30% at 28% 72%,rgba(255,135,31,.15) 0%,transparent 72%),
    linear-gradient(145deg,#090207 0%,#17030D 44%,#0B0208 100%)!important;
  background-attachment:fixed!important;
}

/* Capas heredadas de galaxia/Xuper: se recolorean a DramaBox */
body.dramabox-panel::before{
  background-image:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.12) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 17%,rgba(255,135,31,.30) 0 1px,transparent 2px),
    radial-gradient(circle at 39% 76%,rgba(244,0,101,.34) 0 1px,transparent 2px),
    radial-gradient(circle at 88% 70%,rgba(255,255,255,.10) 0 1px,transparent 2px),
    radial-gradient(ellipse 42% 38% at 10% 12%,rgba(244,0,101,.20),transparent 70%),
    radial-gradient(ellipse 38% 34% at 92% 22%,rgba(255,135,31,.18),transparent 70%)!important;
  background-size:280px 240px,360px 290px,310px 260px,400px 330px,100% 100%,100% 100%!important;
  background-position:center!important;
  background-repeat:repeat,repeat,repeat,repeat,no-repeat,no-repeat!important;
  opacity:.9!important;
  transform:none!important;
  animation:none!important;
}
body.dramabox-panel::after{
  background:
    radial-gradient(circle at 9% 16%,rgba(244,0,101,.16),transparent 27%),
    radial-gradient(circle at 91% 20%,rgba(255,135,31,.14),transparent 26%),
    radial-gradient(circle at 70% 90%,rgba(255,0,76,.10),transparent 30%)!important;
}
body.dramabox-panel #xuper-cosmos-bg,
body.dramabox-panel #xuper-zodiac-motion{display:none!important;}

/* Barra superior */
.ctnav,.navbar.ctnav,.navbar,
body.dramabox-panel .ctnav,body.dramabox-panel .ctnav{
  background:linear-gradient(90deg,#15030C 0%,#260613 48%,#16030C 100%)!important;
  border-bottom:1px solid rgba(244,0,101,.35)!important;
  box-shadow:0 6px 24px rgba(244,0,101,.08)!important;
}

/* Lateral */
#sidebar-wrapper{
  background:
    radial-gradient(circle at 35% 5%,rgba(244,0,101,.18),transparent 26%),
    linear-gradient(180deg,#13030C 0%,#220512 52%,#0D0209 100%)!important;
  border-right:1px solid rgba(244,0,101,.34)!important;
  box-shadow:8px 0 30px rgba(244,0,101,.07)!important;
}
.sidebar-heading{
  background:linear-gradient(180deg,#1A0310,#280614)!important;
  border-bottom:1px solid rgba(244,0,101,.30)!important;
}
.sidebar-logo img,.brand-logo{
  box-shadow:0 12px 34px rgba(244,0,101,.32),0 0 30px rgba(255,135,31,.18)!important;
}
.sidebar-credits{background:rgba(38,4,18,.82)!important;border-color:rgba(244,0,101,.22)!important;}
.list-group-item,.list-group-item.list-group-item-action{
  background:transparent!important;color:#FFEAF1!important;border-color:rgba(255,255,255,.055)!important;
}
.list-group-item:hover,.list-group-item:focus{background:rgba(244,0,101,.14)!important;color:#fff!important;}
.list-group-item.menu-activo,.list-group-item.menu-activo:hover,.list-group-item.menu-activo:focus{
  background:linear-gradient(90deg,#D8005B,#FF004C 72%,#FF871F)!important;
  border-left:4px solid #FF871F!important;color:#fff!important;
  box-shadow:inset 0 0 20px rgba(255,255,255,.06),0 0 18px rgba(244,0,101,.10)!important;
}
.list-group-item i{color:#FFD4E1!important;}
.list-group-item.menu-activo i{color:#fff!important;}

/* Contenedores */
.card,.ctcard,.ctluser-main,.ctheading,.dashboard-card,.panel-card,.panel,
.table-responsive,.jumbotron,.well,.list-group,.dataTables_wrapper,.dropdown-menu{
  background:linear-gradient(145deg,rgba(35,5,18,.94),rgba(20,3,12,.94))!important;
  border-color:rgba(244,0,101,.30)!important;
  color:var(--db-text)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.28)!important;
}
.card-header,.panel-heading,.section-header,.ctheading{
  background:linear-gradient(90deg,#C90053 0%,#F40065 58%,#FF871F 100%)!important;
  color:#fff!important;border-color:rgba(255,135,31,.34)!important;
}
.card-body,.panel-body,.card-footer{background:transparent!important;color:var(--db-text)!important;}

/* Encabezados específicos que todavía traen azul/violeta inline */
.card-header[style],.ctheading[style],.panel-heading[style],
[class*="card-header"]{
  background:linear-gradient(90deg,#C90053,#F40065 58%,#FF871F)!important;
}

/* Texto */
h1,h2,h3,h4,h5,h6,p,label,legend,th,td,.form-text{color:var(--db-text)!important;}
.text-muted,small,.small{color:var(--db-muted)!important;}
.text-info,.text-primary,.text-success{color:#FF78A6!important;}
a{color:#FF7EAA!important;}a:hover{color:#FFB2C9!important;}
hr{border-color:rgba(244,0,101,.25)!important;}

/* Formularios */
.form-control,.custom-select,.form-select,.custom-file-label,
.input-group-text,select,textarea,input{
  background:#FFF9FB!important;color:#27131B!important;border-color:rgba(244,0,101,.30)!important;
}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:#8C6875!important;}
.form-control:focus,.custom-select:focus,.form-select:focus,select:focus,input:focus,textarea:focus{
  background:#fff!important;color:#241019!important;border-color:#F40065!important;
  box-shadow:0 0 0 .18rem rgba(244,0,101,.17)!important;outline:0!important;
}
.input-group-text{background:#FFE8F0!important;color:#7A2444!important;}

/* Botones: sin azul/violeta Xuper */
.btn-primary,.btn-info,.btn-success,.btn-warning,
button.bg-primary,button.bg-info,button.bg-success,
a.bg-primary,a.bg-info,a.bg-success,
.btn-primary:hover,.btn-info:hover,.btn-success:hover,.btn-warning:hover{
  background:linear-gradient(135deg,#F40065 0%,#FF004C 52%,#FF871F 100%)!important;
  border-color:transparent!important;color:#fff!important;
  box-shadow:0 7px 18px rgba(244,0,101,.18)!important;
}
.btn-danger{background:linear-gradient(135deg,#C60046,#F40065)!important;border-color:transparent!important;color:#fff!important;}
.btn-secondary,.btn-dark{background:#35101F!important;border-color:rgba(244,0,101,.28)!important;color:#fff!important;}

/* Tablas: magenta/naranja en vez de azul */
.table,.table-responsive table{color:#FFF5F8!important;background:transparent!important;}
.table thead th,.table thead td,.table-sm th{
  background:linear-gradient(90deg,#9E0844,#D8005B 55%,#8D163F)!important;
  color:#fff!important;border-color:rgba(255,135,31,.30)!important;
}
.table tbody tr,.table tbody tr:nth-child(even),.table tbody tr:nth-child(odd){
  background:rgba(36,5,18,.78)!important;color:#FFF4F7!important;border-color:rgba(244,0,101,.14)!important;
}
.table tbody tr:nth-child(even) td{background:rgba(48,7,24,.72)!important;}
.table tbody tr:hover,.table tbody tr:hover td{background:rgba(244,0,101,.12)!important;color:#fff!important;}
.table-bordered{border-color:rgba(244,0,101,.28)!important;}

/* Badges y estados */
.badge-primary,.badge-info{background:linear-gradient(135deg,#F40065,#FF871F)!important;color:#fff!important;}
.badge-success{background:#00B88A!important;color:#fff!important;}
.badge-warning{background:#FF871F!important;color:#2A0713!important;}
.badge-danger{background:#E40050!important;color:#fff!important;}
.badge-secondary{background:#542238!important;color:#fff!important;}

/* Dashboard */
.dashboard-card{background:linear-gradient(145deg,#260817,#18040E)!important;}
.dashboard-card .card-header{background:linear-gradient(90deg,#C90053,#F40065 60%,#FF871F)!important;border-bottom:1px solid rgba(255,135,31,.32)!important;}
.stat-number,.infinity-symbol{color:#FF5F99!important;text-shadow:0 0 16px rgba(244,0,101,.28)!important;}
.stat-label{color:#E5C1CF!important;}
.info-box{background:rgba(244,0,101,.09)!important;border-left-color:#F40065!important;}
.info-box p{color:#DAB8C5!important;}
.action-btn{background:rgba(244,0,101,.09)!important;border-color:rgba(244,0,101,.32)!important;color:#FFF!important;}
.action-btn:hover{background:rgba(244,0,101,.17)!important;border-color:#FF871F!important;}
.action-btn i{color:#FF78A6!important;}

/* Filtros / buscadores */
.myteam-filter-box,.myteam-guide,.edit-guide{background:#280817!important;border-color:rgba(244,0,101,.28)!important;color:#FFF!important;}
.myteam-filter-label,.myteam-guide .guide-title{color:#FFE7EF!important;}
.myteam-filter-hint,.myteam-filter-summary,.myteam-guide .guide-note,.edit-help{color:#D4B2BF!important;}

/* Alertas */
.alert{background:#2A0918!important;color:#FFF5F8!important;border-color:rgba(244,0,101,.32)!important;}
.alert-success{background:#082E27!important;color:#B8FFE8!important;border-color:#00B88A!important;}
.alert-danger{background:#3A0718!important;color:#FFD2DF!important;border-color:#F40065!important;}
.alert-warning{background:#3A2108!important;color:#FFE4BA!important;border-color:#FF871F!important;}
.alert-info{background:#2A0918!important;color:#FFDCE8!important;border-color:#F40065!important;}

/* Modales y confirmaciones: también con identidad DramaBox */
.modal-content,.panel-confirm,.afx-edit-modal,.myteam-created-modal{
  background:linear-gradient(145deg,#2A0918,#16030D)!important;color:#FFF!important;border-color:rgba(244,0,101,.34)!important;
  box-shadow:0 22px 70px rgba(244,0,101,.16)!important;
}
.modal-header{background:linear-gradient(90deg,#C90053,#F40065,#FF871F)!important;color:#fff!important;border-color:rgba(255,135,31,.30)!important;}
.modal-footer{background:rgba(20,3,12,.90)!important;border-color:rgba(244,0,101,.22)!important;}
.modal-title,.modal-content h1,.modal-content h2,.modal-content h3,.modal-content h4,.modal-content h5,.modal-content h6{color:#fff!important;}
.modal-body,.modal-content p,.modal-content label,.panel-confirm-body,.myteam-created-details{color:#F5DCE5!important;}
.modal-content .form-control,.modal-content select,.modal-content textarea{background:#FFF9FB!important;color:#27131B!important;}

/* Toasts propios */
.panel-toast{background:linear-gradient(145deg,#2A0918,#17040E)!important;color:#FFF!important;border-color:rgba(244,0,101,.34)!important;box-shadow:0 16px 40px rgba(244,0,101,.16)!important;}
.panel-toast .pt-close{color:#FFD5E1!important;}
.panel-btn-cancel{background:#4A1A2E!important;color:#fff!important;}
.panel-btn-ok{background:linear-gradient(135deg,#F40065,#FF871F)!important;color:#fff!important;}

/* Paginación */
.pagination .page-link{background:#35101F!important;border-color:rgba(244,0,101,.28)!important;color:#FFEAF1!important;}
.pagination .page-item.active .page-link{background:linear-gradient(135deg,#F40065,#FF871F)!important;border-color:transparent!important;color:#fff!important;}
.pagination .page-link:hover{background:#5A1633!important;color:#fff!important;}

/* Indicadores / iconos que heredaron azul */
.dashboard-card i[style*="dc3545"],.dashboard-card i[style*="DC3545"],
.dashboard-card .fa-check-circle,.dashboard-card .fa-users,.dashboard-card .fa-coins,.dashboard-card .fa-chart-line,
.text-blue-500,.text-blue-600,.text-blue-700,.text-indigo-500,.text-indigo-600,.text-purple-500,.text-purple-600{
  color:#FF5F99!important;
}

/* Cajas y títulos Tailwind/legacy azules */
.bg-blue-50,.bg-blue-100,.bg-blue-200,.bg-blue-500,.bg-blue-600,.bg-blue-700,
.bg-indigo-50,.bg-indigo-100,.bg-indigo-500,.bg-indigo-600,
.bg-purple-50,.bg-purple-100,.bg-purple-500,.bg-purple-600{
  background:linear-gradient(145deg,#2A0918,#18040E)!important;color:#FFF!important;
}
.border-blue-200,.border-blue-300,.border-blue-400,.border-blue-500,.border-indigo-200,.border-indigo-400,.border-purple-200,.border-purple-400{
  border-color:rgba(244,0,101,.32)!important;
}

/* Páginas públicas */
body.premiumyt-theme,body.youtube-reseller{
  background-color:#0B0208!important;
  background-image:
    radial-gradient(ellipse 44% 34% at 8% 10%,rgba(244,0,101,.32),transparent 70%),
    radial-gradient(ellipse 42% 34% at 92% 12%,rgba(255,135,31,.27),transparent 70%),
    radial-gradient(ellipse 42% 36% at 50% 94%,rgba(255,0,76,.20),transparent 72%),
    linear-gradient(145deg,#090207,#1A0310 50%,#0B0208)!important;
  background-attachment:fixed!important;background-size:cover!important;
}
.premiumyt-theme header,.youtube-reseller header{background:linear-gradient(90deg,#13030C,#270614,#13030C)!important;border-bottom:1px solid rgba(244,0,101,.30)!important;}
.premiumyt-theme main>section:first-child,.premiumyt-theme main>section.grid>div,.premiumyt-theme .download-card,
.youtube-reseller [class*="rounded-3xl"],.youtube-reseller .pricing-card{
  background:linear-gradient(145deg,#2A0918,#18040E)!important;border-color:rgba(244,0,101,.30)!important;
}
.premiumyt-theme .text-red-500,.premiumyt-theme .text-red-600,.youtube-reseller .text-green-500,.youtube-reseller .brand-youtube{color:#FF78A6!important;}
.premiumyt-theme .bg-red-500,.premiumyt-theme .bg-red-600,.premiumyt-theme .bg-red-700,.youtube-reseller .bg-green-500,.youtube-reseller .bg-green-600,.youtube-reseller .hero-primary,.premiumyt-theme #btnGen,.premiumyt-theme .download-apk-button{
  background:linear-gradient(135deg,#F40065,#FF004C 55%,#FF871F)!important;color:#fff!important;border-color:transparent!important;
}
.youtube-reseller .currency-switch{background:#260817!important;border-color:rgba(244,0,101,.30)!important;}
.youtube-reseller .currency-switch button[aria-pressed="true"]{background:linear-gradient(135deg,#F40065,#FF871F)!important;color:#fff!important;}

/* Iconos/alerta de protección que aún traían #6C4BD9 inline */
.neon-alert-protection i,.neon-alert-protection h3{color:#FF78A6!important;text-shadow:0 0 20px rgba(244,0,101,.42)!important;}
.neon-alert-protection button{background:linear-gradient(135deg,#F40065,#FF871F)!important;box-shadow:0 0 18px rgba(244,0,101,.34)!important;}

/* Logo y marca */
.sidebar-logo img,.brand-logo,#dramabox-download-only img{object-fit:cover!important;}
.brand-youtube{color:#FF78A6!important;}

@media(max-width:767.98px){
  body.dramabox-panel,body.dramabox-panel,body.premiumyt-theme,body.youtube-reseller{background-attachment:scroll!important;}
}


/* =========================================================
   DRAMABOX FINAL VISUAL FIX — LOGO + DESTELLOS DEL ICONO
   Solo apariencia. No modifica PHP, BD ni lógica.
   ========================================================= */
html,body{min-height:100%!important;}
body.dramabox-panel,body.dramabox-panel{
  position:relative!important;
  isolation:isolate!important;
  background-color:#080107!important;
  background-image:
    radial-gradient(ellipse 52% 42% at 4% 3%,rgba(255,0,76,.48) 0%,rgba(244,0,101,.25) 26%,transparent 68%),
    radial-gradient(ellipse 46% 40% at 97% 4%,rgba(255,135,31,.45) 0%,rgba(255,73,36,.22) 28%,transparent 68%),
    radial-gradient(ellipse 52% 44% at 82% 100%,rgba(255,0,76,.32) 0%,rgba(244,0,101,.15) 30%,transparent 70%),
    radial-gradient(ellipse 42% 38% at 15% 92%,rgba(255,135,31,.24) 0%,rgba(255,60,90,.10) 32%,transparent 72%),
    linear-gradient(135deg,#070107 0%,#18020D 35%,#25030F 58%,#0A0107 100%)!important;
  background-attachment:fixed!important;
  background-size:cover!important;
}
/* Elimina visualmente las capas antiguas azules/galácticas */
body.dramabox-panel #xuper-cosmos-bg,
body.dramabox-panel #xuper-zodiac-motion,
body.dramabox-panel #net-canvas,
body.dramabox-panel #xuper-cosmos-bg,
body.dramabox-panel #xuper-zodiac-motion,
body.dramabox-panel #net-canvas{display:none!important;visibility:hidden!important;opacity:0!important;background:none!important;}
/* Marca DramaBox como sello de fondo, visible pero sin tapar los módulos */
body.dramabox-panel::before,body.dramabox-panel::before{
  content:""!important;
  position:fixed!important;
  z-index:0!important;
  pointer-events:none!important;
  left:54%!important;
  top:53%!important;
  width:min(330px,32vw)!important;
  height:min(330px,32vw)!important;
  transform:translate(-50%,-50%)!important;
  background-image:
    radial-gradient(circle at center,rgba(244,0,101,.18) 0%,rgba(255,135,31,.09) 36%,transparent 72%),
    url("../img/reelshort-logo.svg?v=20261028r2")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%,190px 190px!important;
  opacity:.16!important;
  filter:drop-shadow(0 0 35px rgba(244,0,101,.28))!important;
  border-radius:45px!important;
}
/* Destellos pequeños, inspirados en el fondo del icono */
body.dramabox-panel::after,body.dramabox-panel::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:
    radial-gradient(circle at 17% 18%,rgba(255,255,255,.24) 0 1px,transparent 2px),
    radial-gradient(circle at 74% 14%,rgba(255,135,31,.38) 0 1.2px,transparent 2.4px),
    radial-gradient(circle at 34% 78%,rgba(255,0,76,.36) 0 1.2px,transparent 2.5px),
    radial-gradient(circle at 88% 72%,rgba(255,255,255,.15) 0 1px,transparent 2px),
    radial-gradient(circle at 58% 42%,rgba(244,0,101,.18) 0 1px,transparent 2px),
    radial-gradient(circle at 8% 62%,rgba(255,135,31,.20) 0 1px,transparent 2px);
  background-size:310px 260px,390px 300px,340px 280px,430px 350px,280px 230px,360px 290px!important;
  opacity:.75!important;
}
/* El contenido queda por encima del fondo/sello */
body.dramabox-panel #wrapper,body.dramabox-panel #wrapper{position:relative!important;z-index:1!important;}
#page-content-wrapper{background:transparent!important;}
/* Sidebar: mostrar siempre el logo oficial DramaBox */
.sidebar-logo img{content:url("../img/logo.png?v=20261028b")!important;width:112px!important;height:112px!important;object-fit:cover!important;}
/* El logo también aparece en el panel principal, más visible */
body.dramabox-panel #page-content-wrapper::after,body.dramabox-panel #page-content-wrapper::after{
  content:""!important;
  position:fixed!important;
  right:4%!important;
  bottom:7%!important;
  width:155px!important;
  height:155px!important;
  background:url("../img/reelshort-logo.svg?v=20261028r2") center/contain no-repeat!important;
  opacity:.075!important;
  pointer-events:none!important;
  z-index:0!important;
  filter:drop-shadow(0 0 28px rgba(244,0,101,.30))!important;
}
@media(max-width:767.98px){
  body.dramabox-panel::before,body.dramabox-panel::before{left:50%!important;top:48%!important;width:280px!important;height:280px!important;opacity:.12!important;}
  body.dramabox-panel #page-content-wrapper::after,body.dramabox-panel #page-content-wrapper::after{width:95px!important;height:95px!important;right:3%!important;bottom:4%!important;}
}

/* =========================================================
   DRAMABOX — BLOQUE FINAL REAL (2026-10-06)
   El panel ya no usa ninguna hoja Xuper para el tema visual.
   ========================================================= */
html, body.dramabox-panel {
  background-color:#080107 !important;
  background-image:
    radial-gradient(ellipse 55% 48% at 0% 0%, rgba(255,0,76,.52) 0%, rgba(244,0,101,.24) 30%, transparent 68%),
    radial-gradient(ellipse 48% 42% at 100% 0%, rgba(255,135,31,.48) 0%, rgba(255,65,55,.20) 30%, transparent 68%),
    radial-gradient(ellipse 52% 46% at 92% 100%, rgba(255,0,76,.38) 0%, rgba(244,0,101,.15) 32%, transparent 72%),
    radial-gradient(ellipse 42% 38% at 10% 100%, rgba(255,135,31,.28) 0%, transparent 70%),
    linear-gradient(135deg,#070107 0%,#17020c 38%,#26030f 62%,#080107 100%) !important;
  background-attachment:fixed !important;
  background-size:cover !important;
  color:#fff7fa !important;
}
body.dramabox-panel #wrapper,
body.dramabox-panel #page-content-wrapper,
body.dramabox-panel .container,
body.dramabox-panel .container-fluid,
body.dramabox-panel main { background:transparent !important; }

/* Sidebar + logo oficial */
body.dramabox-panel #sidebar-wrapper {
  background:linear-gradient(180deg,#16020b 0%,#26040f 48%,#0d0208 100%) !important;
  border-right:1px solid rgba(244,0,101,.42) !important;
}
body.dramabox-panel .sidebar-heading {
  background:radial-gradient(circle at 50% 25%,rgba(244,0,101,.24),transparent 58%),linear-gradient(180deg,#1a020c,#280510) !important;
  border-bottom:1px solid rgba(244,0,101,.30) !important;
}
body.dramabox-panel .sidebar-logo img {
  content:url('../img/logo.png?v=20261028b') !important;
  width:112px !important;height:112px !important;
  object-fit:cover !important;border-radius:24px !important;
  box-shadow:0 0 32px rgba(244,0,101,.42),0 12px 35px rgba(0,0,0,.48) !important;
}
body.dramabox-panel .list-group-item {
  background:transparent !important;color:#ffeef4 !important;
  border-color:rgba(255,255,255,.045) !important;
}
body.dramabox-panel .list-group-item:hover {
  background:rgba(244,0,101,.15) !important;color:#fff !important;
}
body.dramabox-panel .list-group-item.menu-activo,
body.dramabox-panel .list-group-item.menu-activo:hover {
  background:linear-gradient(90deg,#e6005b 0%,#ff174f 58%,#ff871f 100%) !important;
  border-left:4px solid #ffd1df !important;color:#fff !important;
}

/* Barra superior */
body.dramabox-panel #page-content-wrapper > nav,
body.dramabox-panel #page-content-wrapper .navbar {
  background:linear-gradient(90deg,rgba(16,2,10,.98),rgba(38,3,16,.96)) !important;
  border-bottom:1px solid rgba(244,0,101,.32) !important;
}

/* TODOS los encabezados de tarjetas: cero azul/violeta */
body.dramabox-panel .card-header,
body.dramabox-panel .ctheading,
body.dramabox-panel .usage-head,
body.dramabox-panel .header-style {
  background:linear-gradient(90deg,#b6004c 0%,#f40065 54%,#ff871f 100%) !important;
  border-color:rgba(255,135,31,.38) !important;color:#fff !important;
}
body.dramabox-panel .card,
body.dramabox-panel .panel,
body.dramabox-panel .dashboard-card,
body.dramabox-panel .ctluser-main,
body.dramabox-panel .ctcard,
body.dramabox-panel .main-card,
body.dramabox-panel .usage-card,
body.dramabox-panel .device-card,
body.dramabox-panel .filter-box,
body.dramabox-panel .myteam-filter-box {
  background:linear-gradient(145deg,rgba(43,6,23,.96),rgba(20,3,12,.96)) !important;
  border-color:rgba(244,0,101,.40) !important;
  box-shadow:0 14px 42px rgba(0,0,0,.30),0 0 24px rgba(244,0,101,.035) !important;
  color:#fff7fa !important;
}
body.dramabox-panel .card-body,
body.dramabox-panel .card-footer,
body.dramabox-panel .panel-body { background:transparent !important;color:#fff7fa !important; }

/* Dashboard principal: logo real visible dentro del panel, no solo como fondo */
body.dramabox-panel .dashboard-card:first-of-type .card-header,
body.dramabox-panel .dashboard-card:first-child .card-header {
  position:relative !important;overflow:hidden !important;
  min-height:80px !important;
}
body.dramabox-panel .dashboard-card:first-of-type .card-header::after,
body.dramabox-panel .dashboard-card:first-child .card-header::after {
  content:"" !important;position:absolute !important;right:22px !important;top:50% !important;
  width:72px !important;height:72px !important;transform:translateY(-50%) !important;
  background:url('../img/reelshort-logo.svg?v=20261028r2') center/contain no-repeat !important;
  opacity:.95 !important;filter:drop-shadow(0 0 18px rgba(255,0,76,.45)) !important;
  pointer-events:none !important;
}
/* Marca de agua grande en el espacio principal */
body.dramabox-panel #page-content-wrapper::after {
  content:"" !important;position:fixed !important;right:5% !important;bottom:6% !important;
  width:190px !important;height:190px !important;
  background:
    radial-gradient(circle,rgba(244,0,101,.15),transparent 68%),
    url('../img/reelshort-logo.svg?v=20261028r2') center/150px 150px no-repeat !important;
  opacity:.18 !important;pointer-events:none !important;z-index:0 !important;
  filter:drop-shadow(0 0 32px rgba(244,0,101,.32)) !important;
}
body.dramabox-panel #page-content-wrapper > * { position:relative;z-index:1; }

/* Destellos visibles, pero ligeros */
body.dramabox-panel::before {
  content:"" !important;position:fixed !important;inset:0 !important;pointer-events:none !important;z-index:0 !important;
  background-image:
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.25) 0 1px,transparent 2px),
    radial-gradient(circle at 76% 16%,rgba(255,135,31,.50) 0 1.5px,transparent 3px),
    radial-gradient(circle at 34% 78%,rgba(255,0,76,.44) 0 1.5px,transparent 3px),
    radial-gradient(circle at 89% 72%,rgba(255,255,255,.18) 0 1px,transparent 2px),
    radial-gradient(circle at 60% 42%,rgba(244,0,101,.30) 0 1px,transparent 2px);
  background-size:320px 260px,410px 330px,350px 290px,440px 360px,300px 250px !important;
  opacity:.78 !important;
}

/* =========================================================
   DRAMABOX — COSMOS VISIBLE + TABLAS CLIENTES SIN AZUL
   ========================================================= */
/* Fondo tipo nebulosa/Andrómeda, visible en todos los módulos */
html body.dramabox-panel{
  background-color:#050006 !important;
  background-image:
    radial-gradient(ellipse 72% 48% at 8% 8%, rgba(255,0,102,.46) 0%, rgba(244,0,101,.20) 24%, transparent 64%),
    radial-gradient(ellipse 58% 44% at 96% 12%, rgba(255,135,31,.42) 0%, rgba(255,67,63,.16) 28%, transparent 66%),
    radial-gradient(ellipse 64% 42% at 82% 92%, rgba(255,0,76,.34) 0%, rgba(244,0,101,.13) 30%, transparent 68%),
    radial-gradient(ellipse 48% 40% at 18% 88%, rgba(255,105,31,.30) 0%, rgba(255,0,102,.10) 34%, transparent 70%),
    radial-gradient(ellipse 90% 28% at 52% 48%, rgba(255,0,91,.10) 0%, transparent 68%),
    linear-gradient(135deg,#030003 0%,#12000b 34%,#24030f 56%,#0b0108 100%) !important;
  background-attachment:fixed !important;
  background-size:cover !important;
}
/* Nebulosas móviles: destellos rápidos pero ligeros */
html body.dramabox-panel::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.92 !important;
  background-image:
    radial-gradient(circle at 12% 17%,rgba(255,255,255,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 24% 63%,rgba(255,135,31,.70) 0 1.5px,transparent 3px),
    radial-gradient(circle at 43% 28%,rgba(255,0,102,.72) 0 1px,transparent 2.5px),
    radial-gradient(circle at 61% 77%,rgba(255,255,255,.58) 0 1px,transparent 2px),
    radial-gradient(circle at 76% 20%,rgba(255,135,31,.82) 0 1.4px,transparent 3px),
    radial-gradient(circle at 89% 67%,rgba(255,0,76,.72) 0 1.2px,transparent 2.7px),
    radial-gradient(ellipse 30% 10% at 52% 38%,rgba(255,0,102,.18),transparent 72%),
    radial-gradient(ellipse 24% 9% at 63% 55%,rgba(255,135,31,.15),transparent 70%);
  background-size:270px 230px,330px 270px,300px 250px,360px 290px,310px 260px,390px 320px,100% 100%,100% 100% !important;
  background-repeat:repeat,repeat,repeat,repeat,repeat,repeat,no-repeat,no-repeat !important;
  animation:dramaboxStarsFast .85s ease-in-out infinite alternate !important;
}
html body.dramabox-panel::after{
  content:"" !important;
  position:fixed !important;
  inset:-8% !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse 34% 16% at 16% 24%,rgba(255,0,102,.22),transparent 72%),
    radial-gradient(ellipse 30% 13% at 88% 28%,rgba(255,135,31,.20),transparent 72%),
    radial-gradient(ellipse 42% 15% at 72% 82%,rgba(255,0,76,.16),transparent 72%);
  filter:blur(10px);
  opacity:.88 !important;
  animation:dramaboxNebulaFast 1.8s ease-in-out infinite alternate !important;
}
@keyframes dramaboxStarsFast{
  0%{opacity:.58;transform:scale(1);filter:brightness(.9);}
  100%{opacity:1;transform:scale(1.012);filter:brightness(1.45);}
}
@keyframes dramaboxNebulaFast{
  0%{transform:translate3d(-1.5%,.5%,0) scale(1);opacity:.58;}
  100%{transform:translate3d(1.5%,-.5%,0) scale(1.045);opacity:1;}
}
html body.dramabox-panel #wrapper,
html body.dramabox-panel #page-content-wrapper,
html body.dramabox-panel #page-content-wrapper > *{position:relative;z-index:1;}

/* Tabla CLIENTES: neutraliza cualquier regla azul heredada de Xuper */
html body.dramabox-panel #codesTable,
html body.dramabox-panel #codesTable.table,
html body.dramabox-panel #codesTable.table-dark{
  background:transparent !important;
  color:#FFF5F8 !important;
  border-color:rgba(244,0,101,.35) !important;
}
html body.dramabox-panel #codesTable thead,
html body.dramabox-panel #codesTable.table-dark thead,
html body.dramabox-panel #codesTable thead tr,
html body.dramabox-panel #codesTable.table-dark thead tr{
  background:linear-gradient(90deg,#C90053 0%,#F40065 52%,#FF871F 100%) !important;
}
html body.dramabox-panel #codesTable thead th,
html body.dramabox-panel #codesTable.table-dark thead th,
html body.dramabox-panel #codesTable thead td,
html body.dramabox-panel #codesTable.table-dark thead td{
  background:linear-gradient(90deg,#C90053 0%,#F40065 52%,#FF871F 100%) !important;
  background-color:#C90053 !important;
  color:#fff !important;
  border-color:rgba(255,135,31,.34) !important;
  box-shadow:none !important;
}
html body.dramabox-panel #codesTable tbody tr,
html body.dramabox-panel #codesTable.table-dark tbody tr,
html body.dramabox-panel #codesTable tbody td,
html body.dramabox-panel #codesTable.table-dark tbody td{
  background:rgba(31,4,17,.90) !important;
  background-color:rgba(31,4,17,.90) !important;
  color:#FFF4F7 !important;
  border-color:rgba(244,0,101,.16) !important;
}
html body.dramabox-panel #codesTable tbody tr:nth-child(even) td,
html body.dramabox-panel #codesTable.table-dark tbody tr:nth-child(even) td{
  background:rgba(49,6,25,.88) !important;
}
html body.dramabox-panel #codesTable tbody tr:hover td,
html body.dramabox-panel #codesTable.table-dark tbody tr:hover td{
  background:rgba(244,0,101,.18) !important;
  color:#fff !important;
}
/* Panel exterior de clients.php también deja ver el cosmos */
html body.dramabox-panel .card[style*="background:#1a1a1a"],
html body.dramabox-panel .card[style*="background: #1a1a1a"]{
  background:linear-gradient(145deg,rgba(43,6,23,.92),rgba(15,2,10,.90)) !important;
}

/* =========================================================
   DRAMABOX — SIN LOGO COMO FONDO DEL PANEL
   El logo oficial solo se muestra donde corresponde (sidebar/branding),
   nunca como marca de agua sobre el área de trabajo.
   ========================================================= */
html body.dramabox-panel #page-content-wrapper::after,
html body.dramabox-panel #page-content-wrapper::after {
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* =========================================================
   DRAMABOX — CORRECCIÓN FINAL VISUAL 2026-10-06-5
   1) CERO logos en el fondo del panel.
   2) Cabeceras/tablas sin azul Xuper.
   3) Modales AJAX con contraste alto y colores DramaBox.
   ========================================================= */

/* Nunca mostrar el logo como marca de agua en el área de trabajo. */
html body.dramabox-panel::before,
html body.dramabox-panel::after,
html body.dramabox-panel #page-content-wrapper::before,
html body.dramabox-panel #page-content-wrapper::after {
  /* Las capas ::before/::after del body se redefinen abajo como cosmos; las del wrapper sí se eliminan. */
}
html body.dramabox-panel #page-content-wrapper::before,
html body.dramabox-panel #page-content-wrapper::after {
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* Fondo 100% CSS: sin bg.jpg, binding_dark ni ninguna imagen. */
html body.dramabox-panel {
  background-color:#050006 !important;
  background-image:
    radial-gradient(ellipse 70% 45% at 5% 8%,rgba(255,0,102,.30) 0%,rgba(255,0,102,.12) 28%,transparent 68%),
    radial-gradient(ellipse 62% 42% at 96% 10%,rgba(255,135,31,.27) 0%,rgba(255,67,63,.10) 30%,transparent 70%),
    radial-gradient(ellipse 58% 40% at 82% 94%,rgba(255,0,76,.25) 0%,rgba(244,0,101,.09) 30%,transparent 70%),
    radial-gradient(ellipse 50% 38% at 12% 90%,rgba(255,105,31,.20) 0%,rgba(255,0,102,.07) 35%,transparent 72%),
    radial-gradient(ellipse 75% 22% at 50% 52%,rgba(255,0,91,.07),transparent 72%),
    linear-gradient(135deg,#030003 0%,#100009 35%,#1b020d 58%,#050006 100%) !important;
  background-attachment:fixed !important;
  background-size:cover !important;
}

/* Nebulosa/destellos: sutiles, rápidos y sin logo. */
html body.dramabox-panel::before {
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.72 !important;
  background-image:
    radial-gradient(circle at 7% 13%,rgba(255,255,255,.80) 0 1px,transparent 2px),
    radial-gradient(circle at 18% 57%,rgba(255,135,31,.72) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 32% 24%,rgba(255,0,102,.75) 0 1px,transparent 2.5px),
    radial-gradient(circle at 48% 78%,rgba(255,255,255,.62) 0 1px,transparent 2px),
    radial-gradient(circle at 63% 35%,rgba(255,135,31,.76) 0 1.3px,transparent 2.8px),
    radial-gradient(circle at 78% 17%,rgba(255,255,255,.70) 0 1px,transparent 2px),
    radial-gradient(circle at 91% 68%,rgba(255,0,76,.72) 0 1.2px,transparent 2.8px);
  background-size:260px 220px,320px 260px,290px 240px,350px 280px,300px 250px,380px 300px,330px 270px !important;
  background-repeat:repeat !important;
  animation:dramaboxStarsFastFinal .9s ease-in-out infinite alternate !important;
}
html body.dramabox-panel::after {
  content:"" !important;
  position:fixed !important;
  inset:-10% !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse 32% 11% at 17% 29%,rgba(255,0,102,.13),transparent 72%),
    radial-gradient(ellipse 28% 10% at 82% 24%,rgba(255,135,31,.12),transparent 72%),
    radial-gradient(ellipse 38% 12% at 67% 78%,rgba(255,0,76,.11),transparent 72%);
  filter:blur(12px);
  opacity:.62 !important;
  animation:dramaboxNebulaFinal 2.2s ease-in-out infinite alternate !important;
}
@keyframes dramaboxStarsFastFinal {
  from { opacity:.48; filter:brightness(.88); }
  to   { opacity:1; filter:brightness(1.38); }
}
@keyframes dramaboxNebulaFinal {
  from { transform:translate3d(-1%,.4%,0) scale(1); opacity:.45; }
  to   { transform:translate3d(1%,-.4%,0) scale(1.035); opacity:.82; }
}

/* Todo el contenido siempre por encima del cosmos. */
html body.dramabox-panel #wrapper,
html body.dramabox-panel #page-content-wrapper,
html body.dramabox-panel #page-content-wrapper > * {
  position:relative !important;
  z-index:1 !important;
}

/* Cabeceras: eliminar definitivamente el azul heredado de Xuper. */
html body.dramabox-panel .card > .card-header,
html body.dramabox-panel .card-header {
  background:linear-gradient(90deg,#b9004c 0%,#f40065 52%,#ff871f 100%) !important;
  background-color:#c90053 !important;
  color:#fff !important;
  border-color:rgba(255,135,31,.35) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
}
html body.dramabox-panel .card > .card-header h1,
html body.dramabox-panel .card > .card-header h2,
html body.dramabox-panel .card > .card-header h3,
html body.dramabox-panel .card > .card-header h4,
html body.dramabox-panel .card > .card-header h5,
html body.dramabox-panel .card > .card-header h6,
html body.dramabox-panel .card > .card-header small,
html body.dramabox-panel .card > .card-header i {
  color:#fff !important;
}

/* Tabla de clientes: encabezado, filas y textos claramente legibles. */
html body.dramabox-panel #codesTable thead th,
html body.dramabox-panel #codesTable thead td {
  background:linear-gradient(90deg,#c50051 0%,#f40065 52%,#ff871f 100%) !important;
  background-color:#c50051 !important;
  color:#ffffff !important;
  font-weight:800 !important;
  font-size:14px !important;
  border-color:rgba(255,135,31,.40) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.50) !important;
}
html body.dramabox-panel #codesTable tbody td {
  color:#fff7fa !important;
  font-size:14px !important;
  border-color:rgba(244,0,101,.18) !important;
}
html body.dramabox-panel #codesTable tbody tr {
  background:rgba(24,2,13,.94) !important;
}
html body.dramabox-panel #codesTable tbody tr:nth-child(even) td {
  background:rgba(48,4,23,.90) !important;
}
html body.dramabox-panel #codesTable tbody tr:hover td {
  background:rgba(244,0,101,.20) !important;
  color:#ffffff !important;
}
html body.dramabox-panel #codesTable .badge-info,
html body.dramabox-panel #codesTable .badge-primary {
  background:linear-gradient(90deg,#d10055,#ff871f) !important;
  color:#fff !important;
}
html body.dramabox-panel #codesTable .badge-dark {
  background:#30061b !important;
  color:#fff !important;
  border:1px solid rgba(255,0,102,.25) !important;
}

/* Modal/confirmaciones AJAX: jamás azul y con contraste fuerte. */
html body.dramabox-panel #myteamAjaxOverlay {
  background:rgba(5,0,6,.82) !important;
  backdrop-filter:blur(4px) !important;
}
html body.dramabox-panel #myteamAjaxBox {
  width:min(560px,94vw) !important;
  background:linear-gradient(145deg,#21030f 0%,#0e0209 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(244,0,101,.72) !important;
  border-radius:14px !important;
  box-shadow:0 24px 80px rgba(0,0,0,.78),0 0 35px rgba(244,0,101,.18) !important;
}
html body.dramabox-panel #myteamAjaxHead {
  padding:16px 20px !important;
  background:linear-gradient(90deg,#c50051,#f40065 58%,#ff871f) !important;
  color:#fff !important;
  font-size:20px !important;
  font-weight:800 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
}
html body.dramabox-panel #myteamAjaxBody {
  padding:24px 22px !important;
  color:#ffffff !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.65 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.55) !important;
}
html body.dramabox-panel #myteamAjaxFoot {
  padding:14px 18px !important;
  background:rgba(0,0,0,.18) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
}
html body.dramabox-panel #myteamAjaxOk,
html body.dramabox-panel #myteamAjaxCancel {
  min-width:105px !important;
  border-radius:7px !important;
  font-weight:800 !important;
  font-size:14px !important;
  color:#fff !important;
}
html body.dramabox-panel #myteamAjaxOk {
  border:1px solid rgba(255,135,31,.65) !important;
  background:linear-gradient(90deg,#f40065,#ff871f) !important;
}
html body.dramabox-panel #myteamAjaxCancel {
  border:1px solid rgba(255,0,102,.45) !important;
  background:#43091f !important;
}
html body.dramabox-panel #myteamAjaxBox.ajax-success { border-color:rgba(255,135,31,.75) !important; }
html body.dramabox-panel #myteamAjaxBox.ajax-error { border-color:rgba(255,55,105,.85) !important; }

/* Guía AJAX/edición también mantiene contraste DramaBox. */
html body.dramabox-panel #myteamEditGuideBox {
  background:linear-gradient(145deg,#21030f,#0e0209) !important;
  color:#fff !important;
  border:1px solid rgba(244,0,101,.65) !important;
}
html body.dramabox-panel #myteamEditGuideBox .myteam-guide-head {
  background:linear-gradient(90deg,#c50051,#f40065,#ff871f) !important;
  border-bottom-color:rgba(255,255,255,.12) !important;
}
html body.dramabox-panel #myteamEditGuideBox .myteam-guide-title,
html body.dramabox-panel #myteamEditGuideBox .myteam-guide-body,
html body.dramabox-panel #myteamEditGuideBox .guide-title,
html body.dramabox-panel #myteamEditGuideBox .guide-note { color:#fff !important; }

/* =========================================================
   DRAMABOX — COSMOS CON CADENAS MÓVILES 2026-10-06-6
   Sustituye el campo de puntos por cadenas/constelaciones
   vectoriales en movimiento. Sin logo y sin imágenes externas.
   ========================================================= */
html body.dramabox-panel::before{
  content:"" !important;
  position:fixed !important;
  inset:-14% !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.72 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cg fill='none' stroke='%23ff176f' stroke-width='1.8' opacity='.68'%3E%3Crect x='10' y='45' width='42' height='18' rx='9' transform='rotate(-28 31 54)'/%3E%3Crect x='46' y='27' width='42' height='18' rx='9' transform='rotate(-28 67 36)'/%3E%3Crect x='82' y='9' width='42' height='18' rx='9' transform='rotate(-28 103 18)'/%3E%3Crect x='118' y='-9' width='42' height='18' rx='9' transform='rotate(-28 139 0)'/%3E%3Crect x='154' y='-27' width='42' height='18' rx='9' transform='rotate(-28 175 -18)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff871f' stroke-width='1' opacity='.46'%3E%3Crect x='28' y='89' width='42' height='18' rx='9' transform='rotate(-28 49 98)'/%3E%3Crect x='64' y='71' width='42' height='18' rx='9' transform='rotate(-28 85 80)'/%3E%3Crect x='100' y='53' width='42' height='18' rx='9' transform='rotate(-28 121 62)'/%3E%3Crect x='136' y='35' width='42' height='18' rx='9' transform='rotate(-28 157 44)'/%3E%3Crect x='172' y='17' width='42' height='18' rx='9' transform='rotate(-28 193 26)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(116deg,transparent 0 18%,rgba(255,0,102,.08) 18.2% 18.45%,transparent 18.7% 100%),
    linear-gradient(116deg,transparent 0 56%,rgba(255,135,31,.07) 56.2% 56.4%,transparent 56.7% 100%) !important;
  background-size:220px 120px,100% 100%,100% 100% !important;
  background-repeat:repeat,repeat,repeat !important;
  filter:drop-shadow(0 0 7px rgba(244,0,101,.20)) !important;
  animation:dramaboxChainsMove 6s linear infinite !important;
}
html body.dramabox-panel::after{
  content:"" !important;
  position:fixed !important;
  inset:-16% !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.46 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='310' height='170' viewBox='0 0 310 170'%3E%3Cg fill='none' stroke='%23ff5a9d' stroke-width='1.2' opacity='.62'%3E%3Crect x='6' y='73' width='58' height='23' rx='11.5' transform='rotate(22 35 84)'/%3E%3Crect x='55' y='93' width='58' height='23' rx='11.5' transform='rotate(22 84 104)'/%3E%3Crect x='104' y='113' width='58' height='23' rx='11.5' transform='rotate(22 133 124)'/%3E%3Crect x='153' y='133' width='58' height='23' rx='11.5' transform='rotate(22 182 144)'/%3E%3Crect x='202' y='153' width='58' height='23' rx='11.5' transform='rotate(22 231 164)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff871f' stroke-width='1' opacity='.38'%3E%3Crect x='105' y='12' width='58' height='23' rx='11.5' transform='rotate(22 134 23)'/%3E%3Crect x='154' y='32' width='58' height='23' rx='11.5' transform='rotate(22 183 43)'/%3E%3Crect x='203' y='52' width='58' height='23' rx='11.5' transform='rotate(22 232 63)'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 38% 13% at 18% 28%,rgba(255,0,102,.18),transparent 72%),
    radial-gradient(ellipse 34% 12% at 84% 74%,rgba(255,135,31,.14),transparent 72%) !important;
  background-size:310px 170px,100% 100%,100% 100% !important;
  background-repeat:repeat,no-repeat,no-repeat !important;
  filter:blur(.15px) drop-shadow(0 0 9px rgba(255,0,102,.18)) !important;
  animation:dramaboxChainsMoveReverse 9s linear infinite !important;
}
@keyframes dramaboxChainsMove{
  0%{background-position:0 0,0 0,0 0;transform:translate3d(-1.5%,-1%,0) rotate(-.15deg) scale(1.02);}
  50%{background-position:110px 60px,-2% 1%,2% -1%;transform:translate3d(1%,.5%,0) rotate(.15deg) scale(1.04);}
  100%{background-position:220px 120px,-4% 2%,4% -2%;transform:translate3d(3%,2%,0) rotate(-.15deg) scale(1.02);}
}
@keyframes dramaboxChainsMoveReverse{
  0%{background-position:310px 170px,0 0,0 0;transform:translate3d(2%,1%,0) scale(1.02);}
  50%{background-position:155px 85px,2% -1%,-2% 1%;transform:translate3d(-1%,-.5%,0) scale(1.04);}
  100%{background-position:0 0,4% -2%,-4% 2%;transform:translate3d(-3%,-2%,0) scale(1.02);}
}