* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat';
}

/*-------------------------------------------------------------HEADER-------------------------------------------------------- */
#header-top {
    height: 146px;
    background-image: url('IMGS/header.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#logoCole {
    width: 120px;
    cursor: pointer;
}

/* Estilo del botón hamburguesa */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    right: 20px;
}

.hamburger span {
    width: 30px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: 0.3s;
}

/* Navegación */
.header-bottom {
    background-color: rgb(238, 236, 236);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 70px;
    width: 100%;
}

.header-bottom .opcion-headerbottom a.active,
.header-bottom .opcion-headerbottom.active a {
    background-color: #003366;
    color: white;
}


.opcion-headerbottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: none;
    /* Ocultar iconos por defecto */
}

.header-bottom .opcion-headerbottom a {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    transition: 0.3s;
    color: black;
    text-decoration: none;
}

.header-bottom .opcion-headerbottom a:hover {
    background-color: #003366;
    color: white;
}

.header-bottom .opcion-headerbottom a.active {
    background-color: #003366;
    color: white;
}

header {
    display: none;
}

header.active {
    display: block;
}

.oculto {
    display: none !important;
}

/* Estilos responsive */
@media (max-width: 768px) {

    /* Mostrar iconos en responsive */
    .nav-icon {
        display: block;
    }

    /* Mostrar el botón hamburguesa */
    .hamburger {
        display: flex;
    }

    /* Mover el logo a la izquierda */
    #header-top {
        justify-content: flex-start;
        padding-left: 20px;
        height: 100px;
    }

    #logoCole {
        width: 80px;
    }

    /* Convertir el menú en vertical */
    .header-bottom {
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        flex-direction: column;
        height: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        z-index: 1000;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .opcion-headerbottom {
        width: 100%;
        justify-content: flex-start;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
    }

    .header-bottom .opcion-headerbottom a {
        width: 100%;
        justify-content: flex-start;
    }

    /* Mostrar menú cuando checkbox está activado */
    #menu-toggle:checked~.header-bottom {
        max-height: 500px;
    }

    /* Animar hamburguesa cuando está activo */
    #menu-toggle:checked~#header-top .hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    #menu-toggle:checked~#header-top .hamburger span:nth-child(2) {
        opacity: 0;
    }

    #menu-toggle:checked~#header-top .hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
}

@media (max-width: 480px) {
    #header-top {
        height: 80px;
        padding-left: 15px;
    }

    #logoCole {
        width: 60px;
    }

    .hamburger {
        right: 15px;
    }

    .hamburger span {
        width: 25px;
    }

    .header-bottom {
        top: 80px;
    }

    .opcion-headerbottom {
        padding: 8px 15px;
    }

    .nav-icon {
        width: 20px;
        height: 20px;
    }

    .header-bottom .opcion-headerbottom a {
        font-size: 14px;
        height: 35px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/*----------------------------------------------FIN HEADER----------------------------------------------------------------------------------------------------*/

/*----------------------------------------LOGIN----------------------------------------*/
#login.active {
    display: block;
}

#login {
    display: none;
}

.login-component {
    --bg-principal: linear-gradient(135deg, #4fb3d4 0%, #2c5aa0 100%);
    --color-blanco: #ffffff;
    --color-azul: #1a237e;
    --color-gris: #666666;
    --color-input: #f5f5f5;
    --sombra: 0 10px 25px rgba(0, 0, 0, 0.15);
    --radio: 12px;
}

.login-component {
    position: relative;
    width: 100%;
    height: 100vh;
    font-family: 'Poppins', sans-serif;
    background: var(--bg-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
}


.login-component .contenedor {
    background: var(--color-blanco);
    padding: 40px 35px;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    width: 100%;
    max-width: 450px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.login-component .encabezado {
    background: var(--color-azul);
    color: var(--color-blanco);
    padding: 40px 30px;
    margin: -40px -35px 30px;
    border-radius: var(--radio) var(--radio) 0 0;
}

.login-component .titulo {
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}

.login-component .subtitulo {
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    opacity: 1;
    color: #6e6d6d;
}

.login-component .formulario {
    width: 100%;
}

.login-component .grupo-input {
    margin-bottom: 25px;
    text-align: left;
}

.login-component .etiqueta {
    display: block;
    margin-bottom: 8px;
    color: var(--color-azul);
    font-weight: 500;
    font-size: 14px;
}

.login-component .campo-input {
    position: relative;
}

.login-component .input {
    width: 100%;
    padding: 15px 50px 15px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    background: #E7E7E7;
    transition: all 0.3s ease;
    font-family: inherit;
    box-sizing: border-box;
    margin: 0;
}

.login-component .input:focus {
    outline: none;
    border-color: var(--color-azul);
    background: var(--color-blanco);
    box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.1);
}

.login-component .icono-input {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23FFC107" d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"/><path fill="%23FF3D00" d="m6.306 14.691 6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"/><path fill="%234CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"/><path fill="%231976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.650-.389-3.917z"/></svg>') center/contain;
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.login-component .icono-input:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.login-component .btn {
    width: 100%;
    padding: 15px;
    background: var(--color-azul);
    color: var(--color-blanco);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    margin-top: 10px;
    box-sizing: border-box;
}

.login-component .btn:hover {
    background: #0d1976;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(26, 35, 126, 0.3);
}

.login-component .btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .login-component {
        padding: 20px 15px;
    }

    .login-component .contenedor {
        max-width: 90%;
        padding: 35px 30px;
    }

    .login-component .encabezado {
        margin: -35px -30px 25px;
        padding: 35px 25px;
    }

    .login-component .titulo {
        font-size: clamp(26px, 6vw, 38px);
        margin-bottom: 10px;
    }

    .login-component .input {
        padding: 14px 45px 14px 14px;
        font-size: 15px;
    }

    .login-component .btn {
        padding: 14px;
        font-size: 15px;
    }
}

/* Móviles */
@media (max-width: 480px) {
    .login-component {
        padding: 10px;
        align-items: flex-start;
        padding-top: 30px;
    }

    .login-component .contenedor {
        max-width: 100%;
        padding: 30px 25px;
        margin: 0;
        min-height: auto;
    }

    .login-component .encabezado {
        margin: -30px -25px 20px;
        padding: 30px 20px;
    }

    .login-component .titulo {
        font-size: clamp(24px, 7vw, 32px);
        margin-bottom: 8px;
        line-height: 1.2;
    }

    .login-component .subtitulo {
        font-size: clamp(13px, 3vw, 15px);
        line-height: 1.3;
    }

    .login-component .grupo-input {
        margin-bottom: 20px;
    }

    .login-component .etiqueta {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .login-component .input {
        padding: 13px 40px 13px 13px;
        font-size: 16px;
        border-radius: 6px;
    }

    .login-component .icono-input {
        width: 18px;
        height: 18px;
        right: 12px;
    }

    .login-component .btn {
        padding: 13px;
        font-size: 15px;
        border-radius: 6px;
        margin-top: 5px;
    }
}

@media (max-width: 320px) {
    .login-component .contenedor {
        padding: 25px 20px;
    }

    .login-component .encabezado {
        margin: -25px -20px 15px;
        padding: 25px 15px;
    }

    .login-component .titulo {
        font-size: 22px;
    }

    .login-component .subtitulo {
        font-size: 13px;
    }

    .login-component .input {
        padding: 12px 38px 12px 12px;
    }

    .login-component .btn {
        padding: 12px;
        font-size: 14px;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .login-component {
        padding: 10px;
        align-items: center;
    }

    .login-component .contenedor {
        max-width: 400px;
    }

    .login-component .encabezado {
        padding: 20px;
    }

    .login-component .titulo {
        font-size: 24px;
        margin-bottom: 5px;
    }

    .login-component .subtitulo {
        font-size: 13px;
    }
}

@media (min-width: 1200px) {
    .login-component .contenedor {
        max-width: 480px;
        padding: 45px 40px;
    }

    .login-component .encabezado {
        margin: -45px -40px 35px;
        padding: 50px 40px;
    }

    .login-component .titulo {
        font-size: 48px;
    }

    .login-component .subtitulo {
        font-size: 17px;
    }
}

/*----------------------------------------FIN LOGIN----------------------------------------*/


/*----------------------------------------MAIN----------------------------------------*/

section {
    display: none;
}

section.active {
    display: block;
}

/*----------------------------------------HOME----------------------------------------*/

.inicio {
    background-image: url('IMGS/ExpoTécnica\(opaco\).jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-weight: bold;
    margin-bottom: 2%;
    min-height: 70vh;
    padding: 20px 10px;
}

.iconos-inicio {
    margin-top: 6%;
    margin-bottom: 0.5%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.iconos-inicio img {
    width: 150px;
    margin: 0px 10px;
}

.texto-inicio {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.texto-btns-inicio {
    display: flex;
    flex-direction: column;
    margin-top: 5%;
    margin-bottom: 6%;
    align-items: center;
    justify-content: center;
}

.btns-inicio {
    margin-top: 3%;
    display: flex;
}

.btns-inicio img {
    width: 40px;
    padding: 0% 4%;
}

.btns-inicio button {
    width: 200px;
    padding: 3%;
    margin: 15px;
    border-radius: 18px;
    border: 0px;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Montserrat';
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.btns-inicio button:hover {
    cursor: pointer;
}

.res:hover {
    background-color: rgb(205, 205, 205);
}

.ver {
    background-color: #2586A7;
    color: white;
}

.ver:hover {
    background-color: #1d6e89;
}

/* Contenedor del efecto flip */
.flip-container {
    perspective: 1000px;
    width: 150px;
    height: 150px;
    margin: 0px 10px;
    display: inline-block;
}

/* Elemento que rota */
.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Activar rotación al pasar el cursor */
.flip-container:hover .flipper {
    transform: rotateY(180deg);
}

/* Caras del flip (frente y reverso) */
.front,
.back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Cara frontal (tu ícono) */
.front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Cara trasera (enlaces e íconos) */
.back {
    transform: rotateY(180deg);
    color: white;
    padding: 0;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
}

/* Estilos para los enlaces dentro del back */
.back a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 50%;
}

.back a img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

/* Efecto hover en el ícono del back */
.back a:hover img {
    transform: scale(1.1);
}

/* Para texto en el back (si lo usas en el futuro) */
.back p {
    margin: 0;
    font-size: 11px;
}

.back h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
}

#texto-info {
    font-size: 33px;
    font-weight: bold;
    color: #2586A7;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 1.5%;
    text-align: center;
}

hr {
    border: 4px solid #F59E0B;
    border-radius: 2px;
    width: 16%;
}

#datos-info {
    background-color: #E6E6E6;
}

#texto-datos {
    display: flex;
}

.data {
    margin: 0% 2%;
    margin-top: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.data img {
    width: 18%;
}

.data h3 {
    font-size: 20px;
    text-align: center;
    margin: 6% 0% 3% 0%;
}

.data p {
    font-size: 18px;
    text-align: center;
}

#numeros-datos {
    display: flex;
    margin: 4%;
    margin-bottom: 2%;
}

.numbers {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    margin: 0 auto;
    margin-bottom: 2%;
    border-radius: 27px;
    padding: 1%;
    text-align: center;
}

.numbers h3 {
    font-size: 64px;
    color: #2586A7;
}

.numbers p {
    width: 39%;
}

.numbers:hover {
    cursor: pointer;
}

#texto-proyectos {
    font-size: 33px;
    font-weight: bold;
    color: #2586A7;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 1.5%;
    text-align: center;
}

#busqueda-filtro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0% 1%;
}

.busqueda {
    background: url("ICONS/lupa.png") no-repeat 10px center;
    background-size: 25px 25px;
    padding: 0.7% 0% 0.7% 3%;
    border-radius: 12px;
    border: 4px solid #CECBCB;
    margin: 0 auto;
    width: 80%;
    font-size: 18px;
    font-weight: 700;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.busqueda::placeholder {
    color: #B0B0B0;
}

#filtro {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
    margin-bottom: 2%;
}

.esp {
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #2586A7;
    border: 2px solid #2586A7;
    background-color: white;
    padding: 10px 0;
    cursor: pointer;
    width: 240px;
}

.esp:hover {
    background-color: #2586A7;
    color: white;
}

.esp-active {
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: white;
    border: 2px solid #2586A7;
    background-color: #2586A7;
    padding: 10px 0;
    cursor: pointer;
    width: 240px;
}

.cards-proyectos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 1%;
    margin: 0% 2%;
    margin-bottom: 2%;
}

