/*
 * TIPOGRAFIA
 * -------------------------------------------------------------------
 */
@font-face {
    font-family: 'Lato';
    src: url('/static/fonts/Lato-Regular.ttf') format('truetype'),
    url('/static/fonts/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Dosis';
    src: url('/static/fonts/Dosis-VariableFont_wght.ttf') format('truetype'),
    url('/static/fonts/Dosis-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Lato-Bold';
    src: url('/static/fonts/Lato-Bold.ttf') format('truetype'),
    url('/static/fonts/Lato-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

/*
 * INPUT TIPO NUMERICO SIN DECORADOR
 * -------------------------------------------------------------------
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0;
}

input[type=number] { -moz-appearance:textfield !important; }

input[type="number"]
{
    -webkit-appearance: textfield !important;
    margin: 0;
    -moz-appearance:textfield !important;
}

body {
    font-family: Lato, sans-serif;
    font-style: normal;
    font-weight: 400;
}

/*
 * TIPOGRAFIA LATO
 * -------------------------------------------------------------------
 */
.lato {
    font-family: Lato, sans-serif;
    font-style: normal;
    font-weight: 400;
}
.lato-title {
    font-family: Lato, sans-serif;
    font-style: italic;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 6.1em;
    line-height: 1.1em;
    /*border: 20px solid rgba(0, 0, 0, 0.33);*/
}

.lato-subtitle {
    font-family: Lato, sans-serif;
    font-style: italic;
    font-weight: 200;
    font-size: 2.75em;
    line-height: 2.813em;
    text-transform: capitalize;
}

/*
 * TIPOGRAFIA DOSIS
 * -------------------------------------------------------------------
 */
.dosis {
    font-family: Dosis;
    font-style: initial;
    font-weight: 400;
}

/*
 * IMAGEN DE HOME
 * -------------------------------------------------------------------
 */
.imagen{
    background-image:url('/static/img/Fondo2.png');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 2em;
}

.hud-img{
    background-image:url('/static/img/logvit.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2em 2em 34em;
    /*padding-bottom: 30em;*/
    overflow: hidden;
}

/*
 * TARJETAS DE HOME imagen1, imagen2, imagen1
 * -------------------------------------------------------------------
 */
.imagen1{
    background-image:url('/static/img/Imagen2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /*opacity: 0.7;*/
    min-height: 100%;
    max-height: 100%;
}
.imagen2{
    background-image:url('/static/img/Imagen3.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /*opacity: 0.7;*/
    min-height: 100%;
    max-height: 100%;
}
.imagen3{
    background-image:url('/static/img/Imagen4.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /*opacity: 0.7;*/
    min-height: 100%;
    max-height: 100%;
}

.input_register {
    width: 189px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-left-width: 2px;
    border-bottom-width: 2px;
    padding-left: 2px;
    padding-right: 2px;
}

.caja1{
    /*
    background-color: #0aa2c0;
    */
    border-radius: 0.813em;
    margin: 1.875em;
    background: rgba(3, 3, 3, 0.66);
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
    width:60%;
}

.caja2{
    border-radius:0.813em;
    width:30%;
    background: rgba(3, 3, 3, 0.58);
    mix-blend-mode: normal;
    box-shadow: 0em 0.25em 0.25em rgba(0, 0, 0, 0.25);
    margin-top: 28px;
    height: 548px;
    padding: 30px;
}

.no-visible {
    display: none;
}

.ms-12 {
    margin-left: 6.7rem;
}

.bg-yellow {
    background-color: #FFD42D;
}

.bg-pink {
    background-color: rgba(45, 161, 255, 0.86);

}

.list_non {
    list-style: none;
}

.d-contents {
    display: contents;
}

.btn_red {
    background-color:#e9494e;
    color: #FFFFFF;
    transition: background-color 0.3s;
}

.btn_red:hover{
    background-color: #963337;
    color: #FFFFFF;
}

.btn_red:active {
    background-color:#963337;
    color: #FFFFFF;
}

.btn_yellow {
    --bs-btn-color: #000000;
    --bs-btn-bg: #ffd42d;
    --bs-btn-border-color: #ffd42d;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #e6bb00;
    --bs-btn-hover-border-color: #e6bb00;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e6bb00;
    --bs-btn-active-border-color: #e6bb00;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ffd42d;
    --bs-btn-disabled-border-color: #ffd42d;
}

/*.btn_yellow:hover{*/
/*    background-color:#e9494e;*/
/*}*/

/*.btn_yellow:active {*/
/*  background-color:#ffd42d;*/
/*}*/

/*.btn_yellow:visited {*/
/*  background-color:#ffd42d;*/
/*}*/

.w90{
    width: 90%;
}

.bg_grey{
    background-color: #D9D9D9
}

.bg_white{
    background-color: #FFFFFF
}

h2 {
    padding-top: 1.3em;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 500;
    font-size: 2.37em;
    line-height: 1.0em;
    text-align: left;
    color: white;
    padding-left: 1.333em;
}

.img_vital{
    background-image:url('/static/img/Logo-vertical-03.png');
    width: 25em;
    height: 15.63em;
    margin-top: 10.12em;
    background-repeat: no-repeat;
    left: 3.12em;
    right: 3.5em;
    margin-right: 11.3em;
}

:root{
    --bg-nav:#E9494E;
    --bg-nav-texto:white;
    --bs-border-color: #dee2e6;

}

.bg-primary-menu {
    background-color: var(--bg-nav) !important;
}

.profile {
    width: 2em;
    border-radius: 10em 10em 10em 10em;
    height: 2em;
}

.footer_base{
    background-color: var(--bg-nav) !important;
    height: 18%;
    padding: 1.25em;
    position: fixed;
    width: 100%;
}

.terminos{
    text-align: right;
}

.logo_text{
    display:-webkit-inline-box;
}

.container-vertical{
    background-color: grey;
}

.boton_active{
    width: 84% !important;
}

body, html {
  margin:0;
  padding:0;
  height:100%;
  background-color:white;
}


.button_active .active{
    background-color: black;
    width: 15% !important;
    color: red;
}

a:active {
  color: pink;
}

ul.navbar-nav li.active {
    background-color: red !important;
}

.contenido_tabs{
    background-color: aqua;
    width: 86%;
    position: relative;
    margin-left: 185px;
    margin-top: -196px;
}

.distancia_entre_tablas{
    margin-left: 51px;
}

.contenido_principal{
    background-color: white;
}

footer{
        display: block;
}

.fondo_ul{
    background-color:#E9494E !important;
    color: white;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #ffffff;
}

#file_imagen {
    position: relative;
    display: flex;
    height: 1.1rem;
    width: 9rem;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
}

#file_imagen::before {
    border-radius: 0.5em;
    border: 0.1rem solid #606060;
    color: #606060;
    background-color: #EFEFEF;
    font-size: 0.7em;
    display: flex;
    content: 'Seleccionar Archivo';
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#file_imagen input[type="file"] {
    opacity: 0;
    width: 4rem;
    height: 1.5rem;
    display: inline-block;
}

#file_imagen_preview {
    width: 9.375em;
    height: 9.375em;
}

/**********************************/

.flip-box {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #f1f1f1;
}

.flip-box-back {
  background-color: #555;
  color: white;
  transform: rotateY(180deg);
}

.nav-pills .nav-link.active {
  background-color: #ffd42d;
  color: white;
}

.nav-tabs .nav-link.active {
      background-color: #ffd42d;
    color:white;
}

.sidebar_vertical{
    right: 0.75em;
    margin-right: 0.65em;
    position: relative;
}
.user-info {
	display: flex;
	align-items: center;
}
.user-info__img img {
	margin-right: 0.938rem;
	height: 3.44rem;
	width: 3.44rem;
	border-radius: 2.81rem;
	border: 0.18rem solid #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {

    .user-info__img img {
        margin-right: 0.5rem;
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
}

.active-circle {
	height: 0.625rem;
	width: 0.625rem;
	border-radius: 0.625rem;
	margin-right: 0.31rem;
	display: inline-block;
}

.container_add_picker{
    width:17.875em;
}

.card-principal {
    background-position: center left;
    background-size: cover;
    height: 35em;
    opacity: 0.7;
}

.card-secundario {
    background-position: center left;
    background-size: cover;
    height: calc(17.5em - var(--bs-gutter-y) / 2);
    opacity: 0.7;
}

.card-l {
    max-width: 33.75em;
    min-width: 33.75em;
}

.card-lsec {
    min-height: 11.25em;
    /*max-width: 180px;*/
}

/* Elementos de control de video personalizados */
#controles-video {
    background-color: rgb(82 82 82 / 70%);
    color: white;
    padding: 10px;
    text-align: center;
}

#controles-video button, #controles-video input {
    margin: 5px;
    background-color: transparent;
    color: white;
    border: none;
}

/* Estilos generales para los círculos */
.circle {
    width: 11.25em;
    height: 11.25em;
    border-radius: 50%;
    background: linear-gradient(135deg, #007BFF, #00A5FF);
    margin: 0 auto;
    margin-bottom: 20px; /* Espacio vertical entre círculos */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Estilos para los círculos internos */
.inner-circle {
    width: 70%; /* Un 25% más pequeño que el círculo exterior */
    height: 70%;
    border-radius: 50%;
    background: #f3f3f3;
    position: absolute;
    top: 15%; /* Centrar verticalmente en el círculo exterior */
    left: 15%; /* Centrar horizontalmente en el círculo exterior */
}

.p-14{padding:2.15rem!important}

/* Estilos para los hexagonales */
.hexagon-pattern {
    display: flex;
    justify-content: center;
}

/* Contenedor del hexágono */
.hexagon-container {
    display: flex;
    flex-direction: column; /* Apila elementos verticalmente */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    height: 100%; /* Asegura que ocupe toda la altura del hexágono */
    width: 8.5em;
    text-align: center; /* Centra el texto horizontalmente */
}

.hexagon {
    width: 9.382em;
    height: 8.125em;
    position: relative;
    margin: 0 0.125em; /* Espacio horizontal entre hexágonos */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

@media (max-width: 768px) {
    .hexagon {
        width: 4.5em;
        height: 3.9em;
    }

    .hexagon-container {
        width: 4.5em;
    }

    .hexagon-container h3 {
        font-size: 14px;
    }

    .hexagon-container span {
        font-size: 12px;
    }
}

.bg-redgradient {
    background: rgb(233,73,78);
    background: linear-gradient(90deg, rgba(233,73,78,1) 95%, rgba(233,73,78,0.8) 100%, rgba(45,161,255,0.9) 100%);
}

.bg-orangegradient {
    background: rgb(233,73,78);
    background: linear-gradient(90deg, rgba(233,73,78,0.95) 0%, rgba(255,212,45,0.9) 100%, rgba(45,161,255,1) 100%);
}

.bg-yellowgradient {
    background: rgb(255,212,45,1);
    background: linear-gradient(90deg, rgba(255,212,45,1) 0%, rgba(255,212,45,1) 100%, rgba(45,161,255,1) 100%);
}

.bg-grengradient {
    background: rgb(255,212,45);
    background: linear-gradient(90deg, rgba(255,212,45,1) 0%, rgba(255,212,45,1) 0%, rgba(45,161,255,0.7) 100%);
}

.bg-clearbluegradient {
    background: rgb(45,161,255);
    background: linear-gradient(90deg, rgba(45,161,255,0.7) 0%, rgba(45,161,255,0.8) 30%, rgba(45,161,255,0.9) 100%);
}

.bg-bluegradient {
    background: rgb(45,161,255);
    background: linear-gradient(90deg, rgba(45,161,255,0.9) 33%, rgba(45,161,255,1) 66%, rgba(45,161,255,1) 100%);
}

.custom-file-input {
    position: absolute;
    display: flex;
    height: 2.6rem;
    width: 11rem;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
}

.custom-file-input::before {
    content: 'Seleccionar miniatura';
    display: inline-block;
    background: linear-gradient(45deg, #ffd42d, #ffcc00);
    border: 1px solid #ced4da;
    border-radius: 0.313em;
    padding: 0.5em 0.75em;
    outline: none;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
}

.custom-file-input:hover::before {
    background: linear-gradient(45deg, #e6bb00, #ffd42d);
}

.custom-file-input:active::before {
    background: linear-gradient(45deg, #ccaa00, #e6bb00);
}

.custom-file-input input[type="file"] {
    opacity: 0;
    width: 4rem;
    height: 1.5rem;
    display: inline-block;
}

.btn-custom {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ffd42d; /* Cambiado a tu color preferido */
    --bs-btn-border-color: #ffd42d; /* Cambiado a tu color preferido */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e6bb00; /* Cambiado a tu color preferido */
    --bs-btn-hover-border-color: #e6bb00; /* Cambiado a tu color preferido */
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e6bb00; /* Cambiado a tu color preferido */
    --bs-btn-active-border-color: #e6bb00; /* Cambiado a tu color preferido */
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ffd42d; /* Cambiado a tu color preferido */
    --bs-btn-disabled-border-color: #ffd42d; /* Cambiado a tu color preferido */
}



@media screen and (max-width:1890px) {
    /*.prueba2{*/
    /*    background-color: #0f5132;*/
    /*}*/
     .icono-fa {
        display: none;
    }
    .texto {
        display: inline-block;
    }
}

@media screen and (max-width:470px) {
    /*.prueba2{*/
    /*    background-color: rebeccapurple;*/
    /*}*/
        .icono-fa {
        display: inline-block;
    }
    .texto {
        display: none;
    }

}