/*--
import url(../../../../../../../template/css/general.css);
--*/


/*--- Toolbar ---*/
.bx-toolbar-anim {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}
.bx-toolbar-reset {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}
.bx-toolbar-up {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%)
}
.bx-toolbar-item.bx-ti-logo a:hover {
    text-decoration: none;
}
.bx-toolbar-item.bx-ti-logo .bx-logo-inline svg {
    max-height: 100%;
    width: auto;
}
.bx-toolbar-item.bx-ti-search .bx-ti-search-button a {
    text-decoration: none;
}
.bx-toolbar-item.bx-ti-search .bx-ti-search-button img {
    width: 1.5rem;
    height: 1.5rem;
}
.bx-toolbar-item.bx-ti-search .bx-tis-button-hidden {
    display: none;
}
.bx-toolbar-item.bx-ti-search .bx-tis-box-shown {
    position: absolute;
    display: block;
}
.bx-toolbar-item.bx-ti-search .bx-form-advanced .bx-loading-ajax {
    top: 0;
    max-height: 100%;
}
.bx-toolbar-item.bx-ti-search .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child {
    margin-top: 0;
}
.bx-toolbar-item.bx-ti-search .sys-search-results-quick {
    position: absolute;
    z-index: 10;
}
.bx-toolbar-item.bx-ti-search .sys-search-results-quick .bx-btn.sys-agents-ask {
    margin-bottom: 0.5rem;
}
.bx-toolbar-item.bx-ti-search .sys-search-results-quick .bx-btn.sys-agents-ask:last-child {
    margin-bottom: 0;
}

/*--- Agents: Assistants ---*/
#bx_agents_assistants_ask .bx-popup.bx-popup-width {
    width: 42rem;
}
.bx-agents-popup .cmts {
    max-height: calc(0.5 * 100vh);
    overflow-y: auto;
}
.bx-agents-popup .cmt-reply {
    margin-bottom: 0;
}
.cmt.cmt-agents .cmt-body .cmt-agents-loading .bx-loading-ajax {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 2.0rem;
    height: 2.0rem;
    left: 0 !important;
    top: 0 !important;
    margin-left: 0.5rem;
}
.cmt-body.cmt-body-agents .bx-form-value .bx-form-input-files-uploaders .bx-btn {
    margin: 0 0.5rem 0 0;
}
.cmt-body.cmt-body-agents .bx-form-value .bx-form-input-textarea {
    height: 2.5rem;
    line-height: 1.25rem;
}



/*--- Page Content with Cover ---*/
#bx-content-with-cover-wrapper {
    opacity: 1;
    transition: opacity 400ms ease-out;
}
#bx-content-with-cover-wrapper.htmx-added {
    opacity: 0;
}


/*--- Page Submenu ---*/
.bx-menu-main-bar-cnt {
    height: 3.25rem;
}

.bx-menu-main-bar:not(.bx-menu-more-auto) .bx-menu-main-bar-cnt > div {
    overflow-x: auto;
}

.bx-menu-main-bar-gap.bx-menu-main-bar-hidden,
.bx-menu-main-bar-wrapper.bx-menu-main-bar-hidden,
.bx-menu-main-bar.bx-menu-main-bar-hidden {
    display: none;
}


/*--- Page Content ---*/
#bx-content-wrapper.htmx-added {
    opacity: 0;
}

#bx-content-wrapper.ltr.htmx-swapping:not(.htmx-added) {
    opacity: 0;
    transition: opacity 400ms ease-out;
    animation: slide-to-right 400ms cubic-bezier(0.37, 0.82, 0.2, 1);
}
#bx-content-wrapper.ltr.htmx-settling {
    opacity: 1;
    animation: slide-from-left 400ms cubic-bezier(0.37, 0.82, 0.2, 1);
}

#bx-content-wrapper.rtl.htmx-swapping:not(.htmx-added) {
    opacity: 0;
    transition: opacity 400ms ease-out;
    animation: slide-to-left 400ms cubic-bezier(0.37, 0.82, 0.2, 1);
}
#bx-content-wrapper.rtl.htmx-settling {
    opacity: 1;
    animation: slide-from-right 400ms cubic-bezier(0.37, 0.82, 0.2, 1);
}

@keyframes slide-from-right {
    from { transform: translateX(100%); }
}
@keyframes slide-to-right {
    to { transform: translateX(100%); }
}
@keyframes slide-from-left {
    from { transform: translateX(-100%); }
}
@keyframes slide-to-left {
    to { transform: translateX(-100%); }
}


/*--- Profile Avatar ---*/
.bx-db-content.bx-content-padding-block .bx-profile-avatar-cnt {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
}
#bx-profile-switcher .bx-pas-list .bx-def-hr:first-child {
    display: none;
}

/*--- Profile Stats ---*/
.bx-menu-vertical-more-less li.bx-psmi-show-more,
.bx-menu-vertical-more-less li.bx-psmi-show-less {
    text-transform: uppercase;
    font-size: 0.875rem;
}

.bx-menu-vertical-more-less li.bx-psmi-show-more:hover,
.bx-menu-vertical-more-less li.bx-psmi-show-less:hover {
    background-color: transparent;
}

/*--- Author Info ---*/
.sys-author-profile .bx-menu-custom.bx-menu-custom-hor > li:first-child .bx-base-general-unit-meta-div {
    display: none;
}

/*--- Join/Login Forms ---*/
.sys-jf .bx-form-advanced .bx-form-element .bx-form-input-submit.bx-btn,
.sys-lf .bx-form-advanced .bx-form-element .bx-form-input-submit.bx-btn {
    width: 100%;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}
#bx-form-element-submit_text .bx-form-value {
    text-align: right;
}

/*--- Page Type: Application ---*/
.bx-menu-panel-item .bx-profile-avatar .bx-profile-avatar-cnt {
    min-height: 2.5rem;
}

/*--- Create Post Form ---*/
.sys-cpf-form:not(.sys-cpf-loading) {
    -webkit-animation: sys-cpf-scale-in 0.4s cubic-bezier(0.37, 0.82, 0.2, 1);
    animation: sys-cpf-scale-in 0.4s cubic-bezier(0.37, 0.82, 0.2, 1);
}

@keyframes sys-cpf-scale-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

@-webkit-keyframes sys-cpf-scale-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

/* --------------- System objects like Views, Votes, Comments, etc, */
.sys-action-counter.sys-ac-hidden {
    display: none;
}
.sys-action-counter.sys-action-counter-iconset .sys-ac-link {
    padding-left: 0.75rem;
}
.bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .sys-ac-link {
    padding-left: 0;
    padding-right: 0.75rem;
}
.bx-media-phone .sys-action-counter.sys-action-counter-iconset .sys-ac-link,
.bx-media-tablet .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .sys-ac-link,
.bx-media-tablet .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .sys-ac-link {
    padding-left: 1.0rem;
}
.bx-media-phone .bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .sys-ac-link,
.bx-media-tablet .bx-dir-rtl .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .sys-ac-link,
.bx-media-tablet .bx-dir-rtl .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .sys-ac-link {
    padding-left: 0;
    padding-right: 1.0rem;
}
.sys-action-counter.sys-action-counter-iconset .bx-def-icon-size {
    width: 1.5rem;
    height: 1.5rem;
}
.sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
.sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon {
    margin-left: -0.5rem;
}
.bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
.bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon {
    margin-left: 0;
    margin-right: -0.5rem;
}
.bx-media-phone .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
.bx-media-phone .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon,
.bx-media-tablet .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
.bx-media-tablet .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon,
.bx-media-tablet .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
.bx-media-tablet .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon {
    margin-left: -0.75rem;
}
.bx-media-phone .bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
.bx-media-phone .bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon,
.bx-media-tablet .bx-dir-rtl .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
.bx-media-tablet .bx-dir-rtl .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon,
.bx-media-tablet .bx-dir-rtl .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
.bx-media-tablet .bx-dir-rtl .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon {
    margin-left: 0;
    margin-right: -0.75rem;
}

/*--- === SOCRACI DARK-MODE FIXES === ---
Los módulos socraci (campaigns, academia, hub, causas) emiten estilos INLINE con
fondos claros y textos gris oscuro que no reaccionan al esquema oscuro del tema
(html.dark). Estas reglas por selector de atributo los adaptan SOLO en dark.
Orden importante: los fondos tintados (ámbar/verde/rojo, p.ej. #fff8e1) contienen
la subcadena "background:#fff", por eso van DESPUÉS de la regla de blancos. ---*/