.cards-proyectos-votados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 1%;
    margin: 0% 2%;
    margin-bottom: 2%;
}

.card {
    display: flex;
    flex-direction: column;
    width: 32%;
    height: 400px;
    margin: 0% 0% 2% 0%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #EEEEEE;
    overflow: hidden;
}

.card:hover {
    cursor: pointer;
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.card-top img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.card-text h3 {
    font-size: clamp(18px, 3vw, 24px);
    color: #2586A7;
    margin: 2% 0% 0% 5%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    max-height: 3.6em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.card-text span {
    margin-left: 5%;
    background-color: #F59E0B;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: clamp(8px, 1.2vw, 10px);
    color: white;
    padding: 1.2% 3%;
    border-radius: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    display: inline-block;
}

.card-text p {
    font-size: 12px;
    margin: 3% 5% 1% 5%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    max-height: 4.5em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.card-text {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-btns {
    display: flex;
    justify-content: space-between;
    margin: 4% 5% 1% 5%;
    font-size: 11px;
    align-items: center;
}

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

.votos img {
    height: 10px;
}

.btns-card {
    display: flex;
    justify-content: space-around;
    gap: 5%;
    width: 50%;
}

.btns-card button {
    width: 100%;
    padding: 0.2% 4%;
    border-radius: 3px;
    font-family: 'Montserrat';
}

button {
    transition: 0.3s;
}

button:hover {
    cursor: pointer;
}

.vote {
    background-color: #2586A7;
    border: 1px solid #2586A7;
    color: white;
}

.vote:hover {
    background-color: white;
    border: 1px solid #2586A7;
    color: #2586A7;
}

.position {
    background-color: white;
    border: 1px solid #2586A7;
    color: #2586A7;
}

.position:hover {
    background-color: #2586A7;
    border: 1px solid #2586A7;
    color: white;
}

.delete-vote {
    background-color: #BD0A0A;
    border: 1px solid #BD0A0A;
    color: white;
}

.delete-vote:hover {
    background-color: white;
    border: 1px solid #BD0A0A;
    color: #BD0A0A;
}

@media (max-width: 1024px) {
    .inicio {
        background-size: cover;
        min-height: 75vh;
        padding: 20px 15px;
    }

    .iconos-inicio {
        margin-top: 5%;
        gap: 12px;
    }

    .flip-container {
        width: 130px;
        height: 130px;
    }

    .iconos-inicio img {
        width: 130px;
    }

    .back a img {
        width: 55%;
        height: 55%;
    }

    .texto-inicio p:first-child {
        font-size: 38px !important;
        line-height: 1.3;
    }

    .texto-inicio p:last-child {
        font-size: 16px !important;
    }

    .texto-btns-inicio {
        margin-top: 4%;
        margin-bottom: 5%;
    }

    .texto-btns-inicio p {
        font-size: 19px !important;
        padding: 0 8%;
    }

    .btns-inicio button {
        width: 220px;
        padding: 12px;
        font-size: 17px;
    }

    #texto-info {
        width: 55%;
        font-size: 30px;
    }

    hr {
        width: 100px;
    }

    .data {
        margin: 2% 1.5%;
    }

    .data img {
        width: 20%;
    }

    .data h3 {
        font-size: 19px;
    }

    .data p {
        font-size: 16px;
    }

    #numeros-datos {
        margin: 3% 2%;
    }

    .numbers {
        width: 22%;
        padding: 1.2%;
    }

    .numbers h3 {
        font-size: 56px;
    }

    .numbers p {
        width: 45%;
        font-size: 14px;
    }

    #texto-proyectos {
        width: 45%;
        font-size: 30px;
    }

    .busqueda {
        font-size: 17px;
        padding: 0.8% 0% 0.8% 3%;
    }

    #filtro {
        flex-wrap: wrap;
        gap: 10px;
    }

    .esp,
    .esp-active {
        width: 220px;
        font-size: 17px;
    }

    .cards-proyectos,
    .cards-proyectos-votados {
        gap: 1.5%;
        margin: 0 3%;
    }

    .card {
        width: 32%;
        min-width: 260px;
    }

    .card-text h3 {
        font-size: 20px;
    }

    .card-text span {
        font-size: 9px;
    }

    .card-text p {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .inicio {
        background-size: cover;
        min-height: 95vh;
        padding: 25px 15px;
    }

    .iconos-inicio {
        margin-top: 7%;
        margin-bottom: 2%;
        gap: 15px;
    }

    .flip-container {
        width: 115px;
        height: 115px;
    }

    .iconos-inicio img {
        width: 115px;
    }

    .back a img {
        width: 58%;
        height: 58%;
    }

    .texto-inicio p:first-child {
        font-size: 32px !important;
        line-height: 1.3;
        padding: 0 5%;
    }

    .texto-inicio p:last-child {
        font-size: 14px !important;
        padding: 0 8%;
    }

    .texto-btns-inicio {
        margin-top: 5%;
        margin-bottom: 7%;
    }

    .texto-btns-inicio p {
        font-size: 18px !important;
        text-align: center;
        padding: 0 10%;
        line-height: 1.5;
    }

    .btns-inicio {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 12px;
        margin-top: 4%;
    }

    .btns-inicio button {
        width: 250px;
        max-width: 90%;
        padding: 12px;
        font-size: 17px;
    }

    #texto-info {
        width: 75%;
        font-size: 27px;
        margin-bottom: 2%;
    }

    hr {
        width: 75px;
        margin: 12px 0;
    }

    #datos-info {
        padding: 20px 0;
    }

    #texto-datos {
        flex-direction: column;
        padding: 0 20px;
        gap: 10px;
    }

    .data {
        margin: 15px auto;
        width: 75%;
    }

    .data img {
        width: 22%;
    }

    .data h3 {
        font-size: 20px;
        margin: 5% 0% 3% 0%;
    }

    .data p {
        display: none;
    }

    #numeros-datos {
        flex-direction: column;
        align-items: center;
        padding: 20px;
        gap: 15px;
    }

    .numbers {
        width: 75%;
        max-width: 300px;
        margin: 0 auto;
        padding: 15px;
    }

    .numbers h3 {
        font-size: 50px;
    }

    .numbers p {
        width: auto;
        font-size: 15px;
    }

    #texto-proyectos {
        width: 70%;
        font-size: 27px;
    }

    #busqueda-filtro {
        margin: 3% 2%;
    }

    .busqueda {
        width: 92%;
        max-width: 550px;
        padding: 12px 10px 12px 45px;
        font-size: 17px;
        background-size: 24px 24px;
    }

    #filtro {
        width: 92%;
        flex-direction: column;
        gap: 10px;
        margin-top: 3%;
    }

    .esp,
    .esp-active {
        width: 100%;
        max-width: 320px;
        font-size: 17px;
        padding: 11px 0;
    }

    .cards-proyectos,
    .cards-proyectos-votados {
        margin: 0 4%;
        justify-content: center;
        gap: 2%;
    }

    .card {
        width: 48%;
        min-width: 280px;
        margin: 1% 0;
    }

    .card-text h3 {
        font-size: 20px;
    }

    .card-text span {
        font-size: 10px;
        padding: 4px 10px;
    }

    .card-text p {
        font-size: 12px;
    }

    .card-btns {
        font-size: 10px;
    }

    .btns-card button {
        font-size: 10px;
        padding: 6px 8px;
    }
}

/* ========== MOBILE LARGE (640px) ========== */
@media (max-width: 640px) {
    .inicio {
        min-height: 90vh;
        padding: 25px 15px;
    }

    .iconos-inicio {
        margin-top: 8%;
        gap: 15px;
    }

    .flip-container {
        width: 110px;
        height: 110px;
    }

    .iconos-inicio img {
        width: 110px;
    }

    .back a img {
        width: 58%;
        height: 58%;
    }

    .texto-inicio p:first-child {
        font-size: 26px !important;
        line-height: 1.3;
        padding: 0 10px;
    }

    .texto-inicio p:last-child {
        font-size: 13px !important;
    }

    .texto-btns-inicio {
        margin-top: 6%;
        margin-bottom: 8%;
    }

    .texto-btns-inicio p {
        font-size: 17px !important;
        padding: 0 15px;
    }

    .btns-inicio {
        flex-direction: column;
        gap: 12px;
    }

    .btns-inicio button {
        width: 240px;
        max-width: 90%;
        padding: 12px;
        font-size: 16px;
    }

    #texto-info {
        width: 88%;
        font-size: 23px;
    }

    hr {
        width: 70px;
    }

    .data {
        width: 85%;
        margin: 18px auto;
    }

    .data h3 {
        font-size: 19px;
    }

    #numeros-datos {
        margin: 5% 3%;
    }

    .numbers {
        width: 88%;
        max-width: 270px;
        margin: 12px auto;
        padding: 12px;
    }

    .numbers h3 {
        font-size: 40px;
    }

    .numbers p {
        width: 55%;
        font-size: 14px;
    }

    #texto-proyectos {
        width: 85%;
        font-size: 23px;
    }

    #busqueda-filtro {
        margin: 4% 3%;
        width: 94%;
    }

    .busqueda {
        width: 100%;
        padding: 12px 10px 12px 42px;
        font-size: 16px;
        background-size: 22px 22px;
    }

    #filtro {
        flex-direction: column;
        gap: 10px;
        margin-top: 3%;
        width: 100%;
    }

    .esp,
    .esp-active {
        width: 100%;
        max-width: 300px;
        font-size: 16px;
        padding: 11px 0;
    }

    .cards-proyectos,
    .cards-proyectos-votados {
        flex-direction: column;
        align-items: center;
        margin: 4% 4%;
        gap: 18px;
    }

    .card {
        width: 92%;
        max-width: 380px;
        margin: 0 auto;
        min-height: 410px;
    }

    .card-text h3 {
        font-size: 19px;
    }

    .card-text span {
        font-size: 10.5px;
        padding: 5px 11px;
    }

    .card-text p {
        font-size: 12.5px;
    }

    .card-btns {
        font-size: 10.5px;
    }
}

