/* _content/Sgk_Mlff_Tunel_Web_C/Components/Layout/MainLayout.razor.rz.scp.css */
/* ===========================
   HEADER GENERAL
=========================== */
.site-header[b-qqs5qjl5ng] {
    background: #fff;
    border-bottom: 1px solid #e7eaee;
}

/* Barra superior (logo + menú + login) */
.site-header__bar[b-qqs5qjl5ng] {
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    margin-bottom: 12px; /* separación respecto al título */
    padding-bottom: 4px; /* opcional, sutil */
    border-bottom: 1px solid #e7eaee; /* línea divisoria suave */
}

/* Logo */
.site-header__logo_img[b-qqs5qjl5ng] {
    height: 55px;
    width: auto;
    display: block;
}

/* Menú + botón a la derecha */
.site-header__right[b-qqs5qjl5ng] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

/* ===========================
   MENÚ SUPERIOR
=========================== */
.header-menu.k-menu[b-qqs5qjl5ng] {
    border: none;
    background: transparent;
    --menu-fg: #60656d;
}

.header-menu .k-menu-item > .k-menu-link[b-qqs5qjl5ng] {
    color: var(--menu-fg);
    padding: 8px 14px;
    font-weight: 500;
}

.header-menu .k-menu-expand-arrow[b-qqs5qjl5ng],
.header-menu .k-menu-item .k-menu-expand-icon[b-qqs5qjl5ng],
.header-menu .k-menu-item .k-icon.k-i-arrow-s[b-qqs5qjl5ng],
.header-menu .k-menu-item .k-svg-icon.k-svg-i-arrow-s[b-qqs5qjl5ng] {
    color: #d21f2b !important;
    fill: #d21f2b !important;
}

.header-menu .k-menu-item .k-svg-icon path[b-qqs5qjl5ng] {
    fill: red;
}

