/* ============================================================================
   MSC GO - Grillas de modulos y encabezado del Home
   ----------------------------------------------------------------------------
   Las vistas Index* del portal repiten esta misma estructura:

       .row > .col-lg-8.col-lg-offset-2.go-grid-col
            > .content-background > .container > .row > .buttonHole > .gridButton

   Cada vista ademas trae su propio bloque <style> duplicado con los estilos de
   .gridButton, .buttonHole y #txtDiv. Ese bloque se renderiza en el body, o sea
   DESPUES de esta hoja, por lo que aqui las reglas van prefijadas con
   .go-grid-col para ganar en especificidad sin tener que editar vista por vista.

   El aspecto de la caja (alto, tipografia, iconos) NO se toca aqui a proposito:
   se conserva tal cual estaba con tres modulos por fila. Lo unico que cambia es
   cuantas caben por fila y el ancho del area que las contiene.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. Alto reservado para la barra superior fija
   ----------------------------------------------------------------------------
   Site.css reserva 50px de padding-top en el body, que es el alto por defecto de
   una barra fija de Bootstrap. La barra del GO es mas alta: el logo mide 48px y
   lleva 14px de padding arriba, o sea 62px. Esos 12px de diferencia quedaban
   tapados por la barra, y como en el Home lo primero de la pagina es el banner,
   le cortaba la franja de arriba y le partia el titulo por la mitad.

   Antes no se notaba porque habia un <br> sobrante despues del banner que hacia
   de colchon; al sacarlo para acercar la grilla, el recorte quedo a la vista.

   En lugar de estimar cuanto ocupa el contenido de la barra, se le fija el alto y
   se reserva ese mismo valor. El logo pasa a bloque porque como imagen en linea
   sumaba el hueco del descendente de la linea base y estiraba la barra unos pixeles
   mas alla de los 62px.
   ---------------------------------------------------------------------------- */
body {
    padding-top: 62px;
}

.navbar-fixed-top {
    min-height: 62px;
}

.navbar-fixed-top .navbar-header img {
    display: block;
}

/* ----------------------------------------------------------------------------
   1. Contenedor
   Solo 3 de las 59 portadas envuelven la grilla en un .container anidado; las
   otras 56 cuelgan la fila directo de .content-background. Por eso NINGUNA
   regla de esta hoja puede apoyarse en ese elemento: si lo hace, funciona en
   tres pantallas y falla en cincuenta y seis.

   Donde si existe, el .container trae los anchos fijos de Bootstrap (hasta
   1170px) dentro de una columna mas angosta, lo que sacaba la grilla de su
   caja. Se vuelve fluido para que las dos variantes se comporten igual.
   ---------------------------------------------------------------------------- */
.go-grid-col .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ----------------------------------------------------------------------------
   2. Ancho del area de grilla
   ----------------------------------------------------------------------------
   Bootstrap encierra la grilla en col-lg-8 centrada, o sea 66,67% del ancho.
   Ese encuadre venia de cuando no existia la barra de accesos rapidos y las
   cajas eran tres. Hoy la barra ya se lleva 280px fijos, y encima quedarse con
   dos tercios de lo que sobra dejaba las cajas tan angostas que la grilla
   terminaba cayendo a tres, dos o incluso una por fila.

   La grilla pasa a ocupar todo el ancho disponible. Con eso, cuatro cajas al
   25% miden practicamente lo mismo que median tres en el diseno original.
   ---------------------------------------------------------------------------- */
.row > .go-grid-col {
    width: 100%;
    margin-left: 0;
}

