/* Paleta de colores basada en la imagen */
:root {
    --azul-claro: #30A9E1;
    --azul-oscuro: #004F9F;
    --azul-medio: #0072CE;
    --verde: #00A859;
    --naranja: #F7941D;
    --rojo: #E30613;
    --blanco: #FFFFFF;
}

body {
    background: linear-gradient(135deg, var(--azul-claro), var(--azul-oscuro));
    color: var(--blanco);
    font-family: Arial, sans-serif;
}

h1, h2 {
    color: var(--blanco);
    text-align: center;
}

form {
    background: var(--azul-medio);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.form-floating {
    position: relative;
    margin-bottom: 1rem;
}

    .form-floating label {
        position: absolute;
        top: 10px; /* Ajuste para evitar superposición */
        left: 12px;
        background: var(--azul-medio);
        padding: 2px 5px;
        font-size: 14px;
        transition: all 0.3s;
        color: var(--blanco);
        pointer-events: none;
    }

    .form-floating input {
        padding: 10px 10px 10px 12px; /* Ajuste de padding para evitar superposición */
        height: 45px;
    }

        .form-floating input:focus + label,
        .form-floating input:not(:placeholder-shown) + label {
            top: -20px;
            font-size: 12px;
            color: var(--blanco);
        }

.form-control {
    background: var(--blanco);
    border: 1px solid var(--azul-oscuro);
    color: #333;
    padding: 10px;
    height: 45px;
}

    .form-control:focus {
        border-color: var(--blanco);
        box-shadow: 0px 0px 8px var(--blanco);
    }

.btn-primary {
    background: var(--naranja);
    border: none;
    font-weight: bold;
    transition: background 0.3s;
}

    .btn-primary:hover {
        background: var(--rojo);
    }

a {
    color: var(--blanco);
    text-decoration: none;
}

    a:hover {
        color: var(--naranja);
    }

/* Estilos adicionales para la página de registro */
.img-container {
    text-align: center;
    margin-top: 10px;
}

.img-thumbnail {
    border: 2px solid var(--blanco);
    border-radius: 10px;
}

.modal-content {
    background: var(--azul-claro);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.close {
    color: var(--blanco);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}