/* ========== MOBILE SMALL (480px) ========== */
@media (max-width: 480px) {
    .inicio {
        padding: 30px 15px 40px 15px;
        min-height: 100vh;
        background-size: cover;
        background-position: center;
    }

    .iconos-inicio {
        flex-direction: column;
        gap: 20px;
        margin-top: 8%;
        margin-bottom: 4%;
        align-items: center;
    }

    .flip-container {
        width: 120px;
        height: 120px;
        margin: 0;
    }

    .iconos-inicio img {
        width: 120px;
    }

    .back a img {
        width: 60%;
        height: 60%;
    }

    /* Ajuste para tap en móvil */
    .flip-container:active .flipper {
        transform: rotateY(180deg);
    }

    .texto-inicio {
        margin-top: 20px;
        width: 100%;
    }

    .texto-inicio p:first-child {
        font-size: 28px !important;
        text-align: center;
        padding: 0 10px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .texto-inicio p:last-child {
        font-size: 14px !important;
        text-align: center;
        padding: 0 15px;
        line-height: 1.5;
    }

    .texto-btns-inicio {
        margin-top: 8%;
        margin-bottom: 10%;
        width: 100%;
    }

    .texto-btns-inicio p {
        font-size: 18px !important;
        text-align: center;
        padding: 0 20px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .btns-inicio {
        flex-direction: column;
        gap: 15px;
        margin-top: 5%;
        width: 100%;
        align-items: center;
    }

    .btns-inicio button {
        width: 220px;
        font-size: 16px;
        max-width: 90%;
        padding: 12px;
    }

    #texto-info {
        font-size: 22px;
        width: 90%;
        margin-bottom: 3%;
    }

    hr {
        width: 80px;
        height: 4px;
        margin: 15px 0;
    }

    #texto-proyectos {
        font-size: 22px;
        width: 90%;
    }

    #busqueda-filtro {
        margin: 5% 3%;
        width: 94%;
    }

    .busqueda {
        width: 100%;
        padding: 14px 10px 14px 45px;
        font-size: 16px;
        background-size: 20px 20px;
        background-position: 12px center;
    }

    #filtro {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        margin-top: 4%;
    }

    .esp,
    .esp-active {
        width: 100%;
        font-size: 16px;
        padding: 12px 0;
    }

    .cards-proyectos,
    .cards-proyectos-votados {
        margin: 5% 3%;
        gap: 20px;
    }

    .card {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 20px auto;
        min-height: 420px;
    }

    .card-text h3 {
        font-size: 20px;
    }

    .card-text span {
        font-size: 11px;
        padding: 6px 12px;
    }

    .card-text p {
        font-size: 13px;
        line-height: 1.4;
    }

    .data {
        width: 90%;
        margin: 20px auto;
    }

    .data h3 {
        font-size: 18px;
    }

    .data p {
        font-size: 14px;
        display: block;
    }

    #numeros-datos {
        margin: 6% 3%;
    }

    .numbers {
        width: 90%;
        max-width: 280px;
        margin: 15px auto;
        padding: 15px;
    }

    .numbers h3 {
        font-size: 42px;
    }

    .numbers p {
        font-size: 15px;
        width: 60%;
    }
}



/*----------------------------------------FIN HOME----------------------------------------*/

/*----------------------------------------ACERCA DE----------------------------------------*/

/*----------------------------------------ACERCA DE----------------------------------------*/

.inicio-acerca {
    background-image: url('IMGS/ExpoTécnica\(opaco\).jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-weight: bold;
    margin-bottom: 2%;
    min-height: 70vh;
    padding: 20px 10px;
}

.iconos-inicio-acerca {
    margin-top: 6%;
    margin-bottom: 0.5%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.iconos-inicio-acerca img {
    width: 150px;
    margin: 0px 10px;
}

.texto-inicio-acerca {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#texto-info-acerca {
    font-size: 33px;
    font-weight: bold;
    color: #2586A7;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 1.5%;
    text-align: center;
}

#datos-info-acerca {
    background-color: #E6E6E6;
    padding: 20px 0;
}

#texto-datos-acerca {
    display: flex;
    margin-bottom: 2%;
    padding: 0 20px 2% 20px;
    justify-content: center;
}

.data-acerca {
    margin: 0% 2%;
    margin-top: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
}

.data-acerca img {
    width: 55%;
    margin-bottom: 1%;
}

.data-acerca p {
    font-size: 24px;
    text-align: center;
}

@media (max-width: 1024px) {
    .inicio-acerca {
        background-size: cover;
        min-height: 75vh;
        padding: 20px 15px;
    }

    .iconos-inicio-acerca {
        margin-top: 5%;
        gap: 12px;
    }

    .iconos-inicio-acerca img {
        width: 130px;
    }

    .texto-inicio-acerca p:first-child {
        font-size: 38px !important;
        line-height: 1.3;
    }

    .texto-inicio-acerca p:last-child {
        font-size: 16px !important;
    }

    #texto-info-acerca {
        width: 55%;
        font-size: 30px;
    }

    .data-acerca img {
        width: 50%;
    }

    .data-acerca p {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .inicio-acerca {
        background-size: cover;
        min-height: 95vh;
        padding: 25px 15px;
    }

    .iconos-inicio-acerca {
        margin-top: 7%;
        margin-bottom: 2%;
        gap: 15px;
    }

    .iconos-inicio-acerca img {
        width: 115px;
    }

    .texto-inicio-acerca p:first-child {
        font-size: 32px !important;
        line-height: 1.3;
        padding: 0 5%;
    }

    .texto-inicio-acerca p:last-child {
        font-size: 14px !important;
        padding: 0 8%;
    }

    #texto-info-acerca {
        width: 75%;
        font-size: 27px;
        margin-bottom: 2%;
    }

    #datos-info-acerca {
        padding: 20px 0;
    }

    #texto-datos-acerca {
        flex-direction: column;
        padding: 0 20px;
        gap: 10px;
    }

    .data-acerca {
        margin: 15px auto;
        width: 75%;
    }

    .data-acerca img {
        width: 60%;
    }

    .data-acerca p {
        font-size: 18px;
        line-height: 1.5;
    }
}

@media (max-width: 640px) {
    .inicio-acerca {
        min-height: 90vh;
        padding: 25px 15px;
    }

    .iconos-inicio-acerca {
        margin-top: 8%;
        gap: 15px;
    }

    .iconos-inicio-acerca img {
        width: 110px;
    }

    .texto-inicio-acerca p:first-child {
        font-size: 26px !important;
        line-height: 1.3;
        padding: 0 10px;
    }

    .texto-inicio-acerca p:last-child {
        font-size: 13px !important;
    }

    #texto-info-acerca {
        width: 88%;
        font-size: 23px;
    }

    .data-acerca {
        width: 85%;
        margin: 18px auto;
    }

    .data-acerca img {
        width: 65%;
    }

    .data-acerca p {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .inicio-acerca {
        padding: 30px 15px 40px 15px;
        min-height: 100vh;
        background-size: cover;
        background-position: center;
    }

    .iconos-inicio-acerca {
        flex-direction: column;
        gap: 20px;
        margin-top: 8%;
        margin-bottom: 4%;
        align-items: center;
    }

    .iconos-inicio-acerca img {
        width: 120px;
        margin: 0;
    }

    .texto-inicio-acerca {
        margin-top: 20px;
        width: 100%;
    }

    .texto-inicio-acerca p:first-child {
        font-size: 28px !important;
        text-align: center;
        padding: 0 10px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .texto-inicio-acerca p:last-child {
        font-size: 14px !important;
        text-align: center;
        padding: 0 15px;
        line-height: 1.5;
    }

    #texto-info-acerca {
        font-size: 22px;
        width: 90%;
        margin-bottom: 3%;
    }

    #datos-info-acerca {
        padding: 15px 10px;
    }

    #texto-datos-acerca {
        gap: 15px;
        padding-bottom: 0;
    }

    .data-acerca {
        margin: 20px auto;
        width: 90%;
    }

    .data-acerca img {
        width: 70%;
        max-width: 250px;
    }

    .data-acerca p {
        font-size: 16px;
        line-height: 1.5;
        padding: 0 15px;
    }
}

@media (max-width: 360px) {
    .iconos-inicio-acerca img {
        width: 100px;
    }

    .texto-inicio-acerca p:first-child {
        font-size: 24px !important;
    }

    .texto-inicio-acerca p:last-child {
        font-size: 12px !important;
    }

    .data-acerca img {
        max-width: 200px;
    }

    .data-acerca p {
        font-size: 14px;
    }
}

/*----------------------------------------FIN ACERCA DE----------------------------------------*/

/*----------------------------------------RESULTADOS----------------------------------------*/

:root {
    /* Variables de colores */
    --color-primario: #2586A7;
    --color-secundario: #1e6b85;
    --color-linea: #F59E0B;
    --color-texto: #1f2937;
    --color-fondo: #f8fafc;
    --color-sombra: rgba(37, 134, 167, 0.1);

    /* Variables para la tarjeta */
    --color-tarjeta-superior: #F8BBD0;
    --color-tarjeta-fondo: #f3f4f6;
    --color-boton-programacion: #F59E0B;
    --color-boton-detalles: #2586A7;
    --color-votos: #059669;
    --radio-tarjeta: 12px;
    --sombra-tarjeta: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    /* Colores adicionales para las tarjetas */
    --color-rosa: #F8BBD0;
    --color-azul: #BFDBFE;
    --color-azul-claro: #DBEAFE;

    /* Variables de tipografía */
    --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --tamano-titulo: clamp(1.25rem, 5vw, 2rem);
    --peso-titulo: 700;
    --espaciado-letras: -0.025em;

    /* Variables de espaciado */
    --margen-superior: clamp(1rem, 3vw, 2rem);
    --margen-inferior: clamp(1rem, 3vw, 2rem);
    --padding-contenedor: clamp(1rem, 3vw, 2rem);

    /* Variables de animación */
    --duracion-animacion: 0.6s;
    --retraso-animacion: 0.2s;

    /* Variables de gradiente */
    --gradiente-texto: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
}

