/**
 * Personalización del Login - OCRAI/MeterBee
 * Solo CSS - Sin modificar templates
 */

/* ===============================================
   SOLO APLICAR EN PÁGINAS DE LOGIN
   =============================================== */

/* Resetear fondo oscuro SOLO en login y páginas relacionadas */
body:has(.for-login),
body:has(.for-signup),
body:has(.for-forgot),
body:has(.for-login-with-email-link) {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%) !important;
  color: #2c3e50 !important;
}

/* ===============================================
   LOGO METERBEE - Inyectado con CSS
   =============================================== */

.for-login .page-card-head::before,
.for-signup .page-card-head::before,
.for-forgot .page-card-head::before,
.for-login-with-email-link .page-card-head::before {
  content: '' !important;
  display: block !important;
  width: 220px !important;
  height: 70px !important;
  margin: 0 auto 1rem !important;
  background-image: url('/assets/ocrai/images/meterbee-logo.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Ocultar logo original de Frappe */
.for-login .app-logo,
.for-signup .app-logo,
.for-forgot .app-logo,
.for-login-with-email-link .app-logo {
  display: none !important;
}

/* ===============================================
   TÍTULO - Cambiar texto
   =============================================== */

.for-login .page-card-head h4 {
  color: #2c3e50 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-bottom: 1.5rem !important;
}

/* Ocultar texto "Login to Frappe" y reemplazar */
.for-login .page-card-head h4::before {
  content: 'Sistema OCRAI para SERNAPESCA' !important;
  display: block !important;
}

.for-login .page-card-head h4 {
  font-size: 0 !important;
}

.for-login .page-card-head h4::before {
  font-size: 1.25rem !important;
}

/* ===============================================
   CARD DEL FORMULARIO
   =============================================== */

.for-login .login-content.page-card {
  max-width: 450px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.for-login .page-card-body {
  padding: 1.5rem !important;
}

.for-login .page-card-actions {
  padding: 0 1.5rem 1.5rem !important;
}

/* ===============================================
   INPUTS - Tamaño moderado
   =============================================== */

.for-login .form-control {
  padding: 0.75rem 1rem 0.75rem 2.75rem !important;
  font-size: 0.9375rem !important;
  min-height: 46px !important;
  background: #f8f9fa !important;
  border: 2px solid #e9ecef !important;
  border-radius: 8px !important;
  color: #2c3e50 !important;
  transition: all 0.2s ease !important;
}

.for-login .form-control:focus {
  background: #ffffff !important;
  border-color: #FFDE00 !important;
  box-shadow: 0 0 0 3px rgba(255, 222, 0, 0.1) !important;
  outline: none !important;
}

.for-login .form-control::placeholder {
  color: #94a3b8 !important;
}

/* Iconos - Centrados verticalmente */
.for-login .field-icon {
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
}

.for-login .form-control:focus ~ .field-icon {
  color: #FFDE00 !important;
}

/* Asegurar que los campos tengan posición relativa */
.for-login .email-field,
.for-login .password-field {
  position: relative !important;
}

/* Toggle password */
.for-login .toggle-password {
  color: #94a3b8 !important;
  font-size: 0.875rem !important;
}

.for-login .toggle-password:hover {
  color: #FFDE00 !important;
}

/* ===============================================
   BOTÓN - AMARILLO METERBEE
   =============================================== */

.for-login .btn-login {
  min-height: 46px !important;
  padding: 0.75rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  background: #FFDE00 !important;
  color: #2c3e50 !important;
  border: none !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.for-login .btn-login:hover {
  background: #e6c800 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 222, 0, 0.3) !important;
}

.for-login .btn-login:active {
  transform: translateY(0) !important;
}

/* ===============================================
   LINKS Y TEXTOS
   =============================================== */

.for-login .forgot-password-message a {
  color: #94a3b8 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
}

.for-login .forgot-password-message a:hover {
  color: #FFDE00 !important;
}

.for-login .sign-up-message {
  color: #64748b !important;
  font-size: 0.9375rem !important;
}

.for-login .sign-up-message a {
  color: #FFDE00 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.for-login .sign-up-message a:hover {
  text-decoration: underline !important;
}

/* ===============================================
   BOTÓN DE EMAIL LINK
   =============================================== */

.for-login .login-divider {
  color: #94a3b8 !important;
  font-size: 0.875rem !important;
  margin: 1.25rem 0 !important;
}

.for-login .btn-login-option {
  min-height: 46px !important;
  background: #ffffff !important;
  border: 2px solid #e9ecef !important;
  color: #64748b !important;
  border-radius: 8px !important;
  padding: 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.for-login .btn-login-option:hover {
  border-color: #FFDE00 !important;
  background: rgba(255, 222, 0, 0.05) !important;
  color: #2c3e50 !important;
}

/* ===============================================
   OCULTAR NAVBAR EN LOGIN
   =============================================== */

body:has(.for-login) .navbar,
body:has(.for-login) .footer,
body:has(.for-signup) .navbar,
body:has(.for-signup) .footer,
body:has(.for-forgot) .navbar,
body:has(.for-forgot) .footer,
body:has(.for-login-with-email-link) .navbar,
body:has(.for-login-with-email-link) .footer {
  display: none !important;
}

/* ===============================================
   APLICAR ESTILOS A TODAS LAS SECCIONES
   =============================================== */

/* Contenedor */
.for-signup,
.for-forgot,
.for-login-with-email-link {
  max-width: 450px !important;
  margin: 0 auto !important;
}

/* Headers */
.for-signup .page-card-head,
.for-forgot .page-card-head,
.for-login-with-email-link .page-card-head {
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}

.for-signup .page-card-head h4,
.for-forgot .page-card-head h4,
.for-login-with-email-link .page-card-head h4 {
  color: #2c3e50 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}

/* Cards */
.for-signup .login-content.page-card,
.for-forgot .login-content.page-card,
.for-login-with-email-link .login-content.page-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.for-signup .page-card-body,
.for-forgot .page-card-body,
.for-login-with-email-link .page-card-body {
  padding: 1.5rem !important;
}

.for-signup .page-card-actions,
.for-forgot .page-card-actions,
.for-login-with-email-link .page-card-actions {
  padding: 0 1.5rem 1.5rem !important;
}

/* Inputs */
.for-signup .form-control,
.for-forgot .form-control,
.for-login-with-email-link .form-control {
  padding: 0.75rem 1rem 0.75rem 2.75rem !important;
  font-size: 0.9375rem !important;
  min-height: 46px !important;
  background: #f8f9fa !important;
  border: 2px solid #e9ecef !important;
  border-radius: 8px !important;
  color: #2c3e50 !important;
  transition: all 0.2s ease !important;
}

.for-signup .form-control:focus,
.for-forgot .form-control:focus,
.for-login-with-email-link .form-control:focus {
  background: #ffffff !important;
  border-color: #FFDE00 !important;
  box-shadow: 0 0 0 3px rgba(255, 222, 0, 0.1) !important;
  outline: none !important;
}

/* Iconos */
.for-signup .field-icon,
.for-forgot .field-icon,
.for-login-with-email-link .field-icon {
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  width: 18px !important;
  height: 18px !important;
}

.for-signup .form-control:focus ~ .field-icon,
.for-forgot .form-control:focus ~ .field-icon,
.for-login-with-email-link .form-control:focus ~ .field-icon {
  color: #FFDE00 !important;
}

.for-signup .email-field,
.for-forgot .email-field,
.for-login-with-email-link .email-field {
  position: relative !important;
}

/* Botones */
.for-signup .btn-signup,
.for-forgot .btn-forgot,
.for-login-with-email-link .btn-login-with-email-link {
  min-height: 46px !important;
  padding: 0.75rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  background: #FFDE00 !important;
  color: #2c3e50 !important;
  border: none !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.for-signup .btn-signup:hover,
.for-forgot .btn-forgot:hover,
.for-login-with-email-link .btn-login-with-email-link:hover {
  background: #e6c800 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 222, 0, 0.3) !important;
}

/* Links */
.for-signup .sign-up-message,
.for-forgot .sign-up-message,
.for-login-with-email-link .sign-up-message {
  color: #64748b !important;
  font-size: 0.9375rem !important;
  text-align: center !important;
  margin-top: 1rem !important;
}

.for-signup .sign-up-message a,
.for-forgot .sign-up-message a,
.for-login-with-email-link .sign-up-message a {
  color: #FFDE00 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.for-signup .sign-up-message a:hover,
.for-forgot .sign-up-message a:hover,
.for-login-with-email-link .sign-up-message a:hover {
  text-decoration: underline !important;
}