:root {
    --datos-usc-back: #FAFDFF;
    --datos-usc-accent: #0A6CAD;
    --datos-usc-dark-accent: #031E30;
    --datos-usc-green: #BDE51C;
    --datos-usc-light-green: #F7FFD6;
    --datos-usc-dark-green: #A4C310;
    --datos-usc-black: #031E30;
    --datos-usc-gray: #5E6E78;
}

.usc-publications { 
    .filters {
        background: var(--datos-usc-back);
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 30px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .publication-item {
        background: var(--datos-usc-back);
        padding: 16px;
        margin: 0 0 16px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;

        ul li {
            color: #031e30 !important;
        }

        a {
            color: var(--datos-usc-accent);
            font-weight: 700;
            text-decoration: none !important;

            &:hover {
                color: var(--datos-usc-dark-green);
            }

            &.googleImg {
                vertical-align: middle;
                line-height: normal;
            }
        }
    }

    .row {
        margin: 0;
    }

    &:not(:first-child) {
        margin-top: 64px;
    }
}

.circular-image {
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;

    img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        object-position: center;
    }
}

/* Filtros */
.formPubli {
    background: var(--datos-usc-back);
    padding: 24px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;

    .container {
        padding: 0;
    }

    .row {
        --gap: 16px;
        margin: 0;
        gap: var(--gap);

        .col-md-3 {
            width: calc( 25% - var(--gap) * 3/4 );

            @media only screen and (max-width: 960px) {
                width: calc( 50% - var(--gap) / 2 );
            }

            @media only screen and (max-width: 560px) {
                width: 100%;
            }
        }

        .col-md-9 {
            width: calc(75% - var(--gap) * 1/4);

            @media only screen and (max-width: 960px) {
                width: calc( 50% - var(--gap) / 2 );
            }

            @media only screen and (max-width: 560px) {
                width: 100%;
            }
        }

        @media only screen and (max-width: 560px) {
            --gap: 12px;
        }
    }

    input, select {
        width: 100% !important;
        padding: 10px 20px !important;
        margin: 0 !important;
        font-size: 16px;
        line-height: 1.4;

        @media only screen and (max-width: 560px) {
            padding: 8px 20px 8px 10px !important;
            font-size: 14px;
        }
    }

    label {
        text-transform: uppercase;
        font-size: .7em;
        line-height: 1;
        font-weight: 700;
        margin: 0 0 6px 10px;
    }

    input#saveForm {
        background: var(--datos-usc-green);
        border: solid 1px var(--datos-usc-dark-green);
        color: var(--datos-usc-black);
        padding: 10px 20px;
        font-size: 16px;
        line-height: 1.4;
        margin-top: calc(.7em + 6px) !important;

        &:hover {
            background: var(--datos-usc-dark-green);
        }
    }

    & + .col-md-12 {
        margin: 12px 0 0 !important;
    }
} 

.row > * {
    padding: 0;
}

input#reset {
    background: none;
    color: var(--datos-usc-black);
    border: 0;
    padding: 0;
    font-size: .7em;
    line-height: 1;
    font-weight: 700;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    text-transform: uppercase;

    &:hover {
        color: var(--datos-usc-dark-green);
    }
}

.info {
    font-style: italic;
    margin: 0;
    background: var(--datos-usc-light-green);
    border: solid 1px var(--datos-usc-green);
    padding: 8px 16px;
    color: var(--datos-usc-black);
    border-radius: 10px;
}

/* Pagination */
.paginacion .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;

    .page-item {
        margin: 0;

        .page-link {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 45px;
            height: 45px;
            padding: 8px 16px;
            margin: 0;
            font-size: 16px;
            line-height: 1;
            border-radius: 100px;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -ms-border-radius: 100px;
            -o-border-radius: 100px;
            color: var(--datos-usc-gray);
            background: var(--datos-usc-back);
            border: 1px solid var(--datos-usc-gray);
            text-decoration: none;
            transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;

            &:hover {
                color: var(--datos-usc-dark-accent);
                border-color: var(--datos-usc-dark-accent);
            }
        }

        &.active {
            .page-link {
                color: var(--datos-usc-back);
                background: var(--datos-usc-dark-accent);
                border-color: var(--datos-usc-dark-accent);

                &:hover {
                    color: var(--datos-usc-back);
                    background: var(--datos-usc-dark-accent);
                    border-color: var(--datos-usc-dark-accent);
                }
            }
        }
    }

    .dots {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 8px 12px;
        color: #666;
    }
}

#Wrapper .imgMiembro {
    max-width: 400px;
    height: fit-content;
    width: 100%;
}

.row.miembro-header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    & >.col-md-6 {
        width: 100%;
    }

    @media only screen and (max-width:870px) {
        grid-template-columns: 1fr;

        & > div:nth-child(2) {
            order: -1;
            margin-bottom: 32px;
        }
    }
}

/* tabla equipo */
.tabla-equipo {
    background: var(--datos-usc-back);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    overflow: hidden;
    margin: 0 0 64px;

    tr {
        td {
            padding: 12px;

            &:first-child {
                @media only screen and (max-width: 768px) {
                    border: 0;
                    padding-bottom: 0;
                }
            }

            &:last-child {
                @media only screen and (max-width: 768px) {
                    padding-top: 0;
                }
            }
        }

        &.table-header {
            background: var(--datos-usc-accent);
            color: var(--datos-usc-back);
            text-transform: uppercase;
    
            td {
                padding: 16px;
                
                @media only screen and (max-width: 768px) {
                    width: 100% !important;
                }

                &:last-child {
                    @media only screen and (max-width: 768px) {
                        display: none;
                    }
                }
            }
        }

        @media only screen and (max-width: 768px) {
            display: flex;
            flex-direction: column;
        }
    }

    &:last-of-type {
        margin: 0;
    }

    tbody {
        @media only screen and (max-width: 768px) {
            display: flex;
            flex-direction: column;
        }
    }
}


/*unicas*/
.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}