/* @media (min-width: 220px) and (max-width: 767px){ */
/* @media (min-width: 440px){ */
/* @media (min-width: 768px){ */
/* @media (min-width: 991px){ */
/* @media (min-width: 1024px){ */
/* @import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow'); */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');

:root{
    /* --color1: #ABD904; */
    /* --color1: #72A603; */
    /* --color1: #372d27; */
    --color1: #373b40;
    --color2: #1D5902;
    /* --color3: #F15A24; */
    --color3: #D9042B;
    --color4: #A60321;
    /* --color5: #F2E205;  */
    --color6: #BCBCC1;
    --sombra: rgb(200,200,200);
}

.puntito{
   color: 
}

html{
    min-height: 100vh;
}

html body{
    font-size: 18px;
}

*{
    margin: 0;
    padding: 0;
    font-family: 'PT Sans Narrow', sans-serif;
    box-sizing: border-box;
    /* border: 1px solid #A0CA44; */
}


* a:link{
    text-decoration: underline;
    /* color: var(--color2); */
    color: var(--color3);
}

* a:hover{
    /* color: var(--color1); */
    color: var(--color4);
}

* .botonlink{
    border: 1px solid #96de44;
    margin: 4px 0px;
    padding: 5px 15px;
    text-align: center;
}

* a:visited{
    /* color: var(--color1); */
    color: var(--color3);
}

* p{
    margin-bottom: 0px;
    /* text-shadow: 1px 1px 2px gray; */
    /* text-align: justify; */
}

a.link{
    color: var(--color1);
}

span.resaltar{
    color: var(--color3);
}

* div img{
    width: 100%;
}

* .vo{
    /* color: #186448; */
    color: var(--color4);
}

* .co{
    /* color: #FF4F1F; */
    color: var(--color4);
}

* .am{
    /* color: #f5f529; */
    color: var(--color4);
}

* .vc{
    /* color: #96DE44; */
    color: var(--color4);
}

* .gr{
    /* color: #5F5f5f; */
    color: var(--color4);
}


body{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-flow: column;
}

header{
    background-color: rgb(100,100,100,0.1);
}

header .superior{
    border-top: 5px solid var(--color6);
    margin-top: 5px;
}

header .superior .superior-inferior{
    margin-top: 0px;
}


header .superior .superior-med{
    display: grid;
    /* grid-template-columns: 80px 60px 1fr repeat(7, 25px); */
    grid-template-columns: 150px;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-top: 15px;
}

/* header .superior .superior-med a:nth-child(1){
    grid-column: 2/span 1;
    padding: 0 10px;
} */


/* header .superior .superior-med a:nth-child(3){
    grid-column: 4 / span 1;
    justify-self: center;
    align-self: start;
} */

header .superior .superior-med a:nth-last-child(-n+4){
    display: none;
}

header .superior .superior-med a:nth-last-child(-n+7):hover{
    opacity: 0.5;
}

header .superior .superior-med i{
    /* color: greenyellow; */
    /* color: #1d5902; */
    /* color: green; */
    color: var(--color2);
}

header .superior .superior-inferior p{
    color: var(--color2);
    font-weight: bold;
    text-align: right;
    font-size: 8px;
    margin-right: 5px;
}

header .medio-inferior{
    margin-top: 10px;
}

header .inferior{
    /* height: 6px; */
    /* display: block; */
    display: grid;
    grid-template-columns: 1fr repeat(4, 26px);
    /* background: rgb(100,100,100,0.1); */
    padding-top: 10px;
    /* margin: 0 5px; */
}


header .inferior .inferior-0{
    background-color: var(--color6);
    height: 2px;
}

header .inferior .inferior-1{
    /* background-color: #186448; */
    /*background-color: #96DE44;*/
    background-color: rgb(168, 207,69);
}

header .inferior .inferior-2{
    /*background-color: #F5F529;*/
    background-color: rgb(249, 231, 59);
}

header .inferior .inferior-3{
    /*background-color: #FF4F1F;*/
    background-color: rgb(240, 111, 58);
}

header .inferior .inferior-4{
    /*background-color: var(--color2);*/
    background-color: rgb(12, 82, 54);
}

nav{
    display: block;
}

nav ul{
    padding: 1px;
}

nav ul li{
    margin: 5px;
    all: unset;
    text-align:left;
}

nav ul p{
    display: inline-block;
}

nav ul li a{
    text-decoration: none !important;
}

nav .nav-item a{
    color: white;
}

nav .dropdown-menu li{
    text-align: left;
}

nav a#navbarDropdown{
    color: white;
}

nav .navbar-collapse ul li.nav-item{
    text-align: left;
}