/* ----------------------------------------------------------------------------
   3. Modulos por fila
   ----------------------------------------------------------------------------
   Los cortes estan corridos 280px respecto de los habituales porque ese es el
   ancho de la barra de accesos rapidos: lo que importa no es cuanto mide la
   ventana sino cuanto queda para el contenido. Cada corte deja las cajas por
   sobre los ~230px, que es el minimo para que el icono y el titulo entren sin
   apretarse.

   Va con media queries y no con @container a proposito: una consulta de
   contenedor necesita un elemento contenedor, y aca no hay ninguno que exista
   en las 59 portadas.
   ---------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .go-grid-col .buttonHole {
        width: 25%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .go-grid-col .buttonHole {
        width: 33.33333333%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .go-grid-col .buttonHole {
        width: 50%;
    }
}

@media (max-width: 767px) {
    .go-grid-col .buttonHole {
        width: 100%;
    }
}

/* ----------------------------------------------------------------------------
   4. Encabezado del Home
   El titulo y el buscador se envuelven en la misma columna que la grilla para
   que arranquen en el borde izquierdo de la primera caja y terminen en el borde
   derecho de la ultima.

   La grilla ademas va dentro de .content-background, que aporta un padding de
   1.875rem. El encabezado no pasa por ese contenedor, asi que ese mismo padding
   se replica aqui; si no, el titulo queda 30px mas a la izquierda que las cajas.
   ---------------------------------------------------------------------------- */
.home-header .go-grid-col .container {
    width: 100%;
    max-width: none;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
}

/* ----------------------------------------------------------------------------
   5. Guia de navegacion y titulo de pagina
   ----------------------------------------------------------------------------
   Hasta ahora la guia y el titulo iban como texto blanco superpuesto al banner:
   Bootstrap posiciona .carousel-caption en absoluto sobre la imagen, y el banner
   se oscurecia con un velo negro (.carousel-item:before) para que se leyeran.

   Ahora que el banner pasa a ser un canal informativo con mantenedor, no debe
   llevar nada encima. Sacando el caption del posicionamiento absoluto, el mismo
   marcado que ya existe en las 652 vistas cae debajo del banner, sobre fondo
   blanco, sin tener que editar ninguna.
   ---------------------------------------------------------------------------- */

/* El banner queda limpio: sin velo oscuro y con su alto propio */
.carousel-item {
    height: auto;
}

.carousel-item:before {
    display: none;
}

/* Los dos tipos de banner se tratan distinto porque cumplen funciones distintas.

   El del Home es canal informativo con mantenedor: lleva texto, logos y capturas,
   asi que no puede recortarse ni un pixel. Se muestra completo y el alto lo
   calcula el navegador desde su propia proporcion. Viene en 3200x475, la medida
   entregada a diseno, asi que queda en la franja baja que se espera.

   Los internos son fotografias decorativas, sin texto encima desde que la guia y
   el titulo bajaron al flujo normal. Ahi el recorte no molesta y conviene acotar
   el alto: al dejarlos escalar proporcionales quedaban enormes, porque son fotos
   en proporcion 5:1 y no 6,7:1 (456px de alto en una pantalla de 2560px). Se
   mantienen entonces con el alto acotado y recorte centrado con que venian.

   El alto va sobre la imagen y no sobre .carousel-item como estaba en
   CustomMSC_V3.css, porque ese contenedor ahora tiene que crecer para alojar la
   guia y el titulo que quedaron debajo de la foto. */
.home-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

.carousel-item img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .carousel-item img {
        height: 175px;
    }
}

/* La guia y el titulo bajan al flujo normal, en oscuro sobre blanco */
.carousel-caption {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    text-align: left;
    color: #1a1a1a;
    text-shadow: none;
    padding-top: 18px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.carousel-caption a,
.carousel-caption #aletra {
    color: #6b6b6b;
    font-size: 14px;
}

.carousel-caption a:hover {
    color: #1a1a1a;
    text-decoration: underline;
}

.carousel-caption h1 {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 34px;
    margin: 6px 0 0;
}

@media (max-width: 768px) {
    .carousel-caption h1 {
        font-size: 26px !important;
    }
}

/* La descripcion se retira del encabezado. Se oculta en vez de borrarse de las
   157 vistas que la traen, porque muchas contienen codigo Razor y el borrado
   masivo seria destructivo; asi el cambio es reversible.
   Las que si deben mostrarse (datos bancarios, identificacion del cliente) se
   marcan explicitamente con .dato-necesario. */
.carousel-caption p {
    display: none;
}

.carousel-caption p.dato-necesario {
    display: block;
    font-size: 15px;
    margin-top: 10px;
}

