@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

/* ---------------------------------------------------
    ESTILOS BASE DE CABECERA Y ESTRUCTURA GENERAL
----------------------------------------------------- */
body {
    font-family: 'Montserrat', 'Poppins', sans-serif;
    background: #2c345b;
}

#page_title {
    line-height: 0.85;
    padding: 5px !important;
}

header {
    background: url(img/flag.png);
    background-position: 0 100%;
    background-size: 80px;
    background-repeat: no-repeat;
}

.ec-flag::before {
    content: "";
    display: inline-block;
    background-size: 5px 85px;
    width: 5px;
    height: 85px;
    background: linear-gradient(180deg, #ffbb00 0%, #ffbb00 50%, #16255e 50%, #16255e 75%, #f42408 75%);
}

.ec-flag-58::before {
    height: 58px !important;
}

.container {
    max-width: 1500px;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
    padding: 0 !important;
    margin: 0 !important;
}

b {
    padding-left: 10px;
}

a {
    transition: all 0.3s ease;
}

a:hover, 
a.active {
    font-weight: bold;
}

a:hover div p {
    color: #1b9fff !important;
}

img {
    max-width: 100%;
    height: auto;
}

.title-responsive {
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 700;
}

/* ---------------------------------------------------
    TABLAS Y PAGINACIÓN
----------------------------------------------------- */
.paginate_button {
    padding: 10px 15px;
    color: #0d6efd;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    margin-left: -1px;
    cursor: pointer;
}

.paginate_button.current {
    background-color: #0d6efd;
    color: #fff;
}

/* ---------------------------------------------------
    ÍCONOS Y NAVEGACIÓN
----------------------------------------------------- */
.fa {
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none !important;
    margin: 5px 2px;
    color: white;
    transition: 0.5s ease;
}

.fa:hover { opacity: 0.7; }
.fa-facebook:hover { color: #007cf0; }
.fa-twitter:hover { color: #1b9fff; }
.fa-instagram:hover { color: #db2a5c; }

.nav-link { color: black; }
#inst_name { max-width: 300px; color: white; font-weight: bold; }
#logo_sngre { max-width: 248px; padding-left: 0px; }
.link_title { font-weight: bold; color: #ff7f2c; transition: 0.5s ease; }
#links_institutos a { color: white; font-weight: bold; }

/* ---------------------------------------------------
    TARJETAS DE FONDO DINÁMICAS (CARDS)
----------------------------------------------------- */
.card #div_sismo { background: url(img/sismo_tsunami_f.png) center/cover; transition: 2s ease; }
.card #div_sismo img { content: url(img/sismo_tsunami_b.png); transition: 2s ease; opacity: 0.5; }

.card #div_oleaje { background: url(img/oleaje_f.png) center/cover; transition: 2s ease; }
.card #div_oleaje img { content: url(img/oleaje_b.png); transition: 2s ease; opacity: 0.5; }

.card #div_precipitaciones { background: url(img/LLUVIAS.jpeg) center/cover; transition: 2s ease; }
.card #div_precipitaciones img { content: url(img/precipitaciones_b.png); transition: 2s ease; opacity: 0.5; }

.card #div_movimiento_masa { background: url(img/movimiento_masa_f.png) center/cover; transition: 2s ease; }
.card #div_movimiento_masa img { content: url(img/movimiento_masa_b.png); transition: 2s ease; opacity: 0.5; }

.card #div_vias { background: url(img/vias_f.png) center/cover; transition: 2s ease; }
.card #div_vias img { content: url(img/vias_b.png); transition: 2s ease; opacity: 0.5; }

.card #div_fenomeno_el_nino { background: url(img/fenomeno_el_nino_f.png) center/cover; transition: 2s ease; }
.card #div_fenomeno_el_nino img { content: url(img/fenomeno_el_nino_b.png); transition: 2s ease; opacity: 0.5; }

.card #div_epoca_lluviosa { background: url(img/epoca_lluviosa_f.png) center/cover; transition: 2s ease; }
.card #div_epoca_lluviosa img { content: url(img/epoca_lluviosa_b.png); transition: 2s ease; opacity: 0.5; }

.card #div_volcanes { background: url(img/volcanes_f.png) center/cover; transition: 2s ease; }
.card #div_volcanes img { content: url(img/volcanes_b.png); transition: 2s ease; opacity: 0.5; }

.card #div_incendio { background: url(img/incendio_f.png) center/cover; transition: 2s ease; }
.card #div_incendio img { content: url(img/incendio_b.png); transition: 2s ease; opacity: 0.5; }

.card #div_tiempo { background: url(img/tiempo_f.png) center/cover; transition: 2s ease; }
.card #div_tiempo img { content: url(img/tiempo_b.png); transition: 2s ease; opacity: 0.5; }

.card-body:has(> .link_title) { height: 100px; }

/* ---------------------------------------------------
    ESTRUCTURA Y CONTENEDOR PRINCIPAL
----------------------------------------------------- */
.wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
}

#content {
    width: 100%;
    transition: all 0.3s;
}

@media (min-width: 768px) {
    .wrapper {
        flex-direction: row;
        align-items: flex-start;
    }
    #content {
        flex-grow: 1;
        min-width: 0;
    }
}

/* ---------------------------------------------------
    MENÚ LATERAL (NAVBAR PRIMARY)
----------------------------------------------------- */
.navbar-primary {
    background-color: #2c345b;
    z-index: 10;
    transition: all 0.3s ease-in-out;
    width: 100%;
    overflow: hidden;
}

.btn-expand-collapse {
    display: block;
    padding: 12px;
    border-bottom: 1px solid #3d4779;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    background-color: #202a5d;
    text-decoration: none;
    cursor: pointer;
}

.btn-expand-collapse:hover {
    background-color: #161d42;
    color: #fff;
}

.navbar-primary-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar-primary-menu li a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #3d4779;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 0.95rem;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    transition: background-color 0.2s ease;
}

.navbar-primary-menu li a i {
    width: 25px;
    text-align: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.navbar-primary-menu li a .nav-label {
    margin-left: 10px;
    transition: opacity 0.2s ease;
}

.navbar-primary-menu li a:hover {
    background-color: #4a5695;
    color: #ffffff;
}

/* --- Comportamiento Móvil (< 768px) --- */
@media (max-width: 767.98px) {
    #nav_alertas {
        position: sticky;
        top: 0;
        z-index: 1020;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .navbar-primary.collapsed .navbar-primary-menu {
        display: none;
    }

    nav.navbar-primary {
        font-size: 14px;
    }

    #tabla_sismos, 
    #reporte_tsunami, 
    #mapa_evacuacion, 
    #recomendaciones {
        scroll-margin-top: 60px;
    }

    #inst_name { max-width: 100%; }

    div #page_title {
        text-align: center;
        max-width: 400px;
        margin: auto !important;
    }
}

