/* Estilos para el tema claro */
body.light-theme {
    --ColorDeFondo: #e6e6e6;
    background-color: #e6e6e6;
    --ColordeTexto: #333333;
    --ColordeTextoCheckSuscripcion: #333333;
    color: #333333;
    --ColorFondoSubir: #d0d0d0;
    --ColorMenuFondo: #6487ac;
    --ColorMenuFondo2: #4c78a6;
    --ColorMenuFondo3: #365678;
    --ColorMenuFondo4: #263d56;
    --ColorMenuHamburgesa: #6487ac;
    --ColorFondoFooter: #6487ac;
    --ColorFondoFooterContainer: #759dc7;
    --content-bg-color: #cecdcd;
    --ColorFondoPares: #f9f9f9;
    --ColorFondoImpares: #e9e9e9;
    --ColorFondoTitulo: #d4d4d4;
    --ColorTextoTabla: #333333;
    --ColorTextoTitulo: #222222;
    --LineaBorde: 1px solid #545454;
    --FlechaMenu: rgb(0, 61, 153);
    --ColorTextoVerParVerPatologia: #333333;
    --PuntoParesAprobacion: rgb(255, 0, 0);
    --DetalleParaMobiles: #686a75;
    --BotonesParesPatologias: #45A049;
    --BotonesParesPatologiasHover: #4CAF50;
    --BotonesGuardar: #0B79D0;
    --BotonesGuardarHover: #2196F3;
    --BotonesMarcadoBusqueda: #053d6a;
    --SuscripcionDetalles: #2468b1;
    --ColorBrilloSuscripcion: rgba(34, 34, 34, 0.3);
    --LinkLateral: #113c74;
    --colorTenue: rgba(150, 150, 150, 0.5);
    --BusquedaColorFondo: #b8b8b8;
    --ColorLinkUsuario: rgb(0, 30, 128);
    --ColorCantidadFavorito: #a94040;
    --ColorFondoTituloSobre: #d4d4d4;
    --ColorFondoTituloEstatico: #c9c7c7;
    --TextoBotonFooter: #2c2929;

    a {
        /*  color: #5e5e5e;*/
        color: #2674dc;
    }

    #linkPie {
        color: #061b36 !important;
        ;
        /* #1351a0 !important;*/
    }

}

/* Estilos para el tema oscuro */
body.dark-theme {
    --ColorDeFondo: #333333;
    background-color: #333333;
    --ColordeTextoCheckSuscripcion: #333333;
    --ColordeTexto: #ffffff;
    color: #ffffff;
    --ColorFondoSubir: #555;
    --ColorMenuFondo: #3d3d3d;
    --ColorMenuFondo2: #676565;
    --ColorMenuFondo3: #544b8f;
    --ColorMenuFondo4: #4d4c4c;
    --ColorMenuHamburgesa: #d5d7dc;
    --ColorFondoFooter: #1f1f1f;
    --ColorFondoFooterContainer: #2d2c2c;
    --content-bg-color: #1e1e1e;
    --ColorFondoPares: #828282;
    --ColorFondoImpares: #a2a2a2;
    --ColorFondoTitulo: #656464;
    --ColorTextoTabla: #404040;
    --ColorTextoTitulo: rgb(48, 48, 48) !important;
    --LineaBorde: 1px solid #ccc;
    --FlechaMenu: rgb(182 211 255);
    --ColorTextoVerParVerPatologia: #90919e;
    --PuntoParesAprobacion: rgb(255, 0, 0);
    --DetalleParaMobiles: #90919e;
    --BotonesParesPatologias: #4CAF50;
    --BotonesParesPatologiasHover: #45A049;
    --BotonesGuardar: #2196F3;
    --BotonesGuardarHover: #0B79D0;
    --BotonesMarcadoBusqueda: #034174;
    --SuscripcionDetalles: #84a4c6;
    --ColorBrilloSuscripcion: rgba(183, 183, 183, 0.3);
    --LinkLateral: rgb(102 152 212);
    --colorTenue: rgba(0, 0, 0, 0.5);
    --BusquedaColorFondo: #4b4b4b;
    --ColorLinkUsuario: rgb(128, 77, 0);
    --ColorCantidadFavorito: #1351a0;
    --ColorFondoTituloSobre: #1d1d1d;
    --ColorFondoTituloEstatico: #222222;
    --TextoBotonFooter: #dcdcdc;

    a {
        /* color: rgb(67, 67, 67);*/
        color: #cbddff;
    }

    #linkPie {
        color: #6cadff;
        /* #1351a0;*/

    }
}

#theme-toggle {
    padding: 0px 10px;
    background-color: #4CAF50;
    /* Color de fondo verde */
    border: none;
    /* Sin borde */
    border-radius: 45px;
    /* Bordes redondeados */
    cursor: pointer;
    /* Cursor de puntero */
    transition: background-color 0.3s;
    /* Transición suave para el cambio de color de fondo */
}

#theme-toggle:hover {
    background-color: #45a049;
    /* Color de fondo verde más oscuro al pasar el ratón */
}

#theme-toggle-link {
    display: block;
    /* Para que ocupe todo el ancho del <li> */
    text-align: center;
    /* Centrado horizontal */
    line-height: 1;
    /* Ajusta según el espaciado vertical deseado */
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;

    }

    50% {
        opacity: 0;
    }
}

.icon-blink:hover {
    animation: blink 1s infinite;
}