@font-face {
    font-family: 'manifest';
    src: url('../fonts/grunge-manifesto/Grunge Manifesto.otf') format('opentype'),
    url('../fonts/grunge-manifesto/Grunge Manifesto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'atlas';
    src: url('../fonts/atlas-grunge/AtlasGrunge.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --brand-color: #515151;
    --brand-light-color: #919191;
    --font-color: #63f7f7;
    --font-color-dark: #358585;

}

.salvame {

}

.boton-lupa {
    color: #FAFAFA;
}

.boton-lupa:hover {
    color: var(--font-color);
}

.s400300 {
    width: auto;
    height: 300px;
}

.navbar {
    background-color: var(--brand-color);
    background-image: url("../img/navbar_background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dropdown-menu-nav {
    background-color: var(--gray-dark);
    border-color: var(--brand-color);
}
.dropdown-item {
    color: var(--font-color) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--brand-light-color);
    color: var(--font-color-dark) !important;
}

#custom-tooltip {
    pointer-events: none;
}

.btn-primary {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--font-color) !important;
}
.btn-primary:hover {
    background-color: var(--brand-light-color);
    border-color: var(--brand-light-color);
    color: white !important;
}

.navbar-nav {
  flex-direction: row;
}

.navbar-text {
    color: var(--font-color) !important;
}

.nav-link {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
}

html {
    height: 100%;
}


body {
 	min-height: 100%;
 	font-family: 'Varela Round', sans-serif;
    background-color: #121212;
    color: #f0f0f0;
    position: relative;
    overflow-x: hidden;
    margin-top: 50px;
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: -1;
}

.navbar-toggler-icon {
    background-image: url("../img/toggle_button.png") !important;
    animation: parpadeo 3s infinite
}

.footer {
    background-color: transparent;
    color: var(--font-color);
    font-size: medium;
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
}

.hero {
    height: 100vh;
}
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.tabs-evento .nav-item {
    background-color: var(--brand-color);
}

.tabs-evento .nav-item:active {
    background-color: var(--brand-light-color);
}

.tabs-evento .nav-link {
    color: var(--font-color) !important;
}

.tabs-evento .nav-link.active {
    color: var(--font-color-dark) !important;
    font-weight: bold !important;
}

.navbar .dropdown-menu {
    position: absolute !important; /* Fuerza la posición absoluta */
    top: 100%; /* Posicionado justo debajo del elemento padre */
    left: auto;
    z-index: 1050; /* Asegúrate que esté por encima del resto */
}

/* Opcional: ajusta los dropdown internos para que no afecten tamaño del contenedor en colapsado */
@media (max-width: 768px) {
    #navbarSupportedContent {
        position: relative;
    }
}

.contenedor-ver-evento {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    background-color: rgba(53, 133, 133, 0.7);
    z-index: -1;
    background: var(--font-color-dark);
    background-image: url("../img/fondo.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    transform: translateY(-20%);
}
.hero-content-2 {
    position: relative;
    z-index: 2;
    text-align: center;
    transform: translateY(-5%);
    margin-bottom: 5%;
}

#about-us {
    position: relative; /* Para que el overlay sea absoluto respecto a esta sección */
    background-color: rgba(109, 91, 72, 0.75);
    padding: 4% 5% 5%;
}

#about-us .overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 3;

}


.btn-turquoise {
    background-color: #00d1b2;
    color: #121212;
    border: none;
}
.btn-turquoise:hover {
    background-color: #00b89c;
}
footer {
    background-color: #1f1f1f;
    padding: 20px 0;
    position: relative;
    z-index: 1;
}

.navbar {
	background-color: #1f1f1f;
    overflow: hidden;
    height: auto;
}

.navbar-brand {
    padding: 0;
    color: var(--font-color) !important;
}

.navbar-brand  img {
  height: 100px;
  width: auto;
}

.navbar-header .grupo-titulo {
    color: white;
    border-left: 1px solid white;
    position: relative;
    padding-left: 20px;    	
}

.navbar-header .navbar-toggler{
	margin-left: 20px;
}

.navbar-nav .nav-link {
    color: var(--font-color) !important;
}
.navbar-nav .nav-link:hover {
    color: #f0f0f0 !important;
}

.nav .list-group .nav-item:hover{
	border-left: none;
	font-weight: bold; 
}

.nav .list-group .nav-link{
    font-size: 14px;
}
 

#mantenimientoDiv .nav-item:hover{
	border-left: none;
	font-style:italic;
	font-weight:bold;
}

.container{
	padding: 0;
	margin: 10px 5px 0px 5px;
}

ul.pagination li.active a.page-link {
    color: white;
    background-color: var(--font-color-dark) !important;
    border-color: var(--font-color-dark) !important;
}

