/* ======== CONFIGURACIÓN GENERAL ======== */
body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #f7f7f7, #191414);
    margin: 0;
    padding: 0;
}

/* ======== MODAL ======== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background: #4f4291;
    margin: 5% auto;
    padding: 20px 30px;
    border-radius: 10px;
    width: 350px;
    color: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ======== BOTÓN CERRAR ======== */
.close-button {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #bbb;
}
.close-button:hover {
    color: white;
}

/* ======== TÍTULO ======== */
.modal-title {
    text-align: center;
    font-size: 22px;
    margin-bottom: 15px;
}

/* ======== TABS ======== */
.modal-tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
}

.tab-link {
    background: transparent;
    color: #bbb;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: bold;
}

.tab-link.active {
    color: #1db954;
    border-bottom: 2px solid #1db954;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ======== FORMULARIOS ======== */
.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: none;
    outline: none;
    background: #fffafa;
    color: #0a0a0a;
}

/* ======== ESTILO PARA CHECKBOXES Y RADIOS ======== */
/* Usa un contenedor flex para alinear el input y el texto de la etiqueta */
.checkbox-container {
    display: flex;
    align-items: center; /* Alinea verticalmente el checkbox y el texto */
    margin-top: 5px;
}

.checkbox-container label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0; /* Elimina el margen inferior del label para esta clase */
}

.checkbox-container input[type="checkbox"] {
    /* Mueve la casilla a la izquierda y le da un pequeño margen */
    margin-right: 8px; 
    width: auto; /* Restablece el ancho para el checkbox */
}

/* ======== OJO PARA CONTRASEÑA ======== */
.password-group {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-20%);
    cursor: pointer;
    font-size: 25px;
    color: #2a1010;
}
.toggle-password:hover {
    color: white;
}

/* ======== BOTONES ======== */
.btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.primary-btn {
    background: #f70202;
    color: white;
}
.primary-btn:hover {
    background: #17a74a;
}

.google-btn {
    background: white;
    color: black;
}
.google-btn:hover {
    background: #f1f1f1;
}

.facebook-btn {
    background: #1877f2;
    color: white;
}
.facebook-btn:hover {
    background: #145dbf;
}

/* ======== MENSAJES ======== */
.form-message {
    margin-top: 10px;
    font-size: 13px;
}

.form-message.info {
    font-style: italic;
    color: #bbb;
}

.form-message.success {
    color: #1db954;
}

.form-message.error {
    color: #f70202;
}

/* ======== RESPONSIVE DESIGN (Básico) ======== */
@media (max-width: 480px) {
    .modal-content {
        width: 90%;
        margin: 10% auto;
    }
}