/* ========================================================== TRAZION ASSETS LOGIN V4 CLEAN SPLIT ========================================================== */ .trazion-auth-page-document-login { --trz-navy: #0B1D3A; --trz-slate: #44566F; --trz-blue: #2563EB; --trz-light: #D6DCE6; --trz-bg: #F3F6FA; width: 100% !important; min-height: 100vh !important; height: 100vh !important; display: grid !important; grid-template-columns: minmax(430px, 46%) 1fr !important; align-items: stretch !important; justify-content: stretch !important; overflow: hidden !important; background: #F3F6FA !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* ========================================================== HERO IZQUIERDO ========================================================== */ .trazion-auth-page-document-login .trazion-auth-hero { position: relative !important; min-height: 100vh !important; display: flex !important; flex-direction: column !important; padding: 42px 54px 38px !important; overflow: hidden !important; color: #FFFFFF !important; background: linear-gradient( 145deg, #08172F 0%, #0B1D3A 55%, #102B56 100% ) !important; } /* decoración discreta */ .trazion-auth-page-document-login .trazion-auth-hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -280px; top: -200px; border-radius: 50%; background: rgba(37, 99, 235, .14); pointer-events: none; } .trazion-auth-page-document-login .trazion-auth-hero::after { content: ""; position: absolute; width: 360px; height: 360px; left: -190px; bottom: -170px; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); pointer-events: none; } /* Quitamos la tarjeta gráfica anterior */ .trazion-auth-page-document-login .trazion-auth-visual, .trazion-auth-page-document-login .trazion-auth-hero-overlay { display: none !important; } /* Marca */ .trazion-auth-page-document-login .trazion-auth-brandbar { position: relative !important; z-index: 2; display: flex !important; align-items: center !important; gap: 13px !important; } .trazion-auth-page-document-login .trazion-auth-brandbar img { width: auto !important; max-width: 220px !important; max-height: 58px !important; object-fit: contain !important; } .trazion-auth-page-document-login .trazion-auth-brandbar span { color: #BFDBFE !important; font-size: 12px !important; font-weight: 600 !important; } /* Mensaje central */ .trazion-auth-page-document-login .trazion-auth-hero-copy { position: relative !important; z-index: 2; width: 100% !important; max-width: 560px !important; margin: auto 0 !important; } .trazion-auth-page-document-login .trazion-auth-kicker { display: inline-flex !important; align-items: center; padding: 7px 11px !important; margin-bottom: 18px !important; color: #BFDBFE !important; background: rgba(37, 99, 235, .13) !important; border: 1px solid rgba(147, 197, 253, .18) !important; border-radius: 7px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase; } .trazion-auth-page-document-login .trazion-auth-hero-copy h1 { margin: 0 0 18px !important; max-width: 540px; color: #FFFFFF !important; font-size: clamp(37px, 3.1vw, 53px) !important; line-height: 1.06 !important; font-weight: 780 !important; letter-spacing: -.045em !important; } .trazion-auth-page-document-login .trazion-auth-hero-copy p { max-width: 510px !important; margin: 0 !important; color: #CBD5E1 !important; font-size: 15.5px !important; line-height: 1.65 !important; } /* Footer izquierdo */ .trazion-auth-page-document-login .trazion-auth-footer-left { position: relative !important; z-index: 2; display: flex !important; justify-content: space-between !important; gap: 18px; color: #94A3B8 !important; font-size: 11.5px !important; } /* ========================================================== PANEL DERECHO ========================================================== */ .trazion-auth-page-document-login .trazion-auth-panel { position: relative !important; min-width: 0 !important; min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 60px 65px !important; overflow-y: auto !important; background: #F7F9FC !important; } /* ========================================================== FORMULARIO Sin tarjeta pesada ========================================================== */ .trazion-auth-page-document-login .trazion-auth-content-document-login { width: min(100%, 470px) !important; max-width: 470px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================================== TITULO ========================================================== */ .trazion-auth-page-document-login .trazion-document-login-title { display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 0 27px !important; } .trazion-auth-page-document-login .trazion-document-login-title img { width: 48px !important; height: 48px !important; flex: 0 0 48px; object-fit: contain !important; } .trazion-auth-page-document-login .trazion-document-login-title h2 { margin: 0 0 5px !important; color: #0B1D3A !important; font-size: 25px !important; font-weight: 760 !important; line-height: 1.15 !important; letter-spacing: -.03em !important; } .trazion-auth-page-document-login #loginModeDescription { margin: 0 !important; color: #64748B !important; font-size: 13px !important; line-height: 1.45 !important; } /* ========================================================== SELECTOR ========================================================== */ .trazion-auth-page-document-login .trazion-login-mode-switch { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; margin: 0 0 29px !important; padding: 4px !important; background: #E9EEF5 !important; border: 1px solid #D6DCE6 !important; border-radius: 10px !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button { height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; color: #44566F !important; background: transparent !important; border: 0 !important; border-radius: 7px !important; font-size: 13.5px !important; font-weight: 650 !important; cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button.active { color: #0B1D3A !important; background: #FFFFFF !important; box-shadow: 0 2px 8px rgba(11,29,58,.09) !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button.active i { color: #2563EB !important; } /* ========================================================== FORM GRID ========================================================== */ .trazion-auth-page-document-login .trazion-form-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; } /* ========================================================== CAMPOS ========================================================== */ .trazion-auth-page-document-login .trazion-field { position: relative !important; margin-bottom: 20px !important; } .trazion-auth-page-document-login .trazion-field label { display: block !important; margin-bottom: 7px !important; color: #0B1D3A !important; font-size: 13px !important; font-weight: 650 !important; } .trazion-auth-page-document-login .trazion-field input { width: 100% !important; height: 48px !important; padding-left: 42px !important; color: #0B1D3A !important; background: #FFFFFF !important; border: 1px solid #CBD5E1 !important; border-radius: 9px !important; font-size: 14px !important; box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease !important; } .trazion-auth-page-document-login .trazion-field input:focus { border-color: #2563EB !important; box-shadow: 0 0 0 3px rgba(37,99,235,.10) !important; outline: none !important; } .trazion-auth-page-document-login .trazion-field > i { position: absolute !important; left: 15px !important; top: 42px !important; color: #64748B !important; font-size: 14px !important; z-index: 2; } .trazion-auth-page-document-login .trazion-password-toggle { top: 36px !important; } /* captions */ .trazion-auth-page-document-login .trazion-field-caption { display: block !important; margin-top: 6px !important; color: #64748B !important; font-size: 11px !important; line-height: 1.4 !important; } .trazion-auth-page-document-login .trazion-field-help { color: #2563EB !important; font-size: 11.5px !important; font-weight: 600 !important; } /* ========================================================== TRANSICION EMPRESA / SAAS ========================================================== */ .trazion-auth-page-document-login .trazion-company-fields { max-height: 150px; opacity: 1; overflow: hidden; transform: translateY(0); transition: max-height .22s ease, opacity .15s ease, transform .22s ease !important; } .trazion-auth-page-document-login .trazion-company-fields.trazion-company-fields-hidden { max-height: 0 !important; opacity: 0 !important; transform: translateY(-5px); pointer-events: none; } /* ========================================================== ACCIONES ========================================================== */ .trazion-auth-page-document-login .trazion-login-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 15px !important; margin-top: 3px !important; } .trazion-auth-page-document-login .trazion-remember { color: #44566F !important; font-size: 12px !important; } /* Botón principal */ .trazion-auth-page-document-login .trazion-document-submit { width: 100% !important; min-height: 47px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #FFFFFF !important; background: #2563EB !important; border: 1px solid #2563EB !important; border-radius: 9px !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: 0 7px 16px rgba(37,99,235,.18) !important; transition: background-color .17s ease, transform .17s ease, box-shadow .17s ease !important; } .trazion-auth-page-document-login .trazion-document-submit:hover { color: #FFFFFF !important; background: #1D4ED8 !important; border-color: #1D4ED8 !important; transform: translateY(-1px); box-shadow: 0 9px 20px rgba(37,99,235,.24) !important; } /* ========================================================== LINKS INFERIORES ========================================================== */ .trazion-auth-page-document-login .trazion-login-secondary-actions { margin-top: 22px !important; text-align: center !important; } .trazion-auth-page-document-login .trazion-login-secondary-actions a { color: #2563EB !important; font-size: 12px !important; font-weight: 650 !important; } .trazion-auth-page-document-login .trazion-login-invitation-note { max-width: 390px; margin: 17px auto 0 !important; color: #64748B !important; font-size: 11px !important; line-height: 1.45 !important; text-align: center !important; } /* ========================================================== AYUDA ========================================================== */ .trazion-auth-page-document-login .trazion-auth-help-button { position: absolute !important; top: 24px !important; right: 28px !important; z-index: 10; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 7px 11px !important; color: #44566F !important; background: transparent !important; border: 1px solid #D6DCE6 !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: none !important; } /* Footer derecho */ .trazion-auth-page-document-login .trazion-auth-bottom-links { position: absolute !important; left: 0; right: 0; bottom: 15px; justify-content: center !important; color: #94A3B8 !important; font-size: 10.5px !important; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1050px) { .trazion-auth-page-document-login { grid-template-columns: 40% 60% !important; } .trazion-auth-page-document-login .trazion-auth-hero { padding: 38px 34px !important; } .trazion-auth-page-document-login .trazion-auth-hero-copy h1 { font-size: 38px !important; } .trazion-auth-page-document-login .trazion-auth-panel { padding: 60px 40px !important; } } /* ========================================================== MOVIL ========================================================== */ @media (max-width: 767.98px) { .trazion-auth-page-document-login { display: block !important; min-height: 100vh !important; height: auto !important; overflow: auto !important; background: #F7F9FC !important; } /* * El hero móvil se convierte en encabezado compacto. */ .trazion-auth-page-document-login .trazion-auth-hero { min-height: 105px !important; height: 105px !important; padding: 20px 22px !important; display: flex !important; justify-content: center !important; } .trazion-auth-page-document-login .trazion-auth-brandbar { justify-content: flex-start !important; } .trazion-auth-page-document-login .trazion-auth-brandbar img { max-width: 190px !important; max-height: 50px !important; } .trazion-auth-page-document-login .trazion-auth-brandbar span, .trazion-auth-page-document-login .trazion-auth-hero-copy, .trazion-auth-page-document-login .trazion-auth-footer-left { display: none !important; } .trazion-auth-page-document-login .trazion-auth-panel { min-height: calc(100vh - 105px) !important; display: block !important; padding: 0 0 40px !important; overflow: visible !important; background: #F7F9FC !important; } /* * Ayuda deja de flotar. */ .trazion-auth-page-document-login .trazion-auth-help-button { position: static !important; float: right !important; margin: 14px 17px 0 0 !important; } .trazion-auth-page-document-login .trazion-auth-content-document-login { clear: both; width: calc(100% - 34px) !important; max-width: 500px !important; margin: 16px auto 30px !important; padding: 0 !important; } .trazion-auth-page-document-login .trazion-login-mode-switch { margin-bottom: 25px !important; } .trazion-auth-page-document-login .trazion-document-login-title { margin-bottom: 25px !important; } .trazion-auth-page-document-login .trazion-document-login-title h2 { font-size: 23px !important; } .trazion-auth-page-document-login .trazion-auth-bottom-links { position: static !important; padding: 10px 18px !important; } } /* ========================================================== MOVILES PEQUEÑOS ========================================================== */ @media (max-width: 420px) { .trazion-auth-page-document-login .trazion-auth-content-document-login { width: calc(100% - 28px) !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button { font-size: 12.5px !important; } .trazion-auth-page-document-login .trazion-document-login-title img { width: 43px !important; height: 43px !important; flex-basis: 43px !important; } } /* ========================================================== ACCESIBILIDAD ========================================================== */ @media (prefers-reduced-motion: reduce) { .trazion-auth-page-document-login *, .trazion-auth-page-document-login *::before, .trazion-auth-page-document-login *::after { transition: none !important; } } /* ========================================================== TRAZION LOGIN V4.1 Textura hero + botón gradiente + transición más suave ========================================================== */ /* ========================================================== HERO AZUL - TEXTURA SUTIL ========================================================== */ .trazion-auth-page-document-login .trazion-auth-hero { background: radial-gradient(circle at 18% 18%, rgba(37,99,235,.22) 0, rgba(37,99,235,0) 28%), radial-gradient(circle at 82% 78%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 24%), linear-gradient(145deg, #08172F 0%, #0B1D3A 55%, #102B56 100%) !important; } /* retícula suave */ .trazion-auth-page-document-login .trazion-auth-hero .trazion-auth-brandbar, .trazion-auth-page-document-login .trazion-auth-hero .trazion-auth-hero-copy, .trazion-auth-page-document-login .trazion-auth-hero .trazion-auth-footer-left { position: relative; z-index: 2; } .trazion-auth-page-document-login .trazion-auth-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.08)); pointer-events: none; z-index: 0; } /* brillo decorativo */ .trazion-auth-page-document-login .trazion-auth-hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: 50%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.22) 0%, rgba(37,99,235,.10) 35%, rgba(37,99,235,0) 70%); filter: blur(10px); pointer-events: none; z-index: 0; } /* puntos decorativos */ .trazion-auth-page-document-login .trazion-auth-hero-copy::before { content: ""; position: absolute; right: 18px; top: -12px; width: 78px; height: 78px; background-image: radial-gradient(rgba(191,219,254,.35) 1.2px, transparent 1.2px); background-size: 12px 12px; opacity: .45; pointer-events: none; } .trazion-auth-page-document-login .trazion-auth-footer-left::after { content: ""; position: absolute; left: 0; top: -26px; width: 110px; height: 1px; background: linear-gradient(90deg, rgba(191,219,254,.28), rgba(191,219,254,0)); } /* ========================================================== BOTON INGRESO CON GRADIENTE ========================================================== */ .trazion-auth-page-document-login .trazion-document-submit { color: #FFFFFF !important; background: linear-gradient(90deg, #0B1D3A 0%, #2563EB 100%) !important; border: 0 !important; box-shadow: 0 8px 18px rgba(37,99,235,.22) !important; } .trazion-auth-page-document-login .trazion-document-submit:hover { color: #FFFFFF !important; background: linear-gradient(90deg, #13294B 0%, #1D4ED8 100%) !important; box-shadow: 0 10px 22px rgba(37,99,235,.28) !important; } /* ========================================================== CAMBIO EMPRESA / SAAS MÁS SUAVE ========================================================== */ /* transición global muy pequeña del bloque */ .trazion-auth-page-document-login .trazion-auth-content-document-login { transition: opacity .18s ease, transform .18s ease !important; } .trazion-auth-page-document-login .trazion-auth-content-document-login.trazion-mode-switching { opacity: .92; transform: translateY(2px); } /* descripción con fade */ .trazion-auth-page-document-login #loginModeDescription { transition: opacity .16s ease, transform .16s ease !important; } /* reservamos un poquito mejor el flujo */ .trazion-auth-page-document-login .trazion-company-fields { max-height: 150px; opacity: 1; overflow: hidden; transform: translateY(0); transform-origin: top; transition: max-height .28s ease, opacity .20s ease, transform .24s ease, margin .24s ease !important; } .trazion-auth-page-document-login .trazion-company-fields.trazion-company-fields-hidden { max-height: 0 !important; opacity: 0 !important; transform: translateY(-6px) scaleY(.98); margin-top: 0 !important; margin-bottom: 0 !important; pointer-events: none; } /* suaviza el borde del selector activo */ .trazion-auth-page-document-login .trazion-login-mode-switch button { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button:hover { transform: translateY(-1px); } /* ========================================================== MOVIL ========================================================== */ @media (max-width: 767.98px) { .trazion-auth-page-document-login .trazion-auth-hero::before { opacity: .55; } .trazion-auth-page-document-login .trazion-auth-hero::after { width: 240px; height: 240px; right: -80px; } .trazion-auth-page-document-login .trazion-auth-hero-copy::before { display: none; } } /* ========================================================== TRAZION LOGIN V4.2 Panel derecho con bordes redondeados en la unión ========================================================== */ @media (min-width: 768px) { .trazion-auth-page-document-login .trazion-auth-panel { border-top-left-radius: 56px !important; border-bottom-left-radius: 56px !important; overflow: hidden !important; position: relative !important; z-index: 2 !important; } } /* En móvil no aplicamos esta curvatura */ @media (max-width: 767.98px) { .trazion-auth-page-document-login .trazion-auth-panel { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } } /* ========================================================== TRAZION LOGIN V4.3 Elimina sobrefondo detrás de las curvas ========================================================== */ @media (min-width: 768px) { /* * El fondo que queda expuesto detrás de las esquinas * redondeadas debe pertenecer al sector azul. */ .trazion-auth-page-document-login { background: linear-gradient( 145deg, #08172F 0%, #0B1D3A 55%, #102B56 100% ) !important; } /* * El panel derecho conserva su gris claro. */ .trazion-auth-page-document-login .trazion-auth-panel { background: #F7F9FC !important; border-top-left-radius: 56px !important; border-bottom-left-radius: 56px !important; box-shadow: none !important; position: relative !important; z-index: 2 !important; } } /* En móvil todo vuelve al fondo claro */ @media (max-width: 767.98px) { .trazion-auth-page-document-login { background: #F7F9FC !important; } } /* ========================================================== TRAZION LOGIN V4.4 Switch Empresa / Consola SaaS estilo segmented premium ========================================================== */ .trazion-auth-page-document-login .trazion-login-mode-switch { position: relative !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; padding: 5px !important; border-radius: 999px !important; background: linear-gradient(180deg, #EEF3F8 0%, #E6EDF5 100%) !important; border: 1px solid rgba(148, 163, 184, .28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 20px rgba(11, 29, 58, .05) !important; overflow: hidden !important; } /* cápsula activa deslizante */ .trazion-auth-page-document-login .trazion-login-mode-switch::before { content: ""; position: absolute; top: 5px; left: 5px; bottom: 5px; width: calc(50% - 7px); border-radius: 999px; background: linear-gradient(90deg, #0B1D3A 0%, #2563EB 100%) !important; box-shadow: 0 8px 18px rgba(37, 99, 235, .22), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .30s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease !important; z-index: 1; } /* mueve la cápsula cuando está activo SaaS */ .trazion-auth-page-document-login .trazion-login-mode-switch:has(button[data-login-mode="consola_saas"].active)::before { transform: translateX(calc(100% + 4px)); } /* botones */ .trazion-auth-page-document-login .trazion-login-mode-switch button { position: relative !important; z-index: 2 !important; min-height: 46px !important; height: 46px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 14px !important; background: transparent !important; border: 0 !important; color: #44566F !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: -.01em !important; transition: color .20s ease, transform .20s ease, opacity .20s ease !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button i { font-size: 13px !important; color: inherit !important; opacity: .95; transition: transform .20s ease, opacity .20s ease !important; } /* hover */ .trazion-auth-page-document-login .trazion-login-mode-switch button:hover { transform: translateY(-1px); color: #0B1D3A !important; } /* activo */ .trazion-auth-page-document-login .trazion-login-mode-switch button.active { color: #FFFFFF !important; background: transparent !important; box-shadow: none !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button.active i { color: #FFFFFF !important; opacity: 1; transform: scale(1.04); } /* un poco de feedback visual cuando no está activo */ .trazion-auth-page-document-login .trazion-login-mode-switch button:not(.active) { opacity: .92; } .trazion-auth-page-document-login .trazion-login-mode-switch button:not(.active):hover { opacity: 1; } /* foco accesible */ .trazion-auth-page-document-login .trazion-login-mode-switch button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) inset !important; } /* responsive */ @media (max-width: 767.98px) { .trazion-auth-page-document-login .trazion-login-mode-switch { padding: 4px !important; gap: 3px !important; border-radius: 999px !important; } .trazion-auth-page-document-login .trazion-login-mode-switch::before { top: 4px; left: 4px; bottom: 4px; width: calc(50% - 5.5px); } .trazion-auth-page-document-login .trazion-login-mode-switch:has(button[data-login-mode="consola_saas"].active)::before { transform: translateX(calc(100% + 3px)); } .trazion-auth-page-document-login .trazion-login-mode-switch button { min-height: 44px !important; height: 44px !important; font-size: 13px !important; padding: 8px 10px !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button i { font-size: 12px !important; } } /* ========================================================== TRAZION LOGIN V4.4 Switch Empresa / Consola SaaS estilo segmented premium ========================================================== */ .trazion-auth-page-document-login .trazion-login-mode-switch { position: relative !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; padding: 5px !important; border-radius: 999px !important; background: linear-gradient(180deg, #EEF3F8 0%, #E6EDF5 100%) !important; border: 1px solid rgba(148, 163, 184, .28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 20px rgba(11, 29, 58, .05) !important; overflow: hidden !important; } /* cápsula activa deslizante */ .trazion-auth-page-document-login .trazion-login-mode-switch::before { content: ""; position: absolute; top: 5px; left: 5px; bottom: 5px; width: calc(50% - 7px); border-radius: 999px; background: linear-gradient(90deg, #0B1D3A 0%, #2563EB 100%) !important; box-shadow: 0 8px 18px rgba(37, 99, 235, .22), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .30s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease !important; z-index: 1; } /* mueve la cápsula cuando está activo SaaS */ .trazion-auth-page-document-login .trazion-login-mode-switch:has(button[data-login-mode="consola_saas"].active)::before { transform: translateX(calc(100% + 4px)); } /* botones */ .trazion-auth-page-document-login .trazion-login-mode-switch button { position: relative !important; z-index: 2 !important; min-height: 46px !important; height: 46px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 14px !important; background: transparent !important; border: 0 !important; color: #44566F !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: -.01em !important; transition: color .20s ease, transform .20s ease, opacity .20s ease !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button i { font-size: 13px !important; color: inherit !important; opacity: .95; transition: transform .20s ease, opacity .20s ease !important; } /* hover */ .trazion-auth-page-document-login .trazion-login-mode-switch button:hover { transform: translateY(-1px); color: #0B1D3A !important; } /* activo */ .trazion-auth-page-document-login .trazion-login-mode-switch button.active { color: #FFFFFF !important; background: transparent !important; box-shadow: none !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button.active i { color: #FFFFFF !important; opacity: 1; transform: scale(1.04); } /* un poco de feedback visual cuando no está activo */ .trazion-auth-page-document-login .trazion-login-mode-switch button:not(.active) { opacity: .92; } .trazion-auth-page-document-login .trazion-login-mode-switch button:not(.active):hover { opacity: 1; } /* foco accesible */ .trazion-auth-page-document-login .trazion-login-mode-switch button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) inset !important; } /* responsive */ @media (max-width: 767.98px) { .trazion-auth-page-document-login .trazion-login-mode-switch { padding: 4px !important; gap: 3px !important; border-radius: 999px !important; } .trazion-auth-page-document-login .trazion-login-mode-switch::before { top: 4px; left: 4px; bottom: 4px; width: calc(50% - 5.5px); } .trazion-auth-page-document-login .trazion-login-mode-switch:has(button[data-login-mode="consola_saas"].active)::before { transform: translateX(calc(100% + 3px)); } .trazion-auth-page-document-login .trazion-login-mode-switch button { min-height: 44px !important; height: 44px !important; font-size: 13px !important; padding: 8px 10px !important; } .trazion-auth-page-document-login .trazion-login-mode-switch button i { font-size: 12px !important; } } /* ========================================================== TRAZION LOGIN V4.5 AYUDA - Drawer animado premium ========================================================== */ /* ========================================================== FONDO / BACKDROP ========================================================== */ .trazion-auth-page-document-login .trazion-help-backdrop { display: block !important; position: fixed !important; inset: 0 !important; z-index: 1040 !important; background: rgba(11, 29, 58, .34) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: opacity .30s ease, visibility 0s linear .30s, backdrop-filter .30s ease !important; } /* abierto */ body.trazion-help-open .trazion-auth-page-document-login .trazion-help-backdrop { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: opacity .30s ease, visibility 0s linear 0s, backdrop-filter .30s ease !important; } /* ========================================================== DRAWER ========================================================== */ .trazion-auth-page-document-login .trazion-help-drawer { display: block !important; position: fixed !important; top: 12px !important; right: 12px !important; bottom: 12px !important; left: auto !important; width: min(430px, calc(100vw - 28px)) !important; height: auto !important; z-index: 1050 !important; padding: 30px 27px 26px !important; overflow-y: auto !important; color: #0B1D3A !important; background: rgba(255,255,255,.985) !important; border: 1px solid rgba(214,220,230,.85) !important; border-radius: 24px !important; box-shadow: -18px 0 55px rgba(11,29,58,.18) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate3d(calc(100% + 34px), 0, 0) !important; will-change: transform, opacity; transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .25s ease, visibility 0s linear .38s !important; } /* DRAWER ABIERTO */ body.trazion-help-open .trazion-auth-page-document-login .trazion-help-drawer { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate3d(0,0,0) !important; transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .25s ease, visibility 0s linear 0s !important; } /* ========================================================== CABECERA ========================================================== */ .trazion-auth-page-document-login .trazion-help-drawer h3 { margin: 3px 45px 7px 0 !important; color: #0B1D3A !important; font-size: 24px !important; font-weight: 750 !important; letter-spacing: -.025em !important; } .trazion-auth-page-document-login .trazion-help-drawer > p { margin: 0 30px 22px 0 !important; color: #64748B !important; font-size: 13.5px !important; line-height: 1.55 !important; } /* botón cerrar superior */ .trazion-auth-page-document-login .trazion-help-close { position: absolute !important; top: 20px !important; right: 20px !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; color: #44566F !important; background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important; border-radius: 50% !important; box-shadow: none !important; transition: background-color .18s ease, color .18s ease, transform .18s ease !important; } .trazion-auth-page-document-login .trazion-help-close:hover { color: #0B1D3A !important; background: #E8EEF6 !important; transform: rotate(5deg) scale(1.04); } /* ========================================================== OPCIONES DE AYUDA ========================================================== */ .trazion-auth-page-document-login .trazion-help-item { position: relative; display: flex !important; align-items: flex-start !important; gap: 13px !important; width: 100% !important; margin: 0 0 10px !important; padding: 15px !important; color: #0B1D3A !important; background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 14px !important; text-decoration: none !important; box-shadow: none !important; opacity: 0; transform: translateX(14px); transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .30s ease, opacity .25s ease !important; } /* entrada suave de las opciones */ body.trazion-help-open .trazion-auth-page-document-login .trazion-help-item { opacity: 1; transform: translateX(0); } /* pequeño retardo, después de que empieza a abrir el drawer */ body.trazion-help-open .trazion-auth-page-document-login .trazion-help-item:nth-of-type(1) { transition-delay: .08s; } body.trazion-help-open .trazion-auth-page-document-login .trazion-help-item:nth-of-type(2) { transition-delay: .11s; } body.trazion-help-open .trazion-auth-page-document-login .trazion-help-item:nth-of-type(3) { transition-delay: .14s; } body.trazion-help-open .trazion-auth-page-document-login .trazion-help-item:nth-of-type(4) { transition-delay: .17s; } /* icono principal */ .trazion-auth-page-document-login .trazion-help-item > i:first-child { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #2563EB !important; background: #EFF6FF !important; border-radius: 10px !important; font-size: 14px !important; } /* textos */ .trazion-auth-page-document-login .trazion-help-item span { min-width: 0; flex: 1; } .trazion-auth-page-document-login .trazion-help-item strong { display: block; margin-bottom: 4px; color: #0B1D3A !important; font-size: 13.5px !important; font-weight: 700 !important; } .trazion-auth-page-document-login .trazion-help-item small { display: block; color: #64748B !important; font-size: 11.5px !important; line-height: 1.5 !important; } /* chevron derecho */ .trazion-auth-page-document-login .trazion-help-item > i:last-child:not(:first-child) { align-self: center; color: #94A3B8 !important; font-size: 11px !important; transition: transform .18s ease, color .18s ease !important; } /* hover solo opciones clicables */ .trazion-auth-page-document-login a.trazion-help-item:hover { background: #FFFFFF !important; border-color: rgba(37,99,235,.32) !important; box-shadow: 0 8px 18px rgba(11,29,58,.07) !important; transform: translateX(-2px) !important; } .trazion-auth-page-document-login a.trazion-help-item:hover > i:last-child { color: #2563EB !important; transform: translateX(3px); } /* ========================================================== BOTÓN CERRAR INFERIOR ========================================================== */ .trazion-auth-page-document-login .trazion-help-primary { width: 100% !important; min-height: 44px !important; margin-top: 12px !important; color: #FFFFFF !important; background: linear-gradient( 90deg, #0B1D3A 0%, #2563EB 100% ) !important; border: 0 !important; border-radius: 10px !important; font-size: 13.5px !important; font-weight: 700 !important; box-shadow: 0 7px 16px rgba(37,99,235,.18) !important; transition: transform .18s ease, box-shadow .18s ease !important; } .trazion-auth-page-document-login .trazion-help-primary:hover { color: #FFFFFF !important; transform: translateY(-1px); box-shadow: 0 9px 20px rgba(37,99,235,.25) !important; } /* ========================================================== MOVIL Se convierte en bottom sheet ========================================================== */ @media (max-width: 767.98px) { .trazion-auth-page-document-login .trazion-help-drawer { top: auto !important; right: 10px !important; bottom: 10px !important; left: 10px !important; width: auto !important; max-height: 86vh !important; padding: 26px 19px 20px !important; border-radius: 24px 24px 18px 18px !important; box-shadow: 0 -15px 45px rgba(11,29,58,.18) !important; transform: translate3d(0, calc(100% + 30px), 0) !important; transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .25s ease, visibility 0s linear .38s !important; } body.trazion-help-open .trazion-auth-page-document-login .trazion-help-drawer { transform: translate3d(0,0,0) !important; } .trazion-auth-page-document-login .trazion-help-drawer h3 { font-size: 22px !important; } .trazion-auth-page-document-login .trazion-help-item { padding: 13px !important; border-radius: 13px !important; } } /* ========================================================== ACCESIBILIDAD ========================================================== */ @media (prefers-reduced-motion: reduce) { .trazion-auth-page-document-login .trazion-help-drawer, .trazion-auth-page-document-login .trazion-help-backdrop, .trazion-auth-page-document-login .trazion-help-item { transition-duration: .01ms !important; } } /* ========================================================== TRAZION LOGIN V4.6 Recuperación de contraseña ========================================================== */ /* ========================================================== HERO Reutiliza exactamente la nueva estética del login. ========================================================== */ .trazion-auth-page-recovery-v4 .trazion-auth-visual { display: none !important; } /* * Centrado vertical del mensaje izquierdo porque ya no existe * la ilustración antigua "Recuperación segura". */ .trazion-auth-page-recovery-v4 .trazion-auth-hero-copy { margin: auto 0 !important; } /* ========================================================== PANEL DERECHO ========================================================== */ .trazion-auth-page-recovery-v4 .trazion-auth-panel { background: #F7F9FC !important; border-top-left-radius: 56px !important; border-bottom-left-radius: 56px !important; overflow: hidden !important; } /* ========================================================== CONTENIDO ========================================================== */ .trazion-auth-page-recovery-v4 .trazion-auth-content-narrow { width: min(100%, 460px) !important; max-width: 460px !important; margin: auto !important; padding: 0 !important; } /* * Quitamos la tarjeta pesada de la versión anterior. */ .trazion-auth-page-recovery-v4 .trazion-auth-login-card { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================================== CABECERA FORMULARIO ========================================================== */ .trazion-auth-page-recovery-v4 .trazion-auth-login-head { display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 0 27px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-head img { width: 48px !important; height: 48px !important; flex: 0 0 48px; object-fit: contain !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-head h2 { margin: 0 0 5px !important; color: #0B1D3A !important; font-size: 25px !important; line-height: 1.15 !important; font-weight: 760 !important; letter-spacing: -.03em !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-head p { margin: 0 !important; color: #64748B !important; font-size: 13px !important; line-height: 1.45 !important; } /* ========================================================== AVISO DE SEGURIDAD ========================================================== */ .trazion-auth-page-recovery-v4 .trazion-auth-access-note { display: flex !important; align-items: flex-start !important; gap: 9px !important; margin-bottom: 20px !important; padding: 12px 13px !important; color: #44566F !important; background: #EFF6FF !important; border: 1px solid #DBEAFE !important; border-radius: 11px !important; font-size: 11.5px !important; line-height: 1.45 !important; } .trazion-auth-page-recovery-v4 .trazion-auth-access-note i { margin-top: 2px; color: #2563EB !important; } /* ========================================================== INPUT CORREO ========================================================== */ .trazion-auth-page-recovery-v4 .trazion-auth-input { margin-bottom: 18px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-input .form-control { min-height: 48px !important; padding-left: 14px !important; color: #0B1D3A !important; background: #FFFFFF !important; border: 1px solid #CBD5E1 !important; border-right: 0 !important; border-radius: 10px 0 0 10px !important; font-size: 14px !important; box-shadow: none !important; } .trazion-auth-page-recovery-v4 .trazion-auth-input .form-control:focus { border-color: #2563EB !important; box-shadow: 0 0 0 3px rgba(37,99,235,.09) !important; } .trazion-auth-page-recovery-v4 .trazion-auth-input .input-group-text { min-width: 48px; display: flex; align-items: center; justify-content: center; color: #64748B !important; background: #FFFFFF !important; border: 1px solid #CBD5E1 !important; border-left: 0 !important; border-radius: 0 10px 10px 0 !important; } /* ========================================================== BOTON GRADIENTE ========================================================== */ .trazion-auth-page-recovery-v4 .trazion-auth-submit { width: 100% !important; min-height: 47px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; color: #FFFFFF !important; background: linear-gradient( 90deg, #0B1D3A 0%, #2563EB 100% ) !important; border: 0 !important; border-radius: 9px !important; font-size: 13.5px !important; font-weight: 700 !important; box-shadow: 0 8px 18px rgba(37,99,235,.20) !important; transition: transform .18s ease, box-shadow .18s ease !important; } .trazion-auth-page-recovery-v4 .trazion-auth-submit:hover { color: #FFFFFF !important; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(37,99,235,.27) !important; } /* ========================================================== LINK VOLVER INTERNO ========================================================== */ .trazion-auth-page-recovery-v4 .trazion-auth-login-card .text-center a { color: #64748B !important; font-size: 11.5px !important; font-weight: 600 !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-card .text-center a:hover { color: #2563EB !important; } /* ========================================================== BOTON VOLVER SUPERIOR ========================================================== */ .trazion-auth-page-recovery-v4 .trazion-auth-back-button { position: absolute !important; top: 24px !important; right: 28px !important; left: auto !important; z-index: 20 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 12px !important; color: #0B1D3A !important; background: rgba(255,255,255,.92) !important; border: 1px solid #E2E8F0 !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 650 !important; box-shadow: 0 6px 18px rgba(11,29,58,.08) !important; } /* ========================================================== FOOTER DERECHO ========================================================== */ .trazion-auth-page-recovery-v4 .trazion-auth-bottom-links { color: #94A3B8 !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767.98px) { .trazion-auth-page-recovery-v4 .trazion-auth-panel { border-radius: 0 !important; min-height: calc(100vh - 105px) !important; padding: 25px 17px 35px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-back-button { position: static !important; display: inline-flex !important; width: auto !important; margin: 0 0 25px auto !important; float: right; } .trazion-auth-page-recovery-v4 .trazion-auth-content-narrow { clear: both; width: 100% !important; max-width: 500px !important; margin: 0 auto !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-head h2 { font-size: 22px !important; } } /* ========================================================== TRAZION LOGIN V4.7 Móvil - más aire entre Ayuda y formulario ========================================================== */ @media (max-width: 767.98px) { .trazion-auth-page-document-login .trazion-auth-panel { padding: 0 0 40px !important; } .trazion-auth-page-document-login .trazion-auth-help-button { position: static !important; display: inline-flex !important; float: right !important; margin: 18px 18px 14px 0 !important; } .trazion-auth-page-document-login .trazion-auth-content-document-login { clear: both; width: calc(100% - 34px) !important; max-width: 500px !important; margin: 30px auto 30px !important; padding: 0 !important; } } /* ========================================================== TRAZION LOGIN V4.8 Recuperar contraseña - Mobile refinado ========================================================== */ @media (max-width: 767.98px) { /* ------------------------------------------------------ PANEL GENERAL ------------------------------------------------------ */ .trazion-auth-page-recovery-v4 .trazion-auth-panel { min-height: calc(100vh - 100px) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; padding: 16px 14px 24px !important; background: #F3F6FA !important; border-radius: 0 !important; overflow: visible !important; } /* ------------------------------------------------------ BOTÓN VOLVER ------------------------------------------------------ */ .trazion-auth-page-recovery-v4 .trazion-auth-back-button { position: static !important; align-self: flex-end !important; float: none !important; width: auto !important; margin: 0 2px 14px auto !important; padding: 8px 13px !important; border-radius: 999px !important; background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 5px 14px rgba(11,29,58,.07) !important; } /* ------------------------------------------------------ TARJETA PRINCIPAL ------------------------------------------------------ */ .trazion-auth-page-recovery-v4 .trazion-auth-content-narrow { clear: both !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; padding: 0 !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-card { width: 100% !important; padding: 22px 18px 20px !important; background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 20px !important; box-shadow: 0 14px 32px rgba(11,29,58,.07) !important; } /* ------------------------------------------------------ CABECERA ------------------------------------------------------ */ .trazion-auth-page-recovery-v4 .trazion-auth-login-head { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 0 19px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-head img { width: 43px !important; height: 43px !important; flex: 0 0 43px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-head h2 { margin: 0 0 4px !important; color: #0B1D3A !important; font-size: 21px !important; line-height: 1.1 !important; font-weight: 760 !important; letter-spacing: -.025em !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-head p { margin: 0 !important; color: #64748B !important; font-size: 12.5px !important; line-height: 1.42 !important; } /* ------------------------------------------------------ AVISO ------------------------------------------------------ */ .trazion-auth-page-recovery-v4 .trazion-auth-access-note { display: flex !important; align-items: flex-start !important; gap: 8px !important; margin: 0 0 17px !important; padding: 10px 11px !important; color: #44566F !important; background: #F4F8FF !important; border: 1px solid #DBEAFE !important; border-radius: 10px !important; font-size: 10.8px !important; line-height: 1.45 !important; } .trazion-auth-page-recovery-v4 .trazion-auth-access-note i { flex: 0 0 auto; margin-top: 2px !important; font-size: 11px !important; } /* ------------------------------------------------------ INPUT ------------------------------------------------------ */ .trazion-auth-page-recovery-v4 .trazion-auth-input { margin-bottom: 14px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-input .form-control { min-height: 47px !important; height: 47px !important; padding: 10px 12px !important; color: #0B1D3A !important; background: #FFFFFF !important; border: 1px solid #CBD5E1 !important; border-right: 0 !important; border-radius: 10px 0 0 10px !important; font-size: 13.5px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-input .input-group-text { min-width: 46px !important; background: #FFFFFF !important; border: 1px solid #CBD5E1 !important; border-left: 0 !important; border-radius: 0 10px 10px 0 !important; } /* ------------------------------------------------------ BOTÓN PRINCIPAL ------------------------------------------------------ */ .trazion-auth-page-recovery-v4 .trazion-auth-submit { width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: 9px 14px !important; color: #FFFFFF !important; background: linear-gradient( 90deg, #0B1D3A 0%, #2563EB 100% ) !important; border: 0 !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: 0 8px 18px rgba(37,99,235,.20) !important; } /* ------------------------------------------------------ LINK REGRESAR ------------------------------------------------------ */ .trazion-auth-page-recovery-v4 .trazion-auth-login-card .text-center { margin-top: 15px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-card .text-center a { color: #64748B !important; font-size: 11.5px !important; font-weight: 600 !important; } /* ------------------------------------------------------ FOOTER ------------------------------------------------------ */ .trazion-auth-page-recovery-v4 .trazion-auth-bottom-links { position: static !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 5px !important; width: 100% !important; margin: 18px auto 0 !important; padding: 0 10px !important; color: #94A3B8 !important; font-size: 10px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-builtby { width: 100%; margin-top: 2px; text-align: center; } } /* ========================================================== MÓVILES PEQUEÑOS ========================================================== */ @media (max-width: 390px) { .trazion-auth-page-recovery-v4 .trazion-auth-panel { padding: 14px 11px 22px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-card { padding: 20px 15px 18px !important; } .trazion-auth-page-recovery-v4 .trazion-auth-login-head h2 { font-size: 19.5px !important; } }