/* =============================================================================
   SISTEMA TV+ — ICONOS FLOTANTES (esquina inferior derecha)
   -----------------------------------------------------------------------------
   Reparto de los iconos (tal como tiene que verse):

        LADO IZQUIERDO            LADO DERECHO
        [ Comunidad / chat ]      [ Cerebro ]      <- arriba (2º lugar)
             (su sitio)           [ Instalac. ]   <- abajo (1er lugar)

   Reglas de oro de este archivo:
     - NO se toca el boton de Comunidad: vive dentro de su contenedor (el chat)
       y ahi se queda, en su lado izquierdo de siempre.
     - Aqui SOLO se ordena la columna de la derecha: Instalacion abajo y el
       Cerebro justo encima. No se cambia el tamano, ni el color, ni el icono.
     - El Cerebro se puede arrastrar; al soltarlo vuelve solo a su sitio
       (eso lo hace index.php, no este archivo).
   ============================================================================= */

:root {
    /* Un "escalon" de la columna: alto del boton (56) + la separacion (18). */
    --icono-alto: 56px;
    --icono-sep: 18px;
    --icono-paso: calc(var(--icono-alto) + var(--icono-sep));
    /* Hueco que se deja respecto al borde de la pantalla. */
    --icono-borde: 24px;
    /* Alto que ocupa la barra/toast inferior del sistema (iPhone, etc.). */
    --icono-safe: env(safe-area-inset-bottom, 0px);
}

/* -----------------------------------------------------------------------------
   1er lugar (abajo del todo): INSTALACION. Se pega a la esquina.
   ----------------------------------------------------------------------------- */
#btnInstalacionWrap {
    position: fixed;
    right: var(--icono-borde);
    bottom: calc(var(--icono-borde) + var(--icono-safe));
    z-index: 91;
}

/* -----------------------------------------------------------------------------
   2º lugar (justo ENCIMA de Instalacion): CEREBRO.
   Tu pedido: "el cerebro debe volver a la posicion abajo, encima de los otros
   iconos". Aqui vive siempre; aunque se arrastre, vuelve a este punto.
   ----------------------------------------------------------------------------- */
#cerebroFab {
    position: fixed;
    right: var(--icono-borde);
    bottom: calc(var(--icono-borde) + var(--icono-paso) + var(--icono-safe));
    z-index: 96;
    width: var(--icono-alto);
    height: var(--icono-alto);
    border-radius: 9999px;
    border: 1px solid rgba(245, 196, 81, .55);
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 45%, #b45309 100%);
    box-shadow: 0 14px 34px rgba(180, 83, 9, .5), 0 0 18px rgba(245, 196, 81, .4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .15s ease, box-shadow .2s ease;
}

/* Mientras se arrastra, la transicion no debe pelear con el dedo/raton. */
#cerebroFab.cb-drag {
    transition: box-shadow .4s, border-color .4s;
}

/* -----------------------------------------------------------------------------
   ANIMACIONES
   Puramente visuales (transform / box-shadow). No cambian el tamano final de
   nada, asi que no pueden mover ni tapar el resto de la interfaz.
   Se apagan solas si el usuario tiene activado "reducir movimiento".
   ----------------------------------------------------------------------------- */

/* Flotado suave del icono de Instalacion (el Cerebro tiene el suyo propio). */
@keyframes icoFlota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

#btnInstalacionWrap {
    animation: icoFlota 6.4s ease-in-out .8s infinite;
}

/* Al pasar el raton, el flotado se detiene y el boton responde al instante
   (asi el hover no "tiembla" por culpa de la animacion). */
#btnInstalacionWrap:hover {
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.06);
}
#btnInstalacionWrap:hover #btnInstalacionFlotante {
    animation-play-state: paused;
    transform: scale(1.06);
}

/* Anillo pulsante de bienvenida: aparece una sola vez, cuando termina de cargar
   la app, y se retira solo. No se repite (para no distraer). */
@keyframes icoSaludo {
    0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, .55); }
    70%  { box-shadow: 0 0 0 16px rgba(139, 92, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
.ico-saludo {
    animation: icoSaludo 1.15s ease-out 2;
}

/* El Cerebro ya trae su propio resplandor pulsante (#cerebroFab .crbPulso).
   Aqui solo se le da un latido muy leve al boton completo para que la columna
   no se vea "muerta" cuando no hay avisos. Nada mas. */
@keyframes icoLatido {
    0%, 100% { box-shadow: 0 14px 34px rgba(180, 83, 9, .5), 0 0 18px rgba(245, 196, 81, .4); }
    50%      { box-shadow: 0 14px 34px rgba(180, 83, 9, .55), 0 0 26px rgba(245, 196, 81, .62); }
}
#cerebroFab.crbE-reposo {
    animation: icoLatido 3.4s ease-in-out infinite;
}
/* Cuando el Cerebro esta alerta, hablando o contento manda SU animacion. */
#cerebroFab.crbE-alerta,
#cerebroFab.crbE-hablando,
#cerebroFab.crbE-contento,
#cerebroFab.cb-drag {
    animation: none;
}

/* -----------------------------------------------------------------------------
   MOVIL: la columna se pega un poco mas al borde para no comerse la pantalla.
   ----------------------------------------------------------------------------- */
@media (max-width: 520px) {
    :root {
        --icono-borde: 16px;
        --icono-sep: 14px;
    }
}

/* -----------------------------------------------------------------------------
   ACCESIBILIDAD: si el sistema pide menos movimiento, se apaga todo.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #btnInstalacionWrap,
    #cerebroFab.crbE-reposo,
    .ico-saludo {
        animation: none !important;
    }
}

/* =============================================================================
   NOTA IMPORTANTE (22 oct 2026)
   -----------------------------------------------------------------------------
   Aqui NO se usa "contain: layout" ni "position: fixed" sobre el boton de
   Comunidad: eso fue lo que desordeno los iconos (se movio el chat y el
   Cerebro quedo fuera de su sitio). El chat se queda en su lado izquierdo
   como siempre; esta hoja solo ordena la columna derecha.
   ============================================================================= */