/* ===========================================================
   blog_styles.css - Ajustes para imágenes completas, botón flotante y tarjetas adaptadas al ancho de la imagen
   =========================================================== */

/* =============================
   1. General - Estilos generales para el sitio
   ============================= */
body {
  background-color: #f9f9f9;  /* Fondo claro para todo el sitio */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  /* Fuente general */
  color: #333;  /* Color del texto */
}

h2.section-title {
  font-size: 2rem;  /* Tamaño de fuente para los títulos de sección */
  font-weight: 600;  /* Peso de fuente seminegro */
  margin-bottom: 2rem;  /* Margen inferior para separación */
  text-align: center;  /* Centrar el título */
  color: #004080;  /* Color azul institucional */
}

/* ===========================================================
   TARJETAS PRINCIPALES - Estilo para las tarjetas en la página principal
   =========================================================== */

/* Si las tarjetas están dentro de un contenedor específico en index.php */
.main-column {
    padding-top: 30px;
}

.card.post-card {
  border: none;  /* Eliminar borde */
  border-radius: 10px;  /* Bordes redondeados */
  overflow: hidden;  /* Ocultar cualquier contenido que se desborde */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  /* Sombra suave para las tarjetas */
  transition: transform 0.2s ease, box-shadow 0.3s ease;  /* Transición suave para efectos */
  display: flex;  /* Usar flexbox para controlar la disposición interna */
  flex-direction: column;  /* Organizar los elementos de la tarjeta en columna */
  height: 400px;  /* Altura fija para todas las tarjetas */
}

.card-body {
  display: flex;  /* Usar flexbox para el contenido dentro de la tarjeta */
  flex-direction: column;  /* Organizar los elementos de la tarjeta en columna */
  height: 100%;  /* Asegura que el contenido ocupe toda la altura disponible */
}

.card-title {
  overflow: hidden;  /* Ocultar el texto que exceda el espacio */
  text-overflow: ellipsis;  /* Mostrar puntos suspensivos para el texto recortado */
  white-space: nowrap;  /* Evitar el salto de línea */
}

.card-text {
  flex-grow: 1;  /* Permite que el contenido crezca y ocupe el espacio restante */
  overflow: hidden;  /* Ocultar texto que exceda el espacio */
  text-overflow: ellipsis;  /* Mostrar puntos suspensivos */
}

/* Efecto hover en la tarjeta */
.card.post-card:hover {
  transform: translateY(-5px);  /* Desplazar la tarjeta hacia arriba */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);  /* Aumentar sombra para dar efecto de elevación */
}

/* Imagen superior en la tarjeta con formato 16:9 */
.card.post-card .card-img-top {
  width: 100%;  /* Imagen ocupa todo el ancho */
  aspect-ratio: 16 / 9;  /* Proporción de la imagen 16:9 */
  object-fit: cover;  /* Mantener la imagen centrada y sin deformarla */
  display: block;  /* Asegura que la imagen sea un bloque */
}

/* Cuerpo del texto de la tarjeta */
.card.post-card .card-body {
  padding: 1.25rem;  /* Espaciado dentro de la tarjeta */
  display: flex;  /* Usar flexbox para distribuir el contenido */
  flex-direction: column;  /* Organizar los elementos en columna */
  justify-content: space-between;  /* Distribuir el contenido de forma equitativa */
}


/* Título de la tarjeta con color institucional */
.card.post-card .card-title {
  font-size: 1.05rem;  /* Tamaño del título */
  font-weight: 600;  /* Peso del texto */
  color: #2a73b7;  /* Color azul institucional */
  text-align: left;  /* Alineación a la izquierda */
  margin-bottom: 0.5rem;  /* Espaciado inferior */
  display: -webkit-box;  /* Usar flexbox para controlar el texto */
  -webkit-line-clamp: 2;  /* Limitar a 2 líneas */
  -webkit-box-orient: vertical;  /* Dirección vertical de la caja */
  overflow: hidden;  /* Ocultar el texto excedente */
  text-overflow: ellipsis;  /* Mostrar puntos suspensivos */
  white-space: normal;  /* Permitir que el texto se divida en varias líneas */
  word-wrap: break-word;  /* Forzar el salto de línea si el texto es demasiado largo */
}


