/*
#####################################################################################################################################
SCRIPT CSS PARA ESTILOS PERSONALIZADOS EN INFORMES DE GENOSCRIBE
#####################################################################################################################################
*/

/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS GENERALES
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/*
==========================================================================================================
ESTILOS BASE PARA EL DOCUMENTO
==========================================================================================================
*/

/* Estilos base para el cuerpo del documento */
html, body {
  margin: 0;
  padding: 0em 1.5em 2.5em 1.5em;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
  background-color: #f4f4f4;
  color: #1e1d30;
  font-size: 16px;  /* Ligero aumento para mejor legibilidad */
  font-weight: 400;
  line-height: 1.8;  /* Más aire entre líneas */
  letter-spacing: 0.1px;  /* Muy sutil espaciado entre letras */
  word-spacing: 0.05em;  /* Mejora el ritmo del texto */
  text-align: justify;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* Estilos para el contenedor principal */
main {
  max-width: 960px;
  margin: 2.5em auto;
  padding: 2.2em 2.4em;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}




/*
==========================================================================================================
ESTILOS PARA TEXTO BÁSICO: PÁRRAFOS, CABECERAS Y NEGRITAS
==========================================================================================================
*/

/* Párrafos */
p {
  margin-top: 0;
  margin-bottom: 0.3em;
}


/*  Cabeceras simples */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: #1e1e1e;
  margin-top: 2em;
  margin-bottom: 0.8em;
}


/* Negritas */
strong {
  color: #1d4e89;
}

.soft-strong {
  color: #3b6ca8;  /* tono azul más suave que #1d4e89 */
  font-weight: 500;  /* un poco más delgado que el bold por defecto */
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS DE LISTAS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/*
==========================================================================================================
LISTAS DESORDENADAS SIMPLES
==========================================================================================================
*/

/* Estilo de listas sin enumeración */
ul {
  margin-top: 0.2em;
  margin-bottom: 0.3em;
  padding-left: 2em;  /* Nivel 1 más sangrado: mueve bullet + texto */
}

/* Aumentar espacio vertical entre elementos de lista */
ul > li {
  margin-bottom: 0.7em;  /* espacio entre items */
  line-height: 1.8;  /* mayor altura de línea dentro del li */
}

/* Aumentar espacio entre elementos de listas anidadas */
ul ul > li {
  margin-bottom: 0.5em;  /* un poco menos que el primer nivel */
  line-height: 1.4;
}

/* Opcional: aumentar sangría de las listas anidadas */
ul ul {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.2em;  /* separa visualmente las sublistas */
}

/* Opcional: elimina el margen inferior del último <li> para no dejar hueco extra */
ul li:last-child {
  margin-bottom: 0;
}




/* 
==========================================================================================================
ESTILOS DE LISTAS DESORDENADAS PERSONALIZADAS
==========================================================================================================
*/

/* Estilo base para todas las listas */
.items ul {
  margin-top: 0.5em;
  margin-bottom: 1em;
  padding-left: 1em;  /* la indentación la controlamos en los li */
  list-style: none;          
  font-size: 1em;            
  line-height: 1.5;   
  font-style: normal; 
}

.items ul li {
  line-height: 1.7;  /* más espacio entre líneas dentro de un mismo item */
}


/* Nivel 1 */
.items ul > li {
  position: relative;
  margin-bottom: 0.75em;
  padding-left: 1.4em;  /* distancia del bullet al texto */
}

.items ul > li::before {
  content: "◉";
  position: absolute;
  left: 0;
  top: 0.7em;  /* centra verticalmente con el texto */
  color: #055071;            
  font-size: 0.7em;  /* bullet más grande */
  line-height: 1;
}


/* Nivel 2 */
.items ul ul {
  padding-left: 0.3em;  /* reduce la sangría global de las sublistas */
}

.items ul ul > li {
  margin-bottom: 0.65em;
  padding-left: 1.2em;  /* misma diferencia de indentación que nivel 1 */
}

.items ul ul > li::before {
  content: "‣";
  position: absolute;
  left: 0;
  top: 0;
  color: #015d85;           
  font-size: 30px;  /* ligeramente más pequeño que nivel 1 */
  line-height: 1;
}


/* Nivel 3 */
.items ul ul ul > li {
  margin-bottom: 0.55em;
  padding-left: 1.2em;  /* misma indentación incremental */
}

.items ul ul ul > li::before {
  content: "▪";
  position: absolute;
  left: 0;
  top: 0.45em;
  color: #006f9e;             
  font-size: 0.9em;
  line-height: 1;
}


/* Nivel 4  */
.items ul ul ul ul > li {
  margin-bottom: 0.5em;
  padding-left: 1.2em;  /* misma diferencia de indentación */
}

.items ul ul ul ul > li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0.45em;
  color: #0081b9;             
  font-size: 0.7em;
  line-height: 1;
}

/* Último elemento de cada lista */
.items ul li:last-child {
  margin-bottom: 0;
}




/* 
==========================================================================================================
ESTILOS DE LISTAS ORDENADAS SIMPLES
==========================================================================================================
*/

/* Estilo de listas ordenadas */
ol > li {
  margin-bottom: 0.7em;  /* mismo espaciado que ul */
  line-height: 1.5;
}

ol ol > li {
  margin-bottom: 0.5em;  /* sublistas ordenadas */
  line-height: 1.4;
}

ol ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.2em;
}

ol li:last-child {
  margin-bottom: 0;
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS DE LA BARRA DE NAVEGACIÓN Y MENÚS DESPLEGABLES
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Barra de navegación: más delgada, fondo oscuro elegante */
.navbar {
  padding: 0.5rem 1.5rem;
  height: 85px;
  background: linear-gradient(135deg, rgba(16,34,53,0.95), rgba(12,36,53,0.95));
  border-bottom: 2px solid #1f2f5b;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: "Nunito", "Quicksand", "Segoe UI Rounded", sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1000;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: none;
  backdrop-filter: blur(8px);  /* efecto glassmorphism */
}

/* Contenedor de los items de la navbar */
.navbar-nav {
  display: flex;
  gap: 15px;  /* separación entre pestañas */
  padding-right: 30px;  /* espacio al borde derecho */
  margin-left: auto;  /* alinea a la derecha */
}

/* Cada item de la navbar */
.navbar-nav .nav-item {
  margin: 0;
  padding: 0;
}

/* Ítems del menú con recuadro leve y efecto moderno */
.navbar .nav-link {
  padding: 0.62rem 0.95rem;
  color: #94c0ec !important;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 12px;
  background-color: rgba(255,255,255,0.02);  /* recuadro leve */
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 1px;  /* espacio entre icono y texto */
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Hover moderno con elevación y gradiente */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background: linear-gradient(135deg, rgba(79,195,247,0.15), rgba(2,136,209,0.18));
  color: #e1f7ff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transform: translateY(-2px);
  border-color: rgba(79,195,247,0.3);
  outline: none;
}

/* Ítem activo con recuadro marcado y efecto de profundidad */
.navbar .nav-link.active {
  background: linear-gradient(135deg, rgba(30,45,62,0.95), rgba(46,66,93,0.95));
  color: #b1d5f9 !important;
  border: 1px solid #5a8eef;
  box-shadow: inset 0 0 6px rgba(79,195,247,0.35);
  transform: translateY(0);
}

/* Icono separado del texto y animado */
.navbar .nav-link i {
  margin-right: 6px;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.navbar .nav-link:hover i {
  transform: translateY(-1px);
}

/* Menús desplegables estilo moderno similar a nav-link */
.dropdown-menu {
  background-color: rgba(22,35,47,0.95);  /* fondo semi-transparente */
  border: 1px solid rgba(255,255,255,0.08);  /* borde sutil */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);  /* sombra */
  padding: 0.5rem 0;
  margin-top: 0.7rem;
  min-width: 200px;
  transition: all 0.3s ease;
  transform-origin: top;
  backdrop-filter: blur(8px);
}

/* Ítems dentro del menú desplegable */
.dropdown-item {
  color: #94c0ec;
  font-size: 0.9rem;  /* más pequeño que los nav-link */
  font-weight: 600;
  font-family: "Nunito", "Quicksand", "Segoe UI Rounded", sans-serif;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.9rem;  /* menos alto que antes */
  border-radius: 10px;  /* bordes suaves como antes */
  display: flex;
  align-items: center;
  gap: 0px;
  background-color: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  line-height: 1.3;
}

/* Hover en subitems parecido a nav-link */
.dropdown-item:hover,
.dropdown-item:focus {
  background: linear-gradient(135deg, rgba(79,195,247,0.15), rgba(2,136,209,0.18));
  color: #e1f7ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer;
  outline: none;
}

/* Iconos en subitems */
.dropdown-item i {
  margin-right: 6px;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.dropdown-item:hover i {
  transform: translateY(-1px);
}

/* Contenedor logo + texto */
.navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  padding: 0;
  overflow: visible;
}

/* Logo con animación hover */
.navbar .brand-logo {
  height: 44px;
  width: auto;
  border-radius: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.navbar .brand-logo:hover {
  transform: scale(1.15);
}

/* Texto tipo logo con gradiente y animación */
.navbar .brand-text {
  font-weight: 800;
  font-size: 1.77rem;
  background: linear-gradient(135deg, #4fc3f7, #0288d1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.05em;
  font-family: "Montserrat", "Nunito", "Quicksand", sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.25s ease, filter 0.25s ease;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
}

.navbar .brand-text:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.1);
}

/* Sobrescribir reglas globales para las listas dentro de la navbar */
.navbar .navbar-nav ul,
.navbar .navbar-nav li,
.navbar .dropdown-menu ul,
.navbar .dropdown-menu li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  list-style: none;
}

/* Asegurarse de que los dropdown-items no se expandan demasiado */
.dropdown-menu .dropdown-item {
  margin: 0 !important;
  line-height: 1.3 !important;  /* compacto */
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA IMÁGENES Y VIDEOS DE PORTADA
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS PARA IMAGEN DE PORTADA
==========================================================================================================
*/

/* Estilos para la imagen de portada */
.portada-imagen {
  width: calc(100vw - 2rem);  /* ancho completo menos 2rem a cada lado */
  margin-left: calc(-1 * (100vw - 100%) / 2 + 1rem);
  margin-right: calc(-1 * (100vw - 100%) / 2 + 1rem);
  margin-top: 1.85rem;
  margin-bottom: 1.2rem;
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  aspect-ratio: 7952 / 1500;
  background-color: #f4f4f4;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.portada-imagen:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.portada-imagen img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  transition: filter 0.5s ease;
  filter: brightness(1) contrast(1.02);
  z-index: 1;
}

.portada-imagen:hover img {
  filter: brightness(1.08) contrast(1.05);
}

/* Overlay con brillo sutil */
.portada-imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 2;
}

.portada-imagen:hover::after {
  opacity: 1;
}




/* 
==========================================================================================================
ESTILOS PARA VIDEO DE PORTADA
==========================================================================================================
*/

/* Estilos para el video de portada */
.portada-video {
  width: calc(100vw - 2rem);
  margin-left: calc(-1 * (100vw - 100%) / 2 + 1rem);
  margin-right: calc(-1 * (100vw - 100%) / 2 + 1rem);
  margin-top: 1.85rem;
  margin-bottom: 1.2rem;
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  aspect-ratio: 7952 / 1500; 
  background-color: #f4f4f4;  /* Color de fondo mientras carga */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.portada-video:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* Estilos específicos para la etiqueta <video> */
.portada-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center center;
  border-radius: 0;
  transition: filter 0.5s ease;
  filter: brightness(1) contrast(1.02);
  z-index: 1;
}

/* Efecto hover sobre el video */
.portada-video:hover video {
  filter: brightness(1.08) contrast(1.05);
}

/* Overlay (brillo sutil) */
.portada-video::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;  /* Asegurar que coincida con el padre */
  background: radial-gradient(circle at center, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 2;
}

.portada-video:hover::after {
  opacity: 1;
}



