/* Identidad visual del Centro de Crédito SOMOS para las páginas web (login,
   portal del asesor). Lenguaje tomado del Portal Somos de referencia —
   tarjetas redondeadas, sombras suaves, píldoras de estado — con paleta
   del logo oficial SOMOS Grupo EPM (azul + gris). */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap");

:root {
  /* Paleta tomada del logo oficial SOMOS Grupo EPM: azul #5f7fb0 y gris
     #606060 (muestreados del archivo), con tinta azul-pizarra para las
     superficies oscuras y ámbar del portal de referencia como acento. */
  --sf-ink: #223549;        /* encabezados y superficies oscuras */
  --sf-primario: #4d76ad;   /* azul SOMOS (ajustado para contraste AA) */
  --sf-primario-osc: #3d6296;
  --sf-acento: #efb034;     /* ámbar para "pendiente" y destacados */
  --sf-fondo: #f2f5f9;
  --sf-tarjeta: #ffffff;
  --sf-borde: #e1e8f0;
  --sf-texto: #1e2933;
  --sf-suave: #5d6b7a;
  --sf-exito-bg: #e7f4ec;
  --sf-exito: #14663d;
  --sf-error-bg: #fdecea;
  --sf-error: #b3261e;
  --sf-titulos: "Poppins", -apple-system, "Segoe UI", sans-serif;
  --sf-mono: "JetBrains Mono", "Consolas", monospace;
  --sf-texto-fam: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --sf-radio: 14px;
  --sf-sombra: 0 6px 24px rgba(34, 53, 73, 0.08);
}

body {
  font-family: var(--sf-texto-fam);
  background: var(--sf-fondo);
  color: var(--sf-texto);
}

/* ---------- Página de login ---------- */

/* El fondo va en el body completo (la seccion .for-login solo mide lo que
   mide la tarjeta). :has() esta soportado por todos los navegadores actuales. */
body:has(.for-login),
body:has(.for-forgot),
body:has(.for-email-login) {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(77, 118, 173, 0.16), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(239, 176, 52, 0.12), transparent 55%),
    var(--sf-fondo) !important;
  background-attachment: fixed !important;
}
.for-login,
.for-forgot,
.for-email-login,
body:has(.for-login) .page-content-wrapper,
body:has(.for-login) .page_content {
  background: transparent !important;
}

/* Tarjeta centrada en el viewport, como una pantalla de acceso de producto. */
.for-login,
.for-forgot,
.for-email-login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 88vh;
}

.for-login .page-card,
.for-forgot .page-card,
.for-email-login .page-card {
  background: var(--sf-tarjeta);
  border: 1px solid var(--sf-borde);
  border-radius: var(--sf-radio);
  box-shadow: var(--sf-sombra);
  padding: 0 1.75rem 2rem;
  overflow: hidden;
  width: min(420px, 100%);
  margin: 0 auto;
}

/* Marca sobre la tarjeta de login. El logo de ERPNext y los textos "Sign In /
   Welcome" de fábrica se ocultan: la marca la ponen los pseudo-elementos. */
.for-login .page-card {
  display: flex;
  flex-direction: column;
}
/* Banda de marca en tinta con degradado (la misma tarjeta de perfil del
   portal): pildora blanca con el logo + titulo, a sangre completa. */
.for-login .page-card::before {
  content: "Centro de Crédito SOMOS";
  order: -3;
  display: block;
  margin: 0 -1.75rem 1.1rem;
  padding: 92px 1rem 18px;
  background:
    url("/assets/somos_financiamiento/img/logo_pill.png") top 20px center / 170px auto no-repeat,
    linear-gradient(160deg, var(--sf-ink) 0%, #2e4a66 100%);
  color: #fff;
  text-align: center;
  font-family: var(--sf-titulos);
  font-size: 1.2rem;
  font-weight: 700;
}
.for-login .page-card::after {
  content: "Activación de créditos · SOMOS Grupo EPM";
  order: -2;
  display: block;
  text-align: center;
  color: var(--sf-suave);
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}
.for-login .page-card-head img,
.for-login .page-card-head .app-logo,
.for-login .page-card-head h4,
.for-login .page-card-head .lead,
.for-login .page-card-head .page-card-head-text,
.for-login .page-card-subtitle {
  display: none !important;
}

.for-login .form-control,
.for-forgot .form-control {
  border-radius: 10px;
  border-color: var(--sf-borde);
  padding: 0.7rem 0.9rem;
  font-size: 16px; /* evita el zoom de iOS */
}
.for-login .form-control:focus {
  border-color: var(--sf-primario);
  box-shadow: 0 0 0 3px rgba(77, 118, 173, 0.2);
}

.for-login .btn-primary,
.for-login button[type="submit"],
.for-login .btn-login,
.for-forgot .btn-primary,
.web-form-container .btn-primary {
  background: var(--sf-primario) !important;
  border-color: var(--sf-primario) !important;
  color: #fff !important;
  border-radius: 10px;
  font-weight: 700;
  padding: 0.65rem 1rem;
}
.for-login .btn-primary:hover,
.for-login .btn-primary:focus,
.for-login button[type="submit"]:hover {
  background: var(--sf-primario-osc) !important;
  border-color: var(--sf-primario-osc) !important;
}
/* boton secundario (enlace de correo) como fantasma verde */
.for-login .btn-default,
.for-login .btn-secondary {
  border-radius: 10px;
  background: var(--sf-tarjeta);
  border: 1.5px solid var(--sf-borde);
  color: var(--sf-primario);
  font-weight: 700;
}

.for-login a,
.for-forgot a {
  color: var(--sf-primario);
}

/* Frappe v16 trae esta cadena sin traducir: se sustituye por CSS. */
.for-login a[href="#forgot"] {
  font-size: 0 !important;
}
.for-login a[href="#forgot"]::after {
  content: "¿Olvidaste tu contraseña?";
  font-size: 0.85rem;
  font-weight: 700;
}

/* La navegación del sitio web no aporta en un portal de un solo propósito */
.for-login .navbar,
.for-login .web-footer {
  display: none;
}