/*
    STYLESHEET ACTUALIZADO - XIV ENCUENTRO INTERNACIONAL DE ESTUDIANTES DE PSICOLOGÍA
    Identidad visual basada en el cartel oficial 2026
    
    PALETA DE COLORES:
    - Rojo vibrante: #D32F2F (color principal)
    - Azul marino: #1B4965 (títulos)
    - Azul medio: #4A90E2 (elementos secundarios)
    - Naranja/dorado: #F57C00 (acentos)
    - Beige claro: #F5F1E8 (fondo)
    - Verde institucional: #2E7D32
*/

/* ----------- Estilos para el encabezado del congreso ----------- */

/*
Contenedor principal de toda la página del congreso.
*/
.conf {
  width: 100%;
  border: none;
  margin: auto;
}

/*
Envuelve la parte superior del encabezado del congreso.
CAMBIO: Actualizado con los colores del nuevo cartel (rojo y azul)
*/
.confTitleBox {
  color: #1B4965;  /* Azul marino del título del cartel */
  min-height: 50px;
  border-top: 25px solid #D32F2F;  /* Rojo vibrante del XIV */
  border-bottom: 25px solid #F57C00;  /* Naranja/dorado de las cuerdas */
  background: #F5F1E8;  /* Fondo beige claro del cartel */
}

/*
Establece el ancho de la parte superior del encabezado.
Por defecto 1000px y centrado.
*/
.confTitle {
  width: 1000px;
  margin: 0 auto;
}

/*
La caja que contiene el logo. Por defecto, el logo se coloca
a la izquierda del título del congreso.
*/
.confLogoBox {
  float: left;
  padding-right: 10px;
}

/*
El estilo para el texto del título.
CAMBIO: Color actualizado al azul marino del cartel
*/
.conference-title-link {
  font-size: 22pt;
  display: block;
  padding: 25px 0;
  color: #1B4965;  /* Azul marino del título principal */
}

/*
Contenedor alrededor de la parte inferior del encabezado
CAMBIO: Actualizado con colores más cálidos y coherentes
*/
.confSubTitleBox {
  background: #F5F1E8;  /* Beige claro */
  border-bottom: 2px solid #F57C00;  /* Borde naranja/dorado */
  border-top: 1px solid #D32F2F;  /* Línea roja superior */
  padding: 0.5rem 0;
}

/*
El contenido de la parte inferior del encabezado. Por defecto
centrado y con ancho fijo.
CAMBIO: Color de texto actualizado
*/
.confSubTitleContent {
  width: 950px;
  margin: 0 auto;
  font-size: 11pt;
  color: #1B4965;  /* Azul marino */
}

/*
Estilo para enlaces en la parte inferior del encabezado
CAMBIO: Enlaces con color rojo vibrante
*/
.confSubTitle a {
  font-size: 11pt;
  color: #D32F2F;  /* Rojo vibrante */
  transition: color 0.3s ease;
}

.confSubTitle a:hover {
  color: #F57C00;  /* Naranja al pasar el mouse */
}

/*
Estilos para la información de fecha y lugar.
CAMBIO: Color rojo para destacar
*/
.datePlace {
  font-size: 12pt;
  color: #D32F2F;  /* Rojo vibrante como en el cartel */
  font-weight: 500;
}

/*
Estilos de anuncios
CAMBIO: Actualizado con los colores de la nueva identidad
*/
.simpleTextAnnouncement {
  background: #F5F1E8;  /* Beige claro */
  border-top: 2px solid #D32F2F;  /* Borde rojo */
  border-bottom: 2px solid #F57C00;  /* Borde naranja */
  font-family: Verdana, sans-serif;
  font-weight: bold;
  font-size: 10pt;
  text-align: center;
  color: #1B4965;  /* Azul marino */
  padding: 12px 0;
}

/* ----------- Estilos para el contenido principal ----------- */

/*
El contenedor alrededor del menú y el contenido de la página.
Por defecto centrado con ancho fijo.
*/
#confSectionsBox {
  width: 950px;
  margin: 0 auto;
  margin-top: 30px;
}

/* ----------- Estilos para el menú ----------- */

/*
Contenedor alrededor del menú
*/
.conf_leftMenu {
  float: left;
  width: 200px;
}