/* Bloques/tarjetas forzados a blanco */
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background:white"],
html.dark [style*="background: white"] {
    background-color: #1f2937 !important;
}

/* Fondos gris/azul claro (paneles, filas, zebra) */
html.dark [style*="background:#eee"],
html.dark [style*="background: #eee"],
html.dark [style*="background:#f8f9fa"],
html.dark [style*="background: #f8f9fa"],
html.dark [style*="background:#f9f9f9"],
html.dark [style*="background:#fdfbff"],
html.dark [style*="background:#f6f7f9"],
html.dark [style*="background: #f5f7fb"],
html.dark [style*="background:#f7f9fc"],
html.dark [style*="background: #f0f4ff"],
html.dark [style*="background:#eef3f7"],
html.dark [style*="background:#eef1f6"],
html.dark [style*="background:#eef1f5"],
html.dark [style*="background:#eceff3"],
html.dark [style*="background:#eaf1ff"],
html.dark [style*="background: #dde8ff"],
html.dark [style*="background:#f4ecfa"] {
    background-color: #111827 !important;
}

/* Avisos ámbar claros (van tras la regla de blancos: comparten prefijo #fff) */
html.dark [style*="background:#fff8e1"],
html.dark [style*="background:#fffef5"],
html.dark [style*="background:#fff6e0"],
html.dark [style*="background:#fff4e5"] {
    background-color: #33290f !important;
    border-color: #6b5b23 !important;
}

/* Éxito verde claro */
html.dark [style*="background:#e8f5e9"],
html.dark [style*="background: #eaf7ee"],
html.dark [style*="background:#e7f7ec"] {
    background-color: #0d2818 !important;
    border-color: #1e5e34 !important;
}

/* Error/alerta rojo claro */
html.dark [style*="background:#fdecea"],
html.dark [style*="background: #fdecea"],
html.dark [style*="background:#fdeceb"] {
    background-color: #331416 !important;
    border-color: #7a2e33 !important;
}

/* Textos gris oscuro inline: aclararlos sobre fondo oscuro */
html.dark [style*="color:#1a1a1a"],
html.dark [style*="color: #1a1a1a"],
html.dark [style*="color:#222"],
html.dark [style*="color: #222"],
html.dark [style*="color:#2c3e50"],
html.dark [style*="color:#333"],
html.dark [style*="color: #333"],
html.dark [style*="color:#374151"],
html.dark [style*="color:#444"],
html.dark [style*="color: #444"] {
    color: #d1d5db !important;
}
html.dark [style*="color:#555"],
html.dark [style*="color: #555"],
html.dark [style*="color:#666"],
html.dark [style*="color: #666"],
html.dark [style*="color:#777"],
html.dark [style*="color: #777"] {
    color: #9ca3af !important;
}

/* Bordes claros inline dentro de bloques oscurecidos */
html.dark [style*="border:1px solid #eee"],
html.dark [style*="border: 1px solid #eee"],
html.dark [style*="border:1px solid #ddd"],
html.dark [style*="border: 1px solid #ddd"] {
    border-color: #374151 !important;
}

