/* Nucleo del portal: header, hero, tabs, feed, retos, votacion, perfil, modales */
    /* HEADER */
    .site-header {
      background: rgba(255, 255, 255, .88);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      backdrop-filter: blur(16px) saturate(160%);
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid rgba(124, 58, 237, .12);
      /* iPhone con notch: el contenido se extiende bajo el status bar (viewport-fit=cover),
         este padding evita que el header quede cortado al hacer scroll */
      padding-top: env(safe-area-inset-top, 0px);
      /* Forzar capa propia: evita que el <video> de iOS pinte por encima del header */
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      will-change: transform;
      isolation: isolate
    }

    .hc {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0
    }

    .logo-a {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden
    }

    .logo-a img {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 8px;
      flex-shrink: 0
    }

    .brand {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1.2rem;
      color: var(--p);
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0
    }

    .ham {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      z-index: 1002;
      flex-shrink: 0
    }

    .hl {
      width: 25px;
      height: 2.5px;
      background: var(--w);
      border-radius: 2px;
      transition: all .3s
    }

    .ham.open .hl:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px)
    }

    .ham.open .hl:nth-child(2) {
      opacity: 0
    }

    .ham.open .hl:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px)
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 2px
    }

    .ni {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--pk-tx);
      padding: 8px 13px;
      border-radius: var(--r-s);
      font-weight: 600;
      font-size: 14px;
      transition: background .2s, color .2s;
      white-space: nowrap;
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif
    }

    .ni:hover {
      background: rgba(124, 58, 237, .08);
      color: var(--pd)
    }

    .ni:active {
      transform: translateY(1px)
    }

    .ni.on {
      background: rgba(124, 58, 237, .1);
      color: var(--pd)
    }

    .njoin {
      background: var(--pk) !important;
      color: white !important;
      font-weight: 700;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-left: 6px;
      padding: 9px 18px !important
    }

    .njoin:hover {
      background: var(--pkd) !important
    }

    .nav-sep {
      width: 1px;
      height: 18px;
      background: rgba(124, 58, 237, .18);
      margin: 0 4px
    }

    .nperfil {
      background: var(--p) !important;
      color: white !important;
      border: none !important;
      font-weight: 700
    }

    .nperfil:hover {
      background: var(--pd) !important;
      color: white !important
    }

    /* NAV MOBILE */
    nav.mainnav {
      display: flex;
      align-items: center;
      gap: 1px
    }

    @media(min-width:769px) {
      nav.mainnav {
        display: none
      }
    }

    /* ADMIN BAR — retirada: las herramientas viven en el menú + del header */
    .admin-bar,
    .admin-bar.on {
      display: none !important
    }

    /* Menú de herramientas admin (hoja) */
    .adm-item {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      background: white;
      border: 1.5px solid rgba(124, 58, 237, .16);
      border-radius: var(--r-m);
      padding: 12px 14px;
      cursor: pointer;
      text-align: left;
      font-family: 'DM Sans', sans-serif;
      transition: border-color .15s, background .15s, transform .1s ease-out
    }

    .adm-item:hover {
      border-color: var(--p);
      background: rgba(124, 58, 237, .04)
    }

    .adm-item:active {
      transform: scale(.98)
    }

    .adm-item i {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: rgba(124, 58, 237, .09);
      color: var(--pd);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .95rem;
      flex-shrink: 0
    }

    .adm-item b {
      display: block;
      font-size: .9rem;
      color: var(--tx)
    }

    .adm-item small {
      display: block;
      font-size: .76rem;
      color: var(--tx2);
      margin-top: 1px
    }

    .adm-item-danger i {
      background: rgba(220, 38, 38, .08);
      color: var(--danger)
    }

    .adm-item-danger:hover {
      border-color: var(--danger);
      background: rgba(220, 38, 38, .03)
    }

    .admin-bar .inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap
    }

    .admin-bar span {
      font-size: .76rem;
      font-weight: 700;
      color: var(--pd);
      text-transform: uppercase;
      letter-spacing: .1em;
      font-family: 'Barlow Condensed', sans-serif;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .abt {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: var(--p);
      color: white;
      border: none;
      border-radius: 50px;
      font-size: .76rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      text-transform: uppercase;
      transition: background .15s, transform .12s
    }

    .abt:hover {
      background: var(--pd)
    }

    .abt:active {
      transform: scale(.97)
    }

    .abt.sec {
      background: white;
      color: var(--pd);
      border: 1.5px solid rgba(124, 58, 237, .3)
    }

    .abt.sec:hover {
      background: var(--ow)
    }

    /* HERO — claro, monocromo morado (unete) */
    .hero {
      background: white;
      padding: 40px 0 30px;
      position: relative;
      overflow: hidden
    }

    .hero::after {
      content: 'MSXMX';
      position: absolute;
      top: -14px;
      right: -8px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(90px, 18vw, 170px);
      font-weight: 900;
      color: rgba(124, 58, 237, .05);
      line-height: 1;
      letter-spacing: -2px;
      pointer-events: none;
      user-select: none
    }

    .wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 1
    }

    .eyebrow {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--pk-tx);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px
    }

    .hero h1 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(2.3rem, 7vw, 4rem);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -1px;
      color: var(--p);
      line-height: .92;
      margin-bottom: 14px
    }

    .hero h1 span {
      color: var(--pd)
    }

    /* Hero compacto (Inicio): un saludo de una línea, como IG/FB */
    .hero-mini {
      padding: 16px 0 6px
    }

    .hero-mini::after {
      content: none
    }

    .hero-mini-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap
    }

    .hero-mini .hero-hola {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(1.15rem, 4.5vw, 1.45rem);
      font-weight: 700;
      letter-spacing: -.01em;
      text-transform: none;
      color: var(--tx2);
      line-height: 1.2;
      margin: 0
    }

    .hero-mini .hero-hola span {
      color: var(--pd)
    }

    .hero-mini .member-meta {
      margin-top: 0
    }

    .member-meta {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 6px
    }

    .member-meta>span {
      font-size: .8rem;
      font-weight: 500;
      color: var(--tx2);
      display: flex;
      align-items: center;
      gap: 6px
    }

    .member-meta i {
      color: var(--p)
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(124, 58, 237, .07);
      border: 1px solid rgba(124, 58, 237, .25);
      border-radius: 50px;
      padding: 4px 12px;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .02em;
      color: var(--pk-tx);
      text-transform: uppercase;
      font-family: 'DM Sans', sans-serif
    }

    .chip-gold {
      background: rgba(245, 158, 11, .1);
      border-color: rgba(245, 158, 11, .4);
      color: #92400e;
      transition: background .15s
    }

    button.chip-gold:hover {
      background: rgba(245, 158, 11, .2)
    }

    /* TABS */
    .tabs {
      background: var(--w);
      border-bottom: 2px solid var(--lp);
      position: sticky;
      top: calc(64px + env(safe-area-inset-top, 0px));
      z-index: 50
    }

    .tabs-in {
      display: flex;
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px;
      overflow-x: auto;
      touch-action: pan-x;
      scrollbar-width: none
    }

    .tabs-in::-webkit-scrollbar {
      display: none
    }

    .tab {
      padding: 14px 18px;
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--tx2);
      cursor: pointer;
      border: none;
      border-bottom: 2.5px solid transparent;
      margin-bottom: -2px;
      transition: color .2s, border-color .2s;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      background: none;
      font-family: 'DM Sans', sans-serif
    }

    .tab.on {
      color: var(--pd);
      border-bottom-color: var(--p)
    }

    .tab:hover {
      color: var(--tx)
    }

    .badge {
      background: var(--p);
      color: white;
      border-radius: 50px;
      padding: 1px 6px;
      font-size: .62rem;
      font-variant-numeric: tabular-nums
    }

    /* Bottom nav: oculto por defecto (escritorio); se muestra solo en móvil */
    .bottom-nav {
      display: none
    }

    /* CONTENT */
    .content {
      max-width: 1160px;
      margin: 0 auto;
      padding: 28px 24px 56px;
      min-height: calc(100vh - 280px)
    }

    .pane {
      display: none
    }

    .pane.on {
      display: block;
      animation: paneFadeIn 0.4s ease-out forwards;
    }

    @keyframes paneFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes storyFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .sec-label {
      font-size: .8rem;
      font-weight: 600;
      color: var(--pk-tx);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px
    }

    .sec-label::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--pk)
    }

    .sec-h {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(1.7rem, 3vw, 2.3rem);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -.5px;
      color: var(--p);
      margin-bottom: 20px;
      line-height: .95
    }

    .sec-h span {
      color: var(--pd)
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 18px
    }

    .nc {
      background: white;
      border: 1px solid rgba(124, 58, 237, .13);
      border-radius: var(--r-l);
      overflow: hidden;
      box-shadow: var(--sh-1);
      display: flex;
      flex-direction: column;
      transition: transform .25s, box-shadow .25s
    }

    .nc:hover {
      transform: translateY(-3px);
      box-shadow: var(--sh-2)
    }

    .nc-img {
      width: 100%;
      background: var(--dk);
      position: relative;
      overflow: hidden;
      flex-shrink: 0
    }

    .nc-img img {
      width: 100%;
      height: auto;
      display: block;
    }

    .nc-img-ph {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.4rem;
      color: rgba(255, 255, 255, .22)
    }

    .nc-excl {
      position: absolute;
      top: 11px;
      right: 11px;
      padding: 3px 9px;
      border-radius: 20px;
      background: rgba(18, 8, 46, .75);
      color: rgba(255, 255, 255, .8);
      font-size: .62rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px;
      text-transform: uppercase
    }

    .nc-cat {
      position: absolute;
      top: 11px;
      left: 11px;
      padding: 3px 9px;
      border-radius: 20px;
      background: var(--pk);
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .63rem;
      font-weight: 700;
      text-transform: uppercase
    }

    .nc-body {
      padding: 15px 17px 17px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .nc-date {
      font-size: .75rem;
      color: var(--tx2);
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .nc-date i {
      color: var(--pk-tx)
    }

    .nc-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.1rem;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--dk);
      margin-bottom: 7px;
      line-height: 1.15
    }

    .nc-text {
      font-size: .87rem;
      line-height: 1.7;
      color: var(--tx2);
      flex: 1;
      margin-bottom: 12px
    }

    .nc-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto
    }

    .nc-tag {
      font-size: .72rem;
      font-weight: 700;
      color: var(--pd);
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .nc-link {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: .78rem;
      font-weight: 700;
      color: var(--pd);
      transition: gap .18s
    }

    .nc-link:hover {
      gap: 8px
    }

    .nc-adm {
      display: none;
      padding: 8px 15px;
      background: var(--lp);
      border-top: 1px solid rgba(117, 83, 232, .1);
      gap: 6px
    }

    .admin-mode .nc-adm {
      display: flex
    }

    .com-list {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .com {
      background: white;
      border: 1px solid rgba(124, 58, 237, .13);
      border-radius: var(--r-m);
      padding: 16px 18px;
      box-shadow: var(--sh-1);
      cursor: pointer;
      transition: box-shadow .2s
    }

    .com:hover {
      box-shadow: var(--sh-2)
    }

    .com-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap
    }

    .com-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--dk)
    }

    .com-meta {
      display: flex;
      align-items: center;
      gap: 7px
    }

    .com-date {
      font-size: .75rem;
      color: var(--tx2)
    }

    .com-tipo {
      font-size: .66rem;
      font-weight: 800;
      padding: 3px 9px;
      border-radius: 50px;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .com-tipo.urgente {
      background: rgba(220, 38, 38, .09);
      color: #b91c1c
    }

    .com-tipo.info {
      background: rgba(37, 99, 235, .09);
      color: #1d4ed8
    }

    .com-tipo.general {
      background: var(--lp);
      color: var(--pd)
    }

    /* Acordeón: con interpolate-size anima a la altura real; sin soporte, abre al instante */
    .com-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .32s ease /* impeccable-disable-line layout-transition -- acordeón con hijos mixtos, interpolate-size lo suaviza */
    }

    .com-body.on {
      max-height: max-content
    }

    .com-text {
      font-size: .85rem;
      color: var(--tx);
      line-height: 1.68;
      padding-top: 8px
    }

    .empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 46px 32px;
      background: linear-gradient(180deg, rgba(117, 83, 232, .05), rgba(117, 83, 232, .02));
      border-radius: var(--r-l);
      border: 1.5px dashed rgba(117, 83, 232, .22);
      text-align: center
    }

    .empty i {
      font-size: 1.7rem;
      color: var(--pd);
      width: 66px;
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(117, 83, 232, .1);
      border-radius: 50%;
      margin-bottom: 14px
    }

    .empty h3,
    .empty h4 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.3rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--dk);
      margin: 0 0 6px
    }

    .empty p {
      font-size: .87rem;
      color: var(--tx2);
      max-width: 320px;
      line-height: 1.6;
      margin: 0
    }

    .empty-cta {
      margin-top: 16px;
      background: var(--p);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 11px 24px;
      font-size: .84rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: transform .15s, box-shadow .15s, background .15s
    }

    .empty-cta:hover {
      transform: translateY(-1px);
      background: var(--pd);
      box-shadow: 0 6px 16px rgba(61, 43, 158, .3)
    }

    .empty-cta:active {
      transform: translateY(0) scale(.98)
    }

    /* Orden del feed: Recientes / Destacados */
    .foro-orden {
      display: flex;
      gap: 8px;
      margin-bottom: 14px
    }

    .fo-btn {
      flex: 0 0 auto;
      background: var(--w);
      border: 1.5px solid rgba(117, 83, 232, .18);
      border-radius: 50px;
      color: var(--tx2);
      font-family: 'DM Sans', sans-serif;
      font-size: .8rem;
      font-weight: 700;
      padding: 8px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background .2s, border-color .2s, color .2s, transform .12s
    }

    .fo-btn:hover {
      border-color: rgba(117, 83, 232, .4);
      color: var(--pd)
    }

    .fo-btn:active {
      transform: scale(.97)
    }

    .fo-btn.on {
      background: rgba(117, 83, 232, .12);
      border-color: var(--p);
      color: var(--pd)
    }

    /* Campana de notificaciones */
    .notif-bell {
      position: relative;
      background: rgba(124, 58, 237, .08);
      border: none;
      color: var(--p);
      width: 38px;
      height: 38px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1rem;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, transform .12s
    }

    .notif-bell:hover {
      background: rgba(124, 58, 237, .15)
    }

    .notif-bell:active {
      transform: scale(.94)
    }

    .notif-badge {
      position: absolute;
      top: -3px;
      right: -3px;
      background: var(--p);
      color: white;
      border-radius: 50px;
      font-size: .6rem;
      font-weight: 700;
      min-width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px
    }

    .notif-panel {
      position: fixed;
      top: calc(70px + env(safe-area-inset-top, 0px));
      right: 10px;
      width: min(370px, calc(100vw - 20px));
      max-height: 65vh;
      overflow-y: auto;
      background: var(--w);
      border: 1px solid rgba(117, 83, 232, .16);
      border-radius: var(--r-l);
      box-shadow: var(--sh-3);
      z-index: 950;
      display: none
    }

    .notif-panel.on {
      display: block;
      animation: paneFadeIn .18s ease-out
    }

    .notif-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(124, 58, 237, .1);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.05rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .02em;
      color: var(--pd);
      position: sticky;
      top: 0;
      background: var(--w);
      z-index: 1
    }

    .notif-item {
      display: flex;
      gap: 11px;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(124, 58, 237, .06);
      cursor: pointer;
      font-size: .86rem;
      line-height: 1.4;
      transition: background .15s;
      animation: notifIn .3s ease-out backwards
    }

    @keyframes notifIn {
      from { opacity: 0; transform: translateX(8px) }
      to { opacity: 1; transform: translateX(0) }
    }

    .notif-item:hover {
      background: rgba(124, 58, 237, .04)
    }

    .notif-item.noleida {
      background: rgba(124, 58, 237, .06)
    }

    .notif-item .ni-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .92rem
    }

    .ni-icon .ni-emoji { font-size: 1.15rem; line-height: 1 }

    /* Tonos de color por tipo de notificación */
    .ni-icon.ni-morado { background: rgba(124, 58, 237, .12); color: var(--pd) }
    .ni-icon.ni-rosa { background: rgba(236, 72, 153, .12); color: #db2777 }
    .ni-icon.ni-azul { background: rgba(37, 99, 235, .12); color: #1d4ed8 }
    .ni-icon.ni-oro { background: rgba(245, 158, 11, .15); color: #b45309 }
    .ni-icon.ni-rojo { background: rgba(220, 38, 38, .1); color: #b91c1c }

    .ni-body {
      flex: 1;
      min-width: 0
    }

    .ni-txt {
      color: var(--tx);
      display: block
    }

    .ni-txt b { color: var(--dk); font-weight: 700 }

    .notif-item .ni-time {
      font-size: .74rem;
      color: var(--tx2);
      margin-top: 2px
    }

    .ni-dot {
      flex-shrink: 0;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--p);
      align-self: center
    }

    .notif-empty {
      padding: 40px 20px;
      text-align: center;
      color: var(--tx2);
      font-size: .88rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px
    }

    .notif-empty i {
      font-size: 1.6rem;
      color: var(--uw-muted)
    }

    /* ── Retos de empresas ──────────────────────────────────────── */
    .reto-card {
      background: white;
      border: 1px solid rgba(124, 58, 237, .13);
      border-radius: var(--r-l);
      padding: 20px;
      margin-bottom: 14px;
      box-shadow: var(--sh-1);
      transition: transform .2s, box-shadow .2s
    }

    .reto-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-2)
    }

    .reto-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px
    }

    .reto-empresa {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--pk-tx);
      display: flex;
      align-items: center;
      gap: 6px
    }

    .reto-titulo {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.25rem;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.2;
      margin: 2px 0 6px
    }

    .reto-ps {
      flex-shrink: 0;
      background: linear-gradient(135deg, #f59e0b, #f97316);
      color: white;
      border-radius: 12px;
      padding: 8px 12px;
      text-align: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1.15rem;
      line-height: 1.1;
      min-width: 62px
    }

    .reto-ps span {
      display: block;
      font-size: .58rem;
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      letter-spacing: .08em;
      opacity: .9
    }

    .reto-desc {
      font-size: .9rem;
      color: var(--tx);
      line-height: 1.6;
      margin-bottom: 12px
    }

    .reto-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      font-size: .78rem;
      color: var(--tx2);
      margin-bottom: 12px
    }

    .reto-meta span {
      display: flex;
      align-items: center;
      gap: 5px
    }

    .reto-btn {
      background: var(--p);
      color: white;
      border: none;
      border-radius: var(--r-s);
      padding: 11px 18px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: .95rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: background .2s, transform .12s
    }

    .reto-btn:hover {
      background: var(--pd)
    }

    .reto-btn:active {
      transform: scale(.97)
    }

    .reto-btn.sec {
      background: rgba(117, 83, 232, .1);
      color: var(--pd)
    }

    .reto-btn.sec:hover {
      background: rgba(117, 83, 232, .18)
    }

    .reto-estado {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 50px;
      padding: 7px 14px;
      font-size: .78rem;
      font-weight: 700
    }

    .reto-estado.inscrito { background: rgba(14, 165, 233, .12); color: #075985 }
    .reto-estado.revision { background: rgba(245, 158, 11, .14); color: #92400e }
    .reto-estado.aprobado { background: rgba(22, 163, 74, .12); color: #15803d }
    .reto-estado.rechazado { background: rgba(220, 38, 38, .1); color: #b91c1c }
    .reto-estado.cerrado { background: rgba(100, 116, 139, .12); color: #475569 }

    .reto-inp {
      width: 100%;
      background: rgba(117, 83, 232, .06);
      border: 1.5px solid rgba(117, 83, 232, .18);
      border-radius: var(--r-s);
      color: var(--tx);
      font-family: 'DM Sans', sans-serif;
      font-size: .9rem;
      padding: 11px 13px;
      outline: none;
      transition: border-color .2s, background .2s, box-shadow .2s
    }

    .reto-inp:focus {
      border-color: var(--p);
      background: white;
      box-shadow: 0 0 0 3px rgba(117, 83, 232, .14)
    }

    .reto-lbl {
      display: block;
      font-size: .75rem;
      font-weight: 600;
      color: var(--tx2);
      margin-bottom: 4px
    }

    .lb-row {
      display: flex;
      align-items: center;
      gap: 12px;
      background: white;
      border: 1px solid rgba(117, 83, 232, .1);
      border-radius: var(--r-m);
      padding: 11px 15px;
      margin-bottom: 8px;
      transition: border-color .15s, transform .15s
    }

    .lb-row:hover {
      border-color: rgba(117, 83, 232, .3)
    }

    .lb-pos {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1.1rem;
      font-variant-numeric: tabular-nums;
      color: var(--pd);
      width: 26px;
      text-align: center;
      flex-shrink: 0
    }

    .lb-nombre {
      flex: 1;
      font-weight: 700;
      font-size: .9rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .lb-ps {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      color: #b45309;
      font-size: 1.05rem;
      flex-shrink: 0
    }

    .spin {
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid rgba(255, 255, 255, .3);
      border-top-color: white;
      border-radius: 50%;
      animation: sp .7s linear infinite
    }

    @keyframes sp {
      to {
        transform: rotate(360deg)
      }
    }

    /* MODALS */
    .nm {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10, 8, 30, .55);
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      z-index: 20000;
      align-items: center;
      justify-content: center;
      padding: 14px
    }

    .nm.on {
      display: flex
    }

    .nm .nm-box {
      animation: foroFadeIn .24s ease
    }

    .nm-box {
      background: white;
      border-radius: var(--r-l);
      width: 100%;
      max-width: 500px;
      max-height: 90dvh;
      overflow-y: auto;
      padding-bottom: 4px;
      box-shadow: var(--sh-3)
    }

    .nm-head {
      padding: 18px 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .nm-head h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.15rem;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--dk)
    }

    .nm-x {
      background: none;
      border: none;
      font-size: 1.1rem;
      color: var(--tx);
      cursor: pointer;
      opacity: .4;
      padding: 4px
    }

    .nm-x:hover {
      opacity: .9
    }

    .nm-body {
      padding: 14px 20px 20px
    }

    .fl {
      font-size: .76rem;
      font-weight: 600;
      color: var(--pd);
      margin-bottom: 5px;
      display: block
    }

    .fi {
      width: 100%;
      background: var(--lp);
      border: 1.5px solid rgba(117, 83, 232, .12);
      border-radius: var(--r-s);
      color: var(--dk);
      font-size: .88rem;
      font-family: 'DM Sans', sans-serif;
      padding: 10px 12px;
      outline: none;
      margin-bottom: 11px;
      transition: border-color .2s, background .2s, box-shadow .2s
    }

    .fi:focus {
      border-color: var(--p);
      background: white;
      box-shadow: 0 0 0 3px rgba(117, 83, 232, .14)
    }

    .fr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px
    }

    .fs {
      width: 100%;
      background: var(--lp);
      border: 1.5px solid rgba(117, 83, 232, .12);
      border-radius: var(--r-s);
      color: var(--dk);
      font-size: .88rem;
      font-family: 'DM Sans', sans-serif;
      padding: 10px 12px;
      outline: none;
      margin-bottom: 11px;
      transition: border-color .2s
    }

    .fs:focus {
      border-color: var(--p)
    }

    .fb {
      width: 100%;
      background: var(--p);
      color: white;
      border: none;
      border-radius: var(--r-s);
      padding: 12px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .95rem;
      font-weight: 900;
      letter-spacing: .5px;
      text-transform: uppercase;
      cursor: pointer;
      margin-top: 2px;
      transition: background .2s, transform .12s
    }

    .fb:hover {
      background: var(--pd)
    }

    .fb:active {
      transform: scale(.985)
    }

    .fd {
      width: 100%;
      background: transparent;
      border: 1.5px solid rgba(220, 38, 38, .25);
      color: var(--danger);
      border-radius: var(--r-s);
      padding: 9px;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      margin-top: 7px;
      font-family: 'DM Sans', sans-serif;
      transition: background .15s
    }

    .fd:hover {
      background: rgba(220, 38, 38, .06)
    }

    /* MI PERFIL PANE */
    .mp-hero {
      background: white;
      border: 1.5px solid rgba(124, 58, 237, .18);
      border-radius: var(--r-l);
      padding: 28px 24px;
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--sh-1)
    }

    .mp-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(300px 220px at 94% 0%, rgba(124, 58, 237, .08) 0%, transparent 70%);
      pointer-events: none
    }

    .mp-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 3px solid var(--pk);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 2rem;
      font-weight: 900;
      color: white;
      background: linear-gradient(135deg, var(--p), var(--pdd));
      flex-shrink: 0;
      overflow: hidden;
      z-index: 1
    }

    .mp-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .mp-info {
      flex: 1;
      z-index: 1
    }

    .mp-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(1.4rem, 4vw, 2rem);
      font-weight: 900;
      text-transform: uppercase;
      color: var(--pd);
      line-height: 1;
      margin-bottom: 8px
    }

    .mp-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px
    }

    .mp-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .mp-chip-p {
      background: rgba(124, 58, 237, .09);
      color: var(--pd);
      border: 1px solid rgba(124, 58, 237, .3)
    }

    .mp-chip-pk {
      background: rgba(124, 58, 237, .05);
      color: var(--pk-tx);
      border: 1px solid rgba(124, 58, 237, .22)
    }

    .mp-chip-g {
      background: rgba(61, 48, 96, .05);
      color: var(--tx);
      border: 1px solid rgba(61, 48, 96, .18)
    }

    .mp-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px
    }

    .mp-meta span {
      font-size: .78rem;
      color: var(--tx2);
      display: flex;
      align-items: center;
      gap: 5px
    }

    .mp-meta i {
      color: var(--p);
      font-size: .75rem
    }

    .mp-card {
      background: white;
      border: 1px solid rgba(124, 58, 237, .13);
      border-radius: var(--r-l);
      padding: 20px;
      box-shadow: var(--sh-1);
      margin-bottom: 14px
    }

    .mp-card-title {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--pk-tx);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .mp-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 0;
      border-bottom: 1px solid rgba(117, 83, 232, .07)
    }

    .mp-row:last-child {
      border-bottom: none
    }

    .mp-label {
      font-size: .74rem;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--pd);
      font-weight: 700;
      opacity: .8
    }

    .mp-val {
      font-weight: 600;
      color: var(--dk);
      font-size: .88rem
    }

    .mp-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--p);
      color: white;
      padding: 11px 22px;
      border-radius: 10px;
      font-weight: 700;
      font-size: .82rem;
      text-decoration: none;
      transition: all .2s;
      margin-top: 4px
    }

    .mp-link:hover {
      background: var(--pd);
      transform: translateY(-1px)
    }

    @media(max-width:480px) {
      .mp-hero {
        flex-direction: column;
        text-align: center
      }

      .mp-chips {
        justify-content: center
      }

      .mp-meta {
        justify-content: center
      }
    }

    /* FOOTER */
    footer {
      background: var(--ow);
      border-top: 1px solid rgba(124, 58, 237, .1);
      padding: 18px 0
    }

    .ft {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px
    }

    .ft-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0
    }

    .ft-brand img {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      object-fit: cover;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
    }

    .ft-brand span {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: .95rem;
      color: var(--pd);
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .ft-copy {
      font-size: .75rem;
      color: var(--tx2);
      white-space: nowrap
    }

    .ft-admin {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0
    }

    .ft-admin a {
      font-size: .78rem;
      color: var(--tx2);
      text-decoration: none;
      transition: color .2s;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap
    }

    .ft-admin a:hover {
      color: var(--pd)
    }

    /* RESPONSIVE */
    @media(max-width:768px) {
      .hc {
        height: 56px;
        padding: 0 14px
      }

      /* En móvil ya tenemos el bottom nav: la hamburguesa es redundante */
      .ham {
        display: none
      }

      .desktop-nav {
        display: none
      }

      nav.mainnav {
        position: fixed;
        inset: 0;
        background: linear-gradient(150deg, var(--dk) 0%, #1e0d4e 100%);
        flex-direction: column;
        align-items: stretch;
        padding: 70px 12px 24px;
        transform: translateX(-100%);
        transition: transform .33s cubic-bezier(.4, 0, .2, 1);
        z-index: 1001;
        overflow-y: auto;
        gap: 3px;
        display: flex
      }

      nav.mainnav.open {
        transform: translateX(0)
      }

      nav.mainnav .ni {
        width: 100%;
        justify-content: flex-start;
        margin: 2px 0;
        padding: 12px 16px !important;
        font-size: 15px;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, .07) !important;
        border: none !important;
        color: rgba(255, 255, 255, .82) !important
      }

      nav.mainnav .ni:hover {
        background: rgba(255, 255, 255, .14) !important;
        color: white !important
      }

      nav.mainnav .nperfil {
        background: rgba(255, 107, 154, .14) !important;
        border: 1px solid rgba(255, 107, 154, .28) !important;
        border-radius: 8px !important;
        color: var(--pk) !important
      }

      nav.mainnav .njoin {
        background: var(--pk) !important;
        color: var(--w) !important;
        margin-left: 0 !important;
        box-shadow: none;
        margin-top: 6px
      }

      nav.mainnav .nav-sep {
        width: 100%;
        height: 1px;
        margin: 6px 0;
        background: rgba(255, 255, 255, .15)
      }

      .hero {
        padding: 34px 0 28px
      }

      .wrap {
        padding: 0 14px
      }

      .tabs {
        top: calc(56px + env(safe-area-inset-top, 0px))
      }

      .tabs-in {
        padding: 0 14px
      }

      .tab {
        padding: 11px 13px;
        font-size: .72rem
      }

      /* En móvil ocultamos el sub-nav superior y usamos el bottom nav */
      .tabs {
        display: none
      }

      .content {
        padding: 20px 14px 96px
      }

      footer {
        margin-bottom: 78px
      }

      .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        justify-content: space-around;
        align-items: stretch;
        background: rgba(255, 255, 255, .93);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-top: 1px solid rgba(117, 83, 232, .12);
        box-shadow: 0 -4px 24px rgba(117, 83, 232, .10);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom))
      }

      .bnav-item {
        flex: 1;
        min-width: 0;
        background: none;
        border: none;
        cursor: pointer;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;
        color: var(--tx);
        opacity: .5;
        font-family: 'DM Sans', sans-serif;
        -webkit-tap-highlight-color: transparent;
        transition: opacity .2s, color .2s, transform .12s
      }

      .bnav-item i {
        font-size: 1.18rem;
        transition: transform .15s
      }

      .bnav-item span {
        font-size: .61rem;
        font-weight: 700;
        letter-spacing: .01em;
        white-space: nowrap
      }

      .bnav-item.active {
        opacity: 1;
        color: var(--p)
      }

      .bnav-item.active i {
        transform: translateY(-2px)
      }

      .bnav-item:active {
        transform: scale(.9)
      }

      .bnav-badge {
        position: absolute;
        top: 1px;
        left: 50%;
        margin-left: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--p);
        color: #fff;
        border-radius: 50px;
        font-size: .58rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid var(--w)
      }

      .grid {
        grid-template-columns: 1fr;
        gap: 13px
      }

      .fr {
        grid-template-columns: 1fr
      }

      .nm {
        padding: 0;
        align-items: flex-end
      }

      .nm-box {
        border-radius: 18px 18px 0 0;
        max-height: 92dvh
      }

      .ft {
        padding: 0 14px;
        gap: 10px
      }

      .ft-copy {
        display: none
      }

      .admin-bar .inner {
        padding: 0 14px
      }
    }

    /* Bloqueo de scroll de fondo (menú móvil y onboarding) */
    body.locked {
      overflow: hidden
    }

    @media(max-width:400px) {
      .l-box {
        padding: 18px 14px
      }
    }

    /* ── VOTACIÓN ───────────────────────────────────── */
    .vot-header {
      margin-bottom: 24px
    }

    .vot-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 900;
      text-transform: uppercase;
      color: var(--dk);
      line-height: .95;
      margin-bottom: 6px
    }

    .vot-title span {
      color: var(--p)
    }

    .vot-desc {
      font-size: .88rem;
      color: var(--tx);
      opacity: .7;
      margin-bottom: 4px
    }

    .vot-deadline {
      font-size: .75rem;
      color: var(--pk);
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .vot-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 18px;
      margin-top: 20px
    }

    .cand-card {
      background: white;
      border: 1px solid rgba(124, 58, 237, .13);
      border-radius: var(--r-l);
      overflow: hidden;
      box-shadow: var(--sh-1);
      transition: transform .22s, box-shadow .22s;
      cursor: pointer
    }

    .cand-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--sh-2)
    }

    .cand-card.selected {
      border: 2.5px solid var(--p);
      box-shadow: 0 0 0 4px rgba(117, 83, 232, .12)
    }

    .cand-photo {
      width: 100%;
      height: 220px;
      object-fit: cover;
      object-position: top;
      display: block;
      background: linear-gradient(135deg, var(--p), var(--pdd))
    }

    .cand-photo-ph {
      height: 220px;
      background: linear-gradient(135deg, var(--p), var(--pdd));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      color: rgba(255, 255, 255, .3)
    }

    .cand-body {
      padding: 16px 18px 18px
    }

    .cand-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.25rem;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--dk);
      margin-bottom: 2px
    }

    .cand-state {
      font-size: .75rem;
      color: var(--p);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .prop-toggle {
      background: var(--lp);
      border: none;
      border-radius: var(--r-s);
      padding: 8px 14px;
      font-size: .78rem;
      font-weight: 700;
      color: var(--pd);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: 'DM Sans', sans-serif;
      margin-bottom: 10px;
      width: 100%;
      justify-content: space-between
    }

    .prop-toggle:hover {
      background: #e0d9f8
    }

    .prop-list {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease /* impeccable-disable-line layout-transition -- acordeón, interpolate-size lo suaviza */
    }

    .prop-list.on {
      max-height: max-content
    }

    .prop-item {
      font-size: .83rem;
      color: var(--tx);
      line-height: 1.6;
      padding: 4px 0;
      border-bottom: 1px solid rgba(117, 83, 232, .08);
      display: flex;
      gap: 8px;
      align-items: flex-start
    }

    .prop-item::before {
      content: "•";
      color: var(--pk);
      flex-shrink: 0;
      font-weight: 900
    }

    .cand-vote-btn {
      width: 100%;
      margin-top: 12px;
      background: var(--p);
      color: white;
      border: none;
      border-radius: 9px;
      padding: 11px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 900;
      text-transform: uppercase;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: all .2s
    }

    .cand-vote-btn:hover {
      background: var(--pd);
      transform: translateY(-1px)
    }

    .cand-vote-btn.voted {
      background: linear-gradient(90deg, var(--p), var(--pk));
      cursor: default;
      transform: none
    }

    /* Results bar */
    .res-wrap {
      margin-top: 20px
    }

    .res-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--dk);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .res-row {
      margin-bottom: 12px
    }

    .res-name {
      font-size: .84rem;
      font-weight: 600;
      color: var(--tx);
      margin-bottom: 4px;
      display: flex;
      justify-content: space-between
    }

    .res-bar-bg {
      background: var(--lp);
      border-radius: 50px;
      height: 10px;
      overflow: hidden
    }

    .res-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--p), var(--pk));
      border-radius: 50px;
      transition: width .6s ease; /* impeccable-disable-line layout-transition -- barra de resultados, el JS fija width */
      min-width: 2px
    }

    .res-pct {
      font-size: .72rem;
      font-weight: 700;
      color: var(--p)
    }

    /* ── FORO ─────────────────────────────────────────────────────── */
    .foro-composer {
      background: white;
      border: 1px solid rgba(124, 58, 237, .13);
      border-radius: var(--r-l);
      padding: 18px 20px;
      box-shadow: var(--sh-1);
      margin-bottom: 20px
    }

    .foro-composer textarea {
      width: 100%;
      border: 1.5px solid var(--lp);
      border-radius: 10px;
      padding: 12px 14px;
      font-family: 'DM Sans', sans-serif;
      font-size: .9rem;
      color: var(--tx);
      resize: vertical;
      min-height: 82px;
      transition: border .2s;
      background: var(--ow)
    }

    .foro-composer textarea:focus {
      outline: none;
      border-color: var(--p);
      background: white
    }

    /* Adjuntar arriba, publicar abajo y a todo lo ancho: siempre visible y
       sin competir por el espacio con las tres acciones. */
    .foro-composer-foot {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 12px
    }

    .composer-publicar {
      width: 100%;
      border: none;
      border-radius: 12px;
      padding: 13px 20px;
      background: var(--p);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .9rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      box-shadow: 0 6px 18px rgba(124, 58, 237, .28);
      transition: background .18s, opacity .18s, transform .12s
    }

    .composer-publicar:hover:not(:disabled) {
      background: var(--pd)
    }

    .composer-publicar:active:not(:disabled) {
      transform: scale(.985)
    }

    /* Apagado mientras no haya nada que publicar: dice sin texto que falta algo */
    .composer-publicar:disabled {
      background: var(--lp);
      color: var(--tx2);
      box-shadow: none;
      cursor: default
    }

    /* Composer colapsado: una sola línea hasta que se toca */
    .foro-composer.collapsed {
      cursor: text
    }

    .foro-composer.collapsed textarea {
      min-height: 0;
      height: 44px;
      resize: none;
      overflow: hidden;
      cursor: text
    }

    .foro-composer.collapsed .composer-yt,
    .foro-composer.collapsed .composer-preview,
    .foro-composer.collapsed .composer-progress,
    .foro-composer.collapsed .composer-progress-label,
    .foro-composer.collapsed .foro-composer-foot {
      display: none !important
    }

    /* Skeletons de carga del foro */
    .foro-skeleton {
      background: white;
      border-radius: 14px;
      padding: 18px 20px;
      margin-bottom: 14px;
      border: 1px solid rgba(117, 83, 232, .08)
    }

    .sk-line,
    .sk-circle {
      background: linear-gradient(90deg, #ececf3 25%, #f6f6fb 37%, #ececf3 63%);
      background-size: 400% 100%;
      animation: skShimmer 1.4s ease infinite;
      border-radius: 6px
    }

    .sk-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      flex-shrink: 0
    }

    @keyframes skShimmer {
      0% { background-position: 100% 50% }
      100% { background-position: 0 50% }
    }

    .foro-post {
      background: white;
      border: 1px solid rgba(124, 58, 237, .13);
      border-radius: var(--r-l);
      padding: 18px 20px;
      margin-bottom: 14px;
      box-shadow: var(--sh-1);
      transition: transform .2s ease, box-shadow .2s ease;
      animation: postIn .38s ease-out backwards
    }

    /* Entrada escalonada de los primeros posts */
    .foro-post:nth-child(1) { animation-delay: .02s }
    .foro-post:nth-child(2) { animation-delay: .07s }
    .foro-post:nth-child(3) { animation-delay: .12s }
    .foro-post:nth-child(4) { animation-delay: .17s }
    .foro-post:nth-child(5) { animation-delay: .22s }

    @keyframes postIn {
      from { opacity: 0; transform: translateY(10px) }
      to { opacity: 1; transform: translateY(0) }
    }

    .foro-post:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-2)
    }

    .foro-post-head {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 10px
    }

    .foro-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--p), var(--pdd));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1rem;
      color: white;
      flex-shrink: 0;
      text-transform: uppercase
    }

    .foro-meta {
      flex: 1;
      min-width: 0
    }

    .foro-name {
      font-weight: 700;
      font-size: .88rem;
      color: var(--dk)
    }

    .foro-info {
      font-size: .75rem;
      color: var(--tx2);
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 2px
    }

    .foro-texto {
      font-size: .92rem;
      line-height: 1.7;
      color: var(--tx);
      margin-bottom: 12px;
      word-break: break-word;
      white-space: pre-wrap;
      max-width: 65ch
    }

    .foro-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap
    }

    .foro-react-btn {
      background: var(--lp);
      border: 1.5px solid transparent;
      border-radius: 50px;
      padding: 6px 13px;
      font-size: .8rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      color: var(--tx2);
      transition: background .18s, border-color .18s, color .18s, transform .1s ease-out;
      line-height: 1;
      -webkit-tap-highlight-color: transparent
    }

    .foro-react-btn > :first-child {
      font-size: 1.02rem;
      display: inline-block;
      transition: transform .18s cubic-bezier(.34, 1.56, .64, 1)
    }

    .foro-react-btn:hover {
      border-color: rgba(124, 58, 237, .35);
      color: var(--pd)
    }

    .foro-react-btn:hover > :first-child {
      transform: scale(1.18)
    }

    .foro-react-btn:active {
      transform: scale(.94)
    }

    .foro-react-btn.on {
      background: rgba(124, 58, 237, .1);
      border-color: var(--p);
      color: var(--pd);
      font-weight: 700
    }

    .foro-react-btn.on > :first-child {
      transform: scale(1.1)
    }

    /* Rebote al reaccionar (spring) */
    .foro-react-btn.react-pop > :first-child {
      animation: reactPop .42s cubic-bezier(.34, 1.56, .64, 1)
    }

    @keyframes reactPop {
      0% { transform: scale(1) }
      35% { transform: scale(1.5) rotate(-8deg) }
      70% { transform: scale(.9) rotate(4deg) }
      100% { transform: scale(1.1) }
    }

    /* Emoji que sube y se desvanece al reaccionar */
    .react-fly {
      position: fixed;
      z-index: 99999;
      font-size: 1.5rem;
      pointer-events: none;
      transform: translate(-50%, -50%);
      animation: reactFly .72s cubic-bezier(.22, .7, .3, 1) forwards
    }

    @keyframes reactFly {
      0% { opacity: 0; transform: translate(-50%, -40%) scale(.5) }
      20% { opacity: 1; transform: translate(-50%, -90%) scale(1.25) }
      100% { opacity: 0; transform: translate(-50%, -230%) scale(1) }
    }

    @media (prefers-reduced-motion: reduce) {
      .react-fly { display: none }
    }

    .foro-cmt-toggle {
      background: none;
      border: none;
      font-size: .78rem;
      font-weight: 700;
      color: var(--pd);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 8px;
      border-radius: 50px;
      font-family: 'DM Sans', sans-serif;
      opacity: .75;
      margin-left: auto;
      transition: opacity .15s, background .15s
    }

    .foro-cmt-toggle:hover {
      opacity: 1;
      background: var(--lp)
    }

    .foro-share-btn {
      margin-left: 0
    }

    .foro-adm-del {
      background: none;
      border: none;
      font-size: .75rem;
      color: var(--danger);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 8px;
      font-family: 'DM Sans', sans-serif;
      opacity: .6
    }

    .foro-adm-del:hover {
      opacity: 1
    }

    /* ── STORIES CAROUSEL ─────────────────────────────────────────── */
    .stories-wrap {
      margin: 0 0 22px;
      padding: 0;
      position: relative
    }

    .stories-scroll {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      padding: 4px 2px 12px;
      scrollbar-width: none;
      scroll-behavior: smooth
    }

    .stories-scroll::-webkit-scrollbar {
      display: none
    }

    .story-tile {
      flex: 0 0 auto;
      width: 76px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      user-select: none
    }

    .story-ring {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      padding: 3px;
      background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s
    }

    .story-tile:hover .story-ring {
      transform: scale(1.04)
    }

    .story-ring.unseen {
      background: linear-gradient(135deg, var(--p) 0%, var(--pk) 60%, #f59e0b 100%)
    }

    .story-ring.mine {
      background: linear-gradient(135deg, var(--p), var(--pdd))
    }

    .story-ring-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: var(--w);
      padding: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden
    }

    .story-ring-inner img,
    .story-ring-inner .story-avatar-fallback {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%
    }

    .story-avatar-fallback {
      background: linear-gradient(135deg, var(--p), var(--pdd));
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase
    }

    .story-add-icon {
      position: relative
    }

    .story-add-icon::after {
      content: '+';
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--p);
      color: white;
      font-size: 18px;
      font-weight: 700;
      line-height: 22px;
      text-align: center;
      border: 2.5px solid var(--w);
      box-shadow: 0 2px 6px rgba(117, 83, 232, .3)
    }

    .story-name {
      font-size: .72rem;
      font-weight: 600;
      color: var(--tx);
      text-align: center;
      max-width: 76px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.2
    }

    .stories-empty-hint {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0 12px;
      font-size: .8rem;
      color: var(--tx);
      opacity: .55;
      font-style: italic
    }

    /* ── STORY VIEWER (fullscreen modal) ──────────────────────────── */
    .story-viewer {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .96);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      animation: foroFadeIn .2s ease
    }

    .story-viewer.on {
      display: flex
    }

    .story-viewer-stage {
      position: relative;
      width: 100%;
      max-width: 460px;
      height: 100%;
      max-height: 100vh;
      background: #000;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .sv-progress-bars {
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      display: flex;
      gap: 4px;
      z-index: 10
    }

    .sv-pbar {
      flex: 1;
      height: 3px;
      background: rgba(255, 255, 255, .3);
      border-radius: 2px;
      overflow: hidden
    }

    .sv-pbar > span {
      display: block;
      height: 100%;
      width: 0%;
      background: white;
      border-radius: 2px
    }

    .sv-pbar.done > span {
      width: 100%
    }

    .sv-header {
      position: absolute;
      top: 28px;
      left: 12px;
      right: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 10;
      color: white
    }

    .sv-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--p);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      color: white;
      font-size: .9rem;
      flex-shrink: 0
    }

    .sv-meta {
      flex: 1;
      min-width: 0
    }

    .sv-name {
      font-weight: 700;
      font-size: .85rem;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .sv-time {
      font-size: .7rem;
      opacity: .8;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .5)
    }

    .sv-close,
    .sv-del {
      background: rgba(0, 0, 0, .35);
      color: white;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem
    }

    .sv-del {
      background: rgba(220, 38, 38, .65)
    }

    .sv-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative
    }

    .sv-content img,
    .sv-content video {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block
    }

    .sv-text {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 50px 30px;
      box-sizing: border-box;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: clamp(1.4rem, 5vw, 2rem);
      line-height: 1.3;
      text-align: center;
      word-break: break-word;
      white-space: pre-wrap
    }

    .sv-caption {
      position: absolute;
      bottom: 64px;
      left: 16px;
      right: 16px;
      color: white;
      font-size: .9rem;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
      text-align: center;
      pointer-events: none;
      word-break: break-word;
      white-space: pre-wrap;
      z-index: 5
    }

    .sv-tap-zones {
      position: absolute;
      inset: 0;
      display: flex;
      z-index: 6
    }

    .sv-tap-zones > div {
      flex: 1;
      cursor: pointer
    }

    .sv-tap-zones > div:nth-child(2) {
      flex: 2
    }

    .sv-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 14px 16px;
      background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent);
      z-index: 11;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .sv-views-btn {
      background: rgba(255, 255, 255, .15);
      color: white;
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 50px;
      padding: 7px 14px;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      backdrop-filter: blur(8px);
      font-family: 'DM Sans', sans-serif
    }

    .sv-views-btn:hover {
      background: rgba(255, 255, 255, .25)
    }

    .sv-mute {
      position: absolute;
      bottom: 16px;
      right: 16px;
      z-index: 12;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .35);
      background: rgba(0, 0, 0, .45);
      color: #fff;
      font-size: .95rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(8px);
      transition: background .2s
    }

    .sv-mute:hover {
      background: rgba(0, 0, 0, .7)
    }

    /* ══ STORY COMPOSER v2 ════════════════════════════════════════
       Editor a pantalla completa, sin barras de pestañas ni botones
       sueltos: el lienzo manda y las herramientas aparecen solo
       cuando hacen falta. Misma paleta que el inicio (violeta marca). */

    .stc2 {
      /* Medidas del lienzo 9:16, compartidas por todas las barras para que
         nada quede desalineado respecto a lo que se está editando */
      --stc-h: min(100dvh, calc(100vw * 16 / 9));
      --stc-w: calc(var(--stc-h) * 9 / 16);
      position: fixed;
      inset: 0;
      z-index: 900;
      background: var(--dk);
      display: flex;
      flex-direction: column;
      font-family: 'DM Sans', sans-serif;
      color: #fff;
      overscroll-behavior: contain;
      -webkit-user-select: none;
      user-select: none;
      animation: stc2In .22s ease;
    }

    @keyframes stc2In {
      from { opacity: 0; transform: scale(.985); }
      to   { opacity: 1; transform: none; }
    }

    /* ── Paso 1 · origen ─────────────────────────────────────────── */
    .stc2-pick {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background:
        radial-gradient(120% 80% at 50% 0%, rgba(139, 92, 246, .38), transparent 60%),
        linear-gradient(160deg, var(--dk2), var(--dk));
    }

    .stc2-pick-in { text-align: center; max-width: 420px; width: 100%; }

    .stc2-pick-in h3 {
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: #fff;
    }

    .stc2-pick-in p {
      margin: 6px 0 26px;
      font-size: .88rem;
      color: rgba(255, 255, 255, .62);
    }

    .stc2-pick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

    .stc2-src {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 22px 8px;
      border-radius: var(--r-l);
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .07);
      color: #fff;
      font-family: inherit;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      transition: transform .14s, background .18s, border-color .18s;
    }

    .stc2-src i { font-size: 1.35rem; color: var(--pk); }
    .stc2-src:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); }
    .stc2-src:active { transform: scale(.95); }

    /* ── Paso 2 · editor ─────────────────────────────────────────── */
    .stc2-edit { position: absolute; inset: 0; }

    /* El lienzo es siempre 9:16 — lo que se ve aquí es exactamente lo que se
       publica. Sin esto el encuadre del pellizco mentiría en pantallas altas. */
    .stc2-stage {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: var(--stc-h);
      width: var(--stc-w);
      overflow: hidden;
      background: #000;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
    }

    /* Barras alineadas al lienzo, no a la ventana */
    .stc2 .stc2-fx,
    .stc2 .stc2-trim,
    .stc2 .stc2-bottom,
    .stc2 .stc2-sw {
      left: 50%;
      right: auto;
      width: var(--stc-w);
      max-width: 100%;
      margin-left: calc(var(--stc-w) / -2);
    }

    /* Las herramientas se pegan al borde del lienzo, no al de la ventana */
    .stc2 .stc2-x,
    .stc2 .stc2-tbar { left: calc(50% - var(--stc-w) / 2 + 14px); }

    .stc2 .stc2-tools,
    .stc2 .stc2-done { right: calc(50% - var(--stc-w) / 2 + 14px); }

    /* En el selector de origen no hay lienzo: la X va a la esquina */
    .stc2 .stc2-pick .stc2-x { left: 14px; }

    @media (min-width: 761px) {
      .stc2 { --stc-h: min(88dvh, 780px); }

      .stc2-stage {
        border-radius: var(--r-xl);
        box-shadow: var(--sh-3);
      }
    }

    .stc2-media {
      position: absolute;
      inset: 0;
      transform-origin: center;
      will-change: transform;
    }

    .stc2-media img,
    .stc2-media video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }

    /* Atenúa el fondo mientras se escribe, para que el texto se lea */
    .stc2-scrim {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: rgba(0, 0, 0, .45);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }

    .stc2.writing .stc2-scrim { opacity: 1; }

    .stc2-layers { position: absolute; inset: 0; z-index: 3; }

    /* La caja exterior solo posiciona: es transparente al tacto para que
       arrastrar sobre la foto mueva la foto, no el texto que tiene encima. */
    .stc2-layer {
      position: absolute;
      left: 0;
      top: 0;
      box-sizing: border-box;
      line-height: 1.2;
      text-align: center;
      transform-origin: center;
      pointer-events: none;
      transition: opacity .15s;
    }

    /* Solo las letras (y su resaltado) reciben el toque */
    .stc2-layer-in {
      display: inline-block;
      max-width: 100%;
      box-sizing: border-box;
      outline: none;
      white-space: pre-wrap;
      word-break: break-word;
      cursor: grab;
      touch-action: none;
      pointer-events: auto;
      -webkit-user-select: text;
      user-select: text;
    }

    .stc2-layer-in:empty:before { content: attr(data-ph); opacity: .5; }

    /* El recuadro punteado solo aparece mientras se manipula la capa */
    .stc2-layer-in.act {
      outline: 1.5px dashed rgba(255, 255, 255, .75);
      outline-offset: 6px;
      border-radius: 6px;
    }

    .stc2-layer.over-trash { opacity: .45; }

    /* Guías de centrado: aparecen al arrastrar y confirman el encuadre */
    .stc2-guide {
      position: absolute;
      z-index: 4;
      background: rgba(255, 255, 255, .85);
      opacity: 0;
      pointer-events: none;
      transition: opacity .1s;
    }

    .stc2-guide.on { opacity: 1; }
    .stc2-guide.gv { left: 50%; top: 0; bottom: 0; width: 1px; }
    .stc2-guide.gh { top: 50%; left: 0; right: 0; height: 1px; }

    /* Zona de borrado: arrastra el texto aquí y desaparece */
    .stc2-trash {
      position: absolute;
      z-index: 5;
      left: 50%;
      bottom: 28px;
      transform: translate(-50%, 20px);
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: #fff;
      background: rgba(0, 0, 0, .55);
      border: 1.5px solid rgba(255, 255, 255, .5);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .16s, transform .16s, background .16s;
    }

    .stc2-trash.on { opacity: 1; transform: translate(-50%, 0); }
    .stc2-trash.hot { background: var(--danger); border-color: #fff; transform: translate(-50%, 0) scale(1.18); }

    /* Pista breve al abrir el editor */
    .stc2-hint {
      position: absolute;
      z-index: 5;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 9px 16px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .55);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      font-size: .78rem;
      font-weight: 600;
      color: rgba(255, 255, 255, .92);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    .stc2-hint.on { opacity: 1; }

    /* ── Chrome flotante ─────────────────────────────────────────── */
    .stc2-chrome {
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
      transition: opacity .18s;
    }

    .stc2-chrome > * { pointer-events: auto; }
    .stc2.writing .stc2-chrome { opacity: 0; pointer-events: none; }

    .stc2-x {
      position: absolute;
      z-index: 7;
      top: calc(env(safe-area-inset-top, 0px) + 14px);
      left: 14px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, .42);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #fff;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .16s, transform .12s;
    }

    .stc2-x:active { transform: scale(.92); }

    /* Herramientas: columna a la derecha, se ocultan las que no aplican */
    .stc2-tools {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 14px);
      right: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .stc2-tools button {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, .42);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #fff;
      font-size: 1rem;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .16s, transform .12s;
    }

    .stc2-tools button:active { transform: scale(.92); }
    .stc2-tools button.on { background: var(--p); }

    /* ── Filtros ─────────────────────────────────────────────────── */
    .stc2-fx {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 108px);
      display: flex;
      gap: 10px;
      padding: 4px 16px 8px;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .stc2-fx::-webkit-scrollbar { display: none; }

    .stc2-fx-item {
      flex: 0 0 auto;
      width: 62px;
      cursor: pointer;
      text-align: center;
      font-size: .68rem;
      font-weight: 700;
      color: rgba(255, 255, 255, .78);
    }

    .stc2-fx-thumb {
      width: 62px;
      height: 62px;
      border-radius: 14px;
      overflow: hidden;
      background: #222;
      border: 2px solid transparent;
      margin-bottom: 5px;
      transition: border-color .15s, transform .12s;
    }

    .stc2-fx-thumb img,
    .stc2-fx-thumb .stc2-fx-flat { width: 100%; height: 100%; object-fit: cover; display: block; }
    .stc2-fx-item.on .stc2-fx-thumb { border-color: #fff; transform: scale(1.04); }
    .stc2-fx-item.on { color: #fff; }

    /* ── Recorte de video ────────────────────────────────────────── */
    .stc2-trim {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 106px);
      padding: 0 16px;
    }

    .stc2-trim-lbl {
      font-size: .72rem;
      font-weight: 700;
      color: rgba(255, 255, 255, .75);
      margin-bottom: 7px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .stc2-film {
      position: relative;
      height: 52px;
      border-radius: 12px;
      overflow: hidden;
      background: #000;
      touch-action: none;
    }

    .stc2-film-strip { position: absolute; inset: 0; display: flex; }
    .stc2-film-strip canvas,
    .stc2-film-strip img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; }

    .stc2-trim-mask {
      position: absolute;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .62);
      pointer-events: none;
    }

    .stc2-trim-mask.l { left: 0; }
    .stc2-trim-mask.r { right: 0; }

    .stc2-trim-sel {
      position: absolute;
      top: 0;
      bottom: 0;
      border: 2px solid #fff;
      border-radius: 10px;
      pointer-events: none;
    }

    .stc2-trim-h {
      position: absolute;
      top: -2px;
      bottom: -2px;
      width: 22px;
      background: #fff;
      pointer-events: auto;
      cursor: ew-resize;
      touch-action: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stc2-trim-h:before {
      content: '';
      width: 2px;
      height: 16px;
      border-radius: 2px;
      background: rgba(18, 8, 46, .45);
    }

    .stc2-trim-h.l { left: -2px; border-radius: 10px 0 0 10px; }
    .stc2-trim-h.r { right: -2px; border-radius: 0 10px 10px 0; }

    .stc2-trim-play {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--pk);
      box-shadow: 0 0 6px rgba(139, 92, 246, .9);
      pointer-events: none;
      opacity: 0;
    }

    .stc2-trim-play.on { opacity: 1; }

    /* ── Pie: un solo botón ──────────────────────────────────────── */
    .stc2-bottom {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
      background: linear-gradient(to top, rgba(0, 0, 0, .68), transparent);
    }

    .stc2-send {
      width: 100%;
      border: none;
      border-radius: 999px;
      padding: 15px 26px;
      background: var(--p);
      color: #fff;
      font-family: inherit;
      font-size: .95rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 8px 24px rgba(124, 58, 237, .45);
      transition: background .18s, transform .12s, opacity .18s;
    }

    .stc2-send:hover { background: var(--pd); }
    .stc2-send:active { transform: scale(.98); }
    .stc2-send:disabled { opacity: .65; cursor: default; transform: none; }

    .stc2-prog {
      height: 3px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .18);
      overflow: hidden;
      margin-bottom: 12px;
      opacity: 0;
      transition: opacity .2s;
    }

    .stc2-prog.on { opacity: 1; }
    .stc2-prog > span { display: block; height: 100%; width: 0; background: #fff; transition: width .18s; }

    /* ── Modo texto ──────────────────────────────────────────────── */
    .stc2-textmode { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
    .stc2-textmode > * { pointer-events: auto; }

    .stc2-done {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 14px);
      right: 14px;
      border: none;
      border-radius: 999px;
      padding: 10px 20px;
      background: #fff;
      color: var(--dk);
      font-family: inherit;
      font-size: .85rem;
      font-weight: 800;
      cursor: pointer;
    }

    /* Regulador de tamaño vertical, al alcance del pulgar */
    .stc2-size {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%) rotate(-90deg);
      transform-origin: center;
      width: 190px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stc2-size input[type=range] {
      width: 100%;
      accent-color: #fff;
      background: transparent;
    }

    .stc2-tbar {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 14px);
      left: 14px;
      display: flex;
      gap: 8px;
    }

    .stc2-tbar button {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, .45);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #fff;
      font-family: inherit;
      font-size: .95rem;
      font-weight: 800;
      cursor: pointer;
    }

    .stc2-tbar button.on { background: #fff; color: var(--dk); }

    .stc2-sw {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
      display: flex;
      gap: 12px;
      padding: 6px 18px;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .stc2-sw::-webkit-scrollbar { display: none; }

    .stc2-sw-dot {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid rgba(255, 255, 255, .55);
      transition: transform .12s, border-color .12s;
    }

    .stc2-sw-dot.on { border-color: #fff; transform: scale(1.22); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }

    /* Overlays de texto sobre video en el visor */
    .sv-overlays { position: absolute; inset: 0; pointer-events: none; z-index: 8; }

    /* Marco 9:16 del visor cuando la historia trae encuadre propio */
    .sv-vframe { position: relative; width: 100%; height: 100%; overflow: hidden; }
    .sv-vframe video { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }

    /* ── STORY VIEWS LIST ─────────────────────────────────────────── */
    .views-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 60vh;
      overflow-y: auto
    }

    .view-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 4px;
      border-radius: 8px
    }

    .view-item:hover {
      background: var(--lp)
    }

    .view-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--p), var(--pdd));
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden
    }

    .view-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .view-name {
      flex: 1;
      font-size: .88rem;
      font-weight: 600;
      color: var(--dk);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .view-time {
      font-size: .74rem;
      color: var(--tx2)
    }

    @media(max-width:768px) {
      .story-tile {
        width: 68px
      }

      .story-ring {
        width: 64px;
        height: 64px
      }

      .story-name {
        max-width: 68px;
        font-size: .65rem
      }
    }

    /* ── COMPOSER MEDIA ───────────────────────────────────────────── */
    /* Tres acciones repartidas a partes iguales: antes iban en una fila con
       scroll horizontal y en el móvil "YouTube" y "Publicar" quedaban fuera
       de pantalla, así que no se veía cómo adjuntar ni cómo publicar. */
    /* Se ajusta sola al número de acciones (hoy cuatro): en pantallas
       estrechas se reparten en dos filas en vez de salirse. */
    .composer-tools {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
      gap: 8px;
    }

    /* ── Encuesta en el composer ── */
    .composer-encuesta {
      display: none;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
      padding: 12px;
      border: 1.5px solid var(--lp);
      border-radius: var(--r-m);
      background: var(--ow)
    }

    .composer-encuesta.on { display: flex }

    .composer-encuesta input {
      width: 100%;
      border: 1.5px solid var(--lp);
      border-radius: 10px;
      padding: 10px 12px;
      font-family: 'DM Sans', sans-serif;
      font-size: .88rem;
      color: var(--tx);
      background: var(--w)
    }

    .composer-encuesta input:focus { outline: none; border-color: var(--p) }
    .composer-encuesta #encPregunta { font-weight: 700 }

    /* ── Encuesta dentro de una publicación ── */
    .enc-caja {
      margin: 10px 0 4px;
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .enc-preg {
      font-weight: 700;
      font-size: .95rem;
      color: var(--tx);
      margin-bottom: 2px
    }

    .enc-op-btn {
      position: relative;
      width: 100%;
      text-align: left;
      border: 1.5px solid rgba(124, 58, 237, .28);
      background: var(--w);
      border-radius: 12px;
      padding: 11px 14px;
      font-family: 'DM Sans', sans-serif;
      font-size: .9rem;
      color: var(--tx);
      cursor: pointer;
      overflow: hidden;
      transition: border-color .15s, background .15s
    }

    .enc-op-btn:hover:not(:disabled) { border-color: var(--p); background: rgba(124, 58, 237, .04) }
    .enc-op-btn:disabled { cursor: default }

    /* Barra de resultado: se pinta por detrás del texto */
    .enc-barra {
      position: absolute;
      inset: 0 auto 0 0;
      background: rgba(124, 58, 237, .14);
      transition: width .45s cubic-bezier(.22, 1, .36, 1);
      z-index: 0
    }

    .enc-op-btn.mia .enc-barra { background: rgba(124, 58, 237, .28) }
    .enc-op-txt, .enc-op-pct { position: relative; z-index: 1 }
    .enc-op-pct { float: right; font-weight: 700; color: var(--pd) }
    .enc-op-btn.mia .enc-op-txt::after { content: ' ✓'; font-weight: 700; color: var(--pd) }

    .enc-total {
      font-size: .76rem;
      color: var(--tx2);
      margin-top: 2px
    }

    /* Votación dentro de una republicación: un punto más compacta y sin el
       margen de arriba, que ahí lo pone la tarjeta */
    .enc-caja.enc-repost {
      margin: 0 0 8px;
      gap: 6px
    }

    .enc-caja.enc-repost .enc-preg { font-size: .88rem }
    .enc-caja.enc-repost .enc-op-btn { padding: 9px 12px; font-size: .85rem }

    /* Burbujas de quién votó cada opción */
    .enc-burs {
      position: relative;
      z-index: 1;
      display: inline-flex;
      vertical-align: middle;
      margin-left: 8px
    }

    .enc-bur {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--w);
      margin-left: -7px;
      background: var(--lp);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .enc-bur:first-child { margin-left: 0 }
    .enc-bur img { width: 100%; height: 100%; object-fit: cover }

    .enc-bur-txt {
      font-size: .58rem;
      font-weight: 800;
      color: var(--pd)
    }

    .ctool {
      background: var(--lp);
      border: 1.5px solid transparent;
      border-radius: 12px;
      padding: 11px 8px;
      font-size: .8rem;
      font-weight: 700;
      color: var(--pd);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 0;
      font-family: 'DM Sans', sans-serif;
      transition: all .18s
    }

    /* En pantallas estrechas se cae la etiqueta antes que romper la fila */
    .ctool span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .ctool:hover {
      background: rgba(117, 83, 232, .15);
      border-color: var(--p)
    }

    .ctool.on {
      background: var(--p);
      color: white;
      border-color: var(--p)
    }

    .composer-yt {
      display: none;
      margin-top: 10px
    }

    .composer-yt.on {
      display: block
    }

    .composer-yt input {
      width: 100%;
      border: 1.5px solid var(--lp);
      border-radius: 10px;
      padding: 10px 14px;
      font-family: 'DM Sans', sans-serif;
      font-size: .85rem;
      color: var(--tx);
      background: var(--ow);
      transition: border .2s
    }

    .composer-yt input:focus {
      outline: none;
      border-color: var(--p);
      background: white
    }

    .composer-preview {
      display: none;
      margin-top: 12px;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      background: var(--ow);
      border: 1.5px solid var(--lp)
    }

    .composer-preview.on {
      display: block
    }

    .composer-preview img,
    .composer-preview video {
      width: 100%;
      max-height: 320px;
      object-fit: contain;
      display: block;
      background: #000
    }

    .composer-preview .pv-info {
      padding: 8px 12px;
      font-size: .75rem;
      color: var(--tx);
      opacity: .7;
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: space-between
    }

    .composer-preview .pv-clear {
      background: rgba(220, 38, 38, .1);
      color: var(--danger);
      border: none;
      border-radius: 50px;
      padding: 4px 10px;
      font-size: .72rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 4px
    }

    .composer-preview .pv-clear:hover {
      background: rgba(239, 68, 68, .22)
    }

    .composer-progress {
      display: none;
      margin-top: 10px;
      background: var(--lp);
      border-radius: 50px;
      height: 8px;
      overflow: hidden;
      position: relative
    }

    .composer-progress.on {
      display: block
    }

    .composer-progress > span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--p), var(--pk));
      width: 0%;
      transition: width .2s ease; /* impeccable-disable-line layout-transition -- barra de progreso, el JS fija width */
      border-radius: 50px
    }

    .composer-progress-label {
      font-size: .72rem;
      color: var(--p);
      margin-top: 6px;
      font-weight: 600;
      text-align: center;
      display: none
    }

    .composer-progress-label.on {
      display: block
    }

    /* ── POST MEDIA ──────────────────────────────────────────────── */
    .post-media {
      margin: 0 0 12px;
      border-radius: 12px;
      overflow: hidden;
      background: #000;
      max-height: 520px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .post-media img,
    .post-media video {
      width: 100%;
      max-height: 520px;
      object-fit: contain;
      display: block;
      background: #000
    }

    .post-media iframe {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      display: block
    }

    /* Videos del feed (autoplay silenciado, estilo X) */
    .fv-wrap {
      position: relative;
      display: block;
      max-height: 80vh;
      aspect-ratio: 4 / 5;
      background: #000
    }

    .fv-wrap video {
      width: 100%;
      height: 100%;
      max-height: 80vh;
      object-fit: cover;
      display: block
    }

    /* Proporciones extremas (vertical muy largo o panorámico): se enseña el
       video entero con franjas negras, como Facebook, en vez de recortarlo */
    .fv-wrap.fv-contain video {
      object-fit: contain
    }

    /* Ruedita mientras se llena el búfer */
    .fv-spin {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.6rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s
    }

    .fv-spin.on {
      opacity: .9
    }

    /* Capa de aviso cuando el video no carga. Va ENCIMA del reproductor y se
       quita sola en cuanto el video vuelve a dar señales de vida: así un bache
       de red deja de convertirse en un cartel permanente. */
    .fv-error {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 22px 18px;
      text-align: center;
      background: rgba(20, 12, 40, .82);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      color: #fff;
      font-size: .85rem;
      font-weight: 600;
      line-height: 1.45
    }

    .fv-error[hidden] {
      display: none
    }

    .fv-error i {
      font-size: 1.6rem;
      opacity: .85
    }

    .fv-error-btns {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center
    }

    .fv-error button,
    .fv-error a {
      border: none;
      border-radius: 50px;
      padding: 9px 16px;
      font-family: 'DM Sans', sans-serif;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none
    }

    .fv-error button {
      background: #fff;
      color: var(--pd)
    }

    .fv-error a {
      background: rgba(255, 255, 255, .16);
      color: #fff
    }

    .fv-zones {
      position: absolute;
      inset: 0 0 34px 0; /* deja libre la barra de progreso */
      z-index: 1;
      display: flex
    }


    /* Barra de progreso del reproductor (avanzar/retroceder arrastrando) */
    .fv-bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 12px 9px;
      background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent)
    }

    .fv-t {
      font-size: .68rem;
      font-weight: 600;
      color: rgba(255, 255, 255, .92);
      font-variant-numeric: tabular-nums;
      font-family: 'DM Sans', sans-serif;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
      flex-shrink: 0
    }

    .fv-track {
      position: relative;
      flex: 1;
      height: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      touch-action: none
    }

    .fv-track::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 4px;
      border-radius: 4px;
      background: rgba(255, 255, 255, .3);
      transition: height .15s
    }

    .fv-fill {
      position: absolute;
      left: 0;
      height: 4px;
      border-radius: 4px;
      background: var(--pk);
      width: 0%;
      pointer-events: none;
      transition: height .15s
    }

    /* Lo que ya está descargado, por detrás del avance */
    .fv-buf {
      position: absolute;
      left: 0;
      height: 4px;
      border-radius: 4px;
      background: rgba(255, 255, 255, .45);
      width: 0%;
      pointer-events: none;
      transition: height .15s, width .3s linear
    }

    .fv-track.drag::before,
    .fv-track.drag .fv-buf,
    .fv-track.drag .fv-fill {
      height: 7px
    }

    .fv-thumb {
      position: absolute;
      left: 0;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
      transform: translateX(-50%) scale(0);
      transition: transform .15s;
      pointer-events: none
    }

    .fv-track.drag .fv-thumb,
    .fv-wrap:hover .fv-thumb {
      transform: translateX(-50%) scale(1)
    }

    .fv-z {
      flex: 1;
      cursor: pointer
    }

    .fv-z-c {
      flex: 1.3
    }

    .fv-fs {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, .5);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .8rem;
      cursor: pointer;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
    }

    .fv-hint {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      border-radius: 50px;
      padding: 8px 14px;
      font-size: .8rem;
      font-weight: 700;
      font-family: 'DM Sans', sans-serif;
      opacity: 0;
      pointer-events: none;
      transition: opacity .15s;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .fv-hint.on {
      opacity: 1
    }

    .fv-hint-l {
      left: 18px
    }

    .fv-hint-r {
      right: 18px
    }

    .fv-mute {
      position: absolute;
      bottom: 42px;
      right: 10px;
      z-index: 3;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, .5);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .8rem;
      cursor: pointer;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
    }

    .fv-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s
    }

    .fv-overlay i {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .45);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      padding-left: 4px
    }

    /* Cuadrícula de fotos del perfil (estilo X) */
    .mp-media-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      border-radius: 12px;
      overflow: hidden
    }

    .mp-media-cell {
      position: relative;
      aspect-ratio: 1 / 1;
      cursor: pointer;
      overflow: hidden;
      background: var(--lp)
    }

    .mp-media-cell img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .25s
    }

    .mp-media-cell:hover img {
      transform: scale(1.06)
    }

    /* ── Página de perfil (tipo FB/X) ──────────────────────────── */
    .mp-page {
      display: none;
      position: fixed;
      inset: 0;
      /* Por encima del chat (1550) para poder abrir un perfil DESDE el chat, y
         por debajo de editar-perfil / lista de seguidores (1600). */
      z-index: 1560;
      background: #f6f3ff;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch
    }

    .mp-page-close {
      position: fixed;
      top: 14px;
      left: 14px;
      z-index: 3;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, .4);
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
    }

    .mp-banner {
      width: 100%;
      height: 160px;
      position: relative;
      overflow: hidden
    }

    .mp-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    /* Avatar y portada con foto: se pueden tocar para verlas grandes con zoom */
    .mp-zoomable {
      cursor: zoom-in;
    }
    .mp-zoomable:active {
      opacity: .92;
    }

    /* Va por encima de la portada: el avatar monta sobre ella con un margen
       negativo, y sin esto la portada (que es `position:relative`) lo tapaba */
    .mp-page-content {
      position: relative;
      z-index: 1;
      max-width: 620px;
      margin: 0 auto;
      padding: 0 18px 110px;
      text-align: left
    }

    /* Fila avatar + acciones: el avatar monta sobre la portada (estilo X) */
    .mp-id-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px
    }

    .mp-top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 6px
    }

    .mp-follow-btn {
      border: 1.5px solid var(--p);
      background: var(--p);
      color: #fff;
      border-radius: 50px;
      padding: 9px 20px;
      font-family: 'DM Sans', sans-serif;
      font-size: .87rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s, color .15s, border-color .15s, transform .1s ease-out
    }

    .mp-follow-btn:hover {
      background: var(--pd);
      border-color: var(--pd)
    }

    .mp-follow-btn:active {
      transform: scale(.96)
    }

    .mp-follow-btn:disabled {
      opacity: .6;
      cursor: not-allowed
    }

    /* "Siguiendo" y "Editar perfil": contorno, sin peso visual */
    .mp-follow-btn.on,
    .mp-follow-btn.ghost {
      background: transparent;
      color: var(--pd);
      border-color: rgba(124, 58, 237, .3)
    }

    .mp-follow-btn.on:hover {
      background: rgba(220, 38, 38, .06);
      color: var(--danger);
      border-color: rgba(220, 38, 38, .4)
    }

    .mp-follow-btn.ghost:hover {
      background: rgba(124, 58, 237, .06);
      color: var(--pd);
      border-color: var(--p)
    }

    .mp-icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.5px solid rgba(124, 58, 237, .3);
      background: transparent;
      color: var(--pd);
      font-size: .92rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .15s, border-color .15s, transform .1s ease-out
    }

    .mp-icon-btn:hover {
      background: rgba(124, 58, 237, .08);
      border-color: var(--p)
    }

    .mp-icon-btn:active {
      transform: scale(.92)
    }

    /* Bloquear activo: el botón se tiñe de rojo */
    .mp-icon-btn.on {
      border-color: rgba(220, 38, 38, .4);
      background: rgba(220, 38, 38, .08);
      color: var(--danger)
    }

    .mp-bloqueo-nota {
      font-size: .82rem;
      font-weight: 700;
      color: var(--tx2);
      padding: 9px 4px
    }

    .mp-page-avatar {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      margin: -48px 0 0;
      flex-shrink: 0;
      border: 4px solid #f6f3ff;
      overflow: hidden;
      background: linear-gradient(135deg, var(--p), var(--pk));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 2rem;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .15)
    }

    .mp-page-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .mp-page-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.7rem;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--tx);
      margin: 0 0 2px;
      line-height: 1.05
    }

    /* Descripción libre que escribe la persona */
    .mp-bio {
      font-size: .93rem;
      line-height: 1.55;
      color: var(--tx);
      margin: 0 0 12px;
      white-space: pre-wrap;
      word-break: break-word
    }

    /* Cargo, estado y antigüedad en una línea discreta */
    .mp-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 16px;
      font-size: .83rem;
      color: var(--tx2);
      margin-bottom: 10px
    }

    .mp-meta-row span {
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .mp-meta-row i {
      opacity: .65;
      font-size: .78rem
    }

    .mp-page-cargo {
      font-size: .82rem;
      color: var(--tx);
      opacity: .7;
      font-weight: 600;
      margin-bottom: 8px
    }

    /* Seguidores en el perfil — clicables, como en X */
    .mp-follow-counts {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 18px;
      font-size: .87rem;
      color: var(--tx2);
      margin: 2px 0 14px
    }

    .mp-follow-counts button {
      background: none;
      border: none;
      padding: 0;
      font-family: 'DM Sans', sans-serif;
      font-size: .87rem;
      color: var(--tx2);
      cursor: pointer;
      border-bottom: 1px solid transparent;
      transition: border-color .15s
    }

    .mp-follow-counts button:hover {
      border-bottom-color: var(--tx2)
    }

    .mp-follow-counts b {
      color: var(--tx);
      font-weight: 700;
      font-variant-numeric: tabular-nums
    }

    .mp-te-sigue {
      background: rgba(124, 58, 237, .08);
      border: 1px solid rgba(124, 58, 237, .22);
      color: var(--pk-tx);
      border-radius: 50px;
      padding: 2px 10px;
      font-size: .7rem;
      font-weight: 700
    }

    .mp-page-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 16px
    }

    /* ── Visor de fotos (único sitio con zoom) ──────────────────────── */
    .foto-visor {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      /* El visor gestiona su propio pellizco con eventos de puntero */
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
      animation: storyFadeIn .18s ease
    }

    .foto-visor img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transform-origin: center;
      will-change: transform;
      -webkit-user-drag: none
    }

    .foto-visor-x {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 14px);
      right: 14px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .16);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #fff;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    /* (El aviso de video que no carga ahora es .fv-error, una capa encima del
       reproductor, para que se pueda reintentar sin perderlo.) */

    /* Video que la Cloud Function aún está convirtiendo a MP4 */
    .video-procesando {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 200px;
      padding: 32px 20px;
      text-align: center;
      background: rgba(117, 83, 232, .08);
      border-radius: 14px;
      color: #fff;
      font-size: .85rem;
      font-weight: 600;
      position: relative
    }

    /* Velo oscuro cuando hay póster de fondo, para que el texto se lea */
    .video-procesando[style*="background-image"]::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(20, 12, 40, .5);
      border-radius: 14px
    }

    .video-procesando i,
    .video-procesando span {
      position: relative;
      z-index: 1
    }

    .video-procesando i {
      font-size: 1.6rem
    }

    .mp-sec {
      margin-top: 18px;
      text-align: left
    }

    .mp-sec-title {
      font-size: .76rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: var(--tx2);
      margin-bottom: 10px
    }

    /* ── Muro del perfil (estilo X) ──────────────────────────────────
       Sin tarjetas: una columna continua separada por líneas finas, para
       que se lea como un hilo y no como una rejilla de cajas. */
    .mp-timeline {
      margin-top: 18px;
      border-top: 1px solid rgba(117, 83, 232, .14)
    }

    .mp-tl-item {
      display: flex;
      gap: 12px;
      padding: 14px 2px;
      border-bottom: 1px solid rgba(117, 83, 232, .14)
    }

    .mp-tl-ava {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border-radius: 50%;
      overflow: hidden;
      background: linear-gradient(135deg, var(--p), var(--pk));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: .95rem
    }

    .mp-tl-ava img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    /* min-width:0 deja que el texto largo se parta en vez de ensanchar la fila */
    .mp-tl-body {
      flex: 1;
      min-width: 0
    }

    .mp-tl-head {
      display: flex;
      align-items: baseline;
      gap: 5px;
      margin-bottom: 3px
    }

    .mp-tl-name {
      font-weight: 700;
      font-size: .9rem;
      color: var(--tx);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .mp-tl-time {
      font-size: .8rem;
      color: var(--tx2);
      white-space: nowrap;
      flex-shrink: 0
    }

    .mp-tl-text {
      font-size: .93rem;
      color: var(--tx);
      line-height: 1.5;
      margin-bottom: 8px;
      white-space: pre-wrap;
      word-break: break-word
    }

    .mp-tl-item .post-media {
      border-radius: 14px;
      overflow: hidden
    }

    .mp-empty-soft {
      text-align: center;
      padding: 24px;
      color: var(--tx);
      opacity: .55;
      font-size: .85rem;
      background: rgba(117, 83, 232, .04);
      border-radius: 14px
    }

    .mp-empty-soft i {
      display: block;
      font-size: 1.5rem;
      margin-bottom: 8px;
      opacity: .6
    }

    .mp-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px
    }

    .mp-act {
      flex: 1 1 auto;
      min-width: 120px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: var(--w);
      border: 1.5px solid rgba(117, 83, 232, .2);
      color: var(--tx);
      border-radius: 12px;
      padding: 11px 14px;
      font-size: .82rem;
      font-weight: 700;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      text-decoration: none;
      transition: all .15s
    }

    .mp-act:hover {
      border-color: var(--p);
      color: var(--p)
    }

    .mp-act-p {
      background: var(--p);
      color: #fff;
      border-color: var(--p)
    }

    .mp-act-p:hover {
      background: var(--pd);
      color: #fff;
      border-color: var(--pd)
    }

    .mp-act:active {
      transform: scale(.98)
    }

    .mp-act-out {
      color: var(--danger);
      border-color: rgba(220, 38, 38, .3)
    }

    .mp-act-out:hover {
      color: var(--danger);
      border-color: var(--danger);
      background: rgba(220, 38, 38, .05)
    }

    /* ── Editar perfil / lista de seguidores ───────────────────── */
    .ep-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1600;
      background: rgba(18, 8, 46, .55);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      align-items: center;
      justify-content: center;
      padding: 18px
    }

    .ep-modal.on {
      display: flex
    }

    .ep-card {
      background: var(--w);
      border-radius: 20px;
      width: 100%;
      max-width: 480px;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: var(--sh-3);
      animation: epIn .22s cubic-bezier(.22, 1, .36, 1)
    }

    @keyframes epIn {
      from { opacity: 0; transform: translateY(14px) scale(.98) }
      to { opacity: 1; transform: none }
    }

    .ep-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      border-bottom: 1px solid rgba(124, 58, 237, .12);
      flex-shrink: 0
    }

    .ep-x {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: rgba(124, 58, 237, .08);
      color: var(--p);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
      transition: background .15s
    }

    .ep-x:hover {
      background: rgba(124, 58, 237, .16)
    }

    .ep-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1.25rem;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--p)
    }

    .ep-body {
      padding: 0 0 18px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch
    }

    /* Preview de portada con la foto montada, igual que se verá el perfil */
    .ep-portada {
      position: relative;
      height: 130px;
      background: linear-gradient(135deg, var(--p), var(--pk));
      background-size: cover;
      background-position: center;
      margin-bottom: 46px
    }

    .ep-foto {
      position: absolute;
      left: 18px;
      bottom: -36px;
      width: 78px;
      height: 78px;
      border-radius: 50%;
      border: 4px solid var(--w);
      background: linear-gradient(135deg, var(--p), var(--pk));
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1.5rem
    }

    .ep-cam {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(18, 8, 46, .55);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: .85rem;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      transition: background .15s
    }

    .ep-cam:hover {
      background: rgba(18, 8, 46, .75)
    }

    /* Cámara centrada sobre la foto de perfil.
       El avatar mide 78px en left:18/bottom:-36 → su centro cae en
       left 57 / bottom 3; restamos medio botón (16px) para centrarlo. */
    .ep-cam-foto {
      top: auto;
      right: auto;
      left: 41px;
      bottom: -13px;
      width: 32px;
      height: 32px;
      font-size: .74rem;
      background: rgba(18, 8, 46, .6)
    }

    .ep-lbl {
      display: block;
      font-size: .74rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--tx2);
      margin: 14px 18px 6px
    }

    .ep-inp {
      display: block;
      width: calc(100% - 36px);
      margin: 0 18px;
      border: 1.5px solid rgba(124, 58, 237, .22);
      background: rgba(124, 58, 237, .04);
      border-radius: 12px;
      padding: 11px 14px;
      font-family: 'DM Sans', sans-serif;
      font-size: .93rem;
      color: var(--tx);
      outline: none;
      transition: border-color .2s, background .2s
    }

    .ep-inp:focus {
      border-color: var(--p);
      background: var(--w)
    }

    .ep-ta {
      resize: vertical;
      min-height: 74px;
      line-height: 1.5
    }

    .ep-count {
      text-align: right;
      margin: 6px 18px 0;
      font-size: .72rem;
      color: var(--tx2);
      font-variant-numeric: tabular-nums
    }

    .ep-foot {
      display: flex;
      gap: 10px;
      padding: 14px 18px;
      padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid rgba(124, 58, 237, .12);
      flex-shrink: 0
    }

    .ep-btn {
      flex: 1;
      border-radius: 12px;
      padding: 12px 10px;
      font-family: 'DM Sans', sans-serif;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      white-space: nowrap;
      transition: background .15s, transform .1s ease-out
    }

    /* El botón principal manda: "Cancelar" no necesita la mitad del ancho */
    .ep-btn-ghost {
      flex: 0 0 auto
    }

    .ep-btn:active {
      transform: scale(.97)
    }

    .ep-btn-p {
      background: var(--p);
      border: 1.5px solid var(--p);
      color: #fff
    }

    .ep-btn-p:hover {
      background: var(--pd);
      border-color: var(--pd)
    }

    .ep-btn-p:disabled {
      opacity: .6;
      cursor: not-allowed
    }

    .ep-btn-ghost {
      background: var(--w);
      border: 1.5px solid rgba(124, 58, 237, .22);
      color: var(--tx)
    }

    .ep-btn-ghost:hover {
      border-color: var(--p);
      color: var(--p)
    }

    /* Filas de la lista de seguidores */
    .fl-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 11px 18px;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      transition: background .15s
    }

    .fl-item:hover {
      background: rgba(124, 58, 237, .05)
    }

    .fl-ava {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      flex-shrink: 0;
      overflow: hidden;
      background: linear-gradient(135deg, var(--p), var(--pdd));
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: .95rem
    }

    .fl-ava img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .fl-mid {
      min-width: 0;
      display: flex;
      flex-direction: column
    }

    .fl-name {
      font-weight: 700;
      font-size: .92rem;
      color: var(--tx);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    /* Tarjeta de republicación (repost) */
    .repost-card {
      border: 1.5px solid rgba(117, 83, 232, .18);
      border-radius: 14px;
      padding: 12px;
      margin-top: 4px;
      background: rgba(117, 83, 232, .03)
    }

    .repost-head {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 8px;
      cursor: pointer
    }

    .repost-head .foro-avatar {
      width: 30px;
      height: 30px;
      font-size: .7rem
    }

    .repost-name {
      font-weight: 700;
      font-size: .85rem;
      color: var(--tx)
    }

    .repost-text {
      font-size: .9rem;
      color: var(--tx);
      line-height: 1.5;
      margin-bottom: 8px;
      white-space: pre-wrap;
      word-break: break-word
    }

    .repost-tag {
      font-size: .78rem;
      color: var(--p);
      font-weight: 600;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    /* ── COMMENTS ─────────────────────────────────────────────────── */
    .cmt-section {
      display: none;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--lp)
    }

    .cmt-section.on {
      display: block
    }

    .cmt-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 12px
    }

    .cmt-item {
      display: flex;
      gap: 9px
    }

    .cmt-ava {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--pk), var(--pkd));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: .75rem;
      color: white;
      flex-shrink: 0;
      text-transform: uppercase
    }

    .cmt-bubble {
      background: var(--ow);
      border-radius: 10px;
      padding: 8px 12px;
      flex: 1;
      min-width: 0;
      position: relative;
    }

    .cmt-author {
      font-size: .74rem;
      font-weight: 700;
      color: var(--dk);
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      padding-right: 20px;
    }

    .cmt-nivel {
      background: var(--lp);
      color: var(--pd);
      border-radius: 4px;
      padding: 1px 6px;
      font-size: .64rem;
      font-weight: 700;
      text-transform: uppercase
    }

    .cmt-text {
      font-size: .86rem;
      color: var(--tx);
      line-height: 1.6;
      word-break: break-word
    }

    .cmt-time {
      font-size: .7rem;
      color: var(--tx2);
      margin-top: 3px
    }

    .cmt-adm-del {
      background: none;
      border: none;
      font-size: .75rem;
      color: var(--danger);
      cursor: pointer;
      opacity: .5;
      padding: 4px;
      font-family: 'DM Sans', sans-serif;
      position: absolute;
      top: 4px;
      right: 4px;
      border-radius: 50%;
    }

    .cmt-adm-del:hover {
      opacity: 1
    }

    .cmt-form {
      display: flex;
      gap: 8px;
      margin-top: 4px
    }

    .cmt-form input {
      flex: 1;
      border: 1.5px solid var(--lp);
      border-radius: 50px;
      padding: 8px 14px;
      font-size: .82rem;
      font-family: 'DM Sans', sans-serif;
      color: var(--tx);
      background: var(--ow)
    }

    .cmt-form input:focus {
      outline: none;
      border-color: var(--p);
      background: white
    }

    .cmt-form button {
      background: var(--p);
      color: white;
      border: none;
      border-radius: 50px;
      padding: 8px 16px;
      font-size: .78rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      white-space: nowrap;
      transition: background .18s
    }

    .cmt-form button:hover {
      background: var(--pd)
    }

    .cmt-empty {
      font-size: .8rem;
      color: var(--tx2);
      text-align: center;
      padding: 10px 0
    }

    /* Confirm modal */
    .vot-confirm {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .65);
      z-index: 20000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px
    }

    .vot-confirm.on {
      display: flex
    }

    .vot-confirm-box {
      background: white;
      border-radius: 16px;
      padding: 28px 24px;
      max-width: 380px;
      width: 100%;
      text-align: center;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .3)
    }

    .vot-confirm-box h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.4rem;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--dk);
      margin-bottom: 6px
    }

    .vot-confirm-box p {
      font-size: .86rem;
      color: var(--tx);
      opacity: .7;
      margin-bottom: 20px;
      line-height: 1.6
    }

    .vot-confirm-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.1rem;
      font-weight: 900;
      color: var(--pd);
      background: var(--lp);
      border-radius: 8px;
      padding: 8px 16px;
      margin-bottom: 20px;
      display: inline-block
    }

    .vot-btn-row {
      display: flex;
      gap: 10px
    }

    .vot-btn-confirm {
      flex: 1;
      background: var(--p);
      color: white;
      border: none;
      border-radius: 9px;
      padding: 12px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .95rem;
      font-weight: 900;
      text-transform: uppercase;
      cursor: pointer
    }

    .vot-btn-confirm:hover {
      background: var(--pd)
    }

    .vot-btn-cancel {
      flex: 1;
      background: var(--lp);
      color: var(--tx);
      border: none;
      border-radius: 9px;
      padding: 12px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .95rem;
      font-weight: 900;
      text-transform: uppercase;
      cursor: pointer;
      opacity: .7
    }

    @media(max-width:768px) {
      .vot-grid {
        grid-template-columns: 1fr
      }

      .cand-photo {
        height: 200px
      }
    }

    /* ── TOAST NOTIFICATIONS ─────────────────────────────────── */
    #toast-container {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 99999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      pointer-events: none
    }

    .toast {
      background: #1a0942;
      color: white;
      padding: 13px 20px;
      border-radius: 50px;
      font-size: .87rem;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07);
      display: flex;
      align-items: center;
      gap: 9px;
      max-width: 340px;
      text-align: center;
      animation: toastIn .3s ease
    }

    .toast i {
      font-size: 1rem;
      flex-shrink: 0
    }

    .toast.success i {
      color: #4ade80
    }

    .toast.error i {
      color: #f87171
    }

    .toast.info i {
      color: #a78bfa
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes toastOut {
      from {
        opacity: 1;
        transform: translateY(0)
      }

      to {
        opacity: 0;
        transform: translateY(12px)
      }
    }

    /* Usado por modales y visor de historias (antes se referenciaba sin existir) */
    @keyframes foroFadeIn {
      from { opacity: 0; transform: translateY(6px) }
      to { opacity: 1; transform: translateY(0) }
    }

    /* ── Hojas modales ligeras (retos, evidencia, vincular, historias) ── */
    .sheet-head {
      padding: 18px 20px 0;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .sheet-title {
      font-size: .8rem;
      font-weight: 700;
      color: var(--pd);
      display: flex;
      align-items: center;
      gap: 7px
    }

    .sheet-x {
      background: rgba(117, 83, 232, .1);
      border: none;
      color: var(--tx);
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .15s, transform .12s
    }

    .sheet-x:hover {
      background: rgba(117, 83, 232, .2)
    }

    .sheet-x:active {
      transform: scale(.92)
    }

    .sheet-body {
      padding: 14px 20px 24px;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    /* Botón "cargar más" del foro */
    .load-more-btn {
      background: rgba(117, 83, 232, .09);
      color: var(--pd);
      border: 1.5px solid rgba(117, 83, 232, .2);
      border-radius: 50px;
      padding: 11px 28px;
      font-size: .82rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background .2s, transform .12s
    }

    .load-more-btn:hover {
      background: rgba(117, 83, 232, .16)
    }

    .load-more-btn:active {
      transform: scale(.97)
    }

    /* Filtros de la galería */
    .gal-filters {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap
    }

    .gal-filters select,
    .gal-filters input {
      padding: 10px 14px;
      border-radius: var(--r-s);
      border: 1.5px solid rgba(117, 83, 232, .18);
      font-family: 'DM Sans', sans-serif;
      background: white;
      color: var(--tx);
      font-size: .9rem;
      outline: none;
      cursor: pointer;
      flex: 1;
      min-width: 150px;
      transition: border-color .2s
    }

    .gal-filters select:focus,
    .gal-filters input:focus {
      border-color: var(--p)
    }

    .gal-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 8px
    }

    /* Enlace discreto (¿olvidaste tu contraseña?) */
    .link-quiet {
      background: none;
      border: none;
      color: var(--uw);
      font-family: 'Barlow', 'DM Sans', sans-serif;
      font-size: .85rem;
      font-weight: 600;
      cursor: pointer;
      margin-top: 16px;
      width: 100%;
      transition: color .15s
    }

    .link-quiet:hover {
      color: var(--uw-dark)
    }

    @media(max-width:768px) {
      #toast-container {
        bottom: 80px;
        width: 90%
      }

      .toast {
        width: 100%;
        border-radius: 12px;
        justify-content: flex-start
      }
    }

    /* ══ Configuración ═══════════════════════════════════════════════
       Los ajustes que estaban sueltos en el perfil. Filas altas y con
       descripción: se entran una vez cada meses y hay que poder decidir sin
       acordarse de qué hace cada una. */
    .cfg-sec {
      margin-bottom: 26px
    }

    .cfg-sec-tit {
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--tx2);
      opacity: .75;
      margin: 0 4px 10px
    }

    .cfg-dato {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 16px;
      border-radius: 14px;
      background: rgba(124, 58, 237, .05);
      margin-bottom: 8px
    }

    .cfg-dato span {
      font-size: .82rem;
      color: var(--tx2)
    }

    .cfg-dato b {
      font-size: .88rem;
      color: var(--tx);
      font-weight: 600;
      text-align: right;
      word-break: break-all
    }

    .cfg-op {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 14px 16px;
      border: 1.5px solid rgba(124, 58, 237, .14);
      background: var(--w);
      border-radius: 14px;
      text-align: left;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      color: var(--tx);
      margin-bottom: 8px;
      transition: border-color .18s ease, background .18s ease, transform .16s cubic-bezier(.23, 1, .32, 1)
    }

    .cfg-op:active {
      transform: scale(.985);
      background: rgba(124, 58, 237, .04)
    }

    .cfg-op:disabled {
      opacity: .5;
      cursor: not-allowed
    }

    .cfg-op > i:first-child {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(124, 58, 237, .1);
      color: var(--p);
      font-size: .95rem
    }

    .cfg-op span {
      flex: 1;
      min-width: 0;
      display: block
    }

    .cfg-op span b {
      display: block;
      font-size: .93rem;
      font-weight: 700;
      line-height: 1.3
    }

    .cfg-op span small {
      display: block;
      font-size: .78rem;
      color: var(--tx2);
      line-height: 1.45;
      margin-top: 2px
    }

    .cfg-flecha {
      flex-shrink: 0;
      font-size: .75rem;
      color: var(--tx2);
      opacity: .5
    }

    /* Cerrar sesión no es una opción más: se ve que es la que te saca */
    .cfg-op-out {
      border-color: rgba(220, 38, 38, .22)
    }

    .cfg-op-out > i:first-child {
      background: rgba(220, 38, 38, .1);
      color: var(--pk2, #dc2626)
    }

    .cfg-op-out span b {
      color: #dc2626
    }

    .cfg-pie {
      text-align: center;
      font-size: .74rem;
      color: var(--tx2);
      opacity: .5;
      padding: 10px 0 26px
    }