/* ========================================================================== Portal CAI · Hoja de estilos compartida Páginas: nuevo-login.html (.pg-login), nuevo-identifyNew.html (.pg-identify), nuevo-404.html (.pg-404) Cada página añade su clase al . Las reglas van con espacio de nombres para evitar colisiones entre selectores comunes. ========================================================================== */ /* ── Fuente corporativa ── */ @font-face { font-family: "sen-regular"; /* Estaba apuntando al .ttf (58 KB) pero declarandolo format("woff2"). El format() es lo que mira el navegador para elegir: al anunciar woff2 se descargaba el TTF, tres veces mas grande que el woff2 real (20 KB), y ademas mintiendo sobre su formato. Ahora van los dos, en orden: woff2 primero y ttf como respaldo para navegadores antiguos. Las URLs siguen siendo absolutas a proposito: esta hoja la consumen los portales desde otros dominios. Eso implica que las fuentes se piden cross-origin, asi que caisoft.es tiene que devolver la cabecera Access-Control-Allow-Origin en /assets/fonts/ o el navegador descarta la descarga sin avisar y se cae al fallback. */ src: url("https://www.caisoft.es/assets/fonts/sen-regular/sen-regular.woff2") format("woff2"), url("https://www.caisoft.es/assets/fonts/sen-regular/sen-regular.ttf") format("truetype"); font-style: normal; font-weight: normal; font-display: swap; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Animaciones compartidas ── */ @keyframes modal-in { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== COLOR DE PRODUCTO El lleva la clase del programa (prod-caiconta, prod-caifac, prod-caifis, prod-caierp) y con ella cambian los acentos de la página: iconos de las ventajas, tarjeta de prueba gratuita y botón del aviso móvil. Sin clase se usa el naranja de Portal CAI, que es también el color de las acciones principales (botón de acceso, foco de los campos) en todos ellos. ========================================================================== */ body { --cai-azul: #003657; /* azul corporativo CAISOFT */ --portalcai: #e96c00; /* naranja del nombre Portal CAI */ --prod: #eb6521; /* acento: iconos y bordes */ --prod-ink: var(--prod); /* variante legible como texto sobre blanco */ --prod-line: var(--prod); /* borde del botón de prueba gratuita */ --prod-deep: #d4581c; /* final del degradado del botón del aviso móvil */ --prod-soft: rgba(235, 101, 33, 0.08); /* fondo de hover */ --prod-shadow: rgba(235, 101, 33, 0.35); /* sombra del botón del aviso móvil */ } body.prod-caiconta { --prod: #01b3ba; --prod-deep: #0199a0; --prod-soft: rgba(1, 179, 186, 0.08); --prod-shadow: rgba(1, 179, 186, 0.4); } body.prod-caifac { --prod: #a6d031; --prod-ink: #7a9c22; /* el verde claro no contrasta como texto */ --prod-deep: #84a726; --prod-soft: rgba(166, 208, 49, 0.12); --prod-shadow: rgba(166, 208, 49, 0.4); } body.prod-caifis { --prod: #854000; --prod-line: #a06020; --prod-deep: #a06020; --prod-soft: rgba(133, 64, 0, 0.08); --prod-shadow: rgba(133, 64, 0, 0.35); } body.prod-caierp { --prod: #299a38; --prod-deep: #217f2e; --prod-soft: rgba(41, 154, 56, 0.08); --prod-shadow: rgba(41, 154, 56, 0.4); } body.prod-cailab { --prod: #002d7c; --prod-deep: #002060; --prod-soft: rgba(0, 45, 124, 0.08); --prod-shadow: rgba(0, 45, 124, 0.35); } body.prod-cairen { --prod: #c22663; --prod-deep: #8f1a48; --prod-soft: rgba(194, 38, 99, 0.08); --prod-shadow: rgba(194, 38, 99, 0.35); } /* caisoc comparte el naranja de Portal CAI; la clase existe para que las ocho páginas se declaren igual y para poder diferenciarlo en el futuro. */ body.prod-caisoc { --prod: #eb6521; --prod-deep: #d4581c; --prod-soft: rgba(235, 101, 33, 0.08); --prod-shadow: rgba(235, 101, 33, 0.35); } body.prod-masterasesor { --prod: #dca658; --prod-ink: #b8883a; /* el dorado claro no contrasta como texto */ --prod-deep: #b8883a; --prod-soft: rgba(220, 166, 88, 0.12); --prod-shadow: rgba(220, 166, 88, 0.4); } /* ── Nombre del programa en bicolor ── caiconta El prefijo va en azul corporativo y el sufijo toma el color del producto, así que el mismo marcado sirve en caiconta, caifac, caifis y caierp. .wordmark.portalcai pinta el nombre "Portal CAI" en su naranja. */ .wordmark { font-family: 'Trebuchet MS', sans-serif; font-weight: 700; } .wordmark .cai { color: var(--cai-azul); } .wordmark .prod { color: var(--prod); } .wordmark.portalcai { color: var(--portalcai); } /* ========================================================================== LOGIN · nuevo-login.html · body.pg-login ========================================================================== */ body.pg-login { font-family: 'sen-regular', Arial, sans-serif; height: 100dvh; display: flex; flex-direction: column; background: #f5f7fa; color: #1a1a2e; } .pg-login .login-wrapper { flex: 1; display: flex; overflow: hidden; } .pg-login .panel-brand { flex: 0 0 42%; background: #f4f8fb; display: flex; flex-direction: column; align-items: flex-start; padding: 60px 56px; position: relative; overflow: hidden; border-right: 1px solid #d9e5ee; } .pg-login .brand-logo { height: 53px; width: auto; flex-shrink: 0; margin-bottom: 44px; margin-left: -10px; mix-blend-mode: multiply; } .pg-login .brand-center { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; width: 100%; } .pg-login .brand-product { position: relative; z-index: 1; } .pg-login .brand-logo-product { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } /* Caja común: cada logotipo tiene su propia proporción, así que se ajusta dentro de los mismos 120x96 px en lugar de igualar solo la altura. */ .pg-login .logo-product-img { height: 96px; width: 120px; object-fit: contain; object-position: left center; background: transparent; } /* El logotipo de caierp es bastante más estrecho que el resto, así que se sube de la altura común para que visualmente pese lo mismo. */ body.prod-caierp .logo-product-img { height: 110px; } /* El logotipo de masterasesor es apaisado (el nombre va bajo el icono), así que se ensancha la caja para que llene la misma altura que el resto. */ body.prod-masterasesor .logo-product-img { width: 180px; } /* cailab y caisoc no tienen logotipo en imagen: el nombre se compone con .wordmark y ocupa el mismo hueco de 96 px. */ .pg-login .brand-logo-product .wordmark { font-size: 2.6rem; line-height: 96px; letter-spacing: -0.5px; white-space: nowrap; } .pg-login .brand-product h1 { font-family: 'Trebuchet MS', sans-serif; font-size: 2rem; font-weight: 700; color: #003657; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 16px; } .pg-login .brand-product h1 span { color: #eb6521; } .pg-login .brand-product p { font-size: 0.925rem; font-weight: 400; color: #003657; line-height: 1.7; } .pg-login .brand-features { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; } .pg-login .brand-feature { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #003657; } .pg-login .brand-feature i, .pg-login .brand-feature svg { flex-shrink: 0; color: var(--prod); font-size: 1rem; } .pg-login .panel-form { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 40px; background: #fff; overflow-y: auto; } .pg-login .form-card { width: 100%; max-width: 540px; } .pg-login .form-card h2 { font-size: 1.5rem; font-weight: 700; color: #003657; margin-bottom: 6px; } .pg-login .form-card .subtitle { font-size: 0.875rem; color: #003657; margin-bottom: 36px; } .pg-login .form-group { margin-bottom: 20px; } .pg-login label { display: block; font-size: 0.8125rem; font-weight: 700; color: #003657; margin-bottom: 6px; } .pg-login input[type="email"], .pg-login input[type="password"], .pg-login input[type="text"] { width: 100%; padding: 11px 14px; border: 1.5px solid #e5e7eb; border-radius: 8px; font-size: 0.9rem; font-family: inherit; color: #1a1a2e; background: #fff; transition: border-color 0.18s, box-shadow 0.18s; outline: none; -webkit-appearance: none; } .pg-login input[type="email"]:focus, .pg-login input[type="password"]:focus, .pg-login input[type="text"]:focus { border-color: #eb6521; box-shadow: 0 0 0 3px rgba(235, 101, 33, 0.12); } .pg-login .field-hint { margin: 6px 0 0; font-size: 0.75rem; color: #6b7280; } .pg-login .field-hint-warning { color: #b45309; font-weight: 600; } .pg-login .password-wrapper { position: relative; } .pg-login .toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; color: #9ca3af; line-height: 0; transition: color 0.15s; } .pg-login .toggle-password:hover { color: #003657; } .pg-login .form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; margin-top: -6px; } .pg-login .remember { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: #6b7280; cursor: pointer; user-select: none; } .pg-login .remember input[type="checkbox"] { width: 15px; height: 15px; accent-color: #eb6521; cursor: pointer; } .pg-login .forgot-link { font-size: 0.8125rem; color: #eb6521; text-decoration: none; font-weight: 500; transition: opacity 0.15s; } .pg-login .forgot-link:hover { opacity: 0.75; } .pg-login .btn-login { width: 100%; padding: 12px; background: #eb6521; color: #fff; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; font-family: inherit; cursor: pointer; letter-spacing: 0.02em; transition: background 0.18s, transform 0.1s; } .pg-login .btn-login:hover { background: #d4581c; } .pg-login .btn-login:active { transform: scale(0.99); } .pg-login .btn-login:disabled { opacity: 0.75; cursor: not-allowed; transform: none; } .pg-login .btn-submit { padding: 10px 20px; background: #eb6521; color: #fff; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; letter-spacing: 0.02em; transition: background 0.18s, transform 0.1s; } .pg-login .btn-submit:hover { background: #d4581c; } .pg-login .btn-submit:active { transform: scale(0.99); } .pg-login .form-divider { display: flex; align-items: center; gap: 12px; margin: 40px 0 24px; font-size: 0.875rem; font-weight: 600; color: #6b7280; white-space: nowrap; } .pg-login .form-divider::before, .pg-login .form-divider::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; } /* ── Variantes del formulario que antes iban en línea en cada portal ── */ .pg-login .form-options.is-end { justify-content: flex-end; } .pg-login .form-divider.is-help { margin: 34px 0 16px; } .pg-login .btn-spinner { display: none; animation: spin 0.8s linear infinite; } .pg-login .error-box { display: none; margin-top: 14px; padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; font-size: 0.8125rem; color: #b91c1c; align-items: center; gap: 8px; } .pg-login .error-box svg { flex-shrink: 0; } .pg-login .help-link { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: #6b7280; text-decoration: none; padding: 10px; border-radius: 8px; border: 1.5px solid #e5e7eb; transition: border-color 0.18s, background 0.18s; } .pg-login .help-link.is-block { width: 100%; } .pg-login .help-link.is-portal { width: 100%; margin-top: 32px; } .pg-login .help-link-icon { flex-shrink: 0; color: #eb6521; } .pg-login .help-link:hover, .pg-login .help-link:active { border-color: #003657; color: #003657; background: #f8fafc; } .pg-login .help-link-arrow { color: #6b7280; font-size: 1.1rem; transition: transform 0.2s; } .pg-login .help-link:hover .help-link-arrow { transform: translateX(3px); } .pg-login .campaign-bar { background: #002a44; color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; padding: 9px 20px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; } .pg-login .campaign-bar svg { color: #eb6521; flex-shrink: 0; transition: color 0.3s; } .pg-login .campaign-bar a { color: #eb6521; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; transition: opacity 0.15s; } .pg-login .campaign-bar a:hover { opacity: 0.8; } .pg-login .btn-demo-wrap { margin-top: 40px; position: relative; z-index: 1; width: 100%; } .pg-login .demo-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; border-left: 3px solid var(--prod); padding: 4px 0 4px 20px; max-width: 460px; } .pg-login .btn-demo-label { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; color: #003657; margin-bottom: 0; } .pg-login .btn-demo-label i { flex-shrink: 0; color: var(--prod); font-size: 1.05rem; } .pg-login .btn-demo { display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px; background: transparent; color: var(--prod-ink); border: 1.5px solid var(--prod-line); border-radius: 10px; font-size: 0.875rem; font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; letter-spacing: 0.02em; transition: background 0.15s, color 0.15s; position: relative; } .pg-login .btn-demo:hover { background: var(--prod-soft); } .pg-login .btn-demo:active { transform: scale(0.98); } .pg-login .btn-demo .arrow { font-size: 1.1rem; transition: transform 0.2s; } .pg-login .btn-demo:hover .arrow { transform: translateX(3px); } .pg-login footer { background: #fff; border-top: 1px solid #f0f0f0; padding: 14px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .pg-login .footer-copy { font-size: 0.75rem; color: #9ca3af; } .pg-login .footer-links { display: flex; gap: 20px; } .pg-login .footer-links a { font-size: 0.75rem; color: #9ca3af; text-decoration: none; transition: color 0.15s; } .pg-login .footer-links a:hover { color: #003657; } .pg-login .mobile-notice { display: none; } .pg-login .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center; padding: 20px; } .pg-login .modal-backdrop.open { display: flex; } .pg-login .modal-box { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); width: 100%; max-width: 460px; overflow: hidden; animation: modal-in 0.2s ease; } .pg-login .modal-header { padding: 20px 24px 0; display: flex; align-items: flex-start; gap: 14px; } .pg-login .modal-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pg-login .modal-icon.blue { background: rgba(0,54,87,0.08); color: #003657; } .pg-login .modal-icon.amber { background: rgba(235,101,33,0.1); color: #eb6521; } .pg-login .modal-header-text h3 { font-size: 1rem; font-weight: 700; color: #003657; margin: 0 0 4px; } .pg-login .modal-header-text p { font-size: 0.8125rem; color: #6b7280; line-height: 1.55; margin: 0; } .pg-login .modal-body { padding: 16px 24px; font-size: 0.8125rem; color: #374151; line-height: 1.6; } .pg-login .modal-body .info-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e5e7eb; } .pg-login .modal-body .info-item svg { flex-shrink: 0; margin-top: 1px; color: #003657; } .pg-login .modal-footer-btns { padding: 0 24px 20px; display: flex; flex-direction: column; gap: 8px; } .pg-login .modal-footer-btns .btn-modal-primary { width: 100%; padding: 11px; background: #eb6521; color: #fff; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.18s; } .pg-login .modal-footer-btns .btn-modal-primary:hover { background: #d4581c; } .pg-login .modal-footer-btns .btn-modal-secondary { width: 100%; padding: 11px; background: #fff; color: #374151; border: 1.5px solid #e5e7eb; border-radius: 8px; font-size: 0.9rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: border-color 0.18s, color 0.18s; } .pg-login .modal-footer-btns .btn-modal-secondary:hover { border-color: #003657; color: #003657; } @media (max-width: 768px) { body.pg-login { height: auto; min-height: 100dvh; } .pg-login .campaign-bar { font-size: 0.75rem; padding: 8px 14px; } .pg-login .login-wrapper { flex-direction: column; overflow: visible; } .pg-login .panel-brand { flex: none; padding: 36px 24px 32px; align-items: center; text-align: center; } .pg-login .brand-logo { height: 50px; margin-bottom: 24px; margin-left: 0; } .pg-login .brand-center { align-items: center; } .pg-login .brand-logo-product { justify-content: center; } .pg-login .logo-product-img { object-position: center; } .pg-login .brand-product h1 { font-size: 1.6rem; } .pg-login .brand-product p { font-size: 0.875rem; max-width: 100%; } .pg-login .brand-features { margin-top: 22px; gap: 10px; align-items: flex-start; text-align: left; width: 100%; max-width: 340px; } .pg-login .btn-demo-wrap { margin-top: 22px; } .pg-login .demo-card { align-items: center; max-width: 100%; text-align: center; border-left: none; padding: 0; } .pg-login .btn-demo-label { justify-content: center; } .pg-login .panel-form { padding: 36px 24px 48px; } .pg-login .form-card { display: none; } .pg-login .mobile-notice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; width: 100%; max-width: 400px; margin: 0 auto; } .pg-login .mobile-notice-img { width: 100%; object-fit: cover; border-radius: 12px; } .pg-login .mobile-notice .form-divider { width: 100%; margin: 12px 0 0; } .pg-login .mobile-notice-icon { width: 56px; height: 56px; background: rgba(0,54,87,0.08); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #003657; flex-shrink: 0; } .pg-login .mobile-notice h2 { font-size: 1.35rem; font-weight: 700; color: #003657; margin: 0; } .pg-login .mobile-notice p { font-size: 0.9rem; color: #6b7280; line-height: 1.65; margin: 0; } .pg-login .mobile-notice .btn-notice { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; background: linear-gradient(135deg, var(--prod) 0%, var(--prod-deep) 100%); color: #fff; border: none; border-radius: 10px; font-size: 0.9375rem; font-weight: 700; font-family: inherit; text-decoration: none; cursor: pointer; width: 100%; justify-content: center; box-shadow: 0 4px 16px var(--prod-shadow); transition: box-shadow 0.18s, transform 0.1s; } .pg-login .mobile-notice .btn-notice:hover { box-shadow: 0 6px 22px var(--prod-shadow); } .pg-login .mobile-notice .btn-notice-sec { font-size: 0.8125rem; color: #6b7280; text-decoration: none; } .pg-login .mobile-notice .btn-notice-sec:hover { color: #003657; text-decoration: underline; } .pg-login .mobile-notice .access-card { width: 100%; } .pg-login .mobile-notice .access-card-aside { margin-top: 18px; font-size: 0.8125rem; font-weight: 600; color: #9ca3af; } .pg-login .mobile-notice .store-links { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; } /* mismo ancho para los dos badges: cada imagen lleva su propio margen interno, y a igual ancho el recuadro negro queda a la misma altura */ .pg-login .mobile-notice .store-badge { display: block; flex: 1 1 0; min-width: 0; max-width: 152px; transition: transform 0.15s, opacity 0.15s; } .pg-login .mobile-notice .store-badge:hover, .pg-login .mobile-notice .store-badge:active { opacity: 0.85; transform: translateY(-1px); } .pg-login .mobile-notice .store-badge img { display: block; width: 100%; height: auto; } .pg-login footer { justify-content: center; text-align: center; padding: 14px 20px; } .pg-login .footer-links { justify-content: center; gap: 14px; } } /* ========================================================================== IDENTIFY · nuevo-identifyNew.html · body.pg-identify ========================================================================== */ body.pg-identify { font-family: 'sen-regular', Arial, sans-serif; height: 100dvh; display: flex; flex-direction: column; background: #f5f7fa; color: #1a1a2e; } .pg-identify .login-wrapper { flex: 1; display: flex; overflow: hidden; } .pg-identify .panel-brand { flex: 0 0 42%; background: #f4f8fb; display: flex; flex-direction: column; align-items: flex-start; padding: 60px 56px; position: relative; overflow: hidden; border-right: 1px solid #d9e5ee; } .pg-identify .brand-logo { height: 53px; width: auto; flex-shrink: 0; margin-bottom: 44px; margin-left: -10px; mix-blend-mode: multiply; } .pg-identify .brand-center { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; width: 100%; } .pg-identify .brand-product { position: relative; z-index: 1; } .pg-identify .brand-product h1 { font-family: 'Trebuchet MS', sans-serif; font-size: 2rem; font-weight: 700; color: #003657; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 16px; } .pg-identify .brand-product h1 span { color: #eb6521; } .pg-identify .brand-product p { font-size: 0.925rem; color: #003657; line-height: 1.7; max-width: 400px; } .pg-identify .brand-hint { margin-top: 170px; position: relative; z-index: 1; max-width: 400px; } .pg-identify .brand-hint-icon { width: 81px; height: 81px; border-radius: 22px; background: rgba(235, 101, 33, 0.12); color: #eb6521; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .pg-identify .brand-hint-body { min-width: 0; } .pg-identify .brand-hint strong { color: #003657; display: block; margin-bottom: 8px; font-size: 0.925rem; } .pg-identify .brand-hint p { font-size: 0.925rem; color: #003657; line-height: 1.7; } .pg-identify .back-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 32px; font-size: 0.8125rem; color: #6b7280; text-decoration: none; position: relative; z-index: 1; transition: color 0.15s; } .pg-identify .back-link:hover { color: #eb6521; } .pg-identify .link-back-login:hover, .pg-identify .link-back-login:active, .pg-identify .link-back-login:visited { color: #eb6521; } .pg-identify .panel-form { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 40px; background: #fff; overflow-y: auto; } .pg-identify .form-card { width: 100%; max-width: 560px; } .pg-identify .form-card h2 { font-size: 1.5rem; font-weight: 700; color: #003657; margin-bottom: 6px; } .pg-identify .form-card .subtitle { font-size: 0.875rem; color: #6b7280; margin-bottom: 28px; line-height: 1.6; } .pg-identify .info-boxes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .pg-identify .info-box { background: #f8fafc; border: 1px solid #e5e7eb; border-left: 3px solid #003657; border-radius: 8px; padding: 12px 14px; } .pg-identify .info-box.orange { border-left-color: #eb6521; } .pg-identify .info-box strong { display: block; font-size: 0.8rem; color: #003657; margin-bottom: 3px; } .pg-identify .info-box.orange strong { color: #eb6521; } .pg-identify .info-box p { font-size: 0.78rem; color: #6b7280; line-height: 1.55; } .pg-identify .form-group { margin-bottom: 20px; } .pg-identify label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.8125rem; font-weight: 700; color: #003657; margin-bottom: 6px; } .pg-identify .label-note { font-weight: 500; font-size: 0.75rem; color: #6b7280; white-space: nowrap; } .pg-identify input[type="email"] { width: 100%; padding: 11px 14px; border: 1.5px solid #e5e7eb; border-radius: 8px; font-size: 0.9rem; font-family: inherit; color: #1a1a2e; background: #fff; transition: border-color 0.18s, box-shadow 0.18s; outline: none; -webkit-appearance: none; } .pg-identify input[type="email"]:focus { border-color: #eb6521; box-shadow: 0 0 0 3px rgba(235, 101, 33, 0.12); } .pg-identify .btn-submit { width: 100%; padding: 12px; background: #eb6521; color: #fff; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; font-family: inherit; cursor: pointer; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.18s, transform 0.1s; } .pg-identify .btn-submit:hover { background: #d4581c; } .pg-identify .btn-submit:active { transform: scale(0.99); } .pg-identify .btn-submit:disabled { opacity: 0.75; cursor: not-allowed; transform: none; } .pg-identify .success-card { display: none; text-align: center; padding: 10px 0; } .pg-identify .success-icon { width: 60px; height: 60px; background: #f0fdf4; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .pg-identify .success-icon svg { color: #16a34a; } .pg-identify .success-card h3 { font-size: 1.25rem; font-weight: 700; color: #003657; margin-bottom: 10px; } .pg-identify .success-card p { font-size: 0.875rem; color: #6b7280; line-height: 1.65; margin-bottom: 24px; } .pg-identify .error-box { display: none; margin-top: 14px; padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; font-size: 0.8125rem; color: #b91c1c; align-items: center; gap: 8px; } .pg-identify .campaign-bar { background: #002a44; color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; padding: 9px 20px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; } .pg-identify .campaign-bar svg { flex-shrink: 0; transition: color 0.3s; } .pg-identify .campaign-bar a { color: #eb6521; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; transition: opacity 0.15s; } .pg-identify .campaign-bar a:hover { opacity: 0.8; } @media (max-width: 768px) { .pg-identify .campaign-bar { font-size: 0.75rem; padding: 8px 14px; } } .pg-identify footer { background: #fff; border-top: 1px solid #f0f0f0; padding: 14px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .pg-identify .footer-copy { font-size: 0.75rem; color: #9ca3af; } .pg-identify .footer-links { display: flex; gap: 20px; } .pg-identify .footer-links a { font-size: 0.75rem; color: #9ca3af; text-decoration: none; transition: color 0.15s; } .pg-identify .footer-links a:hover { color: #003657; } .pg-identify .mobile-notice { display: none; } @media (max-width: 768px) { body.pg-identify { height: auto; min-height: 100dvh; } .pg-identify .login-wrapper { flex-direction: column; overflow: visible; } .pg-identify .panel-brand { flex: none; padding: 36px 24px 32px; align-items: center; text-align: center; } .pg-identify .brand-logo { height: 50px; margin-bottom: 24px; } .pg-identify .brand-product h1 { font-size: 1.6rem; } .pg-identify .brand-product p { font-size: 0.875rem; max-width: 100%; } .pg-identify .brand-hint { display: none; } .pg-identify .back-link { margin-top: 20px; } .pg-identify .panel-form { padding: 36px 24px 48px; overflow-y: visible; } .pg-identify .form-card { display: none; } .pg-identify .mobile-notice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; width: 100%; max-width: 400px; margin: 0 auto; } .pg-identify .mobile-notice-icon { width: 56px; height: 56px; background: rgba(235, 101, 33, 0.12); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #eb6521; flex-shrink: 0; } .pg-identify .mobile-notice h2 { font-size: 1.5rem; font-weight: 700; color: #003657; margin: 0; } .pg-identify .mobile-notice p { font-size: 0.875rem; color: #6b7280; line-height: 1.6; margin: 0; } .pg-identify .mobile-notice .btn-notice { display: inline-flex; align-items: center; gap: 8px; padding: 12px; background: #eb6521; color: #fff; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; font-family: inherit; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; width: 100%; justify-content: center; transition: background 0.18s; } .pg-identify .mobile-notice .btn-notice:hover { background: #d4581c; } .pg-identify .mobile-notice .btn-notice-sec { font-size: 0.8125rem; color: #6b7280; text-decoration: none; } .pg-identify .mobile-notice .btn-notice-sec:hover { color: #003657; text-decoration: underline; } .pg-identify footer { justify-content: center; text-align: center; padding: 14px 20px; } .pg-identify .footer-links { justify-content: center; gap: 14px; } } .pg-identify input[type="password"], .pg-identify .pw-wrap input[type="text"] { width: 100%; padding: 11px 42px 11px 14px; border: 1.5px solid #e5e7eb; border-radius: 8px; font-size: 0.9rem; font-family: inherit; color: #1a1a2e; background: #fff; transition: border-color 0.18s, box-shadow 0.18s; outline: none; -webkit-appearance: none; appearance: none; } .pg-identify input[type="password"]:focus, .pg-identify .pw-wrap input[type="text"]:focus { border-color: #eb6521; box-shadow: 0 0 0 3px rgba(235, 101, 33, 0.12); } .pg-identify .pw-wrap { position: relative; } .pg-identify .btn-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px; display: flex; align-items: center; transition: color 0.15s; } .pg-identify .btn-eye:hover { color: #374151; } .pg-identify .form-row-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .pg-identify .form-row-two .form-group { margin-bottom: 0; } @media (max-width: 540px) { .pg-identify .form-row-two { grid-template-columns: 1fr; } } /* ============================================================ Página 404 (nuevo-404.html) · body class="pg-404" ============================================================ */ body.pg-404 { font-family: 'sen-regular', Arial, sans-serif; min-height: 100dvh; display: flex; flex-direction: column; background: #f5f7fa; color: #1a1a2e; } .pg-404 .login-wrapper { flex: 1; display: flex; overflow: hidden; } /* ── Panel de marca (izquierda) ── */ .pg-404 .panel-brand { flex: 0 0 42%; background: #f4f8fb; display: flex; flex-direction: column; align-items: flex-start; padding: 60px 56px; position: relative; overflow: hidden; border-right: 1px solid #d9e5ee; } .pg-404 .brand-logo { height: 53px; width: auto; flex-shrink: 0; margin-bottom: 44px; margin-left: -10px; mix-blend-mode: multiply; } .pg-404 .brand-center { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; width: 100%; } .pg-404 .brand-product { position: relative; z-index: 1; } .pg-404 .brand-product h1 { font-family: 'Trebuchet MS', sans-serif; font-size: 2rem; font-weight: 700; color: #003657; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 16px; } .pg-404 .brand-product h1 span { color: #eb6521; } .pg-404 .brand-product p { font-size: 0.925rem; font-weight: 400; color: #003657; line-height: 1.7; } .pg-404 .brand-features { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; } .pg-404 .brand-feature { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #003657; } .pg-404 .brand-feature svg { flex-shrink: 0; color: #eb6521; } /* ── Panel de contenido (derecha) ── */ .pg-404 .panel-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 40px; background: #fff; } .pg-404 .error-card { width: 100%; max-width: 540px; } .pg-404 .error-code { display: flex; align-items: center; gap: 14px; font-family: 'Trebuchet MS', sans-serif; font-size: 4.5rem; font-weight: 700; line-height: 1; color: #003657; letter-spacing: -2px; margin-bottom: 22px; } .pg-404 .error-code span { color: #eb6521; } .pg-404 .error-code-icon { width: 58px; height: 58px; border-radius: 16px; background: rgba(235, 101, 33, 0.1); color: #eb6521; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pg-404 .error-card h2 { font-size: 1.5rem; font-weight: 700; color: #003657; margin-bottom: 6px; } .pg-404 .error-card .subtitle { font-size: 0.875rem; color: #003657; line-height: 1.6; margin-bottom: 36px; } .pg-404 .error-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; } .pg-404 .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; background: #eb6521; color: #fff; border: none; border-radius: 10px; font-size: 0.9375rem; font-weight: 700; font-family: inherit; text-decoration: none; cursor: pointer; box-shadow: 0 4px 14px rgba(235, 101, 33, 0.3); transition: background 0.18s, transform 0.1s; } .pg-404 .btn-primary:hover { background: #d4581c; } .pg-404 .btn-primary:active { transform: scale(0.98); } .pg-404 .btn-primary span { font-size: 1.05rem; transition: transform 0.2s; } .pg-404 .btn-primary:hover span { transform: translateX(3px); } .pg-404 .btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; background: transparent; color: #003657; border: 1.5px solid #d9e5ee; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .pg-404 .btn-secondary:hover { border-color: #003657; } /* ── Campaign bar ── */ .pg-404 .campaign-bar { background: #002a44; color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; padding: 9px 20px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; } .pg-404 .campaign-bar svg { color: #eb6521; flex-shrink: 0; } .pg-404 .campaign-bar a { color: #eb6521; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; transition: opacity 0.15s; } .pg-404 .campaign-bar a:hover { opacity: 0.8; } /* ── Footer ── */ .pg-404 footer { background: #fff; border-top: 1px solid #f0f0f0; padding: 14px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .pg-404 .footer-copy { font-size: 0.75rem; color: #9ca3af; } .pg-404 .footer-links { display: flex; gap: 20px; } .pg-404 .footer-links a { font-size: 0.75rem; color: #9ca3af; text-decoration: none; transition: color 0.15s; } .pg-404 .footer-links a:hover { color: #003657; } /* ── Responsive ── */ @media (max-width: 768px) { body.pg-404 { height: auto; min-height: 100dvh; } .pg-404 .campaign-bar { font-size: 0.75rem; padding: 8px 14px; } .pg-404 .login-wrapper { flex-direction: column; overflow: visible; } .pg-404 .panel-brand { flex: none; padding: 36px 24px 32px; align-items: center; text-align: center; } .pg-404 .brand-logo { height: 50px; margin-bottom: 24px; margin-left: 0; } .pg-404 .brand-center { align-items: center; } .pg-404 .brand-product h1 { font-size: 1.6rem; } .pg-404 .brand-product p { font-size: 0.875rem; max-width: 100%; } .pg-404 .brand-features { margin-top: 22px; gap: 10px; align-items: flex-start; text-align: left; width: 100%; max-width: 340px; } .pg-404 .panel-content { padding: 40px 24px 48px; align-items: center; text-align: center; } .pg-404 .error-code { font-size: 3.5rem; justify-content: center; } .pg-404 .error-actions { flex-direction: column; max-width: 400px; width: 100%; align-items: stretch; } .pg-404 .btn-primary, .pg-404 .btn-secondary { justify-content: center; } .pg-404 footer { justify-content: center; text-align: center; padding: 14px 20px; } .pg-404 .footer-links { justify-content: center; gap: 14px; } }