@font-face {
  font-family: 'MiFuente1';
  src: url('font/DINNextLTPro-HeavyItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'MiFuente2';
  src: url('font/DINNextLTPro-BlackItalic.ttf') format('truetype');
}

/* Preloader */
#preloader {
  background: #00c6ff url('preloader.gif') no-repeat center;
  background-size: 100px;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
}

/* Global */
body {
  margin: 0 auto;
  font-family: 'MiFuente1', sans-serif;
  background: url('images/Fondo.webp') no-repeat center center/cover;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: fadeIn 1s ease-in-out;
 
}

.extra-bg {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('images/Abajop.webp') no-repeat bottom;
  background-size: contain; 
  pointer-events: none; 
  z-index: 0;
}

@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

.container {
 position: relative;
  z-index: 1; 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  top: -100px;
}
.containert {
 position: relative;
  z-index: 1; 
  display: flex;
  flex-direction: column;
 align-items: center;
  padding: 20px;
  top: -80px;
}
.logo {
  width: 60%;
  margin-bottom: 50px;
}
.logoc {
  width: 100%;
  margin-bottom: 20px;
}
.input-group {
  display: flex;
  align-items: center;
  background: transparent; 
  
  padding: 2px;
  margin-bottom: 5px;
  width: 100%;
 
  
}

.input-group img {
  width: 100px;
  height: auto;
  margin-right: 2px;
}

.input-group input {
  flex: 1;
  height: 40px;
  border: 1px solid #9b9b9b;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  background: white;
}

.register-btn {
  background: url('images/BotonRegistro.webp') no-repeat center center;
  background-size: contain; 
  width: 100%;             
  max-width: 300px;      
  height: 80px;      
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  text-indent: -9999px;
  margin-top:20px;
}

.register-btn1 {
  background: url('images/Botonzappar.webp') no-repeat center center;
  background-size: contain; 
  width: 100%;             
  max-width: 300px;      
  height: 80px;      
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  text-indent: -9999px;
  margin-top:20px;
}
.register-btn:active {
  transform: scale(0.97);
}

.logo-text-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start !important;
 
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.side-image {
  width: 50px; 
  height: auto;
}

.text-wrapper h1 {
  font-size: 20px;
  margin: 0;
  color: #007dc0; 
  text-align: left;
}


/* Popup */
#popup {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: #4caf50;
  color: white;
  padding: 5px 5px;
  border-radius: 5px;
  font-weight: bold;
  transition: top 0.5s ease;
  z-index: 10000;
}

#popup.show {
  top: 20px;
}