* {
    box-sizing: border-box;
}

.contenedor-titulo {
    text-align: center;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.titulo-principal {
    font-size: var(--tamano-titulo);
    font-weight: var(--peso-titulo);
    letter-spacing: var(--espaciado-letras);
    margin: var(--margen-superior) 0 var(--margen-inferior) 0;
    background: var(--gradiente-texto);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    animation: aparecer var(--duracion-animacion) ease-out var(--retraso-animacion) both;
    cursor: default;
    transition: transform 0.3s ease;
    line-height: 1.2;
}

.titulo-principal:hover {
    transform: scale(1.05);
}

.titulo-principal::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(50px, 10vw, 100px);
    height: clamp(2px, 0.5vw, 4px);
    background: var(--color-linea);
    border-radius: 2px;
    animation: expandir var(--duracion-animacion) ease-out calc(var(--retraso-animacion) + 0.3s) both;
}

.subtitulo {
    font-size: clamp(1rem, 3vw, 1.2rem);
    color: var(--color-texto);
    opacity: 0.7;
    margin-top: 1rem;
    animation: aparecer var(--duracion-animacion) ease-out calc(var(--retraso-animacion) + 0.4s) both;
}

.texto-abajo {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    color: var(--color-texto);
    opacity: 0.6;
    margin-top: 2rem;
    font-weight: 500;
    animation: aparecer var(--duracion-animacion) ease-out calc(var(--retraso-animacion) + 0.6s) both;
}

.contenedor-tarjetas-res {
    margin-top: clamp(1.5rem, 4vw, 3rem);
    padding: 0 clamp(0.5rem, 2vw, 1rem);
}

.fila-tarjetas {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
    flex-wrap: wrap;
}

.primera-fila {
    justify-content: center;
}

.segunda-fila {
    max-width: 1400px;
    margin: 0 auto clamp(1.5rem, 4vw, 3rem) auto;
    gap: clamp(1rem, 10vw, 18rem);
}

