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

/* ----- Paleta de colores ----- */
:root {
  --azul-principal: #3849639d;
  --gris-texto: #4a4a4aef;
  --verde-acento: #2a909def;
  --azul-petroleo: #264653;
  --azul-petroleo-suave: #455963fa;
  --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);

}



/* ----- 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 {
  color: var(--azul-principal) !important;
  font-weight: 800;
}

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

.reveal .sh3 {
  color: var(--azul-principal) !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 150% !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: 500;
}

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

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

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

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

.reveal .indent {
  margin-left: 2em;
  width: 70%
}

.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("../images/lupa_azul.png");
  /* 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;
}

/* ----- 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.5rem 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: 0.90em;
  /* 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 */
  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.95em !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;
}

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

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

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


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


.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;
}


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

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