/*--- === SOCRACI DARK-MODE FIXES: reglas de CLASE (módulos) === ---
Lo de arriba cubre estilos INLINE (style=""). Estas reglas cubren las clases
CSS que los módulos definen en sus propios <style> embebidos (uno por módulo).
Cada regla usa "html.dark .clase-del-modulo": dos clases combinadas ganan por
especificidad sobre la regla original de una sola clase, así que NO hace
falta !important. Solo se toca background-color / color / border-color (no
se reescribe la regla completa). Los botones sólidos de marca (morado
#6c3483/#8e44ad, WhatsApp #25D366, Facebook #1877F2, azul #3498db) y los
héroes con gradiente de marca quedan SIN CAMBIOS: ya funcionan en oscuro.
Paleta: fondo tarjeta blanco→#1f2937, panel gris/azul claro→#111827,
placeholder img/avatar #eee→#374151, borde claro→#374151, texto oscuro→#e5e7eb,
texto medio→#9ca3af, morado marca→#c39bdd, badge morado claro→#3b2a4a,
azul-enlace→#6ea8fe, éxito bg→#0d2818/borde #1e5e34/texto #7ee2a8,
error bg→#331416/borde #7a2e33/texto #f1aeb5, aviso bg→#33290f/borde
#6b5b23/texto #e0c479. Border morado claro (#d5c6e6/#c9b6df, sin mapeo
explícito en el pedido) → #5b4066 por consistencia con los demás bordes con
tinte de color. Estados hover de botón gris/blanco claro → #283548 (un
tono más claro que el panel, para distinguir el hover del estado base). --- */

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sr-camp-* (directorio de campañas) ===== */
html.dark .sr-camp-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sr-camp-img {
    background-color: #374151;
}
html.dark .sr-camp-title {
    color: #e5e7eb;
}
html.dark .sr-camp-author {
    color: #9ca3af;
}
html.dark .sr-camp-desc {
    color: #9ca3af;
}
html.dark .sr-camp-btn {
    background-color: #111827;
    color: #e5e7eb;
}
html.dark .sr-camp-btn:hover {
    background-color: #283548;
    color: #e5e7eb;
}
html.dark .sr-search-input {
    border-color: #374151;
}
html.dark .sr-page-link {
    border-color: #374151;
    color: #9ca3af;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sr-msg-* (invitar contactos) ===== */
html.dark .sr-msg-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sr-msg-card-name {
    color: #e5e7eb;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-pn-* (red personal) ===== */
html.dark .sc-pn-stat {
    background-color: #3b2a4a;
    border-color: #5b4066;
}
html.dark .sc-pn-stat b {
    color: #c39bdd;
}
html.dark .sc-pn-sec {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sc-pn-invite-row input.sc-pn-link {
    border-color: #374151;
}
html.dark .sc-pn-camp {
    border-color: #374151;
}
html.dark .sc-pn-tree {
    border-color: #374151;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-ib-* (invitar por candidatura) ===== */
html.dark .sc-ib p {
    color: #9ca3af;
}
html.dark .sc-ib .sc-ib-link {
    border-color: #374151;
}
html.dark .sc-ib-stat {
    color: #e5e7eb;
}
html.dark .sc-ib-stat b {
    color: #c39bdd;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-sp-* (apoyar a la persona) ===== */
html.dark .sc-sp-aspira {
    color: #e5e7eb;
}
html.dark .sc-sp-aspira b {
    color: #c39bdd;
}
html.dark .sc-sp-hint {
    color: #9ca3af;
}
html.dark .sc-sp-warn {
    background-color: #33290f;
    border-color: #6b5b23;
    color: #e0c479;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-h-* (historial) ===== */
html.dark .sc-h-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sc-h-title {
    color: #e5e7eb;
}
html.dark .sc-h-row {
    border-color: #374151;
}
html.dark .sc-h-main {
    color: #e5e7eb;
}
html.dark .sc-h-sub {
    color: #9ca3af;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-cv-* / .src-sup-* (candidatura vista pública / supporters) ===== */
html.dark .sc-cv-sup-pager a {
    border-color: #374151;
    color: #9ca3af;
}
html.dark .src-sup-card {
    background-color: #1f2937;
}
html.dark .src-sup-avatar {
    border-color: #1f2937;
}
html.dark .src-sup-name {
    color: #e5e7eb;
}
html.dark .src-sup-pager a {
    border-color: #374151;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-ez-* (equipo/red) ===== */
html.dark .sc-ez h2 {
    color: #e5e7eb;
}
html.dark .sc-ez-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sc-ez-name,
html.dark .sc-ez-name a {
    color: #e5e7eb;
}
html.dark .sc-ez-empty {
    background-color: #1f2937;
    border-color: #374151;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-cockpit-* (cockpit interno) ===== */
html.dark .sc-cockpit-section {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sc-cockpit-bar-label {
    color: #e5e7eb;
}
html.dark .sc-cockpit-bar-val {
    color: #9ca3af;
}
html.dark .sc-cockpit-bar-track {
    background-color: #374151;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-ic-* (pipeline interno) ===== */
html.dark .sc-ic-title {
    color: #e5e7eb;
}
html.dark .sc-ic-scope-link {
    border-color: #374151;
    color: #9ca3af;
}
html.dark .sc-ic-scope-link:hover {
    background-color: #111827;
}
html.dark .sc-ic-chip {
    background-color: #111827;
    color: #9ca3af;
}
html.dark .sc-ic-chip span {
    background-color: #1f2937;
}
html.dark .sc-ic-table {
    background-color: #1f2937;
}
html.dark .sc-ic-table th {
    background-color: #111827;
    border-color: #374151;
    color: #9ca3af;
}
html.dark .sc-ic-table td {
    border-color: #374151;
}
html.dark .sc-ic-stage-form select {
    border-color: #374151;
}
html.dark .sc-ic-roles-section {
    border-color: #374151;
}
html.dark .sc-ic-roles-title {
    color: #e5e7eb;
}
html.dark .sc-ic-assign-form {
    background-color: #111827;
    border-color: #374151;
}
html.dark .sc-ic-assign-form label {
    color: #9ca3af;
}
html.dark .sc-ic-assign-form input,
html.dark .sc-ic-assign-form select {
    border-color: #374151;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-bg-* (biografía/plan de gobierno) ===== */
html.dark .sc-bg-title,
html.dark .sc-bg-label {
    color: #e5e7eb;
}
html.dark .sc-bg-intro {
    color: #9ca3af;
}
html.dark .sc-bg-input {
    border-color: #374151;
    background-color: #1f2937;
    color: #e5e7eb;
}
html.dark .sc-bg-err {
    background-color: #331416;
    border-color: #7a2e33;
    color: #f1aeb5;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-mv-* (Movimientos: home, wizard, cockpit) =====
   Nota: el bloque de tematización por marca (líneas ~4529-4553, selectores
   "{$sSel} .sc-mv-*") usa variables PHP interpoladas, no hex fijos — no aplica
   aquí (no hay nada que oscurecer, el color lo define la marca del movimiento). */
html.dark .sc-mv-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sc-mv-title {
    color: #e5e7eb;
}
html.dark .sc-mv-sub {
    color: #9ca3af;
}
html.dark .sc-mv-btn-sec {
    border-color: #5b4066;
    color: #c39bdd;
    background-color: #1f2937;
}
html.dark .sc-mv-btn-sec:hover {
    color: #c39bdd;
    background-color: #3b2a4a;
}
html.dark .sc-mv-input,
html.dark .sc-mv-seats,
html.dark .sc-mv-textarea {
    border-color: #374151;
}
html.dark .sc-mv-label {
    color: #e5e7eb;
}
html.dark .sc-mv-progress span {
    background-color: #374151;
}
html.dark .sc-mv-err {
    background-color: #331416;
    border-color: #7a2e33;
    color: #f1aeb5;
}
html.dark .sc-mv-radio {
    border-color: #374151;
}
html.dark .sc-mv-radio b {
    color: #e5e7eb;
}
html.dark .sc-mv-radio small {
    color: #9ca3af;
}
html.dark .sc-mv-cargo {
    border-color: #374151;
}
html.dark .sc-mv-cargo-head {
    color: #e5e7eb;
}
html.dark .sc-mv-badge {
    background-color: #3b2a4a;
    color: #c39bdd;
}
html.dark .sc-mv-row,
html.dark .sc-mv-prop-row {
    border-color: #374151;
}
html.dark .sc-mv-aspirant {
    color: #e5e7eb;
}
html.dark .sc-mv-badge-demo {
    background-color: #33290f;
    color: #e0c479;
    border-color: #6b5b23;
}
html.dark .sc-mv-badge-st {
    background-color: #0d2818;
    color: #7ee2a8;
}
html.dark .sc-mv-head-thumb {
    background-color: #374151;
}
html.dark .sc-mv-slot-head {
    color: #e5e7eb;
}
html.dark .sc-mv-asp-card {
    border-color: #374151;
    background-color: #1f2937;
}
html.dark .sc-mv-asp-pic,
html.dark .sc-mv-prop-pic,
html.dark img.sc-mv-agenda-img,
html.dark img.sc-mv-disc-cover {
    background-color: #374151;
}
html.dark .sc-mv-asp-pic-ph,
html.dark .sc-mv-prop-pic-ph {
    background-color: #3b2a4a;
    color: #c39bdd;
}
html.dark .sc-mv-asp-name,
html.dark .sc-mv-asp-name a {
    color: #e5e7eb;
}
html.dark .sc-mv-asp-camp {
    color: #9ca3af;
}
html.dark .sc-mv-asp-camp a,
html.dark .sc-mv-agenda-more,
html.dark .sc-mv-aspire-link,
html.dark .sc-mv-aspire-link:hover,
html.dark .sc-mv-activity-more > summary,
html.dark .sc-mv-asp-votes-pct,
html.dark .sc-mv-loser-title {
    color: #c39bdd;
}
html.dark .sc-mv-agenda-item {
    border-color: #374151;
    background-color: #1f2937;
}
html.dark .sc-mv-agenda-topic {
    color: #e5e7eb;
}
html.dark a.sc-mv-agenda-clickable:hover {
    border-color: #5b4066;
}
html.dark .sc-mv-prop-name,
html.dark .sc-mv-prop-name a {
    color: #e5e7eb;
}
html.dark .sc-mv-prop-body {
    color: #e5e7eb;
}
html.dark .sc-mv-disc-card {
    border-color: #374151;
    background-color: #1f2937;
}
html.dark .sc-mv-vacant {
    border-color: #5b4066;
    background-color: #1f2937;
}
html.dark .sc-mv-loser {
    border-color: #5b4066;
    background-color: #1f2937;
}
html.dark .sc-mv-notice-ok {
    background-color: #0d2818;
    border-color: #1e5e34;
    color: #7ee2a8;
}
html.dark .sc-mv-withdraw-btn {
    color: #f1aeb5;
}
html.dark .sc-mv-asp-votes-n,
html.dark .sc-mv-asp-count {
    color: #e5e7eb;
}
html.dark .sc-mv-asp-bar {
    background-color: #3b2a4a;
}
html.dark .sc-mv-designated {
    border-color: #1e5e34;
    background-color: #0d2818;
}
html.dark .sc-mv-designated .sc-mv-asp-card {
    border-color: #1e5e34;
}
html.dark .sc-mv-designate {
    border-color: #6b5b23;
    background-color: #33290f;
}
html.dark .sc-mv-designate-title {
    color: #e0c479;
}
html.dark .sc-mv-designate-row {
    border-color: #6b5b23;
}
html.dark .sc-mv-designate-name {
    color: #e5e7eb;
}
html.dark .sc-mv-loser-text {
    color: #9ca3af;
}
html.dark .sc-mv-ranking-pos {
    color: #c39bdd;
    background-color: #3b2a4a;
}
html.dark .sc-mv-idx-title,
html.dark .sc-mv-idx-section-title {
    color: #e5e7eb;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-tp-* (tablero país / territorio) ===== */
html.dark .sc-tp-title,
html.dark .sc-tp-card-num,
html.dark .sc-tp-table a.sc-tp-terr,
html.dark .sc-tp-pct,
html.dark .sc-tp-person-name {
    color: #e5e7eb;
}
html.dark .sc-tp-tabs,
html.dark .sc-tp-bar,
html.dark .sc-tp-mapbox,
html.dark .sc-tp-map,
html.dark .sc-tp-mapbox .leaflet-container,
html.dark .sc-tp-board-badge,
html.dark .sc-tp-person-pic-ph {
    background-color: #111827;
}
html.dark .sc-tp-tab.active {
    background-color: #1f2937;
    color: #e5e7eb;
}
html.dark .sc-tp-tab:not(.active):hover,
html.dark .sc-tp-vline {
    color: #e5e7eb;
}
html.dark .sc-tp-board-badge,
html.dark .sc-tp-crumb a,
html.dark .sc-tp-table tr.sc-tp-row:hover a.sc-tp-terr,
html.dark .sc-tp-person-pic-ph {
    color: #6ea8fe;
}
html.dark .sc-tp-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sc-tp-card-lbl {
    color: #9ca3af;
}
html.dark .sc-tp-chip {
    color: #e5e7eb;
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sc-tp-mapbox {
    border-color: #374151;
}
html.dark .sc-tp-maplegend {
    color: #9ca3af;
}
html.dark .sc-tp-table th {
    border-color: #374151;
}
html.dark .sc-tp-table td,
html.dark .sc-tp-person {
    border-color: #374151;
}
html.dark .sc-tp-table tr.sc-tp-row:hover {
    background-color: #111827;
}
html.dark .sc-tp-rank-col.top h4 {
    color: #7ee2a8;
}
html.dark .sc-tp-rank-col.bottom h4 {
    color: #f1aeb5;
}
html.dark .sc-tp-person-pic {
    background-color: #374151;
}
html.dark .sc-tp-person-block,
html.dark .sc-tp-commit {
    border-color: #374151;
}

/* ===== campaigns/classes/ScCampaignsTemplate.php — .sc-com-* (comunicados) ===== */
html.dark .sc-com-header .sc-com-cargo {
    color: #9ca3af;
}
html.dark .sc-com-notice-ok {
    background-color: #0d2818;
    color: #7ee2a8;
}
html.dark .sc-com-notice-err {
    background-color: #331416;
    color: #f1aeb5;
}
html.dark .sc-com-field input[type=text],
html.dark .sc-com-field textarea {
    border-color: #374151;
}
html.dark .sc-com-scope-fixed,
html.dark .sc-com-idea-btn {
    color: #e5e7eb;
}
html.dark .sc-com-help {
    background-color: #111827;
    border-color: #374151;
}
html.dark .sc-com-help-cadence {
    color: #9ca3af;
}
html.dark .sc-com-idea-btn {
    border-color: #374151;
    background-color: #1f2937;
}
html.dark .sc-com-idea-btn:hover {
    background-color: #111827;
}
html.dark .sc-com-recent {
    border-color: #374151;
}
html.dark .sc-com-recent-row {
    border-color: #374151;
}
html.dark .sc-com-recent-meta,
html.dark .sc-com-recent-empty {
    color: #9ca3af;
}

/* ===== causes/classes/ScCausesTemplate.php — .sr-causes-* (Cambio.org-style + problemas municipio) ===== */
html.dark .sr-causes-btn {
    background-color: #111827;
    color: #e5e7eb;
}
html.dark .sr-causes-btn:hover {
    background-color: #283548;
    color: #e5e7eb;
}
html.dark .sr-causes-search,
html.dark .sr-causes-select,
html.dark .sr-causes-input {
    border-color: #374151;
}
html.dark .sr-causes-banner,
html.dark .sr-causes-hero2 {
    background-color: #111827;
}
html.dark .sr-causes-chip {
    background-color: #111827;
    color: #6ea8fe;
}
html.dark .sr-causes-section-h,
html.dark .sr-causes-card-title,
html.dark .sr-causes-count-num,
html.dark .sr-causes-summary,
html.dark .sr-causes-body,
html.dark .sr-causes-related-t,
html.dark .sr-causes-reg-h,
html.dark .sr-causes-thanks-share,
html.dark .sr-causes-check,
html.dark .sr-causes-feat-title,
html.dark .sr-causes-stat-num,
html.dark .sr-causes-prow-title,
html.dark .sr-causes-sb-h,
html.dark .sr-causes-sb-t,
html.dark .sr-causes-update-t,
html.dark .sr-causes-ficha-row b,
html.dark .sr-causes-label {
    color: #e5e7eb;
}
html.dark .sr-causes-created,
html.dark .sr-causes-supporters,
html.dark .sr-causes-chart-bars {
    border-color: #374151;
}
html.dark .sr-causes-breadcrumb a,
html.dark .sr-causes-opinions-link,
html.dark .sr-causes-card-title:hover,
html.dark .sr-causes-scope,
html.dark .sr-causes-sharer b,
html.dark .sr-causes-hbar b,
html.dark .sr-causes-adm-c-cause a,
html.dark .sr-causes-adm-link,
html.dark .sr-causes-dash-link,
html.dark .sr-causes-dash-bc a,
html.dark .sr-causes-dash-tab b,
html.dark .sr-causes-prow-sig b,
html.dark .sr-causes-sb-sig,
html.dark .sr-causes-feat-title:hover {
    color: #6ea8fe;
}
html.dark .sr-causes-voice {
    background-color: #111827;
    border-color: #374151;
}
html.dark .sr-causes-voice-b {
    color: #e5e7eb;
}
html.dark .sr-causes-voice-a {
    color: #9ca3af;
}
html.dark .sr-causes-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sr-causes-card-author {
    color: #9ca3af;
}
html.dark .sr-causes-card-summary {
    color: #9ca3af;
}
html.dark .sr-causes-card-meta {
    color: #e5e7eb;
}
html.dark .sr-causes-bar {
    background-color: #111827;
}
html.dark .sr-causes-page {
    border-color: #374151;
    color: #e5e7eb;
}
html.dark .sr-causes-byline {
    color: #9ca3af;
}
html.dark .sr-causes-scope {
    background-color: #111827;
}
html.dark .sr-causes-sign-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sr-causes-goal {
    color: #9ca3af;
}
html.dark .sr-causes-signed {
    background-color: #0d2818;
    color: #7ee2a8;
}
html.dark .sr-causes-supporters-h {
    color: #9ca3af;
}
html.dark .sr-causes-supporter {
    color: #e5e7eb;
}
html.dark .sr-causes-sharer {
    color: #e5e7eb;
    border-color: #374151;
}
html.dark .sr-causes-share-label,
html.dark .sr-causes-channel-lbl {
    color: #e5e7eb;
}
html.dark .sr-causes-share-btn {
    background-color: #111827;
    color: #e5e7eb;
}
html.dark .sr-causes-share-btn:hover {
    background-color: #283548;
    color: #e5e7eb;
}
html.dark .sr-causes-qr {
    background-color: #111827;
    border-color: #374151;
}
html.dark .sr-causes-qr-box {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sr-causes-qr-hint {
    color: #9ca3af;
}
html.dark .sr-causes-flash {
    background-color: #0d2818;
    color: #7ee2a8;
}
html.dark .sr-causes-closed {
    background-color: #33290f;
    color: #e0c479;
    border-color: #6b5b23;
}
html.dark .sr-causes-finished {
    background-color: #111827;
    color: #6ea8fe;
    border-color: #374151;
}
html.dark .sr-causes-related-card {
    border-color: #374151;
    background-color: #1f2937;
}
html.dark .sr-causes-related-img {
    background-color: #111827;
}
html.dark .sr-causes-related-m {
    color: #9ca3af;
}
html.dark .sr-causes-channel-bar {
    background-color: #111827;
}
html.dark .sr-causes-adm-sub {
    color: #9ca3af;
}
html.dark .sr-causes-adm-table,
html.dark .sr-causes-adm-row {
    border-color: #374151;
}
html.dark .sr-causes-adm-head {
    background-color: #111827;
    color: #9ca3af;
}
html.dark .sr-causes-adm-c-author {
    color: #e5e7eb;
}
html.dark .sr-causes-adm-btn {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sr-causes-adm-btn:hover {
    background-color: #283548;
}
html.dark .sr-causes-adm-btn-danger {
    color: #f1aeb5;
    border-color: #7a2e33;
}
html.dark .sr-causes-adm-btn-danger:hover {
    background-color: #331416;
}
html.dark .sr-causes-badge,
html.dark .sr-causes-badge.sr-causes-st-archived {
    background-color: #111827;
    color: #9ca3af;
}
html.dark .sr-causes-badge.sr-causes-st-active {
    background-color: #0d2818;
    color: #7ee2a8;
}
html.dark .sr-causes-badge.sr-causes-st-paused {
    background-color: #33290f;
    color: #e0c479;
}
html.dark .sr-causes-badge.sr-causes-st-closed {
    background-color: #111827;
    color: #6ea8fe;
}
html.dark .sr-causes-badge-hidden,
html.dark .sr-causes-badge-reports {
    background-color: #331416;
    color: #f1aeb5;
}
html.dark .sr-causes-have-account {
    color: #9ca3af;
}
html.dark .sr-causes-thanks-h,
html.dark .sr-causes-thanks-sub,
html.dark .sr-causes-st-active {
    color: #7ee2a8;
}
html.dark .sr-causes-feat {
    background-color: #1f2937;
    border-color: #6b5b23;
}
html.dark .sr-causes-feat-label {
    background-color: #33290f;
}
html.dark .sr-causes-feat-summary {
    color: #9ca3af;
}
html.dark .sr-causes-feat-meta {
    color: #e5e7eb;
}
html.dark .sr-causes-stat,
html.dark .sr-causes-mng-sec {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sr-causes-stat-lbl {
    color: #9ca3af;
}
html.dark .sr-causes-chart-h {
    color: #9ca3af;
}
html.dark .sr-causes-hbar-lbl {
    color: #e5e7eb;
}
html.dark .sr-causes-hbar-track {
    background-color: #111827;
}
html.dark .sr-causes-status-now {
    color: #9ca3af;
}
html.dark .sr-causes-update {
    background-color: #111827;
    border-color: #374151;
}
html.dark .sr-causes-update-d {
    color: #9ca3af;
}
html.dark .sr-causes-update-b {
    color: #e5e7eb;
}
html.dark .sr-causes-errors {
    background-color: #331416;
    color: #f1aeb5;
}
html.dark .sr-causes-cat-chip {
    color: #c39bdd;
    background-color: #3b2a4a;
}
html.dark .sr-causes-res-open,
html.dark .sr-causes-stb-open {
    background-color: #331416;
    color: #f1aeb5;
}
html.dark .sr-causes-res-progress,
html.dark .sr-causes-stb-prog {
    background-color: #33290f;
    color: #e0c479;
}
html.dark .sr-causes-res-resolved,
html.dark .sr-causes-stb-res {
    background-color: #0d2818;
    color: #7ee2a8;
}
html.dark .sr-causes-ficha,
html.dark .sr-causes-ficha-row {
    border-color: #374151;
}
html.dark .sr-causes-ficha {
    background-color: #111827;
}
html.dark .sr-causes-ficha-h,
html.dark .sr-causes-ficha-row span {
    color: #9ca3af;
}
html.dark .sr-causes-res-form {
    border-color: #374151;
}
html.dark .sr-causes-dash-bc span {
    color: #9ca3af;
}
html.dark .sr-causes-dash-tab {
    background-color: #111827;
    color: #e5e7eb;
}
html.dark .sr-causes-dash-ord {
    border-color: #374151;
    color: #9ca3af;
}
html.dark .sr-causes-catflt {
    background-color: #111827;
    color: #9ca3af;
}
html.dark .sr-causes-prow {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sr-causes-prow-sig {
    color: #9ca3af;
}
html.dark .sr-causes-sb-row {
    border-color: #374151;
}
html.dark .sr-causes-sb-rank {
    background-color: #111827;
    color: #6ea8fe;
}
html.dark .sr-causes-spaceblock {
    background-color: #1f2937;
    border-color: #374151;
}

/* ===== hub/classes/ScHubTemplate.php — .sc-hub-onb-* (bienvenida / onboarding) ===== */
html.dark .sc-hub-onb-notice {
    background-color: #0d2818;
    border-color: #1e5e34;
    color: #7ee2a8;
}
html.dark .sc-hub-onb-anon-notice {
    background-color: #111827;
    border-color: #374151;
    color: #e5e7eb;
}
html.dark .sc-hub-onb-step {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sc-hub-onb-step-kicker,
html.dark .sc-hub-onb-step-summary-current,
html.dark .sc-hub-onb-explore-link {
    color: #6ea8fe;
}
html.dark .sc-hub-onb-step-q,
html.dark .sc-hub-onb-goal-title,
html.dark .sc-hub-onb-action-title {
    color: #e5e7eb;
}
html.dark .sc-hub-onb-step-hint,
html.dark .sc-hub-onb-step-summary-done,
html.dark .sc-hub-onb-skip-btn,
html.dark .sc-hub-onb-goal-desc,
html.dark .sc-hub-onb-action-desc {
    color: #9ca3af;
}
html.dark .sc-hub-onb-step-summary-done .sc-hub-onb-step-check {
    color: #7ee2a8;
}
html.dark .sc-hub-onb-goal-card {
    border-color: #374151;
}
html.dark .sc-hub-onb-goal-card:has(input:checked) {
    border-color: #6ea8fe;
    background-color: #111827;
}
html.dark .sc-hub-onb-action-card {
    border-color: #374151;
}

/* ===== hub/classes/ScHubTemplate.php — .sc-hub-vp-* / .sc-hub-empieza-* (propuesta de valor / nudge home) =====
   Estas 2 tarjetas usan "background: linear-gradient(...)" con tonos claros;
   sobreescribir solo background-color dejaría el degradado claro pintado
   ENCIMA (background-image gana visualmente sobre background-color), así que
   aquí se reemplaza el shorthand completo para quitar el degradado. */
html.dark .sc-hub-vp-card {
    background: #111827;
    border-color: #374151;
}
html.dark .sc-hub-vp-title,
html.dark .sc-hub-vp-lead,
html.dark .sc-hub-vp-item {
    color: #e5e7eb;
}
html.dark .sc-hub-vp-item::before {
    color: #6ea8fe;
}
html.dark .sc-hub-empieza-card {
    background: #111827;
    border-color: #374151;
}
html.dark .sc-hub-empieza-title {
    color: #e5e7eb;
}
html.dark .sc-hub-empieza-text {
    color: #9ca3af;
}

/* ===== hub/classes/ScHubTemplate.php — .sc-hub-* (hub principal + tester signup) ===== */
html.dark .sc-hub-sec-title {
    color: #e5e7eb;
    border-color: #374151;
}
html.dark .sc-hub-sec-desc {
    color: #9ca3af;
}
html.dark .sc-hub-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sc-hub-card-title {
    color: #e5e7eb;
}
html.dark .sc-hub-card-desc {
    color: #9ca3af;
}
html.dark a.sc-hub-btn-secondary,
html.dark a.sc-hub-btn-secondary:link,
html.dark a.sc-hub-btn-secondary:visited,
html.dark a.sc-hub-btn-secondary:hover,
html.dark a.sc-hub-btn-secondary:focus,
html.dark a.sc-hub-btn-secondary:active {
    background-color: #111827;
    color: #6ea8fe !important;
    border-color: #374151;
}
html.dark a.sc-hub-btn-secondary:hover,
html.dark a.sc-hub-btn-secondary:focus {
    background-color: #1f2937;
}
html.dark .sc-hub-anon,
html.dark .sc-hub-login-cta {
    color: #9ca3af;
}
html.dark .sc-hub-tester-form {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .sc-hub-tester-label {
    color: #e5e7eb;
}
html.dark .sc-hub-tester-input {
    border-color: #374151;
}
html.dark .sc-hub-hint {
    color: #9ca3af;
}
html.dark .sc-hub-tester-consent {
    background-color: #111827;
    border-color: #374151;
}
html.dark .sc-hub-tester-check {
    color: #e5e7eb;
}
html.dark .sc-hub-tester-errors {
    background-color: #331416;
    border-color: #7a2e33;
    color: #f1aeb5;
}
html.dark .sc-hub-tester-thanks {
    background-color: #0d2818;
    border-color: #1e5e34;
    color: #7ee2a8;
}

/* ===== hub/classes/ScHubModule.php — .sc-hub-bc-* (breadcrumb inyectado en todas las páginas) ===== */
/* Altura canónica del header fijo: el toolbar (_page_toolbar.html) usa contenido h-16 y el nav de
   pt_application py-3 + h-10 = 4rem; ninguno declara height (el general.css raíz con height:3rem
   NUNCA carga: este archivo lo reemplaza por first-match). Si el logo cambia de alto, ajustar SOLO
   esta variable. Plan B si se vuelve variable: medirla en JS y setearla aquí. */
:root {
    --sc-header-h: 4rem;
}
#bx-toolbar {
    height: var(--sc-header-h);
}
.bx-pt-application > nav.fixed {
    height: var(--sc-header-h);
    box-sizing: border-box;
}

/* Layout DEFAULT: la inyección injection_between_cover_logo cae dentro de
   #bx-content-with-cover-wrapper (via _sub_header.html) y el breadcrumb es lo primero bajo el
   header fijo → despejarlo con la altura del header. */
#bx-content-with-cover-wrapper .sc-hub-bc {
    margin-top: var(--sc-header-h);
}

/* Layout default CON breadcrumb: la portada que sigue trae su propio pt-16 para despejar el MISMO
   header → anularlo para no duplicar el hueco. :has() porque UNA envuelve la inyección en divs y el
   nav no es hermano directo; scope al wrapper (solo existe en el layout default), no a body. */
#bx-content-with-cover-wrapper:has(.sc-hub-bc) .bx-menu-toolbar-padding.pt-16 {
    padding-top: 0 !important;
}

/* pt_application (messenger y páginas-app): UI de pantalla completa con nav propio; el breadcrumb
   aterriza dentro de <main> ya despejado por .bx-main-content.pt-16 → solo roba alto y duplica
   navegación: se oculta. Y el pt-16 propio del cover ahí es un doble despeje: fuera siempre. */
.bx-pt-application .sc-hub-bc {
    display: none;
}
.bx-pt-application .bx-menu-toolbar-padding.pt-16 {
    padding-top: 0 !important;
}

/* ===== Cover VACÍO (páginas sin portada): el inner py-16 (8rem) infla el alto del banner del
   título. Se reduce cuando el cover está vacío (bx-cover-empty). ===== */
.bx-cover-empty .py-16 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* ===== Letter-avatar por defecto (usuario sin foto): el <p>.bx-base-pofile-unit-thumb se ajustaba
   al contenido (1 letra) y salía ÓVALO vertical pese al rounded-full. Forzar alto=ancho → CÍRCULO
   perfecto. (Las 2 iniciales las pone theme/js/avatar-initials.js.) ===== */
p.bx-base-pofile-unit-thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    line-height: 1;
}
html.dark .sc-hub-bc {
    background-color: #111827;
    border-color: #374151;
}
html.dark .sc-hub-bc-link {
    color: #6ea8fe;
}
html.dark .sc-hub-bc-current {
    color: #9ca3af;
}

/* ===== volunteer/classes/ScVolunteerTemplate.php — .sr-vol-* (directorio de voluntarios) ===== */
html.dark .sr-vol-card {
    background-color: #1f2937;
}
html.dark .sr-vol-avatar {
    background-color: #111827;
}
html.dark .sr-vol-avatar-fallback,
html.dark .sr-vol-v {
    color: #e5e7eb;
}
html.dark .sr-vol-pill {
    /* gradiente claro (#f7fbff→#eef7ff): shorthand completo, ver nota sc-hub-vp-card */
    background: #111827;
}
html.dark .sr-vol-pager a {
    border-color: #374151;
}

/* ===== Compartido: formularios SC-A11Y (sc_hub / sc_causes / sc_volunteer usan la misma clase) ===== */
html.dark .sc-a11y-required {
    color: #f1aeb5;
}
html.dark .sc-a11y-required-txt {
    color: #9ca3af;
}
html.dark .sc-a11y-errors {
    background-color: #331416;
    border-color: #7a2e33;
}

/*--- === SOCRACI DARK-MODE FIXES: controles de formulario crudos === ---
Varios formularios socraci (config de campaña, crear causa, voluntariado…) usan
<input>/<textarea>/<select> CRUDOS sin fondo definido y etiquetas .bx-form-input-label.
En modo oscuro el navegador los pinta con su default CLARO (cajas blancas, texto
gris ilegible). color-scheme:dark hace que TODO control nativo (incl. date picker,
dropdowns, scrollbars) use el esquema oscuro del navegador — arregla también los
formularios socraci que aún no tengan CSS propio, sin whack-a-mole por formulario. ---*/
html.dark {
    color-scheme: dark;
}

/* Refuerzo explícito: los controles crudos dentro de contenedores socraci
   (por si el control trae un fondo claro heredado que color-scheme no vence). */
html.dark .sr-campaign-manage-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.dark .sr-campaign-manage-form textarea,
html.dark .sr-campaign-manage-form select,
html.dark .sc-nav-dir input:not([type="submit"]):not([type="button"]),
html.dark .sc-nav-dir textarea,
html.dark .sc-nav-dir select {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

/* Etiquetas de formulario socraci (clase UNA usada con markup crudo) */
html.dark .sr-campaign-manage-form .bx-form-input-label,
html.dark .sr-campaign-manage-form label {
    color: #e5e7eb !important;
}

/* Contenedores de formulario con fondo casi-blanco inline no cubierto antes */
html.dark [style*="background:#fcfcfc"],
html.dark [style*="background: #fcfcfc"],
html.dark [style*="background:#fdfdfd"],
html.dark [style*="background: #fdfdfd"] {
    background-color: #1f2937 !important;
}

/*--- === SOCRACI DARK-MODE FIXES: sc_location (editar/ver ubicación) === ---
Bloques del perfil (editar ubicación en Editar Perfil + vista de solo lectura +
modal). Clases .sr-loc-* con fondo blanco fijo y texto gris oscuro. ---*/
html.dark .sr-loc-edit,
html.dark .sr-loc-view,
html.dark .sr-loc-modal {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}
html.dark .sr-loc-btn {
    background-color: #111827 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
html.dark .sr-loc-edit-title,
html.dark .sr-loc-view-title,
html.dark .sr-loc-view-value {
    color: #e5e7eb !important;
}
html.dark .sr-loc-edit-body,
html.dark .sr-loc-edit-label,
html.dark .sr-loc-edit-status,
html.dark .sr-loc-view-label,
html.dark .sr-loc-hint-locality,
html.dark .sr-loc-view-hint {
    color: #9ca3af !important;
}
html.dark .sr-loc-edit-select {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}
html.dark .sr-loc-hint-locality a,
html.dark .sr-loc-view a {
    color: #6ea8fe !important;
}

/*--- === SOCRACI DARK-MODE FIXES: editor Quill (descripciones) === ---
El editor de texto enriquecido Quill (perfil, causas, etc.) trae fondo blanco fijo
del tema 'snow'. En modo oscuro se veía como una caja blanca. Se adapta editor,
contenedor, barra de herramientas, placeholder e íconos SVG. ---*/
html.dark .ql-editor {
    background-color: #111827 !important;
    color: #e5e7eb !important;
}
html.dark .ql-container.ql-snow,
html.dark .ql-toolbar.ql-snow {
    border-color: #374151 !important;
}
html.dark .ql-toolbar.ql-snow {
    background-color: #1f2937 !important;
}
html.dark .ql-editor.ql-blank::before {
    color: #9ca3af !important;
}
html.dark .ql-snow .ql-stroke {
    stroke: #cbd5e1 !important;
}
html.dark .ql-snow .ql-fill,
html.dark .ql-snow .ql-stroke.ql-fill {
    fill: #cbd5e1 !important;
}
html.dark .ql-snow .ql-picker {
    color: #e5e7eb !important;
}
html.dark .ql-snow .ql-picker-options {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/*--- Cards de Espacios: título a máximo 2 líneas (nombres largos como
"Archipiélago de San Andrés, Providencia y Santa Catalina" hacían wrap de 3+
líneas en móvil y desalineaban el grid; ni Lucid ni el base truncan). ---*/
.bx-spaces-unit-with-cover .bx-base-pofile-unit-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===========================================================================
   DESIGN SYSTEM — Perfil (handoff design_handoff_socraci_mobile).
   Tokens en template/css/tokens.css (preloader order=100). Estas reglas son
   por-vista y usan los aliases; el cover aplica a TODOS los perfiles basados
   en mod_groups/cover.html (persons, spaces, groups, orgs).
   =========================================================================== */

/* Cover placeholder = bloque ink sólido con monograma al 8% (marca de agua) y
   SIN imagen genérica. Gana a .bx-bpci-brand (cover.css) por especificidad. */
.bx-base-pofile-cover-image.bx-bpci-brand {
    background-image: none;
    background-color: var(--surface-inverse);
}
.dark .bx-base-pofile-cover-image.bx-bpci-brand {
    background-image: none;
    background-color: var(--ink-950);
}
.bx-base-pofile-cover-image.bx-bpci-holder::after {
    content: '';
    position: absolute;
    right: -18px;
    top: -20px;
    width: 180px;
    height: 180px;
    background: url(../images/socraci-monogram.png) no-repeat center / contain;
    opacity: 0.08;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

/* Línea roja de marca de 3px al borde inferior del cover (placeholder Y foto). */
.bx-base-pofile-cover-image-wrp::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--brand);
    z-index: 5;
    pointer-events: none;
}

/* Identidad: nombre en display (Sora), meta en jerarquía terciaria. */
.bx-base-pofile-cover-user h1 {
    font-family: var(--font-display);
    letter-spacing: var(--ls-tight);
}
.bx-base-profile-cover-meta {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* Acciones del perfil: pill + touch target del sistema. */
.bx-base-pofile-cover-actions .bx-btn {
    border-radius: var(--radius-md);
    min-height: 2.75rem;
}

/* ===========================================================================
   DESIGN SYSTEM — Intent grid ("¿Qué quieres hacer?", perfil) y chips (feed).
   HTML: ScHubModule::serviceIntentGrid()/serviceIntentChips().
   =========================================================================== */
.sc-ds-intent-eyebrow {
    margin-bottom: 0.5rem;
}
.sc-ds-intent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
/* Variante de UNA tarjeta (perfil ajeno con candidatura: "Comparar esta candidatura"). */
.sc-ds-intent-grid-single {
    grid-template-columns: 1fr;
}
.sc-ds-intent-grid-single .sc-ds-intent-card {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    min-height: 2.75rem;
}
.sc-ds-intent-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.sc-ds-intent-card:hover {
    text-decoration: none;
    box-shadow: var(--shadow-md);
}
.sc-ds-intent-card:active {
    transform: translateY(1px);
}
.sc-ds-intent-ico {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-sunken);
}
.sc-ds-intent-ico svg {
    width: 21px;
    height: 21px;
}
.sc-ds-intent-label {
    font: var(--fw-semibold) var(--fs-xs) / 1 var(--font-sans);
    color: var(--text-primary);
}
.sc-ds-tone-brand { color: var(--brand); }
.sc-ds-tone-info { color: var(--info); }
.sc-ds-tone-success { color: var(--success); }
.sc-ds-tone-warning { color: var(--warning); }
.sc-ds-tone-neutral { color: var(--text-secondary); }

.sc-ds-intent-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: none;
}
.sc-ds-intent-rail::-webkit-scrollbar { display: none; }
.sc-ds-intent-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 9px 14px 9px 10px;
    min-height: 2.75rem; /* touch 44px */
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-sans);
    color: var(--text-primary);
    text-decoration: none;
}
.sc-ds-intent-chip:hover {
    text-decoration: none;
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}
.sc-ds-intent-chip-ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-sunken);
}
.sc-ds-intent-chip-ico svg {
    width: 16px;
    height: 16px;
}

/* ===========================================================================
   DESIGN SYSTEM — Feed (PostCard bx_timeline): tarjeta con radio/borde/sombra
   del sistema, autor en jerarquía del DS, acciones con tap target.
   =========================================================================== */
.bx-tl-item-cnt.bx-def-box {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    background-color: var(--surface-card);
    transition: box-shadow var(--dur-base) var(--ease-standard);
}
.bx-tl-item-cnt.bx-def-box:hover {
    box-shadow: var(--shadow-md);
}
.bx-tl-owner-name,
.bx-tl-owner-name a {
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}
.bx-tl-item-meta,
.bx-tl-meta {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.bx-tl-in-text {
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--text-primary);
}

/* ===========================================================================
   DESIGN SYSTEM — Comparar candidatos (/comparar, sc_hub compare_candidates).
   Neutralidad por diseño: dos columnas de peso IDÉNTICO, acentos solo neutros
   y semánticos de estado (nunca rojo de marca en un solo lado).
   =========================================================================== */
.sc-ds-cmp-heads {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: var(--sc-header-h, 4rem);
    z-index: var(--z-sticky);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 14px 16px 12px;
    margin-bottom: 10px;
}
.sc-ds-cmp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    text-decoration: none;
}
.sc-ds-cmp-head:hover { text-decoration: none; }
.sc-ds-cmp-ava {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px var(--border-strong); /* anillo NEUTRO idéntico en ambos lados */
}
.sc-ds-cmp-ava-letter {
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font: var(--fw-bold) var(--fs-h4) / 1 var(--font-display);
}
.sc-ds-cmp-name {
    font: var(--fw-bold) var(--fs-sm) / 1.2 var(--font-sans);
    color: var(--text-primary);
}
.sc-ds-cmp-role {
    font: var(--fw-regular) var(--fs-2xs) / 1.3 var(--font-sans);
    color: var(--text-tertiary);
}
.sc-ds-cmp-vs {
    text-align: center;
    font: var(--fw-bold) var(--fs-sm) / 1 var(--font-display);
    color: var(--text-tertiary);
}
.sc-ds-cmp-race {
    text-align: center;
    font: var(--fw-semibold) var(--fs-xs) / 1 var(--font-sans);
    color: var(--text-secondary);
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    width: fit-content;
    margin: 0 auto 14px;
}
.sc-ds-cmp-eyebrow { margin-bottom: 8px; }
.sc-ds-cmp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border-top: 1px solid var(--divider);
    padding: 12px 0;
}
.sc-ds-cmp-cell {
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font: var(--fw-regular) var(--fs-sm) / 1.45 var(--font-sans);
    color: var(--text-secondary);
}
.sc-ds-cmp-cell-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-disabled);
}
.sc-ds-cmp-status {
    display: block;
    width: fit-content;
    font: var(--fw-bold) var(--fs-2xs) / 1 var(--font-sans);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    padding: 4px 8px;
    margin-bottom: 6px;
}
.sc-ds-cmp-status-success { color: var(--success); background: var(--success-bg); }
.sc-ds-cmp-status-warning { color: var(--warning); background: var(--warning-bg); }
.sc-ds-cmp-status-danger { color: var(--danger); background: var(--danger-bg); }
.sc-ds-cmp-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding: 14px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.sc-ds-cmp-picker label {
    flex: 1;
    min-width: 10rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font: var(--fw-semibold) var(--fs-xs) / 1 var(--font-sans);
    color: var(--text-tertiary);
}
.sc-ds-cmp-picker select {
    width: 100%;
    min-height: 2.75rem;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-sm) var(--font-sans);
}
.sc-ds-cmp-picker .bx-btn { min-height: 2.75rem; }
.sc-ds-cmp-note {
    text-align: center;
    font: var(--fw-regular) var(--fs-xs) / 1.5 var(--font-sans);
    color: var(--text-tertiary);
    margin: 14px 0 0;
}

/* ===========================================================================
   DESIGN SYSTEM — Academia: la lección lee a 720px (ancho de lectura correcto)
   pero su TARJETA era full-width → un mar de aire a los lados en escritorio.
   La tarjeta se encoge al contenido y se centra; en teléfono no cambia nada.
   =========================================================================== */
.bx-db-container:has(.sc-academia-lesson) {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ===========================================================================
   DESIGN SYSTEM — Onboarding / Login (handoff design_handoff_socraci_onboarding).
   Estructura en block_login.html / block_join.html (overrides del tema); esto
   estiliza también las piezas internas de UNA (form, botones sociales de
   sandklock) con los tokens. El rojo SOLO en la acción primaria y acentos.
   =========================================================================== */
.sc-ds-auth {
    max-width: 430px;
    margin: 0 auto;
}
.sc-ds-auth-hero {
    padding: 10px 26px 30px;
}
.sc-ds-auth-logo {
    display: block;
    height: 28px;
    width: 160px;
    margin: 18px 0 16px;
    background: url(../images/socraci-wordmark.png) no-repeat left center / contain;
}
.sc-ds-auth-eyebrow {
    margin-bottom: 10px;
}
.sc-ds-auth-title {
    font: var(--fw-extra) 26px / 1.12 var(--font-display);
    letter-spacing: var(--ls-tighter);
    color: var(--text-primary);
    margin: 0;
}
.sc-ds-auth-accent {
    color: var(--brand);
}
.sc-ds-auth-sub {
    font: var(--fw-regular) var(--fs-body) / 1.5 var(--font-sans);
    color: var(--text-secondary);
    max-width: 34ch;
    margin: 10px 0 0;
}
.sc-ds-auth-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 18px;
    margin: -22px 16px 0;
    position: relative;
}

/* Pestañas segmentadas Iniciar sesión / Crear cuenta */
.sc-ds-auth-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    margin-bottom: 14px;
}
.sc-ds-auth-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: var(--radius-sm);
    font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-sans);
    color: var(--text-tertiary);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-standard);
}
.sc-ds-auth-tab:hover {
    color: var(--text-primary);
    text-decoration: none;
}
.sc-ds-auth-tab-active {
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* Botones sociales: SOLO Google y Facebook, lado a lado, NEUTROS (sin rellenos de marca) */
.sc-ds-auth .sys-auth-block {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.sc-ds-auth .sys-auth {
    flex: 1;
    display: none;
}
.sc-ds-auth .sys-auth[class*='google'],
.sc-ds-auth .sys-auth[class*='facebook'] {
    display: block;
}
.sc-ds-auth .sys-auth a,
.sc-ds-auth .sys-auth .bx-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 44px !important;
    background: var(--surface-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-xs) !important;
    font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-sans) !important;
    text-decoration: none !important;
    text-transform: none !important;
    padding: 0 10px !important;
}
.sc-ds-auth .sys-auth a:hover {
    background: var(--color-bg) !important;
}
/* Icono: se reemplaza el glifo por la marca oficial (G multicolor / f azul) */
.sc-ds-auth .sys-auth .sys-auth-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.sc-ds-auth .sys-auth .sys-auth-icon * {
    display: none !important;
}
.sc-ds-auth .sys-auth[class*='google'] .sys-auth-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.2-.1-2.3-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 18.9 12 24 12c3.1 0 5.9 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C36.9 39.2 44 34 44 24c0-1.2-.1-2.3-.4-3.5z'/%3E%3C/svg%3E");
}
.sc-ds-auth .sys-auth[class*='facebook'] .sys-auth-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877F2'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z'/%3E%3C/svg%3E");
}

/* Divisor "o con tu correo" */
.sc-ds-auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    font: var(--fw-regular) var(--fs-xs) / 1 var(--font-sans);
    color: var(--text-tertiary);
}
.sc-ds-auth-divider::before,
.sc-ds-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Formulario UNA dentro de la tarjeta: campos 44px radio 12, focus rojo */
.sc-ds-auth .bx-form-caption {
    font: var(--fw-semibold) var(--fs-sm) / 1.2 var(--font-sans);
    color: var(--text-primary);
}
.sc-ds-auth .bx-form-input-text,
.sc-ds-auth .bx-form-input-password,
.sc-ds-auth .bx-form-input-email {
    height: 44px;
    padding: 0 14px;
    background: var(--surface-card);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    font: var(--fw-regular) var(--fs-body) var(--font-sans);
    color: var(--text-primary);
    box-sizing: border-box;
    width: 100%;
}
.sc-ds-auth .bx-form-input-text:focus,
.sc-ds-auth .bx-form-input-password:focus,
.sc-ds-auth .bx-form-input-email:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.35);
}
.sc-ds-auth input[type='checkbox'] {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    accent-color: var(--brand);
}
.sc-ds-auth .bx-form-input-submit,
.sc-ds-auth .bx-btn.bx-btn-primary {
    width: 100%;
    min-height: 50px;
    border-radius: var(--radius-md);
    font: var(--fw-semibold) var(--fs-lg) var(--font-sans);
    box-shadow: var(--shadow-brand);
    justify-content: center;
    text-align: center;
}
.sc-ds-auth .bx-form-input-submit:active {
    transform: translateY(1px);
}

