/* CSS de prt*/

/* Justificación del texto */

/*body {   text-align: justify; }*/

main.content p,
.page-content p {
  text-align: justify;
}

p {
  text-align: justify;
}

/* Mantener los títulos alineados a la izquierda */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: left;
}


.centrado {
  text-align: center !important;
}


.centradoAzul {
  /*text-align: center !important;*/
  color: blue;
  padding-left: 2em;
  padding-right: 2em;
}

.tab {
  margin-left: 2em;
}

.tab22 {
  margin-left: 2.2em;
}

.tab1 {
  margin-left: 1em;
}


.tab2 {
  margin-left: 4em;
}

.tab5 {
  margin-left: 5em;
}



.tomanota {
  color: rgb(6, 100, 6);
  /* Texto en verde */
  font-weight: 600 !important;
  /* Negrita */
  display: flex;
  /* Para alinear icono y texto */
  align-items: center;
  /* Centrado vertical del icono con el texto */
  gap: 0.3em;
  /* Espacio entre icono y texto */
}

.tomanota i {
  color: rgb(6, 100, 6);
  /* Icono del mismo color */
}

.hazlotu {
  color: rgb(6, 100, 6);
  /* Texto en verde */
  font-weight: 600 !important;
  /* Negrita */
  font-size: 0.85em;
  display: flex;
  /* Para alinear icono y texto */
  /*align-items: center;*/
  /* Centrado vertical del icono con el texto */
  gap: 0.3em;
  /* Espacio entre icono y texto */

}

.hazlotu i {
  color: rgb(6, 100, 6);
  /* Icono del mismo color */
}


/* prefijo en las expresiones de cálculo */

#eq-calc1,
#eq-calc2,
.quarto-equation-number::before {
  content: "expresión-";
}


/*=== COLOR ICONOS ======================*/


.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-blue-dark {
  color: #02366df5 !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;
}



/*=== TABLAS ========================*/
/* Paleta de colores */
:root {
  --petroleo: #0d3750;
  /* verde petróleo */
  --gris-claro: #f2f4f7;
  /* fondo gris muy suave */
}

/* Clase utilitaria para colorear texto */
.petroleo {
  color: var(--petroleo) !important;
}


/* Cabecera de todas las tablas (HTML) */
table thead th {
  background-color: var(--gris-claro) !important;
  color: var(--petroleo) !important;
}

/* Opcional: bordes más suaves en cabecera */
table thead th {
  border-bottom: 2px solid #d9e1e8 !important;
}

/* Opcional: mejorar contraste en hover de filas del cuerpo */
table tbody tr:hover {
  background-color: #fafbfc;
}



/* === CALLOUT EJERCICIO ======================================= */

/* autonumeración de ejercicios*/
.exercise .header-section-number::before {
  content: "Ejercicio ";
}

.exercise .header-section-number::after {
  content: ".";
}

.exercise .header-section-number {
  margin-left: 0em;
}



/* ============================================
   ESTILO UNIFICADO PARA PIES DE TABLA (Quarto)
   ============================================ */

.table .table-caption p:last-child,
.figure .fig-caption p:last-child,
.quarto-figure .quarto-caption p:last-child,
.quarto-figure .fig-subcap p:last-child,
.table .quarto-table-footer {
  font-size: 0.75em !important;
  /* texto más pequeño */
  color: #555;
  /* gris suave */
  margin-top: 0em;
  /* pequeño espacio */
  text-align: left !important;
  margin-left: 0 !important;
}

/* Evitar líneas horizontales bajo el pie */
.table .quarto-table-footer,
.table .quarto-table-footer p {
  border: none !important;
}

.pie-tabla {
  font-size: 0.8em;
  /* letra más pequeña */
  text-align: left;
  /* alineación a la izquierda */
  /*color: #555;*/
  color: #4f5b62;
  /* gris suave (opcional) */
  display: block;
  /* asegura que se comporte como párrafo/bloque */
  margin-top: 0.1em;
  /* pequeño espacio respecto a la tabla */
  margin-left: 0.5em;
}


