/* ============================================================
   Insor Toggle Extras — extiende el Toggle Panels de Salient
   - Barra del color elegido SIEMPRE (abierta y cerrada)  -> .insor-tg-colored
   - Icono SVG a la derecha del texto                     -> .insor-tg-icon
   - GIF flotante al hacer hover sobre la barra            -> .insor-tg-gif (lo
     mueve al <body> el JS y se posiciona con position:fixed)
   Solo afecta a los toggles marcados con .insor-toggle-custom;
   los demás conservan el estilo nativo de Salient.
   ============================================================ */

/* ============================================================
   1. COLOR de la barra (solo si se eligió color): SIEMPRE,
      abierta o cerrada, sobreescribiendo el estado nativo.
   ============================================================ */
.toggles .toggle.insor-toggle-custom.insor-tg-colored > .toggle-title a,
.toggles .toggle.insor-toggle-custom.insor-tg-colored.open > .toggle-title a,
.toggles .toggle.insor-toggle-custom.insor-tg-colored > h3 a {
    background-color: var(--insor-tg-bg, #253786) !important;
    color: var(--insor-tg-fg, #ffffff) !important;
    font-weight: 700;
}

/* Indicador +/- nativo hereda el color de texto elegido */
.toggles .toggle.insor-toggle-custom.insor-tg-colored > .toggle-title a i,
.toggles .toggle.insor-toggle-custom.insor-tg-colored > h3 a i {
    color: var(--insor-tg-fg, #ffffff) !important;
}

/* Realce sutil al pasar el cursor (sustituye el hover gris nativo) */
.toggles .toggle.insor-toggle-custom.insor-tg-colored > .toggle-title a:hover {
    filter: brightness(0.93);
}

/* Estilo "minimal" (fondo transparente nativo): forzar también el color */
div[data-style*="minimal"] .toggle.insor-toggle-custom.insor-tg-colored > .toggle-title a {
    background-color: var(--insor-tg-bg, #253786) !important;
}

/* ============================================================
   2. ICONO SVG a la derecha del texto.
      Hereda el color del texto de la barra (currentColor),
      así funciona tanto con barra coloreada como nativa.
   ============================================================ */
.toggle.insor-toggle-custom > .toggle-title {
    position: relative;
}

.toggle.insor-toggle-custom > .toggle-title a {
    padding-right: 50px; /* espacio para el icono a la derecha */
}

.toggle.insor-toggle-custom .insor-tg-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    pointer-events: none;
    z-index: 11;
    margin-left: 13px;
}

.toggle.insor-toggle-custom .insor-tg-icon .insor-tg-svg,
.toggle.insor-toggle-custom .insor-tg-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Red de seguridad si el SVG conservó colores fijos */
.toggle.insor-toggle-custom .insor-tg-icon svg [fill]:not([fill="none"]) {
    fill: currentColor;
}
.toggle.insor-toggle-custom .insor-tg-icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
}

/* En estilos "minimal" el indicador +/- nativo va a la derecha;
   desplazamos el SVG para que no choque con él. */
div[data-style*="minimal"] .toggle.insor-toggle-custom .insor-tg-icon {
    right: 44px;
}
div[data-style*="minimal"] .toggle.insor-toggle-custom > .toggle-title a {
    padding-right: 80px;
}

/* ============================================================
   3. POPUP del GIF (hover).
      El JS lo mueve a <body> y lo posiciona con position:fixed,
      por eso se estiliza por su propia clase (ya no cuelga del
      .toggle) y NINGÚN overflow/transform de Salient lo recorta.
      Mismo lenguaje visual que el visor LSC del tema (títulos del
      home): borde magenta, esquinas redondeadas y sello "LSC".
   ============================================================ */
.insor-tg-gif {
    position: fixed;
    left: 0;
    top: 0;
    width: 220px;
    height: 220px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 3px solid #a2238f;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.9);
    transition: opacity .18s ease, transform .18s cubic-bezier(.21, 1, .32, 1);
    z-index: 100000;
}

.insor-tg-gif.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Capa del GIF: imagen de fondo que llena el visor. */
.insor-tg-gif__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Sello "LSC" en la esquina, como en el visor del home. */
.insor-tg-gif::after {
    content: "LSC";
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(162, 35, 143, .92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.6;
    z-index: 2;
}

@media (max-width: 690px) {
    .insor-tg-gif {
        width: 170px;
        height: 170px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .insor-tg-gif {
        transition: none;
    }
}