/* login.css - VERSIÓN QUE FUNCIONA EN MÓVIL */
:root {
  --op-login-border: #e5e7eb;
  --op-login-muted: #6b7280;
  --op-blue: #007aff;
}

body.login {
  background: #f5f5f7;
  font-family: -apple-system, sans-serif;
  display: flex;
  align-items: center; /* CENTRADO - funciona bien en móvil */
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

#login {
  width: 380px;
  max-width: 100%;
  padding: 0;
}

#login h1 {
  display: none;
}

.op-login-new-structure {
  margin-bottom: 25px;
}

.op-register-top-card {
  margin-bottom: 15px;
}

.op-register-main-btn {
  display: block;
  background: white;
  color: #007aff;
  padding: 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid #007aff;
  text-align: center;
  font-weight: 600;
}

.op-register-line1 {
  font-size: 13px;
  color: #666;
  display: block;
}

.op-register-line2 {
  font-size: 17px;
  font-weight: 700;
  color: #007aff;
  display: block;
  margin-top: 3px;
}

.op-login-separator-text {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin: 15px 0 20px;
}

.op-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

.op-gicon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%234285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="%2334A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="%23FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="%23EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>') no-repeat center/contain;
}

.op-divider-new {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin: 20px 0;
  position: relative;
}

.op-divider-new::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #ddd;
}

.op-divider-new span {
  background: #f5f5f7;
  padding: 0 15px;
  position: relative;
  font-weight: 500;
}

.login form {
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 25px;
  margin-top: 10px;
}

.login form label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  display: block;
  font-weight: 600;
}

.login form input[type="text"],
.login form input[type="password"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.wp-core-ui .button-primary {
  width: 100%;
  padding: 14px;
  background: #007aff;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  font-size: 16px;
  margin-top: 20px;
}

/* Ocultar cosas de WordPress */
#backtoblog, #nav, .language-switcher {
  display: none;
}

/* Para móviles - esto SÍ funciona */
@media (max-width: 480px) {
  body.login {
    padding: 10px;
    align-items: flex-start; /* En móvil empieza desde arriba */
    padding-top: 20px; /* Espacio arriba */
  }
  
  #login {
    width: 100%;
  }
}

/* Para escritorio con pantallas cortas */
@media (min-width: 481px) and (max-height: 700px) {
  body.login {
    align-items: flex-start;
    padding-top: 20px;
  }
}
/* AÑADE ESTO AL FINAL DE TU login.css */

/* SOLUCIÓN DEFINITIVA PARA MÓVIL */
@media (max-width: 768px) {
    body.login {
        /* Forzar que el contenido empiece visible */
        padding-top: env(safe-area-inset-top, 20px) !important;
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        min-height: 100vh !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #login {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        min-height: 100vh !important;
    }
    
    .op-login-new-structure {
        padding-top: 10px !important;
    }
    
    /* Hacer el botón MÁS visible */
    .op-register-top-card {
        background: #f5f5f7 !important;
        padding: 10px 0 5px 0 !important;
        margin-bottom: 15px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
    
    .op-register-main-btn {
        border-width: 3px !important;
        font-size: 16px !important;
    }
    
    /* Prevenir zoom automático en inputs iOS */
    @supports (-webkit-touch-callout: none) {
        input[type="text"],
        input[type="password"] {
            font-size: 16px !important; /* iOS no hace zoom si es 16px o más */
        }
    }
    
    /* Deshabilitar acciones de toque largo que puedan abrir teclado */
    input {
        touch-action: manipulation;
    }
}

/* Para Safari iOS específicamente */
@supports (-webkit-touch-callout: none) {
    body.login {
        /* Safari necesita esto para no hacer cosas raras */
        -webkit-user-select: none;
        user-select: none;
    }
    
    input[type="text"],
    input[type="password"] {
        /* Prevenir zoom automático de Safari */
        font-size: 16px !important;
        max-height: 44px !important; /* Tamaño mínimo táctil */
    }
}

/* Cuando el teclado está abierto */
@media (max-height: 500px) {
    body.login {
        align-items: flex-start !important;
        padding-top: 5px !important;
    }
    
    .op-register-top-card {
        position: relative !important;
        top: 0 !important;
    }
}