/* =========================================================
   Tema Reveal.js - "Salud y Precisión"
   Inspirado en Ciencias de la Salud / Bioestadística
   ========================================================= */

/* ----- Paleta de colores ----- */
:root {
  --azul-principal: #384963ad;
  --gris-texto: #272727de;
  --verde-acento: #2a909def;
  --azul-petroleo: #264653;
  --azul-petroleo-suave: #455963b0;
  --arena-suave: #ffffffd5;
  --rojo-coral: #E76F51;
  --azul-medico: #244d5c3b;
  --azul-medico-suave: #536f7933;
  --azul-grisaceo: #4F6D7A;

  /* Densidad del texto */
  --dens-normal: 500;

  /* Tipografía y colores Reveal.js */
  --r-main-font: "Open Sans", "Lato", "Helvetica", sans-serif;
  --r-heading-color: var(--azul-principal);
  --r-main-color: var(--gris-texto);
  --r-link-color: var(--verde-acento);
  --r-link-color-hover: var(--azul-petroleo);
  --r-selection-background-color: var(--arena-suave);
  --r-selection-color: var(--azul-petroleo);


  --r-main-font-size: 16px;
  /* CONTROL TAMAÑO TEXTO NORMAL  */
  --r-heading-line-height: 1.1;

}



/* ----- Fondo general ----- */
.reveal {
  background-color: #f8f9fa;
  font-family: var(--r-main-font);
  color: var(--r-main-color);
}

/* ----- Títulos ----- */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  color: var(--azul-principal) !important;
  font-weight: 800;
}


h4 {
  font-size: 1.2em !important;
}


/*fuentes equivalentes a los titulos que no provoquen salto de página*/
.reveal .sh2 {
  color: var(--azul-principal) !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  font-size: 1.2em !important;
}

.reveal .sh3 {
  color: var(--azul-principal) !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 100% !important;
  ;
}

.reveal .sh4 {
  color: var(--azul-principal) !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 125% !important;
  ;
}

.reveal p {
  color: var(--gris-texto);
  font-weight: var(--dens-normal);
}

/* ----- Enlaces ----- */
.reveal a {
  color: var(--verde-acento);
  text-decoration: none;
}

.reveal a:hover {
  color: var(--azul-petroleo);
}

/* ----- Énfasis ----- */
.reveal strong,
.reveal em {
  color: var(--verde-acento);
  font-weight: 625;
}

/*personalizados con solo negrita o cursiva sin cambio de color*/
.reveal .neg {
  font-weight: 650;
  font-size: 0.95em;
}

.reveal .negs {
  font-weight: 620;
  font-size: 0.95em;
  /* menos que 700 (bold estándar) */
  color: rgba(0, 0, 0, 0.75);
  /* un poco más claro */
}

.reveal .cur {
  font-style: italic;
}

.reveal .curneg {
  font-style: italic;
  font-weight: 700;
}

.reveal .def {
  /*definiciones, verde+negrita*/
  color: var(--verde-acento);
  font-weight: 700;
}

.reveal .tab {
  margin-left: 2em;
}

.reveal .tab1 {
  margin-left: 1em;
}

.reveal .tab12 {
  margin-left: 1em;
}

.reveal .tab14 {
  margin-left: 1.07em;
}

.reveal .tabv {
  margin-left: 1.5em;
}

.reveal .tabvv {
  margin-left: 3em;
}

.reveal .tab15 {
  margin-left: 1.3em;
}

.reveal .tab17 {
  margin-left: 1.7em;
}

.reveal .tab2 {
  margin-left: 4em;
}

.reveal .tab100 {
  margin-left: 10em;
}

.reveal .tab150 {
  margin-left: 15em;
}


.reveal .tab200 {
  margin-left: 20em;
}

.reveal .tab300 {
  margin-left: 30em;
}

.icon-tab {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin: 1em 0;
}

.icon-tab p {
  margin: 0;
}


