/* Fondo del bloque de título */
.quarto-title-block {
  background-image: url("flyer/banner_varios_genes_v3.png"); /* Banner */
  background-size: cover;      /* Ajusta la imagen al tamaño del bloque */
  background-position: center; /* Centra la imagen */
  padding: 2rem;
  border-radius: 8px;
  color: black;                 /* Texto en blanco para contraste */
}

/* Enlaces dentro del title block */
.quarto-title-block a {
  color:black; /* color normal */
  text-decoration: underline; /* opcional */
}

/* Enlaces dentro del title block, cuando se coloca el mouse encima */
.quarto-title-block a:hover {
  color: #ff3fc8; /* color al pasar el mouse */
}

/* Enlaces dentro del title block, al visitar el link */
.quarto-title-block a:visited {
  color: #7c3aed; /* color cuando ya fue visitado */
}


/* Opcional: ajustar tipografía */
.quarto-title-block .quarto-title-authors .author,
.quarto-title-block .quarto-title-authors .affiliation {
  color: #071322; /* texto principal */
}


/* Text */

.text-blue { color: #007f99; }   /* azul */
.text-blueblack { color: #08519c; }   /* azul fuerte */
.text-red { color: #ff3c3c; }    /* rojo */
.text-green { color: #238443; }  /* verde */
.text-purple  { color: #54278f; }  /* morado, question */
.text-pink  { color: #ae017e; }  /* rosa, puzzle */

/* center Text */
.center {
  text-align: center;
}

/* Letters */
body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&display=swap');

h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald", sans-serif;
  font-weight: bold;   /* fuerza negritas */
  letter-spacing: 0.5px;
}

/* ----------- bloques emergentes -------------  */
/* Personalizar el bloque emergente */
.tippy-box {
  background-color: #f9f9ff !important;
  color: #4b0082 !important;
  border: 1px solid #aaa !important;
  padding: 0.8em;
  font-size: 0.9em;
  max-width: 400px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}

/* ----------- Marcatexto -------------  */

/* Marcatexto amarillo */
.highlight-yellow {
  background-color: #ffff66;   /* color de marcatexto */
  padding: 0.2em;             /* espacio interno */
}

/* Marcatexto rosa */
.highlight-pink {
  background-color: #ff99cc;   /* color de marcatexto */
  padding: 0.2em;             /* espacio interno */
}

/* Marcatexto verde */
.highlight-green {
  background-color: #99ff99;   /* color de marcatexto */
  padding: 0.2em;             /* espacio interno */
}

/* Marcatexto azul */
.highlight-blue {
  background-color: #99ccff;   /* color de marcatexto */
  padding: 0.2em;             /* espacio interno */
}

/* ----------- Texto justificado -------------  */

.justificado {
  text-align: justify;
  word-spacing: 0.05em;  /* ajusta espacio entre palabras */
}


/* ----------- Callout -------------  */

/* Callout morado para Question */
.question .callout-tip.callout {
  border-left-color: #9333ea !important;
}

.question .callout-tip .callout-header {
  background-color: rgba(147, 51, 234, 0.12) !important;
}

.question .callout-tip .callout-title-container {
  color: #49006a;
  font-weight: 700;
}


/* Callout morado para puzzle */
.puzzle .callout-tip.callout {
  border-left-color: #dd3497 !important;
}

.puzzle .callout-tip .callout-header {
  background-color: #fde0ef !important;
}

.puzzle .callout-tip .callout-title-container {
  color: #ae017e;  /* letra */
  font-weight: 700;
}

/* ----------- Chunck diseño -------------  */

pre {
  /*border: 2px solid rgba(204, 189, 204, 0.8); /* code chunk border*/
  border:             3px solid rgba(136, 57, 138, 0.3);
  box-shadow:         0px 0px 0px 0px var(--morado-claro);
  padding:            0.1em;                    /* padding between code chunk and border */
  background:         none !important;
  overflow-x:         auto;                     /* enable horizontal scrolling with overflow */
  border-radius:      1px;                      /* modify rounding of corners*/
}

/*-- Chunck espacio y tamaño o distribución --*/
pre code {
  background:         none; /* fondo transparente */
  font-size:          18px !important;
  max-width: 100%;         /* Se adapta al ancho del contenedor */
  white-space: pre-wrap;   /* Permite que el texto se ajuste */
  box-sizing: border-box;  /* Asegura que padding/border no rompan el ajuste, Elimina scrolling */ 
}

/* Al pasar el mouse sobre la línea */
.cell pre code span:hover {
  opacity: 1;
  background-color: #f3e8ff; /* morado claro */
}

.cell pre code span.co {
  color: #7B157A; /* morado intenso */
}

/* Comentarios dentro de los chunks en morado */

.cell pre code span.co {
  color: #7B157A;   /* morado intenso */
  font-style: italic; /* opcional, para diferenciarlos */
}

/* ----------- Diseño en tablas -------------  */

/* Estilo general para tablas */

table {
  width: 100%;                          /* La tabla ocupa todo el ancho disponible */
  background: rgba(248, 254, 255, 0.96);/* Fondo casi blanco con un ligero tono azul/transparencia */
  border-collapse: separate;            /* Mantiene los bordes separados (no colapsados) */
  border-spacing: 0;                    /* Elimina el espacio entre celdas */
  border: 1px solid var(--border);      /* Aplica un borde usando la variable CSS --border */
  border-radius: 8px;                   /* Bordes redondeados en la tabla */
  overflow: hidden;                     /* Oculta contenido que se salga del área de la tabla */
  margin: 1rem 0;                    /* Espacio arriba y abajo de la tabla */
  font-size: 0.96rem;                   /* Tamaño de fuente ligeramente más pequeño que el normal */
  box-shadow:                          /* Sombra para dar efecto de “tarjeta flotante” */
    0 10px 24px rgba(6, 18, 38, 0.10), /* sombra difusa grande */
    0 0 18px rgba(0, 217, 255, 0.08);  /* sombra suave con tono azul */
}

/* Encabezados estáticos */
table th {
  background-color: #4A235A; /* morado oscuro */
  color: white;              /* letras blancas */
  padding: 8px;
  text-align: center;
  font-weight: bold;
}

/* Celdas, td: celdas */
table td {
  border: 1px solid #ddd;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px;
}

/* Filas alternas */
table tr:nth-child(even) {
  background-color: #f3e8ff; /* morado claro */
}

/* ----- Hover en columnas completas ----- */
table th:hover { /*  si pasas el mouse sobre un encabezado (th), también se aplica el color de fondo. */
  background-color: #d2b4de; /* color al pasar el mouse */
}

/* ----- Hover en filas ----- */
tbody tr:hover {
  background: rgba(0, 217, 255, 0.16);
}

tbody tr:hover > * {
  background: rgba(0, 217, 255, 0.16);
}

/* ----------- Estilo para bloques de texto ----------- */

/* Hover opcional para resaltar */
pre:hover, code:hover {
  background-color: #eafcff;        /* fondo azul claro al pasar el mouse */
  border-color: #00a7c7;            /* borde turquesa */
}

/******************
 * Coloured content boxes
 ****************/
.content-box { 
    box-sizing: border-box;
    background-color: #e2e2e2;
}
.content-box-blue,
.content-box-gray,
.content-box-grey,
.content-box-army,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
  box-sizing: border-box;
  border-radius: 15px;
  margin: 0 0 15px;
  overflow: hidden;
  padding: 0px 20px 0px 20px;
  width: 100%;
}
.content-box-blue { background-color: #F0F8FF; }
.content-box-gray { background-color: #e2e2e2; }
.content-box-grey {	background-color: #F5F5F5; }
.content-box-army {	background-color: #737a36; }
.content-box-green { background-color: #d9edc2; }
.content-box-purple { background-color: #e2e2f9; }
.content-box-red { background-color: #ffcccc;
color: var(--Black);}
.content-box-yellow { background-color: #fef5c4; }
.content-box-blue .remark-inline-code,
.content-box-blue .remark-inline-code,
.content-box-gray .remark-inline-code,
.content-box-grey .remark-inline-code,
.content-box-army .remark-inline-code,
.content-box-green .remark-inline-code,
.content-box-purple .remark-inline-code,
.content-box-red .remark-inline-code,
.content-box-yellow .remark-inline-code { 
  background: none;
}


/* ----- Tab navegacion- Obtenido de https://ddotta.github.io/cookbook-rpolars/ ---- */

/* Estilo general de las pestañas */
.nav-tabs .nav-item .nav-link {
  background-color: #e9e9e9; /* Fondo gris */
  color: #585858;           /* Texto gris oscuro */
  border-radius: 25% 10%;  /* Bordes redondeados, con un radio distinto en horizontal y vertical (más ovalado que circular) */
}

/* Pestaña activa */
.nav-tabs .nav-item .nav-link.active {
  background-color: #6A3B97;   /* Fondo activo */
  color: #f0eded;              /* Color de la letra */
}

/* Efecto hover */
.nav-tabs .nav-link:hover {
   border-color: white;       /* Borde blanco de 2px. */
   border-width: 2px;         
   background-color: #d2b4de; /* Fondo azul grisáceo (#5f7ba7). */
   color: #f0eded;            /* texto */
} 


/* -----  Decoración sidebar ------ */

/* Fondo de la sidebar 
.sidebar {
  background-color: #F5F5F5; 
}

.sidebar .logo img {  Logo dentro de la sidebar 
  max-width: 180px;    ajusta tamaño 
  margin: 10px auto; centrado 
  display: block;
}
*/