/* Alineacion del encabezado. Hay dos casos distintos:

   a) Paginas normales (formularios, grillas de datos): el contenido de abajo va
      dentro de una columna Bootstrap con 15px de padding, asi que el titulo se
      alinea con ese mismo borde. Es el comportamiento por defecto.

   b) Portadas de modulo (Index*): debajo va la grilla de cajas, que arranca mas
      adentro. Esas vistas marcan su caption con .go-caption-grid y el titulo se
      corre 45px para calzar con el borde izquierdo de la primera caja: 15px de
      la columna mas 30px del borde de .content-background.

   Sin media query: la grilla ahora ocupa todo el ancho en cualquier pantalla,
   asi que el desfase es siempre el mismo. */
.carousel-caption.go-caption-grid {
    padding-left: 45px;
    padding-right: 45px;
    /* Ver seccion 7: el espacio bajo el titulo lo aporta la tarjeta blanca */
    padding-bottom: 0;
}

/* ----------------------------------------------------------------------------
   7. Distancia entre el titulo de la pagina y la primera caja
   ----------------------------------------------------------------------------
   En el Home quedo en 20px. Las portadas de modulo sumaban 70px repartidos en
   cuatro capas que se iban acumulando sin que ninguna se viera grande por si
   sola: 10px bajo el titulo, 20px de margen de la columna, 30px del borde de la
   tarjeta blanca y 10px del margen de la caja.

   El margen de la columna va escrito a mano en el atributo style de 55 vistas,
   y un estilo en linea solo se puede vencer con !important. Se anula desde aca
   en vez de editar las 55, que es donde estaria el riesgo real de romper algo.
   ---------------------------------------------------------------------------- */
.row > .go-grid-col {
    margin-top: 0 !important;
}

.go-grid-col .content-background.top {
    padding-top: 10px;
}

/* Franja vacia entre el banner y el contenido.
   428 vistas traen un <br> suelto justo despues del bloque del banner, herencia
   de cuando el titulo iba encima de la imagen. Ahora que el titulo bajo al flujo
   normal ese salto solo agrega una banda vacia de unos 21px que empuja todo
   hacia abajo. Se oculta desde aqui en vez de editar las 428 vistas: el cambio
   es reversible y no toca marcado con codigo Razor. */
.carousel + br,
.row:has(> .carousel) + br {
    display: none;
}

/* ----------------------------------------------------------------------------
   6. Red de seguridad contra desbordes
   Evita que una tabla ancha o un texto largo empujen el ancho de la pagina y
   aparezca scroll horizontal en pantallas chicas.
   ---------------------------------------------------------------------------- */
.body-content {
    overflow-x: hidden;
}

.go-grid-col img {
    max-width: 100%;
}


/* ----------------------------------------------------------------------------
   8. Tipografia del titulo de la caja
   ----------------------------------------------------------------------------
   El tamano depende del ancho de LA CAJA, no del de la ventana. Una media query
   no sirve aca: en pantalla angosta la grilla pasa a una sola columna y la caja
   queda ancha, asi que achicar por ancho de ventana la dejaba con letra chica
   sin necesidad. Al reves, en un notebook con tres o cuatro columnas la ventana
   es grande pero cada caja es estrecha y ahi si hace falta achicar.

   Por eso cada caja se declara como contenedor y la regla se evalua contra su
   propio ancho. Si el navegador no soporta @container, simplemente no se aplica
   y el titulo queda en su tamano original, que es el comportamiento historico.
   ---------------------------------------------------------------------------- */
.go-grid-col .buttonHole {
    container: caja / inline-size;
}

@container caja (max-width: 285px) {
    .go-grid-col .gridButton a h3 {
        font-size: 18px;
        line-height: 1.2;
    }

    /* Los 35px de margen lateral por defecto le quitan demasiado ancho util
       al titulo cuando la caja es estrecha */
    .go-grid-col .gridButton #txtDiv {
        margin-left: 12px;
        margin-right: 12px;
    }
}

@container caja (max-width: 215px) {
    .go-grid-col .gridButton a h3 {
        font-size: 16px;
    }

    .go-grid-col .gridButton #txtDiv {
        margin-left: 8px;
        margin-right: 8px;
    }
}