@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 {
--color-primary: #64c6ce;
    --color-secondary: #7ba758;
    --color-background-primary: #333333;
    --color-background-secondary: #345234;
    --primary-100: #83ced4;
    --primary-200: #64c6ce;
    --primary-300: #279aa3;
    --primary-400: #175155;
    /*COLORES SECUNDARIOS*/
    --secondary-100: #FFE0C4;
    --secondary-200: #DEA676;
    --secondary-300: #B57843;
    --secondary-400: #904E15;
    /*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: "Manrope", 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);
}


.cabecera p {
    color: var(--black)
}

/*Esconder código para vista invitaciones*/

#summaryCode{
    display:none
}
/*Estilos custom para vista invitaciones*/
div#divInvitationSummary .panel-info {
    height: 100%
}

div#divInvitationSummary strong {
    padding: 20px 0
}

div#divInvitationSummary.row::before {
    display: none
}

div#divInvitationSummary p {
    padding-top: 5px;
}

div#divInvitationSummary span {
    color: var(--white);
    background-color: transparent;
    font-size: var(--size-16);
    font-weight: 500
}

div#divInvitationSummary p a[onclick] {
    background-color: #fff;
    color: var(--secondary-400);
    border-radius: 50px;
    padding: 10px 15px;
}

div#divInvitationSummary p:has(a[onclick]) {
    padding: 24px 0
}

div#divInvitationSummary .col-md-3 {
    width: fit-content;
}


@media (min-width: 998px) {
    div#acreditationPasses-container .well.well-sm {
        grid-column: span 2;
    }

    /*Estilos custom para vista invitaciones*/

    div#invitaciones .presentacion {
        grid-template-columns: 4fr 5fr;
    }
    div.invitations__img {    
        grid-column: 2;
        grid-row: 1 / span 4;
        height: 460px;
        border-radius: 18px;
        overflow: hidden;
        justify-self:flex-end

    }

    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;
    }
    div.invitaciones-btn {
        grid-column: 1;
        grid-row: 3;
        justify-self: flex-start;
        width: fit-content;
        padding-top: 20px !important;
    }


}