.callout-body p:has(img.illustration) {
  text-align: center !important;
}



/* ================================================================
   SISTEMA DE CALLOUTS CLÍNICOS PARA ENFERMERÍA
   ================================================================ */

/* ---------------------- TAREA --------------------------------- */
.tarea {
  border-left: 4px solid #6D4C41;
  padding: 0.75em 1em;
  margin: 1em 0;
  background-color: #f7f7f7;
  font-size: 0.95em;
}

.tarea.exercise {
  text-align: justify;
}


.tarea::before {
  content: "✓ ";
  font-weight: bold;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
}

.tarea>p:first-of-type {
  display: inline;
  margin: 0;
  padding: 0;
}


/* Aplica al primer encabezado dentro del callout */
.tarea>h1:first-of-type,
.tarea>h2:first-of-type,
.tarea>h3:first-of-type,
.tarea>h4:first-of-type,
.tarea>h5:first-of-type,
.tarea>h6:first-of-type {
  display: inline;
  margin: 0;
  /* IMPORTANTÍSIMO */
  padding: 0;
}


.tarea h3 {
  font-size: 1em;
  /* Ajusta a tu gusto */
  margin: 0;
  /* Recomendado cuando los usas en línea */
}

.tarea h4 {
  font-size: 1em;
  /* Ajusta a tu gusto */
  margin: 0;
}



.tarea .math.display {
  font-size: 0.9em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}




/* ---------------------- SOLUCIÓN ------------------------------ */

.callout.solucion.callout-style-default {
  border-left: 4px solid #6D4C41 !important;
  /* mismo color que tarea */
  background-color: #f7f7f7;
  padding: 0.75em 1em;
  margin: 1em 0;
  font-size: 0.95em;
}

.callout.solucion>.callout-header {
  background-color: #F0EDEB;
  /* tono suave complementario al marrón */
  border-left: none !important;
  display: flex;
  align-items: center;
}

.callout.solucion .callout-icon {
  display: none;
}

.callout.solucion>.callout-header::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f002";
  /* lupa */
  margin-right: 8px;
  color: #1565C0;
}

.callout.solucion .callout-title {
  text-transform: uppercase;
  font-weight: bold;
  color: #1565C0;
}

.solucion h3 {
  font-size: 1em;
  /* Ajusta a tu gusto */
  margin: 0;
  /* Recomendado cuando los usas en línea */
}

.solucion h4 {
  font-size: 1em;
  /* Ajusta a tu gusto */
  margin: 0;
}

/*------------------- CALLOUT TIPO SOLUCION, PERSONALIZABLE -----*/


.callout.tsolucion.callout-style-default {
  border-left: 4px solid #6D4C41 !important;
  /* mismo color que tarea */
  background-color: #f7f7f7;
  padding: 0.75em 1em;
  margin: 1em 0;
  font-size: 0.95em;
}

.callout.tsolucion>.callout-header {
  background-color: #F0EDEB;
  /* tono suave complementario al marrón */
  border-left: none !important;
  display: flex;
  align-items: center;
}

.callout.tsolucion .callout-icon {
  display: none;
}

.callout.tsolucion .callout-title {
  text-transform: uppercase;
  font-weight: bold;
  color: #1565C0;
}

.solucion h3 {
  font-size: 1em;
  /* Ajusta a tu gusto */
  margin: 0;
  /* Recomendado cuando los usas en línea */
}

.solucion h4 {
  font-size: 1em;
  /* Ajusta a tu gusto */
  margin: 0;
}





/* ---------------------- EJEMPLO ------------------------------- */

.callout.ejemplo.callout-style-default {
  border-left: 4px solid #00796B !important;
  background-color: #f7f7f7;
  padding: 0.75em 1em;
  margin: 1em 0;
  font-size: 0.95em;
}

.callout.ejemplo>.callout-header {
  background-color: #E0F2F1;
  border-left: none !important;
  display: flex;
  align-items: center;
}

