/* ============================================================================ STRONG LMB 360 — v18.3.12 Premium Intro + Brand Identity Coherence + Number/Letter Polish ---------------------------------------------------------------------------- Objetivo: · Unificar la identidad del login con la marca real del sistema (verde bosque institucional + dorado + display serif). · Intro 10/10: entrada escalonada, sobria y premium (respeta reduced-motion). · Ajuste perfecto de números y letras (numerales tabulares, alineación, sin desbordes) de forma aditiva y segura. · Sin eliminar funcionalidad: solo refina la capa de presentación. Carga: última, después de v18.3.11. ============================================================================ */ :root{ --s312-green-900:#06140f; --s312-green-800:#0a241b; --s312-green-700:#0d3b2e; /* --coop-deep */ --s312-green-600:#12513e; --s312-gold:#c9a227; /* --coop-gold */ --s312-gold-soft:#e6cd72; /* --coop-gold-soft */ --s312-gold-bright:#f3dd8a; --s312-paper:#fbf8f1; /* --coop-paper */ --s312-ink:#15211c; --s312-muted:#5d6b63; --s312-line:rgba(201,162,39,.22); --s312-display:'Fraunces','Hoefler Text',Georgia,'Times New Roman',serif; --s312-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; } /* --------------------------------------------------------------------------- 1) INTRO / LOGIN — identidad institucional coherente --------------------------------------------------------------------------- */ html body.login-active, body.login-active{ background:var(--s312-green-900)!important; } #login-screen.strong-login-v18311{ font-family:var(--s312-body)!important; color:#f3efe4!important; /* Atmósfera: degradado verde bosque institucional + halo dorado perceptible */ background: radial-gradient(1100px 640px at 82% -6%, rgba(201,162,39,.26) 0%, rgba(201,162,39,0) 55%), radial-gradient(1000px 700px at 8% 112%, rgba(26,93,74,.85) 0%, rgba(18,81,62,0) 62%), linear-gradient(150deg, var(--s312-green-800) 0%, var(--s312-green-700) 52%, var(--s312-green-600) 100%)!important; } /* Grano/textura fina autónoma (sin dependencias externas) para dar profundidad */ #login-screen.strong-login-v18311::before{ content:""!important;display:block!important;position:absolute!important;inset:0!important; pointer-events:none!important;z-index:0!important;opacity:.05!important;mix-blend-mode:overlay!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")!important; } /* Filo dorado superior, marca de prestigio institucional */ #login-screen.strong-login-v18311::after{ content:""!important;display:block!important;position:fixed!important;left:0!important;right:0!important;top:0!important;height:3px!important; background:linear-gradient(90deg,transparent 0%,var(--s312-gold) 24%,var(--s312-gold-bright) 50%,var(--s312-gold) 76%,transparent 100%)!important; z-index:2147483300!important;pointer-events:none!important;opacity:.9!important; } .login-v18311-shell{position:relative!important;z-index:1!important;} /* Eyebrow institucional dorado */ .login-v18311-eyebrow{ border:1px solid rgba(230,205,114,.5)!important; background:linear-gradient(180deg,rgba(201,162,39,.18),rgba(201,162,39,.06))!important; color:var(--s312-gold-bright)!important; letter-spacing:.22em!important;font-weight:800!important; box-shadow:0 1px 0 rgba(0,0,0,.2) inset!important; } /* Titular en display serif de marca */ .login-v18311-brand h1{ font-family:var(--s312-display)!important; font-weight:600!important; /* Fraunces luce mejor en 600 que en 900 */ letter-spacing:-.02em!important; line-height:1.02!important; color:#fdfaf0!important; text-wrap:balance; } .login-v18311-brand h1::after{ content:""!important;display:block!important;width:74px!important;height:3px!important;margin-top:18px!important; background:linear-gradient(90deg,var(--s312-gold),rgba(201,162,39,0))!important;border-radius:3px!important; } .login-v18311-brand p{ color:#d7e0d4!important;font-weight:400!important; font-size:16.5px!important;line-height:1.75!important; } /* Tarjetas de capacidades con acento dorado lateral */ .login-v18311-capabilities li{ position:relative!important; border:1px solid rgba(230,205,114,.18)!important; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important; color:#eef3ea!important;font-weight:600!important; padding-left:20px!important;border-radius:16px!important; backdrop-filter:blur(2px)!important; } .login-v18311-capabilities li::before{ content:""!important;position:absolute!important;left:0!important;top:14px!important;bottom:14px!important;width:3px!important; background:linear-gradient(180deg,var(--s312-gold-soft),var(--s312-gold))!important;border-radius:3px!important; } /* Tarjeta de acceso premium (papel cálido + filo dorado + sombra en capas) */ .login-v18311-card{ background:linear-gradient(180deg,#ffffff 0%,var(--s312-paper) 100%)!important; border:1px solid rgba(201,162,39,.28)!important; border-radius:24px!important; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(6,20,15,.18), 0 34px 80px -28px rgba(6,20,15,.7)!important; position:relative!important;overflow:hidden!important; } .login-v18311-card::before{ content:""!important;position:absolute!important;left:0!important;right:0!important;top:0!important;height:4px!important; background:linear-gradient(90deg,var(--s312-gold),var(--s312-gold-bright),var(--s312-gold))!important; } .login-v18311-card h2{ font-family:var(--s312-display)!important;font-weight:600!important; color:var(--s312-green-700)!important;letter-spacing:-.015em!important; } .login-v18311-card .login-v18311-subtitle{color:var(--s312-muted)!important;} .login-v18311-form label{color:#34453d!important;font-weight:700!important;} .login-v18311-form input{ border:1px solid #d9ddca!important;background:#fcfbf6!important;color:var(--s312-ink)!important; font-weight:600!important;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease!important; } .login-v18311-form input::placeholder{color:#9aa69b!important;font-weight:500!important;} .login-v18311-form input:focus{ border-color:var(--s312-gold)!important;background:#fff!important; box-shadow:0 0 0 4px rgba(201,162,39,.18)!important; } .login-v18311-password button{ border:1px solid #d9ddca!important;background:#fff!important;color:var(--s312-green-700)!important;font-weight:800!important; transition:border-color .18s ease, color .18s ease!important; } .login-v18311-password button:hover{border-color:var(--s312-gold)!important;color:var(--s312-green-600)!important;} /* Botón primario con identidad dorada de la app (texto verde profundo) */ .login-v18311-enter{ background:linear-gradient(135deg,var(--s312-gold) 0%,var(--s312-gold-soft) 100%)!important; color:var(--s312-green-700)!important;font-family:var(--s312-display)!important; font-weight:600!important;letter-spacing:.01em!important;font-size:15px!important; box-shadow:0 14px 30px -10px rgba(201,162,39,.6)!important; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease!important; } .login-v18311-enter:hover{filter:brightness(1.05)!important;transform:translateY(-1px)!important;box-shadow:0 18px 38px -10px rgba(201,162,39,.7)!important;} .login-v18311-enter:active{transform:translateY(0)!important;} .login-v18311-meta{ border-top:1px solid rgba(13,59,46,.14)!important;color:#6b7770!important;font-weight:650!important; font-variant-numeric:tabular-nums lining-nums!important; } .login-v18311-footer{color:rgba(231,238,225,.66)!important;} .login-v18311-footer::before{ content:""!important;position:fixed!important;left:32px!important;right:32px!important;bottom:46px!important;height:1px!important; background:linear-gradient(90deg,transparent,rgba(230,205,114,.22),transparent)!important;pointer-events:none!important; } /* ---------- Intro escalonada (premium, sobria) ---------- */ @media (prefers-reduced-motion:no-preference){ #login-screen.strong-login-v18311.s312-intro .login-v18311-eyebrow, #login-screen.strong-login-v18311.s312-intro .login-v18311-brand h1, #login-screen.strong-login-v18311.s312-intro .login-v18311-brand p, #login-screen.strong-login-v18311.s312-intro .login-v18311-capabilities li, #login-screen.strong-login-v18311.s312-intro .login-v18311-card{ opacity:0;transform:translateY(14px); animation:s312Rise .7s cubic-bezier(.22,.61,.36,1) forwards; } #login-screen.strong-login-v18311.s312-intro .login-v18311-eyebrow{animation-delay:.05s;} #login-screen.strong-login-v18311.s312-intro .login-v18311-brand h1{animation-delay:.14s;} #login-screen.strong-login-v18311.s312-intro .login-v18311-brand p{animation-delay:.24s;} #login-screen.strong-login-v18311.s312-intro .login-v18311-capabilities li:nth-child(1){animation-delay:.34s;} #login-screen.strong-login-v18311.s312-intro .login-v18311-capabilities li:nth-child(2){animation-delay:.42s;} #login-screen.strong-login-v18311.s312-intro .login-v18311-capabilities li:nth-child(3){animation-delay:.50s;} #login-screen.strong-login-v18311.s312-intro .login-v18311-card{animation-delay:.30s;animation-duration:.8s;} @keyframes s312Rise{to{opacity:1;transform:translateY(0);}} } /* Salida suave al autenticar */ #login-screen.strong-login-v18311.fade-out{ transition:opacity .5s ease, transform .5s ease!important; opacity:0!important;transform:scale(.992)!important; } /* --------------------------------------------------------------------------- 2) AJUSTE DE NÚMEROS Y LETRAS — global, aditivo, seguro (numerales tabulares + alineación consistente, sin tocar lógica de módulos) --------------------------------------------------------------------------- */ body.strong-authenticated .kpi-value, body.strong-authenticated .kpi-number, body.strong-authenticated .metric-value, body.strong-authenticated td.num, body.strong-authenticated th.num, body.strong-authenticated .num, body.strong-authenticated .mono{ font-variant-numeric:tabular-nums lining-nums!important; font-feature-settings:"tnum" 1,"lnum" 1!important; } /* Montos y cantidades a la derecha para lectura financiera consistente */ body.strong-authenticated td.num, body.strong-authenticated th.num{ text-align:right!important; } /* Evitar cortes feos de palabras largas en encabezados/etiquetas */ body.strong-authenticated .kpi-label, body.strong-authenticated .card-title h3, body.strong-authenticated .card-title h4{ overflow-wrap:anywhere; word-break:normal; } /* KPI: equilibrio tipográfico fino */ body.strong-authenticated .kpi-value{ letter-spacing:-.01em!important; } /* --------------------------------------------------------------------------- 3) TOAST — que no choque con el avatar/encabezado superior derecho --------------------------------------------------------------------------- */ body.strong-authenticated .toast-stack{ top:80px!important;right:22px!important; } @media (max-width:900px){ body.strong-authenticated .toast-stack{ top:72px!important; right:14px!important; left:14px!important; max-width:none!important; } } /* --------------------------------------------------------------------------- 4) RESPONSIVE — corrige el pie del login que en móvil quedaba flotando al costado del contenido (era hermano flex en fila). --------------------------------------------------------------------------- */ @media (max-width:900px){ #login-screen.strong-login-v18311{ flex-direction:column!important; justify-content:flex-start!important; } #login-screen.strong-login-v18311 .login-v18311-footer{ position:static!important;order:9!important; width:min(540px,100%)!important;margin:22px auto 8px!important; justify-content:center!important;gap:6px!important;flex-wrap:wrap!important;text-align:center!important; } #login-screen.strong-login-v18311 .login-v18311-footer::before{ display:none!important; } } /* --------------------------------------------------------------------------- 5) v18.3.14 — CORRECCIÓN DE ERRORES VISUALES --------------------------------------------------------------------------- */ /* 5a) Tablas: evitar el corte de palabras a mitad (p. ej. "Hipotecari-o"). Varias capas previas aplican overflow-wrap:anywhere a las celdas, lo que parte palabras enteras en columnas estrechas. Se mantienen las palabras intactas y el quiebre solo ocurre entre palabras. */ body.strong-authenticated .card table td, body.strong-authenticated .card table th, body.strong-authenticated table.table td, body.strong-authenticated table.table th{ overflow-wrap:normal!important; word-break:keep-all!important; hyphens:none!important; } /* 5b) KPIs: no truncar montos grandes con "…". El valor se ajusta por tamaño (motor JS v18.3.14) en lugar de cortarse. Se elimina la elipsis para que nunca aparezca un número incompleto. */ body.strong-authenticated .kpi-value, body.strong-authenticated .metric-value{ text-overflow:clip!important; overflow:visible!important; } /* Sugerencia de ajuste fluido como respaldo del motor JS (si JS no corriera, el número grande igualmente reduce su tamaño de forma proporcional). */ body.strong-authenticated .kpi{ container-type:inline-size; } body.strong-authenticated .kpi-value.s312-autofit{ white-space:nowrap; }