/*-- NOTA: Estos temas se basan en los de rladies y los siguientes tutoriales ---*/
/*-- https://slides.silviacanelon.com/introduccion-xaringan ---*/
/*-- https://spcanelon.github.io/xaringan-basics-and-beyond---*/
/*-- https://github.com/emilyriederer/xaringan_columns ---*/
/*--  https://github.com/garthtarr/sydney_xaringan/tree/master ---*/
/*-- NOTA: Esta son los valores utilizados por el tema "rladies"---*/
/*
https://github.com/yihui/xaringan/blob/master/inst/rmarkdown/templates/xaringan/resources/rladies.css
Ve este blog para mas informacion: https://alison.rbind.io/post/2017-12-18-r-ladies-presentation-ninja/

h1, h2, h3 {
  font-weight: normal;
  color: #562457;
}
a, a > code {
  color: #88398a;
}
.remark-code-line-highlighted { background-color: rgba(136, 57, 138, 0.3); }

.inverse {
  background-color: #562457;
}
.inverse, .inverse h1, .inverse h2, .inverse h3, .inverse a, inverse a > code {
  color: #fff;
}
*/

:root{
/*-- Variables definidas de acuerdo a los colors del tema "rladies" --*/
--morado-oscuro: #562457;
--morado-claro: #88398A;
--gris: #D3D3D3;
--negro: #181818;
--blanco: #FFFFFF;
--DarkBlue:           #003087;
--Blue:               #005EB8;
--BrightBlue:         #0072CE;

--Black:              #231F20;
--DarkGrey:           #425563;
--MidGrey:            #768692;
--PaleGrey:           #E8EDEE;
--White:              #FFFFFF;

--DarkGreen:          #006747;
--Green:              #009639;
--AquaGreen:          #00A499;

--Purple:             #bf94e4;
--DarkPink:           #7C2855;
--Pink:               #AE2573;
--DarkRed:            #8A1538;
--Red:                #DA291C;

--my-blue:            #122140;
--my-yellow:          #e5bf00;
--my-gold:            #C99C00;

--my-coral:          #903030;
--my-red:            #FF3300;
--my-pink:           #c09090;
--quarto:            #9bc6da;
}
}

/* -- CUSTOM CLASSES ---------------------------------------------------------*/

/*-- Custom classes for text emphasis --*/
.blue       { color:  var(--Blue) }
.green      { color:  var(--Green) }
.pink       { color:  var(--Pink) }
.red        { color:  var(--Red) }
.warmyellow { color:  var(--WarmYellow) }
.palegrey   { color:  var(--PaleGrey)}
.my-blue    { color:  var(--my-blue) }
.my-yellow  { color:  var(--my-yellow) }
.my-gold    { color:  var(--my-gold)}
.my-red     { color:  var(--my-red) }
.my-coral   { color:  var(--my-coral) }
.my-pink    { color:  var(--my-pink) }
.my-hot-pink { background-color: #ff69b4 }
.white      { color:  var(--White) } 
.morado-claro { color: var(--morado-claro) }
.quarto { color: var(--quarto) }

.texto-grande {
    font-size: 2em;
}

.fondo-blanco { background-color: #FFFFFF }


/*-- ENLACES/ANCLAS --*/
a {
  border-bottom:      3px solid var(--morado-claro);
  line-height:        2rem;
}

a:hover { border-bottom: none; }

.inverse a {
  border-bottom:      3px solid var(--blanco);
  line-height:        2rem;
}

/*-- CODE CHUNKS --*/

/*-- Code chunk background layer --*/
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*/
}

/*--  --*/
pre code {
  background:         none;
  font-size:          18px !important;
}

/*-- BARRA HORIZONTAL --*/
hr {
  content:            '';
  display:            block;
  border:             none;
  background-color:   var(--morado-claro);
  height:             0.1em;
}

.inverse hr {
  content:            '';
  display:            block;
  border:             none;
  background-color:   var(--gris);
  height:             0.1em;
}

/*-- Esconde el numero de la diapositiva titular --*/
.titular .remark-slide-number { display: none; }


/*-- Footnote --*/
.footnote {
  position:           absolute;
  bottom:             2em;
  padding-right:      4em;
  font-size:          70%;
  line-height:        1em;
  color:              var(--White);
}


/*-- Columnas -----------------------------------------------------------*/

/*-- 3 column layout --*/
.left-col {
  width: 29%;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
}

.center-col {
  width: 29%;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
}

.right-col {
  width: 29%;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
}

.right-up {
  width: 50%;
  text-align: left;
  position: absolute;
  left: 50%;
  right: 5%;
  z-index: 9999;
  top: 2%;
  bottom: 2%;
}

.no-col-center-bottom {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0%;

}

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

.full-width {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
}


/******************
 * Slide scrolling
 * (non-functional)
 * not sure if it is a good idea anyway
slides > slide {
  overflow: scroll;
 padding: 5px 40px;
}
.scrollable-slide .remark-slide {
  height: 400px;
  overflow: scroll !important;
}
 ******************/

.scroll-box-8 {
  height:8em;
  overflow-y: scroll;
}
.scroll-box-10 {
  height:10em;
  overflow-y: scroll;
}
.scroll-box-12 {
  height:12em;
  overflow-y: scroll;
}
.scroll-box-14 {
  height:14em;
  overflow-y: scroll;
}
.scroll-box-16 {
  height:16em;
  overflow-y: scroll;
}
.scroll-box-18 {
  height:18em;
  overflow-y: scroll;
}
.scroll-box-20 {
  height:20em;
  overflow-y: scroll;
}
.scroll-output {
  height: 90%;
  overflow-y: scroll;
}

