/* Dark Mode — scoped overrides only.
   When dark is OFF, your original colors remain intact.
   When dark is ON, we apply styles under html[data-theme="dark"] */
html[data-theme="dark"] { color-scheme: dark; }

/* Variables used ONLY in dark scope (optional helpers) */
html[data-theme="dark"] {
  --bg: #0e1116;
  --bg-2: #12161c;
  --surface: #171b22;
  --text: #e6e7ea;
  --muted: #a5adba;
  --border: #262b33;
  --shadow: 0 10px 32px rgba(0,0,0,.45);
  --accent: #ff6a3d;
  --accent-2: #ffe083;
  --link: #6ab0ff;
  --ok: #21f15a;
  --danger: #ff5a4d;
}

/* Global wrappers */
html[data-theme="dark"] body,
/* html[data-theme="dark"] .header, */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .sideBar,
html[data-theme="dark"] .section,
html[data-theme="dark"] section,
html[data-theme="dark"] .container,
html[data-theme="dark"] .bannerHeader,
html[data-theme="dark"] .sleepingBanner,
html[data-theme="dark"] .setCookies,
html[data-theme="dark"] .footBar,
html[data-theme="dark"] .loader,
html[data-theme="dark"] .countDown,
html[data-theme="dark"] .promoMorning,
html[data-theme="dark"] .infoA,
html[data-theme="dark"] .storeStatus,
html[data-theme="dark"] .dashSocial,
html[data-theme="dark"] .navbar a,
html[data-theme="dark"] .dashSetup {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}



html[data-theme="dark"] .navbar a:hover{
  background: var(--border) !important;
}

html[data-theme="dark"] .linksCont a.active,
html[data-theme="dark"] .navbar a.active{
  background: #083535 !important;
  text-decoration: underline;
  text-decoration-color: var(--ok);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  box-shadow: 0 0 15px #0d7070;
  border: 1px solid #035555;
}