.tercera-fila {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

.contenedor-tarjeta {
    animation: aparecer var(--duracion-animacion) ease-out calc(var(--retraso-animacion) + 0.8s) both;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.contenedor-tarjeta:hover {
    cursor: pointer;
}

.tarjeta-res {
    background: white;
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    overflow: visible;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.tarjeta-res:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
}

.tarjeta-superior {
    height: clamp(100px, 20vw, 180px);
    width: 100%;
    border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
}

.tarjeta-superior.rosa {
    background-color: var(--color-rosa);
}

.tarjeta-superior.azul {
    background-color: var(--color-azul);
}

.tarjeta-superior.azul-claro {
    background-color: var(--color-azul-claro);
}

.tarjeta-contenido {
    background-color: var(--color-tarjeta-fondo);
    padding: clamp(1rem, 3vw, 1.5rem);
    display: flex;
    gap: clamp(1rem, 2vw, 1.5rem);
    border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
}

.contenedor-icono {
    position: absolute;
    left: clamp(-30px, -5vw, -47px);
    top: clamp(150px, 30vw, 270px);
    width: clamp(60px, 12vw, 100px);
    height: clamp(60px, 12vw, 100px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.icono-tarjeta {
    width: clamp(80px, 15vw, 150px);
    height: clamp(80px, 15vw, 150px);
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.contenido-texto {
    flex: 1;
    text-align: left;
}

.tarjeta-titulo {
    font-size: clamp(1.3rem, 4vw, 2.2rem);
    font-weight: 600;
    color: var(--color-primario);
    margin: 0 0 0.5rem 0;
    text-align: center;
    /* Limitación de líneas con puntos suspensivos */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* Máximo 1 línea */
    line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    max-height: 3.6em;
    /* 1.3 * 2 = 2.6em + margen */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.etiqueta-programacion {
    background-color: var(--color-boton-programacion);
    color: white;
    padding: clamp(0.4rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem);
    border-radius: 20px;
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    font-weight: 500;
    display: block;
    margin: 0 auto 1rem auto;
    width: fit-content;
}

.contenedor-boton-detalles {
    text-align: right;
}

.boton-detalles {
    background-color: transparent;
    color: var(--color-boton-detalles);
    border: 1px solid var(--color-boton-detalles);
    padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.8rem, 2vw, 1rem);
    border-radius: 6px;
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.boton-detalles:hover {
    background-color: var(--color-boton-detalles);
    color: white;
}

.imagen-portada-resultado {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px 8px 0 0;
}

/* Asegurar que la tarjeta superior tenga altura */
.tarjeta-superior {
    position: relative;
    height: 200px;
    overflow: hidden;
}

/* Si quieres un overlay oscuro sobre la imagen para el podio */
.tarjeta-superior.rosa .imagen-portada-resultado,
.tarjeta-superior.azul .imagen-portada-resultado {
    filter: brightness(0.8);
}

@media (max-width: 1200px) {
    .segunda-fila {
        gap: clamp(2rem, 6vw, 8rem);
    }
}

@media (max-width: 1024px) {
    .segunda-fila {
        gap: clamp(1.5rem, 4vw, 4rem);
    }

    .tercera-fila {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }
}

@media (max-width: 768px) {

    .fila-tarjetas,
    .primera-fila,
    .segunda-fila,
    .tercera-fila {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: clamp(1.5rem, 3vw, 2rem) !important;
        grid-template-columns: none !important;
    }

    .contenedor-tarjeta {
        width: 100%;
        max-width: min(460px, 95vw);
    }

    .tarjeta-superior {
        height: clamp(120px, 25vw, 180px);
    }

    .contenedor-icono {
        left: clamp(-25px, -4vw, -35px);
        top: clamp(180px, 32vw, 240px);
    }

    .icono-tarjeta {
        width: clamp(90px, 18vw, 130px);
        height: clamp(90px, 18vw, 130px);
    }
}

@media (max-width: 640px) {
    .contenedor-titulo {
        padding: 0 1rem;
    }

    .contenedor-tarjetas-res {
        padding: 0 0.5rem;
    }

    .contenedor-tarjeta {
        max-width: 100%;
    }

    .tarjeta-superior {
        height: clamp(100px, 22vw, 140px);
    }

    .contenedor-icono {
        left: clamp(-20px, -3.5vw, -30px);
        top: clamp(150px, 28vw, 200px);
    }

    .icono-tarjeta {
        width: clamp(75px, 16vw, 110px);
        height: clamp(75px, 16vw, 110px);
    }
}

@media (max-width: 480px) {
    .titulo-principal br {
        display: none;
    }

    .tarjeta-contenido {
        padding: 1rem 0.75rem;
    }

    .tarjeta-superior {
        height: clamp(90px, 20vw, 120px);
    }

    .contenedor-icono {
        left: -20px;
        top: clamp(140px, 26vw, 170px);
    }

    .icono-tarjeta {
        width: clamp(70px, 15vw, 95px);
        height: clamp(70px, 15vw, 95px);
    }
}

@media (max-width: 360px) {
    .contenedor-titulo {
        padding: 0 0.75rem;
    }

    .contenedor-tarjetas-res {
        padding: 0 0.25rem;
    }

    .tarjeta-superior {
        height: 80px;
    }

    .contenedor-icono {
        left: -18px;
        top: 130px;
        width: 50px;
        height: 50px;
    }

    .icono-tarjeta {
        width: 65px;
        height: 65px;
    }

    .tarjeta-titulo {
        font-size: 1.2rem;
    }

    .etiqueta-programacion {
        font-size: 0.7rem;
        padding: 0.35rem 0.85rem;
    }

    .boton-detalles {
        font-size: 0.7rem;
        padding: 0.35rem 0.7rem;
    }
}

@media (max-width: 320px) {
    .titulo-principal {
        font-size: 1.1rem;
    }

    .tarjeta-superior {
        height: 70px;
    }

    .contenedor-icono {
        left: -15px;
        top: 115px;
        width: 45px;
        height: 45px;
    }

    .icono-tarjeta {
        width: 60px;
        height: 60px;
    }

    .tarjeta-titulo {
        font-size: 1.1rem;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .titulo-principal {
        margin: 0.5rem 0;
    }

    .contenedor-tarjetas-res {
        margin-top: 1rem;
    }

    .fila-tarjetas {
        margin-bottom: 1rem;
    }
}

/*----------------------------------------FIN RESULTADOS----------------------------------------*/

/*----------------------------------------DETALLES DEL PROYECTO----------------------------------------*/

/* CONTENEDOR PRINCIPAL */
.container {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 1290px;
    margin: 0 auto;
    margin-top: 3%;
    box-sizing: border-box;
    background: #eee;
    border-radius: 10px;
    padding: 26px;
    grid-template-columns: 1.6fr 1fr;
    /* columna izquierda más ancha */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;

}

.espacio {
    visibility: hidden;
}

.image-box {
    flex: 1;
    max-width: 50%;
    padding: 6px 12px;
}

.project-info {
    flex: 1;
    max-width: 40%;
}

/* TITULO Y BADGES */
.titulo-row {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
}

.titulo-proj {
    color: #0b9bbf;
    font-size: clamp(18px, 3vw, 32px);
    font-weight: 700;
    max-width: 100%;
    line-height: 1.2;
    word-wrap: break-word;
    /* Cambios para 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 2;
}

.titulo-proj:hover {
    cursor: pointer;
}

.etiquetas {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.badge {
    background: #f4a300;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: clamp(12px, 1.5vw, 16px);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-outline {
    background: #fff;
    color: #f4a300;
    border: 1px solid #f4a300;
    padding: 6px 10px;
    border-radius: 16px;
    font-weight: 600;
    font-size: clamp(12px, 1.5vw, 16px);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* votos */
.votes {
    text-align: right;
    color: #666;
    margin-top: 6px;
    font-size: 14px;
}

/* CARRUSEL */
.carrusel-container {
    position: relative;
    margin-top: 12px;
    display: grid;
    align-items: center;
    justify-content: center;
}

.carrusel-img-box {
    width: 99%;
    height: 360px;
    border: 2px solid rgb(37, 134, 167);
    border-radius: 8px;
    background: #e9f8ff;
    display: flex;
    overflow: hidden;
    padding: 0px;
    position: relative;
}

/* Wrapper para imagen con botón de eliminar */
.carrusel-img-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}

.carrusel-img-wrapper.active {
    display: block;
}

.carrusel-img {
    display: none;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: opacity 300ms ease;
}

.carrusel-img.active {
    display: block;
    opacity: 1;
}

/* Botón de eliminar imagen */
.btn-eliminar-imagen {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ff4444;
    border-radius: 8px;
    width: 42px;
    height: 42px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.btn-eliminar-imagen:hover {
    background: #ff4444;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4);
}

.btn-eliminar-imagen:active {
    transform: scale(0.95);
}

/* Botón de eliminar estático en el HTML */
.btn-eliminar-imagen-estatico {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.btn-eliminar-imagen-estatico:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.btn-eliminar-imagen-estatico:active {
    transform: scale(0.95);
}

/* Flechas DEL CARRUSEL */
.carrusel-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 42px;
    font-weight: bold;
    color: #004080;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
    transition: color 0.2s ease;
    scale: 2;
}

.carrusel-btn:hover {
    color: #0066cc;
}

.carrusel-btn.prev {
    left: -30px;
}

.carrusel-btn.next {
    right: -30px;
}

/* MINIATURAS CARRUSEL */
.carrusel-thumbnails {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    justify-content: space-around;
}

.carrusel-thumbnails img {
    flex: 1;
    transition: transform 0.3s;
    width: 130px;
    height: 100px;
    object-fit: cover;
    border: 2px solid #c9e8f4;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: transform 150ms, border-color 150ms;
}

.carrusel-thumbnails img:hover {
    transform: translateY(-4px);
    border-color: #2586A7;
    transform: scale(1.05);
}

.carrusel-thumbnails img.active-thumb {
    border-color: #2586A7;
    box-shadow: 0 6px 12px rgba(37, 134, 167, 0.08);
}

/* Thumbnails en modo edición - hover más prominente */
#detalles-edit .carrusel-thumbnails img:not(.carrusel-add-thumb):hover {
    transform: scale(1.08);
    border-color: #0b9bbf;
    box-shadow: 0 4px 12px rgba(11, 155, 191, 0.3);
    cursor: pointer;
}

#detalles-edit .carrusel-thumbnails img:not(.carrusel-add-thumb) {
    position: relative;
    transition: all 0.3s ease;
}

/* Efecto visual sutil para indicar que es editable */
#detalles-edit .carrusel-thumbnails img:not(.carrusel-add-thumb)::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-image: url('ICONS/editar.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#detalles-edit .carrusel-thumbnails img:not(.carrusel-add-thumb):hover::after {
    opacity: 1;
}

/* LADO DERECHO info */
.project-info h3 {
    color: #0b7b98;
    margin-top: 8px;
    font-size: 26px;
}

.project-info p {
    color: #666;
    line-height: 1.5;
    margin-top: 8px;
    font-size: 24px;
}

.project-info {
    margin-top: 9%;
}

/* BOTONES */
.buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.btn-posicion {
    background: #fff;
    color: #2586A7;
    border: 1px solid #2586A7;
    border-radius: 5px;
    width: 100px;
    height: min-content;
    padding: 0px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.btn-posicion:hover {
    background: #2586A7;
    color: #fff;
}

.votado {
    background: #BD0A0A;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #BD0A0A;
    width: 100px;
    padding: 0px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.votado:hover {
    background: #fff;
    color: #BD0A0A;
    border: 1px solid #BD0A0A;
}

.btn-votar {
    background: #2586A7;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #2586A7;
    width: 100px;
    padding: 0px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.btn-votar:hover {
    background: #fff;
    color: #2586A7;
    border: 1px solid #2586A7;
}

.btn-editar {
    background: #2586A7;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #2586A7;
    width: 130px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.btn-editar:hover {
    background: #fff;
    color: #2586A7;
    border-radius: 5px;
    border: 1px solid #2586A7;
    width: 130px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.btn-eliminar {
    background: #BD0A0A;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #BD0A0A;
    width: 145px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.btn-eliminar:hover {
    background: #fff;
    color: #BD0A0A;
    border-radius: 5px;
    border: 1px solid #BD0A0A;
    width: 145px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.btn-realizado {
    background: #fff;
    color: #2586A7;
    border-radius: 5px;
    border: 1px solid #2586A7;
    width: 100px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.btn-realizado:hover {
    background: #2586A7;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #2586A7;
    width: 100px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.btn-descartar {
    background: #fff;
    color: #BD0A0A;
    border-radius: 5px;
    border: 1px solid #BD0A0A;
    width: 100px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.btn-descartar:hover {
    background: #BD0A0A;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #BD0A0A;
    width: 100px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

/*SECCIÓN DE AGREGAR PROYECTO------------*/
/*ELEGIR ESPECIALIDAD Y CURSO*/
#select-especialidad.select-custom,
#select-especialidad-edit.select-custom {
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: white;
    border: 2px solid #f4a300;
    background-color: #f4a300;
    padding: 8px 12px;
    border-radius: 22px;
    cursor: pointer;
    text-align: center;
    max-width: min-content;
    appearance: none;
    /* oculta el estilo por defecto */
    -webkit-appearance: none;
    -moz-appearance: none;
}

#select-curso.select-custom,
#select-curso-edit.select-custom {
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #f4a300;
    border: 2px solid #f4a300;
    background-color: white;
    padding: 8px 12px;
    border-radius: 22px;
    cursor: pointer;
    text-align: center;
    max-width: fit-content;
    /* oculta el estilo por defecto */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Opciones desplegables */
.select-custom option {
    font-weight: normal;
    color: #333;
    background-color: white;
}

.texto-agregar {
    color: #b0b0b0;
    border: none;
    background-color: #eee;
    font-size: 24px;
    line-height: 1.5;
    margin-top: 8px;
    font-weight: 500;
    padding-left: 25px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.texto-agregar2 {
    font-size: 48px;
    width: 100%;
    border: none;
    background-color: #eee;
    line-height: 1.5;
    margin-top: 8px;
    font-weight: 500;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

/* INPUTS PARA EDICIÓN EN DETALLES */
#proy-name-edit {
    color: #0b9bbf;
    font-size: clamp(24px, 4vw, 44px);
    font-weight: 700;
    width: 100%;
    min-height: 60px;
    border: 2px solid #0b9bbf;
    background-color: #ffffff;
    line-height: 1.3;
    padding: 12px 15px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(11, 155, 191, 0.15);
    transition: all 0.3s ease;
    resize: vertical;
    overflow: hidden;
}

#proy-name-edit:focus {
    outline: none;
    border-color: #0b7b98;
    background-color: #f9feff;
    box-shadow: 0 4px 12px rgba(11, 155, 191, 0.25);
}

.input-edit-descripcion,
.input-edit-integrantes,
.input-edit-profesores {
    color: #666;
    font-size: 24px;
    font-weight: 400;
    width: 100%;
    min-height: 100px;
    border: 2px solid #0b9bbf;
    background-color: #ffffff;
    line-height: 1.5;
    padding: 12px 15px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(11, 155, 191, 0.15);
    resize: vertical;
    transition: all 0.3s ease;
}

.input-edit-descripcion:focus,
.input-edit-integrantes:focus,
.input-edit-profesores:focus {
    outline: none;
    border-color: #0b7b98;
    background-color: #f9feff;
    box-shadow: 0 4px 12px rgba(11, 155, 191, 0.25);
}

/*ICONOS PARA EDITAR*/
.editar-icon {
    width: 30px;
    height: auto;
    cursor: pointer;
}

.editar-icon2 {
    width: 24px;
    height: auto;
    cursor: pointer;
}

.editar-icon-flotante {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    padding: 6px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    z-index: 10;
}

@media (max-width: 900px) {
    .container {
        flex-direction: column;
        gap: 16px;
        width: 92%;
        max-width: 420px;
        margin: 0 auto;
        background: #eee;
        border-radius: 12px;
        padding: 16px;
        box-sizing: border-box;
    }

    #btn-edit-title img {
        width: 20px;
        height: 20px;
    }

    .titulo-proj {
        font-size: 24px;
        display: block;
        margin-bottom: 8px;
    }

    .etiquetas {
        display: flex;
        gap: 6px;
    }

    .etiquetas span {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 10px;
    }

    .votes {
        font-size: 7px;
        margin-top: 0%;
    }

    .titulo-row {
        margin-bottom: 0%;
    }

    .image-box {
        width: 100%;
    }

    .carrusel-img-box {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .carrusel-img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .carrusel-btn {
        font-size: 28px;
        top: 45%;
    }

    .carrusel-btn.next {
        scale: 1.5;
    }

    .carrusel-btn.prev {
        scale: 1.5;
    }

    .carrusel-thumbnails {
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
    }

    .carrusel-thumbnails img {
        flex: none;
        width: 70px;
        height: 50px;
    }

    .project-info {
        width: 100%;
        margin-top: 10px;
    }

    .project-info h3 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .project-info p {
        font-size: 14px;
        line-height: 1.4;
    }

    .buttons {
        display: flex;
        flex-direction: flex-end;
        gap: 12px;
        padding-right: 0%;
    }

    .buttons button {
        font-size: 14px;
        font-weight: 500;
        border-radius: 6px;
        border: 2px solid #007b9e;
        cursor: pointer;
        transition: all 0.3s ease;
        max-width: 110px;
    }

    .btn-posicion,
    .btn-votar {
        height: 38px;
        font-size: 14px;

    }

    .btn-posicion {
        background: #fff;
        border-color: 1px solid #2586A7;
    }

    .btn-posicion:hover {
        background: #007b9e;
        color: #fff;
    }

    .btn-votar {
        background: #007b9e;
        color: #fff;
    }

    .btn-votar:hover {
        background: #fff;
        color: #2586A7;
        border: 1px solid #2586A7;
    }

    .image-box,
    .project-info {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box;
    }

}

/*----------------------------------------FIN DETALLES DEL PROYECTO----------------------------------------*/

/*----------------------------------------PERFIL----------------------------------------*/

:root {
    --expo-color-principal: #2586a7;
    --expo-color-secundario: #f59e0b;
}

.montserrat {
    font-family: 'Montserrat', sans-serif;
}

.roboto {
    font-family: 'Roboto', sans-serif;
}

.negrita {
    font-weight: 700;
}

#expo_perfil_user {
    text-align: center;
    margin: 4vh 0;
}

.expo_perfil_titulo,
.expo_perfil_sub-titulo {
    color: var(--expo-color-principal);
}

.expo_perfil_user_separador {
    background-color: var(--expo-color-secundario);
    position: relative;
    border: 0;
}

#expo_perfil_user_descripcion {
    color: #595959;
}

#expo_perfil_proyectos {
    margin: 4vh 5vw;
    font-size: 0;
    display: flex;
}

.expo_perfil_proyectos {
    background-color: #e5f4fe;
    display: block;
}

.expo_perfil_proyectos_img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.expo_perfil_proyectos_detalles {
    background-color: #eeeeee;
}

.expo_perfil_proyectos_detalles_especialidad {
    background-color: var(--expo-color-secundario);
    color: #fff;
}

.expo_perfil_texto {
    color: #595c5f;
}

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

.expo_perfil_proyectos_detalles_votos_quitar-voto {
    background-color: #bd0a0a;
    color: #fff;
    border: solid 2px #bd0a0a;
    display: grid;
    align-content: center;
}

.expo_perfil_proyectos_detalles_votos_ver-pos {
    border: 2px solid var(--expo-color-principal);
    color: var(--expo-color-principal);
    background-color: #fff;
    display: grid;
    align-content: center;
}

#expo_perfil_logout {
    background-color: #595959;
    border: 2px solid #595959;
    position: relative;
    color: #fff;
}

#expo_perfil button {
    transition: 200ms ease-in-out;
    cursor: pointer;
}

.expo_perfil_proyectos_detalles_votos_quitar-voto:hover {
    color: #bd0a0a;
    background-color: #fff;
}

.expo_perfil_proyectos_detalles_votos_ver-pos:hover {
    color: #fff;
    background-color: var(--expo-color-principal);
}

#expo_perfil_logout:hover {
    color: #595959;
    background-color: #fff;
}


@media (width >=800px) {
    #expo_perfil_user_foto {
        width: 10vw;
    }

    #expo_perfil_user_hola {
        font-size: 5vh;
    }

    .expo_perfil_user_separador {
        width: 5vw;
        height: 1.2vh;
        left: 47.5vw;
        border-radius: 0.2vw;
    }

    #expo_perfil_user_descripcion {
        font-size: 4vh;
    }

    #expo_perfil_proyectos {
        max-height: 60vh;
    }

    .expo_perfil_proyectos {
        border-radius: 0.75vw;
        height: 60vh;
        width: 27.9vw;
        margin-left: 3vw;
        display: inline;
    }

    #expo_perfil_proyectos_1 {
        margin-left: 0;
    }

    .expo_perfil_proyectos_img {
        padding: 10vh 0;
        height: 10vh;
    }

    .expo_perfil_proyectos_detalles {
        height: 24vh;
        border-radius: 0.75vw;
        padding: 3vh 1.5vw;
    }

    .expo_perfil_proyectos_detalles_titulo {
        font-size: 4vh;
    }

    .expo_perfil_proyectos_detalles_especialidad {
        font-size: 0.75vw;
        width: fit-content;
        padding: 1vh 1.5vw;
        border-radius: 3vh;
        margin-top: 0;
        margin-bottom: 1.5vh;
    }

    .expo_perfil_proyectos_detalles_descripcion {
        height: 7vh;
        margin-bottom: 2.25vh;
    }

    .expo_perfil_proyectos_detalles_descripcion_texto {
        font-size: 2vh;
        max-height: 7vh;
        overflow: auto;
    }

    .expo_perfil_proyectos_detalles_votos {
        height: 6vh;
    }

    .expo_perfil_proyectos_detalles_votos_img {
        height: 0.75vw;
        margin-right: 0.5vw;
    }

    .expo_perfil_proyectos_detalles_votos_num {
        font-size: 1vw;
        margin-right: 2vw;
        width: 4vw;
    }

    .expo_perfil_proyectos_detalles_votos_quitar-voto {
        border-radius: 1vh;
        padding: 2% 3%;
        width: 8.5vw;
        margin-right: 0.5vw;
        font-size: 1vw;
        max-height: 5vh;
    }

    .expo_perfil_proyectos_detalles_votos_ver-pos {
        border-radius: 1vh;
        width: 8.5vw;
        padding: 2% 1vw;
        font-size: 1vw;
        max-height: 5vh;
    }

    #expo_perfil_logout {
        border-radius: 0.5vh;
        padding: 0.75% 1.25%;
        width: 9vw;
        margin-bottom: 5vh;
        left: calc(86vw - 4px);
    }
}

@media (width < 800px) {
    #expo_perfil_user_foto {
        height: 25vw;
    }

    #expo_perfil_user_hola {
        font-size: 5vw;
    }

    .expo_perfil_user_separador {
        width: 15vw;
        height: 1vh;
        left: 42.5vw;
        border-radius: 0.2vh;
    }

    #expo_perfil_user_descripcion {
        font-size: 5vw;
    }

    #expo_perfil_proyectos {
        flex-direction: column;
        max-height: 140vh;
    }

    .expo_perfil_proyectos {
        width: 90vw;
        margin: 0 0 2.5vh 0;
        border-radius: 1vh;
        max-height: 45vh;
    }

    #expo_perfil_proyectos_3 {
        margin-bottom: 0;
    }

    .expo_perfil_proyectos_img {
        padding: 7vh 0;
        height: 5vh;
    }

    .expo_perfil_proyectos_detalles {
        height: 22vh;
        border-radius: 1vh;
        padding: 2vh 5vw;
    }

    .expo_perfil_proyectos_detalles_titulo {
        font-size: 3vh;
        margin-right: 0vw;
    }

    .expo_perfil_proyectos_detalles_especialidad {
        font-size: 1.5vh;
        width: fit-content;
        padding: 0.5vh 5vw;
        border-radius: 3vh;
        margin-bottom: 1.5vh;
        height: 3vh;
        align-content: center;
    }

    .expo_perfil_proyectos_detalles_descripcion {
        height: 5.5vh;
        margin-bottom: 2vh;
    }

    .expo_perfil_proyectos_detalles_descripcion_texto {
        font-size: 1.75vh;
        max-height: 5.5vh;
        overflow: auto;
    }

    .expo_perfil_proyectos_detalles_votos {
        height: 6vh;
    }

    .expo_perfil_proyectos_detalles_votos_img {
        height: 3.5vw;
        margin-right: 0.5vw;
    }

    .expo_perfil_proyectos_detalles_votos_num {
        font-size: 3.5vw;
        margin-right: 2vw;
        width: 13.5vw;
    }

    .expo_perfil_proyectos_detalles_votos_quitar-voto {
        border-radius: 1vh;
        padding: 2% 3%;
        margin-right: 1vw;
        font-size: 4vw;
        max-height: 5vh;
    }

    .expo_perfil_proyectos_detalles_votos_ver-pos {
        border: 1vw solid var(--expo-color-principal);
        border-radius: 1vh;
        padding: 2% 1vw;
        font-size: 4vw;
        max-height: 5vh;
    }

    #expo_perfil_logout {
        border-radius: 0.5vh;
        padding: 0.75% 1.25%;
        width: 27vw;
        font-size: 3vw;
        margin-bottom: 2vh;
    }

    @media (height > 700px) {
        .expo_perfil_proyectos_detalles_votos button {
            font-size: 2.5vw;
            width: 30vw;
        }

        .expo_perfil_proyectos_detalles_votos_ver-pos {
            padding: 1% 1vw;
        }
    }
}

