/***Custom properties***/
/**Selector de colores**/
:root {

    --first-alpha-color: rgba(138,141,143,1.00);
    --second-color: rgb(16, 75, 125);
    --second-alpha-color: rgba(20, 25, 45, 0.75);
    --four-alpha-color: rgba(255,103,31,1.00);
    --bg-color: rgb(245, 245, 245);
    --bg-alpha-color: rgba(245, 245, 245, 0.75);
}

/***Reset Styles***/
body {
    font-family: 'Roboto', sans-serif;
}



/***Bootstrap Styles***/

.bg-dark {
    background-color: var(--second-color) !important;
}

/**Prueba para botones naranjas**/
.bg-orange{
    background-color: var(--four-alpha-color) !important;
}

.carousel-caption{
    z-index: 1;
    position: absolute;
    left: 4rem;
    right: 4rem;
    top: 1rem;
    bottom: 1rem;
    padding-bottom: 3rem;
}
/**Tamaño de la imagen**/
.navbar-brand img {
    width: auto;
    /*height: 35px;*/
    height: 3rem;
}
/**Tamaño de la imagen**/
.brand img {
    width: auto;
    /*height: 35px;*/
    height: 1rem;
}
/**Efectos para el navbar**/
.nav-item{
    padding-left: 0.5rem;
    transition: all 0.3s ease-out ;
}
/**Clase para el cambio de color en los botones de etica y privacidad**/
.nav-item:hover {
    background-color: var(--four-alpha-color);
}

/***My Styles***/

.bg-second-alpha-color{
    background-color: var(--second-alpha-color);
    padding-bottom: 2rem;

}
/**Clase para las secciones de pagina - hace referencia al margen **/
.page-section{
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
/**Clase para la linea del texto canales de denuncias**/
hr.divider {
    height: 0.2rem;
    max-width: 37.25rem;
    margin: 1.5rem auto;
    background-color:  #fff;
    opacity: 1;
}
/**Clase para cambiar el color de los iconos**/
.material-icons {
    color: var(--second-color);
}
/**cuadro de vista **/
.cuadro {

  width: 600px; 
  height: auto; 
  padding: 10px; /* Espacio interno entre el texto y el borde */
  border: 2px solid #f8f6f6; /* Grosor, estilo y color del borde */
  background-color: #fffdfd; /* Color de fondo del cuadro */
  margin: 20px; /* Espacio externo alrededor del cuadro */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Sombra para darle profundidad */
}
/**contenedor del cuadro en la vista para centrar**/
.contenedor{
  display: flex;
  justify-content: center;
  align-items: center;

}


/***Media  query bootsrap***/

/* Extra small devices (portrait phones, less than 576px)*/
/* No media query for `xs` since this is the default in Bootstrap*/

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {  }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {  }

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  }