/* === INICIO: Estilos Base y Correcciones Generales === */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Para intentar prevenir la barra de scroll horizontal */
}

body {
    background-color: black;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px; /* Tamaño base para cálculos con 'em' */
    color: aliceblue;
}

/* Aplicar box-sizing a elementos clave */
.barra0, .barra1, .div_del_titulo, .div_del_fondo, .cuerpo, main, .barra-lateral, .cuadro, .foro-promo, .admin-login-button {
    box-sizing: border-box;
}
/* === FIN: Estilos Base y Correcciones Generales === */

/* Estilos del Header */
.titulo {
  font-family: 'Playfair Display', serif; 
  font-weight: 900;                     
  text-transform: uppercase;            
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 4em; /* Grande */
  border-bottom: none;
  text-decoration: none;
}

.div_del_titulo {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/montanas-con-nieve.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.div_del_titulo a.no_linea, .div_del_titulo a.no_linea:hover {
    text-decoration: none;
    border: none;
}

.barra0 {
    background: rgb(18, 18, 18);
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: flex-end;
    padding-right: 10px;
}

.barra1 {
    background: rgb(3, 3, 33);
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
}

.texto_movimiento {
    color: white;
    font-size: 1.1em; /* Ajustado para que sea relativo al body (12px * 1.1) */
}

/* === INICIO: ESTILOS REDES SOCIALES (RESTAURADOS Y ALINEADOS) === */
/* Contenedor general (el div .seccion) */
.barra-lateral .seccion.youtube, 
.barra-lateral .seccion.facebook {
    display: flex; /* Para alinear el contenido del DIV (el enlace <a>) */
    align-items: center; /* Centra verticalmente el enlace <a> */
    height: 35px; /* Altura de la barra */
    padding: 0 15px; /* Padding horizontal */
    margin-bottom: 10px; /* Espacio entre botones */
    border-radius: 3px; /* Bordes redondeados */
    color: white; 
    text-decoration: none; 
    transition: background-color 0.2s ease; /* Transición suave */
}

/* Colores específicos */
.barra-lateral .seccion.youtube { 
    background-color: rgb(83, 2, 2); /* Rojo oscuro original */
}
.barra-lateral .seccion.facebook { 
    background-color:rgb(0, 0, 134); /* Azul oscuro original */
}

/* El enlace <a> dentro de la barra */
.barra-lateral .seccion.youtube a, 
.barra-lateral .seccion.facebook a {
    display: flex; /* Para alinear icono y texto DENTRO del enlace */
    align-items: center; /* Centra verticalmente icono y texto */
    text-decoration: none;
    color: white;
    width: 100%; /* Ocupa todo el espacio */
}

/* === INICIO DE LA CORRECCIÓN === */
/* Iconos */
.barra-lateral .imagen-youtube, 
.barra-lateral .imagen-facebook {
    height: 20px;
    width: auto;
    margin-right: 10px; /* Espacio aumentado */
    /* vertical-align: middle; <-- SE QUITÓ ESTA LÍNEA */
}

/* Texto */
.barra-lateral .texto-youtube, 
.barra-lateral .texto-facebook {
    font-size: 0.95em; /* Ligeramente más grande */
    font-weight: bold;
    /* vertical-align: middle; <-- SE QUITÓ ESTA LÍNEA */
}
/* === FIN DE LA CORRECCIÓN === */

/* Efecto Hover */
.barra-lateral .seccion.youtube:hover, 
.barra-lateral .seccion.facebook:hover {
    background-color: #444; /* Gris oscuro genérico */
}
/* === FIN: ESTILOS REDES SOCIALES === */


/* Pie de Página */
.div_del_fondo {
    background: rgb(28, 28, 28);
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.div_del_fondo p {
    color: aliceblue;
    margin: 0;
    font-size: 0.95em; /* Tamaño para el texto del pie */
}

/* Layout Principal del Index */
.cuerpo {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0;
}

main { /* Contenedor de los .cuadro en index.php */
    flex: 3;
    min-width: 0;
    padding-right: 10px;
}

.barra-lateral {
    flex: 1;
    min-width: 250px;
    background-color: rgb(28, 28, 28);
    color: aliceblue;
    padding: 20px;
    margin-left: 10px; /* Reducido si main tiene padding-right */
    margin-top: 0;
    border-radius: 5px;
}
.barra-lateral h2 {
    font-size: 1.3em; /* Tamaño para "Actualizacion..." */
    margin-bottom: 10px;
}
.barra-lateral h3 {
    font-size: 1em; /* Tamaño para "Espero que les guste..." */
    margin-bottom: 10px;
    font-weight: normal; /* Más ligero que h2 */
}
.barra-lateral p {
    font-size: 0.9em; /* Texto general de la barra lateral */
    line-height: 1.5;
}

/* Estilos para cada .cuadro en index.php (lista vertical) */
.cuadro {
    background-color: rgb(28, 28, 28);
    padding: 20px;
    margin-bottom: 20px;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}
.cuadro a.no_linea {
    text-decoration: none;
    color: inherit;
}
.cuadro img {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    max-width: 120px; /* Ajusta si eran más grandes en el index */
    height: auto;
    border-radius: 3px;
}
.cuadro h3 { /* Título del programa en el cuadro del index */
    font-size: 1.25em; /* Un poco más grande */
    margin-top: 0;
    margin-bottom: 8px;
    color: aliceblue;
    font-weight: bold;
}
.cuadro p { /* Descripción en el cuadro del index */
    font-size: 0.95em; /* Un poco más grande que la fecha */
    line-height: 1.5;
    color: #d3d3d3;
    margin-bottom: 10px;
}
.fecha_subida { /* "by tonto jil..." */
    color: aqua;
    font-size: 0.85em;
    display: block;
    margin-top: 10px;
    clear: left;
    text-align: left;
}

.centrado {
    text-align: center;
}
.seccion { /* Dentro de la barra lateral */
    margin-bottom: 20px;
}
/* === FIN: Tus Estilos Originales Adaptados === */

/* === INICIO: Estilos para Promo del Foro === */
.foro-promo {
    background-color: #303030;
    border: 1px solid aqua;
    padding: 15px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
    border-radius: 5px;
}
.foro-promo h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: aqua !important;
    font-size: 1.1em; /* Relativo al body, o usa px como 14px */
}
.foro-promo p {
    color: aliceblue !important;
    font-size: 0.9em; /* Relativo al body, o usa px como 11px */
    line-height: 1.4;
    display: block;
    margin-bottom: 15px;
    text-align: center;
}
.foro-promo a.boton-foro {
    display: inline-block;
    background-color: #000086;
    color: #FFFFFF !important;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    font-size: 1em; /* Relativo al body, o usa px como 12px */
}
.foro-promo a.boton-foro:hover {
    background-color: #00005A;
    color: #FFFFFF !important;
}
/* === FIN: Estilos para Promo del Foro === */

/* Estilos para el botón de Admin Login (visible) */
.admin-login-button {
    background-color: #4a5568;
    color: white;
    padding: 5px 12px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 1em; /* Coherente con el texto general (12px) */
    font-weight: bold;
    border: 1px solid #2d3748;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
    display: inline-block;
    cursor: pointer;
    margin-left: auto;
}
.admin-login-button:hover {
    background-color: #2d3748;
    color: #e2e8f0;
}
.admin-login-button:active {
    background-color: #1a202c;
    transform: translateY(1px);
}
/* Fin de estilos para el botón de Admin Login */
/* La llave '}' suelta que estaba aquí fue eliminada en versiones anteriores */

/* === ESTILOS BOTÓN DONAR - VERSIÓN FINAL ALINEADA === */

/* 1. Barra Superior: Forzamos la separación de elementos */
.barra1 {
    display: flex !important;
    align-items: center;
    /* ESTO ES LA CLAVE: Manda el texto a la izq y el botón a la der */
    justify-content: space-between !important; 
    width: 100%;
    padding-right: 20px !important;
    padding-left: 10px; /* Un poco de aire a la izquierda */
    box-sizing: border-box;
    position: relative;
    z-index: 100;
}

/* 2. El texto en movimiento (Ocupa el espacio sobrante) */
.contenedor-marquee {
    flex-grow: 1; /* Esto hace que el texto ocupe todo el espacio posible */
    overflow: hidden;
    margin-right: 20px;
}

/* 3. El Botón (Cuadrado y Amarillo) */
.boton-donar {
    /* ALINEACIÓN */
    margin-left: auto !important; /* Empuja el botón a la derecha SIEMPRE */
    
    /* VISUAL */
    background-color: #FFC439 !important;
    color: #003087 !important;
    border-radius: 0 !important; /* Cuadrado perfecto */
    border: none !important;
    outline: none !important;
    
    /* TAMAÑO Y TEXTO */
    display: inline-block !important;
    padding: 8px 20px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    white-space: nowrap; /* Evita que el texto del botón se parta en dos */
    
    /* CAPAS */
    position: relative;
    z-index: 99999;
}

/* Hover */
.boton-donar:hover {
    background-color: #ffca58 !important;
    color: #003087 !important;
}

/* 4. Ajuste Específico para la Barra Lateral (Para que ocupe todo el ancho ahí) */
.barra-lateral .boton-donar {
    display: block !important;
    width: 100%;
    margin-left: 0 !important; /* Aquí no necesitamos empujar a la derecha */
    margin-top: 10px;
    box-sizing: border-box;
}