.reveal .indent {
  margin-left: 2em;
  /*text-indent: 2em;*/
  width: 90% !important;
  /*70%*/
}

.reveal .indent15 {
  margin-left: 1.5em;
  /*text-indent: 2em;*/
  width: 90% !important;
  /*70%*/
}



p.indent {
  margin-left: 2em;
  text-indent: 2em;
  width: 90% !important;
  /*70%*/
}

.line_l {
  width: 20%;
  max-width: 120px;
  height: 1px;
  background: #aaa;
  margin: 1em 0;
  /*1rem auto;  centrado*/
}

.line_c {
  width: 20%;
  max-width: 120px;
  height: 1px;
  background: #aaa;
  margin: 1rem auto;
}



/* EPIGRAFE */

.epigrafe {
  position: relative;
  padding-left: 1.2em;
}

.epigrafe::before {
  content: "◼";
  position: relative;
  left: 0;
  color: var(--azul-petroleo);
  font-size: 0.8em;
  /* opcional: suaviza visualmente */
  line-height: 1;
}


/* REDUCCIÓN DE LA FUENTE */
.reveal .small095 {
  font-size: 0.95em !important;
}

.reveal .small09 {
  font-size: 0.9em !important;
}

.reveal .small085 {
  font-size: 0.85em !important;
}

.reveal .small080 {
  font-size: 0.80em !important;
}

.reveal .small070 {
  font-size: 0.7em !important;
}


.reveal .comment {
  font-size: smaller;
}

.reveal .sup {
  font-size: xx-small;
  vertical-align: super;
}

.reveal .sub {
  font-size: xx-small;
  vertical-align: sub;
}

.reveal .todo {
  color: red;
}

/*------- Enlaces -------*/
.reveal .lupa {
  display: inline-flex;
  /* Mantiene icono + texto en línea */
  align-items: center;
  /* Centra verticalmente ambos */
  text-decoration: none;
  /* Quita subrayado del enlace */
  color: inherit;
  /* Hereda color del texto */
  gap: 0.3em;
  /* Espaciado entre icono y texto */
}

.reveal .lupa::before {
  content: "";
  display: inline-block;
  width: 1em;
  /* Tamaño del icono igual al texto */
  height: 1em;
  background-image: url("libs/images/lupa_azul.gif");
  /* Ruta del icono */
  background-size: contain;
  /* Escala correctamente */
  background-repeat: no-repeat;
  background-position: center;
}



/* ----- Citas ----- */
.reveal .cita {
  border-left: 4px solid var(--azul-petroleo);
  color: var(--azul-petroleo);
  background: rgba(42, 157, 143, 0.05);
  padding-left: 1em !important;
  padding-top: 0.1em !important;
  padding-bottom: 0.25em !important;
  margin-top: 0.25em;
  border-radius: 8px;
}

.reveal .cita:hover {
  background-color: #fffff4ff;
  color: #22383bff;
}

.reveal section .footnotes-inline {
  margin-top: 1em;
  padding-top: 0.6em;
  font-size: 0.85em;
  color: #444;
}

.reveal section .footnotes-inline::before {
  content: "";
  display: block;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin-bottom: 0.6em;
}

.reveal section .footnotes-inline {
  margin-top: 1em;
  padding-top: 0.6em;
  font-size: 0.85em;
  color: #444;
}

.reveal .notapie {
  margin-top: 1em;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  font-size: 0.6em;
  color: #444;
}

.reveal .notapie::before {
  content: "";
  display: block;
  width: 25%;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin-top: 1em;
  margin-bottom: 1em;
}


/* ----- Código ----- */
.reveal code {
  color: var(--azul-petroleo);
  background: rgba(42, 157, 143, 0.1);
  padding: 0.15em 0.3em;
  border-radius: 4px;
  font-family: "Fira Code", monospace;
}

/* ----- Tablas ----- */
.reveal table {
  border-collapse: collapse;
  margin: auto;
  font-size: 0.9em;
}

