/*------------------------- ////////// ESTILOS GENERALES ////////// -------------------------*/
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: Manrope;
}

body {
    background: #2C5AA0;
    background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.1) 0%, transparent 70%), linear-gradient(to bottom, #1A5A8F 0%, #2B6DB3 50%, #1A4D7A 100%);
    background-attachment: fixed;
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.traducciones-listas {
    opacity: 1;
}

.seccion-formulario {
    width: 90%;
    max-width: 550px;
    margin: 0px auto 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-formulario {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.contenido-formulario {
    padding: 25px 30px;
}

.descripcion-formulario {
    margin-bottom: 20px;
    color: #555555;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

.formulario {
    text-align: left;
}

.grupo-campo {
    margin-bottom: 18px;
}

.grupo-campo label {
    display: block;
    margin-bottom: 6px;
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.campo-requerido {
    color: #CC0000;
    font-weight: 700;
}

.grupo-campo input,
.grupo-campo select,
.grupo-campo textarea {
    width: 100%;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    font-family: Manrope;
    color: #333333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grupo-campo textarea {
    min-height: 100px;
    resize: vertical;
}

.grupo-campo input:focus,
.grupo-campo select:focus,
.grupo-campo textarea:focus {
    border-color: #2563A8;
    box-shadow: 0px 0px 5px rgba(37, 99, 168, 0.3);
}

.grupo-campo input::placeholder,
.grupo-campo textarea::placeholder {
    color: #AAAAAA;
}

.ayuda-campo {
    display: block;
    margin-top: 5px;
    color: #999999;
    font-size: 11px;
    line-height: 1.4;
}

.nota-campos-requeridos {
    margin-bottom: 20px;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #FFFBEA 0%, #FFF4C8 100%);
    border: 1px solid #E0CA7F;
    border-left: 3px solid #F0B429;
    border-radius: 3px;
    color: #8B6914;
    font-size: 12px;
}

.boton-formulario {
    display: block;
    width: 100%;
    padding: 12px 25px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    font-family: Manrope;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-formulario:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-formulario:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.seccion-cambio-clave {
    margin-bottom: 20px;
    border: 1px solid #D0D0D0;
    border-radius: 3px;
    overflow: hidden;
}

.boton-cambio-clave {
    display: block;
    width: 100%;
    padding: 12px 15px;
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    font-family: Manrope;
    text-align: left;
    background: linear-gradient(to bottom, #F5F5F5 0%, #EBEBEB 100%);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-cambio-clave:hover {
    background: linear-gradient(to bottom, #EBEBEB 0%, #E0E0E0 100%);
}

.campos-cambio-clave {
    display: none;
    padding: 15px;
    border-top: 1px solid #D0D0D0;
    background-color: #FAFAFA;
}

.campos-cambio-clave.visible {
    display: block;
}

.enlace-formulario {
    margin-top: 18px;
    color: #666666;
    font-size: 13px;
    text-align: center;
}

.enlace-formulario a {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

.enlace-formulario a:hover {
    text-decoration: underline;
}

#contenedorPrincipal {
    display: flex;
    width: 85%;
    min-height: 100vh;
    margin: 0px auto;
    padding: 20px 0px;
    flex-direction: column;
}

#contenedorSelectorIdioma {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}

.selector-idioma {
    position: relative;
    display: inline-block;
}

.boton-idioma-seleccionado {
    display: flex;
    width: 140px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: #333333;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    background: linear-gradient(to bottom, #F5F5F5 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    outline: none;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    white-space: nowrap;
}

.boton-idioma-seleccionado:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
}

.bandera-idioma {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.flecha-selector-idioma {
    font-size: 10px;
    margin-left: auto;
    color: #666666;
}

.texto-idioma-seleccionado {
    flex: 1;
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lista-opciones-idioma {
    display: none;
    width: 140px;
    position: absolute;
    top: 100%;
    right: 0px;
    margin-top: 4px;
    padding: 4px 6px 4px 0px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 100;
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #C0C0C0 transparent;
}

.lista-opciones-idioma::-webkit-scrollbar {
    width: 5px;
}

.lista-opciones-idioma::-webkit-scrollbar-track {
    background: transparent;
}

.lista-opciones-idioma::-webkit-scrollbar-thumb {
    background: #C0C0C0;
    border-radius: 3px;
}

.lista-opciones-idioma::-webkit-scrollbar-thumb:hover {
    background: #A0A0A0;
}

.lista-opciones-idioma.lista-opciones-idioma-abierta {
    display: block;
}

.opcion-idioma {
    display: flex;
    margin: 0px 2px 0px 4px;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #333333;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.opcion-idioma:hover {
    background: linear-gradient(to bottom, #F8F8F8 0%, #EBEBEB 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9), 0px 1px 2px rgba(0, 0, 0, 0.08);
    color: #1A4D7A;
}

.opcion-idioma-activa {
    background: linear-gradient(to bottom, #E8F4FF 0%, #D0E8FF 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8);
    color: #1A4D7A;
}

#pancarta {
    display: relative;
    width: 100%;
    height: 200px;
    margin-bottom: 2px;
    position: relative;
    border: 1px solid #1A4D7A;
    border-bottom: 3px solid #0D3A66;
    border-radius: 5px 5px 0px 0px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 3px 8px rgba(0, 0, 0, 0.5);
}

#imagenPancarta {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px 5px 0px 0px;
}

#textoPancarta {
    display: flex;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
    position: absolute;
    top: 0px;
    left: 0px;
    color: #FFFFFF;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
}

#pancarta h1 {
    margin-bottom: 5px;
    font-size: 52px;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 5px 10px rgba(0, 0, 0, 0.5);
}

#pancarta p {
    font-size: 16px;
    font-weight: 300;
    opacity: 0.95;
}

/*------------------------- ////////// ESTILOS NAVEGACIÓN ////////// -------------------------*/
#contenedorNavegacion {
    width: 100%;
    height: 44px;
    padding: 0px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-top: 1px solid #D0D0D0;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#navegacionIzquierda,
#navegacionDerecha {
    display: flex;
    list-style: none;
}

#navegacionIzquierda li,
#navegacionDerecha li {
    position: relative;
    border-right: 1px solid #D0D0D0;
    transition: all 0.2s ease;
}

#navegacionIzquierda li a,
#navegacionDerecha li a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    text-decoration: none;
    cursor: pointer;
}

#navegacionIzquierda li:first-child {
    border-left: none;
}

#navegacionIzquierda li:hover,
#navegacionDerecha li:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
}

#navegacionIzquierda li:active,
#navegacionDerecha li:active {
    background: linear-gradient(to bottom, #E0E0E0 0%, #F5F5F5 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
}

#navegacionIzquierda li a:hover,
#navegacionDerecha li a:hover {
    color: #333333;
    text-decoration: none;
}

.icono-navegacion {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

#navegacionIzquierda li:hover .icono-navegacion,
#navegacionDerecha li:hover .icono-navegacion {
    opacity: 0.9;
}

.icono-chico {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

.icono-mediano {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

.icono-grande {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

.icono-titulo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 6px;
}

.icono-texto {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 4px;
}

.icono-resultado {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 6px;
}

.icono-tabla {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

.icono-borrar-chat {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

.elemento-usuario-sesion {
    border-right: 1px solid #D0D0D0;
}

.elemento-panel-administrador {
    display: flex;
    align-items: center;
    border-right: 1px solid #D0D0D0;
}

.enlace-panel-administrador {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0px 14px !important;
}

.icono-panel-administrador {
    width: 22px;
    height: 22px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.icono-panel-administrador:hover {
    opacity: 1.0;
}

.enlace-usuario-sesion {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 18px !important;
}

.avatar-navegacion {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #B0B0B0;
    object-fit: cover;
    flex-shrink: 0;
}

.avatar-navegacion-texto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}

.nombre-usuario-navegacion {
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

#migaPan {
    width: 100%;
    padding: 10px 16px;
    margin-top: 12px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #ECECEC 100%);
    border: 1px solid #D0D0D0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), 0px 1px 3px rgba(0, 0, 0, 0.2);
    color: #555555;
    font-size: 12px;
}

#migaPan a {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

#migaPan a:hover {
    color: #1A4D7A;
    text-decoration: underline;
}

/*------------------------- ////////// ESTILOS MENSAJE FIJADO ////////// -------------------------*/
#mensajeFijado {
    width: 100%;
    padding: 14px 20px;
    margin-top: 12px;
    background: linear-gradient(to bottom, #FFFBEA 0%, #FFF4C8 100%);
    border: 1px solid #E0CA7F;
    border-left: 4px solid #F0B429;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 4px rgba(0, 0, 0, 0.15);
    color: #8B6914;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#mensajeFijado::before {
    content: "";
    display: none;
}

#mensajeFijado a {
    color: #2563A8;
    font-weight: 700;
    text-decoration: none;
}

#mensajeFijado a:hover {
    text-decoration: underline;
}

#contenidoPrincipal {
    width: 100%;
    padding: 25px;
    margin-top: 12px;
    margin-bottom: 30px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    text-align: center;
}

#contenidoPrincipal img {
    width: 90%;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

#contenidoPrincipal .bandera-moneda {
    width: 20px;
    height: 14px;
    border: none;
    border-radius: 2px;
    box-shadow: none;
}

#contenidoPrincipal img.icono-chico {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: contain;
}

#contenidoPrincipal img.icono-mediano {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: contain;
}

#contenidoPrincipal img.icono-grande {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: contain;
}

#contenidoPrincipal img.icono-titulo {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: contain;
    margin-right: 6px;
}

#contenidoPrincipal img.icono-texto {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: contain;
    margin-right: 4px;
}

#contenidoPrincipal img.icono-resultado {
    width: 48px;
    height: 48px;
    vertical-align: middle;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: contain;
    margin-right: 6px;
}

#contenidoPrincipal img.icono-tabla {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: contain;
}

#contenidoPrincipal img.icono-borrar-chat {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: contain;
}

#contenidoPrincipal img.icono-bandera {
    width: 16px;
    height: 16px;
    margin-bottom: 2px;
    vertical-align: middle;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: contain;
}

#textoIntroduccion {
    width: 90%;
    margin: 25px auto;
    padding: 20px 30px;
    background: linear-gradient(to bottom, #F8F8F8 0%, #EBEBEB 100%);
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.2);
    color: #333333;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

#textoIntroduccion h2 {
    margin-bottom: 15px;
    color: #2563A8;
    font-size: 24px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

