@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 0.5rem;
}

p {
    color: #666;
    margin-bottom: 1.5rem;
}

label {
    display: block;
    text-align: left;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

button {
    width: 100%;
    padding: 12px;
    background-color: #D83894;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 1.5rem 0;
}

.hidden {
    display: none;
}

#resultado-div h2 {
    color: #D83894;
    margin-bottom: 0.5rem;
}
.logo-img {
    max-width: 150px; /* Ancho máximo del logo, ajústalo a tu gusto */
    height: auto;     /* Mantiene la proporción correcta de la imagen */
    margin-bottom: 1rem; /* Crea un espacio entre el logo y el título H1 */
}
.recarga-message {
    color: #888;
    font-style: italic;
    font-size: 0.9em;
    margin-top: 1.5rem;
}
.error-message {
    color: #d9534f;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    border-radius: 5px;
    padding: 10px;
    margin-top: 1rem;
}

        .modal {
            display: none; /* Oculto por defecto */
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.6); /* Fondo oscuro semitransparente */
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 30px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .modal-content h2 {
            color: #d9534f; /* Color rojo para la alerta */
        }

        .modal-content button {
            background-color: #d9534f;
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.1em;
            margin-top: 15px;
        }
        .modal-content button:hover {
            background-color: #c9302c;
        }

        /* Clase para mostrar el modal usando flexbox */
        .modal.visible {
            display: flex;
        }

        .registro-clase-link {
            margin-top: 20px;
            text-align: center;
        }

        .registro-clase-link a {
            display: inline-block;
            padding: 10px 20px;
            background-color: #5a9; /* Un color diferente */
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .registro-clase-link a:hover {
            background-color: #498;
        }

        .select-wrapper {
          position: relative;
          display: block;
          width: 100%;
          margin-bottom: 15px; /* Espacio igual al de los inputs */
        }

        /* 2. El estilo principal de nuestro <select> */
        .select-wrapper select {
          /* Reseteamos la apariencia nativa del navegador */
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;

          /* Le damos el mismo estilo que a los otros inputs */
          width: 100%;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 5px;
          background-color: #fff;
          font-size: 1em;
          cursor: pointer;

          /* Importante: Dejamos espacio a la derecha para nuestra flecha */
          padding-right: 30px;
        }

        /* Opcional: Estilo cuando el select está deshabilitado */
        .select-wrapper select:disabled {
          background-color: #f2f2f2;
          cursor: not-allowed;
        }

        /* 3. Nuestra flecha personalizada (el truco principal) */
        .select-wrapper::after {
          content: ''; /* Elemento vacío, solo para estilo */
          position: absolute;
          top: 50%;
          right: 15px;

          /* Pequeño truco con bordes para dibujar un triángulo */
          width: 0;
          height: 0;
          border: 6px solid transparent;
          border-color: #333 transparent transparent transparent;

          /* Centramos la flecha verticalmente */
          transform: translateY(-50%);

          /* Evita que se pueda hacer clic en la flecha */
          pointer-events: none;
        }