@media only screen and (min-width: 469px) and (max-width: 768px) {
    .ec-flag::before { height: 58px !important; }
}

/* --- Comportamiento Escritorio (≥ 768px) --- */
@media (min-width: 768px) {
    #nav_alertas {
        width: 240px;
        flex-shrink: 0;
        position: sticky;
        top: 15px;
        max-height: calc(100vh - 30px);
        overflow-y: auto;
    }

    #nav_alertas.collapsed { width: 60px !important; }
    #nav_alertas.collapsed .nav-label { display: none !important; }
    #nav_alertas.collapsed .navbar-primary-menu li a {
        justify-content: center;
        padding: 12px 0;
    }
    #nav_alertas.collapsed .navbar-primary-menu li a i { margin: 0; }
}

/* ---------------------------------------------------
    ACORDEÓN Y CARDS
----------------------------------------------------- */
.card-header {
    padding: 0;
    cursor: pointer;
    user-select: none;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.card-header .card-title-text {
    padding: 1rem;
    margin: 0;
    color: #007bff;
    font-weight: bold;
}

.card-header:hover .card-title-text {
    color: #0056b3;
    text-decoration: underline;
}

.card-body {
    font-size: 14px !important;
}

.faq-section .mb-0 > a {
    display: block;
    position: relative;
}

.faq-section .mb-0 > a:after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 600;
}

.faq-section .mb-0 > a[aria-expanded="true"]:after {
    content: "-";
    font-weight: 600;
}

/* ---------------------------------------------------
    ANIMACIONES E IFRAMES
----------------------------------------------------- */
.img_suscri {
    animation-name: bounce-7;
    align-self: flex-end;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
}

@keyframes bounce-7 {
    0%   { transform: scale(1,1) translateY(0); }
    10%  { transform: scale(1.01,.99) translateY(0); }
    30%  { transform: scale(.99,1.01) translateY(-0.5px); }
    50%  { transform: scale(1.01,.99) translateY(0); }
    57%  { transform: scale(1,1) translateY(-0.5px); }
    64%  { transform: scale(1,1) translateY(0); }
    100% { transform: scale(1,1) translateY(0); }
}

.iframe-container { width: 100%; overflow: hidden; }
.iframe-sismos { height: 60vh; min-height: 450px; }
.iframe-tsunami { height: 75vh; min-height: 500px; }
.iframe-mapa { height: 70vh; min-height: 400px; }

/* ---------------------------------------------------
    BOTÓN "IR ARRIBA"
----------------------------------------------------- */
.ir-arriba_ {
    font-size: 20px;
    cursor: pointer;
    z-index: 8;
    bottom: 0px;
    display: block;
    height: 20%;
    position: fixed;
    right: 30px;
    width: 7%;
}

@media (max-width: 939px) { a.ir-arriba_ { width: 14%; } }
@media (max-width: 820px) { a.ir-arriba_ { width: 10%; } }
@media (max-width: 540px) { a.ir-arriba_ { width: 14%; } }
@media (max-width: 414px) { a.ir-arriba_ { width: 19%; } }
@media (max-width: 375px) { a.ir-arriba_ { width: 21%; } }
@media (max-width: 280px) { a.ir-arriba_ { width: 29%; } }