/*----------------------------------------FIN PERFIL----------------------------------------*/

/*----------------------------------------GESTION DE PROYECTOS (COORDINADOR)----------------------------------------*/

#cards-proyectos-coord {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 1%;
    margin: 0% 2% 2% 2%;
}

.card-coord {
    display: flex;
    flex-direction: column;
    width: 32%;
    height: 400px;
    margin: 0 0 2% 0;
    border-radius: 10px;
    background-color: #EEEEEE;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-coord:hover {
    cursor: pointer;
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.card-top-coord img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 10px 10px 0 0;
}

.card-text-coord h3 {
    font-size: 24px;
    color: #2586A7;
    margin: 2% 0% 0% 5%;
}

.card-text-coord span {
    margin-left: 5%;
    background-color: #F59E0B;
    font-size: 10px;
    color: white;
    padding: 1.2% 3%;
    border-radius: 22px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.card-text-coord p {
    font-size: 12px;
    margin: 3% 5% 1% 5%;
}

.card-btns-coord {
    display: flex;
    justify-content: space-between;
    margin: 4% 5% 1% 5%;
    font-size: 11px;
    align-items: center;
}

.votos-coord {
    display: flex;
    align-items: center;
}

.votos-coord img {
    height: 10px;
}

.btns-card-coord {
    display: flex;
    justify-content: space-around;
    gap: 5%;
    width: 50%;
}

.btns-card-coord button {
    width: 100%;
    padding: 0.2% 4%;
    border-radius: 3px;
    font-family: 'Montserrat';
}

button {
    transition: 0.3s;
}

button:hover {
    cursor: pointer;
}

.vote-coord {
    background-color: #2586A7;
    border: 1px solid #2586A7;
    color: white;
}

.vote-coord:hover {
    background-color: white;
    border: 1px solid #2586A7;
    color: #2586A7;
}

.position-coord {
    background-color: white;
    border: 1px solid #2586A7;
    color: #2586A7;
}

.position-coord:hover {
    background-color: #2586A7;
    color: white;
}

.delete-vote-coord {
    background-color: #BD0A0A;
    border: 1px solid #BD0A0A;
    color: white;
}

.delete-vote-coord:hover {
    background-color: white;
    border: 1px solid #BD0A0A;
    color: #BD0A0A;
}

#texto-gest-proyectos-coord,
.texto-proyectos-votados {
    font-size: 33px;
    font-weight: bold;
    color: #2586A7;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 1.5% auto;
    text-align: center;
}

.btns-gest-proyectos-coord {
    display: flex;
}

#btns-coord button {
    font-size: 16px;
    font-family: 'Montserrat';
    padding: 5% 5%;
    margin-right: 5%;
    border-radius: 3px;
    white-space: nowrap;
}

#btns-coord {
    display: flex;
    justify-content: space-between;
    margin: 2% 2%;
}

.add-proy {
    background-color: #2586A7;
    border: 1px solid #2586A7;
    color: white;
}

.add-proy:hover {
    background-color: #1D6780;
    border: 1px solid #1D6780;
    color: white;
}


.card {
    position: relative;
    border: 2px solid transparent;
    transition: 0.3s;
}


.card-btn-gest-coord {
    display: flex;
    justify-content: right;
    margin: 4% 5% 1% 5%;
    font-size: 11px;
    align-items: center;
}

.card-btn-gest-coord button {
    padding: 2% 2%;
    border-radius: 3px;
    font-family: 'Montserrat';
    font-size: 11px;
}

.delete-proy {
    background-color: #BD0A0A;
    border: 1px solid #BD0A0A;
    color: white;
}

.delete-proy:hover {
    background-color: white;
    border: 1px solid #BD0A0A;
    color: #BD0A0A;
}

@media screen and (max-width: 1200px) {
    .card-coord {
        width: 48%;
    }
}