/* Resumen del post */
.card.post-card .card-text {
  font-size: 0.95rem;  /* Tamaño de fuente para el resumen */
  color: #444;  /* Color gris oscuro para el texto */
  text-align: justify;  /* Justificar el texto */
  display: -webkit-box;  /* Usar caja flexible */
  -webkit-line-clamp: 3;  /* Limitar a 3 líneas */
  -webkit-box-orient: vertical;  /* Dirección vertical de la caja */
  overflow: hidden;  /* Ocultar el texto excedente */
  text-overflow: ellipsis;  /* Puntos suspensivos */
}

/* Botón "Leer más" con el color del título */
.card.post-card .btn {
  display: inline-block;  /* Ajusta el tamaño del botón al contenido */
  align-self: flex-end;  /* Alinear el botón al final de la tarjeta */
  background-color: #2a73b7;  /* Azul institucional */
  color: #fff;  /* Texto blanco */
  font-weight: 600;  /* Peso de la fuente */
  font-size: 1rem;  /* Tamaño de fuente */
  border: 2px solid #2a73b7;  /* Borde del mismo color */
  border-radius: 12px;  /* Bordes redondeados */
  padding: 2px 10px;  /* Espaciado interno */
  margin-top: 10px;  /* Separación superior */
  text-decoration: none;  /* Sin subrayado */
  transition: all 0.3s ease;  /* Transición suave */
  cursor: pointer;  /* Cursor de puntero */
}

/* Efecto hover en el botón */
.card.post-card .btn:hover {
  background-color: #21679b;  /* Azul más oscuro al pasar el mouse */
  color: #fff;  /* Mantener texto blanco */
  border-color: #21679b;  /* Borde más oscuro */
  transform: scale(1.05);  /* Aumento suave al pasar el mouse */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Sombra suave para dar profundidad */
}

/* Efecto de enfoque en el botón */
.card.post-card .btn:focus {
  outline: none;  /* Eliminar contorno de foco */
  box-shadow: 0 0 0 4px rgba(42, 115, 183, 0.4);  /* Efecto de foco con sombra */
}

/* ===========================================================
   blog_styles.css - Estilos específicos para post.php
   =========================================================== */

/* =============================
   1. Estilo para el contenedor principal de contenido (post.php)
   ============================= */
.main-column {
  padding-top: 30px;  /* Espaciado superior para la columna principal */
}

/* =============================
   2. Imagen principal del post
   ============================= */
.post-img-main {
  width: 100%;  /* Asegura que la imagen ocupe todo el ancho disponible */
  height: auto;  /* Mantiene la proporción de la imagen */
  object-fit: cover;  /* Asegura que la imagen se recorte de manera correcta sin deformarse */
  border-radius: 10px;  /* Bordes redondeados para la imagen */
  margin-bottom: 20px;  /* Espaciado inferior */
}

/* =============================
   3. Título del post (2 líneas máximo)
   ============================= */
.card-title {
  font-size: 1.5rem;  /* Aumento el tamaño del título */
  font-weight: 600;  /* Peso de la fuente */
  color: #2a73b7;  /* Color azul institucional */
  text-align: left;  /* Alineación a la izquierda */
  margin-bottom: 1rem;  /* Margen inferior para separación */
  display: -webkit-box;  /* Usar flexbox para el control de las líneas */
  -webkit-line-clamp: 3;  /* Limitar a 3 líneas */
  -webkit-box-orient: vertical;  /* Dirección vertical de la caja */
  overflow: hidden;  /* Evitar el desbordamiento del texto */
  text-overflow: ellipsis;  /* Mostrar puntos suspensivos */
  white-space: normal;  /* Permitir el salto de línea en el texto */
  word-wrap: break-word;  /* Forzar el salto de línea si el texto es demasiado largo */
}

/* =============================
   4. Contenido principal del post
   ============================= */
