@charset "utf-8";
:root {
    --color1: ;
    --color2: ;
    --color3: ;
    --color4: ;
    --color5: ;
    --color6: ;
    --bgimage: url(../images/rcnwallwhite.png);
    --grafitiimage: url(../images/bg042.png);
}
/* 
Definiciones generales para todo 
--------------------------------
 */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: Calibri, Helvetica, Arial, sans-serif;
    border-top-left-radius: 0.2rem  0.3rem;
    border-top-right-radius: 0.2rem  0.3rem;
    border-bottom-left-radius: 0.2rem  0.3rem;
    border-bottom-right-radius: 1rem  1.8rem;


}
img{
    
    border-radius: 0%; 
}
body {
    background-image: var(--bgimage);
    background-attachment: fixed;
    background-color: var(--color1);
    color: var(--color5);
    font-size: small;
}

a {
    text-decoration: none;
    color: var(--color1);

}

a:hover {
    background-color: var(--color4);
}
textarea{
    resize: none;
    min-width: 100%;

}
/*Parametros para fotos*/
:root{
    --fotosboton: white;
    --fotosopac: 40%;
}
.containerfotos{
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    background: #000;

}
.containerfotos a:hover{
    background-color:unset;


}
.containerfotos img{
    position: relative;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    cursor:default ;
}
.containerfotos .fotosbotonanterior, .containerfotos .fotosbotonposterior,
        .containerfotos .fotosbotonsalir{
    position: absolute;
    color: var(--fotosboton);
    opacity: var(--fotosopac);
    font-size: 5rem;
    text-shadow: #000 5px 5px 5px ;
    filter: blur(1px);
    cursor: pointer;

	
}
.fotosmapaexif{
    position: absolute;
    width: 40%;
    height: 40%;
    border: var(--color6) solid 1px;

    bottom: 10px;
    right: 10px;
}


.containerfotos .fotosbotonanterior:hover, 
    .containerfotos .fotosbotonposterior:hover, 
    .fotosdescripcion:hover,
    .containerfotos .fotosbotonsalir:hover {
    opacity: 100%;
}

.containerfotos .fotosbotonanterior{
    left: 3%;
}

.containerfotos .fotosbotonposterior{
    right: 3%;
}
.containerfotos .fotosbotonsalir{
    bottom: 3%;
    left: 3%;
    font-size: 2rem;
    border: white 1px solid;
}


.fotosdescripcion{
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px;
    padding: 5px;
    position: absolute;
    top: 1%;
    left: 1%;
    color: var(--fotosboton);
    opacity: var(--fotosopac);
    border: 1px solid var(--fotosboton);
    background-color: #000;
    cursor: pointer;
}
.fotosdescripcion .sp{
    grid-column: 1 / -1;
    justify-self: center;

    padding: 5px;
    
}



.container {
    display: grid;

    gap: 10px;
    padding: 5px 25px;
    grid-template-columns: 1fr 15fr 1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas: "header  header  header"
                         "errores errores errores"
                         "saludo saludo  login"
                         "links maincont maincont"
                         "links grafiti grafiti"
                         "mensaje mensaje mensaje"
                         "footer footer footer"

    ;
}
.solomain{
    grid-row: 4 / 4;
    grid-column: 1 / -1;
    display: grid;
    padding: 5px 25px;
    font-size: small;
    background-color: var(--color2);
}
.solomain .twocols{
    display: grid;
    grid-template-columns: auto auto ;
    align-items: center;
    padding: 3px;
    margin: 3px;
    border: var(--color3) solid 0.01em;
    box-shadow: none;

}
.container .twocols div{
    padding: 3px;
    margin: 3px;
    box-shadow: none;
    
}
.container .titlefotos, .container .saludosolo{
    grid-row: 2 / 2;
    grid-column: 1 / -1;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--color2);
}
.container .fotosform{
    grid-row: 3 / 3;
    grid-column: 1 / -1;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-content: space-evenly;
    align-items: center;
    word-wrap: break-word;
    word-break:normal;
}
.container .fotosform div{
    box-shadow: none;
    border: var(--color3) solid 0.01em;
    padding: 3px;
    margin: 3px;
}

.container .fotosgrid{
    grid-row: 4 / 4;
    grid-column: 1 / -1;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-content: space-evenly;
    align-items: center;
    word-wrap: break-word;
    word-break:normal;
    box-shadow: none;
    
}
.container .fotosgrid div{
    display: block;
    margin: 10px;
    padding: 10px;
    max-width: min-content;

    background-color: var(--color6);

}
.container .fotosgrid div:hover{
    background-color: var(--color4);
}
a.filldiv{
    display: block;
    width: 100%;
    height: 100%;
    
}
.container .fotosgrid img{

    border-radius: 5px;
}
.container .fotosgrid img{
    max-width: 300px;
    max-height: 300px; 
}

.container .saldosf{
    grid-row: 3 / 7;
    grid-column: 1 / -1;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--color2);
    

}

.container .saldosf .formsaldos{
    display: grid;
    grid-template-columns: auto auto;

}

.container .saldosf .botones{
    display: flex;
    justify-content: center;
    box-shadow: none;
}

.container .saldosf div{
    margin: 10px;
    padding: 5px;
    

}
.tablasaldos, .tablagrafitis{
    padding: 5px 15px;
    word-wrap:break-word;
    
}
.tablagrafitis td, .tablagrafitis th, .tablagrafitis caption{
    padding: 0%;
    border: 1px inset var(--color1);
}
.tablasaldos td, .tablasaldos th, .tablasaldos caption {
    border: 1px inset var(--color1);
    padding: 3px 5px;

}
.container .mensaje{
    grid-row: 3 / 7;
    grid-column: 1 / -1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--color3);
    
}
.container .mensaje div{
    margin: 10px;
    padding: 5px;
    font-size: large;
    font-weight: bolder;
    box-shadow: none;
}

