/*
 * REELSHORT — tema visual global
 * Capa de presentación solamente: no altera consultas SQL, sesiones,
 * permisos, reglas de licencias ni lógica de negocio.
 */
:root{
  --rs-bg:#09090b;
  --rs-panel:#141417;
  --rs-panel-2:#1c1c21;
  --rs-border:rgba(255,255,255,.10);
  --rs-red:#e50914;
  --rs-red-light:#ff3545;
  --rs-text:#f7f7f8;
  --rs-muted:#b4b4bd;
  --rs-radius:12px;
}
html{background:var(--rs-bg)!important;scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse at 85% 0%,rgba(229,9,20,.12),transparent 34%),
    linear-gradient(145deg,#09090b 0%,#101014 55%,#09090b 100%)!important;
  color:var(--rs-text)!important;
}
body::selection{background:rgba(229,9,20,.45);color:#fff}
a{color:#ff5965}
a:hover{color:#ff9299}
#sidebar-wrapper,.sidebar,.sidebar-wrapper,aside{
  background:linear-gradient(180deg,#0b0b0e 0%,#151519 60%,#0b0b0e 100%)!important;
  color:#f7f7f8!important;
  border-color:rgba(229,9,20,.25)!important;
}
#sidebar-wrapper a,.sidebar a,aside a,.list-group-item{
  color:#e9e9ed!important;
  border-color:rgba(255,255,255,.07)!important;
}
#sidebar-wrapper a:hover,.sidebar a:hover,aside a:hover,
.list-group-item:hover,.list-group-item.menu-activo,
.list-group-item.active,.nav-link.active{
  background:linear-gradient(100deg,rgba(229,9,20,.28),rgba(229,9,20,.08))!important;
  border-left-color:var(--rs-red)!important;
  color:#fff!important;
}
#page-content-wrapper,.content-wrapper,.container-fluid,.main-content{
  color:var(--rs-text);
}
.navbar,.topbar,.page-header,.card-header,.modal-header{
  background:linear-gradient(105deg,#1b1b20,#111114)!important;
  color:#fff!important;
  border-color:var(--rs-border)!important;
}
.card,.modal-content,.dropdown-menu,.dashboard-card,.panel,.well,
.table-responsive,.list-group-item{
  background-color:rgba(22,22,26,.96)!important;
  color:var(--rs-text)!important;
  border-color:var(--rs-border)!important;
}
.card-body,.card-footer,.modal-body,.modal-footer{color:var(--rs-text)!important}
.table{color:#f1f1f4!important}
.table thead th,.table thead td,.table th{
  background:linear-gradient(100deg,#27272d,#19191e)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.10)!important;
}
.table td,.table tbody th{border-color:rgba(255,255,255,.08)!important}
.table-striped tbody tr:nth-of-type(odd){background:rgba(255,255,255,.025)!important}
.table-hover tbody tr:hover{background:rgba(229,9,20,.08)!important;color:#fff!important}
.btn-primary,.btn-info,.btn-success,.btn-dark,
button.primary,.button-primary{
  background:linear-gradient(135deg,#e50914,#b80710)!important;
  border-color:#e50914!important;color:#fff!important;
}
.btn-primary:hover,.btn-info:hover,.btn-success:hover,.btn-dark:hover{
  background:linear-gradient(135deg,#ff3545,#d10a15)!important;
  border-color:#ff3545!important;
}
.btn-outline-primary,.btn-outline-info{
  color:#ff5965!important;border-color:#e50914!important;background:transparent!important;
}
.btn-outline-primary:hover,.btn-outline-info:hover{
  background:#e50914!important;color:#fff!important;
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]),
select,textarea,.form-control,.custom-select{
  background:#101014!important;color:#f7f7f8!important;
  border:1px solid rgba(255,255,255,.17)!important;border-radius:8px!important;
}
input::placeholder,textarea::placeholder{color:#92929c!important;opacity:1}
.form-control:focus,select:focus,textarea:focus,input:focus{
  border-color:#e50914!important;box-shadow:0 0 0 .2rem rgba(229,9,20,.18)!important;
}
.badge-primary,.badge-info,.bg-primary,.bg-info{
  background-color:#e50914!important;color:#fff!important;
}
.text-primary,.text-info{color:#ff5965!important}
hr{border-color:rgba(255,255,255,.10)!important}
.alert-primary,.alert-info{
  color:#fff!important;background:rgba(229,9,20,.12)!important;
  border-color:rgba(229,9,20,.35)!important;
}
.pagination .page-link{background:#18181d!important;color:#f4f4f5!important;border-color:#303036!important}
.pagination .active .page-link{background:#e50914!important;border-color:#e50914!important}
.login-box,.login-card,.auth-card,.login-container{
  background:rgba(18,18,22,.96)!important;border:1px solid rgba(229,9,20,.22)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.4)!important;border-radius:16px!important;
}
.brand-link,.sidebar-logo{color:#fff!important}
img[alt*="DramaBox"],img[alt*="Xuper"],img[alt*="XUPER"]{object-fit:contain}
@media(max-width:768px){
  body{background:#09090b!important}
  #page-content-wrapper{min-width:0!important;width:100%!important}
  .container,.container-fluid{padding-left:12px!important;padding-right:12px!important}
  .card{border-radius:10px!important}
  .table-responsive{max-width:100%;overflow-x:auto}
  .btn{max-width:100%;white-space:normal}
}


/* REELSHORT FINAL FIX 2026-10-28: no DramaBox logo overlays on dashboard cards.
   Keep the actual ReelShort logo in the sidebar/header; remove decorative duplicate marks. */
html body.dramabox-panel .dashboard-card > .card-header::after,
html body.dramabox-panel .dashboard-card .card-header::after,
html body.dramabox-panel #page-content-wrapper::after,
html body.dramabox-panel #page-content-wrapper::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}
html body.dramabox-panel .dashboard-card > .card-header img:not(.brand-logo),
html body.dramabox-panel .dashboard-card > .card-header .header-logo {
  display: none !important;
}


/* REELSHORT HOTFIX 2026-10-28: eliminar logotipos decorativos en dashboard.php.
   Conserva el logo principal del menú lateral; no tapa WhatsApp ni botones. */
html body.dramabox-panel #page-content-wrapper::after,
html body.dramabox-panel #page-content-wrapper::before,
html body.dramabox-panel .dashboard-card::before,
html body.dramabox-panel .dashboard-card::after,
html body.dramabox-panel .dashboard-card > .card-header::before,
html body.dramabox-panel .dashboard-card > .card-header::after,
html body.dramabox-panel .dashboard-card .card-header::before,
html body.dramabox-panel .dashboard-card .card-header::after,
html body.dramabox-panel .installation-dashboard-card .card-header::before,
html body.dramabox-panel .installation-dashboard-card .card-header::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html body.dramabox-panel .dashboard-card > .card-header img:not(.brand-logo),
html body.dramabox-panel .dashboard-card > .card-header .header-logo,
html body.dramabox-panel .installation-dashboard-card .card-header img {
  display: none !important;
}


/* FIX DEFINITIVO REELSHORT DASHBOARD 2026-10-28
   Elimina únicamente los logos decorativos inyectados por CSS en las tarjetas.
   Conserva el logo oficial del menú lateral. */
html body.dramabox-panel .dashboard-card > .card-header::before,
html body.dramabox-panel .dashboard-card > .card-header::after,
html body.dramabox-panel .dashboard-card .card-header::before,
html body.dramabox-panel .dashboard-card .card-header::after,
html body.dramabox-panel .installation-dashboard-card > .card-header::before,
html body.dramabox-panel .installation-dashboard-card > .card-header::after,
html body.dramabox-panel .installation-dashboard-card .card-header::before,
html body.dramabox-panel .installation-dashboard-card .card-header::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
} 
html body.dramabox-panel .dashboard-card > .card-header img,
html body.dramabox-panel .dashboard-card .card-header img,
html body.dramabox-panel .installation-dashboard-card .card-header img,
html body.dramabox-panel .dashboard-card > .card-header .header-logo,
html body.dramabox-panel .installation-dashboard-card .card-header .header-logo {
  display: none !important;
  content: none !important;
  background: none !important;
  visibility: hidden !important;
}
/* Evita que pseudo-elementos generales dibujen marcas sobre el botón WhatsApp. */
html body.dramabox-panel .installation-dashboard-card .card-header > * {
  position: relative !important;
  z-index: 2 !important;
}