.post-content {
  font-size: 1.05rem;  /* Tamaño de la fuente para el contenido */
  line-height: 1.7;  /* Espaciado entre líneas */
  color: #444;  /* Color gris para el contenido */
  margin-bottom: 2rem;  /* Margen inferior */
  text-align: justify;
}

/* =============================
   5. Estilos para el contenedor de la fecha y título del post
   ============================= */
.card-body .text-muted {
  margin-bottom: 1.5rem;  /* Espaciado inferior entre la fecha y el contenido */
}

/* =============================
   6. Efectos hover y transiciones
   ============================= */
/* Efecto hover para las tarjetas relacionadas (Noticia relacionada) */
.card.post-card:hover {
  transform: translateY(-5px);  /* Efecto de desplazamiento hacia arriba */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);  /* Aumentar sombra para dar efecto de elevación */
}

/* =============================
   7. Imágenes en noticias relacionadas
   ============================= */
.related-news img {
  object-fit: cover;  /* Asegura que las imágenes en noticias relacionadas se ajusten correctamente */
  width: 100%;  /* Imagen ocupa todo el ancho */
  height: auto;  /* Altura proporcional */
  max-height: 200px;  /* Limita la altura de las imágenes */
}

/* =============================
   8. Sidebar (Últimas noticias)
   ============================= */
.list-group a {
  display: flex;  /* Usar flexbox para la disposición */
  align-items: center;  /* Centrar las imágenes y títulos */
  background-color: #fff;  /* Fondo blanco */
  border-radius: 10px;  /* Bordes redondeados */
  margin-bottom: 12px;  /* Separación entre los elementos */
  padding: 10px;  /* Espaciado interno */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);  /* Sombra suave */
  text-decoration: none;  /* Eliminar subrayado en el enlace */
  transition: transform 0.2s ease, box-shadow 0.3s ease;  /* Transición para hover */
}

.list-group a:hover {
  transform: translateY(-3px) scale(1.02);  /* Efecto de hover para aumentar el tamaño */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);  /* Aumentar sombra al pasar el mouse */
}

/* Ajuste de imagen para las últimas noticias */
.list-group img {
  width: 80px;  /* Ajustar el tamaño de las imágenes */
  height: 60px;  /* Ajuste de altura */
  object-fit: cover;  /* Evitar la distorsión de la imagen */
  border-radius: 5px;  /* Bordes redondeados */
}

/* =============================
   9. Botón flotante Volver
   ============================= */
.btn-volver {
  position: fixed !important;  /* Fijar en la esquina inferior derecha */
  bottom: 20px;  /* Separación inferior */
  right: 20px;  /* Separación derecha */
  z-index: 1050;  /* Asegura que se mantenga por encima de otros elementos */
  border-radius: 50px;  /* Bordes redondeados */
  padding: 8px 16px;  /* Espaciado interno */
  font-size: 0.9rem;  /* Tamaño de fuente */
  font-weight: 600;  /* Peso de la fuente */
  background-color: #004080;  /* Azul institucional */
  border: none;  /* Sin borde */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);  /* Sombra suave */
  transition: background-color 0.3s ease, transform 0.2s ease;  /* Transición para hover */
}

.btn-volver:hover {
  background-color: #003060;  /* Azul más oscuro al pasar el mouse */
  transform: scale(1.05);  /* Aumento suave al pasar el mouse */
}

/* En móviles */
@media (max-width: 576px) {
  .btn-volver {
    right: 50%;  /* Centrar el botón en pantallas pequeñas */
    transform: translateX(50%);
    padding: 10px 18px;
    font-size: 1rem;  /* Aumento del tamaño de fuente en móviles */
  }
}

/* =============================
   5. Responsive - Ajustes para dispositivos móviles
   ============================= */
@media (max-width: 768px) {
  .card.post-card .card-img-top {
    height: 200px;  /* Ajustar la altura de la imagen en dispositivos pequeños */
  }
  .post-img-main {
    max-height: 400px;  /* Limitar la altura de la imagen en móviles */
  }
  .card.post-card .card-title {
    font-size: 1.1rem;  /* Ajustar tamaño de fuente para el título */
  }
}