/*
.reveal th {
  background-color: var(--azul-petroleo);
  color: white;
}
*/

.reveal td,
.reveal th {
  border: 1px solid #ddd;
  padding: 0.5em 0.8em;
}

.reveal .lineas {
  border-collapse: collapse;
  width: 100%;
}

.reveal .lineas th,
.lineas td {
  border-bottom: 1px solid #999;
  padding: 0.4em 0.6em;
}


/* asegura que se dibuje el borde final */
.reveal .lineas tr:last-child td {
  border-bottom: 1px solid #999;
}

/* Aplica a la tabla con clase "lineas" dentro de reveal */
.reveal table.lineas {
  border-collapse: collapse;
}

/* Mismo estilo de borde y padding para todas las celdas */
.reveal table.lineas th,
.reveal table.lineas td {
  border-bottom: 1px solid #999;
  padding: 0.4em 0.6em;
}

/* (Opcional) reforzar explícitamente la última fila de tbody */
.reveal table.lineas tbody tr:last-child td {
  border-bottom: 1px solid #999;
}


.bmj-table {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 0.95em;
}

.bmj-table th {
  border-bottom: 2px solid #333;
  text-align: left;
  padding: 8px 10px;
}

.bmj-table td {
  border-bottom: 1px solid #ddd;
  padding: 8px 10px;
}

.bmj-table tr:nth-child(even) {
  background-color: #f9f9f9;
}



/* ----- Listas ----- */
.reveal ul,
.reveal ol {
  margin-left: 1.5em;
  font-weight: var(--dens-normal);
}

/* Cambia el tipo de viñeta de la TOC */
.reveal .toc ul {
  /*list-style-type: square; /* otros valores: circle | disc | none */
  list-style: none !important;
  /* quitamos las viñetas originales */
  padding-left: 1em !important;
}

.reveal .toc li::before {
  content: "▶ ";
  /* símbolo personalizado */
  color: #007acc;
  font-weight: bold;
}

/* tipo de viñeta general para todas las listas */
.reveal ul {
  list-style-type: circle;
}

/* clases para tipos particulares*/
.reveal ul.circle {
  list-style-type: circle;
}

.reveal ul.square {
  list-style-type: square;
}

.reveal ul.disc {
  list-style-type: disc;
}

/* ----- Citas destacadas o notas ----- */
/* === Cuadros <details> que imitan los callouts de Quarto === */
/* === Cuadros <details> estilo Callout (Quarto RevealJS compatible) === */