/* Links */
html[data-theme="dark"] a { color: var(--link); }
html[data-theme="dark"] a:hover { opacity: .9; background: #555; }

/* Buttons and common CTA wrappers */
html[data-theme="dark"] button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btnActive,
html[data-theme="dark"] .linksCont,
html[data-theme="dark"] .dashLinks,
html[data-theme="dark"] .footer .container,
html[data-theme="dark"] .dashSocial a,
html[data-theme="dark"] .dashLinks a,
html[data-theme="dark"] .infoUs .container,
html[data-theme="dark"] .sideBar .container,
html[data-theme="dark"] .header,
html[data-theme="dark"] .sideBar .container a,
html[data-theme="dark"] .reloadPage {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Cards / panels / skeleton blocks */
html[data-theme="dark"] .cardItem,
html[data-theme="dark"] .nameItem,
html[data-theme="dark"] .descriptionItem,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .s-box,
html[data-theme="dark"] .skeleton .s-box,
html[data-theme="dark"] .clock,
html[data-theme="dark"] .content {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Footbar icons */
html[data-theme="dark"] .footBar .container a,
html[data-theme="dark"] .footBar .container span {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}














/* Badges/labels */
/* html[data-theme="dark"] .greenOnline { background: var(--ok) !important; }
html[data-theme="dark"] .redOffline  { background: var(--danger) !important; } */

/* Optional: invert pictograms that are dark-on-light by design (opt-in) */
/* html[data-theme="dark"] img.auto-invert,
html[data-theme="dark"] .auto-invert { filter: invert(1) hue-rotate(180deg); } */






.themeToggle i { pointer-events: none; }
.themeToggle[aria-pressed="true"] .label-light { display: none; }
.themeToggle[aria-pressed="false"] .label-dark { display: none; }

.label-dark,
.label-light{
  font-weight: 800;
}










/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* Wrapper absoluto controlable por media queries */
.themeToggleWrap {
  position: fixed;
  top: .7rem;
  right: .4rem;
  z-index: 999;
}

@media(max-width:1200px){
  .themeToggleWrap{
    right: 2.8rem;
  }
}

@media(max-width:480px){
  .themeToggleWrap{
    right:.3rem;
  }
}



/*Custom Dark*/

html[data-theme="dark"] .sideBar .container .dashBoard{
  background:transparent !important;
}
html[data-theme="dark"] .sideBar .container .closeBtn{
  background: rgb(57, 57, 112);
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

html[data-theme="dark"] .footBar .call{
    background: var(--surface);
    outline: 3px solid #035468 ;
    box-shadow: 0 0 30px #047794 ;
}

html[data-theme="dark"] .dashSetup{
  background: transparent !important;
}


html[data-theme="dark"] .wrapper{
  background: var(--bg);
  border: 2px solid var(--bg-2);
}

html[data-theme="dark"] .wrapper .cookie-header i,
html[data-theme="dark"] .wrapper .cookie-header h2{
  color: var(--text);
  background: var(--bg-2);
}
html[data-theme="dark"] .wrapper .buttons button:hover{
  background: var(--border) !important;
}


html[data-theme="dark"] .deleteCookie{
  background: var(--surface);
  border: 2px solid var(--border);
}

html[data-theme="dark"] .deleteCookie h1,
html[data-theme="dark"] .deleteCookie p{
  color: var(--text);
}

html[data-theme="dark"] .deleteCookie .btnscookies .cancelar:hover{
  background: var(--border) !important;
}

html[data-theme="dark"] .deleteCookie .btnscookies .borrar{
  background: #6e2206 !important;
}

html[data-theme="dark"] .deleteCookie .btnscookies .borrar:hover{
  background: #ad3407 !important;
}

html[data-theme="dark"] .nextOpen {
  background: rgba(59, 59, 59, 0.4);
  border: 2px solid #555;
  box-shadow: 0 5px 15px #000;
}
html[data-theme="dark"] .nextOpen p{
  color: var(--text);
}
html[data-theme="dark"] .nextOpen .dataContainer{
  background: var(--surface);
}

html[data-theme="dark"] .nextOpen .dataContainer span{
  color: var(--text);
}

html[data-theme="dark"] .rrss{
  background: var(--bg2);
  border: 2px solid var(--border);
}

html[data-theme="dark"] .rrss a{
  background:var(--surface) ;
}


html[data-theme="dark"] .menuBar i{
  color: var(--text);
}


/* Theme toggle button */
.themeToggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 50px;
  border: 1px solid #9e9e9e;
  background: #011636;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.555);
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

.themeToggle:hover{
  background: #0c0058;
}



html[data-theme="dark"] .themeToggle {
  background: #ffffff !important;
  color: #000 !important;
}

html[data-theme="dark"] .themeToggle:hover{
 box-shadow: 0 0 15px #05d1af !important;
 background: #c4f3ff !important;
 border: 1px solid #c9f4ff !important;
}




html[data-theme="dark"] .aviso{
  background: var(--bg);
}
html[data-theme="dark"] .aviso .container{
  background: var(--bg-2) !important;
  box-shadow: var(--shadow) !important;
  border: 2px solid #242424 !important;
}
html[data-theme="dark"] .aviso .container i{
  color: var(--accent);
}
html[data-theme="dark"] .aviso .container h1{
  color: var(--ok);
}
html[data-theme="dark"] .aviso .container p,
html[data-theme="dark"] .aviso .container h2,
html[data-theme="dark"] .aviso .container h3{
  color: var(--text);
}
html[data-theme="dark"] .aviso .container .btn{
  background: var(--accent) !important;
}
html[data-theme="dark"] .aviso .container .btn:hover{
  background: rgb(255, 136, 0) !important;
}

@media(max-width:480px){
  html[data-theme="dark"] .aviso .container .btn{
    width: 100%;
    text-align: center;
  }
}


/*Custom Dark*/