@import "root.css";

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.ttf");
  font-weight: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Thin.ttf");
  font-weight: lighter;
}

@font-face {
  font-family: "OpenSans";
  src: url("../fonts/OpenSans-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "OpenSans";
  src: url("../fonts/OpenSans-Regular.ttf");
  font-weight: normal;
}

@font-face {
  font-family: "OpenSans";
  src: url("../fonts/OpenSans-Light.ttf");
  font-weight: lighter;
}

body, .principal{
  font-family: "OpenSans";
  /* background: rgb(18, 5, 77); */
  /* background: linear-gradient(
    133deg,
    rgba(18, 5, 65, 1) 0%,
    rgba(55, 6, 91, 1) 100%
  ); */
  background: linear-gradient(
    133deg,
    rgb(23, 37, 145) 0%,
    rgb(44, 41, 88) 100%
  );
  background-position: center;
  /* background-repeat: no-repeat; */
  color: #fff;
}

.title {
  font-family: "Roboto";
  font-weight: bold;
  font-size: 2.6rem;
}

.subtitle {
  font-family: "Roboto";
  font-size: 1.6rem;
}

.title-card {
  /* color: #dd69d2; */
  color: #FFC40B;
}

.text-card {
  opacity: 0.6;
}

.herramienta {
  background: #14074f;
  cursor: pointer;
}

.herramienta:hover {
  transform: scale(1.05);
  transition: all ease-in-out 0.2s;
  box-shadow: 0 0 15px rgba(225, 225, 225, 0.3);
}

.herramienta:hover .text-card {
  opacity: 0.8;
}

.footer-index {
  font-size: small;

}

.titulos {
  font-family: "Roboto";
  font-weight: bolder;
  color: #0072b6;
}

label {
  color: rgba(0, 0, 0, 0.7);
}

/*asignar tamaño a header y footer*/
body, html{
  height: 100%;

  
}

.principal{
  height: 100%;
}
.my-header{
  height: var(--header);
  /* background: #14074f; */
  
}

a{
  text-decoration: none;
  color: #FFFFFF;
}

.header-index  {
  background: rgba(0, 0, 0, 0.6);
 /* height: 60px; */
  height: 60px;
  position: fixed;
  width: 100%;
  z-index: 99;
  color: #FFFFFF;
  padding:  0px 13px 0px 13px;
  padding-bottom: 60px;
}

.btn-header-index{
  text-decoration: none;
  background: #FFC40B;
  padding: 5px 10px 5px 10px;
  color: #050713;
  cursor: pointer;
  border-radius: 15px;
}
.btn-header{
  text-decoration: none;
  background: #FFC40B;
  padding: 5px 10px 5px 10px;
  color: #050713;
  cursor: pointer;
  border-radius: 15px;
}


#contenedorInicio{
  padding-top: 100px;
}

.my-footer{
  height: var(--footer);
  font-size: small;
  /* background: #14074f; */
}

.my-content{
  height: calc(100% - var(--header) - var(--footer));
} 



/* ======= MEDIA QUERIES ======= */
/* Queri index*/
@media(min-height: 570px){
  .body-index, .html-index{
    height: auto;
  }
}

/* Movil */
@media only screen and (max-width: 768px)
{
  body, html{
    height: auto;
  }
  .my-content{
    height: auto;
  }
}

/*  Pantallas tablet a más  */
@media only screen and (min-width: 768px)
{
  body, html{
    height: 100%;
  }
  .my-content{
    height: calc(100% - var(--header) - var(--footer));
  }
}

/* ======== QUERIE PARA CONSULTA DE RUC ========*/
/* Movil */
@media only screen and (max-width: 768px)
{
  .body-ruc, .html-ruc{
    height:100%;
  }
  .ruc-content{
    
    height: calc(100% - var(--header) - var(--footer));
  }
}
/* Pantallas de tablet a más */
@media only screen and (min-width: 768px)
{
  .body-ruc, .html-ruc{
    height:100%;
  }
  .ruc-content{
    
    height: calc(100% - var(--header) - var(--footer));
  }
}

/* Estilos administrador */
.body-admin{
  background: #FFFFFF;
  color: #050713;
}

/* .overItem{
  width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  
} */


/* Estilos Login */
#formularioLogin{
  background: #E2E2E4;
}