.container div {
    /* border-radius: 7px 0px 15px 7px; */

    padding: 5px 5px 1px 1px;
    box-shadow: 1px 1px 6px var(--color6);
}

/* Header */
.container .header {
    background-color: var(--color5);
    color: var(--color2);
    font-size: x-small;
    padding: 2px 3px;
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 9fr 4fr 2fr;
    grid-template-areas: "htitulo    htitulo     hfecha     hfecha"
        "hlogo      htexto1      htexto2      hidioma";
    position: sticky;
    top: 0;
}

.container .header div {
    box-shadow: none;
    color: var(--color1);
}

.container .header .htitulo,
.container .header .hfecha {
    background-color: var(--color6);
    color: var(--color3);
    display: block;
    padding: 1px 10px;
    margin: 0px 3px;

}

.container .header .htitulo {
    grid-area: htitulo;

}

.container .header .hfecha {
    grid-area: hfecha;
    text-align: right;

}

.container .header .hlogo {
    grid-area: hlogo;


}

.container .header .hidioma {
    grid-area: hidioma;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

.container .header .htexto1 {
    grid-area: htexto1;
    text-align: center;
}

.container .header .htexto2 {
    grid-area: htexto2;
    text-align: center;
}

.container .errores {
    grid-area: errores;
    background-color: var(--color6);
    color: var(--color1);
    text-align: center;
    font-size: x-large;
    animation: blinker 150ms step-start 20;
}

@keyframes blinker {
    30% {
        opacity: 75%;
    }
}


.container .saludo {
    display: flex;
    flex-direction: column;
    grid-area: saludo;
    align-items: stretch;
    text-align: center;
    padding: 0px;
    font-size: x-large;
    box-shadow: none;
    background-color: var(--color2);
}

.container .saludo div {
    padding: 5px;
    display: block;

}

.container .links {
    grid-area: links;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    box-shadow: none;
    color: var(--color1);
}

.container .links .linksa {
    display: grid;
    grid-template-columns: 1fr 10fr;
    padding: 1px 10px;
    text-align: center;
    font-size: small;
    background-color: var(--color3);
    margin: 3px 0px;
    transform: rotate(0.99turn);
    border: 1px solid;

}

.container .links .linksa:hover {
    background-color: var(--color4);
}

.container .links .linksa div {
    display: flex;
    padding: 1px;
    box-shadow: none;
    align-items: center;
    justify-items: stretch;
    justify-content: space-evenly;


}

.container .maincont {
    display: flex;
    flex-flow: column nowrap;
    flex-shrink: 0;
    grid-area: maincont;
    font-size: small;
    padding: 15px 15px;
    background-color: var(--color2);

}

.container .maincont div {
    box-shadow: none;

}

.imagernd {
    height: 100%;
    width: 100%;

}

.container .login {
    grid-area: login;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: x-small;
    padding: 6px 2px;
    background-color: var(--color2);
}

.container .login div {
    box-shadow: none;
}

.container .grafiti {
    grid-area: grafiti;

    background-image: var(--grafitiimage);
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "g g"
        "a f";
    color: var(--color6);

}

.container .grafiti .g {
    grid-area: g;
    font-size: x-large;
    font-style: oblique;
    text-shadow: 5px 5px 3px var(--color4);
    filter: blur(1px);


}

.container .grafiti div {
    box-shadow: none;
    


}


.container .footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color2);
    font-size: x-small;
    padding: 1px 5px;
    position: sticky;
    bottom: 0;
    background-color: var(--color6);

}

.miniboton,
.boton {
    border: none;
    color: var(--color6);
    padding: 2px 5px;
    box-shadow: 4px 4px 5px var(--color6);
    background: linear-gradient(0deg, var(--color4) 38%, var(--color2) 73%);
    text-shadow: 0px 0px 1px var(--color6);
}

.miniboton:hover,
.boton:hover {
    box-shadow: 4px 4px 1px var(--color6);
    background: linear-gradient(0deg, var(--color2) 38%, var(--color4) 73%);
}

.miniboton {
    font-size: x-small;
}

.boton {
    font-size: small;
}


































/* Modificacion de definiciones responsivas */
/* ======================================== */

@media screen and (max-width: 800px) {
    .container {
        display: grid;

        gap: 10px;
        padding: 25px;
        grid-template-columns: 1fr auto;
        grid-template-rows: repeat(6, auto);
        grid-template-areas: "header header"
            "login saludo"
            "login errores"
            "links maincont"
            "links maincont"
            "grafiti grafiti"
            "footer footer"

        ;


        /* display: flex;
        flex-flow: column nowrap; */

    }

    /* .container .footer {
        flex-direction: column;
    }
    

    .container .header{
        display: flex;
        flex-direction: column;
    
    } */


}




@media screen and (max-width: 600px) {
    .container {
        display: grid;

        gap: 10px;
        padding: 25px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, auto);
        grid-template-areas: "header"
            "saludo"
            "errores"
            "login"
            "links"
            "maincont"
            "grafiti"
            "footer"

        ;


        /* display: flex;
        flex-flow: column nowrap; */

    }

    .container .footer {
        flex-direction: column;
    }


    .container .header {
        display: flex;
        flex-direction: column;

    }

}