@media screen and (max-width: 768px) {
    .card-coord {
        width: 100%;
        margin: 0 0 20px 0;
        height: auto;
        min-height: 450px;
    }

    .cards-proyectos-coord {
        flex-direction: column;
        gap: 0;
        margin: 0% 5% 2% 5%;
    }

    #texto-gest-proyectos-coord,
    .texto-proyectos-votados {
        width: 80%;
        font-size: 28px;
    }

    #btns-gest-proyectos-coord {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
        margin: 3% 5%;
    }

    #btns-gest-proyectos-coord button {
        font-size: 16px;
        padding: 12px 20px;
        margin: 0;
        min-width: 180px;
    }

    .card-text-coord h3 {
        font-size: 22px;
        margin: 15px 0 10px 5%;
    }

    .card-text-coord span {
        font-size: 12px;
        padding: 8px 15px;
    }

    .card-text-coord p {
        font-size: 14px;
        margin: 15px 5% 20px 5%;
        line-height: 1.4;
    }

    .card-btns-coord {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
        margin: 20px 5% 15px 5%;
    }

    .votos-coord {
        justify-content: center;
        font-size: 14px;
        margin-bottom: 5px;
    }

    .votos-coord p {
        margin-left: 8px;
        font-weight: bold;
    }

    .btns-card-coord {
        flex-direction: row;
        gap: 10px;
        width: 100%;
    }

    .btns-card-coord button {
        padding: 12px 8px;
        font-size: 14px;
        font-weight: bold;
        flex: 1;
    }

    .card-btn-gest-coord {
        justify-content: center;
        margin: 20px 5% 15px 5%;
    }

    .card-btn-gest-coord button {
        padding: 12px 25px;
        font-size: 14px;
        font-weight: bold;
        min-width: 160px;
    }
}

@media screen and (max-width: 480px) {
    .card-coord {
        height: auto;
        min-height: 420px;
        margin: 0 0 25px 0;
    }

    .cards-proyectos-coord {
        margin: 0% 3% 2% 3%;
    }

    #texto-gest-proyectos-coord,
    .texto-proyectos-votados {
        width: 90%;
        font-size: 24px;
    }

    #btns-gest-proyectos-coord {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin: 4% 3%;
    }

    #btns-gest-proyectos-coord button {
        font-size: 15px;
        padding: 14px 25px;
        min-width: 200px;
        width: 100%;
        max-width: 280px;
    }

    .card-text-coord h3 {
        font-size: 20px;
    }

    .card-text-coord span {
        font-size: 11px;
        padding: 6px 12px;
    }

    .card-text-coord p {
        font-size: 13px;
        margin: 12px 5% 18px 5%;
    }

    .btns-card-coord {
        flex-direction: column;
        gap: 8px;
    }

    .btns-card-coord button {
        padding: 12px;
        font-size: 13px;
    }

    .card-btn-gest-coord button {
        padding: 12px 20px;
        font-size: 13px;
        min-width: 140px;
    }

    .votos-coord {
        font-size: 13px;
    }
}

/*----------------------------------------FIN GESTION DE PROYECTOS (COORDINADOR)----------------------------------------*/


/*----------------------------------------GESTION DE PROYECTOS (ADMIN)----------------------------------------*/
:root {
    --expo-color-principal: #2586a7;
    --expo-color-secundario: #f59e0b;
}

.montserrat {
    font-family: 'Montserrat', sans-serif;
}

.roboto {
    font-family: 'Roboto', sans-serif;
}

.negrita {
    font-weight: 700;
}

.expo_gestion-admin_titulo,
.expo_gestion-admin_sub-titulo {
    color: var(--expo-color-principal);
}

.expo_gestion-admin_titulo {
    text-align: center;
    font-size: 2vw;
    margin-top: 4vh;
}

.expo_gestion-admin_separador {
    background-color: var(--expo-color-secundario);
    position: relative;
    border: 0;
    height: 1vh;
    width: 5vw;
    left: 50%;
    position: relative;
    margin: 2vh 0;
    transform: translateX(-50%);
}

#expo_gestion-admin button {
    transition: 200ms ease-in-out;
    cursor: pointer;
}

#expo_gestion-admin_estadisticas_graficos {
    display: flex;
    margin: 0 3vw;
}

#expo_gestion-admin_estadisticas [id*="expo_gestion-admin_estadisticas_grafico_barras_col"] {
    grid-row-start: 1;
    grid-row-end: 101;
    background-color: var(--expo-color-principal);
}

.expo_gestion-admin_estadisticas_grafico_barras_texto {
    color: var(--expo-color-principal);
    position: relative;
    top: -2.5vw;
    text-align: center;
}

#expo_gestion-admin_estadisticas_grafico {
    background-color: #e6e6e6;
    height: 30vw;
    border-radius: 2.5vw;
    margin: 0;
    width: 94vw;
}

#expo_gestion-admin_estadisticas_grafico_eje-y {
    color: var(--expo-color-secundario);
    transform-origin: bottom left;
    transform: rotateZ(-90deg);
    position: relative;
    top: 25.5vw;
    left: 5.5vw;
    text-align: center;
    max-width: 30vw;
    height: 3vw;
    font-size: 1vw;
}

#expo_gestion-admin_estadisticas_grafico_barra {
    height: 23vw;
    position: relative;
    left: 4vw;
    top: -1vw;
    border: 0.35vw #0b2363;
    border-style: none none solid solid;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(100, 1fr);
    width: 86vw;
    grid-column-gap: 7.1vw;
    padding: 0 4.4vw;

    div {
        width: 2.5vw;

        p {
            font-size: 1vw;
        }
    }
}

#expo_gestion-admin_estadisticas_grafico_eje-x {
    color: var(--expo-color-secundario);
    position: relative;
    font-size: 0;
    width: fit-content;
    top: -0.5vw;
    display: flex;
    width: 89vw;
    left: 2.71vw;
}

#expo_gestion-admin_estadisticas_grafico_eje-x p {
    font-size: 1.5vw;
    display: inline-block;
    width: 6.5vw;
    text-align: center;
    font-size: 1vw;
    flex-grow: 1;
}

#add-coordinador {
    border: 2px solid var(--expo-color-principal);
    color: var(--expo-color-principal);
    background-color: #fff;
    display: grid;
    align-content: center;
    width: 30vw;
    border-radius: 0.25vw;
    font-size: 2vh;
    min-height: 4vh;
    position: relative;
    left: 65vw;
}

#add-coordinador:hover {
    color: #fff;
    background-color: var(--expo-color-principal);
}

#add-coordinador_contenido,
#edit-coordinador_contenido {
    position: fixed;
    z-index: 4;
    background-color: rgba(0, 0, 0, 0.4);
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    justify-content: center;
}

#add-coordinador_contenido>table,
#edit-coordinador_contenido>table {
    position: relative;
    top: 50vh;
    left: 50vw;
    translate: -50% -50%;
    width: 40vw;
    height: 45vh;
    z-index: 5;
    border-collapse: collapse;

    thead {
        height: 7.5vh;
        border: solid 4px #1d6780;
        background-color: var(--expo-color-principal);
        color: #fff;
        font-size: 4vh;
    }

    tbody {
        height: 20vh;
        border: solid 4px #b0b0b0;
        background-color: #fff;
    }

    tr {
        label {
            align-content: center;
            text-align: center;
        }
        
        input, select {
            width: 18vw;
            border: solid #8a8a8a 3px;
            border-radius: 0.5vw;
            padding: 0.75vh;
            outline: none;
            background-color: #e7e7e7;
            font-family: 'Montserrat';
        }

        input:focus-visible {
            border-color: #0066cc;
        }

        button {
            position: relative;
            width: 50%;
            height: 5vh;
            border-radius: 0.25vw;
        }
    }

    th,
    td {
        padding: 0 1vw;
    }

    th {
        font-family: 'Noto Sans', sans-serif;
    }

    td {
        font-family: 'Montserrat', sans-serif;
        text-align: center;
    }
}

#coord_error_add,
#coord_error_edit {
    color: #bd0a0a;
    height: 5vh;
    text-align: center;
}

#gest-admin_realizado_add,
#gest-admin_realizado_edit {
    color: var(--expo-color-principal);
    background-color: #fff;
    border: 2px solid var(--expo-color-principal);
    display: grid;
    align-content: center;
    left: 50%;
}

#gest-admin_realizado_add:hover #gest-admin_realizado_edit:hover {
    color: #fff;
    background-color: var(--expo-color-principal);
}

#gest-admin_descartar_add,
#gest-admin_descartar_edit {
    color: #bd0a0a;
    background-color: #fff;
    border: solid 2px #bd0a0a;
    display: grid;
    align-content: center;
}

#gest-admin_descartar_add:hover #gest-admin_descartar_edit:hover {
    color: #fff;
    background-color: #bd0a0a;
}

#expo_gestion-admin_gestion-coordinadores_tabla {
    margin: 2vh 3vw 2vh 7vw;
    width: 90vw;
    height: 40vh;
    overflow: auto;

    table {
        width: 90vw;
        max-height: 40vh;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    tr th:last-of-type,
    tr td:last-of-type {
        border-top: none;
        border-bottom: none;
        width: 5vh;
        background-color: #fff;
    }

    tr {
        :nth-child(3) {
            width: 20vw;
        }
    }

    .elim_coord {
        width: 5vh;

        img {
            height: 3vh;
            width: 3vh;
        }
    }

    tbody tr:not(:first-of-type) td {
        border-top: none;
    }

    th,
    td {
        font-family: 'Noto Sans';
        border: 0.3vw solid;
        border-right: none;
        font-size: 2.5vh;
        width: 35vw;
        height: 6vh;
    }

    th {
        border-color: #1d6780;
        background-color: var(--expo-color-principal);
        color: #fff;
        font-weight: 700;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    td {
        text-align: center;
        border-color: #b0b0b0;
        background-color: #fff;
        color: var(--expo-color-principal);
        cursor: pointer;
    }
}

#expo_gestion-admin_gestion-coordinadores_lista {
    margin: 2vh 5vw;
    width: 90vw;
    height: fit-content;

    div {
        margin-bottom: 4vh;
    }

    div p,
    div div {
        border: solid 5px;
        text-align: center;
        font-family: "Noto Sans", sans-serif;
        border-radius: 1vw
    }

    div > p {
        border-color: #1d6780;
        background-color: var(--expo-color-principal);
        color: #fff;
        border-radius: 2vw;
        margin-bottom: 1vh;
        padding: 1vh;
        font-size: 1.25em;
    }

    div div {
        border-color: #b0b0b0;
        background-color: #fff;
        color: var(--expo-color-principal);
    }

    div div p {
        font-size: 1em;
        border: none;
        background-color: #fff;
        padding: 0;
        color: var(--expo-color-principal);
    }
    
    img {
        width: 5vw;
        margin: 0 3vw;
    }
}

@media (width >= 600px) {
    #expo_gestion-admin_gestion-coordinadores_tabla {
        display: block;
    }

    #expo_gestion-admin_gestion-coordinadores_lista {
        display: none;
    }
}

