/* Panel en blanco: fondo blanco, texto negro o rojo; lo que era blanco sobre rojo pasa a rojo sobre blanco.
   Solo en modo claro; el modo oscuro queda como estaba. */
html:not([data-theme=dark]),html:not([data-theme=dark]):has(#construction:not([hidden])){background:#fff!important;background-image:none!important}
html:not([data-theme=dark]) .workspace{background:#fff!important;box-shadow:none!important}

/* Encabezado */
html:not([data-theme=dark]) .topbar{background:transparent!important;color:var(--ink)!important}
html:not([data-theme=dark]) .brand img{content:url(/assets/fervor-rojo.svg)}
html:not([data-theme=dark]) #nav{background:rgba(242,242,245,.86)!important;border-color:transparent!important;box-shadow:none!important}
html:not([data-theme=dark]) #nav a{color:var(--ink)!important;background:transparent!important}
html:not([data-theme=dark]) #nav a:is([aria-current],.active){background:#ff0043!important;color:#fff!important;box-shadow:0 6px 16px -8px rgba(255,0,67,.7)!important}
html:not([data-theme=dark]) :is(.header-tool,.user-button){background:#f2f2f5!important;color:var(--ink)!important;border-color:transparent!important}
html:not([data-theme=dark]) .header-tool{color:#ff0043!important}
html:not([data-theme=dark]) .user-button .avatar{background:#ff0043!important;color:#fff!important;border-color:#ff0043!important}
html:not([data-theme=dark]) .inbox-bell .inbox-count{background:#ff0043!important;color:#fff!important}
html:not([data-theme=dark]) .topbar :focus-visible{outline-color:#ff0043}

/* Pantalla de carga: blanca, con un rojo difuminado abajo y las barritas en rojo */
#boot-loader{background:radial-gradient(120% 70% at 50% 115%,rgba(255,0,67,.22) 0%,rgba(255,0,67,.08) 45%,rgba(255,0,67,0) 75%),#fff!important;color:#ff0043!important}
#boot-loader .eq i{background:#ff0043!important}
html[data-theme=dark] #boot-loader{background:radial-gradient(120% 70% at 50% 115%,rgba(255,0,67,.3) 0%,rgba(255,0,67,.1) 45%,rgba(255,0,67,0) 75%),#1b1c24!important}

/* Pantalla de error: igual, logo rojo sobre blanco */
html:not([data-theme=dark]) #construction{background:radial-gradient(120% 70% at 50% 115%,rgba(255,0,67,.22) 0%,rgba(255,0,67,.08) 45%,rgba(255,0,67,0) 75%),#fff!important;color:var(--ink)!important}
html:not([data-theme=dark]) #construction img{content:url(/assets/fervor-rojo.svg)}

/* Modo oscuro, igual de limpio que el claro: fondo grafito parejo (sin el marco rojo), logo rojo, lo elegido en rojo */
html[data-theme=dark],html[data-theme=dark]:has(#construction:not([hidden])){background:#15161c!important;background-image:none!important}
html[data-theme=dark] body{background:#15161c}
html[data-theme=dark] .workspace{background:#15161c!important;box-shadow:none!important}
html[data-theme=dark] .topbar{background:transparent!important;color:#f3f3f7!important}
html[data-theme=dark] .brand img{content:url(/assets/fervor-rojo.svg)}
html[data-theme=dark] #nav{background:rgba(255,255,255,.07)!important;border-color:transparent!important;box-shadow:none!important}
html[data-theme=dark] #nav a{color:#e6e6ec!important;background:transparent!important}
html[data-theme=dark] #nav a:is([aria-current],.active){background:#ff0043!important;color:#fff!important;box-shadow:0 6px 16px -8px rgba(255,0,67,.6)!important}
html[data-theme=dark] :is(.header-tool,.user-button){background:rgba(255,255,255,.08)!important;color:#f3f3f7!important;border-color:transparent!important}
html[data-theme=dark] .header-tool{color:#ff4d7a!important}
html[data-theme=dark] .user-button .avatar{background:#ff0043!important;color:#fff!important;border-color:#ff0043!important}
html[data-theme=dark] .inbox-bell .inbox-count{background:#ff0043!important;color:#fff!important}
html[data-theme=dark] #construction{background:radial-gradient(120% 70% at 50% 115%,rgba(255,0,67,.3) 0%,rgba(255,0,67,.1) 45%,rgba(255,0,67,0) 75%),#15161c!important;color:#f3f3f7!important}
html[data-theme=dark] #construction img{content:url(/assets/fervor-rojo.svg)}
/* Ancho completo: el panel usa todo el ancho de la pantalla, con un margen parejo a los costados */
.workspace,.workspace main,#main{max-width:none!important;width:auto!important;margin-left:0!important;margin-right:0!important}
.workspace main,#main{padding-left:clamp(16px,3vw,56px)!important;padding-right:clamp(16px,3vw,56px)!important}
.topbar{max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:clamp(16px,3vw,56px)!important;padding-right:clamp(16px,3vw,56px)!important}
/* Carga: el degradado cubre toda la pantalla (sin la franja del costado) y se funde más suave */
#boot-loader{left:0!important;right:auto!important;width:100vw!important;height:100lvh!important;background:radial-gradient(160% 95% at 50% 120%,rgba(255,0,67,.2) 0%,rgba(255,0,67,.09) 40%,rgba(255,0,67,.03) 65%,rgba(255,0,67,0) 85%),#fff!important}
html[data-theme=dark] #boot-loader{background:radial-gradient(160% 95% at 50% 120%,rgba(255,0,67,.28) 0%,rgba(255,0,67,.12) 40%,rgba(255,0,67,.04) 65%,rgba(255,0,67,0) 85%),#1b1c24!important}
/* Inicio: la lista de Redes se ve entera, sin scroll interno */
#content .db .social-home .hm-list{max-height:none!important;overflow:visible!important}
html:has(body.is-loading),html:has(#boot-loader:not([hidden])){overflow:hidden!important;scrollbar-gutter:auto!important}
/* iPhone: la carga también pinta la franja de abajo (zona de la barrita de inicio) */
#boot-loader{top:0!important;bottom:calc(-1 * env(safe-area-inset-bottom))!important;height:auto!important;min-height:calc(100lvh + env(safe-area-inset-bottom))!important}
html:has(body.is-loading),html:has(#boot-loader:not([hidden])){background:#fde0e8!important;background-image:none!important}
html[data-theme=dark]:has(body.is-loading),html[data-theme=dark]:has(#boot-loader:not([hidden])){background:#3a1a26!important}