/* ===== RESET BASE ===== */
		body {
		  margin: 0;
		  background: radial-gradient(circle at 50% 20%, #1f3c8f 0%, #162d7a 40%, #0b1e4d 80%);
		  font-family: Arial, sans-serif;
		}

		/* ===== CONTENEDOR APP ===== */
		.app-container {
		  max-width: 420px;
		  margin: 0 auto;
		  min-height: 100vh;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background: transparent; /* CLAVE */
		}

		/* ===== MOBILE (usa imagen real del mockup) ===== */
		@media (max-width: 767px) {
		  body {
	      background: none;
		  }
		  .app-container {
	      background: url("../../img/fondo-1.png") no-repeat center top;
	      background-size: cover;
		  }
		}

		/* ===== HEADER ===== */
		.header-login {
		  text-align: center;
			margin-bottom: 30px;
		}

		.header-box {
		  display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 10px;
		}

		/* ===== IMÁGENES HEADER ===== */
		/* Mascota */
		.mascota {
		  width: 120px;
			display: block;
			margin: 0 auto;
		}

		/* Texto */
		.logo-texto {
		  width: 200px;
	    margin: 10px auto 0;
	    display: block;
		}

		/* Tablet */
		@media (min-width: 768px) {
		  .mascota {
		      width: 150px;
		  }

		  .logo-texto {
		      width: 240px;
		  }
		}

		/* Desktop */
		@media (min-width: 1024px) {
		  .mascota {
		      width: 140px;
		  }

		  .logo-texto {
		      width: 200px;
		  }
		}

		/* ===== CONTENIDO LOGIN ===== */
		.login-wrapper {
		  width: 100%;
		  max-width: 320px;
		}

		/* ===== TARJETA ===== */
		.card-login {
		  background: white;
		  border-radius: 25px;
		  padding: 30px 25px;
		  margin-top: 35px;
		  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
		}

		/* ===== INPUT ===== */
		.input-icon {
		  position: relative;
		}

		.icono {
		  position: absolute;
		  left: 15px;
		  top: 50%;
		  transform: translateY(-50%);
		  color: #00c2a8;
		  font-size: 14px;
		}

		.input-app {
		  width: 100%;
		  background: #1e2b7a;
		  color: white;
		  border: none;
		  padding: 12px 12px 12px 40px;
		  border-radius: 25px;
		  font-size: 14px;
		}

		.input-app::placeholder {
		  color: #cfd3ff;
		}

		/* ===== BOTÓN ===== */
		.btn-app {
		  background: #00c2a8;
		  color: white;
		  border-radius: 25px;
		  padding: 14px;
		  font-weight: bold;
		  width: 100%;
		  border: none;
		}

		/* ===== LOGOS ===== */
		.logos {
		  margin-top: 15px;
		}

		/* FILAS */
		.logos .fila {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    gap: 10px;
	    flex-wrap: nowrap;
		}

		/* FILA 2 */
		.fila-2 {
	    margin-top: 10px;
	    justify-content: center;
	    gap: 25px;
		}

		/* NORMALIZACIÓN BASE */
		.logos img {
	    max-height: 26px;
	    max-width: 80px;   
	    object-fit: contain;
		}

		/* AJUSTES INDIVIDUALES */
		.logos img[src*="defu"] {
		  max-width: 90px;
		}

		.logos img[src*="fed"] {
		  max-width: 90px;
		}

		.logos img[src*="cbk"] {
		  max-width: 60px;
		}

		/*HACER VISIBLES LOS DE ABAJO */
		.logos img[src*="ate"],
		.logos img[src*="sanyco"] {
		  max-height: 42px;
		  max-width: 70px;
		}

		/* --------- MODAL VALIDAR CODIGO --------*/
		.modal {
		  padding: 0 !important;
		}
		body.modal-open {
		  display: block !important;
		}

		.modal-dialog{
		  margin: auto !important;
		}

		/* CAJA SUPERIOR */
		.info-box {
			box-shadow: 0 8px 20px rgba(0,0,0,0.2);
		  background: linear-gradient(135deg, #1e2b7a, #162d7a);
		  border-radius: 15px;
		  padding: 20px;
		  color: white;

		  display: flex;
		  flex-direction: column;      
		  align-items: center;         
		  text-align: center;          
		}

		.icono-box {
		  background: #00c2a8;
		  width: 40px;
		  height: 40px;
		  border-radius: 50%;

		  display: flex;
		  align-items: center;
		  justify-content: center;

		  margin-bottom: 10px;   
		  margin-right: 0;       
		}

		.texto-box h6 {
		  margin: 0;
		  font-weight: bold;
		  text-align: center;
		}

		.texto-box p {
		  margin: 5px 0 0;
		  font-size: 14px;
		  text-align: center;
		}

		/* TITULO */
		.titulo-modal {
		  color: #1e2b7a;
		  font-weight: bold;
		  margin-bottom: 20px;
		}

		/* OTP INPUT */
		.otp-container {
		  display: flex;
		  justify-content: center;
		  gap: 8px;
		  margin-bottom: 20px;
		}

		.otp-input {
		  width: 45px;
		  height: 50px;
		  border-radius: 10px;
		  border: 2px solid #1e2b7a;
		  text-align: center;
		  font-size: 22px;
		  font-weight: bold;
		}

		.otp-input:focus {
		  outline: none;
		  border-color: #00c2a8;
		}

		/* BOTON */
		.btn-validar {
		  width: 80%;
		  margin: 0 auto;
		  display: block;
		}

		/* REENVIAR */
		.reenviar {
		  font-size: 13px;
		  margin-top: 15px;
		}

		.reenviar a {
		  color: #00c2a8;
		  font-weight: bold;
		}

	/* --------------- SOLO PARA TERMINOS ----------------*/
	/* BOTONES */
	.terminos-botones {
	  display: flex;
	  justify-content: space-between;
	  margin-top: 20px;
	}

	#modalTerminos .modal-dialog {
	  max-width: 420px;
	  height: 90vh;
	  margin: auto;
	}

	#modalTerminos .modal-content {
	  height: 100%;
	  border-radius: 20px;
		box-shadow: 0 15px 40px rgba(0,0,0,0.4);
	  display: flex;
	}

	#modalTerminos .modal-body {
	  display: flex;
	  flex-direction: column;
	}


	/* FONDO GENERAL DEL MODAL */
	#modalTerminos .modal-content {
	  background: linear-gradient(135deg, #1e2b7a, #0b1e4d);
	  color: #ffffff;
	}

	/*CAJA PRINCIPAL BLANCA */
	#modalTerminos .terminos-scroll {
	  flex: 1;
	  background: #ffffff;
	  color: #333;
	  border-radius: 12px;
	  padding: 15px;
	  overflow-y: auto;
	  margin-top: 10px;
	  min-height: 0;
	}

	#modalTerminos .titulo-modal {
	  color: #ffffff !important;
	  font-size: 20px;
	  font-weight: 700;
	  margin-bottom: 15px;
	}

	/* FORZAR COLOR DEL BULLET */
	#modalTerminos .terminos-scroll li::marker {
	  color: #1e2b7a;
	}	

	/* BOTON CANCELAR */
	.btn-cancelar {
	  border-radius: 25px;
	  padding: 10px 15px;
	}

	/* BOTON ACEPTAR (usa tu estilo principal) */
	.btn-aceptar {
	  border-radius: 25px;
	  padding: 10px 15px;
	}

	.titulo-modal {
	  font-size: 20px;
	  font-weight: 700;
	  margin-bottom: 10px;
	}

	.titulo-seccion {
	  font-size: 15px;
	  font-weight: 700;
	  color: #1e2b7a;
	  margin-top: 15px;
	}

	.terminos-scroll p {
	  font-size: 14px;
	  margin-bottom: 8px;
	}

	#modalTerminos .terminos-scroll ul {
	  padding-left: 18px;
	}

	#modalTerminos .terminos-scroll li {
	  color: #333;
	  margin-bottom: 6px;
	}

	/* TABLA SIMPLE */
	.tabla-beneficios {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 5px;
	  font-size: 13px;
	  margin: 10px 0;
	}

	.tabla-beneficios div {
	  padding: 5px;
	  background: #f4f6fb;
	  border-radius: 5px;
	}

	.formula {
	  font-size: 16px;
	  text-align: center;
	  margin: 15px 0;
	}

	.fraccion {
	  display: inline-block;
	  text-align: center;
	  vertical-align: middle;
	}

	.numerador {
	  display: block;
	  border-bottom: 2px solid #333;
	  padding: 2px 8px;
	}

	.denominador {
	  display: block;
	  padding-top: 2px;
	}

	.linea {
	  display: none; 
	}

	.premios-box {
	  margin: 10px 0;
	}

	.premio-item {
	  display: flex;
	  align-items: center;
	  gap: 10px;
	  padding: 12px;
	  margin-bottom: 10px;

	  background: #ffffff;
	  border-radius: 10px;
	  border-left: 5px solid #1e2b7a;
	}

	.premio-icono {
	  font-size: 20px;
	}

	.premio-info {
	  display: flex;
	  flex-direction: column;
	  font-size: 13px;
	}

	.premio-info strong {
	  color: #1e2b7a;
	}

	.premio-info span {
	  color: #00c2a8;
		font-weight: bold;
	}