.callout.ejemplo .callout-icon {
  display: none;
}

.callout.ejemplo>.callout-header::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0eb";
  /* bombilla */
  margin-right: 8px;
  color: #00796B;
}

.callout.ejemplo .callout-title {
  text-transform: uppercase;
  font-weight: bold;
  color: #00796B;
}


/* ---------------------- CASO CLÍNICO -------------------------- */

.callout.caso.callout-style-default {
  border-left: 4px solid #0d3750 !important;
  background-color: #f7f7f7;
  padding: 0.75em 1em;
  margin: 1em 0;
  font-size: 0.95em;
}

.callout.caso>.callout-header {
  background-color: #E1F5FE;
  border-left: none !important;
  border-top: 4px solid #0d3750 !important;
  /*azul UCI*/

  /* <- evita la doble barra */
  display: flex;
  align-items: center;
  padding: 0.5em;
}

.callout.caso .callout-icon {
  display: none;
}

.callout.caso>.callout-header::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: none !important;
  /* "\f481";*/
  /* historia clínica */
  margin-right: 8px;
  color: #01579B;
}

.callout.caso .callout-title {
  text-transform: uppercase;
  font-weight: bold;
  color: #01579B;
}


/* ---------------------- NOTA ---------------------------------- */

.callout.nota.callout-style-default {
  border-left: 4px solid #F9A825 !important;
  background-color: #FFFDE7;
  padding: 0.75em 1em;
}

.callout.nota>.callout-header {
  background-color: #FFF9C4;
  border-left: none !important;
  display: flex;
  align-items: center;
}

.callout.nota .callout-icon {
  display: none;
}

.callout.nota>.callout-header::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f05a";
  /* info */
  margin-right: 8px;
  color: #F9A825;
}

.callout.nota .callout-title {
  text-transform: uppercase;
  font-weight: bold;
  color: #F9A825;
}


/* ---------------------- NOTA CLÍNICA -------------------------- */

.callout.nota-clinica.callout-style-default {
  border-left: 4px solid #1B5E20 !important;
  background-color: #E8F5E9;
  padding: 0.75em 1em;
}

.callout.nota-clinica>.callout-header {
  background-color: #C8E6C9;
  border-left: none !important;
  border-top: 4px solid #0D3B16;
  display: flex;
  align-items: center;
}

.callout.nota-clinica .callout-icon {
  display: none;
}

.callout.nota-clinica>.callout-header::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0f1";
  /* estetoscopio */
  margin-right: 8px;
  color: #1B5E20;
}

.callout.nota-clinica .callout-title {
  text-transform: uppercase;
  font-weight: bold;
  color: #1B5E20;
}


/* ---------------------- ADVERTENCIA --------------------------- */

.callout.advertencia.callout-style-default {
  border-left: 4px solid #EF6C00 !important;
  background-color: #FFF3E0;
  padding: 0.75em 1em;
}

.callout.advertencia>.callout-header {
  background-color: #FFE0B2;
  border-left: none !important;
  display: flex;
  align-items: center;
}

.callout.advertencia .callout-icon {
  display: none;
}

.callout.advertencia>.callout-header::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f071";
  /* warning */
  margin-right: 8px;
  color: #EF6C00;
}

.callout.advertencia .callout-title {
  text-transform: uppercase;
  font-weight: bold;
  color: #EF6C00;
}

/*
.callout.caso>.callout-header,
.callout.solucion>.callout-header,
.callout.ejemplo>.callout-header,
.callout.nota>.callout-header,
.callout.nota-clinica>.callout-header,
.callout.advertencia>.callout-header {
  padding-left: 16px;
}
*/

.callout>.callout-header {
  padding-left: 10px;
  /* un poco más elegante */
}


li .math.display {
  font-size: 0.85em;
}





/* === Callout ADVANCED (similar a .solucion) === */