/*
Estilos para la caja del menú
CAMBIO: Actualizado con azul marino, SIN bordes rojos
*/
#outer {
  border: none;  /* Sin borde */
  background: #1B4965;  /* Azul marino de fondo */
  border-radius: 8px;  /* Bordes redondeados modernos */
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);  /* Sombra sutil en lugar de borde */
}

/*
El elemento del menú
CAMBIO: Texto en color claro sobre fondo azul marino
*/
#outer li a {
  font-family: verdana, arial, sans-serif;
  font-size: 10pt;
  color: #F5F1E8;  /* Beige claro para el texto */
  transition: all 0.3s ease;
}

/*
El elemento del menú al pasar el mouse
CAMBIO: Efecto hover con rojo vibrante
*/
#outer li a:hover {
  background: #D32F2F;  /* Rojo vibrante */
  color: white;
}

/*
Un elemento de menú no seleccionado
*/
.menuConfTitle {
  text-align: left;
}

.menuConfTitle a {
  color: #F5F1E8;  /* Beige claro */
  padding: 10px 12px;
}

/*
Un elemento de menú seleccionado
CAMBIO: Destacado con naranja/dorado
*/
.menuConfTitle.selected > a,
.menuConfMiddleCell.selected > a {
  color: white;
  background: #F57C00;  /* Naranja/dorado */
  border-left: 4px solid #D32F2F;  /* Borde rojo a la izquierda */
  font-weight: bold;
}

/*
Sub-elemento de menú
CAMBIO: Actualizado con nueva paleta
*/
li ul.inner li a {
  padding: 5px 12px 5px 30px;
  background: transparent url(/images/conf/left_menu_bullet.png) scroll no-repeat 15px center;
  font-size: 9pt;
  color: #F5F1E8;  /* Beige claro */
}

li ul.inner li a:hover {
  background-color: #4A90E2;  /* Azul medio */
  color: white;
}

/*
Caja de soporte
CAMBIO: Actualizado con colores institucionales, sin borde rojo
*/
.support_box {
  background: #F5F1E8;  /* Beige claro */
  border: 1px solid #ccc;  /* Borde gris suave */
  border-radius: 8px;
  margin-top: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.support_box > h3 {
  color: white;
  background: #1B4965;  /* Azul marino */
  padding: 10px;
  margin: 0;
  border-radius: 6px 6px 0 0;
}

/* ----------- ESTILOS PARA IMÁGENES DE BANNER Y HEADER ----------- */

/* Banner principal / imagen de portada */
.confBodyBox img,
.conference-header-img,
.banner-img,
img[src*="banner"],
img[src*="header"] {
  max-width: 100%;  /* Ocupa todo el ancho disponible */
  width: 100%;
  height: auto;  /* Mantiene las proporciones */
  display: block;
  margin: 0 auto 20px auto;  /* Centrado con margen inferior */
}

/* Contenedor de imagen de encabezado si existe */
.header-image-container,
.banner-container {
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
}

/* Para imágenes dentro del contenido que deben ser grandes */
.confBodyBox .main-image,
.confBodyBox .featured-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Imágenes pequeñas/thumbnails que deben mantener su tamaño */
.confBodyBox .thumbnail,
.confBodyBox img.small {
  width: auto;
  max-width: 200px;
}

/* Logo en el header (mantener pequeño) */
.confLogoBox img {
  max-width: 100px;
  width: auto;
  height: auto;
}

/* ----------- Estilos para el contenido de la página ----------- */

/*
Contenedor alrededor del contenido
*/
.confBodyBox {
  margin-left: 230px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/*
ESTILOS ADICIONALES para mejorar la coherencia visual
*/

/* Títulos dentro del contenido */
.confBodyBox h1,
.confBodyBox h2 {
  color: #1B4965;  /* Azul marino */
  border-bottom: 3px solid #D32F2F;  /* Línea roja debajo */
  padding-bottom: 10px;
}

.confBodyBox h3 {
  color: #D32F2F;  /* Rojo vibrante */
}

/* Enlaces en el contenido */
.confBodyBox a {
  color: #D32F2F;  /* Rojo vibrante */
  text-decoration: none;
  transition: color 0.3s ease;
}

.confBodyBox a:hover {
  color: #F57C00;  /* Naranja al pasar el mouse */
  text-decoration: underline;
}

/* Botones (si los hay) */
.button,
button,
input[type="submit"] {
  background: #D32F2F;  /* Rojo vibrante */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
  background: #F57C00;  /* Naranja al pasar el mouse */
}