:root {
  --color-one: #6353C6;
  --color-two: #53A8B9;
  --color-thee: #CAFAF2;
  --color-p: #3E3D4C;
  --color-p-nota: #ff0000;
  --size-font-p: 18px;
  --color-play: #919191;
}

/* Estilos para cada clase */
body.g74,
body.g80 {
  --color-one: #5954A0;
  --color-two: #54A8BA;
  --color-thee: #EEF7F7;
  --color-p: #3E3D4C;
}

body.g75,
body.g81 {
  --color-one: #104876;
  --color-two: #3DB28A;
  --color-thee: #FBFDFC;
  --color-p: #142D46;
}

body.g76,
body.g82 {
  --color-one: #3AA8B7;
  --color-two: #E5922D;
  --color-thee: #FEF1EE;
  --color-p: #362F2D;
}

body.g77,
body.g83 {
  --color-one: #67A92F;
  --color-two: #9E7254;
  --color-thee: #F4F8E8;
  --color-p: #1C2617;
}

body.g78,
body.g84 {
  --color-one: #E72380;
  --color-two: #0093CD;
  --color-thee: #FDF2F8;
  --color-p: #351224;
}

body.g79,
body.g85 {
  --color-one: #E56461;
  --color-two: #B7B732;
  --color-thee: #FEF8F9;
  --color-p: #351515;
}

body {
  font-family: "Montserrat", sans-serif;
  background-color: #EBEBEB;
}

h1 {
  font-weight: 600;
  font-size: 40px;
  color: var(--color-one);
}

h2 {
  font-weight: 400;
  font-size: 32px;
  text-align: left;
  color: var(--color-two);
}

h3 {
  font-weight: 600 !important;
  font-size: 24px;
  color: var(--color-one) !important;
}

h3 .eror {
  font-weight: 600 !important;
  font-size: 24px;
}

.eror {
  font-weight: 600 !important;
  font-size: 24px;
  color: red !important;
}

hr {
  border: 2px solid var(--color-thee);
  opacity: 1;
  border-radius: 5px;
}

.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-one);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--color-one);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-label {
  color: var(--color-p);
}

.form-select {
  color: var(--color-one);
  border: var(--bs-border-width) solid var(--color-one);
}

.form-check-input:checked {
  background-color: var(--color-one);
  border-color: var(--color-one);
}

/* Estilo para checkbox y radio */
.form-check-input[type=checkbox],
.form-check-input[type=radio] {
  border: 1px solid var(--color-one);
  /* Borde del color definido */
}

input[type="file"]::file-selector-button {
  color: var(--color-one);
  font-weight: bold;
}

.parrafo {
  color: var(--color-p);
  font-size: var(--size-font-p);
}

.text-color {
  color: var(--color-p);
}

.parrafo-nota {
  color: #ff0000;
  font-size: var(--size-font-p);
}

.text-leyenda {
  color: var(--color-play);
  font-weight: 300;
  font-size: 14px;
  text-align: center;
  padding-top: 2em;
}

.btn-play {
  color: var(--color-play);
  font-size: var(--size-font-p);
  font-weight: 500;
}

.btn-play:hover {
  color: #3E3D4C;
}

.text-url {
  font-weight: 700;
  color: var(--color-one);
}

.text-url:hover {
  color: var(--color-two);
}

.barra {
  --bs-progress-bg: #E3E3E3;
  --bs-progress-bar-color: var(--color-one);
  --bs-progress-bar-bg: var(--color-thee);
}

.btn {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-border-width: 0;
}

.btn-accion {
  background-color: var(--color-one);
  color: #fff;
  min-width: 310px;
  font-weight: 700;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
}

.btn-eror {
  background-color: red;
  color: #fff;
  min-width: 310px;
  font-weight: 700;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
}

.btn-download {
  border: 2px solid var(--color-one);
  color: var(--color-one);
  min-width: 310px;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
}

.btn-please-wait {
  border: 2px solid var(--color-one);
  border-radius: 6px;
  min-width: 310px;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
}

.iconor {
  position: relative;
  float: right;
  vertical-align: middle;
  background-color: #fff;
  height: 38px;
  width: 38px;
  color: var(--color-one);
  padding: 10px;
  border-radius: 0 6px 6px 0;
}