ul.pagination li.active a.page-link:hover {
    color: white;
    background-color: var(--font-color) !important;
}

ul.pagination li a:hover,
ul.pagination li a:focus {
	color: white;
	background-color: var(--font-color) !important;
}

.tabla-tribu {
    background: #FAFAFA;
}

.valor-actual {
    font-weight: bolder;
    font-style: italic;
    color: var(--font-color-dark) !important;
}

.valor-comun {
    font-weight: normal;
    font-style: normal;
}


.contenedor-tribu {
    background: var(--font-color-dark);
    background-image: url("../img/fondo.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    box-shadow: 1px 1px 10px #CCC;
    border-radius: 5px;
    padding: 10px;
    margin-top: 120px;
    margin-bottom: 10px;
}

.contenedor-nosotros {
    background: var(--font-color-dark);
    background-image: url("../img/fondo_2.jpg");
    box-shadow: 1px 1px 10px #CCC;
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-size: 100% 100%;
    background-position: center; /* Centra la imagen en el fondo */
    border-radius: 5px;
    padding: 10px;
    margin-top: 120px;
    margin-bottom: 10px;
}

.atlas {
    margin-top: 350px;
    white-space:nowrap;
    font-family: 'atlas';
    font-size: 2.5em;
}

.contenedor-actividades {
    background: var(--font-color-dark);
    background-image: url("../img/fondo_3.jpg");
    box-shadow: 1px 1px 10px #CCC;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    top:80px;
    padding: 10px;
    margin-top: 200px;
    margin-bottom: 10px;
}

.links-layout {
    color:var(--font-color);
}

.links-layout:hover {
    color: var(--font-color-dark);
}

.custom-bg {
    min-width: 250px;
    min-height: 200px;
    background-image: url("../img/fondo.jpg");
    background-size: 100% 100%; /* La imagen cubre toda la tarjeta */
    background-position: center; /* Centrado */
    background-repeat: no-repeat; /* No se repite */
    color: white; /* Para que el texto sea visible si la imagen es clara */
    padding: 20px; /* Un poco de padding si quieres */
}

.custom-bg-alias {
    min-width: 450px;
    min-height: 400px;
    background-image: url("../img/data_alias.jpg");
    background-size: 100% 100%; /* La imagen cubre toda la tarjeta */
    background-position: center; /* Centrado */
    background-repeat: no-repeat; /* No se repite */
    color: white; /* Para que el texto sea visible si la imagen es clara */
    padding: 20px; /* Un poco de padding si quieres */
}

.contenedor-ver-evento {
    padding: 10px;
    margin-top: 120px;
}

.jumbotron {
    background: var(--font-color-dark) !important;
}

.btn-danger {
    background: #8A7030;
    color: var(--font-color);
    border-color: #8A7030;
}

.btn-danger:hover {
    background: rgba(250, 140, 60, 0.73);
    border-color: rgba(250, 140, 60, 0.73);
}

.boton-tabla {
	padding: 0px;
	padding-left: 5px;
}

.boton-lupa {
	margin-bottom: 10px;
}

.lupa-buscar-contenido {
	font-size:42px;
}


.fila-seleccionada{
	background-color: var(--brand-color);
}

.message-success {
   margin-top: 25px;
   background-color: var(--green);
   color:white;
   font-style:italic;
   font-size: 20px;
   text-align: center;
   -webkit-animation-duration: 5s;animation-duration: 5s;
   -webkit-animation-fill-mode: both;animation-fill-mode: both;
}

.message {
   margin-top: 25px;
   background-color: var(--brand-color);
   color:white;
   font-style:italic;
   font-size: 20px;
   text-align: center;
   -webkit-animation-duration: 5s;animation-duration: 5s;
   -webkit-animation-fill-mode: both;animation-fill-mode: both;
}


.message-error {
   margin-top: 25px;
   background-color: var(--red);
   font-style:italic;
   font-size: 20px;
   text-align: center;
   -webkit-animation-duration: 5s;animation-duration: 5s;
   -webkit-animation-fill-mode: both;animation-fill-mode: both;
}

.message-warning {
   margin-top: 25px;
   background-color: var(--yellow);
   font-style:italic;
   font-size: 20px;
   text-align: center;
   -webkit-animation-duration: 5s;animation-duration: 5s;
   -webkit-animation-fill-mode: both;animation-fill-mode: both;
}

@-webkit-keyframes fadeOut {
   0% {opacity: 1;}
   100% {opacity: 0;}
}

@keyframes fadeOut {
   0% {opacity: 1;}
   100% {opacity: 0;}
}

.fadeOut {
   -webkit-animation-name: fadeOut;
   animation-name: fadeOut;
}

.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}
.text-center{
	text-align: center;
}

