/* IMPORTACIONES */

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab&display=swap');
/* ############################################## */

/* VARIABLES */

:root {
    --gris: #ddd;
    --grisclaro: #D6E0E233;
    /*con transparencia 20% */
    --grisoscuro: #555;
    --azulprofundo: #1B2944;
    --azulprofundo-medio: #374476;
    --azuloscuro: #2D418E;
    --azuloscuro-medio: #4659A4;
    --azulmedio: #2881E6;
    --azulclaro: #37D1F9;
    --azultenue: rgb(218, 238, 252);
    --azulclaro-rgb: 55, 209, 249;
    --azulmedio-rgb: 40, 129, 230;
    --altomenu: 4rem;
    --rojoclaro: #ffa420;
    --rojooscuro: #ff790d;
    --blanco: #ffffff;

}

/* ############################################## */

/* GENERALES */

html, body {
    font-size: min(calc(0.0025 * 100dvw + 13.2px), 20px);
    font-family: 'Open Sans', sans-serif;
    color: #777;
    scroll-behavior: smooth;
    background-image: linear-gradient(to bottom, #f5f8fd, #f6f9fd);
    margin: 0;
}

* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}

h1, h2, h3 {
    font-family: 'Roboto Slab', serif;
}

h1+p {
    font-size: 1.5rem;
    display: block;
    text-align: center;
    text-shadow: 2px 2px 2px black;
    color: white;
}

h1+p::first-letter {
    font-size: 1.5rem;
    color: white;
}

a {
    color: var(--azulclaro);
    text-decoration: none;
    /* padding: 0 0.5rem; */
}

a:hover {
    color: white;
    background-color: var(--azulclaro);
    text-decoration: none;
}

/*     p:first-child::first-letter{
        font-size: 125%;
        color: var(--azulclaro);
    } */

p {
    /* text-align: justify; */
    padding: 0 1rem;
}

section {
    padding-bottom: 3rem;
}

.plus {
    color: white;
    background-color: var(--azulclaro);
    text-decoration: none;
    margin-inline: 0.5rem;
    border-radius: 4px;
    transition: border-radius .3s ease;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5em;
    height: 1.5em;
    font-weight: bold;
    box-shadow: 0px 2px 2px var(--azuloscuro);
}

.plus:hover { 
    background-color: var(--azuloscuro); 
    border-radius: 50%;
}

.plus--invertido:hover { 
    background-color: var(--azultenue); 
    border-radius: 50%;
    color: var(--azulprofundo);
}


.no-visible {
    display: none;
}

.text-center {
    text-align: center;
}

.aviso {
    width: 80%;
    margin: 0.5rem auto 0.5rem auto;
    color: #fff;
    padding: 0.5rem 1rem 0.5rem 1rem;
    box-sizing: border-box;
    box-shadow: 2px 2px 3px #A18383;
    border-radius: 0px 40px 40px 40px;
    position: relative;
}

.aviso h4 {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5rem;
    border-bottom: 2px solid #fff;
    margin: 0 0 1rem 0;
    text-shadow: 2px 2px #333;
}

.aviso li {
    margin-bottom: .5rem;
}

.aviso p::first-letter {
    color: #fff;
}

.avisoClosebtn {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 1.25rem;
    transition: .5s;
    cursor: pointer;
}

.avisoClosebtn:hover {
    transform: rotate(360deg) scale(1.5);
}