.iconor-eror {
  position: relative;
  float: right;
  vertical-align: middle;
  background-color: #fff;
  height: 38px;
  width: 38px;
  color: red;
  padding: 10px;
  border-radius: 0 6px 6px 0;
}

.btn-accion:hover .iconor {
  color: var(--color-two);
}

.btn-accion:hover {
  background-color: var(--color-two);
  color: #fff;
}

.btn-download:hover {
  border: 2px solid var(--color-two);
  color: var(--color-two);
}

.btn-download:hover .iconol {
  background-color: var(--color-two);
  color: #fff;
}

.btn-eror span,
.btn-download span,
.btn-accion span {
  vertical-align: -webkit-baseline-middle;
}

.iconol {
  position: relative;
  float: left;
  vertical-align: middle;
  background-color: var(--color-one);
  height: 38px;
  width: 38px;
  color: #fff;
  padding: 10px;
  border-radius: 3px 0 0 3px;
}

.identidad {
  max-width: 500px;
  width: 100%;
}

.bloques {
  display: flex;
}

.bloque1,
.bloque2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bloque img {
  margin-bottom: 20px;
}

.iconos_bloque,
.iconos_bloque3 {
  text-align: center;
  font-size: 16px;
  color: #919191;
}

.iconos_bloque li,
.iconos_bloque3 li {
  width: 16%;
  align-content: center;
}

.iconos_bloque i,
.iconos_bloque3 i {
  font-size: 40px;
}

.iconos_bloque3 li {
  width: 33%;
}

.procces {
  color: var(--color-two);
}

.finish {
  color: var(--color-one);
}

/* Estilo para los inputs readonly */
input[readonly] {
  background-color: #e9ecef;
  /* Color gris claro similar a los disabled */
  cursor: not-allowed;
  /* Cambia el cursor a "no permitido" */
  pointer-events: none;
  /* Evita interacciones del usuario */
}

/* Estilo para botones con clase btn-outline-secondary */
.btn-outline-secondary {
  border: 2px solid #6c757d;
  /* Color del borde (similar al estilo outline-secondary) */
  border-radius: 4px;
  /* Bordes redondeados */
  padding: 3px 16px;
  /* Espaciado interno */
  transition: box-shadow 0.2s ease-in-out;
  /* Transición suave al hover */
}

@media screen and (max-width: 768px) {
  .iconos_bloque li {
    width: 45%;
  }
}

/* Aplicar solo a enlaces dentro de la lista con clase .nav */
.nav>li>a {
  text-decoration: none;
  /* Quitar subrayado */
  color: inherit;
  /* Heredar el color del contenedor */
  display: block;
  /* Hacer clickeable todo el área del <li> */
}

.square_aviso {
  color: var(--color-one);
  border: .2rem solid;
  border-radius: 10px;
}

.icon_aviso {
  color: var(--color-one);
  /* Color del icono */
  background-color: #EBEBEB;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  /* Tamaño del cuadro */
  height: 80px;
  font-size: 40px;
  /* Tamaño del icono */
  padding: 10px;
  margin: auto;
  margin-top: -40px;
}

.square_eror {
  color: red;
  border: .2rem solid;
  border-radius: 10px;
}

.icon_eror {
  display: block;
  margin: auto;
  max-width: 100px;
  margin-top: -30px;
}

.icon_bloque {
  color: var(--color-one);
  /* Color del icono */
  max-width: 130px;
}

.btn-link {
  word-wrap: break-word;
  /* Permite que las palabras largas se dividan */
  word-break: break-word;
  /* Fuerza el corte de palabras largas */
  white-space: normal;
  /* Permite el salto de línea */
  overflow-wrap: break-word;
  /* Asegura que el texto largo se ajuste */
}

.img-fluid {
  width: 100%;
  /* La imagen se ajusta al contenedor */
  max-width: 350px;
  /* No crece más allá de este tamaño */
  height: auto;
  /* Mantiene la proporción original */
  max-height: 150px;
  /* Altura máxima para evitar imágenes demasiado grandes */
  object-fit: contain;
  /* Mantiene la proporción sin recortar */
}