/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA LOS TÍTULOS DEL INFORME (PRINCIPAL, PESTAÑAS, SECCIONES Y SUBSECCIONES)
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
OCULTAR TÍTULO H1
==========================================================================================================
*/

/* Ocultar el título h1 generado automáticamente */
h1.title {
  display: none;
  margin: 0;
  padding: 0;
}




/* 
==========================================================================================================
ESTILOS PARA EL TÍTULO PRINCIPAL DEL INFORME
==========================================================================================================
*/

/* Caja de título principal con colores oscuros y elegantes */
.informe-titulo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 2rem 0.5rem 2rem;
  min-height: 280px;
  background: linear-gradient(135deg, #0a3fa0 0%, #0d2a75 100%);
  border-radius: 0px 0px 16px 16px;
  box-shadow:
    0 8px 25px rgba(0,0,0,0.25),
    inset 0 2px 10px rgba(255,255,255,0.03);
  width: 100vw;
  margin-left: calc(-1 * (100vw - 100%) / 2);
  margin-top: -2.9rem;
  margin-bottom: -0.9rem;
  color: #f5f7fcf5;  /* texto más suave, no blanco puro */
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.5s ease;
}

/* Animación de brillo radial sutil */
.informe-titulo::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 80%);
  animation: shimmer 8s linear infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% { transform: rotate(0deg) translateX(-50%); }
  100% { transform: rotate(360deg) translateX(50%); }
}

/* Hover elegante y discreto */
.informe-titulo:hover {
  transform: scale(1.02);
  box-shadow:
    0 14px 35px rgba(0,0,0,0.3),
    inset 0 3px 12px rgba(255,255,255,0.05);
  background: linear-gradient(135deg, #1150d1 0%, #0d2a75 100%);
}

/* Título principal */
.informe-titulo h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0 0 0.6rem 0;
  letter-spacing: -0.6px;
  color: #e6ebf5;
}

/* Línea decorativa más fina y elegante */
.informe-titulo h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 0.6rem;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(180,190,220,0.45),
    rgba(255,255,255,0)
  );
}

/* Subtítulo */
.informe-titulo h2 {
  font-size: 1.9rem;
  font-weight: 500;
  margin: 0.8rem 0 0.3rem 0;
  color: #c9d2e6;
  letter-spacing: -0.2px;
}

/* Unidad / firma institucional */
.informe-titulo p {
  font-size: 1.05rem;
  margin: 0;
  color: #9ea8c4;
  line-height: 1.6;
}

/* Efecto extra al hover sobre títulos */
.informe-titulo:hover h1 {
  text-shadow:
    2px 2px 5px rgba(0,0,0,0.55),
    0 0 10px rgba(255,255,255,0.12);
}

.informe-titulo:hover h2 {
  text-shadow:
    1px 1px 3px rgba(0,0,0,0.3),
    0 0 6px rgba(255,255,255,0.08);
}




/* 
==========================================================================================================
ESTILOS PARA EL TÍTULO DE CADA PESTAÑA CUANDO NO ES EL ÚLTIMO TÍTULO
==========================================================================================================
*/

/* Estilos para la caja del titulo de cada pestaña*/
.informe-titulo-tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 2.5rem;
  background: linear-gradient(135deg, #1c3a9c, #233974);
  border-radius: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  width: 100vw;  /* toda la ventana */
  margin-left: calc(-1 * (100vw - 100%) / 2);  /* corrige el scroll horizontal */
  margin-top: -3rem;  /* ajusta la posición superior */
  color: #e6e9f0;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.informe-titulo-tab:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, #2a52d1, #1f3e9a);
}

.informe-titulo-tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: skewX(-25deg);
  opacity: 0;
  transition: left 0.6s ease, opacity 0.6s ease;
  pointer-events: none;
}

.informe-titulo-tab:hover::before {
  left: 120%;
  opacity: 1;
}

.informe-titulo-tab h1 {
  font-size: 2.1rem;
  font-weight: 600;
  margin: 1rem auto 1rem auto;
  letter-spacing: -0.6px;
  border-bottom: 1px solid rgb(230, 233, 240);
  padding-top: 1.1rem;
  padding-bottom: 0.6rem;
  width: 100%;
  max-width: 240px;
  color:#ececec;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.5),
    0 0 8px rgba(255,255,255,0.15);
}

.informe-titulo-tab h2 {
  font-size: 1.7rem;
  font-weight: 400;
  margin: 0;
  color: #d6dbeb;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 4px rgba(255,255,255,0.08);
  letter-spacing: -0.3px;
  max-width: 800px;
  margin-top: 0.5rem;
}

.informe-titulo-tab p {
  font-size: 0.85rem;
  margin-top: 0.8rem;
  color: #b0b8ce;
  max-width: 800px;
}

/* Opcional: resplandor extra al hacer hover sobre títulos */
.informe-titulo-tab:hover h1 {
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(255,255,255,0.25);
}

.informe-titulo-tab:hover h2 {
  text-shadow:
    1px 1px 3px rgba(0,0,0,0.3),
    0 0 6px rgba(255,255,255,0.12);
}




/* 
==========================================================================================================
ESTILOS PARA EL TÍTULO DE CADA PESTAÑA CUANDO ES EL ÚLTIMO TÍTULO
==========================================================================================================
*/

/* Estilos para la caja del titulo de cada pestaña (cuando solo se usa únicamente este título)*/
.informe-titulo-tab-unique {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 2.5rem;
  background: linear-gradient(135deg, #14308b, #2c48b6, #133086);
  border-radius: 0px 0px 14px 14px;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.3), 
    inset 0 2px 8px rgba(255, 255, 255, 0.05);
  width: 100vw;
  margin-left: calc(-1 * (100vw - 100%) / 2);
  margin-top: -3rem;
  color: #e6e9f0;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.5s ease;
}

/* Animación de brillo diagonal */
.informe-titulo-tab-unique::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.03) 0%, 
    rgba(255, 255, 255, 0.07) 50%, 
    rgba(255, 255, 255, 0.03) 100%
  );
  transform: rotate(-25deg);
  pointer-events: none;
  animation: shine 6s linear infinite;
}

/* Hover: leve escalado y sombra más viva */
.informe-titulo-tab-unique:hover {
  transform: scale(1.03);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.35),
    inset 0 2px 10px rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, #1b3eb2, #3859c3, #0d2b82);
}

/* Título principal con relieve 3D más marcado */
.informe-titulo-tab-unique h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 1rem auto 1rem auto;
  letter-spacing: -0.5px;
  border-bottom: 2px solid rgba(236, 236, 236, 0.3);
  padding-top: 1.1rem;
  padding-bottom: 0.6rem;
  width: 100%;
  max-width: 260px;
  color: #e0e3efeb;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.5),
    0 0 8px rgba(255,255,255,0.15);
  transition: text-shadow 0.4s ease;
}

/* Subtítulo con relieve sutil y ligero resplandor */
.informe-titulo-tab-unique h2 {
  font-size: 1.85rem;
  font-weight: 500;
  margin: 0;
  color: #d6dbeb;
  letter-spacing: -0.3px;
  max-width: 800px;
  margin-top: 0.6rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 4px rgba(255,255,255,0.08);
  transition: text-shadow 0.4s ease;
}

/* Párrafo descriptivo */
.informe-titulo-tab-unique p {
  font-size: 0.9rem;
  margin-top: 0.9rem;
  color: #b0b8ce;
  max-width: 800px;
  line-height: 1.5;
}

/* Opcional: resplandor extra al hacer hover sobre títulos */
.informe-titulo-tab-unique:hover h1 {
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(255,255,255,0.25);
}

.informe-titulo-tab-unique:hover h2 {
  text-shadow:
    1px 1px 3px rgba(0,0,0,0.3),
    0 0 6px rgba(255,255,255,0.12);
}




/* 
==========================================================================================================
ESTILOS PARA EL TÍTULO DE CADA SECCIÓN CUANDO ES EL ÚLTIMO TÍTULO
==========================================================================================================
*/

/* Estilos para la caja del titulo de cada sección*/
.informe-titulo-seccion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #3458c2, #3b69e0);
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
  margin-bottom: 0rem;
  width: calc(100vw - 0rem);
  margin-left: calc(-1 * (100vw - 100%) / 2 + 0rem);
  margin-right: calc(-1 * (100vw - 100%) / 2 + 0rem);
  color: #e6e9f0;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.informe-titulo-seccion:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #4b7cee, #547fff);
}

.informe-titulo-seccion::before {
  content: "";
  position: absolute;
  top: 0;
  left: -65%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: skewX(-25deg);
  opacity: 0;
  transition: left 0.6s ease, opacity 0.6s ease;
  pointer-events: none;
}

.informe-titulo-seccion:hover::before {
  left: 120%;
  opacity: 1;
}

.informe-titulo-seccion h1 {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1rem auto 1rem auto;
  letter-spacing: -0.6px;
  border-bottom: 1px solid rgb(230, 233, 240);
  padding-bottom: 0.6rem;
  width: 100%;
  max-width: 220px;
  color:#ececec;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.5),
    0 0 8px rgba(255,255,255,0.15);
}

.informe-titulo-seccion h2 {
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0;
  color: #d6dbeb;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 4px rgba(255,255,255,0.08);
  letter-spacing: -0.3px;
  max-width: 800px;
  margin-top: 0.5rem;
}

.informe-titulo-seccion p {
  font-size: 0.85rem;
  margin-top: 0.8rem;
  color: #b0b8ce;
  max-width: 800px;
}

/* Opcional: resplandor extra al hacer hover sobre títulos */
.informe-titulo-seccion:hover h1 {
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(255,255,255,0.25);
}

.informe-titulo-seccion:hover h2 {
  text-shadow:
    1px 1px 3px rgba(0,0,0,0.3),
    0 0 6px rgba(255,255,255,0.12);
}




/* 
==========================================================================================================
ESTILOS PARA EL TÍTULO DE CADA SECCIÓN CUANDO NO ES EL ÚLTIMO TÍTULO
==========================================================================================================
*/

/* Estilos para la caja del titulo de cada sección (única cuando va al final)*/
.informe-titulo-seccion-unique {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #3458c2, #3b69e0);
  border-radius: 0px 0px 14px 14px;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.3), 
    inset 0 2px 8px rgba(255, 255, 255, 0.05);
  margin-top: 0;
  margin-bottom: 0rem;
  width: calc(100vw - 0rem);
  margin-left: calc(-1 * (100vw - 100%) / 2 + 0rem);
  margin-right: calc(-1 * (100vw - 100%) / 2 + 0rem);
  color: #e6e9f0;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.informe-titulo-seccion-unique:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #4b7cee, #547fff);
}

.informe-titulo-seccion-unique::before {
  content: "";
  position: absolute;
  top: 0;
  left: -65%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: skewX(-25deg);
  opacity: 0;
  transition: left 0.6s ease, opacity 0.6s ease;
  pointer-events: none;
}

.informe-titulo-seccion-unique:hover::before {
  left: 120%;
  opacity: 1;
}

.informe-titulo-seccion-unique h1 {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1rem auto 1rem auto;
  letter-spacing: -0.6px;
  border-bottom: 1px solid rgb(230, 233, 240);
  padding-bottom: 0.6rem;
  width: 100%;
  max-width: 220px;
  color:#ececec;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.5),
    0 0 8px rgba(255,255,255,0.15);
}

.informe-titulo-seccion-unique h2 {
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0;
  color: #d6dbeb;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 4px rgba(255,255,255,0.08);
  letter-spacing: -0.3px;
  max-width: 900px;
  margin-top: 0.5rem;
}

.informe-titulo-seccion-unique p {
  font-size: 0.85rem;
  margin-top: 0.8rem;
  color: #b0b8ce;
  max-width: 800px;
}

/* Opcional: resplandor extra al hacer hover sobre títulos */
.informe-titulo-seccion-unique:hover h1 {
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(255,255,255,0.25);
}

.informe-titulo-seccion-unique:hover h2 {
  text-shadow:
    1px 1px 3px rgba(0,0,0,0.3),
    0 0 6px rgba(255,255,255,0.12);
}




