body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
}

.font-serif-heading {
  font-family: 'Playfair Display', Georgia, serif;
}


/* =========================================================
   TRANSICIONES PARA INPUTS
========================================================= */

.custom-input {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-input:focus-within {
  border-color: #059669;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}


/* =========================================================
   OCULTAR ELEMENTOS
========================================================= */

.is-hidden {
  display: none !important;
}


/* =========================================================
   LOGIN
========================================================= */

.login-page {
  width: 100%;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px 16px;
}


.login-container {
  width: 100%;
  max-width: 390px;

  margin: 0 auto;
}


/* =========================================================
   LOGO
========================================================= */

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-bottom: 24px;
}


.login-logo {
  width: 92px;
  height: 92px;

  object-fit: cover;

  border-radius: 20px;
}


/* =========================================================
   MENSAJE PRINCIPAL
========================================================= */

.welcome-container {
  text-align: center;

  margin-bottom: 12px;
}


.welcome-text {
  max-width: 330px;

  margin: 0 auto;

  color: #12345d;

  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}


/* =========================================================
   SELECTOR USUARIO / PROFESIONAL
========================================================= */

.account-selector {
  width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 4px;

  padding: 4px;

  margin-bottom: 12px;

  background: #e9edf1;

  border: 1px solid #dce1e6;

  border-radius: 14px;
}


.account-option {
  width: 100%;

  border: none;

  border-radius: 10px;

  padding: 8px 10px;

  background: transparent;

  color: #6b7280;

  font-family: 'Inter', sans-serif;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}


.account-option:hover:not(.active) {
  color: #12345d;
}


.account-option.active {
  background: #12345d;

  color: #ffffff;

  box-shadow:
    0 2px 5px rgba(18, 52, 93, 0.18);
}


/* =========================================================
   FORMULARIOS
========================================================= */

.login-form {
  width: 100%;
}


/* =========================================================
   GRUPOS DE INPUT
========================================================= */

.input-group {
  width: 100%;
  height: 43px;

  position: relative;

  display: flex;
  align-items: center;

  margin-bottom: 9px;

  background: #ffffff;

  border: 1px solid #dfe4e9;

  border-radius: 13px;

  transition:
    all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


.input-group:focus-within {
  border-color: #059669;

  box-shadow:
    0 0 0 4px rgba(16, 185, 129, 0.12);
}


/* =========================================================
   ICONO DEL INPUT
========================================================= */

.input-icon {
  width: 44px;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  color: #059669;
}


.input-icon svg {
  width: 18px;
  height: 18px;

  stroke-width: 1.8;
}


/* =========================================================
   INPUT
========================================================= */

.input-group input {
  width: 100%;
  height: 100%;

  padding: 0 12px 0 0;

  border: none;
  outline: none;

  background: transparent;

  color: #1f2937;

  font-family: 'Inter', sans-serif;

  font-size: 14px;
}


.input-group input::placeholder {
  color: #6b7280;

  opacity: 1;
}


.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1f2937;

  transition:
    background-color 5000s ease-in-out 0s;
}


/* =========================================================
   BOTÓN MOSTRAR CONTRASEÑA
========================================================= */

.password-toggle {
  width: 44px;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  padding: 0;

  border: none;
  outline: none;

  background: transparent;

  color: #9ca3af;

  cursor: pointer;
}


.password-toggle:hover {
  color: #6b7280;
}


.password-toggle svg {
  width: 18px;
  height: 18px;

  stroke-width: 1.7;
}


/* =========================================================
   RECUPERAR CONTRASEÑA
========================================================= */

.forgot-password-container {
  display: flex;
  justify-content: flex-end;

  margin-top: -2px;
  margin-bottom: 10px;
}


.forgot-password {
  color: #059669;

  font-size: 12px;
  font-weight: 500;

  text-decoration: none;

  transition: color 0.2s ease;
}


.forgot-password:hover {
  color: #047857;

  text-decoration: underline;
}


/* =========================================================
   MENSAJE
========================================================= */

.login-message {
  width: 100%;

  min-height: 0;

  margin-bottom: 8px;

  color: #dc2626;

  text-align: center;

  font-size: 12px;
  line-height: 1.4;
}


.login-message:empty {
  margin-bottom: 0;
}


.login-message.success-message {
  color: #059669;
}


/* =========================================================
   BOTÓN LOGIN
========================================================= */

.btn-login {
  width: 100%;
  height: 43px;

  border: none;

  border-radius: 13px;

  background: #12345d;

  color: #ffffff;

  font-family: 'Inter', sans-serif;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 3px 7px rgba(18, 52, 93, 0.15);

  transition:
    background-color 0.2s ease,
    transform 0.1s ease,
    opacity 0.2s ease;
}


.btn-login:hover {
  background: #0d2a4d;
}


.btn-login:active {
  transform: translateY(1px);
}


.btn-login:disabled {
  opacity: 0.65;

  cursor: not-allowed;
}


/* =========================================================
   SEPARADOR
========================================================= */

.separator {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 10px;

  margin: 12px 0;
}


.separator-line {
  flex: 1;

  height: 1px;

  background: #dfe4e8;
}


.separator-text {
  color: #9ca3af;

  font-size: 11px;

  white-space: nowrap;
}


/* =========================================================
   GOOGLE
========================================================= */

.btn-google {
  width: 100%;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  border: 1px solid #dfe4e9;

  border-radius: 13px;

  background: #ffffff;

  color: #374151;

  font-family: 'Inter', sans-serif;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}


.btn-google:hover {
  background: #f9fafb;

  border-color: #cfd5dc;
}


.google-icon {
  width: 20px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #4285f4;

  font-family: Arial, sans-serif;

  font-size: 18px;
  font-weight: 700;
}


/* =========================================================
   BENEFICIOS
========================================================= */

.benefits-container {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-top: 15px;
}


.benefit {
  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}


.benefit-icon {
  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 4px;

  border-radius: 50%;

  background: #eef2f5;

  border: 1px solid #dce1e6;

  color: #059669;
}


.benefit-icon svg {
  width: 17px;
  height: 17px;

  stroke-width: 1.7;
}


.benefit p {
  color: #858b94;

  font-size: 10px;

  line-height: 1.3;
}


/* =========================================================
   REGISTRO
========================================================= */

.register-container {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 4px;

  margin-top: 13px;

  color: #777e87;

  font-size: 12px;
}


.register-link {
  color: #059669;

  font-weight: 600;

  text-decoration: none;
}


.register-link:hover {
  text-decoration: underline;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
  width: 6px;
}


::-webkit-scrollbar-track {
  background: #f1f5f9;
}


::-webkit-scrollbar-thumb {
  background: #cbd5e1;

  border-radius: 4px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 380px) {

  .login-page {
    padding: 14px 12px;
  }


  .login-logo {
    width: 82px;
    height: 82px;
  }


  .welcome-text {
    font-size: 14px;
  }


  .account-option {
    font-size: 13px;

    padding: 10px;
  }


  .input-group {
    height: 46px;
  }


  .btn-login {
    height: 47px;
  }


  .benefit p {
    font-size: 9px;
  }

}


@media (min-width: 768px) {

  .login-container {
    max-width: 410px;
  }

}

/* Ajustes compactos SOLO para el contenido debajo del logo */
.welcome-container { margin-bottom: 12px; }
.account-selector { margin-bottom: 12px; }
.account-option { padding-top: 8px; padding-bottom: 8px; }
.input-group { height: 43px; margin-bottom: 9px; }
.forgot-password-container { margin-bottom: 10px; }
.btn-login { height: 43px; }
.separator { margin: 12px 0; }
.btn-google { height: 42px; }
.benefits-container { margin-top: 15px; }
.benefit-icon { width: 30px; height: 30px; margin-bottom: 4px; }
.register-container { margin-top: 13px; }

@media (max-width: 380px) {
  .login-page { padding: 14px 12px; }
  .input-group { height: 41px; }
  .btn-login { height: 41px; }
  .btn-google { height: 40px; }
}