article{
    flex-grow: 1;
    background-color: rgb(100,100,100,0.1);
}

/* article div{
    margin: 5px 0;
} */


article section{
    margin-top: 5px;
    /* margin: 0 auto; */
    padding: 0 5px;
}

article .titulo p{
    font-size: 1.8rem;
    font-weight: bold;
    /* border-bottom: 1px solid gray; */
    color: var(--color1);
    margin: 10px 0;
    padding-left: 15px;
    text-shadow: 1px 1px 1px var(--sombra);
}

article .subtitulo p{
    font-size: 1.2rem;
    font-weight: bold;
    margin: 10px;
    /* border-bottom: 1px solid gray; */
}

footer{
    padding: 0 10px;
    background-color: rgb(100, 100, 100, 0.1);
}

footer .pie{
    padding: 5px;
    /* text-align: center; */
    /* background: #BCBCC1; */
    background-color: #545455;
    /* display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center; */
}

footer .pie p.dir{
    font-size: 0.9rem;
    text-align: center;
    color: white;
}

footer .pie .pie-imagen img{
    width: 100%;
}

footer .pie .pie-sede p{
    margin-bottom: 3px;
}

.head-guarani img{
    margin-top: -5px;
    max-height: 25px;
}

nav{
    width: 100%;
}

nav ul li{
    display: block;
}

nav ul p{
    display: none;
}

/* Menu en cada pagina */
.cuerpo-menu .menu{
    text-align: center;
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
    padding: 10px 0;
    margin: 10px 0;
}

.cuerpo-menu .cuerpo p{
    padding: 5px;
}

.botonco{
    /* para usar en links (a) */
    padding: 5px 20px;
    /* background: #FF4F1F; */
    background: var(--color3);
    color: white !important;
    text-decoration: none !important;
    border-radius: 8px;
    /* border: 2px solid #FF4F1F; */
    border: 2px solid var(--color4);
    transition-duration: 0.4s;
    font-weight: bold;
}

.botonco:hover{
    color: black !important;
    background: white;
}

.botonve{
    /* para usar en links (a) */
    padding: 15px;
    background: var(--color2);
    color: white !important;
    text-decoration: none !important;
    border-radius: 8px;
    border: 2px solid #186448;
    transition-duration: 0.4s;
    font-weight: bold;
}

.botonve:hover{
    color: black !important;
    background: white;
}

ul li{
    margin-left: 20px;
}

ol li{
    margin-left: 20px;
}

details summary{
    border: 1px solid gray;
    background-color: rgb(200,200,200, 0.5);
    padding: 5px;
}


summary {
    display: flex;
    align-items: center;
    list-style: none;
    font-weight: bold;
}

summary::after {
    display: block;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

details summary:before {
    content: "+";
    font-size: 1.8rem;
    margin: 0 10px;
    line-height: 1.1rem;
}

details[open] summary:before {
    content:"-";
    font-size: 1.8rem;
    margin: 0 10px;
    line-height: 1.1rem;
}
    
    @media (min-width:768px){
        header .medio-inferior{
            margin: 10px;
        }
        header .superior{
            margin: 5px 5px 0;
        }

        article{
            padding: 0 15px;
        }

        /* article div{
            margin: 10px 0;
        } */

        article section{
            margin: 5px;
            /* margin: 0 auto; */
        }

        header .superior .superior-med a:nth-child(1){
            /* grid-column: 1/span 1; */
            grid-column: 2/span 1;
            padding: 0 10px;
        }
        header .superior{
            /* padding: 15px 8px; */
            margin: 0 10px 10px;
        }

        header .superior .superior-med{
            /* grid-template-columns: 200px 1fr repeat(4, 37px); */
            grid-template-columns: 1fr 200px 1fr repeat(4, 37px);
            font-size: 30px;
            margin-left: 120px;
            margin-right: 25px;
            margin-top: 10px;
        }

        header .superior .superior-med a:nth-last-child(-n+4){
            /* grid-column: 12; */
            display: block;
            justify-self: center;
            /* align-self: start; */
        }

        header .superior .superior-med a:nth-child(2){
            grid-column: 4/span 1;
            padding: 0 10px;
        }

        header .superior .superior-inferior{
            margin-top: -20px;
        }

        header .superior .superior-inferior p{
            font-size: 20px;
        }

        header .inferior{
            /* margin: 0 10px; */
            grid-template-columns: 1fr repeat(4, 40px);
        }

        header .inferior .inferior-0{
            height: 5px;
        }

        header .inferior .inferior-1, .inferior-2, .inferior-3, .inferior-4{
            height: 5px;
        }

        article section{
            margin: 5px auto;
            width: 85%;
        }
    }