/* 
==========================================================================================================
ESTILOS PARA EL TÍTULO DE CADA SUBSECCIÓN CUANDO ES EL ÚLTIMO TÍTULO
==========================================================================================================
*/

/* Estilos para la caja del titulo de cada subsección*/
.informe-titulo-subseccion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, #678fff, #7aa3ff);
  border-radius: 0px;
  box-shadow: none;
  margin-top: 0rem;
  margin-bottom: 0rem;
  width: calc(100vw - 0rem);
  margin-left: calc(-1 * (100vw - 100%) / 2 + 0rem);
  margin-right: calc(-1 * (100vw - 100%) / 2 + 0rem);
  color: #edf2ff;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.informe-titulo-subseccion:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #84b0ff, #9ac6ff);
  cursor: default;
}

.informe-titulo-subseccion::before {
  content: "";
  position: absolute;
  top: 0;
  left: -65%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transform: skewX(-25deg);
  opacity: 0;
  transition: left 0.6s ease, opacity 0.6s ease;
  pointer-events: none;
}

.informe-titulo-subseccion:hover::before {
  left: 120%;
  opacity: 1;
}

.informe-titulo-subseccion h1 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0.8rem 0 0.6rem 0;
  letter-spacing: -0.4px;
  border-bottom: 1px solid rgba(237, 242, 255, 0.6);
  padding-bottom: 0.3rem;
  width: 100%;
  max-width: 220px;
  color: #f0f6ff;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.5),
    0 0 8px rgba(255,255,255,0.15);
}

.informe-titulo-subseccion h2 {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  color: #d1d9f7;
  letter-spacing: -0.2px;
  max-width: 600px;
  margin-top: 0.4rem;
}

.informe-titulo-subseccion p {
  font-size: 0.75rem;
  margin-top: 0.5rem;
  color: #bec7ed;
  max-width: 600px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 4px rgba(255,255,255,0.08);
}

/* Opcional: resplandor extra al hacer hover sobre títulos */
.informe-titulo-subseccion:hover h1 {
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(255,255,255,0.25);
}

.informe-titulo-subseccion:hover h2 {
  text-shadow:
    1px 1px 3px rgba(0,0,0,0.3),
    0 0 6px rgba(255,255,255,0.12);
}




/* 
==========================================================================================================
ESTILOS PARA EL TÍTULO DE CADA SUBSECCIÓN CUANDO NO ES EL ÚLTIMO TÍTULO
==========================================================================================================
*/

/* Estilos para la caja del titulo de cada subsección (única, al final)*/
.informe-titulo-subseccion-unique {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, #678fff, #7aa3ff);
  border-radius: 0px 0px 14px 14px;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.3), 
    inset 0 2px 8px rgba(255, 255, 255, 0.05);
  box-shadow: none;
  margin-top: 0rem;
  margin-bottom: 0rem;
  width: calc(100vw - 0rem);
  margin-left: calc(-1 * (100vw - 100%) / 2 + 0rem);
  margin-right: calc(-1 * (100vw - 100%) / 2 + 0rem);
  color: #edf2ff;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.informe-titulo-subseccion-unique:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #84b0ff, #9ac6ff);
  cursor: default;
}

.informe-titulo-subseccion-unique::before {
  content: "";
  position: absolute;
  top: 0;
  left: -65%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transform: skewX(-25deg);
  opacity: 0;
  transition: left 0.6s ease, opacity 0.6s ease;
  pointer-events: none;
}

.informe-titulo-subseccion-unique:hover::before {
  left: 120%;
  opacity: 1;
}

.informe-titulo-subseccion-unique h1 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0.8rem 0 0.6rem 0;
  letter-spacing: -0.4px;
  border-bottom: 1px solid rgba(237, 242, 255, 0.6);
  padding-bottom: 0.3rem;
  width: 100%;
  max-width: 220px;
  color: #f0f6ff;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.5),
    0 0 8px rgba(255,255,255,0.15);
}

.informe-titulo-subseccion-unique h2 {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  color: #d1d9f7;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 4px rgba(255,255,255,0.08);
  letter-spacing: -0.2px;
  max-width: 600px;
  margin-top: 0.4rem;
}

.informe-titulo-subseccion p {
  font-size: 0.75rem;
  margin-top: 0.5rem;
  color: #bec7ed;
  max-width: 600px;
}

/* Opcional: resplandor extra al hacer hover sobre títulos */
.informe-titulo-subseccion-unique:hover h1 {
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(255,255,255,0.25);
}

.informe-titulo-subseccion-unique:hover h2 {
  text-shadow:
    1px 1px 3px rgba(0,0,0,0.3),
    0 0 6px rgba(255,255,255,0.12);
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA RESUMEN Y CONTENIDO INICIAL DEL INFORME
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS PARA EL RESUMEN INICIAL DEL INFORME
==========================================================================================================
*/

/* Caja resumen: fondo claro, bordes azules, padding y sombra suave */
.informe-resumen {
  background: #f5f9fc;
  border-radius: 12px;
  border-top: 4px solid #2e648e;
  padding: 1.5rem 2rem;
  width: calc(100vw - 4rem); 
  margin-left: calc(-1 * (100vw - 100%) / 2 + 2rem);
  margin-right: calc(-1 * (100vw - 100%) / 2 + 2rem);
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  font-size: 0.95rem;
  color: #2b3c5a;
  line-height: 1.7;
  font-style: italic;
  position: relative;
  transition: 
    box-shadow 0.3s ease,
    border-top 0.3s ease,
    background-color 0.3s ease,
    filter 0.3s ease;
}

/* Efectos al hacer hover */
.informe-resumen:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  border-top: 4px solid #123651;  /* azul más intenso */
  background-color: #f0f8ff;  /* fondo más luminoso */
  filter: brightness(1.05);  /* realce global */
}

/* Glow sutil azul decorativo */
.informe-resumen:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 0 8px 2px rgba(46, 100, 142, 0.15);
  pointer-events: none;
  z-index: 0;
}

.informe-resumen p {
  margin: 1rem 0;  /* más espacio arriba y abajo */
}

.informe-resumen ul {
  margin-top: 1em;  /* espacio encima del ul */
  margin-bottom: 1em;  /* espacio debajo del ul */
}

.informe-resumen li {
  margin-bottom: 0.5em;  /* espacio entre cada item de la lista */
}

.informe-resumen strong {
  color: #1d4e89;
}

.informe-resumen code {
  background: #c9e2fa;
  color: #0b2179;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'Courier New', Courier, monospace;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-style: normal;
  font-weight: 550;
}


/* Código en línea dentro de strong */
.informe-resumen strong code {
  background-color: #e7f1f4 !important;
  color: #1d4e89 !important;
  font-family: monospace, 'Fira Code', 'Courier New';
  font-size: 0.85em;
  padding: 3px 6px !important;
  border-radius: 5px !important;
  font-weight: 500;
  font-style: normal;
  white-space: nowrap;
  transition: background-color 2s ease, box-shadow 5s ease, color 5s ease;
  cursor: default;
  word-break: break-all;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Hover con animación de brillo para strong */
.informe-resumen strong code:hover {
  background-color: #d0e7f0 !important;
  color: #114483 !important;
  border-radius: 5px !important;
  
  /* Animación de brillo */
  animation: brillo 1.5s infinite alternate;
  
  /* Suave efecto de luz en el fondo */
  background-image: linear-gradient(
    120deg,
    #d0e7f0,
    #c7e0ea 50%,
    #d7edf5
  );
  background-size: 200% 200%;
  transition: background-position 5s ease, color 5s ease;
}


/* Titulo dentro del resumen */
.informe-resumen h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.6em;
  font-weight: bold;
  color: #182f6e;
  letter-spacing: -0.5px;
  font-style: normal;
}

.informe-resumen::before {
  content: "🧬";
  position: absolute;
  top: -14px;
  left: 10px;
  font-size: 1.6rem;
}




/* 
==========================================================================================================
ESTILOS PARA EL CONTENIDO INICIAL DEL INFORME
==========================================================================================================
*/

/* Estilo de contenido general dentro del informe */
.informe-contenido {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem auto;
  max-width: 90%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  line-height: 1.8;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}




/* 
==========================================================================================================
ESTILOS PARA LA FLECHA HACIA ABAJO ANTES DEL RESUMEN
==========================================================================================================
*/

/* Flecha hacia abajo moderna */
.flecha-abajo {
  text-align: center;
  font-size: 2.2rem;  /* tamaño ligeramente mayor */
  color: #1468ad;  /* azul vivo */
  margin: -0.5px 0px -14px 0px;
  animation: bounce 1.5s infinite ease-in-out;  /* rebote suave */
  transition: transform 0.3s ease, color 0.3s ease;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);  /* profundidad sutil */
}

