/* =========================================================
   SGC - BOTÓN VOLVER ARRIBA GOV.CO
   Compatible con SharePoint 2019 clásico

   Estados:
   - Default: botón circular 54 x 54 px
   - Hover: expansión a 118 px
   - Focus visible: mismo comportamiento del hover
   - Flecha centrada dentro del círculo blanco
   - Texto "Volver arriba" en dos líneas

   Basado en el componente Volver Arriba GOV.CO
   ========================================================= */


/* =========================================================
   VARIABLES GOV.CO
   ========================================================= */

:root {
    --sgc-govco-cobalt: #0943B5;
    --sgc-govco-white: #FFFFFF;
    --sgc-govco-havelock-blue: #4672C8;
    --sgc-govco-tropical-blue: #B5C7E9;
}


/* =========================================================
   ESTADO DEFAULT
   Círculo azul de 54 x 54 px
   ========================================================= */

html body button.volver-arriba-govco {

    position: relative !important;

    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;

    inline-size: 54px !important;
    min-inline-size: 54px !important;
    max-inline-size: 54px !important;

    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    border: 0 !important;
    border-radius: 50% !important;

    appearance: none !important;

    color: var(--sgc-govco-white) !important;

    background-color:
        var(--sgc-govco-cobalt) !important;

    box-shadow:
        4px 4px 6px
        var(--sgc-govco-tropical-blue) !important;

    overflow: hidden !important;

    cursor: pointer !important;

    text-align: center !important;

    transition:
        width 300ms ease,
        min-width 300ms ease,
        max-width 300ms ease,
        inline-size 300ms ease,
        padding 300ms ease,
        border-radius 300ms ease,
        background-color 300ms ease !important;
}


/* =========================================================
   CÍRCULO BLANCO INTERIOR
   36 x 36 px
   ========================================================= */

html body button.volver-arriba-govco::before {

    content: "" !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    display: block !important;

    flex: 0 0 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;

    background-color:
        var(--sgc-govco-white) !important;
}


/* =========================================================
   FLECHA GOV.CO
   DEFAULT
   ========================================================= */

html body button.volver-arriba-govco
span.govco-expand_circle_up {

    position: absolute !important;

    /*
       En estado circular, la flecha queda exactamente
       centrada respecto al botón y al círculo blanco.
    */
    left: 50% !important;
    top: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;

    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-block !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;

    /*
       Mantiene el azul GOV.CO cuando el SVG
       proviene del componente oficial.
    */
    filter:
        invert(21%)
        sepia(98%)
        saturate(1529%)
        hue-rotate(209deg)
        brightness(95%)
        contrast(118%) !important;

    pointer-events: none !important;
}


/* =========================================================
   HOVER / FOCUS VISIBLE
   Presentación compacta GOV.CO
   ========================================================= */

html body button.volver-arriba-govco:hover,
html body button.volver-arriba-govco:focus-visible {

    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;

    inline-size: 118px !important;
    min-inline-size: 118px !important;
    max-inline-size: 118px !important;

    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    padding:
        0 8px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;

    border-radius:
        27px 10px 10px 27px !important;

    background-color:
        var(--sgc-govco-havelock-blue) !important;

    overflow: hidden !important;

    text-align: left !important;
}


/* =========================================================
   CÍRCULO BLANCO
   HOVER / FOCUS
   ========================================================= */

html body button.volver-arriba-govco:hover::before,
html body button.volver-arriba-govco:focus-visible::before {

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    flex:
        0 0 36px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   FLECHA
   HOVER / FOCUS

   14 px corresponde a la posición que validamos
   desde consola y deja la flecha centrada sobre
   el círculo blanco de 36 px.
   ========================================================= */

html body button.volver-arriba-govco:hover
span.govco-expand_circle_up,

html body button.volver-arriba-govco:focus-visible
span.govco-expand_circle_up {

    position: absolute !important;

    left: 14px !important;
    top: 50% !important;

    transform:
        translateY(-50%) !important;

    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;

    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-position:
        center center !important;

    background-size:
        24px 24px !important;

    background-repeat:
        no-repeat !important;
}


/* =========================================================
   TEXTO "VOLVER ARRIBA"
   Se genera con ::after como en GOV.CO.
   Dos líneas para mantener la presentación compacta.
   ========================================================= */

html body button.volver-arriba-govco:hover::after,
html body button.volver-arriba-govco:focus-visible::after {

    content:
        "Volver\A arriba" !important;

    display: block !important;

    width: 58px !important;
    flex: 0 0 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        var(--sgc-govco-white) !important;

    font-family:
        Verdana,
        Arial,
        sans-serif !important;

    font-size:
        16px !important;

    font-weight:
        400 !important;

    line-height:
        1.1 !important;

    white-space:
        pre-line !important;

    text-align:
        left !important;

    overflow:
        visible !important;

    pointer-events:
        none !important;
}


/* =========================================================
   ACCESIBILIDAD - FOCUS
   ========================================================= */

html body button.volver-arriba-govco:focus-visible {

    outline:
        2px solid #000000 !important;

    outline-offset:
        3px !important;
}


/* =========================================================
   EVITAR ESTILOS INTERNOS DE SHAREPOINT
   ========================================================= */

html body button.volver-arriba-govco::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html body button.volver-arriba-govco {
        transition:
            none !important;
    }
}