@media (width < 600px) {
    .expo_gestion-admin_titulo {
        font-size: 3vh;
        margin-top: 1.5vh;
    }

    .expo_gestion-admin_separador {
        width: 15vw;
        height: 1vh;
    }

    #expo_gestion-admin_estadisticas_graficos {
        transform-origin: bottom left;
        transform: rotateZ(90deg);
        position: relative;
        height: 90vw;
        width: fit-content;
        margin-bottom: 110vh;
    }

    [id*="expo_gestion-admin_estadisticas_grafico_barras_col"] p {
        transform: rotateZ(-90deg);
        top: -4vw;
    }

    #expo_gestion-admin_estadisticas_grafico {
        background-color: #e6e6e6;
        height: 30vw;
        border-radius: 2.5vw;
        margin: 0;
        scale: 3.2;
        top: 28vw;
        position: relative;
        width: 45vh;
        left: 10vh;
    }

    #expo_gestion-admin_estadisticas_grafico_eje-y {
        color: var(--expo-color-secundario);
        transform-origin: bottom left;
        transform: rotateZ(-90deg);
        position: relative;
        top: 25.5vw;
        left: 3.5vh;
        text-align: center;
        max-width: 30vw;
        height: 2vh;
        font-size: 1vw;
    }

    #expo_gestion-admin_estadisticas_grafico_barra {
        height: 25vw;
        position: relative;
        left: 2.5vh;
        top: -2.5vw;
        border: 0.35vw #0b2363;
        border-style: none none solid solid;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(100, 1fr);
        width: 41.5vh;
        grid-column-gap: 5vh;
        padding: 0 2vh;

        div {
            width: 2.5vw;

            p {
                font-size: 1vw;
            }
        }
    }

    #expo_gestion-admin_estadisticas_grafico_eje-x {
        color: var(--expo-color-secundario);
        position: relative;
        font-size: 0;
        top: -2vw;
        display: flex;
        width: 42.8vh;
        left: 2vh;
    }

    #expo_gestion-admin_estadisticas_grafico_eje-x p {
        display: inline-block;
        width: 6.5vh;
        text-align: center;
        flex-grow: 1;
        font-size: 1vw;
        transform: rotateZ(180deg);
    }

    #add-coordinador {
        left: 40vw;
        height: 6vh;
        width: 55vw;
        font-size: 2vh;
        border-radius: 1.5vw;
    }

    #expo_gestion-admin_gestion-coordinadores_tabla {
        display: none;
    }

    #expo_gestion-admin_gestion-coordinadores_lista {
        display: block;
    }
    
    #add-coordinador_contenido>table,
    #edit-coordinador_contenido>table {
        width: 90vw;
        tr {    
            input, select {
                width: 44vw;
            }
        }
    }
}

/*----------------------------------------FIN GESTION DE PROYECTOS (ADMIN)----------------------------------------*/
/*----------------------------------------FOOTER----------------------------------------*/
footer.active {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    background-image: url('IMGS/footer.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
    margin-top: 5%;
    padding: 20px;
}

footer {
    display: none;
}

.colegio-logo img {
    width: 150px;
    height: 150px;
    margin-top: 40px;
    margin-left: 75px;
}

.especialidades {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-family: 'Open Sans', sans-serif;
}

.especialidades h3 {
    margin-top: 0;
}

.especialidades p {
    margin: 0px 0px 10px;
    cursor: pointer;
}

.redes_div {
    display: flex;
    flex-flow: column;
    margin: 7px;
    justify-content: space-between;
}

.redes {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-right: 30px;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

.redes p {
    margin: 0;
    word-break: break-word;
}

.redes img {
    height: 25px;
    width: 25px;
    margin-right: 10px;
    flex-shrink: 0;
}

.redes a {
    text-decoration: none;
    color: #fff;
    word-break: break-word;
}

.redes:hover {
    text-decoration: underline;
}

/* Media Queries para Responsive Ultra */

/* Tablets medianas - 769px a 1024px */
@media screen and (max-width: 1024px) {
    .colegio-logo img {
        width: 130px;
        height: 130px;
        margin-left: 40px;
    }

    .especialidades {
        font-size: 15px;
    }

    .redes {
        font-size: 14px;
        padding: 8px;
    }
}

/* Tablets pequeñas - 601px a 768px */
@media screen and (max-width: 768px) {
    footer.active {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 15px;
        padding: 20px 15px;
    }

    .colegio-logo {
        grid-column: 1 / 3;
        text-align: center;
        margin-bottom: 5px;
    }

    .colegio-logo img {
        margin: 0 auto;
        width: 110px;
        height: 110px;
    }

    .especialidades {
        grid-column: 1;
        grid-row: 2;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .especialidades h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .especialidades p {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .redes_div {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        justify-content: flex-start;
    }

    .redes {
        margin-right: 0;
        padding: 6px 0;
        font-size: 12px;
    }

    .redes img {
        height: 18px;
        width: 18px;
        margin-right: 6px;
    }
}

/* Mobile grande - 431px a 600px */
@media screen and (max-width: 600px) {
    footer.active {
        grid-template-columns: 45% 55%;
        gap: 10px;
        padding: 15px 10px;
    }

    .colegio-logo img {
        width: 90px;
        height: 90px;
    }

    .especialidades h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .especialidades p {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .redes {
        padding: 4px 0;
        font-size: 11px;
    }

    .redes img {
        height: 16px;
        width: 16px;
        margin-right: 5px;
    }
}

/* Mobile mediano - 376px a 430px (iPhone 12 Pro Max, etc) */
@media screen and (max-width: 430px) {
    footer.active {
        grid-template-columns: 42% 58%;
        gap: 8px;
        padding: 12px 8px;
    }

    .colegio-logo img {
        width: 80px;
        height: 80px;
    }

    .especialidades h3 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .especialidades p {
        font-size: 11px;
        margin-bottom: 4px;
        line-height: 1.3;
    }

    .redes {
        padding: 3px 0;
        font-size: 10px;
    }

    .redes img {
        height: 15px;
        width: 15px;
        margin-right: 4px;
    }
}

/* Mobile pequeño - hasta 375px (iPhone SE, etc) */
@media screen and (max-width: 375px) {
    footer.active {
        grid-template-columns: 40% 60%;
        gap: 6px;
        padding: 10px 6px;
    }

    .colegio-logo img {
        width: 70px;
        height: 70px;
    }

    .especialidades h3 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .especialidades p {
        font-size: 10px;
        margin-bottom: 3px;
        line-height: 1.2;
    }

    .redes {
        padding: 2px 0;
        font-size: 9px;
        line-height: 1.2;
    }

    .redes img {
        height: 14px;
        width: 14px;
        margin-right: 3px;
    }
}

/* Mobile extra pequeño - hasta 320px */
@media screen and (max-width: 320px) {
    footer.active {
        grid-template-columns: 38% 62%;
        gap: 5px;
        padding: 8px 5px;
    }

    .colegio-logo img {
        width: 60px;
        height: 60px;
    }

    .especialidades h3 {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .especialidades p {
        font-size: 9px;
        margin-bottom: 2px;
        line-height: 1.2;
    }

    .redes {
        padding: 2px 0;
        font-size: 8px;
        line-height: 1.1;
    }

    .redes img {
        height: 12px;
        width: 12px;
        margin-right: 2px;
    }
}

/*----------------------------------------FIN FOOTER----------------------------------------*/

/*----------------------------------------PERMISOS POR TIPO DE USUARIO----------------------------------------*/

/* Ocultar botones de eliminación para usuarios estándar */
body.user-estandar .btn-eliminar,
body.user-estandar .delete-proy,
body.user-estandar #delete-select,
body.user-estandar .btn-editar,
body.user-estandar #btn-editar {
    display: none !important;
}

/*----------------------------------------FIN PERMISOS----------------------------------------*/
/* ==================== BARRAS DE VOTOS CON PROGRESO ==================== */

.barra-votos-contenedor {
    position: relative;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 431px;
    margin: clamp(1rem, 3vw, 2rem) auto 0 auto;
}

.barra-votos-contenedor:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(13, 176, 123, 0.3);
}

/* Contenedor de la barra de progreso - AHORA MÁS ALTO */
.barra-progreso-contenedor {
    position: relative;
    height: 45px; /* ⬆️ CAMBIADO: Era 8px, ahora es más alto */
    background: rgba(0, 0, 0, 0.1);
    overflow: visible; /* ⬆️ CAMBIADO: Para que el texto sea visible */
    border-radius: 12px;
}

/* Barra de progreso */
.barra-progreso {
    height: 100%;
    background: linear-gradient(90deg, #0DB07B 0%, #08805A 100%);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 2%;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ⬆️ NUEVO: Texto de votos (blanco y centrado) */
.votos-texto {
    color: white;
    font-weight: 700;
    font-size: 1rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Efecto de brillo en la barra de progreso */
.barra-progreso::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 2s infinite;
    z-index: 1; /* ⬆️ AGREGADO: Para que el brillo esté debajo del texto */
}

.votos-texto {
    z-index: 10; /* ⬆️ Asegura que el texto esté sobre el brillo */
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Animación de actualización */
.barra-progreso.actualizado {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    animation: pulseVote 2s ease-in-out;
}

@keyframes pulseVote {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.02);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* Variantes de color para podio - TODAS VERDES */
.contenedor-tarjeta:has(.tarjeta-superior.rosa) .barra-progreso {
    background: linear-gradient(90deg, #0DB07B 0%, #08805A 100%);
}

.contenedor-tarjeta:has(.tarjeta-superior.azul) .barra-progreso {
    background: linear-gradient(90deg, #0DB07B 0%, #08805A 100%);
}

.contenedor-tarjeta:has(.tarjeta-superior.azul-claro) .barra-progreso {
    background: linear-gradient(90deg, #0DB07B 0%, #08805A 100%);
}

/* Animación de entrada para tarjetas nuevas */
.contenedor-tarjeta {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Indicador de carga suave */
#loading {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Efecto cuando la barra está llena */
.barra-progreso[style*="width: 100%"] {
    background: linear-gradient(90deg, #0DB07B 0%, #08805A 100%);
    box-shadow: 0 0 10px rgba(13, 176, 123, 0.5);
}

/* Efecto pulsante para el proyecto con más votos */
.contenedor-tarjeta:first-child .barra-progreso {
    animation: pulse-leader 3s ease-in-out infinite;
}

@keyframes pulse-leader {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
}

/* Responsive para barras de votos */
@media (max-width: 768px) {
    .barra-progreso-contenedor {
        height: 40px; /* ⬆️ AJUSTADO para móviles */
    }
    
    .votos-texto {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .barra-progreso-contenedor {
        height: 35px; /* ⬆️ AJUSTADO para móviles pequeños */
    }
    
    .votos-texto {
        font-size: 0.85rem;
    }
}