/* =============================
   6. Sidebar (Últimas noticias)
   ============================= */
.section-title-with-lines {
  display: flex;  /* Usar flexbox para la disposición */
  align-items: center;  /* Centrar verticalmente */
  justify-content: center;  /* Centrar horizontalmente */
  font-size: 1.2rem;  /* Tamaño del título */
  font-weight: 600;  /* Peso de la fuente */
  color: #333;  /* Color de texto */
  margin: 20px 0;  /* Margen superior e inferior */
}

.section-title-with-lines::before,
.section-title-with-lines::after {
  content: "";
  flex: 1;  /* Asegura que las líneas se extiendan */
  border-bottom: 1px solid #e0e0e0;  /* Línea debajo del título */
  margin: 0 10px;  /* Espaciado entre el título y las líneas */
}

.list-group a {
  display: flex;  /* Usar flexbox para la disposición */
  align-items: center;  /* Alinear imagen y texto verticalmente */
  background-color: #fff;  /* Fondo blanco */
  border-radius: 10px;  /* Bordes redondeados */
  margin-bottom: 12px;  /* Separación entre los elementos */
  padding: 10px;  /* Espaciado interno */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);  /* Sombra suave */
  text-decoration: none;  /* Sin subrayado */
  transition: transform 0.2s ease, box-shadow 0.3s ease;  /* Transición para hover */
}

.list-group a:hover {
  transform: translateY(-3px) scale(1.02);  /* Efecto hover para aumentar ligeramente el tamaño */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);  /* Aumentar la sombra en hover */
}

.list-group img {
  width: 80px;  /* Ajuste de tamaño para la imagen */
  height: 60px;  /* Ajuste de altura */
  object-fit: cover;  /* Ajustar la imagen para que no se deforme */
  border-radius: 5px;  /* Bordes redondeados */
}

/* Títulos de "Últimas Noticias" en la sidebar */
.list-group a h6 {
  margin: 0;  /* Eliminar margen */
  font-size: 0.95rem;  /* Tamaño de fuente */
  color: #2a73b7;  /* Color azul */
  transition: color 0.2s ease;  /* Transición para el cambio de color */
}

/* Efecto hover en los títulos */
.list-group a:hover h6 {
  color: #004080;  /* Color más oscuro en hover */
}

/* =============================
   7. Noticias relacionadas
   ============================= */
.related-news img {
  object-fit: contain;  /* Asegura que la imagen se ajuste sin recortes */
  width: 100%;  /* Ocupa todo el ancho */
  height: auto;  /* Ajuste automático de altura */
  max-height: 200px;  /* Limita la altura máxima */
}

/* =============================
   8. Botón flotante Volver
   ============================= */
.btn-volver {
  position: fixed !important;  /* Fijar en la esquina inferior derecha */
  bottom: 20px;  /* Separación inferior */
  right: 20px;  /* Separación derecha */
  z-index: 1050;  /* Asegura que se mantenga por encima de otros elementos */
  border-radius: 50px;  /* Bordes redondeados */
  padding: 8px 16px;  /* Espaciado interno */
  font-size: 0.9rem;  /* Tamaño de fuente */
  font-weight: 600;  /* Peso de la fuente */
  background-color: #004080;  /* Azul institucional */
  border: none;  /* Sin borde */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);  /* Sombra suave */
  transition: background-color 0.3s ease, transform 0.2s ease;  /* Transición para hover */
}

.btn-volver:hover {
  background-color: #003060;  /* Azul más oscuro al pasar el mouse */
  transform: scale(1.05);  /* Aumento suave al pasar el mouse */
}

/* En móviles */
@media (max-width: 576px) {
  .btn-volver {
    right: 50%;  /* Centrar el botón en pantallas pequeñas */
    transform: translateX(50%);
    padding: 10px 18px;
    font-size: 1rem;  /* Aumento del tamaño de fuente en móviles */
  }
}