/* 1. PALETA DE COLORES */
	:root { 
		--navy: #001f3f !important; 
		--gold: #f1c40f !important; 
		--gold-dark: #d4ac0d !important;
		--bg-light: #f8f9fa;
		--grass: #27ae60;
	}

	/* Forzamos la altura y el padding para que el campo no se vea colapsado */
	.sigool-input-tall {
		height: 45px !important;
		padding: 10px 40px 10px 15px !important; /* Espacio extra a la derecha para el ojo */
		font-size: 1rem !important;
		border-radius: 8px !important;
		border: 1px solid #ccc !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
	.sigool-input-tall:focus {
		border-color: var(--grass) !important;
		outline: none !important;
		box-shadow: 0 0 5px rgba(0,0,0,0.1) !important;
	}
	/* Efecto sutil al pasar el mouse mejorado */
	.btn-ayuda-sigool:hover {
		transform: scale(1.1);
		background-color: #002d5b !important;
		box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
	}
	/* Ajuste de posición del ojo para campos de 45px de alto */
	.btn-eye-adjust {
		position: absolute; 
		right: 12px; 
		top: 36px; /* Ajustado para estar centrado respecto al input */
		background: none; 
		border: none; 
		color: var(--navy); 
		cursor: pointer; 
		outline: none;
		font-size: 1.2rem;
		z-index: 10;
	}

	.swal2-html-container {
		overflow-y: visible !important; 
		overflow-x: hidden !important; 
		margin: 1em 1.5em !important;
		text-align: left !important;
	}

	/* VISOR LEGAL (image_433a7a.png) */
	/* Solo este recuadro debe tener scroll interno */
	.text-start, .legal-container {
		max-height: 350px !important;
		overflow-y: auto !important;
		padding: 15px !important;
		background: #f9f9f9 !important;
		border-radius: 8px !important;
		border: 1px solid #eee !important;
		font-size: 0.85rem !important;
		line-height: 1.5 !important;
	}

	/* PROTECCIÓN DE CARDS DE INVERSIÓN (image_432054.png) */
	.card-grupo {
		border-radius: 15px !important;
		overflow: hidden !important;
		transition: transform 0.3s ease;
	}
	/* Evita que los inputs del modal deformen las cards del fondo */
	.sigool-input { 
		width: 100% !important; 
		box-sizing: border-box !important; 
		display: block !important;
	}
	.sigool-input {
		border: 1px solid #e2e8f0 !important;
		border-radius: 8px !important;
		font-size: 0.9rem !important;
		margin: 10px 0 !important;
		box-shadow: none !important;
		transition: border-color 0.3s ease;
	}
	.sigool-input:focus {
		border-color: var(--navy) !important;
	}

	.sigool-confirm {
		background-color: var(--navy) !important;
		padding: 10px 30px !important;
		border-radius: 8px !important;
		font-weight: bold !important;
	}
		/* Añade este CSS a tu archivo o bloque de estilos */
	.sigool-popup {
		border-radius: 15px !important;
		padding: 2rem !important;
	}
	.sigool-title {
		color: var(--navy) !important;
		font-weight: 800 !important;
		text-transform: uppercase;
		font-size: 1.4rem !important;
	}

	
	/* NAVBAR Y PERFIL */
	.navbar { background: var(--navy) !important; border-bottom: 3px solid var(--gold) !important; }
	.btn-gold { background-color: var(--gold) !important; color: var(--navy) !important; font-weight: 700 !important; }

	/////////////////////////////////////////////////////////////
	/* RANKING Y BADGES (Lo que faltaba) */
	.bg-navy { background-color: var(--navy) !important; }
	.text-navy { color: var(--navy) !important; font-weight: bold; }
	.text-gold { color: var(--gold) !important; }
	.badge-sigool {
		background-color: #f8f9fa !important;
		color: var(--navy) !important;
		border: 1px solid #dee2e6 !important;
	}	
	.navbar { 
		background: var(--navy) !important; 
		border-bottom: 3px solid var(--gold) !important;
		/* Añadimos una sombra suave para que resalte sobre el contenido al hacer scroll */
		box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	}

	/* Ajuste para el contenido */
	body {
		padding-top: 73px; /* Altura del navbar (70px) + el borde (3px) */
	}

	/* 2. MODAL CORE - Fondo sólido en Header */
	#modalMundial .modal-content { border-radius: 15px; overflow: hidden; border: none; }
	#modalMundial .modal-header { 
		background-color: var(--navy) !important; 
		border-bottom: 4px solid var(--gold) !important; 
	}
	#modalMundial .modal-title { 
		color: var(--gold) !important; 
		font-weight: 800 !important;
		text-transform: uppercase;
	}

	.seccion-pozo-ranking:hover {
		background: #dcfce7 !important;
		transform: scale(1.02);
		transition: all 0.2s ease;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	/* BOTÓN PREMIUM GOLD */
	.btn-gold {
		background-color: var(--gold) !important;
		border-color: var(--gold-dark) !important;
		color: var(--navy) !important;
		font-weight: 700 !important;
		text-transform: uppercase;
		transition: all 0.3s ease;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.btn-gold:hover {
		background-color: var(--gold-dark) !important;
		border-color: #b8960c !important;
		color: #000 !important;
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	}

	.btn-gold:active {
		transform: translateY(0);
	}

	/* Botón base: sin bordes ni fondo */
	.btn-icon {
		background: none;
		border: none;
		padding: 5px 8px;
		cursor: pointer;
		font-size: 1.2rem;
		transition: transform 0.2s, color 0.2s;
	}

	/* Efecto al pasar el mouse */
	.btn-icon:hover {
		transform: scale(1.2);
	}

	/* Colores específicos */
	.btn-save { color: #27ae60; }    /* Verde para guardar */
	.btn-delete { color: #e74c3c; }  /* Rojo para eliminar */
	.btn-add { color: #2ecc71; }     /* Esmeralda para añadir */
	.btn-cancel { color: #95a5a6; }  /* Gris para cancelar */

	/* Quitar el recuadro azul que pone el navegador al hacer clic */
	.btn-icon:focus {
		outline: none;
	}	
	/* BOTÓN PREMIUM NAVY */
	.btn-navy {
		background-color: #002d5c !important; /* Un navy ligeramente más claro */
		color: #ffffff !important; /* Cambia a blanco al pasar el mouse */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);	


		font-weight: 700 !important;
		text-transform: uppercase;
		transition: all 0.3s ease;
	}

	.btn-navy:hover {

		background-color: var(--navy) !important;
		border: 1px solid var(--gold) !important; /* Borde oro para que no se pierda */
		color: var(--gold) !important;
	}

	.btn-navy:active {
		transform: scale(0.98);
	}

	/* BOTÓN OUTLINE NAVY - ELEGANTE Y SUTIL */
	.btn-outline-navy {
		background-color: transparent !important;
		border: 2px solid var(--navy) !important;
		color: #fff !important;
		font-weight: 700 !important;
		text-transform: uppercase;
		transition: all 0.4s ease;
	}

	.btn-outline-navy:hover {
		/* Al pasar el mouse, se llena de Navy y el texto cambia a Oro */
		background-color: var(--navy) !important;
		color: var(--gold) !important;
		border-color: var(--navy) !important;
		box-shadow: 0 4px 10px rgba(0, 31, 63, 0.2);
	}

	.btn-outline-navy:active {
		transform: scale(0.97);
	}	
	/* Estilos adicionales para el Ranking SiGool */
	.bg-navy { background-color: var(--navy) !important; }
	.text-gold { color: #f1c40f !important; }
	.table-highlight { background-color: #f8faff !important; border-left: 5px solid var(--navy); }

	/* Badges modernos y suaves */
	.bg-success-light { background-color: #dcfce7; }
	.bg-danger-light { background-color: #fee2e2; }

	.posicion-numero {
		font-size: 0.8rem;
		font-weight: 800;
		color: #bdc3c7;
	}

	#modalRanking .table thead th {
		border-top: none;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	#modalRanking tr:hover {
		background-color: #f2f2f2;
	}
	/* Color para el icono de estrella de Bootstrap */
	.bi-star-fill {
		color: var(--gold) !important;
		/* Un pequeño filtro de brillo para que resalte sobre blanco */
		filter: drop-shadow(0 0 1px rgba(184, 150, 12, 0.5)); 
		font-size: 1.1rem;
		vertical-align: middle;
	}	

	/* Reseteo para el contenedor padre */
	#authSection {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	/* La cápsula dorada */
	.user-profile-box-nav {
		background: rgba(0, 31, 63, 0.7) !important; /* Fondo navy semi-transparente */
		border: 1.5px solid var(--gold) !important;
		border-radius: 50px !important;
		padding: 4px 12px !important;
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
	}

	.user-name-text-nav {
		color: var(--gold) !important;
		font-size: 0.85rem !important;
	}
	/* Contenedor principal del Modal */
	.modal-sigool {
		display: none; 
		position: fixed; 
		/*  z-index: 99999 !important;  Por encima de todo */
		left: 0;
		top: 0;
		width: 100%; 
		height: 100%; 
		overflow: auto; 
		background-color: rgba(0, 31, 63, 0.85); /* Azul Navy con transparencia */
		backdrop-filter: blur(4px); /* Efecto de desenfoque al fondo */
	}

	/* Caja de contenido */
	.modal-content-sigool {
		background-color: #ffffff;
		margin: 5% auto;
		padding: 0;
		border: none;
		width: 90%;
		max-width: 650px;
		border-radius: 15px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.5);
		animation: slideIn 0.3s ease-out;
		overflow: hidden;
	}

	/* Cabecera del Modal */
	.modal-header-sigool {
		background-color: var(--navy, #001f3f);
		color: white;
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* Estilo de la tabla */
	.tabla-sigool {
		width: 100%;
		border-collapse: collapse;
		margin: 20px 0;
	}

	.tabla-sigool th {
		background-color: #f8f9fa;
		color: #333;
		padding: 12px;
		text-align: left;
		border-bottom: 2px solid #dee2e6;
	}

	.tabla-sigool td {
		padding: 12px;
		border-bottom: 1px solid #eee;
	}

	/* Animación de entrada */
	@keyframes slideIn {
		from { transform: translateY(-50px); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}


	.avatar-circle {
		width: 35px; height: 35px; 
		background: var(--gold);b
		color: var(--navy); 
		border-radius: 50%;
		display: flex; 
		align-items: center; 
		justify-content: center;
		font-weight: bold; 
		border: 2px solid white;
	}	

	/* 5. Icono de Salida */
	.btn-exit-nav {
		color: var(--gold) !important;
		transition: transform 0.2s;
	}
	.btn-exit-nav:hover {
		transform: scale(1.2);
		color: #fff !important;
	}
	/* 3. CABECERA DEL GRUPO */
	.grupo-header {
		background-color: var(--navy) !important;
		color: white !important;
		border-left: 10px solid var(--gold) !important;
		padding: 15px 20px;
		border-radius: 8px;
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#nombreGrupo { color: var(--gold) !important; font-weight: 800; font-size: 1.25rem; }
	.card-footer-pro {
		background-color: #f8f9fa;
		text-align: center;
	}

	.btn-gestion-inv {
		width: 100%;
		background-color: #27ae60;
		color: white;
		border: none;
		padding: 6px;
		border-radius: 4px;
		font-size: 0.8rem;
		cursor: pointer;
		font-weight: bold;
		transition: background 0.2s;
	}

	.btn-gestion-inv:hover {
		background-color: #219150;
	}
	/* 4. CARDS DE PARTIDOS (3 POR FILA / DISEÑO VERTICAL) */
	.partido-card {
		background: #ffffff !important;
		border-radius: 10px;
		border: 1px solid #e0e0e0 !important;
		overflow: hidden; /* Importante para el header de la card */
		height: 100%;
		box-shadow: 0 4px 6px rgba(0,0,0,0.05);
		transition: transform 0.2s;
	}
	.partido-card:hover { transform: translateY(-5px); border-color: var(--gold) !important; }
	/* Forzamos que CUALQUIER imagen dentro de la card de partido sea pequeña */
	/* Esto arregla la Fase 2 automáticamente */
	.partido-card img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}
	/* Ajuste para que el buscador combine con el estilo de SiGool */
	#busquedaGrupo {
		border-color: #dee2e6;
		font-size: 0.9rem;
	}

	#busquedaGrupo:focus {
		box-shadow: none;
		border-color: var(--gold);
	}

	.input-group-text {
		border-color: #dee2e6;
	}
	/* TÍTULO DE LA CARD (2 Líneas) */
	.card-header-pro {
		background-color: var(--navy);
		padding: 8px 10px;
		border-bottom: 3px solid var(--gold);
		text-align: center;
	}

	.card-grupo {
		border: none; border-radius: 15px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		background: white; overflow: hidden;
	}
	.card-grupo:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
	}
	.card-header-navy {
		background: var(--navy); color: white;
		font-weight: bold; text-align: center; padding: 12px;
	}

	.header-fecha { 
		color: var(--gold) !important; 
		font-size: 0.75rem; 
		font-weight: 800; 
		margin: 0; 
		text-transform: uppercase;
	}
	.header-estadio { 
		color: #ffffff; 
		font-size: 0.7rem; 
		margin: 0; 
		white-space: nowrap; 
		overflow: hidden; 
		text-overflow: ellipsis; 
	}

	/* 5. INPUTS DE GOLES (Ajustados para card pequeña) */
	.goles-input {
		width: 45px !important;
		height: 35px;
		border: 2px solid #dee2e6 !important;
		text-align: center;
		font-weight: bold;
		border-radius: 6px;
	}
	.goles-input:focus {
		border-color: var(--gold) !important;
		background-color: #fffdf0 !important;
		outline: none;
	}
	/* Reutilizando tu clase de goles con ajuste de tamaño para las 3 columnas */
	.goles-input {
		width: 45px !important;
		height: 35px !important;
		text-align: center;
		font-weight: bold;
		border: 2px solid #dee2e6 !important;
		border-radius: 6px;
	}

	.goles-input:focus {
		border-color: var(--gold) !important;
		background-color: #fffdf0 !important;
		outline: none;
	}
	/* 6. TABLAS Y RESUMEN */
	.tabla-resumen-wrapper {
		margin-top: 30px;
		border-radius: 12px;
		overflow: hidden;
		border: 1px solid var(--navy) !important;
	}
	.tabla-sigool thead th { background-color: var(--navy) !important; color: var(--gold) !important; }

	/* 7. BANDERAS (Ajuste para no deformar) */
	/* Ajuste Estricto de Banderas */
	/* Forzamos el tamaño del contenedor */
	.bandera-box {
		width: 32px !important;
		height: 20px !important;
		min-width: 32px !important;
		overflow: hidden !important;
		border-radius: 3px !important;
		border: 1px solid #ddd !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		background: #eee;
	}

	.bandera-img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important; /* Corta la imagen para llenar el box sin deformar */
		display: block !important;
	}

	/* Ajuste del nombre del equipo para que no empuje la bandera */
	.nombre-equipo {
		font-size: 0.85rem !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 120px; /* Evita que nombres largos rompan la card */
	}

	/* 8. AJUSTES MÓVIL */
	@media (max-width: 768px) {
		.nombre-equipo { font-size: 0.8rem; }
		.goles-input { width: 40px !important; }
		#nombreGrupo { font-size: 1rem; }
	}