/* ===========================
   BOTÓN LOGIN
=========================== */
.login-btn[b-qqs5qjl5ng] {
    --btnBlue: #3A93D2;
    --btnBlueDark: #15549A;
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    background: linear-gradient(180deg, var(--btnBlue) 0%, #15549A 100%);
    color: #fff;
    font-weight: 500;
    border-radius: 9px;
    text-decoration: none;
    transition: background .2s ease;
    gap: 8px;
}

    .login-btn:hover[b-qqs5qjl5ng] {
        background: linear-gradient(180deg, var(--btnBlueDark) 0%, #0b57c2 100%);
    }

/* ===========================
   TÍTULO DEBAJO DEL HEADER
=========================== */
.site-header__titulo[b-qqs5qjl5ng] {
    background: #15549A;
    text-align: center;
    padding: 10px 2px 2px 2px;
    margin-top: 8px; /* aire extra bajo la barra */
    border-bottom: 4px solid #D21F2B;
}

    .site-header__titulo h1[b-qqs5qjl5ng] {
        font-weight: 800;
        text-transform: uppercase;
    }

.titulo-principal[b-qqs5qjl5ng] {
    display: block;
    color: white;
}

.titulo-sub[b-qqs5qjl5ng] {
    font-weight: 600;
    color: white;
}

/* ===========================
   FOOTER
=========================== */
.site-footer[b-qqs5qjl5ng] {
    position: relative;
    color: #333;
    font-size: 14px;
    background: #fff url("images/patrones/footer-pattern.png") repeat center/contain;
    padding-top: 40px;
    border-top: 1px solid #e7eaee;
}

.site-footer__pattern[b-qqs5qjl5ng] {
    display: none;
}

.site-footer__content[b-qqs5qjl5ng] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 40px;
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    gap: 10px;
    align-items: flex-start;
}

.footer-col__title[b-qqs5qjl5ng] {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #111;
}

.footer-links[b-qqs5qjl5ng] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li[b-qqs5qjl5ng] {
        margin-bottom: 8px;
    }

    .footer-links a[b-qqs5qjl5ng] {
        text-decoration: none;
        color: #555;
        transition: color .2s ease;
    }

        .footer-links a:hover[b-qqs5qjl5ng] {
            color: #15549A;
        }
/* Logos */
.footer-col--brand img[b-qqs5qjl5ng] {
    display: block;
    margin-bottom: 12px;
    height: 300px;
}
/* Awards */
.footer-awards img[b-qqs5qjl5ng] {
    max-height: 55px;
    margin-bottom: 16px;
}
/* Redes sociales */
.footer-social[b-qqs5qjl5ng] {
    display: flex;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

    .footer-social .icon[b-qqs5qjl5ng] {
        display: inline-block;
        width: 22px;
        height: 22px;
        background: #ccc;
        border-radius: 50%;
    }
/* Banda inferior */
.site-footer__bottom[b-qqs5qjl5ng] {
    background: #f9f9f9;
    border-top: 1px solid #e7eaee;
    text-align: center;
    padding: 12px;
    font-size: 13px;
    color: #777;
}

    .site-footer__bottom p[b-qqs5qjl5ng] {
        margin: 0;
    }
/* Idioma */
.footer-lang[b-qqs5qjl5ng] {
    margin-top: 18px;
}

    .footer-lang select[b-qqs5qjl5ng] {
        padding: 6px 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
    }
/* ===========================
   MOBILE ACTIONS (base)
=========================== */
.mobile-actions[b-qqs5qjl5ng] {
    display: none;
    padding: 8px 16px 0;
}

.mobile-action[b-qqs5qjl5ng] {
    display: inline-block;
    text-align: center;
    padding: 12px 14px;
    border-radius: 9px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #d0d7de;
    background: #fff;
    color: #15549A;
}

.mobile-action--primary[b-qqs5qjl5ng] {
    border-color: transparent;
    background: linear-gradient(180deg, #3A93D2 0%, #15549A 100%);
    color: #fff;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 900px) {
    .site-footer__content[b-qqs5qjl5ng] {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .site-footer__content[b-qqs5qjl5ng] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .site-header__bar[b-qqs5qjl5ng] {
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 14px; 
    }

    .site-header__logo[b-qqs5qjl5ng] {
        order: 1;
    }

    .site-header__right[b-qqs5qjl5ng] {
        order: 2;
        width: auto;
        gap: 12px;
    }

    .site-header__nav[b-qqs5qjl5ng] {
        display: none;
    }

    .login-btn[b-qqs5qjl5ng] {
        order: 2;
        margin-left: 0;
    }


    .mobile-actions[b-qqs5qjl5ng] {
        order: 3;
        display: grid;  
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    .site-header__titulo[b-qqs5qjl5ng] {
        margin-top: 10px;
    }
}

@media (max-width: 420px) {
    .mobile-actions[b-qqs5qjl5ng] {
        grid-template-columns: 1fr;  
    }
}

/* --- 0) Flex children pueden encogerse --- */
.site-header__bar[b-qqs5qjl5ng] {
    min-width: 0;
}

.site-header__logo[b-qqs5qjl5ng],
.site-header__right[b-qqs5qjl5ng] {
    min-width: 0;
}

.site-header__right[b-qqs5qjl5ng] {
    flex-shrink: 1; /* permite que el bloque derecho ceda espacio */
    gap: 12px;
}

/* --- 1) Escalado fluido de logo y botón --- */
.site-header__logo_img[b-qqs5qjl5ng] {
    /* Antes: height:55px;  -> ahora fluido */
    height: clamp(36px, 6.5vw, 55px);
    width: auto;
}

.login-btn[b-qqs5qjl5ng] {
    /* que pueda encogerse sin saltar de línea */
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    /* padding y tamaño de fuente fluidos */
    padding: clamp(6px, 1.8vw, 12px) clamp(10px, 3.5vw, 22px);
    font-size: clamp(13px, 3.4vw, 15px);
    border-radius: 9px;
}

/* --- 2) Breakpoints finos para móviles --- */
@media (max-width: 420px) {
    .site-header__bar[b-qqs5qjl5ng] {
        gap: 10px;
        padding: 8px 12px;
    }

    .login-btn[b-qqs5qjl5ng] {
        border-radius: 8px;
    }
}

@media (max-width: 360px) {
    .site-header__bar[b-qqs5qjl5ng] {
        gap: 8px;
        padding: 8px 10px;
    }

    .site-header__logo_img[b-qqs5qjl5ng] {
        height: 34px;
    }
    /* un paso más compacto */
    .login-btn[b-qqs5qjl5ng] {
        padding: 6px 10px;
        font-size: 12.5px;
        border-radius: 8px;
    }
}