.custom-file-input,
.custom-file-label::after {
    content: "Seleccionar" !important;
}


.checkbox-group .form-check {
	margin-bottom: 10px;
}

.card {
 	border-top: 2px solid #dee2e6;
    border-radius: 0;
    margin-bottom: 10px;
    
}
.custom-card {
 	border: none;
}

.menu-descarga{
	max-height: 100px;
	max-width: 300px;
}

.header-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.opacidad-1 {
    opacity: 80%;
}

.opacidad-2 {
    opacity: 60%;
}

.opacidad-3 {
    opacity: 40%;
}

.opacidad-4 {
    opacity: 20%;
}

.opacidad-5 {
    opacity: 1%;
}

.dropdown-menu {
    z-index: 1051 !important;
}

.navbar {
    overflow: visible !important;
}

.espacio-participante {
    padding: 10px;
}

.embed-responsive-pdf {
    position: relative;
    padding-bottom: 75%; /* Aspect ratio 4:3 */
    height: 0;
    overflow: hidden;
}
.embed-responsive-pdf iframe,
.embed-responsive-pdf embed,
.embed-responsive-pdf object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.index-text {
    position: absolute;
    white-space: nowrap;
    top: 72.5%;
    margin-left: 50%;
    margin-right: 50%;
    transform: translateX(-50%);
    color: rgba(99,247,247,0.8);
    font-size: 1.2em;
    font-family: 'atlas';
    text-align: center;
}

.about-us-slogan {
    position: relative;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(247,247,247,0.8);
    font-size: 2em;
    font-family: 'atlas';
    text-align: center;
}

.sponsor-img {
    width: 200px;
    height: auto; /* mantiene proporción */
    display: block; /* para que no tenga espacio extra abajo */
    margin-left: 5px;
    background-color: transparent;
}

.sponsor-img-principal {
    width: 100%; /* toma toda la anchura del contenedor */
    max-width: 100px; /* no excederá los 100px */
    height: auto;
    margin-left: 5px;
    background-color: transparent;
    display: flex;
    flex-wrap: wrap; /* Permite que las imágenes pasen a la siguiente fila */
    justify-content: start; /* Alineamiento a la izquierda */
    gap: 10px; /* Espacio entre imagenes */
}

#logo img {
    display: block;
    margin: 0 auto; /* centra la imagen */
    max-width: 300px; /* ajusta según necesidad */
    white-space: nowrap;
}

@media (min-width: 400px) {
    .index-text {
        font-size: 1.5em;
    }
}

@media (min-width: 768px) {
    body {
        padding-top: 1px;
    }

    .contenedor-tribu {
        margin-top: 180px;
    }
    .hero-content {
        transform: translateY(-200%);
    }
    .hero-content-2 {
        transform: translateY(-8%);
    }
    .index-text{
        font-size: 2.5em;
    }
}

@media (min-width: 920px) {
    .hero-content-2 {
        transform: translateY(5%);
    }
    .index-text{
        font-size: 3em;
    }

}

@media (min-width: 1100px) {
    .contenedor-tribu {
        margin-top:0px;
    }
    .contenedor-ver-evento {
        margin-top:0px;
    }
    .index-text{
        font-size: 6em;
    }
}

@media (min-width: 1200px) {
    .hero-content-2 {
        transform: translateY(15%);
    }

}

@media (max-width: 438px) {
    .navbar-text  {
        font-size: 15px; !important;
    }
}


@media (max-width: 350px) {
    .navbar-text  {
        font-size: 8px; !important;
    }
    .index-text{
        font-size: 1em;
    }
}

@media (max-width: 380px) {
    .navbar-text  {
        font-size: 12px; !important;
    }
}

@media (min-width: 1024px) {
    .nav  {
        font-size: 20px; !important;
    }
    .contenedor-tribu {
        margin-top: 100px;
    }
    .contenedor-ver-evento {
        margin-top: 100px;
    }
}


.custom-tooltip-pay-trigger {
    font-weight: bold; /* Hace el texto en negrita */
    color: #FAFAFA; /* Cambia el color del texto */
    background-color: var(--font-color-dark); /* Fondo destacado */
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado si quieres */
    animation: parpadeo 3s infinite;
}
.custom-tooltip-pay-trigger:hover {
    background-color: var(--font-color);
}

@keyframes parpadeo {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}


.img-view-event {
    max-height: 200px;
    width: auto;
}

@media (max-width: 576px) { /* Bootstrap 'sm' empieza en 576px */
    .sponsor-img-principal {
        max-width: 80px; /* O el tamaño que prefieras */
    }
}