/* Animación de rebote suave */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Hover elegante y natural */
.flecha-abajo:hover {
  color: #1f61e4;  /* azul más brillante */
  transform: scale(1.25) translateY(2px);  /* aumenta tamaño suavemente */
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA LAS IMÁGENES DENTRO DEL INFORME
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Contenedor centrado y responsivo */
.box-images {
  display: flex;
  justify-content: center;
  margin: 20px 0 25px 0;
}

/* Imagen elegante con borde profesional */
.box-images img {
  max-width: 85%;
  width: 750px;
  height: auto;
  border-radius: 18px; 
  border: 2px solid #2b6ca3;
  box-shadow: 0 4px 10px rgba(13, 42, 117, 0.3);  /* azul oscuro elegante */
  transition: transform 0.4s ease, 
              box-shadow 0.4s ease, 
              filter 0.4s ease, 
              border-color 0.4s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Efecto reflejo */
.box-images img::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(208, 231, 240, 0.0) 0%,
    rgba(208, 231, 240, 0.6) 50%,
    rgba(208, 231, 240, 0.0) 100%
  );
  transform: rotate(25deg);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Hover más sutil y brillante */
.box-images img:hover {
  transform: scale(1.02);  /* ligero zoom */
  box-shadow: 0 8px 18px rgba(42, 108, 163, 0.45);  /* azul medio */
  filter: brightness(1.05) contrast(1.03);
  border-color: #0a3fa0;  /* azul más vivo */
}

/* Activar reflejo */
.box-images img:hover::after {
  opacity: 1;
  animation: shine 1.2s forwards;
}

/* Animación del reflejo */
@keyframes shine {
  from {
    transform: translateX(-100%) rotate(25deg);
  }
  to {
    transform: translateX(100%) rotate(25deg);
  }
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA LOS TÍTULOS DE SECCIONES, SUBSECCIONES Y DEMÁS ENCABEZADOS DENTRO DEL INFORME
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS PARA LAS TABLAS DE CONTENIDOS
==========================================================================================================
*/

/* Título para la tabla de contenidos*/
.titulo-toc {
  font-size: 33px;
  color: #013846;
  margin-top: 60px; 
  margin-bottom: 0; 
  letter-spacing: -0.30px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 2px;
  line-height: 1;     
  text-transform: uppercase;
  font-weight: bold;
}




/* 
==========================================================================================================
ESTILOS PARA LOS TÍTULOS DE LAS SECCIONES, SUBSECCIONES Y DEMÁS ENCABEZADOS
==========================================================================================================
*/

/* Título principal grande */
.titulo1 {
  font-size: 32px;
  color: #004151;
  margin-top: 60px;
  margin-bottom: 0;
  letter-spacing: -0.35px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 1px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: bold;
}

/* Segundo nivel de título */
.titulo2 {
  font-size: 28px; 
  color: #004151;
  margin-top: 45px;
  margin-bottom: 0;
  letter-spacing: -0.25px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 1px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: bold;
}

/* Tercer nivel de título */
.titulo3 {
  font-size: 25px;
  color: #004151;
  margin-top: 38px;
  margin-bottom: 0;
  letter-spacing: -0.15px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 1px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: bold;
}

/* Cuarto nivel de título */
.titulo4 {
  font-size: 23px;
  color: #004151;
  margin-top: 37px;
  margin-bottom: 0;
  letter-spacing: -0.13px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 1px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: bold;
}

/* Cuarto nivel de título */
.titulo5 {
  font-size: 21px;
  color: #004151;
  margin-top: 36px;
  margin-bottom: 0;
  letter-spacing: -0.11px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 1px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: bold;
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA LOS ENLACES NORMALES
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

a.normalink {
  color: #1e49bd;  /* Azul elegante */
  text-decoration: none;             
  font-style: italic;
  font-weight: 600;
  background-color: #f4f6ff;  /* Fondo suave */
  padding: 2px 4px;  /* Un pequeño respiro */
  border-radius: 4px;
  transition: 
    color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

a.normalink:hover {
  color: #1742c4;  /* Azul más intenso */
  background-color: #e0e7ff;  /* Fondo un poco más visible */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);  /* sombra sutil */
  transform: scale(1.03);  /* pequeño zoom */
}

/* Estado activo (al hacer clic) */
a.normalink:active {
  transform: scale(0.98);  /* ligera compresión al click */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Estado enfocado (para accesibilidad con teclado) */
a.normalink:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 78, 216, 0.4);  /* halo accesible */
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA LA TABLA DE CONTENIDOS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Estilo general del contenedor de la tabla de contenidos */
.toc {
  background: linear-gradient(135deg, #1d2733, #0f1a24);  /* Azul oscuro */
  padding: 20px 30px;
  width: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: -0.1px;
  font-size: 15px;
  line-height: 1.6;
  border-left: 5px solid #2e8bc0;  /* Azul más vibrante */
  border-radius: 0 10px 10px 0;
  color: #dbe9fe;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.25);
  margin: 30px 0;
  box-sizing: border-box;
  max-height: 500px;
  overflow-y: auto;
}

/* Scrollbar personalizada */
/* Ancho de la barra */
.toc::-webkit-scrollbar {
  width: 10px;
}

/* Fondo del track (canal) */
.toc::-webkit-scrollbar-track {
  background: rgba(46, 139, 192, 0.15);
  border-radius: 10px;
}

/* Color de la barra (thumb) */
.toc::-webkit-scrollbar-thumb {
  background: #2e8bc0;
  border-radius: 10px;
  transition: background 0.3s ease;
}

/* Hover de la barra */
.toc::-webkit-scrollbar-thumb:hover {
  background: #59c2ff;
}

/* Opcional: para Firefox */
.toc {
  scrollbar-width: thin;
  scrollbar-color: #2e8bc0 rgba(46, 139, 192, 0.15);
}


/* Estilo básico de los enlaces */
.toc a {
  display: block;
  color: #dbe9fe;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px dashed #355c7d;
  transition: all 0.2s ease-in-out;
}

/* Estilo al pasar el ratón sobre los enlaces */
.toc a:hover {
  padding-left: 10px;
  color: #59c2ff;
  background-color: #2a3f52;
  transform: scale(1.005);
  border-radius: 0 10px 10px 0;
}

.toc a::before {
  content: "➤ ";
  margin-right: 6px;
  color: #2e8bc0;
}


/* Estilo para las palabras en negrita */
.toc strong {
  color: #c5d4e8 !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: -0.1px;
  font-size: 15px !important;
  font-weight: 700 !important;
  transition: inherit !important;
}


/* Estilo para code */
.toc code {
  color: #dfebfd !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: 550 !important;
  letter-spacing: -0.7px;
  font-size: 15px !important;
  padding: 0px 0px !important;
  border-radius: 4px !important;
  border: none !important;
  background: transparent !important;
  display: inline-block !important;
  transition: inherit !important;
}


/* Hover en los enlaces afecta strong y code automáticamente */
.toc a:hover strong {
  color: #59c2ff !important;
}

.toc a:hover code {
  color: #59c2ff !important;
  background-color: transparent !important;
}


/* Elimina viñetas y márgenes de la lista principal */
.toc ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

/* Márgenes verticales entre elementos de la lista */
.toc li {
  margin-bottom: 8px;
}

/* Márgenes alternativos para elementos dentro de listas anidadas */
.toc ul li {
  margin: 6px 0;
}

/* Indentación para subniveles dentro de la tabla de contenidos */
.toc ul ul {
  padding-left: 20px;  /* Indenta los subniveles */
  margin-top: 4px;  /* Añade algo de separación arriba */
}

/* Indentación específica por nivel */
.toc li.level-1 {
  padding-left: 0em;
}
.toc li.level-2 {
  padding-left: 1.5em;
}
.toc li.level-3 {
  padding-left: 3em;
}
.toc li.level-4 {
  padding-left: 4.5em;
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA BLOQUES DE CÓDIGO Y CÓDIGO EN LÍNEA
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS PARA BLOQUES DE CÓDIGO (PRE)
==========================================================================================================
*/

/* Bloques de código */
pre.sourceCode {
  background-color: #102334;
  color: #f1f1f1;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 13.5px;
  line-height: 1.6;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 1.2rem 0;
  overflow-x: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-left: 4px solid #3a6ea5;
  transition: background-color 0.3s ease;
}

/* code dentro de pre: sin repeticiones de fondo ni padding extra */
pre.sourceCode code {
  background: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font-size: inherit;
}

/* hover sutil */
pre.sourceCode:hover {
  background-color: #1a2e47;
}




/* 
==========================================================================================================
ESTILOS PARA CÓDIGO EN LÍNEA
==========================================================================================================
*/

/* Código en línea dentro de párrafos, listas, tablas, informes y em */
p code,
li code,
td code,
.informe-resumen code,
em code {
  background-color: #e7f1f4 !important;
  color: #024057 !important;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.92em;
  padding: 3px 6px !important;
  border-radius: 5px !important;
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
  transition: background-color 2s ease, box-shadow 5s ease, color 5s ease;
  cursor: default;
  word-break: break-all;
}

/* Animación de brillo */
@keyframes brillo {
  0% {
    box-shadow: 0 0 2px 1px rgba(165, 210, 225, 0.4);
  }
  50% {
    box-shadow: 0 0 4px 2px rgba(130, 190, 205, 0.5);
  }
  100% {
    box-shadow: 0 0 2px 1px rgba(165, 210, 225, 0.4);
  }
}

/* Hover con animación de brillo */
p code:hover,
li code:hover,
td code:hover,
.informe-resumen code:hover,
em code:hover {
  background-color: #d0e7f0 !important;
  color: #012831 !important;
  border-radius: 5px !important;
  
  /* Animación de brillo */
  animation: brillo 1.5s infinite alternate;
  
  /* Suave efecto de luz en el fondo */
  background-image: linear-gradient(
    120deg,
    #d0e7f0,
    #c7e0ea 50%,
    #d7edf5
  );
  background-size: 200% 200%;
  transition: background-position 5s ease, color 5s ease;
}


/* Código en línea dentro de strong */
strong code {
  background-color: #e7f1f4 !important;
  color: #1d4e89 !important;
  font-family: monospace, 'Fira Code', 'Courier New';
  font-size: 0.85em;
  padding: 3px 6px !important;
  border-radius: 5px !important;
  font-weight: 500;
  font-style: normal;
  white-space: nowrap;
  transition: background-color 2s ease, box-shadow 5s ease, color 5s ease;
  cursor: default;
  word-break: break-all;
}

/* Hover con animación de brillo para strong */
strong code:hover {
  background-color: #d0e7f0 !important;
  color: #114483 !important;
  border-radius: 5px !important;
  
  /* Animación de brillo */
  animation: brillo 1.5s infinite alternate;
  
  /* Suave efecto de luz en el fondo */
  background-image: linear-gradient(
    120deg,
    #d0e7f0,
    #c7e0ea 50%,
    #d7edf5
  );
  background-size: 200% 200%;
  transition: background-position 5s ease, color 5s ease;
}




/* 
==========================================================================================================
ESTILOS PARA BLOQUES DE CÓDIGO (OUTPUT)
==========================================================================================================
*/

/* Salída del código */
div.cell-output,
pre.cell-output {
  background-color: #f5fbff;
  color: #1e3d59;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid #c0d7e7;
  border-left: 4px solid #2b6ca3;
  padding: 12px 16px;
  margin: 1.2rem 0.4rem;
  white-space: pre-wrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Limpiar cualquier estilo de DIV exterior */
div.sourceCode {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA LAS TARJETAS DE NAVEGACIÓN
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Contenedor de tarjetas */
.navigation-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin: 20px 0;
  padding: 0 10px;
}

/* Tarjeta individual */
.navigation-card {
  flex: 0 1 300px;  /* ancho fijo más uniforme */
  min-height: 160px;
  max-width: 320px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 1rem;
  cursor: pointer;
  background-color: #fff;
  text-transform: uppercase;
}

/* Hover de tarjeta + icono y texto */
.navigation-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 16px 32px rgba(0,0,0,0.25);
  filter: brightness(1.05);
}

.navigation-card:hover i {
  transform: scale(1.3) rotate(-5deg);
  transition: transform 0.3s ease;
}

.navigation-card:hover p {
  color: #000; 
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

/* Icono */
.navigation-card i {
  font-size: 3rem;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

/* Texto */
.navigation-card p {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.5px;
  color: #333;
  transition: all 0.3s ease;
}

/* Colores de fondo + borde superior */
.navigation-card.blue {
  background: linear-gradient(145deg, #e0ebff, #c2d1ff);  /* azul suave degradado */
  border-top: 4px solid #004080;  /* azul intenso */
  color: #004080;
}

.navigation-card.orange {
  background: linear-gradient(145deg, #fff4e0, #ffe0b3);  /* naranja suave degradado */
  border-top: 4px solid #cc6600;  /* naranja intenso */
  color: #cc6600;
}

.navigation-card.green {
  background: linear-gradient(145deg, #e6f9f0, #b3f0d6);  /* verde suave degradado */
  border-top: 4px solid #006644;  /* verde intenso */
  color: #006644;
}

.navigation-card.purple {
  background: linear-gradient(145deg, #f0e6ff, #d1b3ff);  /* púrpura suave degradado */
  border-top: 4px solid #660099;  /* púrpura intenso */
  color: #660099;
}

/* Hover ajustado para mantener contraste */
.navigation-card:hover {
  filter: brightness(1.08);
}

/* Responsive */
@media (max-width: 1000px) {
  .navigation-card { flex: 0 1 45%; max-width: 45%; }
}
@media (max-width: 600px) {
  .navigation-card { flex: 0 1 90%; max-width: 90%; }
}

.nav-label-link {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  padding: 0.12rem 0.28rem;
  border-radius: 6px;
}
.nav-label-link:hover {
  text-decoration: none;
  font-weight: 800;
  color: #000c27;
}

/* Asegura que icono y p tengan buen espaciado */
.navigation-card i {
  margin-bottom: 0.55rem;
  transition: transform .22s ease; 
}

.navigation-card p {
  margin: 0; 
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA LAS TARJETAS DE CONTACTO
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Contenedor de tarjetas de contacto */
.contact-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;  /* Espacio entre tarjetas */
  margin-top: 1.5rem;
  justify-content: center;  /* Centrar tarjetas si hay espacio extra */
}

/* Tarjeta individual */
.contact-card {
  flex: 1 1 220px;  /* Flex-grow, shrink, base width */
  background-color: #f9f9f9;  /* Fondo neutro por defecto */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 1.5rem 1.8rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top: 4px solid transparent;  /* Se sobrescribe por color de categoría */
  cursor: pointer;
  color: inherit;
}

/* Iconos dentro de la tarjeta */
.contact-card i {
  font-size: 3rem; 
  margin-bottom: 0.8rem;
  color: inherit;
  transition: transform 0.3s ease;  /* Efecto al hover */
}

/* Escalado y rotación del icono al pasar el ratón */
.contact-card:hover i {
  transform: scale(1.2) rotate(-5deg);
}

/* Textos dentro de la tarjeta */
.contact-card p,
.contact-card strong,
.contact-card em,
.contact-card code {
  margin-bottom: 0.2rem;
  color: inherit;  /* Hereda color de la tarjeta */
  font-weight: 600;
  font-size: 1.1rem;
}

/* Hover para efecto interactivo de la tarjeta */
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Colores por categoría: borde superior, fondo y color de icono/texto */
.contact-card.blue {
  border-top: 4px solid #004080;
  background-color: #e0ebff;
  color: #004080;
}

.contact-card.green {
  border-top: 4px solid #006644;
  background-color: #e6f9f0;
  color: #006644;
}

.contact-card.purple {
  border-top: 4px solid #660099;
  background-color: #f0e6ff;
  color: #660099;
}

.contact-card.orange {
  border-top: 4px solid #cc6600;
  background-color: #fff4e0;
  color: #cc6600;
}

/* Enlaces dentro de las tarjetas */
.contact-card a {
  font-size: 0.9rem;
  display: inline-block;
  margin-top: 0.2rem;
  margin-bottom: 0;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  transition: text-decoration 0.2s ease, color 0.2s ease;
}

.contact-card a:hover {
  text-decoration: none;
  font-weight: bold;
  color: #000;  /* Sutil contraste al pasar el ratón */
}

/* Responsivo: reduce tamaño en pantallas pequeñas */
@media (max-width: 600px) {
  .contact-card {
    flex: 1 1 100%;
  }
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA LAS CAJAS DE LISTA DE ARCHIVOS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS PARA LA CAJA DE LISTA DE ARCHIVOS NORMAL
==========================================================================================================
*/

/* Estilo para caja de archivos normal */
.box-files {
  background-color: #0f1a24;
  border-radius: 12px;
  padding: 20px 25px;
  margin-top: 25px;
  margin-bottom: 5px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  max-height: 400px;
  width: 98%;
  overflow-y: auto;
  border: none;
  color: #cfd8dc;
  box-sizing: border-box;
  font-size: 0.75rem;
}

/* Scroll personalizado (WebKit) */
.box-files::-webkit-scrollbar {
  width: 8px;
}

.box-files::-webkit-scrollbar-track {
  background: #1d2733;
  border-radius: 10px;
}

.box-files::-webkit-scrollbar-thumb {
  background-color: #2e8bc0;
  border-radius: 10px;
  border: 2px solid #1d2733;
}

/* Eliminar márgenes y overflow en lista para evitar doble scroll */
.box-files ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: block;
  overflow: visible;  /* importante */
  max-height: none;  /* para que no limite */
}

.box-files li {
  background: #2a3f52;
  box-shadow: 0 2px 8px rgba(1, 56, 70, 0.3);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.75rem;
  color: #cfd8dc;
  cursor: default;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.15s ease;
  user-select: text;
  
  /* Evitar que el texto salga del recuadro */
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  
  /* Crecer hacia la derecha al hacer hover */
  transform-origin: left center;
}

.box-files li::before {
  content: "";
  margin-right: 8px;
  font-size: 1rem;
  flex-shrink: 0;
}


/* Iconos según extensión */
/* Archivos HTML */
.box-files li.file-html::before {
  content: "🌐";
  color: #2e8bc0;
}

/* Archivos comprimidos */
.box-files li.file-zip::before {
  content: "📦";
  color: #c76b00;
}

/* Archivos de fastq.gz */
.box-files li.file-fastqgz::before {
  content: "🧬";
  color: #2a3f52;
}

/* Archivos de bam */
.box-files li.file-bam::before {
  content: "📊";
  color: #6a1b9a;
}

/* Archivos de bai */
.box-files li.file-bai::before {
  content: "🧩";
  color: #8e24aa;
}

/* Archivos de sam */
.box-files li.file-sam::before {
  content: "📘";
  color: #1565c0;
}

/* Archivos de metrics */
.box-files li.file-metrics::before {
  content: "📈";
  color: #00bfa5;
}

/* Archivos de ht2 */
.box-files li.file-ht2::before {
  content: "🧠";
  color: #5e35b1;
}

/* Archivos de pdf */
.box-files li.file-pdf::before {
  content: "📕";
  color: #d32f2f;
}

/* Archivos de imágenes */
.box-files li.file-img::before {
  content: "🖼️";
  color: #e9f500;
}

/* Archivos de Excel */
.box-files li.file-xls::before,
.box-files li.file-xlsx::before {
  content: "📊";
  color: #2e7d32;
}

/* Archivos de scripts bash */
.box-files li.file-sh::before {
  content: "💻";
  color: #4caf50;
}

/* Archivos YAML (configuración) */
.box-files li.file-yml::before,
.box-files li.file-yaml::before {
  content: "⚙️";
  color: #ffb300;
}

/* Archivos Quarto Markdown */
.box-files li.file-qmd::before {
  content: "📘";
  color: #1976d2;
}

/* Archivos Nextflow */
.box-files li.file-nf::before {
  content: "🔁";
  color: #8e24aa;
}

/* Archivos de configuración genéricos */
.box-files li.file-config::before {
  content: "🧩";
  color: #607d8b;
}

/* Archivos de código o tsv/csv */
.box-files li.file-tsv::before,
.box-files li.file-csv::before,
.box-files li.file-code::before {
  content: "📄";
  color: #657786;
}

/* Archivos genéricos */
.box-files li.file-default::before {
  content: "📑";
  color: #657786;
}

/* Carpetas */
.box-files li.file-folder::before {
  content: "📁";
  color: #f0ad4e;
}


/* Hover con efecto suave y sin cortar */
.box-files li:hover {
  background-color: #013846;
  box-shadow: 0 6px 20px rgba(46, 139, 192, 0.7);
  transform: scale(1.01);
  color: #e0f7fa;
}

.box-files a {
  color: inherit;
  text-decoration: none;
  width: 100%;
  user-select: text;
}

.box-files a:hover {
  text-decoration: none;
}




/* 
==========================================================================================================
ESTILOS PARA LA CAJA DE LISTA DE ARCHIVOS ANIDADA
==========================================================================================================
*/

/* Estilo para caja de archivos anidada */
.box-files-list {
  background-color: #0f1a24;
  border-radius: 12px;
  padding: 20px 25px;
  margin-top: 25px;
  margin-bottom: 5px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  max-height: 400px;
  width: 98%;
  overflow-y: auto;
  border: none;
  color: #cfd8dc;
  box-sizing: border-box;
  font-size: 0.75rem;
}

/* Scroll personalizado (WebKit) */
.box-files-list::-webkit-scrollbar {
  width: 8px;
}

.box-files-list::-webkit-scrollbar-track {
  background: #1d2733;
  border-radius: 10px;
}

.box-files-list::-webkit-scrollbar-thumb {
  background-color: #2e8bc0;
  border-radius: 10px;
  border: 2px solid #1d2733;
}

/* Reset márgenes y padding */
.box-files-list ul,
.box-files-list ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Categorías (niveles padres) como bloques */
.box-files-list > ul > li {
  background: #2a3f52;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  color: #a0c8e8;
  user-select: none;
  cursor: default;
  box-shadow: 0 2px 8px rgba(1, 56, 70, 0.3);
}

/* Sub-items dentro de cada categoría sin indentación */
.box-files-list ul ul {
  margin-top: 10px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sub-items como "botones" o tarjetas horizontales */
.box-files-list ul ul li {
  background: #1d2733;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 400;
  font-size: 0.75rem;
  color: #cfd8dc;
  cursor: default;
  box-shadow: 0 2px 8px rgba(1, 56, 70, 0.3);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.15s ease;
  user-select: text;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Iconos delante de sub-items */
.box-files-list ul ul li::before {
  content: "📄";
  margin-right: 8px;
  font-size: 1rem;
  flex-shrink: 0;
  color: #657786;
}

/* Hover solo en enlaces dentro de sub-items */
.box-files-list ul ul li a {
  color: inherit;
  text-decoration: none;
  width: 100%;
  user-select: text;
  display: inline-block;
  border-radius: 6px;
  padding: 4px 8px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}


/* Iconos según extensión */
.box-files-list li.file-html::before {
  content: "🌐";
  color: #2e8bc0;
}

.box-files-list li.file-zip::before {
  content: "📦";
  color: #c76b00;
}

.box-files-list li.file-fastqgz::before {
  content: "🧬";
  color: #2a3f52;
}

.box-files-list li.file-bam::before {
  content: "📊";
  color: #6a1b9a;
}

.box-files-list li.file-bai::before {
  content: "🧩";
  color: #8e24aa;
}

.box-files-list li.file-sam::before {
  content: "📘";
  color: #1565c0;
}

.box-files-list li.file-metrics::before {
  content: "📈";
  color: #00bfa5;
}

.box-files-list li.file-ht2::before {
  content: "🧠";
  color: #5e35b1;
}

.box-files-list li.file-pdf::before {
  content: "📕";
  color: #d32f2f;
}

.box-files-list li.file-xls::before,
.box-files-list li.file-xlsx::before {
  content: "📊";
  color: #2e7d32;
}

.box-files-list li.file-tsv::before,
.box-files-list li.file-csv::before,
.box-files-list li.file-code::before {
  content: "📄";
  color: #657786;
}

.box-files-list li.file-default::before {
  content: "📑";
  color: #657786;
}

.box-files-list li.file-folder::before {
  content: "📁";
  color: #f0ad4e;
}


.box-files-list ul ul li a:hover {
  background-color: #013846;
  box-shadow: 0 6px 20px rgba(46, 139, 192, 0.7);
  transform: scale(1.01);
  color: #e0f7fa;
  text-decoration: underline;
}

/* Sin hover en li (sin enlace) */
.box-files-list ul ul li:hover {
  background-color: transparent;
  box-shadow: none;
  transform: none;
  cursor: default;
}




/* 
==========================================================================================================
ESTILOS PARA LA CAJA DE LISTA DE ARCHIVOS CON FORMA ANIDADA Y DE LISTA PERSONALIZADA
==========================================================================================================
*/

/* Estilo para caja de archivos con forma anidada y de lista personalizada */
.box-files-nested {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 20px 25px;
  background-color: #0f1a24;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  color: #cfd8dc;
  max-height: 500px;
  overflow-y: auto;
  box-sizing: border-box;
  margin-top: 25px;
}

/* Scroll personalizado */
.box-files-nested::-webkit-scrollbar {
  width: 8px;
}

.box-files-nested::-webkit-scrollbar-track {
  background: #1d2733;
  border-radius: 10px;
}

.box-files-nested::-webkit-scrollbar-thumb {
  background-color: #2e8bc0;
  border-radius: 10px;
  border: 2px solid #1d2733;
}

/* Lista ordenada principal */
.box-files-nested ol {
  padding-left: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Categorías principales */
.box-files-nested ol > li {
  background: #2a3f52;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  color: #a0c8e8;
  box-shadow: 0 2px 8px rgba(1, 56, 70, 0.3);
  display: flex;
  flex-direction: column;
  gap: 16px;  /* Esto añade espacio entre título y sublista */
}

.box-files-nested ol > li {
  background: #2a3f52;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  color: #a0c8e8;
  box-shadow: 0 2px 8px rgba(1, 56, 70, 0.3);
  display: flex;
  flex-direction: column;
  gap: 16px;  /* Esto añade espacio entre título y sublista */
}

/* Sublistas */
.box-files-nested ul {
  list-style: none;
  margin-top: 10px;  /* antes 10px */
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Subitems como tarjetas */
.box-files-nested ul li {
  background: #1d2733;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 400;
  font-size: 0.75rem;
  color: #cfd8dc;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(1, 56, 70, 0.3);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.15s ease;
}

/* Icono al principio de cada subitem */
.box-files-nested ul li::before {
  content: "📄";
  font-size: 1rem;
  flex-shrink: 0;
  color: #657786;
  transition: filter 0.3s ease, transform 0.15s ease, color 0.3s ease;
}

/* Enlaces */
.box-files-nested ul li a {
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  padding: 4px 8px;
  width: 100%;
  display: inline-block;
  transition: color 0.3s ease;
}


/* Scroll personalizado: WebKit */
.box-files-nested::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;  /* Evita fondo cuadrado */
}

.box-files-nested::-webkit-scrollbar-track {
  background: #1d2733;
  border-radius: 10px;
  margin: 4px;  /* 💡 Crea espacio para que se vea redondeado */
}

.box-files-nested::-webkit-scrollbar-thumb {
  background-color: #2e8bc0;
  border-radius: 10px;
  border: 2px solid #1d2733;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: inset 0 0 0 2px #1d2733;  /* 💡 Truco visual para bordes suaves */
}

/* Hover sobre el thumb */
.box-files-nested::-webkit-scrollbar-thumb:hover {
  background-color: #45a4d1;
  transform: scaleX(1.2);
}

/* Estado activo */
.box-files-nested::-webkit-scrollbar-thumb:active {
  background-color: #60b8e6;
}

/* Firefox */
.box-files-nested {
  scrollbar-width: thin;
  scrollbar-color: #2e8bc0 #1d2733;
}

/* Cambia color al hacer hover en el contenedor */
.box-files-nested:hover {
  scrollbar-color: #45a4d1 #1d2733;
}


/* Iconos según extensión */
.box-files-nested li.file-html::before {
  content: "🌐";
  color: #2e8bc0;
}

.box-files-nested li.file-zip::before {
  content: "📦";
  color: #c76b00;
}

.box-files-nested li.file-fastqgz::before {
  content: "🧬";
  color: #2a3f52;
}

.box-files-nested li.file-bam::before {
  content: "📊";
  color: #6a1b9a;
}

.box-files-nested li.file-bai::before {
  content: "🧩";
  color: #8e24aa;
}

.box-files-nested li.file-sam::before {
  content: "📘";
  color: #1565c0;
}

.box-files-nested li.file-metrics::before {
  content: "📈";
  color: #00bfa5;
}

.box-files-nested li.file-ht2::before {
  content: "🧠";
  color: #5e35b1;
}

.box-files-nested li.file-pdf::before {
  content: "📕";
  color: #d32f2f;
}

.box-files-nested li.file-xls::before,
.box-files-nested li.file-xlsx::before {
  content: "📊";
  color: #2e7d32;
}

.box-files-nested li.file-tsv::before,
.box-files-nested li.file-csv::before,
.box-files-nested li.file-code::before {
  content: "📄";
  color: #657786;
}

.box-files-nested li.file-default::before {
  content: "📑";
  color: #657786;
}

.box-files-nested li.file-folder::before {
  content: "📁";
  color: #f0ad4e;
}


/* Hover sobre todo el bloque */
.box-files-nested ul li:hover {
  background-color: #013846;
  box-shadow: 0 6px 20px rgba(46, 139, 192, 0.7);
  transform: scale(1.01);
}

/* Hover del enlace dentro del li */
.box-files-nested ul li:hover a {
  color: #e0f7fa;
  text-decoration: underline;
}

/* Hover también afecta al icono */
.box-files-nested ul li:hover::before {
  filter: brightness(1.4);
  transform: scale(1.1);
  color: #e0f7fa;
}

.box-files-nested strong {
  color: #bfcfdd;
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA CAJAS DE IFRAMES
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS PARA IFRAMES NORMALES
==========================================================================================================
*/

/* Contenedor para iframe con borde azul y efecto moderno */
.iframe-container {
  width: 100%;
  margin: 25px 0 -10px 0;
}

/* iframe que ocupa todo el container */
.iframe-container iframe {
  display: block;
  width: 100%;
  height: 500px;  /* ajustable según contenido */
  border: 3px solid #1b7581;  /* borde azul oscuro */
  border-radius: 12px;  /* esquinas redondeadas */
  background-color: #ffffff;  /* fondo limpio */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  /* sombra sutil inicial */
  transition: transform 0.3s ease, 
              box-shadow 0.3s ease, 
              border-color 0.3s ease;
}

/* efecto hover profesional */
.iframe-container iframe:hover {
  transform: translateY(-3px);  /* elevación ligera */
  border-color: #145b63;  /* azul más intenso al hover */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15), /* sombra más profunda */
              0 0 8px rgba(27, 117, 129, 0.5);  /* glow azul discreto */
}




/* 
==========================================================================================================
ESTILOS PARA IFRAMES DE SUBSECCIONES
==========================================================================================================
*/

/* Contenedor para iframe con borde azul y efecto moderno */
.iframe-container-subsection {
  width: 100%;
  margin: 25px 0 -10px 0;
}

/* iframe que ocupa todo el container */
.iframe-container-subsection iframe {
  display: block;
  width: 100%;
  height: 500px;  /* ajustable según contenido */
  border: 3px solid #1a61cc;  /* borde azul oscuro */
  border-radius: 12px;  /* esquinas redondeadas */
  background-color: #ffffff;  /* fondo limpio */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  /* sombra sutil inicial */
  transition: transform 0.3s ease, 
              box-shadow 0.3s ease, 
              border-color 0.3s ease;
}

/* efecto hover */
.iframe-container-subsection iframe:hover {
  transform: translateY(-3px);  /* elevación ligera */
  border-color: #10418a;  /* azul más intenso al hover */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15), /* sombra más profunda */
              0 0 8px rgba(27, 56, 129, 0.5);  /* glow azul discreto */
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA BOTONES DE IFRAMES
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS PARA BOTONES DE IFRAMES NORMALES (MOSTRAR ARCHIVO)
==========================================================================================================
*/

/* botón mostrar debajo de iframe */
.boton-iframe {
  display: inline-block;
  padding: 10px 22px;
  background-color: #1b7581;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  margin: 5px 0 10px 0;
  transition: 
    background-color 0.3s ease, 
    transform 0.3s ease,
    box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.boton-iframe::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%;
  width: 40%;
  height: 120%;
  background: linear-gradient(
    120deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.25) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg) translateX(0);
  transition: transform 0.6s ease;
  pointer-events: none;
  border-radius: 8px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  z-index: 1;
}

.boton-iframe:hover {
  background-color: #155861;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(21, 88, 97, 0.7);
  cursor: pointer;
}

.boton-iframe:hover::before {
  transform: skewX(-25deg) translateX(200%);
  transition: transform 0.6s ease;
}

/* Ajuste de iconos dentro de boton-iframe */
.boton-iframe i {
  font-size: 1.1rem;  /* un poco más grande que el texto */
  margin-right: 8px;  /* espacio a la derecha del icono */
  margin-bottom: 1px;
  vertical-align: middle;  /* alinea con el texto */
}

.boton-iframe:hover i {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}




/* 
==========================================================================================================
ESTILOS PARA BOTONES DE IFRAMES NORMALES (DESCARGAR ARCHIVO)
==========================================================================================================
*/

/* botón para descargar archivo debajo de iframe */
.boton-iframe-download {
  display: inline-block;
  padding: 10px 22px;
  background-color: #25919f;  /* tono más claro */
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  margin: 5px 0 10px 0;
  transition: 
    background-color 0.3s ease, 
    transform 0.3s ease,
    box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.boton-iframe-download::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%;
  width: 40%;
  height: 120%;
  background: linear-gradient(
    120deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.25) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg) translateX(0);
  transition: transform 0.6s ease;
  pointer-events: none;
  border-radius: 8px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  z-index: 1;
}

.boton-iframe-download:hover {
  background-color: #1f7a87;  /* hover más claro */
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(31, 122, 135, 0.7);
  cursor: pointer;
}

.boton-iframe-download:hover::before {
  transform: skewX(-25deg) translateX(200%);
  transition: transform 0.6s ease;
}

/* Ajuste de iconos dentro de boton-iframe-download */
.boton-iframe-download i {
  font-size: 1.1rem;
  margin-right: 8px;
  margin-bottom: 1px;
  vertical-align: middle;
}

.boton-iframe-download:hover i {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA BOTONES DE ARCHIVOS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS PARA BOTONES DE ARCHIVOS (MOSTRAR CARPETA O ARCHIVO)
==========================================================================================================
*/

/* botón para mostrar carpeta de archivos */
.boton-files {
  display: inline-block;
  padding: 10px 22px;
  background-color: #2a3f52;  /* Azul grisáceo medio */
  color: #e0f7fa;  /* Texto claro */
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  margin: 5px auto 10px auto;
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.4s ease;
}

.boton-files::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%;
  width: 40%;
  height: 120%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg) translateX(0);
  transition: transform 0.6s ease;
  pointer-events: none;
  border-radius: 8px;
  filter: drop-shadow(0 0 5px rgba(224, 247, 250, 0.25));
  z-index: 1;
}

.boton-files:hover {
  background-color: #013846;  /* Azul oscuro fuerte */
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(1, 56, 70, 0.7);
  cursor: pointer;
}

.boton-files:hover::before {
  transform: skewX(-25deg) translateX(200%);
  transition: transform 0.6s ease;
}

/* Ajuste de iconos dentro de boton-files */
.boton-files i {
  font-size: 1.1rem;  /* un poco más grande que el texto */
  margin-right: 8px;  /* espacio a la derecha del icono */
  margin-bottom: 1px;
  vertical-align: middle;  /* alinea con el texto */
}

.boton-files:hover i {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}


/* botón para mostrar un archivo (de tabla normalmente) en pestaña nueva */
.boton-file {
  display: inline-block;
  padding: 10px 22px;
  background-color: #01495b;
  color: #e0f7fa;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  margin: 5px auto 10px auto;
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.4s ease;
}

.boton-file::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%;
  width: 40%;
  height: 120%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg) translateX(0);
  transition: transform 0.6s ease;
  pointer-events: none;
  border-radius: 8px;
  filter: drop-shadow(0 0 5px rgba(224, 247, 250, 0.25));
  z-index: 1;
}

.boton-file:hover {
  background-color: #005e76;  /* Azul oscuro fuerte */
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(1, 56, 70, 0.7);
  cursor: pointer;
}

.boton-file:hover::before {
  transform: skewX(-25deg) translateX(200%);
  transition: transform 0.6s ease;
}

/* Ajuste de iconos dentro de boton-file */
.boton-file i {
  font-size: 1.1rem;  /* un poco más grande que el texto */
  margin-right: 8px;  /* espacio a la derecha del icono */
  margin-bottom: 1px;
  vertical-align: middle;  /* alinea con el texto */
}

.boton-file:hover i {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}




/* 
==========================================================================================================
ESTILOS PARA BOTONES DE ARCHIVOS (DESCARGAR ARCHIVO)
==========================================================================================================
*/

/* botón para descargar un archivo (de tabla normalmente) */
.boton-file-download {
  display: inline-block;
  padding: 10px 22px;
  background-color: #02738f;  /* tono más claro */
  color: #f0fbfc;  /* texto ligeramente más brillante */
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  margin: 5px auto 10px auto;
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.4s ease;
}

.boton-file-download::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%;
  width: 40%;
  height: 120%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg) translateX(0);
  transition: transform 0.6s ease;
  pointer-events: none;
  border-radius: 8px;
  filter: drop-shadow(0 0 5px rgba(224, 247, 250, 0.25));
  z-index: 1;
}

.boton-file-download:hover {
  background-color: #0286a7;  /* hover también más claro */
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(2, 80, 102, 0.6);
  cursor: pointer;
}

.boton-file-download:hover::before {
  transform: skewX(-25deg) translateX(200%);
  transition: transform 0.6s ease;
}

/* Ajuste de iconos dentro de boton-file-download */
.boton-file-download i {
  font-size: 1.1rem;
  margin-right: 8px;
  margin-bottom: 1px;
  vertical-align: middle;
}

.boton-file-download:hover i {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}






/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA BOTONES DE ARCHIVOS DE IMÁGENES
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS PARA BOTONES DE ARCHIVOS DE IMÁGENES (MOSTRAR IMAGEN EN PESTAÑA NUEVA)
==========================================================================================================
*/

/* botón mostrar imagen en una pestaña nueva debajo de imagenes */
.boton-image {
  display: inline-block;
  padding: 10px 22px;
  background-color: #1f4f7a;  /* azul más oscuro */
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  margin: -20px 0 10px 0;
  transition: 
    background-color 0.3s ease, 
    transform 0.3s ease,
    box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.boton-image::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%;
  width: 40%;
  height: 120%;
  background: linear-gradient(
    120deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.25) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg) translateX(0);
  transition: transform 0.6s ease;
  pointer-events: none;
  border-radius: 8px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  z-index: 1;
}

.boton-image:hover {
  background-color: #173b5b;  /* azul aún más oscuro al hover */
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(23, 59, 91, 0.7);
  cursor: pointer;
}

.boton-image:hover::before {
  transform: skewX(-25deg) translateX(200%);
  transition: transform 0.6s ease;
}

/* Ajuste de iconos dentro de boton-image */
.boton-image i {
  font-size: 1.1rem;
  margin-right: 8px;
  margin-bottom: 1px;
  vertical-align: middle;
}

.boton-image:hover i {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}




/* 
==========================================================================================================
ESTILOS PARA BOTONES DE ARCHIVOS DE IMÁGENES (DESCARGAR IMAGEN)
==========================================================================================================
*/

/* botón para descargar imágenes, debajo de imagenes */
.boton-image-download {
  display: inline-block;
  padding: 10px 22px;
  background-color: #3c8ccd;  /* azul más claro */
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  margin: -20px 0 10px 0;
  transition: 
    background-color 0.3s ease, 
    transform 0.3s ease,
    box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.boton-image-download::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%;
  width: 40%;
  height: 120%;
  background: linear-gradient(
    120deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.25) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg) translateX(0);
  transition: transform 0.6s ease;
  pointer-events: none;
  border-radius: 8px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  z-index: 1;
}

.boton-image-download:hover {
  background-color: #2f7dbd;  /* azul claro más oscuro al hover */
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(47, 125, 189, 0.7);
  cursor: pointer;
}

.boton-image-download:hover::before {
  transform: skewX(-25deg) translateX(200%);
  transition: transform 0.6s ease;
}

/* Ajuste de iconos dentro de boton-image-download */
.boton-image-download i {
  font-size: 1.1rem;
  margin-right: 8px;
  margin-bottom: 1px;
  vertical-align: middle;
}

.boton-image-download:hover i {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA BOTONES DE SUBSECCIONES
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* botón mostrar subsección */
.boton-subseccion {
  display: inline-block;
  width: fit-content;
  margin: 9px 0 10px 0;
  padding: 12px 24px;
  background-color: #1a61cc;
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: 
    background-color 0.3s ease, 
    transform 0.3s ease,
    box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.85rem;
}

.boton-subseccion::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%;
  width: 40%;
  height: 140%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg) translateX(0);
  transition: transform 0.6s ease;
  pointer-events: none;
  border-radius: 10px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
  z-index: 1;
}

.boton-subseccion:hover {
  background-color: #10418a;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(16, 65, 138, 0.7);
  cursor: pointer;
}

.boton-subseccion:hover::before {
  transform: skewX(-25deg) translateX(200%);
  transition: transform 0.6s ease;
}

/* Ajuste de iconos dentro de boton-subseccion */
.boton-subseccion i {
  font-size: 1.1rem;  /* un poco más grande que el texto */
  margin-right: 8px;  /* espacio a la derecha del icono */
  margin-bottom: 2px;
  vertical-align: middle;  /* alinea con el texto */
}

.boton-subseccion:hover i {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PERSONALIZADOS PARA TABLAS INTERACTIVAS (DATATABLES)
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS VISUALES GENERALES
==========================================================================================================
*/

/* Estilos visuales de la tabla */
table.dataTable {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table.dataTable th,
table.dataTable td {
  padding: 8px;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  white-space: nowrap;
}

table.dataTable thead {
  background-color: #004151;
  color: white;
}

table.dataTable tbody tr:nth-child(odd) {
  background-color: #ffffff;
}
table.dataTable tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

table.dataTable tbody tr:hover {
  background-color: #e6f2f4;
  transition: background-color 0.2s ease-in-out;
  cursor: pointer;
}

.dataTables_scroll caption {
  display: block;
  padding: 8px 10px;
  font-weight: bold;
  font-size: 16px;
  color: #004151;
  text-align: left;
}

.dataTables_filter {
  font-family: sans-serif;
  font-size: 14px;
  color: #004151;
  margin-bottom: 10px;
}
.dataTables_filter input {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
}




/* 
==========================================================================================================
BARRAS DE DESPLAZAMIENTO PERSONALIZADAS (SCROLLBARS)
==========================================================================================================
*/

/* 1. Estándar moderno (Funciona en Firefox / Linux) */
.dataTables_scrollBody {
  scrollbar-width: auto;  /* 'auto' o 'thin' para que se vea */
  scrollbar-color: #a0a0a0 #f0f0f0;  /* Color: Pulgar | Fondo */
}

/* 2. Estilo Webkit (Funciona en Chrome / Safari / Edge / Mac) */
.dataTables_scrollBody::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 12px;  /* Grosor Vertical */
  height: 12px;  /* Grosor Horizontal (Importante para tu problema) */
}

.dataTables_scrollBody::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 4px;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background-color: #a0a0a0;
  border-radius: 6px;
  border: 2px solid #f0f0f0;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background-color: #707070;
}




/* 
==========================================================================================================
ESTILOS PARA DRAG-TO-SCROLL (ARRASTRAR PARA DESPLAZAR)
==========================================================================================================
*/

/* El contenedor donde ocurre la magia */
.dataTables_scrollBody {
  cursor: grab;  /* Manita abierta */
  overflow-x: auto; 
}

/* Clase que añade JS cuando pulsas */
.dataTables_scrollBody.active {
  cursor: grabbing;  /* Manita cerrada */
  cursor: -webkit-grabbing;
}

/* 
Desactivar selección de texto en la tabla
Esto evita que se ponga todo azul cuando intentas arrastrar
table.dataTable tbody td {
  user-select: none;
  -webkit-user-select: none;  Chrome/Safari
  -moz-user-select: none;  Firefox
  -ms-user-select: none;
}
*/








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA CONTENEDORES DE GRÁFICOS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Contenedor centrado para gráficos */
.plot-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 38px;
  margin-bottom: 5px;
  width: 90%;
  background-color: #ffffff;
  border: 3px solid #1b7581;  /* borde verdoso/azulado */
  border-radius: 12px;  /* esquinas redondeadas más suaves */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  /* sombra inicial sutil */
  padding: 10px;
  transition: transform 0.3s ease, 
              box-shadow 0.3s ease, 
              border-color 0.3s ease;
}

/* Efecto hover para gráficos */
.plot-center:hover {
  transform: translateY(-3px);  /* ligera elevación */
  border-color: #145b63;  /* verde-azulado más intenso */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15),
              0 0 8px rgba(27, 117, 129, 0.5);  /* sombra + glow */
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILO PARA DETALLES Y RESÚMENES INTERACTIVOS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

details summary.titulo2 {
  font-size: 28px;
  color: #004151;
  margin-top: 45px;
  margin-bottom: 15px;  /* da espacio visual real */
  letter-spacing: -0.25px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 6px;  /* más visible que 1px */
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: 20px;
}

details summary.titulo2::before {
  content: "➤ ";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 18px;
  transition: transform 0.2s ease;
  color: #045165;
}

details[open] summary.titulo2::before {
  transform: rotate(90deg);
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA TARJETAS DE MÉTRICAS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

.metric-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: start;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  margin: 15px 0 20px 0;
}

.metric-card {
  position: relative;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  min-width: 350px;
  min-height: 140px;
  flex: 1 1 auto;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.metric-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), 0 0 10px rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  filter: brightness(1.03);
}

/* Colores con fondo suave y bordes destacados */
.metric-card.blue {
  background-color: #e6f0ff;
  border-top: 4px solid #004080;
  color: #004080;
}
.metric-card.green {
  background-color: #e6f9f0;
  border-top: 4px solid #006644;
  color: #006644;
}
.metric-card.red {
  background-color: #ffe6e6;
  border-top: 4px solid #990000;
  color: #990000;
}
.metric-card.orange {
  background-color: #fff3e6;
  border-top: 4px solid #cc6600;
  color: #994d00;
}
.metric-card.yellow {
  background-color: #fffbe6;
  border-top: 4px solid #665c00;
  color: #665c00;
}

.metric-card.pink {
  background-color: #fee6ff;
  border-top: 4px solid #99008f;
  color: #99008f;
}

.metric-card.purple {
  background-color: #f5ebfe;
  border-top: 4px solid #660099;
  color: #660099;
}
.metric-card.cyan {
  background-color: #e6f9ff;
  border-top: 4px solid #006680;
  color: #006680;
}
.metric-card.gray {
  background-color: #ebeaea;
  border-top: 4px solid #525252;
  color: #5b5b5b;
}

/* Tipografía armonizada */
.metric-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.3;
  color: #191919dd;
}

.metric-card p {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.2;
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA CAJAS DE ALERTA
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 
==========================================================================================================
ESTILOS PARA CAJAS DE ALERTA GENERALES
==========================================================================================================
*/

.alert-box {
  margin: 20px 0;
  padding: 20px 15px 15px 15px;
  border: 2px dashed;
  border-radius: 12px;
  background-color: #fff;
  font-size: 15px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.alert-box b {
  font-weight: 800;
  font-size: 1.2em;
}

/* Hover efecto: caja crece un poco */
.alert-box:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.alert-box:hover b {
  transform: scale(1.03);
}

/* Icono grande arriba */
.alert-box i {
  display: block;
  font-size: 40px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

/* Hover efecto: icono gira y crece */
.alert-box:hover i {
  transform: rotate(-15deg) scale(1.2);
}

/* Código dentro de la alerta */
.alert-box code {
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-style: normal !important;
  font-weight: 500 !important;
  transition: background-position 5s ease, color 5s ease;
}

.alert-box code:hover {
  border-radius: 5px !important;
  background-size: 200% 200%;
  animation: brillo 1.5s infinite alternate;
}

@keyframes brillo {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}




/*
==========================================================================================================
ESTILOS PARA CAJAS DE ALERTA DE ÉXITO
==========================================================================================================
*/

.alert-success {
  border-color: #4CAF50;
  background-color: #f4fbf5;
  color: #2e7d32;
}
.alert-success i { color: #4CAF50; }
.alert-success code {
  background: #d3f0d7 !important;
  color: #2e7d32 !important;
}
.alert-success code:hover {
  background-color: #bce5c1 !important;
  color: #1b5e20 !important;
  background-image: linear-gradient(120deg,#d1f2d3,#b5e6b8 50%,#c6edc9);
}




/*
==========================================================================================================
ESTILOS PARA CAJAS DE ALERTA DE INFORMACIÓN
==========================================================================================================
*/

.alert-info {
  border-color: #2196F3;
  background-color: #f2f8fd;
  color: #1565c0;
}
.alert-info i { color: #2196F3; }
.alert-info code {
  background: #cfe7fb !important;
  color: #0d47a1 !important;
}
.alert-info code:hover {
  background-color: #b6dbf8 !important;
  color: #0b3d91 !important;
  background-image: linear-gradient(120deg,#cde4fa,#a7d0f3 50%,#bbdbf7);
}




/*
==========================================================================================================
ESTILOS PARA CAJAS DE ALERTA DE ADVERTENCIA
==========================================================================================================
*/

.alert-warning {
  border-color: #FFC107;
  background-color: #fffbea;
  color: #8a6d00;
}
.alert-warning i { color: #FFC107; }
.alert-warning code {
  background: #ffefb3 !important;
  color: #8a6d00 !important;
}
.alert-warning code:hover {
  background-color: #ffe082 !important;
  color: #5f4c00 !important;
  background-image: linear-gradient(120deg,#ffecb3,#ffd54f 50%,#ffeb99);
}




/*
==========================================================================================================
ESTILOS PARA CAJAS DE ALERTA DE ERROR
==========================================================================================================
*/

.alert-error {
  border-color: #F44336;
  background-color: #fff5f5;
  color: #a94442;
}
.alert-error i { color: #F44336; }
.alert-error code {
  background: #f7ddcd !important;
  color: #a43f3d !important;
}
.alert-error code:hover {
  background-color: #f4c1bd !important;
  color: #7a1f1d !important;
  background-image: linear-gradient(120deg,#f6c1be,#efafac 50%,#f9c8c6);
}




/*
==========================================================================================================
ESTILOS PARA CAJAS DE ALERTA CRÍTICAS
==========================================================================================================
*/

.alert-critical {
  border-color: #B71C1C;
  background-color: #fdf4f4;
  color: #7f0000;
}
.alert-critical i { color: #B71C1C; }
.alert-critical code {
  background: #f3d1d1 !important;
  color: #7f0000 !important;
}
.alert-critical code:hover {
  background-color: #e6b4b4 !important;
  color: #5c0000 !important;
  background-image: linear-gradient(120deg,#f2cccc,#d98f8f 50%,#efb3b3);
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA CHATBOT FLOTANTE
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/*
==========================================================================================================
ESTILOS GENERALES
==========================================================================================================
*/

/* Reset box-sizing para consistencia */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Contenedor del chatbot */
#chat-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  font-family: "Inter", sans-serif;
}

/* Botón flotante con icono de fondo */
#chat-toggle {
  width: 60px;
  height: 60px;
  background-color: #0d69b4;    
  border-radius: 50%;            
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  background-image: url('../../01-images/icons/bot_blue.png');
  background-size: 50%;      
  background-repeat: no-repeat;
  background-position: center;
  font-family: "Inter", sans-serif;
}

/* Hover elegante del botón */
#chat-toggle:hover {
  transform: scale(1.15) rotate(-10deg);
  background-color: #1a48a6;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

/* Contenedor del chat: mantener altura máxima pero con flex vertical */
#chat-box {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 500px;
  max-height: 665px;  /* altura máxima total */
  background: #102235;
  border: 2px solid #2a4152;
  border-radius: 14px;
  padding: 12px;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transform: translateY(30px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
  font-family: "Inter", sans-serif;
  height: auto;  /* para que se adapte al contenido */
  overflow: hidden;  /* evitar que el contenido sobresalga */
}

/* Ajustar log de mensajes para ocupar espacio disponible */
#chat-log {
  flex: 1 1 auto;  /* crecer hasta llenar espacio disponible */
  overflow-y: auto;
  padding-right: 4px;
  color: #e1f7ff;
  font-family: "Inter", sans-serif;
  font-size: 13.6px;
  line-height: 17.68px;
  margin-bottom: 6px;
}

/* Estado visible del chat */
#chat-box.active {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}




/*
==========================================================================================================
ESTILOS PARA EL CONTENIDO INICIAL DE INFORMACIÓN DEL CHATBOT
==========================================================================================================
*/

/* Info inicial del chat */
.chat-info {
  flex: 0 0 auto;  /* no crece ni colapsa */
  background-color: #1a2a3a;
  color: #bcdfff;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 2px;
  margin-top: 2px;
  font-family: "Nunito", "Times", "Times New Roman", serif;
  font-weight: 450 !important;
  font-size: 13.6px !important;
  line-height: 17.68px !important;
  letter-spacing: 0px !important;
  font-style: normal !important;
  text-align: left !important;
  display: block !important;
  transition: opacity 0.3s ease !important;
}

/* Oculto tras fade */
.chat-info.hidden {
  display: none !important;
}

/* Encabezados dentro de chat-info */
.chat-info h1 {
  background-color: #1a2a3a;
  color: #94c0ec;
  margin-top: 8px;
  margin-bottom: 30px;
  border-radius: 12px;
  font-family: "Monaco", "Serif", "Nunito", "Times", "Times New Roman", serif !important;
  font-weight: bolder !important;
  font-size: 22px !important;
  line-height: 17.68px !important;
  letter-spacing: -0.05px !important;
  font-style: normal !important;
  text-transform: none !important;
  text-align: center !important;
  display: block !important;
  transition: opacity 0.3s ease !important;
  word-spacing: -0.5px !important;
}

/* Hover elegante y moderno */
.chat-info h1:hover {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(148, 192, 236, 0.6);
  transform: translateY(-3px);
  background: linear-gradient(90deg, #94c0ec, #a3d2f9);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Párrafos dentro de chat-info */
.chat-info p {
  margin-top: 18px;
  color: #bcdfff;
  font-family: "Nunito", "Times", "Times New Roman", serif;
  font-weight: 550 !important;
  font-size: 13.6px !important;
  line-height: 17.68px !important;
  letter-spacing: -0.05px !important;
  font-style: normal !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  display: block !important;
}

/* Párrafos dentro de chat-info en negrita */
.chat-info p strong {
  color: #79beff;  /* amarillo suave */
  font-weight: 800;
}




/*
==========================================================================================================
ESTILOS PARA EL LOG DE MENSAJES DEL CHATBOT
==========================================================================================================
*/

/* Log de mensajes */
#chat-log {
  flex: 1 1 auto;  /* ocupa el resto del espacio */
  min-height: 0;  /* crucial para que scroll funcione en flex */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 4px;
  color: #e1f7ff;
  font-family: "Inter", sans-serif;
  font-size: 13.6px;
  line-height: 17.68px;
  margin-bottom: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: #2a4152 #102235;
}

/* Scroll personalizado */
#chat-log::-webkit-scrollbar {
  width: 6px;
}

#chat-log::-webkit-scrollbar-thumb {
  background-color: #2a4152;
  border-radius: 3px;
}

#chat-log::-webkit-scrollbar-track {
  background-color: #102235;
}




/*
==========================================================================================================
ESTILOS PARA EL INPUT DEL USUARIO
==========================================================================================================
*/

/* Input de usuario */
#chat-input {
  width: 89%;
  padding: 7px 8px;
  margin-bottom: 7px;
  margin-top: 5px;
  border-radius: 10px;
  border: none;
  background: #2a4152;
  color: #d1e7fcce;
  font-family: "Inter", sans-serif;
  font-weight: 450 !important;
  font-size: 13px !important;
  line-height: 17.68px !important;
  letter-spacing: 0px !important;
  font-style: normal !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
  padding-left: 12px;
}

/* Placeholder */
#chat-input::placeholder {
  color: #94c0ec;
  opacity: 0.8;
  transition: opacity 0.25s ease;
  padding-left: 3px;
}

/* Hover */
#chat-input:hover {
  background-color: #344a5c;
  box-shadow: 0 0 6px rgba(2,136,209,0.5);
  transform: translateY(-1px);
}

/* Focus */
#chat-input:focus {
  outline: none;
  background-color: #1f3245;
  box-shadow: 0 0 10px rgba(2,136,209,0.7);
  transform: translateY(-1px);
}




/*
==========================================================================================================
ESTILOS PARA EL BOTÓN DE ENVIAR
==========================================================================================================
*/

/* Botón de enviar siempre visible a la derecha y al fondo */
#chat-send {
  position: absolute;
  bottom: 16px;  /* alineado al fondo del input */
  right: 16px;
  background-color: #0d69b4;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.25s ease;
  padding: 0; 
  z-index: 10;
}

/* Hover sobre el botón */
#chat-send:hover {
  background-color: #1a85d1;
  transform: scale(1.1);
}

/* SVG dentro del botón */
#chat-send svg {
  width: 18px;
  height: 18px;
  fill: white;
  pointer-events: none;
}




/*
==========================================================================================================
ESTILOS PARA LOS MENSAJES DEL CHATBOT
==========================================================================================================
*/

/* Mensajes tipo chat */
.message {
  display: inline-block;
  padding: 8px 12px;
  margin: 4px 0;
  max-width: 85%;
  border-radius: 16px;
  line-height: 17.68px;
  word-wrap: break-word;
  font-size: 13.6px;
  font-family: "Inter", sans-serif !important;
  transition: background 0.3s ease, transform 0.2s ease;
  text-align: left;
}

/* Mensajes del usuario */
.message.user {
  background-color: #0d69b4;
  color: #ffffff;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
  font-family: "Inter", sans-serif !important;
}

/* Mensajes del bot */
.message.bot {
  background-color: #1f3245;
  color: #bcdfff;
  align-self: flex-start;
  border-bottom-left-radius: 2px;
  font-family: "Inter", sans-serif !important;
}

/* Animación ligera al aparecer */
.message.user,
.message.bot {
  opacity: 0;
  transform: translateY(10px);
  animation: slideIn 0.25s forwards;
  font-family: "Inter", sans-serif !important;
}

.message.user strong {
  color: #ffd54f;  /* amarillo suave para usuario */
  font-weight: 700;
}

.message.bot strong {
  color: #5da8ef;  /* azul claro para bot */
  font-weight: 700;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message mark {
  background-color: #1a4e8c;
  color: #e1f7ff;
  font-weight: 600;
  border-radius: 3px;
  padding: 0 1px;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: "Inter", sans-serif;
}

.message mark:hover {
  background-color: #2a6fb0;
  color: #ffffff;
}




/*
==========================================================================================================
ESTILOS PARA EL INDICADOR DE ESCRIBIENDO
==========================================================================================================
*/

.typing-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(
    #0d69b4 0deg,
    #1a85d1 90deg,
    #0d69b4 180deg,
    #1a85d1 270deg,
    #0d69b4 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent 75%, black 76%) center/100% 100% no-repeat;
  mask: radial-gradient(farthest-side, transparent 75%, black 76%) center/100% 100% no-repeat;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-left: 6px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.typing-text {
  display: inline-block;
  margin-left: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 13.6px;
  background: linear-gradient(90deg, #1b90fe, #b4d4ff, #0b89ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: gradientMove 3s linear infinite;
}

@keyframes gradientMove {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA EL FOOTER CON REDES SOCIALES Y BOTÓN VOLVER ARRIBA
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/*
==========================================================================================================
ESTILOS GENERALES
==========================================================================================================
*/

footer {
  background-color: #f4f4f4;
  color: var(--muted);
  padding: 10px auto 30px auto;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 10px;
  position: relative;
}




/*
==========================================================================================================
ESTILOS PARA ICONOS DE REDES SOCIALES
==========================================================================================================
*/

footer .redes {
  margin-bottom: 18px;
}

footer .redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 8px;
  border: none;
  background: #1E3A8A;  /* azul base */
  color: #fff;
  transition: transform 0.3s ease, background 0.3s ease, filter 0.3s ease;
}

footer .redes a:hover {
  transform: rotate(15deg) scale(1.2);
  background: #3B82F6;  /* azul claro al pasar */
  filter: drop-shadow(0 4px 12px rgba(59,130,246,0.4));
}




/*
==========================================================================================================
ESTILOS PARA BOTÓN VOLVER ARRIBA
==========================================================================================================
*/

/* Botón volver arriba */
footer .arriba {
  display: inline-flex;
  width: 62px;
  height: 62px;
  justify-content: center;
  align-items: center;
  background: #1E3A8A;  /* azul base */
  color: #fff;
  border-radius: 999px;
  font-size: 18px;
  box-shadow: 0 8px 24px #000c270a;
  transform: translateY(-28px);
  border: none;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

footer .arriba:hover {
  transform: translateY(-34px) rotate(180deg) scale(1.1);
  background: #3B82F6;  /* azul más intenso */
  box-shadow: 0 8px 16px rgba(59,130,246,0.4);
}

/* Animación de latido suave */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59,130,246,0.3);
  }
  50% {
    box-shadow: 0 0 15px 6px rgba(59,130,246,0.2);
  }
}








/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
ESTILOS PARA DIVISORES ANIMADOS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

.divider {
  height: 1px;
  background: linear-gradient(to right, rgba(0, 50, 150, 0.7), rgba(0, 100, 200, 0.7));
  border: none;
  border-radius: 0.5px;
  margin: 35px 0 10px 0;
  position: relative;
  overflow: hidden;
  transform: scaleY(0.10);
}

.divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 100, 200, 0.6), rgba(0, 50, 150, 0.6), rgba(0, 100, 200, 0.6));
  animation: slide 2s linear infinite;
}

.divider:hover::before {
  animation-duration: 1s;
  opacity: 0.8;
}

@keyframes slide {
  0% { left: -100%; }
  50% { left: 0%; }
  100% { left: -100%; }
}