/* ===== PALETA DE COLORES ===== */
:root {
    --color-fondo: #f8f9fa;
    --color-superficie: #ffffff;
    --color-texto: #34495E;
    --color-primario: #2C3E50;
    --color-acento: #18BC9C;
    --color-borde: #dee2e6;
}

/* ===== ESTILOS GENERALES ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: var(--color-fondo);
    color: var(--color-texto);
}
.container {
    max-width: 1300px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    gap: 2rem;
}
.section-title {
    border-bottom: 2px solid var(--color-primario);
    padding-bottom: 10px;
    margin-bottom: 1.5rem;
    color: var(--color-primario);
}

/* ===== DISEÑO PARA PÁGINAS ESTÁTICAS ===== */
.container.container-static {
    display: block;
    max-width: 850px;
}
.container-static .sidebar-left,
.container-static .sidebar-right {
    display: none;
}

/* ===== HEADER Y NAVEGACIÓN ===== */
.site-header {
    background-color: var(--color-primario);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 2rem;
    border-bottom: 1px solid #455a71;
    position: relative;
    background-image: url('/data/fondo.jpg');
    background-size: cover;
    background-position: center center;
}
.top-header::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.top-header > div {
    position: relative;
    z-index: 2;
}
.logo a { text-decoration: none; }
.logo img { max-height: 115px; width: auto; }
.tagline {
    margin-top: 2px;
    margin-bottom: 0;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
.header-novedad {
    width: 600px;
    height: 120px;
    overflow: hidden;
    border-radius: 5px; 
    background-color: #455a71;
    border: 2px solid rgba(255,255,255,0.8);
   transform: translateX(-115px);
}
.header-novedad img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.logo-secundario-container .logo-secundario {
    display: block;
    max-height: 80px;
    width: auto;
}
.header-nav-bar {
    background-color: #34495E;
    padding: 0.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#fecha-hora-container {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
    font-weight: bold;
}
.nav-buttons {
    display: flex;
    gap: 10px;
}
.nav-button {
    background-color: transparent;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}
.nav-button:hover { 
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
.nav-button.login { 
    background-color: var(--color-acento); 
    border-color: var(--color-acento);
}
.nav-button.login:hover { 
    background-color: #15a287;
    border-color: #15a287;
}
.nav-button.logout {
    background-color: #d9534f;
    border-color: #d9534f;
}
.nav-button.logout:hover {
    background-color: #c9302c;
    border-color: #c9302c;
}

/* ===== BARRA DE EFEMÉRIDES ===== */
.efemerides-bar {
    background-color: var(--color-acento);
    color: white;
    padding: 8px 0;
    font-size: 0.9em;
    overflow: hidden;
    white-space: nowrap;
}
.efemerides-bar .marquee {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-animation 25s linear infinite;
    animation-delay: 5s;
}
@keyframes marquee-animation {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
.efemerides-bar:hover .marquee {
    animation-play-state: paused;
}

/* ===== FOOTER ===== */
.main-footer {
    text-align: center;
    padding: 2rem;
    margin-top: 2rem;
    background-color: var(--color-primario);
    color: white;
}
.footer-nav { margin-top: 10px; }
.footer-nav a { color: white; margin: 0 10px; }

/* ===== BARRAS LATERALES Y PUBLICIDAD ===== */
.sidebar-left, .sidebar-right {
    background-color: var(--color-superficie);
    padding: 1.5rem;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
}
.agrupaciones-list .agrupacion-link {
    display: block; padding: 10px; background-color: var(--color-fondo); border-radius: 5px;
    margin-bottom: 10px; text-decoration: none; color: var(--color-texto); font-weight: bold;
    border: 1px solid var(--color-borde); transition: background-color 0.2s, border-color 0.2s;
}
.agrupaciones-list .agrupacion-link:hover { background-color: #e9ecef; border-color: #ced4da; }
.ad-space { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #eee; text-align: center; }
.ad-space h4 { margin-top: 0; margin-bottom: 1rem; color: #999; font-size: 0.8em; text-transform: uppercase; }
.ad-space img { max-width: 100%; height: auto; border-radius: 5px; }

/* ===== CONTENIDO DE ARTÍCULOS ===== */
.articles-grid { display: grid; gap: 1.5rem; }
.article-card, .full-article {
    background-color: var(--color-superficie); padding: 1.5rem; border: 1px solid var(--color-borde);
    border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.full-article { padding: 2rem; }
.article-meta { font-size: 0.9em; color: #666; margin-bottom: 1rem; }
.read-more { display: inline-block; margin-top: 1rem; color: var(--color-acento); text-decoration: none; font-weight: bold; }
.read-more:hover { text-decoration: underline; }
.article-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}
.article-body.pos-abajo-centro {
    flex-direction: column-reverse;
}
.article-text { 
    flex: 1; 
    min-width: 0; 
    line-height: 1.7; 
}

/* ===== GALERÍA DE IMÁGENES DEL ARTÍCULO ===== */
.article-gallery {
    display: grid;
    gap: 10px;
    margin-bottom: 1.5rem;
    width: 100%;
}
.article-gallery img {
    width: auto;
    max-width: 100%;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.article-gallery.tam-pequenas { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
.article-gallery.tam-pequenas img { height: 80px; }
.article-gallery.tam-medianas { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.article-gallery.tam-medianas img { height: 120px; }
.article-gallery.tam-grandes { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.article-gallery.tam-grandes img { height: 180px; }

/* ===== VISOR DE IMGENES (LIGHTBOX) ===== */
.image-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    cursor: pointer;
}
.image-viewer-overlay img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
}
.close-viewer-btn {
    position: absolute;
    top: 20px;
    right: 35px;
    font-size: 45px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}
.close-viewer-btn:hover {
    color: #bbb;
}

/* ===== PÁGINA DE AYUDA (BOT) ===== */
.faq-container {
    border-top: 1px solid var(--color-borde);
}
.faq-item {
    border-bottom: 1px solid var(--color-borde);
}
.faq-question {
    width: 100%;
    background-color: transparent;
    border: none;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color-primario);
}
.faq-question:hover {
    background-color: #f8f9fa;
}
.faq-icon {
    font-size: 1.5em;
    font-weight: normal;
    color: var(--color-acento);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #f8f9fa;
}
.faq-answer p {
    padding: 1.5rem;
    margin: 0;
    line-height: 1.6;
}

/* ===== MENSAJERÍA INTERNA ===== */
.mensajeria-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    min-height: 75vh;
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}
.lista-mensajes {
    border-right: 1px solid var(--color-borde);
    overflow-y: auto;
    background-color: #fdfdfd;
    padding: 1rem 0;
}
.btn-nuevo-mensaje {
    display: block;
    padding: 12px;
    margin: 0 1rem 1rem 1rem;
    background-color: var(--color-acento);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.2s;
}
.btn-nuevo-mensaje:hover {
    background-color: #15a287;
}
.mensaje-item {
    display: block;
    padding: 12px 1rem;
    border-bottom: 1px solid var(--color-borde);
    text-decoration: none;
    color: var(--color-texto);
    cursor: pointer;
    border-left: 4px solid transparent;
}
.mensaje-item:hover {
    background-color: var(--color-fondo);
}
.mensaje-item.no-leido {
    background-color: #f0f8ff;
}
.mensaje-item.no-leido .remitente,
.mensaje-item.no-leido .asunto {
    font-weight: bold;
    color: var(--color-primario);
}
.mensaje-item .remitente { font-size: 1em; }
.mensaje-item .asunto { font-size: 0.9em; color: #555; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top: 4px; }
.mensaje-item .fecha { font-size: 0.8em; color: #888; float: right; }
.vista-mensaje {
    padding: 2rem;
    overflow-y: auto;
}
.vista-mensaje h3 {
    margin-top: 0;
    color: var(--color-primario);
}
.vista-mensaje .form-group { margin-bottom: 1rem; }
.vista-mensaje label { display: block; margin-bottom: 5px; font-weight: bold; }
.vista-mensaje input[type="text"], .vista-mensaje textarea { 
    width: 100%; 
    padding: 10px; 
    box-sizing: border-box; 
    border: 1px solid var(--color-borde);
    border-radius: 5px;
}
.vista-mensaje button[type="submit"] {
    background-color: var(--color-acento);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}
.mensaje-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.mensaje-cuerpo {
    padding-top: 1rem;
    line-height: 1.7;
}
.panel-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
    font-size: 1.2em;
}
.unread-count {
    background-color: #dc3545;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.8em;
    font-weight: bold;
    vertical-align: top;
    margin-left: 5px;
}

/* ===== PANEL DE CONTROL ===== */
.panel-container .tool-card {
    display: block;
    padding: 1.5rem;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.panel-container .tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ===== RESPONSIVIDAD ===== */
@media (max-width: 992px) { /* Tablets */
    .container { grid-template-columns: 1fr 250px; padding: 0 1rem; }
    .sidebar-left { display: none; }
    .header-novedad, .logo-secundario-container { display: none; }
    .top-header { justify-content: center; }
    .header-nav-bar { justify-content: center; }
}
@media (max-width: 768px) { /* Móviles */
    .container { grid-template-columns: 1fr; }
    main.content { order: 1; }
    aside.sidebar-right { order: 2; }
    .top-header { padding: 0.5rem 1rem; }
    .header-nav-bar { padding: 0.5rem 1rem; flex-direction: column; gap: 10px; align-items: center;}
    .nav-buttons {
        gap: 5px;
        width: 100%;
        justify-content: space-around;
    }
    .nav-button {
        padding: 8px 10px;
        font-size: 0.9em;
    }
    .article-body { flex-direction: column; }
}
/* ===== ESTILOS PARA ENLACES DE MENSAJERÍA INTERNA ===== */
.link-mensaje-interno {
    text-decoration: none;
    color: inherit; /* Hereda el color del texto circundante */
    border-bottom: 1px dotted var(--color-acento);
    transition: background-color 0.2s;
}
.link-mensaje-interno:hover {
    background-color: rgba(24, 188, 156, 0.1); /* Un resaltado sutil del color de acento */
    border-bottom: 1px solid var(--color-acento);
}
/* ===== ESTILOS PARA FORMULARIO DE CONTACTO ===== */
.contact-form {
    background-color: var(--color-superficie);
    padding: 2rem;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
}
.contact-form .form-group {
    margin-bottom: 1.5rem;
}
.contact-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.contact-form input[type="text"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-borde);
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
}
.contact-form button {
    width: 100%;
    padding: 12px;
    background-color: var(--color-acento);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
.contact-form button:hover {
    background-color: #15a287;
}

/* --- NUEVOS ESTILOS PARA LA BARRA DE USUARIO --- */
.user-welcome {
    background-color: var(--color-fondo); /* Fondo claro */
    color: var(--color-texto); /* Letras oscuras */
    padding: 10px 2rem;
    text-align: right; /* Alineación a la derecha */
    font-weight: bold;
    border-bottom: 1px solid var(--color-borde);
}
.user-welcome p {
    margin: 0;
}

/* ===== PÁGINA DE CONFERENCIAS ===== */
.conference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.conference-card {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.conference-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.conference-card h3 {
  margin-top: 0;
  color: var(--color-primario);
  font-size: 1.3em;
}
.conference-card .meta {
  font-size: 0.9em;
  color: #6c757d;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-borde);
}
.conference-card .message {
  flex-grow: 1; 
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.conference-link {
  display: block;
  background-color: var(--color-acento);
  color: white;
  text-align: center;
  padding: 12px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s;
  margin-bottom: 1rem;
}
.conference-link:hover {
  background-color: #15a287; 
}
.countdown-container {
  font-size: 0.9em;
  text-align: center;
  color: #6c757d;
  background-color: var(--color-fondo);
  padding: 0.75rem;
  border-radius: 5px;
  margin-top: auto;
}
.countdown {
  font-weight: bold;
  color: var(--color-texto);
  margin-left: 5px;
}

/* --- Reglas Adicionales para Mejorar la Responsividad --- */
/* Asegura que las imágenes nunca sean más anchas que su contenedor */
img, video, iframe {
    max-width: 100%;
    height: auto;
}