details[class^="callout-"] {
  border-radius: 0.5rem;
  margin: 1rem 0;
  margin-left: 2em;
  padding: 0.7rem 1rem;
  background: var(--callout-bg, #f8f9fa);
  border-left: 4px solid var(--callout-border, #dee2e6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  font-size: 1em;
  /* CONTROL TAMAÑO TEXTO CALLOUTS  */
  /* texto ligeramente más pequeño */
  transition: box-shadow 0.2s ease, background 0.2s ease;
  overflow: hidden;
}


details[class^="callout-"]:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


/* === Summary (título del cuadro) === */
.reveal details summary {
  font-weight: bold;
  /* texto en negrita */
  color: var(--azul-principal);
  /* color azul o el que prefieras */
  background-color: #fdfeff85;
  /* fondo sutil */
  font-size: 1.1em;
  /*tamaño del texto*/
  border-radius: 6px;
  padding: 0.3em 0.6em;
  cursor: pointer;
  /* cambia el cursor a "mano" */
}



/* Al pasar el mouse (hover) */
.reveal details summary:hover {
  background-color: #fffff4ff;
  color: #22383bff;
}


details[class^="callout-"] summary {
  cursor: pointer;
  /*font-weight: 900 !important;;*/
  font-size: 0.96em !important;
  ;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
  /*color: var(--callout-text, #101214fa);*/
  color: var(--azul-principal) !important;
  padding: 0.25rem 0;
}

details[class^="callout-"] summary::-webkit-details-marker {
  display: none;
}

/* === Icono del summary === */
details[class^="callout-"] i.bi {
  font-size: 1.1em;
  flex-shrink: 0;
  color: var(--callout-icon-color, #6c757d);
}

/* === Contenido animado === */
details[class^="callout-"]>*:not(summary) {
  opacity: 0;
  max-height: 0;
  transition: all 0.3s ease;
}

details[class^="callout-"][open]>*:not(summary) {
  opacity: 1;
  max-height: 100vh;
  margin-top: 0.5rem;
}

/* === Variantes === */
/* Nota (azul) */
.callout-note {
  --callout-bg: #f8fbff;
  --callout-border: #91caff;
  --callout-icon-color: #1d6efd;
}

.callout-note-details table {

  margin-left: auto;
  margin-right: auto;
  display: table;
  /* o inline-table */
  width: auto;
  /* para que no ocupe todo el ancho */
  border-collapse: collapse;

}




.callout-nota {
  --callout-bg: #f8fbff;
  --callout-border: #91caff;
  --callout-icon-color: #1d6efd;
}

/* Tip / Consejo (verde) */
.callout-tip {
  --callout-bg: #f9fff9;
  --callout-border: #9ee6b8;
  --callout-icon-color: #198754;
}

/* Warning / Advertencia (amarillo) */
.callout-warning {
  --callout-bg: #fffdf5;
  --callout-border: #ffe69c;
  --callout-icon-color: #cc9a06;
}

/* Important (rojo suave) */
.callout-important {
  /* variante indentada*/
  --callout-bg: #fff8f8;
  --callout-border: #f5b5b5;
  --callout-icon-color: #dc3545;
}

/* Caution (ámbar o naranja) */
.callout-caution {
  --callout-bg: #fff7f0;
  --callout-border: #f5c07b;
  --callout-icon-color: #d9831f;
}

.callout-R {
  --callout-bg: #f0f8ff;
  --callout-border: #276DC3;
  /*--callout-icon-color: #d9831f;*/
}

/* callout con icono R NO FUNCIONA*/
.callout-R::before {
  content: url("libs/images/Rlogo.png");
  position: absolute;
  left: 0.75em;
  top: 0.75em;
  width: 22px;
  height: 22px;
  transform: translateY(0);
}

/* tablas en los callouts*/
.reveal .callout .details table {
  margin-top: 0.5em;
  border-collapse: collapse;
  width: 100%;
}

.table-center {
  margin-left: auto;
  margin-right: auto;
}


/* Mantener el summary alineado a la izquierda */
.callout details summary {
  text-align: left;
  /* asegura que el título quede a la izquierda */
  cursor: pointer;
  /* para que se vea como expandible */
}

/* Centrar solo las tablas dentro de cualquier callout */
.callout details table {
  margin-left: auto;
  margin-right: auto;
  display: table;
  /* o inline-table */
  width: auto;
  /* para que no ocupe todo el ancho */
  border-collapse: collapse;
}



/* Centrar cualquier tabla dentro de un callout/summary
.callout details {
  display: flex;
  justify-content: center;
}
 */

.callout details table {
  width: auto;
  /* evita que ocupe todo el ancho */
  display: inline-table;
  /* para que margin:auto funcione */
  border-collapse: collapse;
}

/*
.callout details th,
.callout details td {
  border: 1px solid black;
  padding: 8px;
}
*/


/*NO FUNCIONA*/
.reveal .callout .details .table thead {
  display: table-header-group;
  /* fuerza el encabezado a estar dentro */
}

.reveal .callout .details table th,
.reveal .callout .details table td {
  padding: 0.3em 0.6em;
}

.reveal .callout .details table th {
  background-color: rgba(0, 0, 0, 0.05);
}



.reveal .callout-Rcode {
  border-left: 4px solid #276DC3;
  /* color de R */
  background-color: #f0f8ff;
  position: relative;
  padding-left: 3em;
}

.reveal .callout-Rcode::before {
  content: url("../images/Rlogo.png");
  position: absolute;
  left: 0.75em;
  top: 0.75em;
  width: 22px;
  height: 22px;
  transform: translateY(0);
}

/* ----- Alertas / errores ----- */
.reveal .alert {
  background: rgba(231, 111, 81, 0.1);
  border-left: 5px solid var(--rojo-coral);
  padding: 0.7em 1em;
  border-radius: 8px;
  color: var(--rojo-coral);
}

/* Encabezado */
.reveal .header {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  color: #264653;
  /* azul petróleo */
  padding: 0.3em 0;
  background: rgba(255, 255, 255, 0.7);
  /* semitransparente */
}

.custom-header {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  color: #264653;
  /* azul petróleo */
  background: rgba(255, 255, 255, 0.8);
  /* semitransparente */
  padding: 0.3em 0;
  z-index: 1000;
  /* para que esté encima del slide */
}

/* Pie de página */
.reveal .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: right;
  font-size: 0.8em;
  color: #264653;
  padding: 0.3em 1em;
  background: rgba(255, 255, 255, 0.7);
  /*display: flex !important;*/
  align-items: center !important;
  line-height: 1 !important;
}

.reveal .no-footer .footer {
  display: none !important;
}

.reveal .footer img {
  display: inline-block !important;
  height: 1.05em;
  transform: translateY(1px);
}



/* iframes para contener webs u otras presentaciones */
.reveal iframe {
  width: 100%;
  height: 65vh;
  /* 65% de la altura de la ventana */
  border: 2px solid #ccc;
  border-radius: 10px;
}

/* diapositivas scrollables*/
.reveal .scrollable {
  height: 70vh;
  /* Altura de la ventana del navegador */
  overflow-y: auto;
  overflow-x: hidden;
}



.bbi {
  display: inline-block;
  width: 1.5em;
  height: 1em;
  vertical-align: center !important;
  /* -0.125em;*/
  fill: currentColor;
  /* si es SVG con trazos, puede heredar el color del texto */
}


.reveal .wikipedia::before {
  content: "ⓦ ";
  /* o el símbolo de Wikipedia: "🌐 " */
  font-size: 1.2em;
  display: inline-block;
  /*width: 16px;*/
  /*height: 16px;*/
  /*margin-right: 4px;*/
  vertical-align: baseline;
}

.icon-wiki {
  height: 18px;
  /* tamaño adecuado para texto */
  vertical-align: middle;
  /* lo alinea para que quede perfecto con el texto */
  margin-left: 4px;
  margin-right: 4px;
}


.icon-red-strong {
  color: #c1121f !important;
}

.icon-red {
  color: #d9534f !important;
}

.icon-green {
  color: #2ecc71 !important;
}

.icon-darkgreen {
  color: #1e7e34 !important;
}

.icon-teal {
  color: #20c997 !important;
}

.icon-blue {
  color: #007bff !important;
}

.icon-amber {
  color: #c57607e5 !important;
}

.icon-purpled {
  color: #6f42c1 !important;
}

.icon-purple {
  color: #7B1FA2;
  /* púrpura intenso */
  /* opcional: lo hace un poco más visible */
}

.icon-purple-small {
  color: #7B1FA2;
  /* púrpura intenso */
  font-size: 0.7em;
  vertical-align: top;
  /* opcional: lo hace un poco más visible */
}


.icon-gray {
  color: #6c757d !important;
}

.icon-orange {
  color: #fd7e14 !important;
}


/* COLORES DE TEXTO */

.epigrafe {
  color: #818D9D;
  font-size: 1.2em;
  font-weight: bold;
}

.epigrafe-dark {
  color: #4a4a4aef;
  font-size: 1.2em;
  font-weight: bold;
}

.nbrown {
  color: #8B4513;
  font-weight: bold;
}

.brown {
  color: #8B4513;
}

.siena {
  color: #A0522D;
}

.darkbrown {
  color: #654321;
}

/* Azul científico (ggplot2) */
.blue-sci {
  color: #0072B2 !important;
}

/* Azul vibrante */
.blue-strong {
  color: #0057D9 !important;
}

.nblue-strong {
  color: #0057D9 !important;
  font-weight: bold !important;
}

/* Azul didáctico/agradable */
.blue-soft {
  color: #3A7BD5 !important;
}

.icon-blue-dark2 {
  color: #021b31ff !important;
}



/* Azul oscuro (máxima legibilidad en blanco) */
.blue-dark {
  color: #0A3D62 !important;
}

/* Azul grisáceo (muy profesional) */
.blue-grey {
  color: #4A6FA5;
}



/* AJUSTE TAMAÑO EXPRESIONES MATH */
/* Ajusta el tamaño de las fórmulas inline */
.math.inline,
.katex {
  font-size: 1em;
  /*0.9em;*/
  /* mismo tamaño que el texto principal */
  /* vertical-align: 0.4em;*/
  /* middle;
  /* para que se alinee bien con el texto */
}

/* Opcional: ajustar también fórmulas display */
.math.display {
  font-size: 0.9em;

}


/* ============================================
   Ajuste de fórmulas matemáticas en Reveal.js
   (Quarto + MathJax 3)
   ============================================ */

/* Display math un pelín más pequeño (si quieres) */
.reveal mjx-container[display="true"] {
  font-size: 0.95em;
}

/* Inline math: hereda el tamaño del texto */
.reveal mjx-container[display="inline"] {
  font-size: 0.95em !important;
  /* ← CLAVE */
  vertical-align: baseline !important;
  position: relative !important;
  top: -0.10em !important;
  color: inherit !important;
}


/* inline */
.reveal .math-small mjx-container[display="inline"] {
  font-size: 0.85em !important;
  vertical-align: baseline !important;
  position: relative !important;
  top: -0.05em !important;
  /* para alinear con texto */
}

/* display (opcional, por si usas $$) */
.reveal .math-small mjx-container[display="true"] {
  font-size: 0.85em !important;
}


/* inline */
.reveal .math-big mjx-container[display="inline"] {
  font-size: 1.5em !important;
  vertical-align: baseline !important;
  position: relative !important;
  top: -0.05em !important;
  /* para alinear con texto */
}

.reveal .math-big mjx-container[display="true"] {
  font-size: 1.5em !important;
}

/* Matemática inline: mantener tamaño normal */
.reveal .mjx-math {
  font-size: 100% !important;
}

/* Matemática en bloque (display): aumentar tamaño */
.reveal .mjx-display {
  font-size: 110% !important;
  /* Ajusta el porcentaje según lo que quieras */
}

/* Aumentar tamaño relativo de fórmulas de MathJax dentro de reveal.js */
/*.reveal .MathJax,
.reveal .mjx-chtml,
.reveal .mjx-svg {
  font-size: 110% !important;
}*/

/* Selector aproximado; puede requerir ajustar según la versión NO FUNCIONA */
.reveal .slide-menu .slide-menu-item[data-item="pdfexport"],
.reveal .slide-menu .slide-menu-panel-tools li:nth-child(1) {
  display: none !important;
}





/* ALINEACIÓN DE TEXTO  */
/* ============================================================
   1. PORTADA: título, autor y fecha centrados
   ============================================================ */

/* Centra TODO el contenido de la slide de título,
   tanto si lleva id="title-slide" como class="title-slide" */

/* La propia sección de portada */
.reveal .slides section#title-slide,
.reveal .slides section.title-slide {
  text-align: center !important;
}

/* Todo lo que haya dentro (título, autor, fecha...) */
.reveal .slides section#title-slide *,
.reveal .slides section.title-slide * {
  text-align: center !important;
}

/* Por si Quarto mete meta en divs específicos */
.quarto-title-meta,
.quarto-title-meta * {
  text-align: center !important;
}


.reveal .slides section {
  padding-right: 2rem;
  /* aumenta a 3rem si necesitas más espacio */
}




/* ============================================================
   2. TÍTULOS DE SECCIONES A LA IZQUIERDA (NO en la portada)
   ============================================================ */

.reveal .slides section:not(#title-slide):not(.title-slide) h2,
.reveal .slides section:not(#title-slide):not(.title-slide) h3,
.reveal .slides section:not(#title-slide):not(.title-slide) h4,
.reveal .slides section:not(#title-slide):not(.title-slide) h5 {
  text-align: left !important;
}

/* Título de los callouts a la izquierda */
.callout-title {
  text-align: left !important;
}


/* ============================================================
   3. TEXTO DE PÁRRAFO JUSTIFICADO (NO en la portada)
   ============================================================ */

.reveal .slides section:not(#title-slide):not(.title-slide) p {
  text-align: justify !important;
}


/* ============================================================
   4. CALLOUTS: cuerpo justificado
   ============================================================ */

/*.callout-body,
.callout-body p,
.callout-body ul,
.callout-body ol {
  text-align: justify !important;
}
  */

/* 1. Justificar SOLO los párrafos y listas normales dentro del callout */
.callout-body>p,
.callout-body>ul,
.callout-body>ol {
  text-align: justify;
}

/* 2. Asegurar que las figuras / imágenes de ilustración dentro del callout quedan centradas */
.callout-body img.illustration {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center-figure figure {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.center-flex {
  display: flex;
  justify-content: center !important;
}

.center-text {
  text-align: center !important;
}



/* INTERLINEADO - ESPACIADOS VERTICALES MENORES A <br>*/

.spacer-sm {
  height: 5px;
}

.spacer-md {
  /*opcion buena intermedia*/
  height: 10px;
}

.spacer-lg {
  height: 20px;
}

.small-space {
  margin-top: 0.3rem;
  /* puedes ajustar a 0.2, 0.4, etc. */
  margin-bottom: 0.3rem;
}

.xs-space {
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
}

.xxs-space {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}


/* Más espacio entre el texto del callout y su borde derecho */
.callout-body {
  padding-right: 1.2em !important;
  /* puedes subirlo a 1.5em o 2em si quieres */
}


/* No justificar y centrar dentro de bloques marcados como .no-justify */
.callout-body .no-justify,
.callout-body .no-justify p {
  text-align: center !important;
}


.callout-body p:has(img.illustration) {
  text-align: center !important;
}


.text-center {
  text-align: center;
}


/*icono de R*/

.bbi-r {
  display: inline-block;
  height: 1.1em;
  width: auto;
  /* alineación global con el texto */
  vertical-align: middle;
  /* desplazamiento fino hacia abajo */
  transform: translateY(-0.04em);
}


/* ESPACIADO REFERENCIAS */
.reveal .references p {
  margin-bottom: 0.8em;
}

.reveal .references div {
  margin-bottom: 0.8em;
}


.reveal .callout-body {
  font-size: 1.2em !important;
  /* aumenta el tamaño */
}



/* Pies de figura en Quarto + revealjs */
.reveal figure figcaption,
.reveal .quarto-figure .figure-caption,
.reveal .quarto-figure-caption {
  font-size: 0.8em !important;
  /* súbelo a 1.1, 1.15... si quieres más */
  color: var(--gris-texto);
  text-align: center;
}

.mjx-chtml {
  visibility: visible;
}


/* TABLAS */

thead th {
  background-color: #ecebebce !important;
  color: #334e61af !important;
  font-weight: bold;
}


/* CÓDIGO EN R */
/* SOLO afecta al summary de chunks con code-fold */
details.code-fold>summary {
  font-size: 0.5em;
  font-weight: 500;
}

/* Aumentar tamaño del código */
/*pre code {
  font-size: 1.3em;
}
  */