/* ==========================================================================
   OREGONS CHAT - DISEÑO DE REGISTRO REPOTENCIADO Y SIN DISTORSIÓN
   ========================================================================== */

#pantalla-registro-base {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 40px 20px !important;
    overflow-y: auto !important; /* Permite scroll si el teclado del celular tapa algo */
}

/* El logo ahora tiene un tamaño máximo blindado */
.contenedor-logo-registro {
    width: 100% !important;
    max-width: 180px !important; /* Limita el tamaño del logo */
    margin: 40px auto 30px auto !important;
    display: flex !important;
    justify-content: center !important;
}

.logo-empresa-registro {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Estilos de los formularios corregidos */
.seccion-registro-paso {
    width: 100% !important;
    max-width: 400px !important; /* No deja que el formulario se estire feo en tablets */
    text-align: center;
    color: #ffffff;
    font-family: Arial, sans-serif;
}

.seccion-registro-paso h2 {
    font-size: 22px !important;
    margin-bottom: 8px !important;
    color: #ff6b00;
}

.seccion-registro-paso p {
    font-size: 14px;
    color: #a0a0a0;
    margin-bottom: 40px;
}

/* Estética de las cajas de texto */
.grupo-input-registro {
    text-align: left;
    margin-bottom: 25px;
    width: 100%;
}

.grupo-input-registro label {
    display: block;
    font-size: 13px;
    color: #ff6b00;
    margin-bottom: 10px;
    font-weight: bold;
}

.grupo-input-registro input {
    width: 100%;
    background-color: #2d2d2d;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 14px;
    color: #ffffff;
    font-size: 16px;
    outline: none;
    transition: border 0.3s ease;
}

.grupo-input-registro input:focus {
    border: 1px solid #ff6b00;
}

.input-telefono-flex {
    display: flex;
    gap: 12px;
}

.prefijo {
    background-color: #2d2d2d;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #444;
    color: #ff6b00;
    font-weight: bold;
}

/* Botón Naranja OREGONS */
.btn-registro-naranja {
    width: 100%;
    background-color: #ff6b00;
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 16px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    transition: transform 0.1s active;
}

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

.btn-enlace {
    background: transparent;
    border: none;
    color: #888;
    margin-top: 25px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}

/* Input especial para el código OTP */
.input-otp {
    text-align: center;
    letter-spacing: 8px;
    font-size: 28px !important;
    font-weight: bold;
    color: #ff6b00 !important;
}