@import url('https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap');

/* Focus mode - https://lsbjordao.github.io/quarto-book-focus-mode-example/chapter-01.html */
:root {
  --book-focus-content-width: 960px;
}

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

/* Títulos dentro del bloque de portada */
.quarto-title-block h1,
.quarto-title-block h2,
.quarto-title-block h3,
.quarto-title-block h4 {
  color: #ffffff;   /* blanco puro */
  border-bottom: 6px solid #fff; /* grosor y color */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* opcional: sombra para legibilidad */
}

/* Enlaces dentro del title block */
.quarto-title-block a {
  color:#fff; /* 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;
}


h1, h2, h3, h4, h5, h6 {
  font-family: "News Cycle", "Arial Narrow Bold", sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #007f99;
  
  /* Línea personalizada */
  border-bottom: 6px solid #007f99; /* grosor y color */
  padding-bottom: 8px;              /* espacio entre texto y línea */
  margin-bottom: 16px;              /* separación con el contenido siguiente */
}

/* Variantes de estilo */
h2 {
  border-bottom: 4px solid #007f99;  /* línea discontinua */
}
h3, h4 {
  border-bottom: 3px dotted #007f99;  /* línea punteada */
}

/* ----------- Grid y cards -------------  */

/* Contenedor de la cuadrícula */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* columnas flexibles */
  gap: 1.5rem;   /* espacio entre tarjetas */
  margin-top: 2rem;
}

/* Estilo de cada card */
.card {
  padding: 1.5rem;
  border: 2px solid #5f7ba7;   /* borde institucional */
  border-radius: 10px;
  background-color: #e9e9e9;      /* fondo oscuro */
  color: #585858;           /* Texto gris oscuro */
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* sombra para profundidad */
  transition: transform 0.2s ease;
}

/* Efecto hover */
.card:hover {
  transform: translateY(-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 -------------  */
/* Note */
.callout-note {
  border-left-color: #5f7ba7;
}

/* 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/ ---- */

.nav-tabs {
  border-bottom: none; /* elimina línea inferior */
  margin-bottom: 0;
}

/* Estilo general de las pestañas */
.nav-tabs .nav-item .nav-link {
  background-color: #e9e9e9; /* Fondo gris */
  color: #585858;           /* Texto gris oscuro */
  border-radius: 12px 12px 0 0; /* redondeado solo arriba */  /* Bordes redondeados, con un radio distinto en horizontal y vertical (más ovalado que circular) */
  margin-right: 4px;
  padding: 10px 18px;
  font-weight: 500;
}

/* Pestaña activa */
.nav-tabs .nav-item .nav-link.active {
  background-color: #000000;   /* 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: #5DADE2; /* Fondo azul grisáceo (#5f7ba7). */
   color: #f0eded;            /* texto */
} 

/* ----------- Estilo del contenido de los tabsets ----------- */
.tab-content {
  background-color: #f9f9f9;   /* Fondo claro para el área de contenido */
  border: 2px solid #ddd;      /* Borde alrededor del contenido */
  border-radius: 8px;          /* Bordes redondeados */
  padding: 20px;               /* Espaciado interno */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Cada panel dentro del tabset */
.tab-pane {
  color: #333;                 /* Texto oscuro para legibilidad */
  font-size: 0.95em;           /* Tamaño de fuente ligeramente reducido */
  line-height: 1.5;            /* Espaciado entre líneas */
}

/* Opcional: animación al cambiar de tab */
.tab-pane {
  transition: opacity 0.3s ease-in-out;
}
.tab-pane:not(.active) {
  opacity: 0;
}
.tab-pane.active {
  opacity: 1;
}

/* -----  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;
}
*/