/* ==========================================================
   VOLVER.CSS — Boton "Volver" global.

   Lo pinta Views/Shared/_BotonVolver.cshtml (via _Layout en todas las vistas,
   y a mano en las pantallas con Layout = null).

   Es una franja blanca pegada al contenido: esquinas redondeadas arriba y una
   linea divisoria abajo, de modo que la barra y la tarjeta de la vista se lean
   como una sola pieza.

   Las vistas cuyo contenido no arranca al ancho de la columna tienen que calzar
   la barra con su tarjeta; el caso de los menus (Reportes, Estadisticas) esta
   resuelto al final de StyleMenus.css.

   Va en su propio archivo, y no en shared.css, porque las pantallas de
   Genealogia corren sin layout: cargan solo este CSS y no heredan ni tokens.css
   ni el font-size:62.5% de site.css. Por eso aca todo va en px y cada color
   lleva su valor de respaldo.
   ========================================================== */

.gn-volver-bar {
    display: flex;
    /* Se estira al ancho de la columna, pero NO lo impone: main.container es un
       flex en columna con align-content:center, y un width:100% aca ensanchaba
       la columna y descentraba el contenido de la vista. */
    align-self: stretch;
    /* Hay vistas cuyo contenido va "a sangre" (width:100vw, como Analisis
       Genetico de Toros). Sin este tope la barra se estira a ese ancho y se sale
       del contenedor por los dos lados. */
    max-width: 100%;
    padding: 10px 16px;
    background: var(--gn-white, #FFFFFF);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--gn-gray-divider, #e9ecef);
}

/* Pantallas sin layout: el contenido va de borde a borde, la barra tambien. */
.gn-volver-bar--suelta {
    border-radius: 0;
}

.gn-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gn-navy, #1D3D6F);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: color .2s ease;
}

    .gn-volver:hover,
    .gn-volver:focus-visible {
        color: var(--gn-blue, #436AB3);
        text-decoration: underline;
    }

    .gn-volver i {
        font-size: 12px;
    }

@media (max-width: 1024px) {
    /* Movil: area tactil mas comoda. */
    .gn-volver-bar {
        padding: 13px 16px;
    }

    .gn-volver {
        font-size: 14px;
    }

        .gn-volver i {
            font-size: 13px;
        }

    /* Con el layout oculto no hay header que estorbe: la franja se queda pegada
       arriba mientras se hace scroll, y se corre a la derecha para no chocar
       con el boton flotante de mostrar/ocultar barra (arriba a la izquierda). */
    html.chrome-hidden .gn-volver-bar {
        position: sticky;
        top: 0;
        z-index: 900;
        padding-left: 46px;
    }
}

@media print {
    .gn-volver-bar {
        display: none !important;
    }
}