/*------------------------- ////////// ESTILOS TARJETAS DE CARACTERISTICAS ////////// -------------------------*/
.tarjeta-caracteristica {
    width: 90%;
    margin: 20px auto;
    padding: 0px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.tarjeta-caracteristica-izquierda {
    flex-direction: row;
}

.tarjeta-caracteristica-derecha {
    flex-direction: row-reverse;
}

.imagen-caracteristica {
    width: 45%;
    height: 280px;
    border-right: 1px solid #D0D0D0;
    object-fit: cover;
}

.tarjeta-caracteristica-derecha .imagen-caracteristica {
    border-right: none;
    border-left: 1px solid #D0D0D0;
}

.contenido-caracteristica {
    width: 55%;
    padding: 30px 35px;
}

.contenido-caracteristica h3 {
    margin-bottom: 12px;
    color: #2563A8;
    font-size: 20px;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.contenido-caracteristica p {
    margin-bottom: 8px;
    color: #555555;
    font-size: 14px;
    line-height: 1.7;
}

.destacado-caracteristica {
    padding: 10px 15px;
    margin-top: 15px;
    background: linear-gradient(to bottom, #FFFBEA 0%, #FFF4C8 100%);
    border: 1px solid #E0CA7F;
    border-left: 3px solid #F0B429;
    border-radius: 3px;
    color: #8B6914;
    font-size: 13px;
}

/*------------------------- ////////// ESTILOS DESCARGAS ////////// -------------------------*/
#seccionDescargas {
    width: 90%;
    margin: 0px auto 30px;
    padding: 35px 40px;
    background: linear-gradient(to bottom, #F8F8F8 0%, #EBEBEB 100%);
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
}

#seccionDescargas h2 {
    margin-bottom: 20px;
    color: #2563A8;
    font-size: 28px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.contador-descargas {
    margin-bottom: 25px;
    color: #555555;
    font-size: 16px;
}

.contador-descargas strong {
    color: #2563A8;
    font-size: 24px;
    font-weight: 700;
}

.selector-arquitectura-descarga {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.selector-arquitectura-descarga select {
    padding: 8px 16px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 4px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: 600;
    font-family: "Consolas", "Courier New", monospace;
    color: #333333;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.selector-arquitectura-descarga select:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
}

.selector-arquitectura-descarga select:focus {
    border-color: #2563A8;
    box-shadow: 0px 0px 5px rgba(37, 99, 168, 0.3);
}

.boton-descarga {
    display: inline-block;
    padding: 18px 45px;
    margin: 15px 0px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 3px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.boton-descarga:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 4px 10px rgba(0, 0, 0, 0.4);
}

.boton-descarga:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

.informacion-descarga {
    margin: 10px 0px;
    color: #666666;
    font-size: 14px;
}

.versiones-anteriores {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed #D0D0D0;
}

.versiones-anteriores a {
    color: #2563A8;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.versiones-anteriores a:hover {
    text-decoration: underline;
}

.instrucciones-grabacion {
    width: 90%;
    margin: 20px auto 30px;
    padding: 20px 30px;
    background: linear-gradient(to bottom, #E8F4FF 0%, #D0E8FF 100%);
    border: 1px solid #A8D0F0;
    border-left: 4px solid #2563A8;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 4px rgba(0, 0, 0, 0.15);
    color: #1A4D7A;
    font-size: 14px;
    line-height: 1.6;
}

.instrucciones-grabacion strong {
    color: #0D3A66;
}

.titulo-estadisticas {
    width: 90%;
    margin: 40px auto 20px;
    padding: 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 1px solid #1A4D7A;
    border-radius: 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 3px 8px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

.subtitulo-estadisticas {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 400;
    opacity: 0.9;
}

.contenedor-estadisticas {
    width: 90%;
    margin: 0px auto 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.tarjeta-estadistica {
    padding: 20px 15px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
}

.tarjeta-estadistica h3 {
    margin-bottom: 15px;
    padding-bottom: 8px;
    color: #2563A8;
    font-size: 16px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #2563A8;
}

.elemento-estadistica {
    padding: 6px 0px;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.elemento-estadistica:last-child {
    border-bottom: none;
}

.nombre-estadistica {
    color: #555555;
    font-weight: 500;
}

.valor-estadistica {
    color: #2563A8;
    font-weight: 700;
}

.porcentaje-estadistica {
    margin-left: 5px;
    color: #999999;
    font-size: 11px;
}

.contenedor-ultimas-descargas {
    width: 90%;
    margin: 0px auto 15px;
    padding: 20px 15px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
}

.contenedor-ultimas-descargas h3 {
    margin-bottom: 15px;
    padding-bottom: 8px;
    color: #2563A8;
    font-size: 16px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #2563A8;
    text-align: left;
}

.lista-ultimas-descargas {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}

.elemento-ultima-descarga {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #F8F8F8 0%, #EBEBEB 100%);
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9);
}

.numero-ultima-descarga {
    color: #2563A8;
    font-size: 11px;
    font-weight: 700;
}

#contenidoPrincipal img.bandera-ultima-descarga {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    background: transparent;
    margin: 0px;
    padding: 0px;
}

.info-ultima-descarga {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pais-ultima-descarga {
    color: #333333;
    font-size: 12px;
    font-weight: 600;
}

.ciudad-ultima-descarga {
    color: #999999;
    font-size: 11px;
}

.fecha-ultima-descarga {
    color: #AAAAAA;
    font-size: 10px;
}

.contenedor-mapa-descargas {
    width: 90%;
    margin: 0px auto 20px;
    padding: 20px 15px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
}

.contenedor-mapa-descargas h3 {
    margin-bottom: 15px;
    padding-bottom: 8px;
    color: #2563A8;
    font-size: 16px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #2563A8;
    text-align: left;
}

#mapaDescargas {
    width: 100%;
    height: 420px;
    background: #F8F8F8;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    overflow: hidden;
}

#mapaDescargas .jvm-tooltip {
    padding: 6px 12px;
    background: linear-gradient(to bottom, #2A2A2A 0%, #1A1A1A 100%);
    border: 1px solid #0A0A0A;
    border-radius: 3px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    font-size: 12px;
    font-family: Manrope;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}

.leyenda-mapa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    color: #555555;
    font-size: 12px;
    font-weight: 600;
}

.escala-leyenda-mapa {
    display: flex;
    align-items: center;
    gap: 6px;
}

.circulo-leyenda-mapa {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
}

.nota-leyenda-mapa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    color: #999999;
    font-size: 11px;
}

.circulo-leyenda-sin-datos {
    width: 12px;
    height: 12px;
    background: #D0D0D0;
}

.circulo-leyenda-nivel1 {
    background: #DBEAFE;
}

.circulo-leyenda-nivel2 {
    background: #93C5FD;
}

.circulo-leyenda-nivel3 {
    background: #60A5FA;
}

.circulo-leyenda-nivel4 {
    background: #3B82F6;
}

.circulo-leyenda-nivel5 {
    background: #2563EB;
}

.circulo-leyenda-nivel6 {
    background: #1D4ED8;
}

/*------------------------- ////////// ESTILOS NOSOTROS ////////// -------------------------*/
.seccion-nosotros {
    width: 90%;
    margin: 0px auto 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-nosotros {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-nosotros {
    padding: 25px 30px;
    color: #333333;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}

.contenido-nosotros p {
    margin-bottom: 15px;
}

.contenido-nosotros h2 {
    margin: 25px 0px 15px 0px;
    padding-bottom: 8px;
    color: #2563A8;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #2563A8;
}

.contenido-nosotros h2:first-child {
    margin-top: 0px;
}

.contenido-nosotros ul {
    margin: 15px 0px;
    padding-left: 25px;
}

.contenido-nosotros li {
    margin-bottom: 10px;
    color: #555555;
}

.tabla-requisitos {
    width: 100%;
    margin: 20px 0px;
    border-collapse: collapse;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
}

.tabla-requisitos thead {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    color: #FFFFFF;
}

.tabla-requisitos th {
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.tabla-requisitos th:last-child {
    border-right: none;
}

.tabla-requisitos tbody tr {
    border-bottom: 1px solid #E0E0E0;
    transition: background 0.2s ease;
}

.tabla-requisitos tbody tr:hover {
    background: linear-gradient(to bottom, #F8F8F8 0%, #F0F0F0 100%);
}

.tabla-requisitos tbody tr:last-child {
    border-bottom: none;
}

.tabla-requisitos td {
    padding: 12px 15px;
    color: #555555;
    font-size: 13px;
    text-align: left;
    border-right: 1px solid #F0F0F0;
}

.tabla-requisitos td:last-child {
    border-right: none;
}

.tabla-requisitos td:first-child {
    background: linear-gradient(to bottom, #F5F5F5 0%, #EFEFEF 100%);
    color: #2563A8;
    font-weight: 700;
}

.caja-destacado {
    padding: 15px 20px;
    margin: 20px 0px;
    background: linear-gradient(to bottom, #FFFBF0 0%, #FFF5E0 100%);
    border: 2px solid #F0C040;
    border-left: 5px solid #F0C040;
    border-radius: 4px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.caja-destacado p {
    margin: 0px;
    color: #555555;
    font-size: 14px;
}

.caja-destacado strong {
    color: #2563A8;
}

/*------------------------- ////////// ESTILOS GALERÍA DE IMÁGENES ////////// -------------------------*/
.seccion-galeria {
    width: 90%;
    margin: 0px auto 30px;
}

.titulo-galeria {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 1px solid #1A4D7A;
    border-radius: 4px 4px 0px 0px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.cuadricula-galeria {
    padding: 25px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-top: none;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.elemento-galeria {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    overflow: visible;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.elemento-galeria:hover {
    text-decoration: none;
    transform: translateY(-3px);
}

.elemento-galeria:hover img {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
}

.elemento-galeria:hover .pie-galeria {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
}

.elemento-galeria img {
    width: 100%;
    height: 200px;
    margin: 0px;
    padding: 0px;
    background: transparent;
    border-radius: 4px 4px 0px 0px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    display: block;
    object-fit: contain;
    object-position: center;
    transition: box-shadow 0.3s ease;
}

.pie-galeria {
    width: 100%;
    padding: 12px 15px;
    background: linear-gradient(to bottom, #F8F8F8 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-top: 2px solid #3A7BC8;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(255, 255, 255, 0.6);
    text-align: center;
    transition: box-shadow 0.3s ease;
}

.pie-galeria h3 {
    margin: 0px;
    color: #2563A8;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

/*------------------------- ////////// ESTILOS FORO (FORO 1) ////////// -------------------------*/
.seccion-foro {
    width: 90%;
    margin: 0px auto 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-foro {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

#contenidoPrincipal img.icono-categoria {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    margin-bottom: 2px;
    vertical-align: middle;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: contain;
}

.tabla-foro {
    width: 100%;
    border-collapse: collapse;
}

.tabla-foro thead {
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border-bottom: 2px solid #D0D0D0;
}

.tabla-foro th {
    padding: 10px 15px;
    color: #555555;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    border-right: 1px solid #E0E0E0;
}

.tabla-foro th:last-child {
    border-right: none;
}

.tabla-foro th.columna-icono {
    width: 60px;
    text-align: left;
}

.tabla-foro th.columna-estadisticas {
    width: 90px;
    text-align: center;
}

.tabla-foro th.columna-ultimo-post {
    width: 280px;
    text-align: left;
}

.tabla-foro tbody tr {
    border-bottom: 1px solid #E8E8E8;
    transition: background 0.2s ease;
}

.tabla-foro tbody tr:hover {
    background: linear-gradient(to bottom, #F8F8F8 0%, #F0F0F0 100%);
}

.tabla-foro tbody tr:last-child {
    border-bottom: none;
}

.tabla-foro td {
    padding: 14px 15px;
    vertical-align: top;
    border-right: 1px solid #F0F0F0;
}

.tabla-foro td:last-child {
    border-right: none;
}

.celda-imagen-foro {
    text-align: left;
}

.imagen-foro {
    width: 42px;
    height: 42px;
    background: linear-gradient(to bottom, #E0E0E0 0%, #C8C8C8 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}

.titulo-foro {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

.titulo-foro a {
    color: #2563A8;
    text-decoration: none;
}

.titulo-foro a:hover {
    text-decoration: underline;
}

.descripcion-foro {
    margin-bottom: 4px;
    color: #666666;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

.moderador-foro {
    color: #999999;
    font-size: 11px;
    text-align: left;
}

.moderador-foro strong {
    color: #2563A8;
}

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

.numero-estadistica {
    margin-bottom: 3px;
    color: #2563A8;
    font-size: 18px;
    font-weight: 700;
    display: block;
}

.etiqueta-estadistica {
    color: #999999;
    font-size: 10px;
    text-transform: uppercase;
}

.titulo-ultimo-post {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    display: block;
}

.titulo-ultimo-post a {
    color: #2563A8;
    text-decoration: none;
}

.titulo-ultimo-post a:hover {
    text-decoration: underline;
}

.usuario-ultimo-post {
    margin-bottom: 3px;
    color: #666666;
    font-size: 11px;
    text-align: left;
}

.usuario-ultimo-post a {
    color: #666666;
    text-decoration: none;
}

.usuario-ultimo-post a strong {
    color: #2563A8;
}

.usuario-ultimo-post a:hover strong {
    text-decoration: underline;
}

.fecha-ultimo-post {
    color: #999999;
    font-size: 11px;
    text-align: left;
}

/*------------------------- ////////// ESTILOS CHAT ////////// -------------------------*/
.seccion-chat {
    width: 90%;
    margin: 30px auto 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-chat {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border-bottom: 2px solid #398439;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.mensajes-chat {
    max-height: 450px;
    padding: 10px 0px;
    background: #FAFAFA;
    overflow-y: auto;
}

.mensaje-chat {
    padding: 12px 20px;
    margin-bottom: 1px;
    background: #FFFFFF;
    border-bottom: 1px solid #E8E8E8;
}

.encabezado-mensaje {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar-usuario {
    width: 36px;
    height: 36px;
    background: linear-gradient(to bottom, #D0D0D0 0%, #B8B8B8 100%);
    border: 2px solid #A0A0A0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 16px;
}

.informacion-usuario-mensaje {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.usuario-mensaje {
    font-size: 13px;
    font-weight: 700;
}

.usuario-mensaje a {
    color: #2563A8;
    text-decoration: none;
}

.usuario-mensaje a:hover {
    text-decoration: underline;
}

.usuario-mensaje-destacado a {
    color: #B8860B;
}

.fecha-mensaje {
    color: #999999;
    font-size: 11px;
}

.texto-mensaje {
    color: #333333;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

.boton-responder-chat {
    margin-left: auto;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #999999;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
}

.mensaje-chat:hover .boton-responder-chat {
    opacity: 1;
}

.boton-responder-chat:hover {
    background: #F0F0F0;
    border-color: #D0D0D0;
    color: #2563A8;
}

.boton-eliminar-chat {
    padding: 2px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #999999;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
}

.mensaje-chat:hover .boton-eliminar-chat {
    opacity: 1;
}

.boton-eliminar-chat:hover {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #DC2626;
}

.vista-previa-respuesta {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #F0F0F0;
    border-left: 3px solid #2563A8;
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.boton-cancelar-respuesta {
    padding: 2px 6px;
    background: transparent;
    border: none;
    color: #999999;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    order: -1;
}

.boton-cancelar-respuesta:hover {
    color: #CC0000;
}

.texto-vista-previa-respuesta {
    color: #666666;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.responder-a {
    padding: 6px 10px;
    margin-bottom: 8px;
    background: #F0F0F0;
    border-left: 3px solid #2563A8;
    border-radius: 2px;
    color: #666666;
    font-size: 11px;
}

.responder-a strong {
    color: #2563A8;
}

.area-entrada-chat {
    padding: 15px 20px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border-top: 2px solid #D0D0D0;
}

.caja-entrada-chat {
    display: flex;
    gap: 10px;
}

.entrada-chat {
    flex: 1;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    font-family: Manrope;
    outline: none;
}

.entrada-chat:focus {
    border-color: #2563A8;
    box-shadow: 0px 0px 5px rgba(37, 99, 168, 0.3);
}

.boton-enviar-chat {
    padding: 10px 25px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-enviar-chat:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
}

.boton-enviar-chat:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.notificacion-spam-chat {
    display: none;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: linear-gradient(to bottom, #FDECEC 0%, #FADADA 100%);
    border: 1px solid #E0A0A0;
    border-left: 3px solid #C9302C;
    border-radius: 2px;
    color: #8B2020;
    font-size: 12px;
    font-weight: 600;
}

/*------------------------- ////////// ESTILOS LISTA DE TEMAS (FORO 2) ////////// -------------------------*/
.cabecera-lista-temas {
    width: 90%;
    margin: 0px auto 15px;
    padding: 20px 25px;
    background: linear-gradient(to bottom, #F8F8F8 0%, #EBEBEB 100%);
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.informacion-cabecera-lista-temas h2 {
    margin-bottom: 8px;
    color: #2563A8;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.informacion-cabecera-lista-temas p {
    margin-bottom: 5px;
    color: #555555;
    font-size: 13px;
    line-height: 1.5;
}

.moderador-lista-temas {
    color: #999999;
    font-size: 12px;
}

.moderador-lista-temas strong {
    color: #2563A8;
}

.boton-nuevo-tema {
    display: inline-block;
    padding: 10px 22px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.boton-nuevo-tema:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.boton-nuevo-tema:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.informacion-paginacion-temas {
    width: 90%;
    margin: 0px auto 10px;
    padding: 8px 15px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #ECECEC 100%);
    border: 1px solid #D0D0D0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), 0px 1px 3px rgba(0, 0, 0, 0.2);
    color: #555555;
    font-size: 12px;
}

.informacion-paginacion-temas strong {
    color: #2563A8;
    font-weight: 700;
}

.seccion-lista-temas {
    width: 90%;
    margin: 0px auto 10px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.tabla-lista-temas {
    width: 100%;
    border-collapse: collapse;
}

.tabla-lista-temas thead {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    color: #FFFFFF;
}

.tabla-lista-temas th {
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.tabla-lista-temas th:last-child {
    border-right: none;
}

.tabla-lista-temas th.columna-icono-tema {
    width: 60px;
    text-align: center;
}

.tabla-lista-temas th.columna-estadisticas-tema {
    width: 90px;
    text-align: center;
}

.tabla-lista-temas th.columna-ultimo-post-tema {
    width: 220px;
    text-align: left;
}

.tabla-lista-temas tbody tr {
    border-bottom: 1px solid #E8E8E8;
    transition: background 0.2s ease;
}

.tabla-lista-temas tbody tr:hover {
    background: linear-gradient(to bottom, #F8F8F8 0%, #F0F0F0 100%);
}

.tabla-lista-temas tbody tr:last-child {
    border-bottom: none;
}

.tabla-lista-temas td {
    padding: 12px 15px;
    vertical-align: middle;
    border-right: 1px solid #F0F0F0;
}

.tabla-lista-temas td:last-child {
    border-right: none;
}

.celda-icono-tema {
    text-align: center;
}

.icono-tema {
    width: 42px;
    height: 42px;
    background: linear-gradient(to bottom, #E0E0E0 0%, #C8C8C8 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.icono-tema-fijado {
    background: linear-gradient(to bottom, #FFFBEA 0%, #FFF4C8 100%);
    border: 1px solid #E0CA7F;
}

.fila-tema-fijado {
    background: linear-gradient(to bottom, #FFFEF5 0%, #FFF9E0 100%);
}

.fila-tema-fijado:hover {
    background: linear-gradient(to bottom, #FFFDE8 0%, #FFF4C8 100%) !important;
}

.titulo-tema {
    margin-bottom: 5px;
}

.titulo-tema a {
    color: #2563A8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.titulo-tema a:hover {
    text-decoration: underline;
}

.autor-tema {
    color: #999999;
    font-size: 11px;
}

.autor-tema strong {
    color: #2563A8;
}

.celda-estadistica-tema {
    text-align: center;
}

.numero-estadistica-tema {
    color: #2563A8;
    font-size: 14px;
    font-weight: 700;
}

.celda-ultimo-post-tema {
    text-align: left;
}

.usuario-ultimo-post-tema {
    margin-bottom: 3px;
    color: #666666;
    font-size: 11px;
}

.usuario-ultimo-post-tema strong {
    color: #2563A8;
}

.fecha-ultimo-post-tema {
    color: #999999;
    font-size: 11px;
}

/*------------------------- ////////// ESTILOS HILO DE FORO (FORO 3) ////////// -------------------------*/
.cabecera-hilo {
    width: 90%;
    margin: 0px auto 15px;
    padding: 20px 25px;
    background: linear-gradient(to bottom, #F8F8F8 0%, #EBEBEB 100%);
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.cabecera-hilo h2 {
    margin-bottom: 8px;
    color: #2563A8;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.info-cabecera-hilo {
    color: #555555;
    font-size: 12px;
}

.info-cabecera-hilo strong {
    color: #2563A8;
}

.separador-hilo {
    margin: 0px 8px;
    color: #D0D0D0;
}

.boton-responder-hilo {
    display: block;
    width: 90%;
    margin: 0px auto 15px;
    padding: 10px 22px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.boton-responder-hilo:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.boton-responder-hilo:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.post-foro {
    width: 90%;
    margin: 0px auto 15px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
}

.lateral-post {
    width: 200px;
    min-width: 200px;
    padding: 18px 15px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border-right: 2px solid #D0D0D0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar-post {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    background: linear-gradient(to bottom, #D0D0D0 0%, #B8B8B8 100%);
    border: 2px solid #A0A0A0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
}

.nombre-usuario-post {
    margin-bottom: 6px;
}

.nombre-usuario-post a {
    color: #2563A8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.nombre-usuario-post a:hover {
    text-decoration: underline;
}

.rango-usuario-post {
    display: inline-block;
    padding: 3px 12px;
    margin-bottom: 12px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
}

.rango-administrador {
    background: linear-gradient(to bottom, #D9534F 0%, #C9302C 100%);
    border: 1px solid #AC2925;
}

.rango-moderador {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 1px solid #1A4D7A;
}

.rango-patron {
    background: linear-gradient(to bottom, #9B59B6 0%, #7D3C98 100%);
    border: 1px solid #6C3483;
}

.rango-paypal {
    background: linear-gradient(to bottom, #009CDE 0%, #003087 100%);
    border: 1px solid #002670;
}

.rango-kofi {
    background: linear-gradient(to bottom, #F0AD4E 0%, #D4912A 100%);
    border: 1px solid #B87A1E;
}

.rango-cliente {
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
}

.detalles-usuario-post {
    width: 100%;
    margin-bottom: 12px;
    text-align: left;
}

.detalle-item-post {
    padding: 4px 0px;
    border-bottom: 1px solid #E0E0E0;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detalle-item-post:last-child {
    border-bottom: none;
}

.detalle-etiqueta-post {
    color: #999999;
    font-weight: 600;
}

.detalle-valor-post {
    color: #555555;
    font-weight: 500;
    text-align: right;
}

.agradecimientos-post {
    width: 100%;
    padding: 8px 0px;
    border-top: 1px solid #D0D0D0;
    text-align: left;
    font-size: 11px;
    color: #999999;
}

.agradecimientos-post span {
    display: block;
    margin-bottom: 3px;
}

.agradecimientos-post span:last-child {
    margin-bottom: 0px;
}

.agradecimientos-post strong {
    color: #2563A8;
}

.bandera-post {
    margin-top: 8px;
    font-size: 28px;
}

.contenido-post {
    flex: 1;
    min-width: 0px;
    display: flex;
    flex-direction: column;
}

.contenido-post ul,
.contenido-post ol {
    margin-bottom: 10px;
    padding-left: 20px;
}

.contenido-post li {
    margin-bottom: 4px;
    line-height: 1.6;
    text-align: left;
}

.cabecera-contenido-post {
    padding: 10px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.titulo-post {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.fecha-post {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    white-space: nowrap;
}

.cuerpo-post {
    flex: 1;
    padding: 20px 25px;
    color: #333333;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}

.cuerpo-post p {
    margin-bottom: 12px;
}

.cuerpo-post p:last-child {
    margin-bottom: 0px;
}

.cuerpo-post a {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

.cuerpo-post a:hover {
    text-decoration: underline;
}

.cuerpo-post strong {
    color: #333333;
}

#contenidoPrincipal .cuerpo-post img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 10px auto;
    border: none;
    border-radius: 0px;
    box-shadow: none;
}

.aviso-traduccion-post {
    margin-bottom: 15px;
    padding: 8px 14px;
    background: linear-gradient(to bottom, #E8F4FF 0%, #D0E8FF 100%);
    border: 1px solid #A8D0F0;
    border-left: 3px solid #2563A8;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8);
    color: #1A4D7A;
    font-size: 12px;
    font-style: italic;
}

.cita-post {
    margin: 15px 0px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #F2F2F2 100%);
    border: 1px solid #D0D0D0;
    border-left: 4px solid #2563A8;
    border-radius: 3px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.cabecera-cita-post {
    padding: 8px 14px;
    background: linear-gradient(to bottom, #E8E8E8 0%, #DCDCDC 100%);
    border-bottom: 1px solid #D0D0D0;
    color: #555555;
    font-size: 12px;
}

.cabecera-cita-post strong {
    color: #2563A8;
}

.texto-cita-post {
    padding: 12px 14px;
    color: #666666;
    font-size: 13px;
    line-height: 1.6;
    font-style: italic;
}

.imagen-post {
    margin: 18px 0px;
    text-align: center;
}

.imagen-post img {
    max-width: 100%;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.imagen-post img:hover {
    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.35);
}

.pie-imagen-post {
    margin-top: 6px;
    color: #999999;
    font-size: 11px;
    font-style: italic;
}

.enlace-descarga-post {
    color: #2563A8;
    font-weight: 700;
    text-decoration: none;
}

.enlace-descarga-post:hover {
    text-decoration: underline;
}

.pie-post {
    padding: 8px 20px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #ECECEC 100%);
    border-top: 1px solid #E0E0E0;
    text-align: right;
}

.enlace-accion-post {
    color: #2563A8;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.enlace-accion-post:hover {
    text-decoration: underline;
}

.boton-eliminar-post {
    float: left;
    padding: 0px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #DC2626;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-eliminar-post:hover {
    background: #FEE2E2;
    border-color: #FECACA;
}

.boton-eliminar-post:active {
    background: #FECACA;
    transform: translateY(1px);
}

.boton-eliminar-hilo {
    padding: 0px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #DC2626;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-eliminar-hilo:hover {
    background: #FEE2E2;
    border-color: #FECACA;
}

.boton-eliminar-hilo:active {
    background: #FECACA;
    transform: translateY(1px);
}

/*------------------------- ////////// ESTILOS EDITOR DE FORO 4 Y 5 (GENÉRICO) ////////// -------------------------*/
.cabecera-editor {
    width: 90%;
    margin: 0px auto 15px;
    padding: 20px 25px;
    background: linear-gradient(to bottom, #F8F8F8 0%, #EBEBEB 100%);
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.cabecera-editor h2 {
    margin-bottom: 8px;
    color: #2563A8;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.informacion-cabecera-editor {
    color: #555555;
    font-size: 12px;
}

.informacion-cabecera-editor strong {
    color: #2563A8;
}

.seccion-editor {
    width: 90%;
    margin: 0px auto 15px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-editor {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-editor {
    padding: 25px 25px;
}

.grupo-campo-editor {
    margin-bottom: 18px;
}

.grupo-campo-editor label {
    display: block;
    margin-bottom: 6px;
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.grupo-campo-editor input {
    width: 100%;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    font-family: Manrope;
    color: #333333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grupo-campo-editor input:focus {
    border-color: #2563A8;
    box-shadow: 0px 0px 5px rgba(37, 99, 168, 0.3);
}

.grupo-campo-editor input::placeholder {
    color: #AAAAAA;
}

.campo-asunto-readonly {
    width: 100%;
    padding: 10px 12px;
    background: linear-gradient(to bottom, #F0F0F0 0%, #E4E4E4 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    font-family: Manrope;
    color: #555555;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.area-editor {
    min-height: 280px;
    background: #FFFFFF;
    font-size: 14px;
    font-family: Manrope;
    color: #333333;
    line-height: 1.8;
}

.area-editor .ql-editor {
    min-height: 280px;
}

.area-editor .ql-editor.ql-blank::before {
    color: #AAAAAA;
    font-style: italic;
    font-size: 13px;
}

#contenidoPrincipal .area-editor img,
#contenidoPrincipal .contenido-vista-previa img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 10px auto;
    box-shadow: none;
}

.acciones-editor {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.boton-enviar-editor {
    padding: 12px 30px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    font-family: Manrope;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-enviar-editor:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-enviar-editor:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.opciones-editor {
    padding: 12px 15px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #F2F2F2 100%);
    border: 1px solid #D0D0D0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.opcion-checkbox-editor {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555555;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.opcion-checkbox-editor input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2563A8;
    cursor: pointer;
}

.opcion-checkbox-editor span {
    text-shadow: none;
}

.boton-vista-previa {
    padding: 12px 30px;
    color: #333333;
    font-size: 14px;
    font-weight: 600;
    font-family: Manrope;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    background: linear-gradient(to bottom, #F5F5F5 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-vista-previa:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 3px 6px rgba(0, 0, 0, 0.2);
}

.boton-vista-previa:active {
    background: linear-gradient(to bottom, #E0E0E0 0%, #F5F5F5 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.seccion-vista-previa {
    width: 90%;
    margin: 0px auto 15px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-vista-previa {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border-bottom: 2px solid #D58512;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-vista-previa {
    padding: 20px 25px;
    color: #333333;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}

.contenido-vista-previa p {
    margin-bottom: 12px;
}

.contenido-vista-previa p:last-child {
    margin-bottom: 0px;
}

.contenido-vista-previa ul,
.contenido-vista-previa ol {
    margin-bottom: 10px;
    padding-left: 20px;
}

.contenido-vista-previa li {
    margin-bottom: 4px;
    line-height: 1.6;
    text-align: left;
}

.contenido-vista-previa a {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

.contenido-vista-previa a:hover {
    text-decoration: underline;
}

.contenido-vista-previa blockquote {
    margin: 15px 0px;
    padding: 12px 14px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #F2F2F2 100%);
    border: 1px solid #D0D0D0;
    border-left: 4px solid #2563A8;
    border-radius: 3px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #666666;
    font-size: 13px;
    line-height: 1.6;
    font-style: italic;
}

.contenido-vista-previa pre {
    margin: 15px 0px;
    padding: 14px 18px;
    background: linear-gradient(to bottom, #2A2A2A 0%, #1A1A1A 100%);
    border: 1px solid #0A0A0A;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    color: #E0E0E0;
    font-size: 13px;
    font-family: "Consolas", "Courier New", monospace;
    line-height: 1.6;
    overflow-x: auto;
}

.contenido-vista-previa img {
    max-width: 100%;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
}

.seccion-reglas-foro {
    width: 90%;
    margin: 0px auto 15px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-reglas-foro {
    padding: 10px 20px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border-bottom: 2px solid #D0D0D0;
    color: #555555;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.contenido-reglas-foro {
    padding: 15px 20px;
    color: #555555;
    font-size: 13px;
    line-height: 1.8;
    text-align: left;
}

.contenido-reglas-foro p {
    margin-bottom: 6px;
}

.contenido-reglas-foro p:last-child {
    margin-bottom: 0px;
}

.ql-toolbar.ql-snow {
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border: 1px solid #B0B0B0;
    border-bottom: 2px solid #D0D0D0;
    border-radius: 3px 3px 0px 0px;
}

.ql-container.ql-snow {
    border: 1px solid #B0B0B0;
    border-top: none;
    border-radius: 0px 0px 3px 3px;
}

.ql-editor:focus {
    box-shadow: inset 0px 0px 5px rgba(37, 99, 168, 0.15);
}

.ql-snow .ql-picker-label {
    color: #333333;
}

.ql-snow .ql-stroke {
    stroke: #555555;
}

.ql-snow .ql-fill {
    fill: #555555;
}

.ql-snow button:hover .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-stroke {
    stroke: #2563A8;
}

.ql-snow button:hover .ql-fill,
.ql-snow .ql-picker-label:hover .ql-fill {
    fill: #2563A8;
}

.ql-snow button.ql-active .ql-stroke {
    stroke: #2563A8;
}

.ql-snow button.ql-active .ql-fill {
    fill: #2563A8;
}

.ql-snow .ql-picker-label.ql-active {
    color: #2563A8;
}

/*------------------------- ////////// ESTILOS PERFIL PÚBLICO ////////// -------------------------*/
.seccion-perfil-cabecera {
    width: 90%;
    margin: 0px auto 20px;
    padding: 25px 30px;
    background: linear-gradient(to bottom, #F8F8F8 0%, #EBEBEB 100%);
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 20px;
}

.perfil-avatar-principal {
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom, #D0D0D0 0%, #B8B8B8 100%);
    border: 2px solid #A0A0A0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 48px;
}

.perfil-info-principal {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perfil-nombre-usuario {
    color: #2563A8;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.perfil-rango-usuario {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    align-self: flex-start;
}

.boton-modificar-perfil {
    display: inline-block;
    padding: 6px 18px;
    margin-left: auto;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    font-family: Manrope;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border: 1px solid #D58512;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: center;
}

.boton-modificar-perfil:hover {
    background: linear-gradient(to bottom, #F5BE6E 0%, #F0A630 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-modificar-perfil:active {
    background: linear-gradient(to bottom, #EC971F 0%, #F0AD4E 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.perfil-estado-conexion {
    font-size: 12px;
    font-weight: 600;
}

.perfil-estado-activo {
    color: #449D44;
}

.perfil-estado-inactivo {
    color: #999999;
}

.seccion-perfil-descripcion {
    width: 90%;
    margin: 0px auto 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.contenido-perfil-descripcion {
    padding: 20px 25px;
    color: #555555;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.contenido-perfil-descripcion p {
    margin: 0px;
}

.enlace-perfil {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

.enlace-perfil:hover {
    text-decoration: underline;
}

.contenedor-perfil {
    width: 90%;
    margin: 0px auto;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.columna-perfil-izquierda {
    width: 300px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.columna-perfil-derecha {
    flex: 1;
    min-width: 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.seccion-perfil {
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-perfil {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-perfil {
    padding: 18px 20px;
}

.elemento-perfil {
    padding: 8px 0px;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.elemento-perfil:first-child {
    padding-top: 0px;
}

.elemento-perfil:last-child {
    padding-bottom: 0px;
    border-bottom: none;
}

.etiqueta-perfil {
    color: #999999;
    font-size: 12px;
    font-weight: 600;
}

.valor-perfil {
    color: #555555;
    font-size: 12px;
    font-weight: 500;
    text-align: right;
}

.valor-perfil-destacado {
    color: #2563A8;
    font-weight: 700;
}

.elemento-post-perfil {
    padding: 14px 0px;
    border-bottom: 1px solid #E8E8E8;
}

.elemento-post-perfil:first-child {
    padding-top: 0px;
}

.elemento-post-perfil:last-child {
    padding-bottom: 0px;
    border-bottom: none;
}

.titulo-post-perfil {
    margin-bottom: 5px;
}

.titulo-post-perfil a {
    color: #2563A8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.titulo-post-perfil a:hover {
    text-decoration: underline;
}

.meta-post-perfil {
    margin-bottom: 6px;
    color: #999999;
    font-size: 11px;
}

.meta-post-perfil strong {
    color: #2563A8;
}

.separador-perfil {
    margin: 0px 8px;
    color: #D0D0D0;
}

.foro-post-perfil {
    color: #666666;
    font-size: 11px;
}

.fecha-post-perfil {
    color: #999999;
    font-size: 11px;
}

.extracto-post-perfil {
    color: #555555;
    font-size: 13px;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elemento-tema-perfil {
    padding: 12px 0px;
    border-bottom: 1px solid #E8E8E8;
    display: flex;
    align-items: center;
    gap: 12px;
}

.elemento-tema-perfil:first-child {
    padding-top: 0px;
}

.elemento-tema-perfil:last-child {
    padding-bottom: 0px;
    border-bottom: none;
}

.icono-tema-perfil {
    width: 42px;
    height: 42px;
    background: linear-gradient(to bottom, #E0E0E0 0%, #C8C8C8 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 20px;
}

.info-tema-perfil {
    flex: 1;
    min-width: 0px;
}

.titulo-tema-perfil {
    margin-bottom: 4px;
}

.titulo-tema-perfil a {
    color: #2563A8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.titulo-tema-perfil a:hover {
    text-decoration: underline;
}

.meta-tema-perfil {
    color: #999999;
    font-size: 11px;
}

.meta-tema-perfil strong {
    color: #2563A8;
}

.foro-tema-perfil {
    color: #666666;
    font-size: 11px;
}

.fecha-tema-perfil {
    color: #999999;
    font-size: 11px;
}

.estadisticas-tema-perfil {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.dato-tema-perfil {
    color: #999999;
    font-size: 11px;
    white-space: nowrap;
}

/*------------------------- ////////// ESTILOS PÁGINA REGISTRO ////////// -------------------------*/
.seccion-registro {
    width: 90%;
    max-width: 550px;
    margin: 0px auto 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-registro {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-registro {
    padding: 25px 30px;
}

.descripcion-registro {
    margin-bottom: 20px;
    color: #555555;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

.formulario-registro {
    text-align: left;
}

.grupo-campo {
    margin-bottom: 18px;
}

.grupo-campo label {
    display: block;
    margin-bottom: 6px;
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.campo-requerido {
    color: #CC0000;
    font-weight: 700;
}

.grupo-campo input {
    width: 100%;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    font-family: Manrope;
    color: #333333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grupo-campo input:focus {
    border-color: #2563A8;
    box-shadow: 0px 0px 5px rgba(37, 99, 168, 0.3);
}

.grupo-campo input::placeholder {
    color: #AAAAAA;
}

.ayuda-campo {
    display: block;
    margin-top: 5px;
    color: #999999;
    font-size: 11px;
    line-height: 1.4;
}

.nota-campos-requeridos {
    margin-bottom: 20px;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #FFFBEA 0%, #FFF4C8 100%);
    border: 1px solid #E0CA7F;
    border-left: 3px solid #F0B429;
    border-radius: 3px;
    color: #8B6914;
    font-size: 12px;
}

.previsualizacion-imagen {
    width: 100%;
    min-height: 180px;
    padding: 15px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #F0F0F0 100%);
    border: 2px dashed #D0D0D0;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.previsualizacion-imagen img {
    max-width: 100%;
    max-height: 300px;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    object-fit: contain;
}

.texto-previsualizacion {
    color: #AAAAAA;
    font-size: 13px;
    font-style: italic;
}

.boton-eliminar-imagen {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 15px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: Manrope;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #D9534F 0%, #C9302C 100%);
    border: 1px solid #AC2925;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-eliminar-imagen:hover {
    background: linear-gradient(to bottom, #E06460 0%, #D43F3A 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-eliminar-imagen:active {
    background: linear-gradient(to bottom, #C9302C 0%, #D9534F 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.boton-registro {
    display: block;
    width: 100%;
    padding: 12px 25px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    font-family: Manrope;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-registro:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-registro:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.enlace-login {
    margin-top: 18px;
    color: #666666;
    font-size: 13px;
    text-align: center;
}

.enlace-login a {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

.enlace-login a:hover {
    text-decoration: underline;
}

/*------------------------- ////////// ESTILOS GITLAB ////////// -------------------------*/
.seccion-gitlab {
    width: 90%;
    margin: 0px auto 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-gitlab {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-gitlab {
    padding: 25px 30px;
    color: #333333;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}

.contenido-gitlab p {
    margin-bottom: 15px;
}

.contenido-gitlab ul {
    margin: 15px 0px;
    padding-left: 25px;
}

.contenido-gitlab li {
    margin-bottom: 10px;
    color: #555555;
}

.contenido-gitlab a {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

.contenido-gitlab a:hover {
    text-decoration: underline;
}

.tarjeta-repositorio {
    padding: 18px 20px;
    margin-bottom: 15px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #F2F2F2 100%);
    border: 1px solid #D0D0D0;
    border-left: 4px solid #2563A8;
    border-radius: 3px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.tarjeta-repositorio:last-child {
    margin-bottom: 0px;
}

.tarjeta-repositorio:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F8F8F8 100%);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.cabecera-repositorio {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.icono-repositorio {
    font-size: 20px;
}

.info-repositorio {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nombre-repositorio {
    color: #2563A8;
    font-size: 16px;
    font-weight: 700;
    font-family: "Consolas", "Courier New", monospace;
}

.etiqueta-repositorio {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

.etiqueta-fork {
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border: 1px solid #D58512;
    color: #FFFFFF;
}

.etiqueta-propio {
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    color: #FFFFFF;
}

.descripcion-repositorio {
    margin-bottom: 12px;
    color: #555555;
    font-size: 13px;
    line-height: 1.6;
}

.metadatos-repositorio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    color: #999999;
    font-size: 12px;
}

.lenguaje-repositorio {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #555555;
    font-weight: 600;
}

.punto-lenguaje {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.punto-c {
    background: #555599;
}

.punto-cpp {
    background: #F34B7D;
}

.punto-csharp {
    background: #178600;
}

.punto-php {
    background: #4F5D95;
}

.punto-d {
    background: #BA595E;
}

.punto-html {
    background: #E34C26;
}

.punto-css {
    background: #563D7C;
}

.punto-crystal {
    background: #000100;
}

.punto-dart {
    background: #00B4AB;
}

.punto-java {
    background: #B07219;
}

.punto-javascript {
    background: #F1E05A;
}

.punto-typescript {
    background: #3178C6;
}

.punto-python {
    background: #3572A5;
}

.punto-ruby {
    background: #701516;
}

.punto-roff {
    background: #ECDEBE;
}

.punto-bash {
    background: #89E051;
}

.punto-shell {
    background: #89E051;
}

.punto-markdown {
    background: #083FA1;
}

.punto-po {
    background: #2196F3;
}

.punto-json {
    background: #292929;
}

.punto-n-a {
    background: #999999;
}

.dato-repositorio {
    color: #999999;
}

.tabla-comparacion-gitlab {
    width: 100%;
    margin: 20px 0px;
    border-collapse: collapse;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
}

.tabla-comparacion-gitlab thead {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    color: #FFFFFF;
}

.tabla-comparacion-gitlab th {
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.tabla-comparacion-gitlab th:last-child {
    border-right: none;
}

.tabla-comparacion-gitlab tbody tr {
    border-bottom: 1px solid #E0E0E0;
    transition: background 0.2s ease;
}

.tabla-comparacion-gitlab tbody tr:hover {
    background: linear-gradient(to bottom, #F8F8F8 0%, #F0F0F0 100%);
}

.tabla-comparacion-gitlab tbody tr:last-child {
    border-bottom: none;
}

.tabla-comparacion-gitlab td {
    padding: 12px 15px;
    color: #555555;
    font-size: 13px;
    text-align: left;
    border-right: 1px solid #F0F0F0;
}

.tabla-comparacion-gitlab td:last-child {
    border-right: none;
}

.tabla-comparacion-gitlab td:first-child {
    background: linear-gradient(to bottom, #F5F5F5 0%, #EFEFEF 100%);
    color: #2563A8;
    font-weight: 700;
}

.valor-mejora {
    color: #449D44;
    font-weight: 700;
}

/*------------------------- ////////// ESTILOS FAQ ////////// -------------------------*/
.seccion-faq {
    width: 90%;
    margin: 0px auto 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-faq {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-faq {
    padding: 25px 30px;
    color: #333333;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}

.contenido-faq p {
    margin-bottom: 15px;
}

.contenido-faq ul {
    margin: 15px 0px;
    padding-left: 25px;
}

.contenido-faq li {
    margin-bottom: 10px;
    color: #555555;
}

.contenido-faq a {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

.contenido-faq a:hover {
    text-decoration: underline;
}

.elemento-faq {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #E8E8E8;
}

.elemento-faq:last-child {
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: none;
}

.pregunta-faq {
    margin-bottom: 10px;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border: 1px solid #D0D0D0;
    border-left: 4px solid #2563A8;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8);
    color: #2563A8;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.respuesta-faq {
    padding: 0px 15px;
    color: #555555;
    font-size: 14px;
    line-height: 1.7;
}

.respuesta-faq p {
    margin-bottom: 10px;
}

.respuesta-faq p:last-child {
    margin-bottom: 0px;
}

/*------------------------- ////////// ESTILOS PÁGINA DONACIONES ////////// -------------------------*/
.seccion-introductorio {
    width: 90%;
    margin: 0px auto 25px;
    padding: 25px 30px;
    background: linear-gradient(to bottom, #F8F8F8 0%, #EBEBEB 100%);
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.2);
    color: #333333;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

.seccion-introductorio h2 {
    margin-bottom: 15px;
    color: #2563A8;
    font-size: 24px;
    text-align: center;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.seccion-introductorio p {
    margin-bottom: 12px;
    color: #555555;
}

.seccion-introductorio p:last-child {
    margin-bottom: 0px;
}

.seccion-donacion-formulario {
    width: 90%;
    margin: 0px auto 25px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
}

.seccion-donacion-formulario .encabezado-donacion-formulario {
    border-radius: 4px 4px 0px 0px;
}

.encabezado-donacion-formulario {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
}

.encabezado-donacion-formulario h3 {
    margin: 0px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-donacion-formulario {
    padding: 25px 30px;
}

.grupo-campo-donacion {
    margin-bottom: 20px;
}

.grupo-campo-donacion label {
    display: block;
    margin-bottom: 6px;
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.grupo-campo-donacion select,
.grupo-campo-donacion input {
    width: 100%;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    font-family: Manrope;
    color: #333333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grupo-campo-donacion select:focus,
.grupo-campo-donacion input:focus {
    border-color: #2563A8;
    box-shadow: 0px 0px 5px rgba(37, 99, 168, 0.3);
}

.grupo-campo-donacion input::placeholder {
    color: #AAAAAA;
}

.ayuda-campo-donacion {
    display: block;
    margin-top: 5px;
    color: #999999;
    font-size: 11px;
    line-height: 1.4;
}

.selector-moneda {
    position: relative;
    display: block;
}

.boton-moneda-seleccionada {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    font-family: Manrope;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    text-align: left;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    outline: none;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.boton-moneda-seleccionada:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
}

.bandera-moneda {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.flecha-selector-moneda {
    font-size: 10px;
    margin-left: auto;
    color: #666666;
}

.lista-opciones-moneda {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    margin-top: 4px;
    padding: 4px 0px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 100;
    max-height: 250px;
    overflow-y: auto;
}

.lista-opciones-moneda.lista-opciones-moneda-abierta {
    display: block;
}

.opcion-moneda {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    cursor: pointer;
    white-space: nowrap;
}

.opcion-moneda:hover {
    background: #F0F0F0;
}

.opcion-moneda-activa {
    background: #E8E8E8;
}

.botones-cantidad-rapida {
    margin-bottom: 22px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.boton-cantidad-rapida {
    padding: 8px 18px;
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    font-family: Manrope;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    background: linear-gradient(to bottom, #F5F5F5 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-cantidad-rapida:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 3px 6px rgba(0, 0, 0, 0.2);
}

.boton-cantidad-rapida:active {
    background: linear-gradient(to bottom, #E0E0E0 0%, #F5F5F5 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.boton-donar-paypal {
    display: block;
    width: fit-content;
    min-width: 250px;
    max-width: 40%;
    margin: 0px auto;
    padding: 12px 25px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    font-family: Manrope;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-donar-paypal:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-donar-paypal:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.descripcion-patreon {
    margin-bottom: 18px;
    color: #555555;
    font-size: 14px;
    line-height: 1.7;
}

.boton-donar-patreon {
    display: block;
    width: fit-content;
    min-width: 250px;
    max-width: 40%;
    margin: 0px auto;
    padding: 12px 25px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    font-family: Manrope;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #9B59B6 0%, #7D3C98 100%);
    border: 1px solid #6C3483;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-donar-patreon:hover {
    background: linear-gradient(to bottom, #AB6EC6 0%, #8E4DA8 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.boton-donar-patreon:active {
    background: linear-gradient(to bottom, #7D3C98 0%, #9B59B6 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.descripcion-kofi {
    margin-bottom: 18px;
    color: #555555;
    font-size: 14px;
    line-height: 1.7;
}

.boton-donar-kofi {
    display: block;
    width: fit-content;
    min-width: 250px;
    max-width: 40%;
    margin: 0px auto;
    padding: 12px 25px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    font-family: Manrope;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #F0AD4E 0%, #D4912A 100%);
    border: 1px solid #B87A1E;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-donar-kofi:hover {
    background: linear-gradient(to bottom, #F2BD5E 0%, #E0A030 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.boton-donar-kofi:active {
    background: linear-gradient(to bottom, #D4912A 0%, #F0AD4E 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.seccion-donaciones-recientes {
    width: 90%;
    margin: 0px auto 30px;
    background: #FFFFFF;
    border: 1px solid #D4AF37;
    border-radius: 4px;
    box-shadow: 0px 4px 12px rgba(218, 165, 32, 0.25), 0px 3px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.encabezado-donaciones-recientes {
    padding: 16px 20px;
    position: relative;
    background: linear-gradient(135deg, #B8860B 0%, #DAA520 20%, #FFD700 50%, #DAA520 80%, #B8860B 100%);
    background-size: 200% 100%;
    border-bottom: 3px solid #8B6914;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), inset 0px -1px 0px rgba(0, 0, 0, 0.15), 0px 3px 10px rgba(218, 165, 32, 0.4);
    overflow: hidden;
    text-align: center;
    animation: brilloDorado 4s ease-in-out infinite;
}

.encabezado-donaciones-recientes::before {
    width: 60%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -100%;
    content: "";
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: destelloBarra 5s ease-in-out infinite;
}

.encabezado-donaciones-recientes h3 {
    margin: 0px;
    position: relative;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 10px rgba(255, 215, 0, 0.3);
    letter-spacing: 0.5px;
    z-index: 1;
}

.contenido-donaciones-recientes {
    padding: 0px;
}

.contenido-donaciones-recientes.contenedor-paginable .tabla-donaciones thead {
    display: block;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.contenido-donaciones-recientes.contenedor-paginable .tabla-donaciones thead tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.contenido-donaciones-recientes.contenedor-paginable .tabla-donaciones tbody {
    display: block;
    min-height: 613px;
    max-height: 613px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #C0C0C0 #F0F0F0;
}

.contenido-donaciones-recientes.contenedor-paginable .tabla-donaciones tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.tabla-donaciones {
    width: 100%;
    border-collapse: collapse;
}

.tabla-donaciones thead {
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border-bottom: 2px solid #D0D0D0;
}

.tabla-donaciones th {
    padding: 10px 15px;
    color: #555555;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    border-right: 1px solid #E0E0E0;
}

.tabla-donaciones th:last-child {
    border-right: none;
}

.tabla-donaciones th.columna-avatar-donante {
    width: 75px;
}

.tabla-donaciones th.columna-metodo-donante {
    width: 100px;
    text-align: center;
}

.tabla-donaciones th.columna-cantidad-donante {
    width: 130px;
    text-align: right;
}

.tabla-donaciones th.columna-fecha-donante {
    width: 150px;
    text-align: right;
}

.tabla-donaciones th.columna-pais-donante {
    width: 80px;
    text-align: center;
}

.tabla-donaciones tbody tr {
    border-bottom: 1px solid #E8E8E8;
    transition: background 0.2s ease;
}

.tabla-donaciones tbody tr:hover {
    background: linear-gradient(to bottom, #F8F8F8 0%, #F0F0F0 100%);
}

.tabla-donaciones tbody tr:last-child {
    border-bottom: none;
}

.tabla-donaciones tbody tr.fila-top-oro td {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.10) 0%, rgba(255, 215, 0, 0.18) 50%, rgba(255, 215, 0, 0.10) 100%);
    background-size: 200% 100%;
    animation: brilloFila 6s ease-in-out infinite;
}

.tabla-donaciones tbody tr.fila-top-oro td:first-child {
    box-shadow: inset 3px 0px 0px 0px #DAA520;
    color: #8B6914;
}

.tabla-donaciones tbody tr.fila-top-plata td {
    background: linear-gradient(90deg, rgba(169, 169, 169, 0.10) 0%, rgba(169, 169, 169, 0.18) 50%, rgba(169, 169, 169, 0.10) 100%);
    background-size: 200% 100%;
    animation: brilloFila 6s ease-in-out infinite;
    animation-delay: 0.4s;
}

.tabla-donaciones tbody tr.fila-top-plata td:first-child {
    box-shadow: inset 3px 0px 0px 0px #A8A8A8;
    color: #5A5A5A;
}

.tabla-donaciones tbody tr.fila-top-bronce td {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.10) 0%, rgba(205, 127, 50, 0.18) 50%, rgba(205, 127, 50, 0.10) 100%);
    background-size: 200% 100%;
    animation: brilloFila 6s ease-in-out infinite;
    animation-delay: 0.8s;
}

.tabla-donaciones tbody tr.fila-top-bronce td:first-child {
    box-shadow: inset 3px 0px 0px 0px #8B5A2B;
    color: #6B3410;
}

.contenedor-posicion-medalla {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

#contenidoPrincipal img.imagen-medalla {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    object-fit: contain;
    border: none;
    border-radius: 0px;
    box-shadow: none;
}

.tabla-donaciones td {
    padding: 12px 15px;
    vertical-align: middle;
    border-right: 1px solid #F0F0F0;
    font-size: 13px;
}

.tabla-donaciones td:last-child {
    border-right: none;
}

.celda-avatar-donante {
    width: 75px;
    text-align: center;
}

.avatar-donante {
    width: 36px;
    height: 36px;
    background: linear-gradient(to bottom, #D0D0D0 0%, #B8B8B8 100%);
    border: 2px solid #A0A0A0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.celda-nombre-donante {
    color: #333333;
    font-weight: 500;
}

.celda-nombre-donante a {
    color: #2563A8;
    font-weight: 700;
    text-decoration: none;
}

.celda-nombre-donante a:hover {
    text-decoration: underline;
}

.celda-pais-donante {
    width: 80px;
    text-align: center;
}

#contenidoPrincipal img.bandera-donante {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    object-fit: contain;
    border: none;
    border-radius: 0px;
    box-shadow: none;
}

.celda-metodo-donante {
    width: 100px;
    text-align: center;
}

.etiqueta-metodo-pago {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
}

.etiqueta-paypal {
    background: linear-gradient(to bottom, #0079C1 0%, #00609A 100%);
    border: 1px solid #004D7A;
}

.etiqueta-patreon {
    background: linear-gradient(to bottom, #9B59B6 0%, #7D3C98 100%);
    border: 1px solid #6C3483;
}

.etiqueta-kofi {
    background: linear-gradient(to bottom, #F0AD4E 0%, #D4912A 100%);
    border: 1px solid #B87A1E;
}

.celda-cantidad-donante {
    width: 130px;
    text-align: right;
    color: #2563A8;
    font-weight: 700;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 13px;
}

.celda-fecha-donante {
    width: 150px;
    text-align: right;
    color: #999999;
    font-size: 12px;
    font-style: italic;
}

.tabla-donaciones th.columna-posicion-pais {
    width: 75px;
    text-align: center;
}

.tabla-donaciones th.columna-bandera-pais {
    width: 75px;
    text-align: center;
}

.tabla-donaciones th.columna-porcentaje-pais {
    width: 110px;
    text-align: right;
}

.tabla-donaciones th.columna-promedio-pais {
    width: 140px;
    text-align: right;
}

.tabla-donaciones th.columna-mayor-pais {
    width: 170px;
    text-align: right;
}

.celda-posicion-pais {
    width: 75px;
    text-align: center;
    color: #555555;
    font-weight: 700;
}

.celda-bandera-pais {
    width: 75px;
    text-align: center;
}

.celda-nombre-pais {
    color: #333333;
    font-weight: 500;
}

.celda-porcentaje-pais {
    text-align: right;
    color: #333333;
    font-weight: 700;
}

.celda-promedio-pais {
    text-align: right;
    color: #2563A8;
    font-weight: 700;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 13px;
}

.celda-mayor-pais {
    text-align: right;
    color: #2563A8;
    font-weight: 700;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 13px;
}

.contenido-donaciones-recientes.contenedor-desplazable .tabla-donaciones thead {
    display: block;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.contenido-donaciones-recientes.contenedor-desplazable .tabla-donaciones thead tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.contenido-donaciones-recientes.contenedor-desplazable .tabla-donaciones tbody {
    display: block;
    max-height: 610px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #C0C0C0 #F0F0F0;
}

.contenido-donaciones-recientes.contenedor-desplazable .tabla-donaciones tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.tabla-donaciones th.columna-posicion-donador {
    width: 75px;
    text-align: center;
}

.tabla-donaciones th.columna-avatar-donador {
    width: 75px;
}

.tabla-donaciones th.columna-pais-donador {
    width: 100px;
    text-align: center;
}

.tabla-donaciones th.columna-cantidad-donador {
    width: 140px;
    text-align: center;
}

.tabla-donaciones th.columna-total-donador {
    width: 140px;
    text-align: right;
}

.celda-posicion-donador {
    width: 75px;
    text-align: center;
    color: #555555;
    font-weight: 700;
}

.celda-avatar-donador {
    width: 75px;
    text-align: center;
}

.celda-nombre-donador {
    color: #333333;
    font-weight: 500;
}

.celda-nombre-donador a {
    color: #2563A8;
    font-weight: 700;
    text-decoration: none;
}

.celda-nombre-donador a:hover {
    text-decoration: underline;
}

.celda-pais-donador {
    width: 100px;
    text-align: center;
}

.celda-cantidad-donador {
    width: 140px;
    text-align: center;
    color: #555555;
    font-weight: 600;
}

.celda-total-donador {
    width: 140px;
    text-align: right;
    color: #2563A8;
    font-weight: 700;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 13px;
}

.texto-total-year {
    margin-bottom: 15px;
    color: #333333;
    font-size: 14px;
    text-align: center;
}

.texto-total-year strong {
    color: #2563A8;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 16px;
}

.contenedor-grafico-donaciones {
    width: 100%;
    height: 350px;
    position: relative;
}

.contenedor-grafico-transparencia {
    display: flex;
    width: 90%;
    margin: 0px auto 30px;
    gap: 20px;
}

.contenedor-grafico-transparencia .columna-grafico {
    flex: 1;
    margin: 0px;
}

.contenedor-grafico-transparencia .columna-grafico .contenido-donaciones-recientes {
    padding: 20px;
}

.contenedor-grafico-transparencia .columna-transparencia {
    flex: 1;
    margin: 0px;
    display: flex;
    flex-direction: column;
}

.descripcion-uso-donaciones {
    color: #555555;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: center;
}

.lista-uso-donaciones {
    display: grid;
    margin-bottom: 15px;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 1;
    align-content: center;
}

.elemento-uso-donaciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 10px 10px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #F5F5F5 100%);
    border: 1px solid #E8E8E8;
    border-radius: 3px;
}

.detalle-uso-donaciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.detalle-uso-donaciones strong {
    color: #333333;
    font-size: 13px;
}

.detalle-uso-donaciones span {
    color: #777777;
    font-size: 12px;
    line-height: 1.4;
}

.contenedor-grafico-transparencia .columna-transparencia .contenido-donaciones-recientes {
    display: flex;
    padding: 20px;
    flex-direction: column;
    flex: 1;
}

.nota-uso-donaciones {
    color: #8B6914;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #FFFBEA 0%, #FFF4C8 100%);
    border: 1px solid #E0CA7F;
    border-radius: 3px;
    margin-top: auto;
}

/*------------------------- ////////// ESTILOS VERSIONES ANTERIORES ////////// -------------------------*/
.seccion-versiones-anteriores {
    width: 90%;
    margin: 0px auto 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-versiones-anteriores {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-versiones-anteriores {
    padding: 25px 30px;
    color: #333333;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}

.descripcion-versiones-anteriores {
    margin-bottom: 20px;
    color: #555555;
    font-size: 14px;
    line-height: 1.7;
}

.descripcion-versiones-anteriores a {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

.descripcion-versiones-anteriores a:hover {
    text-decoration: underline;
}

.aviso-versiones-anteriores {
    margin-bottom: 25px;
    padding: 14px 20px;
    background: linear-gradient(to bottom, #FFF0E0 0%, #FFE4C8 100%);
    border: 1px solid #E0A860;
    border-left: 4px solid #E8920A;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8);
    color: #8B5A14;
    font-size: 13px;
    line-height: 1.6;
}

.tabla-versiones-anteriores {
    width: 100%;
    margin: 20px 0px;
    border-collapse: collapse;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
}

.tabla-versiones-anteriores thead {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    color: #FFFFFF;
}

.tabla-versiones-anteriores th {
    padding: 12px 15px;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.tabla-versiones-anteriores th:last-child {
    border-right: none;
}

.tabla-versiones-anteriores th.columna-version {
    width: 80px;
}

.tabla-versiones-anteriores th.columna-nombre-clave {
    width: 120px;
}

.tabla-versiones-anteriores th.columna-fecha-lanzamiento {
    width: 180px;
}

.tabla-versiones-anteriores th.columna-tamano {
    width: 80px;
    text-align: center;
}

.tabla-versiones-anteriores th.columna-estado-version {
    width: 120px;
    text-align: center;
}

.tabla-versiones-anteriores th.columna-descarga-version {
    width: 200px;
    text-align: center;
}

.tabla-versiones-anteriores tbody tr {
    border-bottom: 1px solid #E0E0E0;
    transition: background 0.2s ease;
}

.tabla-versiones-anteriores tbody tr:hover {
    background: linear-gradient(to bottom, #F8F8F8 0%, #F0F0F0 100%);
}

.tabla-versiones-anteriores tbody tr:last-child {
    border-bottom: none;
}

.tabla-versiones-anteriores td {
    padding: 12px 15px;
    color: #555555;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
    border-right: 1px solid #F0F0F0;
}

.tabla-versiones-anteriores td:last-child {
    border-right: none;
}

.tabla-versiones-anteriores td strong {
    color: #2563A8;
}

.celda-descargas-version {
    text-align: center;
    color: #2563A8;
    font-weight: 700;
    font-family: "Consolas", "Courier New", monospace;
}

.celda-estado-version {
    text-align: center;
}

.etiqueta-estado-version {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
}

.etiqueta-version-obsoleta {
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border: 1px solid #D58512;
}

.etiqueta-version-no-disponible {
    background: linear-gradient(to bottom, #D9534F 0%, #C9302C 100%);
    border: 1px solid #AC2925;
}

.celda-descarga-version {
    text-align: center;
}

.boton-descarga-version {
    display: inline-block;
    padding: 6px 16px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.boton-descarga-version:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.boton-descarga-version:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.descarga-no-disponible {
    color: #999999;
    font-size: 12px;
    font-style: italic;
}

.grupo-descarga-version {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.selector-arquitectura {
    padding: 5px 8px;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 11px;
    font-family: "Consolas", "Courier New", monospace;
    font-weight: 600;
    color: #333333;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.selector-arquitectura:focus {
    border-color: #2563A8;
    box-shadow: 0px 0px 5px rgba(37, 99, 168, 0.3);
}

.nota-versiones-anteriores {
    margin-top: 25px;
    padding: 14px 20px;
    background: linear-gradient(to bottom, #E8F4FF 0%, #D0E8FF 100%);
    border: 1px solid #A8D0F0;
    border-left: 4px solid #2563A8;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8);
    color: #1A4D7A;
    font-size: 13px;
    line-height: 1.6;
}

.nota-versiones-anteriores a {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

.nota-versiones-anteriores a:hover {
    text-decoration: underline;
}

/*------------------------- ////////// ESTILOS TERMINOS ////////// -------------------------*/
.seccion-terminos {
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    margin-bottom: 10px;
}

.encabezado-terminos {
    background-color: #e8e8e8;
    border-bottom: 1px solid #d0d0d0;
    padding: 8px 12px;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
}

.contenido-terminos {
    padding: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #444444;
}

.contenido-terminos p {
    margin-bottom: 10px;
}

.contenido-terminos ul {
    margin: 8px 0 10px 20px;
    padding: 0;
}

.contenido-terminos ul li {
    margin-bottom: 5px;
}

.contenido-terminos a {
    color: #1a5c8a;
    text-decoration: none;
}

.contenido-terminos a:hover {
    text-decoration: underline;
}

.fecha-actualizacion-terminos {
    font-style: italic;
    color: #777777;
    font-size: 12px;
}

.caja-destacado-terminos {
    background-color: #fff8e1;
    border-left: 4px solid #f0c040;
    padding: 10px 12px;
    margin: 10px 0;
    font-size: 13px;
}

.caja-destacado-terminos p {
    margin: 0;
}

/*------------------------- ////////// ESTILOS POLITICAS ////////// -------------------------*/
.seccion-politicas {
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    margin-bottom: 10px;
}

.encabezado-politicas {
    background-color: #e8e8e8;
    border-bottom: 1px solid #d0d0d0;
    padding: 8px 12px;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
}

.contenido-politicas {
    padding: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #444444;
}

.contenido-politicas p {
    margin-bottom: 10px;
}

.contenido-politicas ul {
    margin: 8px 0 10px 20px;
    padding: 0;
}

.contenido-politicas ul li {
    margin-bottom: 5px;
}

.contenido-politicas a {
    color: #1a5c8a;
    text-decoration: none;
}

.contenido-politicas a:hover {
    text-decoration: underline;
}

.fecha-actualizacion-politicas {
    font-style: italic;
    color: #777777;
    font-size: 12px;
}

.subseccion-politicas {
    margin-bottom: 15px;
}

.subseccion-politicas h4 {
    font-size: 13px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 6px;
}

.caja-destacado-politicas {
    background-color: #e8f4f8;
    border-left: 4px solid #3a9abf;
    padding: 10px 12px;
    margin: 10px 0;
    font-size: 13px;
}

.caja-destacado-politicas p {
    margin: 0;
}

/*------------------------- ////////// ESTILOS CONTACTO ////////// -------------------------*/
.seccion-contacto {
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    margin-bottom: 10px;
}

.encabezado-contacto {
    background-color: #e8e8e8;
    border-bottom: 1px solid #d0d0d0;
    padding: 8px 12px;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
}

.contenido-contacto {
    padding: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #444444;
}

.contenido-contacto p {
    margin-bottom: 10px;
}

.contenido-contacto ul {
    margin: 8px 0 10px 20px;
    padding: 0;
}

.contenido-contacto ul li {
    margin-bottom: 5px;
}

.contenido-contacto a {
    color: #1a5c8a;
    text-decoration: none;
}

.contenido-contacto a:hover {
    text-decoration: underline;
}

/*------------------------- ////////// ESTILOS ALERTAS Y CONFIRMACIONES ////////// -------------------------*/
.alerta {
    width: 90%;
    max-width: 550px;
    margin: 0px auto 15px;
    padding: 14px 20px;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 4px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.alerta-exito {
    background: linear-gradient(to bottom, #EAFBEA 0%, #D4F5D4 100%);
    border: 1px solid #8BC68B;
    border-left: 4px solid #449D44;
    color: #2D6B2D;
}

.alerta-error {
    background: linear-gradient(to bottom, #FDECEC 0%, #FADADA 100%);
    border: 1px solid #E0A0A0;
    border-left: 4px solid #C9302C;
    color: #8B2020;
}

.alerta-informacion {
    background: linear-gradient(to bottom, #FFFBEA 0%, #FFF4C8 100%);
    border: 1px solid #E0CA7F;
    border-left: 4px solid #F0B429;
    color: #8B6914;
}

.resultado-confirmacion {
    text-align: center;
    padding: 10px 0px;
}

.imagen-resultado {
    margin-bottom: 15px;
}

.titulo-resultado {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.resultado-exito .titulo-resultado {
    color: #2D6B2D;
}

.resultado-error .titulo-resultado {
    color: #8B2020;
}

.resultado-confirmacion .descripcion-formulario {
    text-align: center;
}

.resultado-confirmacion .boton-formulario {
    display: inline-block;
    width: auto;
    padding: 12px 35px;
    text-decoration: none;
    text-align: center;
}

/*------------------------- ////////// ESTILOS REGISTRO EXITOSO ////////// -------------------------*/
.resultado-info {
  border-left: 4px solid #2196F3;
  background-color: #f0f7ff;
}

.instrucciones-correo {
  margin: 20px 0px;
  text-align: left;
  display: inline-block;
}

.instruccion-paso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0px;
  font-size: 14px;
  color: #444444;
}

.numero-paso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  background-color: #2196F3;
  color: #ffffff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: bold;
}

.nota-correo {
  margin: 16px 0px 20px 0px;
  font-size: 13px;
  color: #777777;
  line-height: 1.5;
}

/*------------------------- ////////// ESTILOS MENSAJERÍA PRIVADA ////////// -------------------------*/
.contenedor-mensajeria {
    display: flex;
    width: 100%;
    height: 600px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.panel-conversaciones {
    display: flex;
    width: 340px;
    min-width: 340px;
    background: #FFFFFF;
    border-right: 1px solid #D0D0D0;
    flex-direction: column;
}

.cabecera-panel-conversaciones {
    display: flex;
    padding: 12px 15px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    justify-content: space-between;
    align-items: center;
}

.info-usuario-actual {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar-usuario-actual {
    display: flex;
    width: 36px;
    height: 36px;
    background: linear-gradient(to bottom, #D0D0D0 0%, #B8B8B8 100%);
    border: 2px solid #A0A0A0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 16px;
}

.nombre-usuario-actual {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.boton-nuevo-mensaje {
    display: flex;
    width: 36px;
    height: 36px;
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    justify-content: center;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-nuevo-mensaje:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-nuevo-mensaje:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.buscador-conversaciones {
    padding: 10px 12px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border-bottom: 1px solid #D0D0D0;
}

.campo-buscar-conversacion {
    width: 100%;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    font-family: Manrope;
    color: #333333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo-buscar-conversacion:focus {
    border-color: #2563A8;
    box-shadow: 0px 0px 5px rgba(37, 99, 168, 0.3);
}

.campo-buscar-conversacion::placeholder {
    color: #AAAAAA;
}

.lista-conversaciones {
    flex: 1;
    overflow-y: auto;
}

.elemento-conversacion {
    display: flex;
    padding: 12px 15px;
    position: relative;
    border-bottom: 1px solid #E8E8E8;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.elemento-conversacion:hover {
    background: linear-gradient(to bottom, #F8F8F8 0%, #F0F0F0 100%);
}

.elemento-conversacion:last-child {
    border-bottom: none;
}

.conversacion-activa {
    background: linear-gradient(to bottom, #E8F4FF 0%, #D0E8FF 100%);
    border-left: 3px solid #2563A8;
}

.conversacion-activa:hover {
    background: linear-gradient(to bottom, #E0EFFF 0%, #C8E0FF 100%);
}

.conversacion-no-leida {
    background: linear-gradient(to bottom, #FFFEF5 0%, #FFF9E0 100%);
}

.conversacion-no-leida:hover {
    background: linear-gradient(to bottom, #FFFDE8 0%, #FFF4C8 100%);
}

.avatar-conversacion {
    display: flex;
    width: 42px;
    height: 42px;
    background: linear-gradient(to bottom, #D0D0D0 0%, #B8B8B8 100%);
    border: 2px solid #A0A0A0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 20px;
}

.info-conversacion {
    flex: 1;
    min-width: 0px;
}

.cabecera-conversacion {
    display: flex;
    margin-bottom: 3px;
    justify-content: space-between;
    align-items: center;
}

.nombre-conversacion {
    color: #2563A8;
    font-size: 13px;
    font-weight: 700;
}

.fecha-conversacion {
    color: #999999;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.extracto-conversacion {
    color: #999999;
    font-size: 11px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.indicador-no-leido {
    width: 10px;
    height: 10px;
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 50%;
    flex-shrink: 0;
}

.panel-mensajes {
    flex: 1;
    min-width: 0px;
    display: flex;
    flex-direction: column;
}

.cabecera-panel-mensajes {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border-bottom: 2px solid #D0D0D0;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-destinatario {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icono-avatar {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    object-fit: cover;
}

.avatar-destinatario {
    display: flex;
    width: 40px;
    height: 40px;
    background: linear-gradient(to bottom, #D0D0D0 0%, #B8B8B8 100%);
    border: 2px solid #A0A0A0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 18px;
}

.detalles-destinatario {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nombre-destinatario a {
    color: #2563A8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.nombre-destinatario a:hover {
    text-decoration: underline;
}

.estado-destinatario {
    font-size: 11px;
    font-weight: 600;
}

.estado-destinatario-activo {
    color: #449D44;
}

.estado-destinatario-inactivo {
    color: #999999;
}

.acciones-cabecera-mensajes {
    display: flex;
    gap: 6px;
}

.boton-accion-mensaje {
    display: flex;
    width: 34px;
    height: 34px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 4px rgba(0, 0, 0, 0.15);
    justify-content: center;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-accion-mensaje:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 3px 6px rgba(0, 0, 0, 0.2);
}

.boton-accion-mensaje:active {
    background: linear-gradient(to bottom, #E0E0E0 0%, #F5F5F5 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.area-mensajes {
    flex: 1;
    padding: 15px 20px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #F2F2F2 100%);
    overflow-y: auto;
}

.separador-fecha-mensaje {
    margin: 15px 0px;
    text-align: center;
}

.separador-fecha-mensaje span {
    display: inline-block;
    padding: 4px 14px;
    background: linear-gradient(to bottom, #E8E8E8 0%, #DCDCDC 100%);
    border: 1px solid #C0C0C0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.6), 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #666666;
    font-size: 11px;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.mensaje-privado {
    margin-bottom: 10px;
    display: flex;
}

.mensaje-enviado {
    justify-content: flex-end;
}

.mensaje-recibido {
    justify-content: flex-start;
}

.burbuja-mensaje {
    max-width: 65%;
    padding: 10px 14px;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    position: relative;
}

.burbuja-enviada {
    background: linear-gradient(to bottom, #E8F4FF 0%, #D0E8FF 100%);
    border: 1px solid #A8D0F0;
    border-radius: 4px 4px 0px 4px;
}

.burbuja-recibida {
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px 4px 4px 0px;
}

.texto-mensaje-privado {
    color: #333333;
    font-size: 13px;
    line-height: 1.6;
}

.hora-mensaje-privado {
    display: flex;
    margin-top: 5px;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    color: #999999;
    font-size: 10px;
}

.estado-lectura-mensaje {
    color: #2563A8;
    font-size: 12px;
    font-weight: 700;
}

.area-entrada-mensaje-privado {
    padding: 10px 15px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border-top: 2px solid #D0D0D0;
}

.caja-redaccion-mensaje-privado {
    display: flex;
    gap: 10px;
}

.campo-texto-mensaje-privado {
    flex: 1;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    font-family: Manrope;
    color: #333333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo-texto-mensaje-privado:focus {
    border-color: #2563A8;
    box-shadow: 0px 0px 5px rgba(37, 99, 168, 0.3);
}

.campo-texto-mensaje-privado::placeholder {
    color: #AAAAAA;
}

.boton-enviar-mensaje-privado {
    padding: 10px 20px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    font-family: Manrope;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-enviar-mensaje-privado:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-enviar-mensaje-privado:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.panel-sin-mensajes {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.mensaje-vacio-chat {
    color: #999999;
    font-size: 15px;
}

.modal-nuevo-mensaje {
    max-width: 480px;
}

.encabezado-modal-nuevo-mensaje {
    display: flex;
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    justify-content: space-between;
    align-items: center;
}

.grupo-campo-relativo {
    position: relative;
}

.resultados-busqueda-usuario {
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    max-height: 150px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 0px 0px 3px 3px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    z-index: 10;
    display: none;
}

.boton-formulario-compacto {
    width: auto;
    padding: 10px 25px;
}

/*------------------------- ////////// ESTILOS NOTICIAS (PÚBLICO) ////////// -------------------------*/
.seccion-noticias {
    width: 90%;
    margin: 0px auto 30px;
}

.titulo-noticias {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 1px solid #1A4D7A;
    border-radius: 4px 4px 0px 0px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-noticias {
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-top: none;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.elemento-noticia {
    display: flex;
    background: linear-gradient(to bottom, #F8F8F8 0%, #EEEEEE 100%);
    border: 1px solid #C0C0C0;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 0px rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.elemento-noticia:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), inset 0px 1px 0px rgba(255, 255, 255, 0.6);
    border-color: #3A7BC8;
}

.imagen-elemento-noticia {
    width: 220px;
    min-width: 220px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

#contenidoPrincipal .imagen-elemento-noticia img {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    object-fit: cover;
    object-position: center;
}

.informacion-elemento-noticia {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.etiqueta-tipo-noticia {
    display: inline-block;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.etiqueta-tipo-aleatorio {
    background: linear-gradient(to bottom, #E0F2FE 0%, #BAE6FD 100%);
    border: 1px solid #7DD3FC;
    color: #0369A1;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);
}

.etiqueta-tipo-lanzamiento {
    background: linear-gradient(to bottom, #DCFCE7 0%, #BBF7D0 100%);
    border: 1px solid #86EFAC;
    color: #15803D;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);
}

.titulo-elemento-noticia {
    margin: 0px;
    color: #2563A8;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.resumen-elemento-noticia {
    margin: 0px;
    color: #555555;
    font-size: 13px;
    line-height: 1.5;
}

.fecha-elemento-noticia {
    margin-top: auto;
    color: #888888;
    font-size: 12px;
}

/*------------------------- ESTILOS DETALLE NOTICIA (PÚBLICO) -------------------------*/
.seccion-detalle-noticia {
    width: 90%;
    max-width: 1366px;
    margin: 0px auto 30px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.cabecera-detalle-noticia {
    padding: 20px 25px;
    background: linear-gradient(to bottom, #F8F8F8 0%, #EEEEEE 100%);
    border-bottom: 2px solid #3A7BC8;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.6);
}

.titulo-detalle-noticia {
    margin: 8px 0px;
    color: #2563A8;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.meta-detalle-noticia {
    display: flex;
    gap: 20px;
    color: #888888;
    font-size: 13px;
}

.fecha-meta-detalle-noticia,
.autor-meta-detalle-noticia {
    color: #888888;
    font-size: 13px;
}

.imagen-detalle-noticia {
    padding: 20px 25px 0px;
}

.imagen-detalle-noticia img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 768px;
    margin: 0px auto;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.cuerpo-detalle-noticia {
    padding: 20px 25px;
    color: #333333;
    font-size: 14px;
    line-height: 1.7;
}

.cuerpo-detalle-noticia p {
    margin: 0px 0px 15px;
}

.cuerpo-detalle-noticia p:last-child {
    margin-bottom: 0px;
}

.cuerpo-detalle-noticia ul,
.cuerpo-detalle-noticia ol {
    margin-bottom: 10px;
    padding-left: 20px;
}

.cuerpo-detalle-noticia li {
    margin-bottom: 4px;
    line-height: 1.6;
    text-align: left;
}

.cuerpo-detalle-noticia img {
    display: block;
    width: auto !important;
    max-width: min(100%, 1366px);
    max-height: 768px;
    margin: 0px auto;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.pie-detalle-noticia {
    padding: 15px 25px;
    background: linear-gradient(to bottom, #F0F0F0 0%, #E0E0E0 100%);
    border-top: 1px solid #D0D0D0;
}

.enlace-volver-noticias {
    color: #2563A8;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.enlace-volver-noticias:hover {
    color: #1A4D7A;
    text-decoration: underline;
}

/*------------------------- ////////// ESTILOS TIENDA (PRODUCTOS) ////////// -------------------------*/
.seccion-tienda {
    width: 90%;
    margin: 0px auto 30px;
}

.titulo-tienda {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 1px solid #1A4D7A;
    border-radius: 4px 4px 0px 0px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.cuadricula-tienda {
    display: grid;
    padding: 25px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-top: none;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tarjeta-producto {
    display: flex;
    min-height: 520px;
    position: relative;
    background: linear-gradient(to bottom, #FFFFFF 0%, #F5F5F5 100%);
    border: 1px solid #C0C0C0;
    border-top: 3px solid #2563A8;
    border-radius: 4px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    flex-direction: column;
    transition: all 0.3s ease;
}

.tarjeta-producto:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFAFA 100%);
    border-top-color: #5CB85C;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.22);
    transform: translateY(-5px);
}

.imagen-tarjeta-producto {
    display: flex;
    width: 100%;
    height: 220px;
    position: relative;
    background: linear-gradient(135deg, #F8FBFF 0%, #EEF4FB 100%);
    border-bottom: 2px solid #3A7BC8;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.imagen-tarjeta-producto::after {
    width: 60%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -100%;
    content: "";
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    opacity: 0;
    pointer-events: none;
}

.tarjeta-producto:hover .imagen-tarjeta-producto::after {
    animation: destelloTarjeta 0.6s ease forwards;
}

.imagen-tarjeta-producto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
}

.tarjeta-producto:hover .imagen-tarjeta-producto img {
    transform: scale(1.05);
}

.cuerpo-tarjeta-producto {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nombre-tarjeta-producto {
    margin: 0px 0px 8px;
    color: #1A4D7A;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.descripcion-tarjeta-producto {
    margin: 0px 0px 12px;
    color: #555555;
    font-size: 13px;
    line-height: 1.5;
    flex: 1;
}

.precio-tarjeta-producto {
    margin-bottom: 8px;
    color: #2E7D32;
    font-size: 22px;
    font-weight: 700;
}

.stock-tarjeta-producto {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

.stock-disponible {
    color: #2E7D32;
}

.stock-agotado {
    color: #C62828;
}

.pie-tarjeta-producto {
    padding: 12px 15px;
    background: linear-gradient(to bottom, #F0F0F0 0%, #E0E0E0 100%);
    border-top: 1px solid #D0D0D0;
}

.boton-comprar-producto {
    display: block;
    width: 100%;
    padding: 10px 0px;
    position: relative;
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
}

.boton-comprar-producto::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -100%;
    content: "";
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    pointer-events: none;
}

.boton-comprar-producto:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    color: #FFFFFF;
}

.boton-comprar-producto:hover::after {
    animation: destelloBarra 0.8s ease forwards;
}

.boton-comprar-producto:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.boton-comprar-deshabilitado {
    background: linear-gradient(to bottom, #999999 0%, #777777 100%);
    border: 1px solid #666666;
    cursor: not-allowed;
}

.boton-comprar-deshabilitado:hover {
    background: linear-gradient(to bottom, #999999 0%, #777777 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.boton-comprar-deshabilitado:hover::after {
    animation: none;
}

/*------------------------- ////////// PAGINACION ////////// -------------------------*/
.contenedor-paginacion {
    display: none;
    padding: 15px 20px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border-top: 1px solid #D0D0D0;
    text-align: center;
}

.contenedor-paginacion.paginacion-visible {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.boton-paginacion {
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    padding: 0px 10px;
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    font-family: Manrope;
    text-decoration: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.boton-paginacion:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%);
    border-color: #999999;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), 0px 2px 4px rgba(0, 0, 0, 0.15);
}

.boton-paginacion:active {
    background: linear-gradient(to bottom, #E0E0E0 0%, #F0F0F0 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
}

.boton-paginacion-activo {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 1px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    cursor: default;
}

.boton-paginacion-activo:hover {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-color: #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.boton-paginacion-activo:active {
    transform: none;
}

.boton-paginacion-deshabilitado {
    background: linear-gradient(to bottom, #F0F0F0 0%, #E5E5E5 100%);
    border-color: #C0C0C0;
    color: #AAAAAA;
    cursor: not-allowed;
    box-shadow: none;
}

.boton-paginacion-deshabilitado:hover {
    background: linear-gradient(to bottom, #F0F0F0 0%, #E5E5E5 100%);
    border-color: #C0C0C0;
    box-shadow: none;
}

.boton-paginacion-deshabilitado:active {
    transform: none;
}

.informacion-paginacion {
    margin: 0px 8px;
    color: #555555;
    font-size: 12px;
}

.informacion-paginacion strong {
    color: #2563A8;
    font-weight: 700;
}

/*------------------------- ////////// ESTILOS PIE ////////// -------------------------*/
#pie {
    width: 100%;
    padding: 20px;
    margin-top: auto;
    background: linear-gradient(to bottom, #2A2A2A 0%, #1A1A1A 100%);
    border: 1px solid #0A0A0A;
    border-radius: 0px 0px 4px 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -2px 8px rgba(0, 0, 0, 0.4);
    color: #CCCCCC;
    font-size: 12px;
    text-align: center;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

#pie a {
    color: #6DB3FF;
    text-decoration: none;
}

#pie a:hover {
    text-decoration: underline;
}

.icono-red-social {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.icono-red-social:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.icono-red-social img {
    width: 24px;
    height: 24px;
    filter: invert(1) brightness(2) contrast(1.2) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

.icono-red-social.youtube {
    background: linear-gradient(to bottom, #FF3333 0%, #CC0000 100%);
}

.icono-red-social.youtube:hover {
    background: linear-gradient(to bottom, #FF4444 0%, #DD0000 100%);
}

.icono-red-social.patreon {
    background: linear-gradient(to bottom, #9B59B6 0%, #7D3C98 100%);
}

.icono-red-social.patreon:hover {
    background: linear-gradient(to bottom, #AB6EC6 0%, #8E4DA8 100%);
}

.icono-red-social.kofi {
    background: linear-gradient(to bottom, #F0AD4E 0%, #D4912A 100%);
}

.icono-red-social.kofi:hover {
    background: linear-gradient(to bottom, #F2BD5E 0%, #E0A030 100%);
}

.icono-red-social.paypal {
    background: linear-gradient(to bottom, #009CDE 0%, #0070A1 100%);
}

.icono-red-social.paypal:hover {
    background: linear-gradient(to bottom, #10ACEE 0%, #1080B1 100%);
}

.icono-red-social.gitlab {
    background: linear-gradient(to bottom, #FC7C5F 0%, #E24329 100%);
}

.icono-red-social.gitlab:hover {
    background: linear-gradient(to bottom, #FD8D70 0%, #F2533A 100%);
}

.icono-red-social.repository {
    background: linear-gradient(to bottom, #2DA44E 0%, #218838 100%);
}

.icono-red-social.repository:hover {
    background: linear-gradient(to bottom, #3DB45E 0%, #319848 100%);
}

.icono-red-social.mattermost {
    background: linear-gradient(to bottom, #2A7DE1 0%, #1E5DB3 100%);
}

.icono-red-social.mattermost:hover {
    background: linear-gradient(to bottom, #3A8DF1 0%, #2E6DC3 100%);
}

.icono-red-social.linkedin {
    background: linear-gradient(to bottom, #0A78B5 0%, #085E91 100%);
}

.icono-red-social.linkedin:hover {
    background: linear-gradient(to bottom, #1A88C5 0%, #186EA1 100%);
}

/*------------------------- ////////// ESTILOS MODALES ////////// -------------------------*/
.fondo-oscuro-modal {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
}

.fondo-oscuro-modal.visible {
    display: flex;
}

.modal-confirmacion {
    width: 90%;
    max-width: 420px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: aparecerModal 0.3s ease;
}

.encabezado-modal-confirmacion {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #D9534F 0%, #C9302C 100%);
    border-bottom: 2px solid #AC2925;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-modal-confirmacion {
    padding: 25px 30px;
}

.mensaje-modal-confirmacion {
    margin-bottom: 20px;
    color: #555555;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.acciones-modal-confirmacion {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.boton-modal-cancelar {
    display: inline-block;
    padding: 10px 25px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 2px 4px rgba(0, 0, 0, 0.15);
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    font-family: Manrope;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-modal-cancelar:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-modal-cancelar:active {
    background: linear-gradient(to bottom, #E0E0E0 0%, #F5F5F5 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.boton-modal-confirmar {
    display: inline-block;
    padding: 10px 25px;
    background: linear-gradient(to bottom, #D9534F 0%, #C9302C 100%);
    border: 1px solid #AC2925;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: Manrope;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-modal-confirmar:hover {
    background: linear-gradient(to bottom, #E9635F 0%, #D9403C 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-modal-confirmar:active {
    background: linear-gradient(to bottom, #C9302C 0%, #D9534F 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.encabezado-modal-alerta-donacion {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border-bottom: 2px solid #D58512;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.boton-modal-aceptar-donacion {
    display: inline-block;
    padding: 10px 25px;
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border: 1px solid #D58512;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: Manrope;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-modal-aceptar-donacion:hover {
    background: linear-gradient(to bottom, #FFBD5E 0%, #FC972F 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-modal-aceptar-donacion:active {
    background: linear-gradient(to bottom, #EC971F 0%, #F0AD4E 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.encabezado-modal-suspender {
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border-bottom: 2px solid #D58512;
}

.boton-modal-confirmar-suspender {
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border: 1px solid #D58512;
}

.boton-modal-confirmar-suspender:hover {
    background: linear-gradient(to bottom, #F2BD5E 0%, #F0A730 100%);
}

.boton-modal-confirmar-suspender:active {
    background: linear-gradient(to bottom, #EC971F 0%, #F0AD4E 100%);
}

.modal-iniciar-sesion {
    width: 90%;
    max-width: 420px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.encabezado-modal-iniciar-sesion {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.boton-cerrar-modal-iniciar-sesion {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    line-height: 1;
    padding: 0px;
}

.boton-cerrar-modal-iniciar-sesion:hover {
    opacity: 1;
}

.contenido-modal-iniciar-sesion {
    padding: 25px 30px;
}

.mensaje-modal-iniciar-sesion {
    margin-bottom: 20px;
    color: #555555;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.grupo-campo-modal-iniciar-sesion {
    margin-bottom: 18px;
}

.grupo-campo-modal-iniciar-sesion label {
    display: block;
    margin-bottom: 6px;
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.grupo-campo-modal-iniciar-sesion input {
    width: 100%;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    font-family: Manrope;
    color: #333333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grupo-campo-modal-iniciar-sesion input:focus {
    border-color: #2563A8;
    box-shadow: 0px 0px 5px rgba(37, 99, 168, 0.3);
}

.grupo-campo-modal-iniciar-sesion input::placeholder {
    color: #AAAAAA;
}

.boton-modal-iniciar-sesion {
    display: block;
    width: 100%;
    padding: 12px 25px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    font-family: Manrope;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-modal-iniciar-sesion:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-modal-iniciar-sesion:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.error-modal-iniciar-sesion {
    display: none;
    margin-bottom: 15px;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #FFF0F0 0%, #FFE0E0 100%);
    border: 1px solid #E0A0A0;
    border-left: 3px solid #D9534F;
    border-radius: 3px;
    color: #A94442;
    font-size: 12px;
    line-height: 1.4;
}

.error-modal-iniciar-sesion.visible {
    display: block;
}

.enlace-modal-iniciar-sesion {
    margin-top: 18px;
    color: #666666;
    font-size: 13px;
    text-align: center;
}

.enlace-modal-iniciar-sesion a {
    color: #2563A8;
    font-weight: 600;
    text-decoration: none;
}

.enlace-modal-iniciar-sesion a:hover {
    text-decoration: underline;
}

/*------------------------- ////////// ESTILOS PANEL ADMINISTRADOR ////////// -------------------------*/
body.panel-administrador {
    background: #DCDCDC;
    background: linear-gradient(to bottom, #E4E4E4 0%, #D0D0D0 100%);
    background-attachment: fixed;
}

#contenedorPanelAdministrador {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

#barraLateral {
    width: 260px;
    min-height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background: linear-gradient(to bottom, #1A2A44 0%, #0F1C30 100%);
    border-right: 1px solid #0A1420;
    box-shadow: 2px 0px 8px rgba(0, 0, 0, 0.4), inset -1px 0px 0px rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
}

#cabeceraBarraLateral {
    padding: 25px 20px 20px;
    background: linear-gradient(to bottom, #2563A8 0%, #1A4D7A 100%);
    border-bottom: 2px solid #0D3A66;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2);
    text-align: center;
}

#cabeceraBarraLateral h2 {
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

#cabeceraBarraLateral p {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#perfilAdministrador {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-administrador {
    width: 40px;
    height: 40px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 2px solid #4A8BD8;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 18px;
}

.informacion-administrador {
    display: flex;
    flex-direction: column;
}

.nombre-administrador {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
}

.rol-administrador {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

#navegacionPanelLateral {
    flex: 1;
    padding: 10px 0px;
    overflow-y: auto;
}

#navegacionPanelLateral ul {
    list-style: none;
}

#navegacionPanelLateral .titulo-seccion-nav {
    padding: 15px 20px 6px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

#navegacionPanelLateral li a {
    display: block;
    padding: 10px 20px 10px 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

#navegacionPanelLateral li a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    padding-left: 28px;
}

#navegacionPanelLateral li.enlace-activo a {
    background: linear-gradient(to right, #2563A8 0%, rgba(37, 99, 168, 0.3) 100%);
    border-left: 3px solid #6DB3FF;
    color: #FFFFFF;
    font-weight: 600;
    padding-left: 21px;
}

#pieBarraLateral {
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#pieBarraLateral a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

#pieBarraLateral a:hover {
    color: #FFFFFF;
}

#areaPrincipal {
    flex: 1;
    margin-left: 260px;
    min-height: 100vh;
    background: #ECECEC;
    display: flex;
    flex-direction: column;
}

#cabeceraPanelAdministrador {
    width: 100%;
    height: 50px;
    padding: 0px 25px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #E8E8E8 100%);
    border-bottom: 2px solid #B0B0B0;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), 0px 2px 5px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#botonMenuMovil {
    display: none;
    padding: 6px 10px;
    background: linear-gradient(to bottom, #F5F5F5 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8);
    color: #333333;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#botonMenuMovil:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
}

#migaPanPanelAdministrador {
    color: #666666;
    font-size: 12px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

#migaPanPanelAdministrador a {
    color: #1A4D7A;
    font-weight: 600;
    text-decoration: none;
}

#migaPanPanelAdministrador a:hover {
    color: #0D3A66;
    text-decoration: underline;
}

#accionesPanelAdministrador {
    display: flex;
    align-items: center;
    gap: 18px;
}

.indicador-notificaciones {
    color: #555555;
    font-size: 14px;
    cursor: pointer;
}

.indicador-notificaciones strong {
    padding: 2px 7px;
    background: linear-gradient(to bottom, #E74C3C 0%, #C0392B 100%);
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 11px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}

.enlace-cerrar-sesion {
    padding: 6px 14px;
    color: #555555;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    background: linear-gradient(to bottom, #F5F5F5 0%, #E0E0E0 100%);
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.enlace-cerrar-sesion:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F0F0F0 100%);
    color: #333333;
}

.selector-idioma-panel-administrador .boton-idioma-seleccionado {
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.selector-idioma-panel-administrador .lista-opciones-idioma {
    right: 0px;
}

#contenidoPanelAdministrador {
    flex: 1;
    padding: 25px;
}

.titulo-pagina-panel-administrador {
    margin-bottom: 25px;
    color: #2563A8;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.contenedor-tarjetas-resumen {
    margin-bottom: 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.tarjeta-resumen {
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #C0C0C0;
    border-top: 3px solid #2563A8;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.2s ease;
}

.tarjeta-resumen:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.icono-tarjeta-resumen {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 22px;
}

.icono-resumen-descargas {
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
}

.icono-resumen-usuarios {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 1px solid #1A4D7A;
}

.icono-resumen-publicaciones {
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border: 1px solid #D58512;
}

.icono-resumen-visitas {
    background: linear-gradient(to bottom, #5BC0DE 0%, #31B0D5 100%);
    border: 1px solid #269ABC;
}

.datos-tarjeta-resumen {
    display: flex;
    flex-direction: column;
}

.valor-tarjeta-resumen {
    color: #333333;
    font-size: 24px;
    font-weight: 700;
}

.etiqueta-tarjeta-resumen {
    color: #999999;
    font-size: 12px;
}

.contenedor-dos-columnas {
    margin-bottom: 25px;
    display: flex;
    gap: 20px;
}

.columna-principal-panel-administrador {
    flex: 2;
    min-width: 0px;
}

.columna-lateral-panel-administrador {
    flex: 1;
    min-width: 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.seccion-panel-administrador {
    background: #FFFFFF;
    border: 1px solid #B8B8B8;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.encabezado-seccion-panel-administrador {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border-bottom: 2px solid #1A4D7A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.contenido-seccion-panel-administrador {
    padding: 18px 20px;
}

.contenido-seccion-panel-administrador.sin-relleno {
    padding: 0px;
}

.elemento-actividad {
    padding: 12px 0px;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.elemento-actividad:first-child {
    padding-top: 0px;
}

.elemento-actividad:last-child {
    padding-bottom: 0px;
    border-bottom: none;
}

.icono-actividad {
    width: 36px;
    height: 36px;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.icono-actividad-usuario {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 1px solid #1A4D7A;
}

.icono-actividad-publicacion {
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
}

.icono-actividad-descarga {
    background: linear-gradient(to bottom, #5BC0DE 0%, #31B0D5 100%);
    border: 1px solid #269ABC;
}

.icono-actividad-reporte {
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border: 1px solid #D58512;
}

.detalle-actividad {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.texto-actividad {
    color: #333333;
    font-size: 13px;
    line-height: 1.5;
}

.texto-actividad strong {
    color: #2563A8;
}

.texto-actividad a {
    color: inherit;
    text-decoration: none;
}

.texto-actividad a:hover {
    text-decoration: underline;
}

.fecha-actividad {
    color: #999999;
    font-size: 11px;
}

.elemento-informacion {
    padding: 10px 0px;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.elemento-informacion:first-child {
    padding-top: 0px;
}

.elemento-informacion:last-child {
    padding-bottom: 0px;
    border-bottom: none;
}

.etiqueta-informacion {
    color: #555555;
    font-size: 12px;
    font-weight: 500;
}

.valor-informacion {
    color: #333333;
    font-size: 12px;
    font-weight: 700;
}

.estado-activo {
    color: #449D44;
}

.boton-accion-rapida {
    display: block;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-accion-rapida:last-child {
    margin-bottom: 0px;
}

.boton-accion-rapida:active {
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.boton-accion-primario {
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
}

.boton-accion-primario:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
}

.boton-accion-secundario {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 1px solid #1A4D7A;
}

.boton-accion-secundario:hover {
    background: linear-gradient(to bottom, #4A8BD8 0%, #3573B8 100%);
}

.boton-accion-alerta {
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border: 1px solid #D58512;
}

.boton-accion-alerta:hover {
    background: linear-gradient(to bottom, #F2BD5E 0%, #F0A730 100%);
}

.encabezado-con-accion {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.boton-agregar-encabezado {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-agregar-encabezado:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.boton-agregar-encabezado:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.seccion-tabla-completa {
    width: 100%;
}

.tabla-panel-administrador {
    width: 100%;
    border-collapse: collapse;
}

.tabla-panel-administrador thead {
    background: linear-gradient(to bottom, #F5F5F5 0%, #E8E8E8 100%);
    border-bottom: 2px solid #C0C0C0;
}

.tabla-panel-administrador th {
    padding: 10px 15px;
    color: #555555;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    border-right: 1px solid #E0E0E0;
}

.tabla-panel-administrador th:last-child {
    border-right: none;
}

.tabla-panel-administrador tbody tr {
    border-bottom: 1px solid #E8E8E8;
    transition: background 0.2s ease;
}

.tabla-panel-administrador tbody tr:hover {
    background: linear-gradient(to bottom, #F8F8F8 0%, #F0F0F0 100%);
}

.tabla-panel-administrador tbody tr:last-child {
    border-bottom: none;
}

.tabla-panel-administrador td {
    padding: 12px 15px;
    color: #555555;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
    border-right: 1px solid #F0F0F0;
}

.tabla-panel-administrador td:last-child {
    border-right: none;
}

.tabla-panel-administrador td strong {
    color: #2563A8;
}

.miniatura-tabla-panel-administrador {
    max-width: 40px;
    max-height: 30px;
}

.enlace-tabla-panel-administrador {
    color: #2563A8;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.enlace-tabla-panel-administrador:hover {
    text-decoration: underline;
}

.centrado-panel-administrador {
    text-align: center;
}

.etiqueta-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

.etiqueta-activo {
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    color: #FFFFFF;
}

.etiqueta-pendiente {
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border: 1px solid #D58512;
    color: #FFFFFF;
}

.etiqueta-suspendido {
    background: linear-gradient(to bottom, #D9534F 0%, #C9302C 100%);
    border: 1px solid #AC2925;
    color: #FFFFFF;
}

.celda-acciones-panel-administrador {
    display: flex;
    gap: 6px;
    align-items: center;
}

.boton-tabla-panel-administrador {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-tabla-panel-administrador:active {
    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.boton-tabla-editar {
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 1px solid #1A4D7A;
}

.boton-tabla-editar:hover {
    background: linear-gradient(to bottom, #4A8BD8 0%, #3573B8 100%);
}

.boton-tabla-suspender {
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border: 1px solid #D58512;
}

.boton-tabla-suspender:hover {
    background: linear-gradient(to bottom, #F2BD5E 0%, #F0A730 100%);
}

.boton-tabla-eliminar {
    background: linear-gradient(to bottom, #D9534F 0%, #C9302C 100%);
    border: 1px solid #AC2925;
}

.boton-tabla-eliminar:hover {
    background: linear-gradient(to bottom, #E9635F 0%, #D9403C 100%);
}

#piePanelAdministrador {
    padding: 18px 25px;
    margin-top: auto;
    background: linear-gradient(to bottom, #2A2A2A 0%, #1A1A1A 100%);
    border-top: 1px solid #0A0A0A;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1);
    color: #CCCCCC;
    font-size: 12px;
    text-align: center;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}

.fondo-oscuro-movil {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    display: none;
}

.fondo-oscuro-movil.visible {
    display: block;
}

.alerta {
    padding: 14px 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.6), 0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
}

.alerta-exito {
    background: linear-gradient(to bottom, #DFF0D8 0%, #C8E5BC 100%);
    border: 1px solid #B2D8A3;
    border-left: 3px solid #5CB85C;
    color: #3C763D;
}

.alerta-error {
    background: linear-gradient(to bottom, #F2DEDE 0%, #E7C3C3 100%);
    border: 1px solid #DCA7A7;
    border-left: 3px solid #D9534F;
    color: #A94442;
}

.formulario-en-panel-administrador {
    width: 100%;
    max-width: 650px;
    margin: 0px auto 20px;
}

.formulario-panel-administrador {
    width: 90%;
    max-width: 650px;
}

.formulario-panel-administrador .acciones-editor {
    margin-top: 20px;
}

.formulario-panel-administrador .boton-enviar-editor {
    padding: 12px 30px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    font-family: Manrope;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #5CB85C 0%, #449D44 100%);
    border: 1px solid #398439;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.formulario-panel-administrador .boton-enviar-editor:hover {
    background: linear-gradient(to bottom, #6EC56E 0%, #50A950 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.formulario-panel-administrador .boton-enviar-editor:active {
    background: linear-gradient(to bottom, #449D44 0%, #5CB85C 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.bloque-editor-formulario {
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    overflow: hidden;
}

.bloque-editor-formulario .barra-herramientas-editor {
    border-bottom: 1px solid #B0B0B0;
}

.bloque-editor-formulario .area-editor {
    min-height: 250px;
    background: #FFFFFF;
    font-size: 14px;
    font-family: Manrope;
    color: #333333;
    line-height: 1.8;
}

.bloque-editor-formulario .area-editor .ql-editor {
    min-height: 250px;
}

.bloque-editor-formulario .area-editor .ql-editor.ql-blank::before {
    color: #AAAAAA;
    font-style: italic;
    font-size: 13px;
}

.seccion-vista-previa-formulario {
    width: 90%;
    max-width: 650px;
    margin: 0px auto 20px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.seccion-vista-previa-formulario .encabezado-vista-previa {
    padding: 12px 20px;
    background: linear-gradient(to bottom, #F0AD4E 0%, #EC971F 100%);
    border-bottom: 2px solid #D58512;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.seccion-vista-previa-formulario .contenido-vista-previa {
    padding: 20px 25px;
    font-size: 14px;
    line-height: 1.8;
    color: #333333;
}

.seccion-vista-previa-formulario .contenido-vista-previa p {
    margin-bottom: 10px;
}

.seccion-vista-previa-formulario .contenido-vista-previa p:last-child {
    margin-bottom: 0px;
}

.seccion-vista-previa-formulario .contenido-vista-previa img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 10px auto;
}

.boton-volver-arriba {
    width: 48px;
    height: 48px;
    position: fixed;
    bottom: 36px;
    right: 50px;
    background: linear-gradient(to bottom, #3A7BC8 0%, #2563A8 100%);
    border: 2px solid #1A4D7A;
    border-radius: 50%;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25), inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 20px;
    line-height: 1;
    padding-bottom: 3px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    z-index: 900;
    transition: opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease;
}

.boton-volver-arriba.visible {
    opacity: 1;
    visibility: visible;
}

.boton-volver-arriba:hover {
    background: linear-gradient(to bottom, #4A8BD8 0%, #3573B8 100%);
}

.boton-volver-arriba:active {
    background: linear-gradient(to bottom, #2563A8 0%, #1A4D7A 100%);
}