.alerta {
    background: tomato;
    background-image: linear-gradient(to bottom right, #FF3300, #FF6347)
}

.exito {
    background: #66CC00;
}

/* ############################################## */

/* COLORES Y FONDOS */

.azulmedio {
    color: var(--azulmedio);
}

.azulclaro {
    color: var(--azulclaro);
}

.claro {
    color: #fff;
}

.gris {
    color: var(--gris);
}

.grisoscuro {
    color: var(--grisoscuro);
}

.grisclaro {
    color: var(--grisclaro);
}

.bg-fondo {
    background-image: linear-gradient(to bottom, #f5f8fd, #f6f9fd)
}

.bg-transparente {
    background-color: rgba(255, 255, 255, 0.9);
}

.bg-azulclaro {
    background-color: var(--azulclaro);
}

.bg-azulmedio {
    background-color: var(--azulmedio);
}

.bg-azultenue {
    background-color: var(--azultenue);
}

.bg-degradadoazul {
    /* background-image: linear-gradient(var(--azulmedio),var(--azulclaro)); */
    background-image: linear-gradient(52deg, rgba(163, 163, 163, 0.09) 0%, rgba(163, 163, 163, 0.09) 33.3%, rgba(100, 100, 100, 0.09) 33.3%, rgba(100, 100, 100, 0.09) 66.6%, rgba(162, 162, 162, 0.09) 66.6%, rgba(162, 162, 162, 0.09) 99%), linear-gradient(258deg, rgba(193, 193, 193, 0.06) 0%, rgba(193, 193, 193, 0.06) 33.3%, rgba(169, 169, 169, 0.06) 33.3%, rgba(169, 169, 169, 0.06) 66.6%, rgba(92, 92, 92, 0.06) 66.6%, rgba(92, 92, 92, 0.06) 99%), linear-gradient(129deg, rgba(45, 45, 45, 0.03) 0%, rgba(45, 45, 45, 0.03) 33.3%, rgba(223, 223, 223, 0.03) 33.3%, rgba(223, 223, 223, 0.03) 66.6%, rgba(173, 173, 173, 0.03) 66.6%, rgba(173, 173, 173, 0.03) 99%), linear-gradient(280deg, rgba(226, 226, 226, 0.06) 0%, rgba(226, 226, 226, 0.06) 33.3%, rgba(81, 81, 81, 0.06) 33.3%, rgba(81, 81, 81, 0.06) 66.6%, rgba(186, 186, 186, 0.06) 66.6%, rgba(186, 186, 186, 0.06) 99%), linear-gradient(85deg, rgba(225, 225, 225, 0.04) 0%, rgba(225, 225, 225, 0.04) 33.3%, rgba(95, 95, 95, 0.04) 33.3%, rgba(95, 95, 95, 0.04) 66.6%, rgba(39, 39, 39, 0.04) 66.6%, rgba(39, 39, 39, 0.04) 99%), linear-gradient(128deg, rgba(184, 184, 184, 0.06) 0%, rgba(184, 184, 184, 0.06) 33.3%, rgba(0, 0, 0, 0.06) 33.3%, rgba(0, 0, 0, 0.06) 66.6%, rgba(140, 140, 140, 0.06) 66.6%, rgba(140, 140, 140, 0.06) 99.89999999999999%), linear-gradient(323deg, rgba(40, 40, 40, 0.07) 0%, rgba(40, 40, 40, 0.07) 33.3%, rgba(214, 214, 214, 0.07) 33.3%, rgba(214, 214, 214, 0.07) 66.6%, rgba(190, 190, 190, 0.07) 66.6%, rgba(190, 190, 190, 0.07) 99.89999999999999%), linear-gradient(61deg, rgba(230, 230, 230, 0) 0%, rgba(230, 230, 230, 0) 33.3%, rgba(241, 241, 241, 0) 33.3%, rgba(241, 241, 241, 0) 66.6%, rgba(55, 55, 55, 0) 66.6%, rgba(55, 55, 55, 0) 99%), linear-gradient(0deg, #2625e3, #0bbaef);
}

.desaturado {
    filter: grayscale(70%);
}

.presentacion {
    background-image: url('../storage/images/fondos/presentacion.jpg');
}

.reconocimientos-socio {
    background-image: url('../storage/images/fondos/reconocimientos-socio.jpg');
}

.categorias-socio {
    background-image: url('../storage/images/fondos/categorias-socio.jpg');
}

.beneficios-socio {
    background-image: url('../storage/images/fondos/beneficios-socio.jpg');
}

.inscripcion-socio {
    background-image: url('../storage/images/fondos/inscripcion-socio.jpg');
}

.presidentes {
    background-image: url('../storage/images/fondos/presidentes.jpg');
}

.socios-honor {
    background-image: url('../storage/images/fondos/presidentes.jpg');
}

.colaboradores {
    background-image: url('../storage/images/fondos/empresas.jpg');
}

.congresos {
    background-image: url('../storage/images/fondos/congresos.jpg');
}

.congresos-2 {
    background-image: url('../storage/images/fondos/congresos-2.jpg');
}

.colaboracion {
    background-image: url('../storage/images/fondos/empresas.jpg');
}

.grados-fisica {
    background-image: url('../storage/images/fondos/grados-fisica.jpg');
}

.grados-optica {
    background-image: url('../storage/images/fondos/grados-optica.jpg');
}

.grados-ingenieria {
    background-image: url('../storage/images/fondos/grados-ingenieria.jpg');
}

.masteres-fotonica {
    background-image: url('../storage/images/fondos/masteres-fotonica.jpg');
}

.masteres-optometria {
    background-image: url('../storage/images/fondos/masteres-optometria.jpg');
}

.fondo-documental {
    background-image: url('../storage/images/fondos/fondo-documental.jpg');
}

.comites {
    background-image: url('../storage/images/fondos/comites.jpg');
}

.tablon-anuncios {
    background-image: url('../storage/images/fondos/tablon-anuncios.jpg');
}

.xlaniversario {
    background-image: url('../storage/images/fondos/xlaniversario.jpg');
}

.aniversarios {
    background-image: url('../storage/images/fondos/aniversarios.jpg');
}

.recursos-generales {
    background-image: url('../storage/images/fondos/recursos.jpg');
}

.recursos-publicacionesinformes {
    background-image: url('../storage/images/fondos/recursos-publicacionesinformes.jpg');
}

.grupos-investigacion {
    background-image: url('../storage/images/fondos/grupos-investigacion.jpg');
}

.actividades {
    background-image: url('../storage/images/fondos/actividades.jpg');
}

.optired {
    background-image: url('../storage/images/fondos/optired.jpg');
}

.gestion {
    background-image: url('../storage/images/fondos/gestion.jpg');
}

.appletsmathlab {
    background-image: url('../storage/images/fondos/applets-matlab.jpg');
}

/* ############################################## */


/* MENú PRINCIPAL */

/* Barra superior */

.mainmenu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: var(--altomenu);
    display: flex;
    align-items: center;
    padding-inline: 2rem;
    justify-content: space-between;
    background-color: transparent;
    
    /* animation: nav-scroll linear both;
    /* animation-timeline: scroll(root block);
    /* animation-range: 0 150px;   /* cambia entre 0 y 150px de scroll */
}

@keyframes nav-scroll {
  to {
    background-color: rgba(255, 255, 255, 0.9);
  }
}

.mainmenu--home {
}

.mainmenu--nohome {
    background-color: rgba(255, 255, 255, 0.9);
}



.btn-group {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1rem;
    
}

.btn-round {
    width: 40px;
    aspect-ratio: 1/1;
    padding: 10px;
    background-color: var(--azulprofundo);
    border-radius: 50%;
    color: var(--blanco);
    display:flex;
    justify-content: center;
    align-items: center;
    transition: transform .5s ease;
}

.btn-round:hover {
    background-color: var(--azulmedio);
}

.btn-round img {
    max-width:100%;
    display:block;
}

.btn-round img {
    width:100%;
    display:block;
}

.btn-round--spin:hover {
    transform: rotate(360deg);
}

.mainmenu__logo {
    display: flex;
    align-items: center;
    height: 90%;
    box-sizing:border-box;
    margin:0;
}

.mainmenu__logo img{
    height:100%;
    display:blok;
}

.mainmenu__logo:hover {
    cursor: pointer;
}


/* Overlay general */
.mainmenu__overlay-content {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    margin-block:auto;
    gap:1rem;
}

@media only screen and (max-width: 1100px) {
    .mainmenu__overlay-content {
        grid-template-columns: repeat(2,1fr);
    }
}

@media only screen and (max-width: 600px) {
    .mainmenu__overlay-content {
        grid-template-columns: 1fr;
    }
}

.mainmenu__overlay {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 20;
    width: 100%;
    height: 100%;
    background-color: var(--azulmedio);
    background-image: linear-gradient(to right, var(--azulprofundo-medio), var(--azulprofundo));
    overflow-x: hidden;
    transition: transform 0.5s ease-in-out;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.mainmenu__overlay-close {
    display:flex;
    justify-content: center;
    margin-bottom: 2rem;
    cursor: pointer;
}

.mainmenu__closebtn {
    font-size: 1rem;
    background-color: rgba(255,255,255,0.2);
    color: white;
    width:30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    transition: transform .5s ease;
}

.mainmenu__closebtn:hover {
    background-color: white;
    color: var(--azulprofundo);
    transform: scale(1.2);

}

.mainmenu__block {
    display:flex;
    justify-content: center;
}

.mainmenu__title {
    width:38%;
    text-align: right;
    font-size: 1rem;
    font-weight: bold;
    color: white;
}

.mainmenu__links {
    width:62%;
    list-style: none;
    font-size: 1rem;
    color: white;
    border-left: 2px solid rgba(255,255,255,0.7);
    padding:0 0 0 0.5rem;
}

.mainmenu__links li {
    margin-bottom:.5rem;
}

.mainmenu__links a {
    font-size: 1rem;
    color: white;
    padding:0;
}

.mainmenu__links a:hover {
    background-color: white;
    color: var(--azulprofundo);
}


/* ############################################## */

/* NOTICIAS, ACTIVIDADES, EVENTOS... */

/* Resumen */

.empleo-foto img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    filter: grayscale(.5);
    margin-bottom: 1rem;
}

.empleo-foto:hover img {
    filter: grayscale(0);
}

.empleo {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.empleo div.fecha {
    text-align: center;
    color: var(--azulclaro);
    border-right: 3px solid var(--azulclaro);
    box-sizing: border-box;
    padding: 0 1rem;
    flex: 0 0 7rem;
    height: 9rem;
}

.empleo div.fecha span {
    font-size: 1rem;
    display: block;
}

.empleo div.fecha span:first-of-type {
    font-size: 3rem;
    line-height:3rem;
    display: block;
    margin: 0;
}

.empleo div.fecha span:last-of-type {
    margin-bottom: .5rem;
}

.empleo div.contenido {
    font-size: .8rem;
    padding: 0 1rem;
    flex: 3 1 18rem;
}

.empleo div.contenido h3 {
    font-size: 1rem;
    margin: 0;
    margin-bottom: .4rem;
}

.empleo div.contenido p {
    text-align: justify;
    padding: 0;
    margin: 0;
}

.empleo div.contenido p::first-letter {
    font-size: 125%;
    color: var(--azulclaro);
}



/* ############################################## */

/* MEMORIAS ANUALES - MINI-CARD */

.minicard {
    box-sizing: border-box;
    padding: 0rem;
    width: 100%;
    height: 100%;
    display:flex;
    background: #FFFFFF;
    box-shadow: 0px 30px 30px rgba(102, 102, 102, 0.25);
}

.minicard__datos {
    width:75%;
    display:flex;
    flex-direction: column;
}

.minicard__titulo {
    border-left: 1rem solid var(--azuloscuro);
    padding: 1rem;
    margin:0;
    background-color: rgba(30, 144, 255, 0.1);
}

.minicard__info {
    border-left: 1rem solid var(--azulmedio);
    padding: 1rem 1rem 2rem 1rem;
    margin:0;
    background-color: vwhite;
    flex-grow: 1;
}

.minicard__img {
    width: 25%;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    background-image: linear-gradient(to bottom, var(--azulmedio), var(--azulprofundo));
}

.minicard__img img{
    width: 100%;
    filter:grayscale(100%) brightness(300%);
}

.minicard a {
    display:block;
}

.minicard p {
    margin-bottom: .5rem;
    margin-left:0;
    padding:0;
    font-size:1.25rem;
}


/* ############################################## */

/* FICHAS SOCIO HONOR, MIEMBRO JUNTA y EXPRESIDENTES */

.ficha-socio {
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 2rem 1.5rem 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: 10px;
}

.ficha-socio:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1B2944;
    background-image: linear-gradient(to right, #1B2944, #374477);
    clip-path: polygon(0 0, 100% 0%, 100% 20%, 50% 40%, 0 20%);
    z-index: -1;
}

.ficha-socio__cargo {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 3.5rem;
    text-transform: uppercase;
    font-weight: bold;
}
.ficha-socio__subcargo {
    position: absolute;
    top: 4.25rem;
}
.ficha-socio__subcargo p {
    font-size: .8rem;
    color: rgb(200, 231, 254);
    text-align: center;
    max-width: 33ch;
    margin-inline: auto;
}

.ficha-socio__foto {
    width: 180px;
    height: 180px;
    box-sizing: border-box;
    margin-bottom: 1rem;
    border-radius: 50%;
    border: 10px solid white;
    transition: transform 0.2s ease-out;
    overflow: hidden;
}

.ficha-socio img {
    width: 100%;
}

.ficha-socio:hover .ficha-socio__foto {
    transform: scale(1.1);
}

.ficha-socio__nombre {
    font-size: 1.2rem;
    line-height: 1.25rem;
    text-align: center;
    color: var(--azulmedio);
    margin-bottom: .5rem;
}

.ficha-socio__fallecido {
    font-size: .8rem;
    color: var(--azuloscuro-medio);
}

.ficha-socio__data {
    margin-bottom: 1rem;
}

.ficha-socio__data p {
    font-size: .9rem;
    color: #777;
    margin: 0;
    text-align: center;
}

.ficha-socio__email {
    text-align: center;
    display: block;
    width: 45px;
    height: 45px;
    padding: 0;
    margin: 0;
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 195, 255, 1);
    color: rgba(0, 195, 255, 1);
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: background-color .5s ease, color .5s ease, box-shadow .5s ease;
}

.ficha-socio__email:hover {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    color: white;
    background-color: rgba(0, 195, 255, 1);
}

.ficha-socio--blanqueado:before {
    background-color: #2D418E;
    background-image: linear-gradient(to right, #2D418E, #475AA5);
}

/* ############################################## */

/* FICHAS CONGRESO */

.congreso {
    border-radius: 10px;
    background-color: white;
    padding: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.congreso__header {
    background-color: rgba(0, 22, 63, 0.75);
    color: white;
    padding: 2.5rem;
    margin-bottom: 4rem;
    min-height: 475px;
    clip-path: polygon(0 0, 100% 0%, 100% 95%, 50% 100%, 0 95%);
}

.congreso__header h2 {
    margin-bottom: 2rem;
    text-align: center;
}

.congreso__header p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.congreso__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    padding: 1rem;
    margin-bottom: 2rem;
}

.congreso__body figure {
    margin: 0;
}

.congreso__body figcaption {
    text-align: center;
    font-size: .9rem;
}

.congreso__body img {
    width: 100%;
}

.congreso h3 {
    font-size: 1.1rem;
    text-align: center;
    margin-top: 1.5rem;
}

.congreso__footer {
    background-color: rgb(221, 221, 221);
    color: var(--grisoscuro);
    margin-top: auto;
    padding: 2.5rem;
    min-height: 350px;
}

.congreso a {
    text-decoration: none;
}

.congreso ul {
    list-style: none;
}

.congreso li {
    margin-bottom: .6rem;
}

/* ############################################## */

/* FICHAS RECONOCIMIENTO SOCIOS */

.reconocimientos__info {
    padding: 0;
    background-color: rgb(249, 249, 249);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
}

.reconocimientos__info h2 {
    margin: 0;
    padding: 1.5rem;
    font-size: 1.5rem;
    text-align: center;
}

.reconocimientos__info figure {
    margin: 0;
    padding: 0;
    width: 100%;
}

.reconocimientos__info img {
    width: 100%;
}

.reconocimientos__info div {
    width: 100%;
    padding: 2rem;
}

.reconocimientos__info h3 {
    font-size: 1.1rem;
    color: var(--azulmedio);
    padding: 0;
    margin: 0;
    margin-bottom: .9rem;
}

.reconocimientos__info h3:not(:first-child) {
    margin-top: 2rem;
}

.reconocimientos__info p {
    color: grey;
    font-size: 1rem;
    text-decoration: none;
    padding: 0;
}

.reconocimientos__info a {
    color: grey;
    font-size: 1rem;
    text-decoration: none;
    padding: 0;
}

.reconocimientos__info a:hover {
    color: rgba(2, 152, 197, 1);
    background-color: white;
    font-size: 1rem;
    text-decoration: none;
    padding: 0;
}

/* ############################################## */

/* LOGOTIPOS */

.logotipo {
    background: none;
    filter: grayscale(100%)
}

.logotipo:hover {
    background: none;
    filter: grayscale(0%);
}

/* ############################################## */

/* EDUCACIÓN */

/* Pequeños */

.master {
    display: flex;
    align-items: center;
    margin: .5rem;
    background-color: white;
    box-shadow: -5px 0 var(--azultenue) inset;
    transition: 1s;
}

.master .imagen {
    display: inline-block;
    overflow: hidden;
    padding: .5rem;
}

.master img {
    display: block;
    width: 100%;
    max-width: 150px;
    transition: transform .5s ease;
}

.master .master-info {
    text-align: left;
    display: inline-block;
    box-sizing: border-box;
    padding: 1rem;
    border-left: 1px solid var(--gris);
    width: 100%;
}

.master:hover {
    box-shadow: -1000px 0 var(--azultenue) inset;
}

.master:hover img {
    transform: scale(1.1);
}

.master h3 {
    font-size: 1rem;
    margin: 0;
}

/* Grandes */

.master-big {
    background-color: white;
    box-shadow: 0 -5px var(--azultenue) inset;
    transition: all 1s;
    border: 1px solid var(--gris);
    ;
}

.master-big:hover {
    box-shadow: 0 -300px var(--azultenue) inset;
}

.master-big .imagen {
    display: block;
    overflow: hidden;
    padding: 0.5rem;
    background-color: transparent;
    text-align: center;
}

.master-big img {
    width: 100%;
    max-width: 300px;
    transition: transform .5s ease;
}

.master-big .master-info {
    display: inline-block;
    box-sizing: border-box;
    padding: 1rem;
    width: 100%;
}

.master-big:hover img {
    transform: scale(1.1);
}

.master-big h3 {
    font-size: 1rem;
    margin: 0;
}

.master-big a {
    font-size: .9rem;
    text-decoration: none;
}

/* ############################################## */

/* MEMORIAS ANUALES - SIDE-CARD */

.sidecard {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.sidecard div.portada {
    display: inline-block;
    padding: 1rem;
    width: 50%;
    border: 1px solid var(--gris);
    background-color: white;
    background-image: linear-gradient(to bottom, var(--azulclaro) 0%, var(--azulmedio) 100%);
    background-size: 100% 0%;
    transition: all .5s ease-in;
    background-repeat: no-repeat;
    text-align: center;
}

.sidecard:hover div.portada {
    background-size: 100% 100%;
}

.sidecard img {
    width: 100%;
    display: block;
    transition: all .5s ease-in;
}

.sidecard:hover img {
    border: 5px solid white;
    border-radius: 50%;
    filter: grayscale(100%);
    transform: scale(.76);
    background-color: white;
}

.sidecard span {
    font-size: 1.5rem;
    color: var(--azulmedio);
    display: block;
}

.sidecard:hover span {
    color: white;
}

.sidecarda:hover {
    color: white;
    background-color: var(--azulclaro);
}

.sidecard i {
    font-size: 2rem;
    display: block;
    margin-top: 1rem;
    transition: all .5s ease-in;
    background: none;
}

.sidecard:hover i {
    transform: rotate(-90deg);
    color: white;
}

.sidecard div.fechas {
    display: inline-block;
    width: 45%;
    padding: 1rem;
    column-count: 2;
    box-shadow: 2px 2px 5px rgba(127, 127, 127, 0.4);
    text-align: center;
    align-self: center;
    transform: scale(0);
    transition: 1s ease;
    position: relative;
    background-color: white;
}

.sidecard div.fechas::before {
    content: '';
    display: block;
    border-top: 20px solid transparent;
    border-right: 20px solid white;
    border-bottom: 20px solid transparent;
    position: absolute;
    top: calc(50% - 20px);
    left: -1rem;
}

.sidecard:hover div.fechas {
    padding: 1rem;
    column-count: 2;
    box-shadow: 2px 2px 5px rgba(127, 127, 127, 0.4);
    text-align: center;
    align-self: center;
    transform: scale(1);
}

.sidecard a {
    font-size: 1rem;
    display: block;
    transition: all .3s ease-in;
}

/* ############################################## */

/* FICHAS CONGRESO */

.congreso-info {
    height: 100%;
    width: 100%;
}

.congreso-info p:first-letter {
    color: white;
}

.congreso-info ul {
    list-style: none;
}

.congreso-info ul li::before {
    content: "\2680";
    /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: var(--azulclaro);
    /* Change the color */
    font-weight: bold;
    /* If you want it to be bold */
    display: inline-block;
    /* Needed to add space between the bullet and the text */
    width: 1em;
    /* Also needed for space (tweak if needed) */
    margin-left: -1em;
    /* Also needed for space (tweak if needed) */
}

/* ############################################## */

/* FICHAS DE COMITES Y GRUPOS DE INVESTIGACIÓN */

.comite {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 0.25rem solid var(--grisclaro);
    border-radius: 2%;
    box-shadow: 4px 4px 15px -6px rgba(0, 0, 0, 0.58);
}

.comite img {
    width: 100%;
    height: 100%;
}

.comite div.masinfo {
    color: white;
    background-image: linear-gradient(var(--azulmedio), var(--azulclaro));
    position: absolute;
    padding: 1rem;
    top: 0;
    left:0;
    inset:0;
    transform:translateY(100%);
    transition: all .5s;
    box-sizing: border-box;

}

.comite:hover div.masinfo {
    transform:translateY(0%);
}

.comite div.scroll {
    width: 100%;
    height: 100%;
        overflow-y:auto;
        scrollbar-width:none;
}

.comite h2 {
    font-size: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid white;
    margin-bottom: 1rem;
    margin-top: 0;
    text-transform: uppercase;
    text-align: center;
}

.comite p {
    border-bottom: 1px solid white;
    padding: 0 0 .5rem 0;
    font-size: .9rem;
    text-align: left;
}

.comite span {
    text-align: left;
    display: block;
    font-size: .9rem;
}

.comite span.puestocomite {
    font-weight: 800;
    margin-top: 0.5rem;
}

.comite div.botones {
    position: absolute;
    width: 100%;
    height: 3rem;
    text-align: center;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    padding-top: .5rem;
}

.comite div.botones a span {
    position: absolute;
    bottom: 140%;
    left: 0;
    padding: 0.5rem;
    background: #fff;
    color: var(--azulmedio);
    line-height: 1rem;
    font-size: .8rem;
    z-index: 1;
    visibility: hidden;
    text-align: center;
    box-shadow: 1px 1px 1px #333;
    border-radius: 5px;
}

.comite div.botones a:hover span {
    visibility: visible;
}

.comite div.botones a span::before {
    content: '';
    border-top: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: 100%;
    left: calc(50% - 15px);
}

.comite a {
    background: none;
}

.comite i {
    background-color: white;
    color: var(--azulmedio);
    border-radius: 2px;
    font-size: 1rem;
    line-height: 2rem;
    padding: 0 .5rem;
    margin: 0 .75rem;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    transition: border-radius .3s ease;
}

.comite div.botones a:hover i {
    border-radius:50%;
}

.comite i:active {
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
    transform: translate(1px, 1px);
}

.comite i.naranja {
    background-color: darkorange;
    color: white;
}

.comite div.botones>div {
    display: inline-block;
    transform: translateY(3rem);
    transition: all .3s;
}

.comite:hover div.botones>div:nth-child(1) {
    transform: translateY(0);
    transition-delay: .5s;
}

.comite:hover div.botones>div:nth-child(2) {
    transform: translateY(0);
    transition-delay: .6s;
}

.comite:hover div.botones>div:nth-child(3) {
    transform: translateY(0);
    transition-delay: .7s;
}

.comite:hover div.botones>div:nth-child(4) {
    transform: translateY(0);
    transition-delay: .8s;
}

.comite:hover div.botones>div:nth-child(5) {
    transform: translateY(0);
    transition-delay: .9s;
}

/* ############################################## */

.tiposocio {
    text-align: center;
    padding: 3rem 0;
    
    p { padding-top: 1rem; }
}

/* ############################################## */

/* RECURSOS... */

.recurso-foto img {
    display: block;
    width: 100%;
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    filter: grayscale(.5);
    margin-bottom: 1rem;
}

.recurso .foto-fecha > div {
    position:relative;  
    font-size: 1.5rem;
}

.recurso .foto-fecha .plus {
    position:absolute;
    inset:0;
    margin:auto;
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
}

.recurso-foto:hover img {
    filter: grayscale(0);
}

.recurso {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.recurso div.fecha {
    text-align: center;
    color: var(--azulclaro);
    border-right: 3px solid var(--azulclaro);
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    flex: 0 0 2rem;
    height: 8rem;
}

.recurso div.fecha span {
    font-size: 0.85rem;
    display: block;
}

.recurso div.fecha span:first-of-type {
    font-size: 2rem;
    display: block;
    margin: 0;
}

.recurso div.contenido {
    padding: 1rem;
    flex: 3 1 18rem;
    position: relative;
}

.recurso div.contenido h3 {
    font-size: 1.1rem;
    margin: 0;
}

.recurso div.contenido p {
    font-size: 0.90rem;
    text-align: justify;
    padding: 0;
    margin: 0;
}

.recurso div.contenido p::first-letter {
    font-size: 125%;
    color: var(--azulclaro);
}

.recurso div.contenido p strong {
    color: var(--azulclaro);
}

.recurso div.contenido p.descripcion {
    font-size: 1rem;
}

.recurso div.contenido p:first-of-type {
    margin-top: 0.5rem;
}

.foto-fecha {
    border-right: 3px solid var(--azulclaro);
    padding-right: 1.5rem;
}

.foto-fecha img {
    display: block;
    width: 100%;
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    filter: grayscale(.5);
    margin-bottom: 1rem;
}

.foto-fecha:hover img {
    filter: grayscale(0);
}

/* ############################################## */

.optired__grid {
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 2rem;
}

.optired__ol {
    padding: 0 0.5rem;
}

.optired__ol li {
    margin: .5rem 0;
}

.optired__rgpd {
    display: flex;
    align-items: center;
}

.optired__rgpd img {
    width: 100%;
}

/* ############################################## */

.estado-socios, .tipo-tablon, .tabcontent {
    margin: 1rem auto;
    width: 95%;
}

.estado-socios, .tipo-tablon {
    text-align: center;
}

.tabmenu {
    display: inline-block;
    line-height: 2rem;
    font-size: 1.25rem;
    color: white;
    padding: 0 0.5rem;
    margin: 0.5rem;
    background: var(--azulclaro);
    transition: 0.5s;
    box-shadow: 1px 0px var(--azulmedio) inset, 1px 1px 3px #999;
    border-radius: 5px;
    width: 140px;
    text-align: center;
}

.tabmenu.active {
    background: var(--azulmedio);
}

.tabmenu:hover {
    background: var(--azulmedio);
    box-shadow: 140px 0px var(--azulmedio) inset, 1px 1px 3px #999;
}

.nuevoregistro {
    display: inline-block;
    line-height: 2rem;
    font-size: 1.25rem;
    color: white;
    padding: 0 0.5rem;
    margin: 0.5rem;
    background: var(--rojoclaro);
    transition: 0.5s;
    box-shadow: 1px 0px var(--rojooscuro) inset, 1px 1px 3px #999;
    border-radius: 5px;
    width: 140px;
    text-align: center;
}

.nuevoregistro:hover {
    background: var(--rojooscuro);
    box-shadow: 140px 0px var(--rojooscuro) inset, 1px 1px 3px #999;
}

.socios-acciones, .tablon-visible {
    line-height: 2rem;
    font-size: 1rem;
    color: white;
    padding: 0 0.5rem;
    background: var(--azulclaro);
    transition: 0.5s;
    box-shadow: 1px 0px var(--azulmedio) inset, 1px 1px 3px #999;
    border-radius: 5px;
    text-align: center;
}

.socios-acciones:hover, .tablon-visible:hover {
    background: var(--azulmedio);
    box-shadow: 50px 0px var(--azulmedio) inset, 1px 1px 3px #999;
}

.socios-boton {
    line-height: 2rem;
    font-size: 1.25rem;
    color: white;
    padding: .5rem 1rem;
    background: var(--azulmedio);
    transition: 0.5s;
    box-shadow: 1px 0px var(--azulclaro) inset, 1px 1px 3px #999;
    border-radius: 5px;
    text-align: center;
    margin: 1rem;
}

.socios-boton:hover {
    background: var(--azulclaro);
    box-shadow: 300px 0px var(--azulclaro) inset, 1px 1px 3px #999;
}

.socios-boton-small {
    line-height: 1rem;
    font-size: 1rem;
    color: white;
    padding: .5rem 1rem;
    background: var(--azulmedio);
    transition: 0.5s;
    box-shadow: 1px 0px var(--azulclaro) inset, 1px 1px 3px #999;
    border-radius: 5px;
    text-align: center;
    margin: 0.5rem;
}

.socios-boton-small:hover {
    background: var(--azulclaro);
    box-shadow: 300px 0px var(--azulclaro) inset, 1px 1px 3px #999;
}

.eliminar {
    background: var(--rojooscuro);
    box-shadow: 1px 0px var(--rojoclaro) inset, 1px 1px 3px #999;
}

.tablon-novisible {
    line-height: 2rem;
    font-size: 1rem;
    color: white;
    padding: 0 0.5rem;
    background: var(--rojooscuro);
    transition: 0.5s;
    box-shadow: 1px 0px var(--rojoclaro) inset, 1px 1px 3px #999;
    border-radius: 5px;
    text-align: center;
}

.eliminar:hover, .tablon-novisible:hover {
    background: var(--rojoclaro);
    box-shadow: 100px 0px var(--rojoclaro) inset, 1px 1px 3px #999;
}

.inputfrm .basicotablon {
    font-size: 1rem;
    border: none;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='blue' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
}

.imagenfrm {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.imagenfrm div {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
}

.imagenfrm img {
    width: 100%;
    margin: 10px;
}

.imagenfrm .inputfrm {
    flex: 0 0 auto;
    border: 1px solid var(--gris);
    padding: .75rem;
    background: #fff;
    margin-left: 1.5rem;
}

.imagenfrm .subirfichero {
    flex: 0 0 auto;
    border: 1px solid var(--gris);
    background: #fff;
    margin: 10px;
    margin-left: 1.5rem;
    text-align: center;
}

.imagenfrm .extfrm {
    display: flex;
    flex-direction: row;
}

.inputfrm input[type="date"], .inputfrm textarea {
    font-family: 'Open Sans', sans-serif;
}

.subirfichero [type="file"] {
    height: 0;
    width: 0;
    overflow: hidden;
}

.subirfichero [type="file"]+label {
    display: inline-block;
    line-height: 2rem;
    font-size: 1.25rem;
    margin: 1rem;
    padding: 0 .5rem;
    color: #fff;
    border-radius: 5px;
    background: var(--azulmedio);
    box-shadow: 1px 1px 3px #999;
    cursor: pointer;
}

/* #############  GESTION DE MIEMBROS ################################# */

legend input {
    width: 19rem;
    border: none;
    font-size: 1rem;
    color: var(--azulmedio);
}

.fotografia {
    padding: 0.5rem;
    display: flex;
    flex: 15%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}

.fotografia img {
    box-shadow: 0 0 0 7px #fff, 0 0 0 8px #ccc, 0 18px 18px -12px #000;
    margin: 0.5rem;
    width: 100%;
}

.campos {
    flex: 70%;
    display: flex;
    flex-wrap: wrap;
}

.inputfrmboton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 2rem;
}

.recursos-datos div:nth-child(1) {
    flex: 80;
}

.recursos-datos div:nth-child(2), .recursos-datos div:nth-child(3) {
    flex: 5;
}

.recursos-img {
    flex: 1 1 200px;
}

.recursos-img>div:nth-child(1) {
    display: flex;
    flex: 30;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}

.recursos-img>div:nth-child(2) {
    flex: 60;
    display: flex;
    flex-wrap: wrap;
}

.recursos-img .entrevistas {
    width: 300px;
    height: 200px;
}

.recursos-img .publicaciones {
    width: 200px;
    height: 300px;
}

.recursos-img img {
    display: block;
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    filter: grayscale(.5);
}

.inputfrmboton-banner {
    margin: 1rem auto 1rem auto;
}

.fotografia-banner {
    /* margin-top:0.6rem; */
    display: flex;
    /* flex:10;  */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
}

.fotografia-banner img {
    box-shadow: 0 0 0 7px #fff, 0 0 0 8px #ccc, 0 18px 18px -12px #000;
    margin: 1rem 0 0.2rem 0;
    width: 90%;
}

/*********** FORMULARIO LOGIN ***************/

.login-frm {
    height: 100vh;
    background: #ffffff url('../storage/images/fondos/login.jpg') no-repeat center center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-frm h2 {
    text-align: center;
}

.login-frm-contenido {
    box-sizing: content-box;
    box-shadow: 4px 4px 4px #333;
    border-radius: 5px;
    background-color: white;
    padding: 1rem;
    flex: 0 1 400px;
    max-width: 500px;
}

.login-frm-contenido-reset {
    width: 400px;
}

.login-frm-contenido button[type=submit] {
    background-color: var(--azulmedio);
    color: white;
    padding: 0.3rem;
    margin: 1rem auto;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.login-frm-contenido button[type=submit]:hover {
    opacity: 1;
}

span.forgotpsw {
    float: right;
}

.login-frm-contenido p {
    color: white;
    background: #66CC00;
    background-image: linear-gradient(to bottom right, #4CAF50, #66CC00);
    text-align: center;
    line-height: 2rem;
    border-radius: 5px;
    padding: .5rem;
}

.login-frm-contenido p:first-letter {
    color: white;
}

.listados-select {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.5rem;
}

.listado {
    margin-top: 2rem;
}

.subirdocumento [type="file"] {
    /*   height: 0;
    width: 0;
    overflow: hidden; */
}

.subirdocumento [type="file"]+label {
    display: inline-block;
    line-height: 2rem;
    font-size: 1.25rem;
    margin: 1rem;
    padding: 0 .5rem;
    color: #fff;
    border-radius: 5px;
    background: var(--azulmedio);
    box-shadow: 1px 1px 3px #999;
    cursor: pointer;
}

.socio-estado {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 2.5rem;
    background: var(--azulmedio);
    color: white;
}

.socio-estado a {
    padding: 0.25rem 1rem;
}

.inputfrm-docs {
    /* display:flex;
    justify-content: center;
    align-items: flex-start;  */
    /* flex: 1 0 300px; */
    text-align: center;
    border: 1px solid var(--gris);
    padding: .75rem;
    background: #fff;
    margin: 10px;
}

.inputfrm-docs label {
    /* display:block; */
    margin: 0;
    padding: 0;
    color: var(--azulmedio);
    font-size: .75rem;
    transition: .3s;
}

.actividades-nombre {
    font-size: 1.75rem;
    margin-top: 3rem;
    /* margin-bottom:3rem; */
    line-height: 2rem;
    border-bottom: 1px solid var(--azulmedio);
    text-align: center;
}

.actividades-nombre h2, .actividades-nombre p {
    margin: 0;
}

.actividades-nombre h4 {
    margin-top: 1rem;
}

.actividades-nombre p {
    text-align: center;
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.nota-obligatorios {
    color: red;
    text-align: right;
    padding-right: 2rem;
}

.nota-obligatorios::first-letter {
    color: red;
}

.inputfrm-grupos {
    text-align: center;
}

.mensaje-login {
    margin: 0;
    padding: 0.5rem 1rem;
    color: white;
    background: #ffa420;
    text-align: center;
    max-width: 400px;
    border-radius: 5px;
}

.aviso-legal {
    margin: 1rem;
    padding: 0 1rem;
}

.aviso-legal h2 {
    font-size: 1.75rem;
    margin-top: 3rem;
    line-height: 2rem;
    border-bottom: 1px solid var(--azulmedio);
    text-align: center;
}

.aviso-legal h3 {
    padding: 0;
    margin-top: 2rem;
    margin-bottom: 0;
}

.aviso-legal ul {
    margin: 0 0 0 3rem;
    list-style-type: disc;
    color: black;
}

.aviso-legal p {
    padding: 0;
    margin: 0.5rem 0;
    color: #777;
}

.bloqueimagen-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.bloqueimagen-col div {
    flex: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bloqueimagen-col img {
    display: block;
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    filter: grayscale(.5);
    margin-bottom: 1rem;
}

.logo-col {
    width: 350px;
    height: 213px;
}

.imagen-col {
    width: 213px;
    height: 213px;
}

.newcolaborador {
    text-align: right;
    margin-right: 1.75rem;
}

.fotogrupoi {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}

.fotogrupoi div {
    margin: auto;
}

.fotogrupoi img {
    width: 250px;
    height: 250px;
    display: block;
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    filter: grayscale(.5);
}

.fotogrupoi .subirfichero {
    margin-bottom: 0.75rem;
}

.fichagrupoi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.fichagrupoi>div {
    flex: 70;
}

.fichagrupoi>div:last-child {
    flex: 30;
    margin-top: 0.5rem;
    text-align: center;
}

.tabla-botones {
    height: 2.35rem !important;
    ;
    color: #777 !important;
}

.normativa {
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: auto auto;
    gap: 2rem;
}

.normativa__card {
    background-color: white;
    padding: 1rem;
    border: 1px solid var(--gris);
    margin-bottom: .5rem;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1);
    display:grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap:1rem;
}

.normativa__subcard {
    display: flex;
    flex-grow: 1;
}

.normativa__grupo {
    color: var(--azulmedio);
    margin-top: 0;
    padding-bottom: .5rem;
    font-size: 1.2rem;
    font-weight: bold;
    border-bottom: 1px solid grey;
    text-transform: uppercase;
    
}

.normativa__contenido {
    display:flex;
    flex-direction: column;
}

.normativa__titulo, .normativa__titulo::first-letter {
    font-size: 1rem;
    margin: 0;
    margin-bottom: .5rem;
    color: var(--grismedio);
}

.normativa__subtitulo, .normativa__subtitulo::first-letter {
    font-size: .8rem;
    color: rgb(158, 158, 158);
    margin: 0;
}

.normativa__titulo {
    flex-grow:0;
 }

.normativa__subtitulo {
   flex-grow:1;
}

.normativa__link-group{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.25rem;
}

.normativa__icono {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: var(--azulmedio);
    border-radius: 5px;
}

.normativa__enlace {
    font-size: .5rem;
    color: var(--azuloscuro);
}

.vote-card {
    width: 600px;
    margin: 2rem auto 11rem;
    background-color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    border-radius: 25px;
}

.vote-card__cabecera {
    background-color: var(--azulmedio);
    padding: 2rem 1rem 2rem 3rem;
    position: relative;
    border-radius: 25px 25px 0 0;
}

.vote-card__cabecera::after {
    content: '';
    width: 104px;
    height: 104px;
    position: absolute;
    background-color: white;
    background-image: url('/storage/images/sedoptica-logo-mini.svg');
    background-position: -10px -4px;
    border: 5px solid white;
    border-radius: 50%;
    top: 5px;
    left: -52px;
    box-shadow: 2px 2px 5px grey;
}

.vote-card__titulo {
    color: white;
    font-size: 1.5rem;
    display: block;
    text-align: center;
}

.vote-card__subtitulo {
    color: rgb(1, 44, 136);
    font-size: 1rem;
    display: block;
    text-align: center;
    font-weight: bold;
}

.vote-card__comments {
    width: 600px;
    margin: 4rem auto;
}

.vote-card__texto {
    font-size: 1rem;
    margin-bottom: .5rem;
}

.vote-card__body {
    display: flex;
    justify-content: space-around;
    margin: 2rem 0 0 0;
}

.vote-card__grupo {
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
    text-align: center;
    color: rgb(1, 44, 136);
    position: relative;
}

/* Hide the browser's default radio button */

.vote-card__grupo input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */

.vote-card__checkmark {
    position: relative;
    margin: 1rem auto;
    display: block;
    height: 80px;
    width: 80px;
    background-color: white;
    border: 1px solid var(--azulmedio);
}

/* On mouse-over, add a grey background color */

.vote-card__checkmark:hover {
    background-color: var(--azulclaro);
}

/* When the radio button is checked, add a blue background */

.vote-card__grupo input:checked~.vote-card__checkmark {
    background-color: var(--azulmedio);
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.vote-card__checkmark:after {
    content: "\f00c";
    font-family: "font awesome 5 free";
    font-size: 2rem;
    color: white;
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */

.vote-card__grupo input:checked~.vote-card__checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */

.vote-card__grupo .vote-card__checkmark:after {
    top: 20px;
    left: 25px;
}

.vote-card__boton {
    margin: auto;
    background-color: var(--azulclaro);
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 15px;
    line-height: 3rem;
    padding: 0 2rem;
    border: 5px solid white;
    display: block;
    box-shadow: 2px 2px 5px grey;
    position: relative;
    top: 35px;
    transition: all .3s;
    -webkit-appearance: none;
}

.vote-card__boton:hover {
    background-color: var(--azulmedio);
    box-shadow: 0px 0px 2px grey;
    position: relative;
    top: 40px;
}

.vote-card__candidate {
    display: flex;
    margin: 2rem auto;
    width: 600px;
    color: #777;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    margin-bottom: 4rem;
    align-items: center;
}

.vote-card__candidate * {
    margin: 0;
    padding: 0;
}

.vote-card__candidate img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.vote-card__candidate div {
    margin-left: 1.5rem;
    font-size: 1rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgb(155, 154, 154);
}

.vote-card__candidate div p::first-letter {
    font-size: 1rem;
    color: #777;
}

.vote-card__candidate div p:first-child::first-letter {
    font-size: 1rem;
    color: var(--azulmedio);
}

.vote-card__candidate div p:last-child {
    margin-bottom: 2rem;
}

.vote-card__candidate-titulo {
    font-size: 1.1rem;
    color: var(--azulmedio);
}

.vote-card__candidate-nombre {
    font-weight: bold;
}

.vote-card__candidate-datos {
    font-size: .8rem;
}

.vote-card__candidate-enlace {
    font-size: .8rem;
}

.vote-card__separador {
    color: var(--azulmedio);
    width: 75%;
    margin: auto;
    margin-bottom: 4rem;
}

.bargraph2__container * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.bargraph2__container {
    padding: 4rem;
    background-color: whitesmoke;
    margin: 6rem auto;
    background-image: linear-gradient(to bottom, whitesmoke, whitesmoke 790px, rgb(233, 233, 233) 810px, rgb(225, 225, 225));
}

.bargraph2 {
    margin: 5rem auto;
    position: relative;
    z-index: 10;
    width: 52vw;
    min-width: 300px;
    max-width: 800px;
    height: 500px;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    );
}

.bargraph2__titulo {
    text-align: center;
    font-size: 2rem;
    line-height: 3.5rem;
    text-transform: uppercase;
    color: #0B8EA5;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: linear-gradient(to right, whitesmoke 40%, grey 40%, grey 60%, whitesmoke 60%);
}

.bargraph2__subtitulo {
    text-align: center;
    font-size: 1.2rem;
    color: #747575;
    margin-bottom: 200px;
    margin-top: .5rem;
    ;
}

.bargraph2__bar {
    position: relative;
    bottom: 15px;
    background-image: linear-gradient(to right, rgba(2, 152, 197, 1), rgba(0, 195, 255, 1), rgba(59, 208, 253, 1), rgba(0, 195, 255, 1), rgba(2, 152, 197, 1));
    width: 50px;
    border-bottom-left-radius: 30px 12px;
    border-bottom-right-radius: 30px 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.bargraph2__bar::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: -10px;
    background-color: rgb(162, 189, 194);
    width: 70px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgb(165, 165, 165);
    z-index: -1;
}

.bargraph2__bar::after {
    content: '';
    position: absolute;
    top: -10px;
    background-color: rgb(25, 94, 95);
    width: 50px;
    height: 20px;
    border-radius: 50%;
}

.bargraph2__valor {
    color: rgb(25, 94, 95);
    position: absolute;
    top: -100px;
    left: -25%;
    font-weight: bold;
    background-color: whitesmoke;
    width: 150%;
    text-align: center;
    font-size: 2rem;
    line-height: 1.7rem;
    padding: .3rem 0;
}

.bargraph2__valor::before {
    content: '';
    background-color: #666;
    width: 2px;
    height: 160%;
    position: absolute;
    top: -35%;
    left: 50%;
    z-index: -1;
}

.bargraph2__valor::after {
    content: '';
    background-color: #666;
    width: 8px;
    height: 8px;
    position: absolute;
    top: -45%;
    left: calc(50% - 3px);
    border-radius: 50%;
}

.bargraph2__subvalor {
    display: block;
    font-size: .9rem;
    color: rgb(173, 173, 173);
}

.bargraph2__leyenda {
    color: whitesmoke;
    position: absolute;
    left: -25%;
    bottom: -50px;
    font-weight: bold;
    width: 150%;
    text-align: center;
    font-size: .9rem;
    letter-spacing: 1px;
    line-height: 1.5rem;
    ;
    background-color: rgb(25, 94, 95);
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgb(179, 178, 178);
    ;
}

.bargraph2__leyenda-titulo {
    text-align: center;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #0B8EA5;
}

.bargraph2__leyenda-subtitulo {
    text-align: center;
    font-size: .9rem;
    color: #747575;
    margin-top: .2rem;
}

.estadisticas {
    margin: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    grid-template-rows: 400px;
    grid-auto-rows: 400px;
    grid-gap: 1rem;
}

.estadisticas__placas {
    height:360px;
    width:250px;
    margin:auto !important;
    box-sizing: border-box;
}

.estadisticas__placa {
    position:relative;
    width:100%;
    height:120px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 0;
    color: white;
    padding: 1rem;
}

.estadisticas__placa--1 {
    background-color: var(--azulmedio);
}

.estadisticas__placa--1::before {
   content:"\f0ac";
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   position:absolute;
   top: 0;
   right: 1rem;
   height:100%;
   display:flex;
   flex-direction: column;
   justify-content: center;
   font-size:4rem;
   line-height: 4rem;
   opacity:.1;
}

.estadisticas__placa--2 {
    background-color: var(--azuloscuro);
}

.estadisticas__placa--2::before {
    content:"\f007";
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    position:absolute;
    top: 0;
    right: 1rem;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    font-size:4rem;
    line-height: 4rem;
    opacity:.1;
 }

.estadisticas__placa--3 {
    background-color: var(--azulprofundo);
}


.estadisticas__placa--3::before {
    content:"\f542";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position:absolute;
    top: 0;
    right: 1rem;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    font-size:4rem;
    line-height: 4rem;
    opacity:.1;
 }

 .estadisticas__placa--4 {
    background-color: var(--azulprofundo);
}


.estadisticas__placa--4::before {
    content:"\f15c";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position:absolute;
    top: 0;
    right: 1rem;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    font-size:4rem;
    line-height: 4rem;
    opacity:.1;
 }

.estadisticas__placa__valor {
    font-size: 2rem;
    font-weight:bold;
    margin:0;
}

.estadisticas__placa__titulo {
    font-size: .7rem;
    font-weight: bold;
    opacity:.7;
    margin:0;
}

.estadisticas__year {
    font-size:14px;
    color: white;
    background-color:var(--azulmedio);
}

.estadisticas__year:hover {
    font-size:14px;
    background-color:var(--azulprofundo-medio);
}

.estadisticas__year--active {
    background-color:var(--azuloscuro);
}

.estadisticas__year--active:hover {
    background-color:var(--azulprofundo);
}

.estadisticas__tabla {
    box-sizing: border-box;
    margin:auto !important;
    width:100%;
    max-width: 300px;
    height:100%;
    display:flex;
    justify-content: flex-start;
    position:relative;
    padding: 15px;
    background-color: white;
    box-shadow: 0 0 20px rgba(127,127,127,0.5);
    border-radius:15px;
}

.estadisticas__tabla::after {
    box-sizing: border-box;
    width:100%;
    content: attr(data-tooltip);
    position:absolute;
    top: 0;
    left: 0;
    padding:1rem;
    font-size:14px;
    text-align: center;
    color: var(--azulprofundo);
    text-transform: uppercase;
    background-color: white;
    font-weight: bolder;
    border-radius:15px;
}

.estadisticas__columna {
    width:20px;
    flex-grow: 0;
    display:flex;
    flex-direction: column;
    margin:2px;
    background-color: #F5F8FD;
}

.estadisticas__columna__barra {
    width:100%;
    background-image: linear-gradient(to top, var(--azulmedio), var(--azulclaro));
    background-color: var(--azulmedio);
    margin-top:auto;
    position:relative;
}

.estadisticas__columna__barra:hover {
    background-color: var(--azulprofundo);
    background-image: none;
}

.estadisticas__columna__barra:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -40px;
    left:10px;
    transform: translateX(-50%);
    padding:5px;
    border-radius: 5px;
    background-color: var(--azulprofundo);
    color:white;
    font-size: .8rem;
    z-index:1;
    box-shadow: 0 0 5px rgba(100,100,100, .5);
}

.estadisticas__columna__barra:hover::before {
    content: '';
    position: absolute;
    transform: translateX(-50%) rotate(45deg);
    top: -16px;
    left:10px;
    width:10px;
    height: 10px;
    background-color: var(--azulprofundo);
    z-index:1;
}

.estadisticas__columna__mes {
    width:100%;
    color: rgb(40, 40, 41);
    text-align: center;
    font-size: .7rem;
    margin:0;
    padding:0;
}