/* Nota de neutralidad + acuerdo legal, ambos discretos */
.sc-ds-auth-note {
    font: var(--fw-regular) var(--fs-2xs) / 1.45 var(--font-sans);
    color: var(--text-tertiary);
    text-align: center;
    margin: 14px 0 0;
}
.sc-ds-auth-agreement {
    font: var(--fw-regular) var(--fs-2xs) / 1.45 var(--font-sans);
    color: var(--text-tertiary);
    text-align: center;
    margin-top: 6px;
}

/* El wordmark es tinta sobre claro: en oscuro se invierte para mantener contraste. */
html.dark .sc-ds-auth-logo {
    filter: brightness(0) invert(1);
}

/* ===========================================================================
   DESIGN SYSTEM — Breadcrumb (handoff space-header): ícono home rojo, niveles
   con hover pill, separadores suaves y nivel actual en negrita. La estructura
   la pinta sc_hub/sc_location; aquí solo la piel.
   =========================================================================== */
.sc-hub-bc {
    background: var(--color-bg);
    border-bottom: 0;
    font-size: 15px;
}
.sc-hub-bc-home {
    display: inline-flex;
    color: var(--brand);
    vertical-align: -3px;
}
.sc-hub-bc-home svg {
    width: 18px;
    height: 18px;
}
.sc-hub-bc-link {
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    margin: -4px -2px;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.sc-hub-bc-link:hover {
    color: var(--brand);
    background: var(--brand-soft);
    text-decoration: none;
}
.sc-hub-bc-sep {
    color: var(--ink-300);
}
.sc-hub-bc-geo .sc-hub-bc-item:last-child .sc-hub-bc-link,
.sc-hub-bc-current {
    color: var(--text-primary);
    font-weight: var(--fw-bold);
}

/* ===========================================================================
   DESIGN SYSTEM — Cabecera de Espacio (handoff space-header, escritorio+móvil).
   Scope: SOLO páginas de Espacio (body.bx-page-view-space-profile) — las
   personas conservan su cover ink del handoff de perfil.
   =========================================================================== */
/* Cover claro compacto: blanco, S roja tenue, franja roja (la pinta el ::after
   global del wrp) — reemplaza al placeholder ink en Espacios. */
.bx-page-view-space-profile .bx-base-pofile-cover-image.bx-bpci-holder {
    background-image: none;
    background-color: var(--surface-card);
    height: 108px;
}
.bx-page-view-space-profile .bx-base-pofile-cover-image.bx-bpci-holder::after {
    content: 'S';
    background: none;
    filter: none;
    width: auto;
    height: auto;
    right: 24px;
    top: -90px;
    font: var(--fw-extra) 320px / 1 var(--font-display);
    color: rgba(238, 0, 0, 0.06);
    opacity: 1;
}
html.dark .bx-page-view-space-profile .bx-base-pofile-cover-image.bx-bpci-holder {
    background-color: var(--surface-card);
}
html.dark .bx-page-view-space-profile .bx-base-pofile-cover-image.bx-bpci-holder::after {
    color: rgba(238, 0, 0, 0.14);
}

/* Eyebrow "Espacio" abajo-izquierda del banner (oculto fuera de Espacios; con foto
   de portada subida se conserva como overlay). El punto rojo lo pone el ::before. */
.sc-ds-space-eyebrow {
    display: none;
}
.bx-page-view-space-profile .sc-ds-space-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: absolute;
    left: 32px;
    bottom: 18px;
    z-index: 3;
}
.bx-page-view-space-profile .sc-ds-space-eyebrow::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
}