.callout.advanced.callout-style-default {
  border-left: 4px solid #6A1B9A !important;
  border-left: 4px solid #4A148C !important;
  /* morado oscuro */
  /* color morado */
  background-color: #f7f7f7;
  padding: 0.75em 1em;
  margin: 1em 0;
  font-size: 0.95em;
}

/* Cabecera */
.callout.advanced>.callout-header {
  background-color: #F3E5F5;
  /* lila suave */
  border-left: none !important;
  display: flex;
  align-items: center;
}

/* Quarto a veces inserta su propio icono: lo ocultamos */
.callout.advanced .callout-icon {
  display: none !important;
}

/* Icono manual usando Font Awesome (Gears / Cog) */
.callout.advanced>.callout-header::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f085";
  /* icono 'fa-cog' */
  margin-right: 8px;
  color: #6A1B9A;
}

/* Título del callout */
.callout.advanced .callout-title {
  text-transform: uppercase;
  font-weight: bold;
  color: #6A1B9A;
}

/* Barra vertical izquierda DEL CUERPO (cuando está desplegado) */
.callout.advanced.callout-style-default>.callout-body {
  border-left: 4px solid #4A148C !important;
  /* morado oscuro */
}

/* (Opcional) Alinea el contenido con la barra si notas descuadre */
.callout.advanced.callout-style-default>.callout-body .callout-body-container {
  padding-left: 0.75rem;
  /* ajusta si lo ves necesario */
}

/* Cambia la barra vertical del cuerpo del callout .advanced */
.callout.advanced.callout-style-default>.callout-body {
  border-left-color: #4A148C !important;
  /* morado oscuro */
  border-left-width: 4px !important;
  border-left-style: solid !important;
}

/* Barra lateral morada en el CUERPO del callout .advanced PLEGABLE */
.callout.advanced.callout-style-default .callout-collapse>.callout-body {
  border-left: 4px solid #4A148C !important;
  /* morado oscuro */
}



/* --- Limpieza de estilos SOLO cuando se use .clean-callout --- */

.callout.clean-callout {
  /*border-left: none !important;*/
  border-left-width: 2px !important;
  border-left-style: solid !important;
  border-left: 4px solid #a4bbce !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Ocultar icono SOLO en los callouts con clean-callout */
.callout.clean-callout .callout-icon {
  display: none !important;
}

/* Quitar color del título */
.callout.clean-callout .callout-header {
  padding-left: 0 !important;
  background-color: transparent !important;
  /*#dde7f0 !important;*/
  border: none !important;
  padding-top: 0 !important;
  /*0.2rem !important;*/
  /* antes: ~0.6–1rem */
  padding-bottom: 0 !important;
  /*0.2rem !important;*/
  /*min-height: unset !important;*/
  min-height: 0 !important;
  /* por si el tema fuerza altura mínima */
}

.callout.clean-callout .callout-header .callout-title {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.1rem !important;
  color: var(--petroleo) !important;
}


/* Cuerpo también limpio */
.callout.clean-callout .callout-body {
  background-color: transparent !important;
  padding-left: 0 !important;
}

/* ESPACIADOS VERTICALES MENORES A <br>*/

.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;
}

/* COLORES PARA ICONOS */

.icon-naranja {
  color: #d8531ff5 !important;
}

.icon-red-strong {
  color: #c1121f !important;
}

.icon-red {
  color: #d9534f !important;
}

.icon-green {
  color: #2ecc71 !important;
}

.icon-green2 {
  color: #298d53 !important;
}

.icon-darkgreen {
  color: #1e7e34 !important;
}

.icon-teal {
  color: #20c997 !important;
}

.icon-blue {
  color: #007bff !important;
}

.icon-amber {
  color: #f0ad4e !important;
}

.icon-purpled {
  color: #6f42c1 !important;
}

.icon-purple {
  color: #7B1FA2;
  /* púrpura intenso */
  font-size: 1.05em;
  /* opcional: lo hace un poco más visible */
}


.icon-gray {
  color: #6c757d !important;
}

.icon-orange {
  color: #fd7e14 !important;
}