/* Reparación visual SENAMHI - evita imágenes gigantes y recupera estructura del portal */
:root{
    --senamhi-verde:#424b40;
    --senamhi-verde-oscuro:#30372e;
    --senamhi-azul-menu:#83aee8;
    --senamhi-texto:#25313b;
}

html, body{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
    font-family:'Montserrat', Arial, Helvetica, sans-serif;
    color:var(--senamhi-texto);
}

body img{max-width:100%;height:auto;}
a{text-decoration:none;}

/* Barra superior gob.bo */
#marca-gobbo{background:#fff;position:relative;z-index:1100;}
#marca-gobbo img{width:auto!important;max-height:26px!important;object-fit:contain;display:inline-block;}
#theme-toggle{line-height:1;border:0;background:transparent;color:#0f172a;}

/* Cabecera y banner */
#head{background:#fff;position:relative;z-index:1000;margin-bottom:1.25rem;}
#cabecera{background:#fff;}
#cabecera .container{max-width:1140px;}
#banner-slider{
    position:relative!important;
    width:100%!important;
    height:clamp(155px, 21vw, 280px)!important;
    overflow:hidden!important;
    background:#fff!important;
    display:block!important;
}
#banner-slider .banner-img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    opacity:0;
    visibility:hidden;
    transition:opacity .45s ease-in-out, visibility .45s ease-in-out;
}
#banner-slider .banner-img.active{opacity:1;visibility:visible;z-index:1;}
.linea-cabecera{height:4px;background:linear-gradient(90deg,#d52b1e 0 33%,#f9df00 33% 66%,#007934 66% 100%);}

/* Menú principal */
#main-menu{background:var(--senamhi-azul-menu);position:relative;z-index:1050;}
#main-menu .navbar{padding:0;min-height:44px;}
#main-menu .navbar-nav{align-items:center;}
#main-menu .nav-link{
    color:#1f2937!important;
    font-weight:600;
    font-size:.94rem;
    padding:.72rem .72rem!important;
    white-space:nowrap;
}
#main-menu .nav-link:hover,
#main-menu .nav-link.activo{background:rgba(255,255,255,.26);color:#111827!important;}
#main-menu .dropdown-menu{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:0 0 8px 8px;
    box-shadow:0 10px 22px rgba(15,23,42,.16);
    padding:.35rem;
    min-width:245px;
}
#main-menu .dropdown-item{color:#1f2937!important;font-size:.9rem;border-radius:6px;padding:.55rem .75rem;white-space:normal;}
#main-menu .dropdown-item:hover{background:#edf4ff;color:#111827!important;}

/* Contenido principal */
main>.container{max-width:1140px;margin-left:auto;margin-right:auto;}
#divider{display:flex;align-items:center;gap:.75rem;width:100%;}
#divider hr{flex:1;border:0;border-top:1px solid #3f454b;opacity:1;margin:0;}
#divider h4{margin:0;font-weight:800;color:var(--senamhi-texto);}

/* Pronósticos: mapa, íconos y termómetros no deben usar tamaño natural */
.pron-fondo{
    min-height:360px;
    background:#f6f8fa;
    border-radius:14px;
    padding:1rem;
    overflow:hidden;
}
#mapa_pronostico{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:320px;
    overflow:hidden;
}
#mapa_pronostico img,
#mapa_pronostico svg,
#mapa_pronostico canvas{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:520px!important;
    object-fit:contain!important;
}
.pronostico-estacion{font-weight:500;margin-bottom:.75rem;}
#contenedor-franjas{overflow:hidden;}
#contenedor-franjas .row,
#contenedor-franjas [class*="row"]{align-items:center;}
#contenedor-franjas img,
#contenedor-franjas svg,
#contenedor-franjas canvas{
    width:auto!important;
    height:auto!important;
    max-width:96px!important;
    max-height:96px!important;
    object-fit:contain!important;
}
#contenedor-franjas .col,
#contenedor-franjas [class*="col-"]{min-width:0;}
#cards-diario img,
#cards-extendido1 img,
#cards-diario svg,
#cards-extendido1 svg{
    width:auto!important;
    height:auto!important;
    max-width:84px!important;
    max-height:84px!important;
    object-fit:contain!important;
}
#cards-diario .card,
#cards-extendido1 .card{height:100%;border-radius:12px;overflow:hidden;}

/* Carruseles y tarjetas */
.carousel .card-img-top,
.carousel-sistemas-item img{width:100%;height:180px;object-fit:contain;background:#fff;}
.card-img-top{object-fit:cover;}
.gobbo-section img{max-width:100%;height:auto;}
.servicio-icono{width:54px!important;height:54px!important;object-fit:contain!important;}

/* Footer y botones flotantes */
footer{position:relative;overflow:hidden;margin-top:3rem;}
#pie-pagina img{max-width:100%;height:auto;}
.sticky-container{position:fixed;right:0;top:36%;z-index:999;}
.sticky{padding:0;margin:0;list-style:none;}
.sticky li{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e5e7eb;margin-bottom:2px;box-shadow:0 2px 8px rgba(0,0,0,.1);}
.sticky li img{width:30px!important;height:30px!important;object-fit:contain!important;}

@media (min-width:992px){
    #main-menu .navbar .dropdown:hover>.dropdown-menu{display:block;margin-top:0;}
}
@media (max-width:991.98px){
    #main-menu .navbar-nav{align-items:stretch;padding:.5rem 0;}
    #main-menu .nav-link{white-space:normal;}
    #main-menu .dropdown-menu{box-shadow:none;border-radius:6px;margin:.25rem .75rem;}
    .pron-fondo{min-height:260px;}
    #mapa_pronostico{min-height:240px;}
}
@media (max-width:767.98px){
    #banner-slider{height:118px!important;}
    main>.container{padding-left:1rem;padding-right:1rem;}
    #contenedor-franjas img,
    #contenedor-franjas svg,
    #contenedor-franjas canvas{max-width:72px!important;max-height:72px!important;}
    .carousel .card-img-top,
    .carousel-sistemas-item img{height:145px;}
}