/* inicio estilo imagen zoom */
/* Estilo para el modal */
.modal-img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8); /* Fondo oscuro con opacidad */
	display: none; /* Ocultarlo por defecto */
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(10px); /* Efecto borroso */
	z-index: 1000;
}

/* Contenido del modal */
.modal-img-content {
	position: relative;
	max-width: 90%; /* Limita el tamaño de la imagen */
	max-height: 90%;
}

/* Imagen ampliada */
.modal-img-content img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Clase activa para mostrar el modal */
.modal-img.active {
	display: flex;
}

/* Cursor de la imagen zoomable */
.zoomable img {
	cursor: zoom-in;
}

/* Botón de cierre */
.close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	color: #fb8500;
	font-size: 40px;
	cursor: pointer;
	z-index: 1001;
}

.close-btn:hover {
	color: red;
}

/* final estilo imagen zoom */


div.img{
  /* border: 2px solid red; */
  text-align: center;
  & img{
    /* width: 100vw !important; */
    height: auto;
    border-radius: 10px;
    margin-top: 1em;
    margin-bottom: 1em;
  }
}

a.link {
  cursor: pointer;
}

.lst{
  & li{
    margin: 0;
    padding: 0;
  }
}


#accordionExample{
  margin-top: 1em;
}

.subtitle {
  margin-top: 0.5em;
  margin-bottom: 1em;
}

.alert-primary {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  display: none;
}

/* inicio estilo sección de código */
i.bi-copy {
  font-size: 0.95em;
  cursor: pointer;
  /* padding-left: 0.5em; */
}

/* final estilo sección de código */

.a_noStyle {
  text-decoration: none;
}

.tema_imgs_div {
  display: grid;
  row-gap: 2em;
}

.sng_img {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border-radius: 6px;
}

li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* inicio pre>code */

/* inicio otro test */
/*

Atom One Light by Daniel Gamage
Original One Light Syntax theme from https://github.com/atom/one-light-syntax

base:    #fafafa
mono-1:  #383a42
mono-2:  #686b77
mono-3:  #a0a1a7
hue-1:   #0184bb
hue-2:   #4078f2
hue-3:   #a626a4
hue-4:   #50a14f
hue-5:   #e45649
hue-5-2: #c91243
hue-6:   #986801
hue-6-2: #c18401

*/


pre {
  margin-top: 1em;
  margin-bottom: 1em;
}



.code_lightMode {
  &.hljs {
    border: 2px solid black !important;
  }

  &.hljs {
    color: #383a42 !important;
    background: #fafafa !important;
    border-radius: 6px !important;
  }

  .hljs-quote,
  .hljs-comment {
    color: #a0a1a7 !important;
    font-style: italic !important;
  }

  .hljs-doctag,
  .hljs-keyword,
  .hljs-formula {
    color: #a626a4 !important;
  }

  .hljs-section,
  .hljs-name,
  .hljs-selector-tag,
  .hljs-deletion,
  .hljs-subst {
    color: #e45649 !important;
  }

  .hljs-literal {
    color: #0184bb !important;
  }

  .hljs-string,
  .hljs-regexp,
  .hljs-addition,
  .hljs-attribute,
  .hljs-meta .hljs-string {
    color: #50a14f !important;
  }

  .hljs-attr,
  .hljs-variable,
  .hljs-template-variable,
  .hljs-type,
  .hljs-selector-class,
  .hljs-selector-attr,
  .hljs-selector-pseudo,
  .hljs-number {
    color: #986801 !important;
  }

  .hljs-symbol,
  .hljs-bullet,
  .hljs-link,
  .hljs-meta,
  .hljs-selector-id,
  .hljs-title {
    color: #4078f2 !important;
  }

  .hljs-built_in,
  .hljs-title.class_,
  .hljs-class,
  .hljs-title {
    color: #c18401 !important;
  }

  .hljs-emphasis {
    font-style: italic !important;
  }

  .hljs-strong {
    font-weight: bold !important;
  }

  .hljs-link {
    text-decoration: underline !important;
  }
}

/* inicio tema dos */
/*

Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax

base:    #282c34
mono-1:  #abb2bf
mono-2:  #818896
mono-3:  #5c6370
hue-1:   #56b6c2
hue-2:   #61aeee
hue-3:   #c678dd
hue-4:   #98c379
hue-5:   #e06c75
hue-5-2: #be5046
hue-6:   #d19a66
hue-6-2: #e6c07b

*/

.code_darktMode {
  &.hljs {
    color: #abb2bf;
    background: #282c34;
    border: 2px solid white;
    border-radius: 6px;
  }

  .hljs-comment,
  .hljs-quote {
    color: #5c6370;
    font-style: italic;
  }

  .hljs-doctag,
  .hljs-keyword,
  .hljs-formula {
    color: #c678dd;
  }

  .hljs-section,
  .hljs-name,
  .hljs-selector-tag,
  .hljs-deletion,
  .hljs-subst {
    color: #e06c75;
  }

  .hljs-literal {
    color: #56b6c2;
  }

  .hljs-string,
  .hljs-regexp,
  .hljs-addition,
  .hljs-attribute,
  .hljs-meta .hljs-string {
    color: #98c379;
  }

  .hljs-attr,
  .hljs-variable,
  .hljs-template-variable,
  .hljs-type,
  .hljs-selector-class,
  .hljs-selector-attr,
  .hljs-selector-pseudo,
  .hljs-number {
    color: #d19a66;
  }

  .hljs-symbol,
  .hljs-bullet,
  .hljs-link,
  .hljs-meta,
  .hljs-selector-id,
  .hljs-title {
    color: #61aeee;
  }

  .hljs-built_in,
  .hljs-title.class_,
  .hljs-class .hljs-title {
    color: #e6c07b;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }

  .hljs-link {
    text-decoration: underline;
  }
}

/* fin otro test */

/* :root {
  --selection: rgba(224, 146, 58, 0.35);
  --background: #242424;
  --text: #000000;
  --string: #67b26d;
  --number: #e78c45;
  --title: #9e4ee8;
  --built_in: #d54e53;
  --keyword: #e5b742;
  --function: #e0923a;
  --params: #508be5;
  --comment: green;
  --attribute: #e7c547;
}

.hljs-comment,
.hljs-quote {
  color: var(--comment);
}

/* media querys */
@media only screen and (max-width: 767px) {
  /* Reglas CSS para pantallas de celulares */
  /* red */
  /* .navbar-brand {
    background-color: red;
  } */
  div.img{
    
    & img{
      width: 75vw;
    }
   }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Reglas CSS para tablets */
  /* purple */
  /* .navbar-brand {
    background-color: purple;
  } */
  div.img{
    & img{
      width: 65vw;
    }
   }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* Reglas CSS para laptops */
  /* green */
  /* .navbar-brand {
    background-color: green;
  } */
  div.img{
    
    & img{
      width: 60vw;
    }
   }
}

@media only screen and (min-width: 1200px) {
  /* Reglas CSS para monitores ultra wide */
  /* yellow */
  /* .navbar-brand {
    background-color: yellow;
  } */
   div.img{
    & img{
      width: 50vw;
    }
   }
}