﻿@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

:root {
    /*COLORES PRIMARIOS*/
    --primary-100: #fcf49e;
    --primary-200: #F9E81E;
    --primary-300: #0a3749;
    --primary-400: #0a3749;
    /*COLORES SECUNDARIOS*/
    --secondary-100: #fcf49e;
    /*--secondary-200: #888484;*/
    /*--secondary-300: #534f4f;*/
    --secondary-400: #e3127e;
    /*INFO AL USUARIO*/
    --info-50: #ebf0f9;
    --info-100: #87a5de;
    --error: #d35f5f;
    --success: #66cc85;
    --warning: #e1931e;
    /*TEXTO Y OTROS*/
    --stroke: #f0f0f0;
    --stroke-2: #cce7c5;
    --text-light: #667085;
    --text-dark: #475467;
    --neutral-50: #f1f1f4;
    --neutral-100: #d0d5dd;
    --neutral-200: #55556d;
    /*BÁSICOS*/
    --white: #fafafa;
    --black: #1a1a1a;
    /*TEXTO*/
    --font-primary: "Montserrat", sans-serif !important;
    /*TAMAÑOS*/
    --size-64: 64px;
    --size-48: 48px;
    --size-36: 36px;
    --size-24: 24px;
    --size-20: 20px;
    --size-18: 18px;
    --size-16: 16px;
    --size-14: 14px;
    /*BOX SHADOW*/
    --shadow-1: 0px 1px 7px 0px rgba(0, 0, 0, 0.1);
    --shadow-2: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

/*GENERAL*/

.container.body-content { 
    padding: 50px 15px;
}
/*NAVBAR*/
.navbar-nav {
    gap: 20px;
}

div.navbar img {
    max-width: 100%;
    max-height: 20px !important
}

.navbar-fixed-top {
    background-color: var(--primary-400);
    opacity: 0.92
}

.navbar.navbar-default .nav.navbar-nav a,
.navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-top-color: #fff;
    color: #fff!important;
    font-weight: 500
}

.navbar.navbar-default .nav.navbar-nav li.active a {
    color: var(--primary-100) !important;
    border-top-color: var(--primary-100) !important;
    border-bottom-color: var(--primary-100) !important;
}

.nav.navbar-nav li.active a {
    border-color: #fff
}

#logoutForm a, #logoutForm a:hover {
    background-color: #fff;
    color: var(--primary-400) !important
}

.navbar-default .navbar-toggle:after {
    filter: invert(1);
}

.nav.navbar-nav .dropdown.open .dropdown-menu {
    background-color: var(--primary-400) !important;
}
.navbar .nav li.dropdown.open > .dropdown-toggle:active{
    color:var(--primary-100)
}
@media (min-width: 1200px) {
    .nav.navbar-nav .dropdown.open .dropdown-menu {
        top: 55px;
    }
}
/*HOME*/
.home__container .cabecera h1 {
    margin-bottom: 30px
}

.home__container .cabecera h1,
.home__container .cabecera h3 {
    font-family: var(--font-primary);
    color: var(--primary-400);
}

    .home__container p strong {
        color: var(--black);
        margin: 0
    }

.home__container p{
    margin: 0
}

.cabecera {
    background: var(--secondary-100, #EDEDED);
}
.cabecera p, .card__text p {
    font-size: var(--size-14);
    color: var(--text-dark);
    max-width:90%
}

/*CATALOGUE*/

.progress-bar__nav .nav-icon__container,
.preview-catalogue {
    background-color:var(--primary-400)
}

.expo-catalogue .thumbnail h4::before{
    background-color:var(--secondary-400)
}
.expo-catalogue .thumbnail.warning .caption a{
    background-color:var(--primary-400)
}

/*INVITACIONES*/
@media (min-width: 998px) {
    div #invitaciones .presentacion {
        grid-template-columns: 4fr 5fr;
    }

    div#divInvitationSummary {
        grid-column: 1 / span x;
        grid-row: 5;
        justify-self: flex-end;
        display: flex;
        gap: 20px;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}