/* Fila de identidad: sin avatar gigante, título Sora 800 alineado con las acciones. */
.bx-page-view-space-profile .bx-base-pofile-cover-thumb,
.bx-page-view-space-profile .bx-base-pofile-cover-thumb-placeholder {
    display: none;
}
.bx-page-view-space-profile .bx-base-pofile-ci-cnt {
    margin-top: 0 !important;
}
.bx-page-view-space-profile .bx-base-pofile-cover-user {
    margin-top: 0;
    padding: 18px 0;
    align-items: flex-start;
}
/* El bloque del título trae lg:mt-14 (56px) para dejarle sitio al avatar solapado;
   sin avatar dejaba el título UNA línea por debajo de las acciones → mismo nivel. */
.bx-page-view-space-profile .bx-base-profile-cover-title-bages {
    margin-top: 0 !important;
}
/* Botón subir portada arriba-DERECHA (la base lo pone left:1rem; chocaba con el eyebrow). */
.bx-page-view-space-profile .bx-image-edit-buttons {
    left: auto;
    right: 24px;
    top: 22px;
}
.bx-page-view-space-profile .bx-base-pofile-cover-user h1 {
    font-weight: var(--fw-extra);
    font-size: 32px;
    line-height: 1.1;
    text-align: left;
}
.bx-page-view-space-profile .bx-base-profile-cover-meta {
    font: var(--fw-medium) var(--fs-body) var(--font-sans);
    color: var(--text-secondary);
    justify-content: flex-start;
}
.bx-page-view-space-profile .bx-base-pofile-cover-actions {
    margin-top: 0;
    height: auto;
}

