/* Estilos Generales */
 body {
     font-family: 'FamiliaTipograficaAncizar', sans-serif;
     background-color: #03A64A;
     /* Fondo Oscuro Tecnológico */
     color: #e5e5f7;
     /* Texto Claro */
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     margin: 0;
     position: relative;
     overflow: hidden;
     background-image: url('./media/image/index.png');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     background-attachment: fixed;
 }

 /* Contenedor principal de la tarjeta de ingreso */
 .card-container {
     background-color: rgba(10, 134, 6, 0.2);
     padding: 40px;
     border-radius: 12px;
     width: 100%;
     max-width: 450px;
     /* Aumentamos ligeramente para acomodar el selector de ícono */
     text-align: center;
     border: 1px solid #002209;

     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
 }

 .img-logo-olimpiadas {
     width: 100%;
     max-width: 180px;
     margin-bottom: 10px;
 }

 /* Estilo del título */
 h1 {
     color: #106907;
     margin-bottom: 30px;
     font-size: 2.2em;
     letter-spacing: 1px;
 }

 h2 {
     color: #e5e5f7;
     font-size: 1.2em;
     margin-bottom: 20px;
 }

 /* Contenedor de los inputs: Usa Flexbox para alineación */
 .input-group {
     display: flex;
     gap: 10px;
     margin-bottom: 25px;
 }

 /* Input del PIN (Destacado) */
 .pin-input {
     width: 100%;
     padding: 15px;
     margin-bottom: 15px;
     border: 2px solid #167a02;
     border-radius: 6px;
     background-color: #0d120e;
     color: #47ff22; /* Texto verde neón para resaltar el código */
     font-size: 1.5em;
     text-align: center;
     letter-spacing: 8px; /* Separa los números para que parezca un código */
     font-weight: bold;
     box-sizing: border-box;
     transition: border-color 0.3s, box-shadow 0.3s;
 }

 .pin-input:focus {
     outline: none;
     border-color: #06520d;
     box-shadow: 0 0 15px rgba(71, 255, 34, 0.5);
 }

 .pin-input::placeholder {
     color: #8cbf63;
     letter-spacing: 2px;
     font-size: 0.7em;
     font-weight: normal;
 }

 /* Input de Nickname */
 input[type="text"] {
     flex-grow: 1;
     /* Ocupa el espacio restante */
     padding: 12px;
     border: 2px solid #167a02;
     border-radius: 6px;
     background-color: #1a1a2e;
     color: #e5e5f7;
     font-size: 1em;
     box-sizing: border-box;
     transition: border-color 0.3s, box-shadow 0.3s;
 }

 input[type="text"]:focus {
     outline: none;
     border-color: #06520d;
     box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
 }

 /* Selector de Ícono */
 .icon-select {
     width: 70px;
     /* Ancho fijo para el selector de ícono */
     padding: 12px 5px;
     border: 2px solid #06520d;
     /* Color de acento diferente */
     border-radius: 6px;
     background-color: #1a1a2e;
     color: #e5e5f7;
     font-size: 1.2em;
     /* Íconos un poco más grandes */
     cursor: pointer;
     box-sizing: border-box;
     appearance: none;
     /* Elimina estilos nativos de select */
     text-align: center;
 }

 /* Estilo del botón principal (Enviar) */
 button[type="submit"] {
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 6px;
     background-color: rgb(10, 134, 6);
     color: #1a1a2e;
     font-size: 1.1em;
     font-weight: bold;
     cursor: pointer;
     transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
 }

 button[type="submit"]:hover {
     background-color: #044607;
     box-shadow: 0 0 15px rgba(71, 255, 34, 0.5);
     color: white;
 }

 button[type="submit"]:active {
     transform: scale(0.98);
 }

 /* Posicionamiento del botón de Moderador */
 .moderator-button-container {
     position: absolute;
     top: 20px;
     right: 20px;
 }

 /* Estilo del botón de Moderador */
 .moderator-button {
     padding: 10px 15px;
     background-color: rgb(10, 134, 6, 0.3);
     backdrop-filter: blur(8px);
     color: white;
     border: none;
     border-radius: 6px;
     font-size: 0.9em;
     cursor: pointer;
     transition: background-color 0.3s, box-shadow 0.3s;
     text-decoration: none;
     box-shadow: 0 4px 15px rgba(10, 134, 6, 0.4);
 }

 .moderator-button:hover {
     background-color: #044607;
     box-shadow: 0 0 10px rgba(71, 255, 34, 0.5);
     transform: translateY(-1px)
 }

 /* Efecto de fondo (Mantenemos el de la vista anterior) */
 .glitch-effect::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 255, 255, 0.05);
     pointer-events: none;
     animation: glitch-pulse 10s infinite ease-in-out;
     z-index: -1;
 }

 /* @keyframes glitch-pulse { */
 /* 
    0%,
    100% {
        clip-path: inset(0 0 0 0);
    }

    10% {
        clip-path: inset(20% 0 70% 0);
    }

    20% {
        clip-path: inset(45% 0 5% 0);
    }

    30% {
        clip-path: inset(10% 0 80% 0);
    }

    40% {
        clip-path: inset(60% 0 10% 0);
    }

    50% {
        clip-path: inset(5% 0 40% 0);
    }

    60% {
        clip-path: inset(75% 0 15% 0);
    }

    70% {
        clip-path: inset(30% 0 60% 0);
    }

    80% {
        clip-path: inset(50% 0 35% 0);
    }

    90% {
        clip-path: inset(5% 0 85% 0);
    }

} */



 /* Media Query para móvil */
 @media (max-width: 600px) {
     .input-group {
         flex-direction: column;
         /* Apila los inputs en móvil */
     }

     .icon-select {
         width: 100%;
         /* El selector ocupa todo el ancho */
     }
 }