/* Acciones: "Unirse a Espacio" = primario rojo; el resto secundarios neutros.
   Tanto el LI (.bx-stl-mib: border gray + rounded, tailwind.css) como el SPAN
   contenedor (.bx-base-general-entity-action) traen su propio cromo de botón DETRÁS
   del <a> → anillo/doble borde y "línea partiendo" botones: se neutralizan ambos y
   el botón es SOLO el <a>. */
.bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item,
.bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item:hover,
.bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item > span {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* "Ver" (detalle de quién vio el Espacio) fuera de la cabecera: redundante con el
   "N vistas" de la meta (decisión dueño 2026-07-10). Quitar esta regla lo devuelve. */
.bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item-view {
    display: none !important;
}
.bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item > span > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    color: var(--text-primary);
    font: var(--fw-semibold) 15px / 1 var(--font-sans);
    text-decoration: none;
}
.bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item > span > a:hover {
    background: var(--color-bg);
}
.bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item-profile-fan-add > span > a {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-brand);
}
.bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item-profile-fan-add > span > a:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}

/* Barra de secciones (tabs): activa en rojo con subrayado 3px; sitewide DS. */
.bx-menu-main-bar .bx-menu-item a {
    color: var(--text-secondary);
}
.bx-menu-main-bar .bx-menu-tab-active a {
    color: var(--brand) !important;
}
/* !important: la clase Tailwind del subrayado activo viene con ! (p.ej. !bg-blue-600). */
.bx-menu-main-bar .bx-menu-tab-active .bx-mi-underline {
    background-color: var(--brand) !important;
    height: 3px;
}